@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans SC',sans-serif;color:#28382e;background:#eff3e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 10%,#e1edd8,transparent 45%),radial-gradient(ellipse at 90% 70%,#f7e6d7,transparent 45%);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f58b68;outline-offset:3px}.app{width:min(100%,480px);margin:auto;padding:25px 23px max(22px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:17px;font-weight:900;letter-spacing:-.5px}.brand-icon{display:grid;place-items:center;background:#293e32;color:#f6faee;border-radius:11px;width:32px;height:32px;font-size:27px}.brand-en{font-size:8px;letter-spacing:1.5px;max-width:36px;line-height:1.3;font-weight:600;color:#71816e}.icon-btn{border:1px solid #d9dfd2;background:#ffffff70;border-radius:50%;width:33px;height:33px;color:#56684f}.intro{padding:30px 2px 25px;position:relative}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:#7d8c74;display:flex;align-items:center;gap:6px}.eyebrow span{width:6px;height:6px;background:#f78c6b;border-radius:50%}h1{font-size:34px;line-height:1.4;letter-spacing:-1.6px;margin:12px 0 10px;font-weight:900}h1 span{color:#659570}h1 i{font-size:65px;position:absolute;right:10px;top:38px;color:#ee9b72;font-style:normal;transform:rotate(9deg);text-shadow:4px 5px #e6d6bc}.intro p{font-size:11px;letter-spacing:1px;color:#82907a;margin:0}.game{background:#fffefa;border:1px solid #fff;border-radius:25px;padding:18px;box-shadow:0 14px 45px #455b3620}.game-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}.game-top>div{display:flex;align-items:center;gap:7px}.live-dot{height:6px;width:6px;border-radius:50%;background:#7aa481}.pill{font-size:9px;color:#86927b;background:#eff2e9;padding:3px 6px;border-radius:5px}.text-btn{border:0;background:none;font-size:10px;color:#84917c;padding:4px}.race{background:#f4f5ed;border:1px solid #e8ebdf;border-radius:14px;margin:14px 0 18px;padding:10px 12px}.race-label{display:flex;justify-content:space-between;color:#939b87;font-size:9px;margin-bottom:9px}.racer{display:flex;align-items:center;gap:7px;margin:7px 0;font-size:9px}.avatar{display:grid;place-items:center;border-radius:50%;width:25px;height:25px;background:#dae9cf;font-size:16px;border:2px solid #fff;flex-shrink:0}.racer .name{width:31px;color:#7b8772}.track{height:5px;background:#e3e6da;border-radius:9px;flex:1;position:relative}.fill{height:100%;background:var(--c);border-radius:9px;transition:width .7s}.runner{position:absolute;left:0;top:-8px;width:21px;height:21px;border-radius:50%;background:var(--c);display:grid;place-items:center;transition:left .7s;border:2px solid #fff;font-size:12px}.racer .percent{width:25px;text-align:right;font-size:9px;color:#77846e}.board-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.board-meta small{display:block;font-size:9px;color:#949e89;margin-bottom:4px}.board-meta b{font-size:15px}.board-meta b span{font-size:10px;color:#acb5a1;margin-left:4px}.timer{text-align:right}.timer b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:1px}.board-wrap{position:relative;border:1px solid #e6eadd;border-radius:15px;overflow:hidden;background:#fafbf6;background-image:radial-gradient(#dbe2d1 1px,transparent 1px);background-size:18px 18px}svg{display:block;width:100%;aspect-ratio:1;touch-action:manipulation}.arrow{cursor:pointer;transition:opacity .2s;outline:none}.arrow:hover{filter:brightness(.85)}.arrow.blocked{animation:shake .3s}.arrow.exit{pointer-events:none;animation:fly .35s forwards;--dx:0px;--dy:-400px}@keyframes fly{to{transform:translate(var(--dx),var(--dy));opacity:0}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}#board-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f9eff0;backdrop-filter:blur(4px);text-align:center;padding:18px}.cover-symbol{font-size:47px;background:#dceacf;color:#537a51;border-radius:22px;display:grid;place-items:center;width:75px;height:75px;transform:rotate(-8deg);box-shadow:5px 7px #e9eddc}h2{font-size:19px;margin:21px 0 7px}#board-cover p{font-size:10px;color:#8b9780;margin:0 0 20px}#board-cover small{font-size:9px;color:#98a18d;margin-top:12px}.primary{border:0;background:#2d4736;color:#fbfff4;border-radius:12px;padding:14px 22px;min-width:210px;font-size:13px;font-weight:700;box-shadow:0 4px #d0dbbf}.primary span{margin-left:24px}.board-bottom{display:flex;justify-content:space-between;font-size:9px;color:#95a088;padding:12px 0 15px}.board-bottom b{color:#75846d;font-size:10px}.friends{margin-top:17px;padding:14px 3px;display:flex;align-items:center;justify-content:space-between}.friends>div{display:flex;align-items:center;gap:10px}.mini-icon{font-size:25px;color:#849b76}.friends b{font-size:11px}.friends p{font-size:9px;color:#929d87;margin:4px 0 0}.friends button{background:#e3e9da;border:0;padding:9px 10px;border-radius:8px;color:#6d8164;font-size:10px;font-weight:600}footer{display:flex;justify-content:space-between;border-top:1px solid #dce3d2;padding-top:16px;font-size:9px;color:#a0a994;letter-spacing:1px}footer button{border:0;background:none;color:#829776;font-size:9px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:#293d32ed;color:white;padding:12px 20px;font-size:12px;border-radius:12px;opacity:0;transition:.2s;pointer-events:none;z-index:10;width:max-content;max-width:90%}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #fff;border-radius:23px;padding:30px 25px;background:#fffdf6;color:#2d4233;width:calc(100% - 40px);max-width:370px;box-shadow:0 25px 80px #1e352833}dialog::backdrop{background:#293d3266;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:10px;background:none;border:0;font-size:24px;color:#89967f}dialog h2{margin:5px 0 15px}dialog p{font-size:12px;line-height:1.9;color:#809074}dialog .primary{width:100%;margin-top:15px}.target{display:block;width:100%;padding:15px;border:1px solid #dfe6d7;background:#f3f6ec;border-radius:12px;margin:10px 0;color:#48613f}@media(max-width:380px){.app{padding:16px}.intro{padding-top:20px}h1{font-size:30px}.game{padding:14px}}@media(min-width:800px){.app{padding-top:35px}.intro{padding-top:26px}body:before{content:'PLAY YOUR WAY. ↗';position:fixed;left:5%;top:49%;writing-mode:vertical-rl;font-size:12px;letter-spacing:6px;color:#a5b29b}body:after{content:'03 PLAYERS / 01 WINNER';position:fixed;right:5%;top:45%;writing-mode:vertical-rl;font-size:10px;letter-spacing:4px;color:#a5b29b}}

.level-nav{display:flex;justify-content:space-between;align-items:center;margin:17px 0 12px;padding-bottom:10px;border-bottom:1px solid #ecede3;font-size:10px;color:#7b9170}.level-nav button{border:1px solid #dce5d2;background:#f1f6e9;color:#627f54;border-radius:8px;padding:7px 10px;font-size:10px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.level-cell{background:#f0f5e9;border:1px solid #dee7d5;border-radius:12px;padding:12px 2px;color:#4d6c43}.level-cell b{display:block;font-size:22px}.level-cell small{display:block;font-size:9px;margin-top:3px}.level-cell:disabled{opacity:.4;cursor:default}.level-cell.selected{border-color:#8ca979;box-shadow:inset 0 0 0 1px #8ca979}
.board-wrap{background-size:14px 14px}.arrow{transition:opacity .15s}.arrow .hit{stroke-linejoin:round;stroke-linecap:round}.rank-chip{text-align:right}.rank-chip small{font-size:9px;display:block;color:#929d87}.rank-chip b{font-size:23px;line-height:1.5}.rank-chip em{font-size:12px;color:#a0ac96;font-style:normal}.calm-note{display:flex;align-items:center;gap:12px;border-top:1px solid #edf0e6;padding:12px 3px 0}.calm-note>span{font-size:27px;color:#8ca378}.calm-note b{display:block;font-size:11px;color:#75896b}.calm-note small{display:block;font-size:9px;color:#a0aa94;margin-top:4px}.podium{display:grid;gap:9px}.result-row{border:1px solid #e0e7d6;border-radius:13px;background:#f4f7ee;padding:13px}.result-row.rank-1{background:#faf0d9;border-color:#ebdab3}.result-row.rank-2{background:#eef2f4;border-color:#dce3e6}.result-row.rank-3{background:#f5eae2;border-color:#e8d9cc}.result-name{display:flex;justify-content:space-between;align-items:center;font-size:11px}.result-name b{font-size:10px;color:#8f967e}.result-row h3{font-size:15px;margin:10px 0 5px}.result-row p{font-size:11px;line-height:1.8;margin:0}.result-row small{display:block;font-size:9px;color:#9ba28f;margin-top:7px}#modal{max-height:88dvh;overflow:auto}.board-wrap #board-cover h2{font-size:18px}
/* Game viewport: the board receives the remaining height. */
html,body{height:100%;overflow:hidden}body{min-height:0}.app{height:100vh;height:100dvh;max-width:480px;display:flex;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) 13px max(8px,env(safe-area-inset-bottom));overflow:hidden}header{flex:none;height:34px}.header-actions{display:flex;align-items:center;gap:7px}.room-btn{border:1px solid #d8e2cc;background:#e5eddc;color:#607952;font-size:10px;border-radius:9px;padding:8px 10px}.intro{padding:0 2px;flex:none}.intro>.eyebrow,.intro h1{display:none}.intro p{font-size:9px;letter-spacing:1px}.game{display:flex;flex-direction:column;flex:1;min-height:0;padding:12px 13px 6px;border-radius:21px;overflow:hidden}.game-top{flex:none;font-size:11px;min-height:20px}.race{flex:none;margin:7px 0 4px;padding:7px 9px}.race-label{font-size:8px;margin-bottom:3px}.racer{margin:4px 0;gap:6px}.racer .avatar{height:20px;width:20px;font-size:13px}.racer .runner{width:18px;height:18px;top:-6px;font-size:10px}.racer .percent{width:30px}.level-nav{flex:none;margin:5px 0 6px;padding-bottom:5px;font-size:9px}.level-nav button{padding:5px 9px}.board-meta{flex:none;margin-bottom:6px;min-height:33px}.board-meta small{margin-bottom:2px;font-size:8px}.board-meta b{font-size:13px}.rank-chip b{font-size:18px}.board-wrap{flex:1;min-height:0;width:100%}.board-wrap svg{width:100%;height:100%;aspect-ratio:auto!important}.board-bottom{flex:none;padding:7px 0 3px;gap:8px;white-space:nowrap}.board-bottom #hint{overflow:hidden;text-overflow:ellipsis}.calm-note{display:none}footer{flex:none;padding:0 3px;border:0;align-items:center;min-height:18px;font-size:8px}footer button{font-size:9px;padding:3px}#board-cover{padding:10px}.cover-symbol{width:49px;height:49px;font-size:34px;border-radius:15px}#board-cover h2{font-size:16px;margin:14px 0 7px}#board-cover p{font-size:9px;margin-bottom:14px}#board-cover small{font-size:8px;margin-top:9px}.primary{padding:11px 17px}.chapter-nav{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:10px;color:#839575}.chapter-nav button{font-size:10px;border:0;background:#edf3e5;border-radius:7px;padding:8px;color:#677e5d}.chapter-nav button:disabled{opacity:.35}.avatar-image{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:50%;vertical-align:middle}.result-name img{width:22px;height:22px}.toast{bottom:max(24px,env(safe-area-inset-bottom));font-size:11px}@media(max-height:680px){.app{gap:5px;padding-top:7px;padding-bottom:5px}.intro{display:none}.game{padding:9px 10px 4px}.race-label{display:none}.race{margin:5px 0 2px;padding:5px 8px}.racer{margin:3px 0}.level-nav{margin:3px 0 4px}.board-meta{min-height:29px}.board-meta small{display:none}.board-bottom{padding-top:5px;font-size:8px}.brand-en{display:none}#board-cover p{display:none}}@media(max-height:500px){.race{display:none}.game-top{min-height:15px}.level-nav{margin:2px 0}.board-meta{min-height:24px}.cover-symbol{display:none}.board-bottom #hint{display:none}}

button:disabled{opacity:.45;cursor:default}.room-input{display:block;width:100%;padding:12px;border:1px solid #dce5d2;border-radius:10px;margin-top:6px;font:inherit;font-size:14px;color:#3b5535;background:#f7faef}.room-label{display:block;font-size:11px;color:#7c8e6d;margin:12px 0}.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:15px 0}.avatar-choice{padding:7px 0;border:1px solid #e3e9d9;border-radius:10px;background:#f2f6e9;font-size:24px}.avatar-choice.chosen{background:#d9e9c8;border:2px solid #7d9e65}.room-code{font-variant-numeric:tabular-nums;letter-spacing:3px;color:#78925f}.lobby-players{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.lobby-person{background:#eef4e6;border:1px solid #dfe7d4;padding:14px 3px;border-radius:12px;text-align:center}.lobby-person>span{display:block;font-size:30px}.lobby-person b{display:block;font-size:11px;margin:6px 0;overflow-wrap:anywhere}.lobby-person small{font-size:9px;color:#91a17e}.lobby-person.empty{opacity:.6;border-style:dashed}.net-error{color:#b47865;font-size:11px;min-height:16px}
.audio-row{display:block;font-size:13px;color:#607957;margin:24px 0}.audio-row output{float:right;font-size:12px;color:#8ca07c}.audio-row input{display:block;width:100%;margin:17px 0;accent-color:#789b63;cursor:pointer;min-height:28px}.audio-buttons{display:flex;gap:8px}.audio-buttons button{font-size:11px;padding:12px 5px}.audio-note{font-size:10px!important;color:#9ba68e!important}