@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#1e343b;--muted:#78929b;--line:#dbe8e5;--green:#2b9684;--pale:#f3faf6;--coral:#f17d7c;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f8f5;color:var(--ink);font:500 14px/1.6 Outfit,"Noto Sans KR",sans-serif;min-width:300px;overflow-x:hidden}
button{font:inherit;cursor:pointer}
button:disabled{opacity:.48;cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:3px solid #e6a34a;outline-offset:3px}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.shell{max-width:1300px;margin:auto;padding:0 26px}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #d7e4e2}
.back{font-size:12px;letter-spacing:.07em;font-weight:800;color:#6f858c;white-space:nowrap}
.back:hover{color:var(--green)}
.wordmark{font:900 26px/1 Outfit,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.wordmark>span:last-child{color:var(--green)}
.wordmark-icon{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#e1f7ec;color:#e26a76;font-size:26px;vertical-align:-4px;margin-right:7px;box-shadow:inset 0 0 0 1px #cce7d9}
.sound-toggle{border:1px solid #d4e4dd;background:white;min-width:68px;padding:9px 12px;border-radius:10px;font-weight:800;color:#56747b}
.sound-toggle:hover{background:#eaf6f1}
.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0 22px}
.eyebrow{font:800 11px Outfit,sans-serif;letter-spacing:.18em;color:#279885}
.intro h1{font-size:clamp(36px,4.1vw,58px);line-height:1.17;letter-spacing:-.065em;margin:8px 0 9px;font-weight:900}
.intro h1 em{color:#ee7778;font-style:normal}
.intro p:not(.eyebrow){color:#6f868c;font-size:13px;margin:0;word-break:keep-all}
.record-tag{min-width:165px;display:grid;justify-items:end;gap:0;background:#fff;border:1px solid #d9e6de;border-radius:14px;padding:13px 18px;box-shadow:0 6px 20px #c6d9d01e}
.record-tag small{font-size:10px;color:#79939b;font-weight:800;letter-spacing:.1em}
.record-tag strong{font-size:37px;font-weight:900;line-height:1.2;color:#e87878;font-variant-numeric:tabular-nums}
.record-tag span{font-size:10px;font-weight:700;color:#79939b}
.game-layout{display:grid;grid-template-columns:minmax(0,720px) 257px;justify-content:center;gap:18px;align-items:start;max-width:1040px;margin:auto}
.game-shell{border-radius:19px;background:white;border:1px solid #d1e3dc;box-shadow:0 15px 48px #b4d0c02e;overflow:hidden;min-width:0}
.scorebar{min-height:79px;display:flex;align-items:center;gap:18px;padding:14px 17px;background:#fff}
.score-unit{display:grid;min-width:68px;gap:0}
.score-unit:nth-child(2){flex:1}
.score-unit small{font-size:10px;font-weight:800;color:#87a0a3;letter-spacing:.1em}
.score-unit strong{font:900 29px/1.2 Outfit,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.score-unit:first-child strong{color:#ee8081}
.score-unit strong span{font-size:13px;color:#91a6ac}
.score-unit:nth-child(4) strong{color:#318d7b}
.pause-btn{border:1px solid #d5e3de;border-radius:10px;background:#f7faf9;min-height:39px;padding:8px 10px;font-weight:800;font-size:12px}
.pause-btn:hover:not(:disabled){background:#e1f3ed}
.time-track{height:5px;background:#edf4f1}.time-track>div{height:100%;width:100%;background:linear-gradient(90deg,#62bfa3,#c7dd8c);transition:width .1s linear}
.time-track>div.low{background:#f28c81}
.stage{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#e8f8f4;isolation:isolate}
.stage canvas{width:100%;height:100%;display:block;touch-action:manipulation}
.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:18px;text-align:center;background:radial-gradient(ellipse at 48% 36%,#f9fffcf8,#f2faf6fa 92%);backdrop-filter:blur(2px);overflow-y:auto}
.overlay-kicker{color:#278e81;background:#e2f5ec;border:1px solid #c8e8da;padding:5px 11px;border-radius:7px;font:800 10px Outfit,sans-serif;letter-spacing:.12em}
.overlay h2{font:900 clamp(34px,5.8vw,73px)/1 Outfit,sans-serif;letter-spacing:-.06em;margin:5px 0 3px}
.overlay h2 em{color:#f17f80;font-style:normal}
.overlay p{margin:0 0 9px;color:#758b91;max-width:520px;line-height:1.6;font-size:12px;word-break:keep-all}
.overlay p b{color:#a25c78}
.overlay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.overlay-actions button{min-height:45px;border-radius:10px;padding:11px 18px;font-weight:900;white-space:nowrap}
.primary{border:1px solid #278e78;background:#39ae91;color:white;box-shadow:0 6px 14px #39ae9129}
.primary:hover{background:#218d76}
.primary span{font-size:19px}
.secondary{background:#fff;border:1px solid #c7dcd5;color:#37636a}
.secondary:hover{background:#eef8f4}
.instructions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-size:10px;color:#93a4a9;margin-top:10px}
kbd{font:700 10px Outfit,sans-serif;border:1px solid #cbdad6;background:#fff;border-radius:4px;padding:3px 6px;margin:0 2px}
.result-score{font:900 clamp(34px,6.8vw,66px)/1 Outfit,sans-serif;color:#e77978;letter-spacing:-.055em}
.result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:8px 0 14px}
.result-stats div{display:grid;gap:2px}
.result-stats small{font-size:10px;color:#90a3a6;font-weight:700}
.result-stats strong{font:900 26px Outfit,sans-serif}
.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.92fr) minmax(0,1fr);gap:12px;align-items:stretch;background:#fff;padding:14px}
.move-btn{border:2px solid #a4d4c5;background:#daf5ea;min-height:89px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:10px;color:#25685b;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .11s,background-color .11s}
.move-btn.right{background:#e5f0fb;border-color:#c7dbea;color:#3e7298}
.move-btn:active:not(:disabled),.move-btn.pressed{transform:translateY(2px) scale(.98);filter:brightness(.97)}
.move-icon{font-size:44px;font-weight:800;line-height:1}
.move-label{display:grid;gap:0;text-align:left}
.move-label strong{font:900 22px Outfit,sans-serif;letter-spacing:.03em;line-height:1.2}
.move-label small{font:700 11px Outfit,sans-serif;opacity:.8}
.control-center{display:grid;align-content:center;justify-items:center;gap:5px;text-align:center}
.controller-caption{font:900 9px Outfit,sans-serif;letter-spacing:.11em;color:#61a293}
#liveStatus{font-size:11px;color:#789294;line-height:1.3;word-break:keep-all;min-height:30px}
.position-track{position:relative;max-width:160px;width:100%;height:8px;border-radius:15px;
 background:linear-gradient(90deg,#b9dfe1,#8bccb0);margin-top:10px}
.position-track:before,.position-track:after{content:"";position:absolute;top:2px;width:4px;height:4px;
 background:#fff;border-radius:50%}
.position-track:before{left:2px}.position-track:after{right:2px}
#positionThumb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 width:17px;height:17px;border:3px solid #fff;border-radius:50%;
 background:#378f88;box-shadow:0 2px 6px #367d6d40;transition:left .085s linear}
.side{border:1px solid #d7e8df;background:white;border-radius:18px;box-shadow:0 10px 30px #bdd7ca22;padding:21px}
.side-head h2{font:900 25px Outfit,"Noto Sans KR",sans-serif;letter-spacing:-.06em;margin:8px 0}
.side>p{font-size:11px;color:#8da2a4;margin:7px 0 18px;line-height:1.75}
.item-guide{display:grid;gap:13px}
.guide-item{display:flex;align-items:center;gap:11px}
.token{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;flex:none;color:white;font-size:25px;font-weight:900}
.token.apple{background:#f47f89}.token.pear{background:#92c99d}.token.gold{background:#efc363}.token.poison{background:#9874b4}
.guide-item>div{display:grid;gap:0}.guide-item strong{font-size:12px;font-weight:800}.guide-item small{font-size:11px;color:#9aafb1}
.guide-item.hazard strong{color:#a36b90}
.streak-note{margin-top:24px;padding:14px;border-radius:12px;background:#eef9f4;border:1px solid #d2e9df}
.streak-note>span{font:800 9px Outfit,sans-serif;letter-spacing:.13em;color:#3c9983}
.streak-note strong{font-size:12px;display:block;margin:5px 0 6px}
.streak-note p{font-size:10px;color:#7b9a92;margin:0;line-height:1.65;word-break:keep-all}
.share-btn{width:100%;margin-top:14px;min-height:42px;border-radius:10px;background:#fff;border:1px solid #c8dfd8;color:#427b70;font-size:11px;font-weight:800}
.share-btn:hover{background:#e9f8f3}
.below{padding:33px 0 38px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.below h2{font-size:22px;margin:4px 0;font-weight:900;letter-spacing:-.05em}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.pill-row span{background:white;border:1px solid #dce9e3;border-radius:100px;padding:7px 10px;color:#7c9998;font-size:10px;font-weight:800}
footer{border-top:1px solid #d5e4db;padding:18px 0 26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:10px;color:#91a4a8;font-weight:700;letter-spacing:.04em}
footer a:hover{color:#208f7c}
@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr);max-width:720px}.game-shell{max-width:720px;width:100%;margin-inline:auto}.side{display:grid;grid-template-columns:1fr 1fr;gap:8px 21px}.side-head,.side>p,.item-guide,.streak-note,.share-btn{grid-column:1/-1}.item-guide{grid-template-columns:repeat(4,1fr)}.guide-item{gap:5px}.guide-item .token{width:36px;height:36px}.streak-note{margin-top:6px}.share-btn{margin-top:0}}
@media(max-width:720px){
 .shell{padding:0 11px}.nav{min-height:61px;gap:7px}.back{font-size:10px}.wordmark{font-size:20px}.wordmark-icon{width:27px;height:27px;font-size:21px;margin-right:2px;vertical-align:-4px}.sound-toggle{font-size:10px;padding:6px 8px;min-width:48px}
 .intro{padding:19px 0 15px;gap:10px}.intro h1{font-size:clamp(29px,7.3vw,46px)}.intro p:not(.eyebrow){font-size:11px}.eyebrow{font-size:9px}.record-tag{padding:8px 9px;min-width:99px;border-radius:9px}.record-tag small,.record-tag span{font-size:9px}.record-tag strong{font-size:26px}
 .game-shell{border-radius:12px}.scorebar{gap:9px;min-height:61px;padding:10px 9px}.score-unit{min-width:0}.score-unit small{font-size:8px}.score-unit strong{font-size:20px}.score-unit strong span{font-size:10px}.score-unit:nth-child(4) strong span{display:none}.pause-btn{font-size:15px;padding:4px 7px;min-height:31px}.pause-btn span{display:none}
 .controls{padding:9px;gap:6px;grid-template-columns:minmax(0,1fr) minmax(86px,.82fr) minmax(0,1fr)}.move-btn{min-height:77px;gap:5px;border-width:1px;border-radius:9px;padding:5px}.move-icon{font-size:32px}.move-label strong{font-size:15px}.move-label small{font-size:9px}.controller-caption{font-size:8px}#liveStatus{font-size:9px;min-height:0}
 .position-track{height:6px;margin-top:7px}#positionThumb{width:14px;height:14px}
 .side{padding:15px}.item-guide{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-item .token{width:35px;height:35px}.below{padding:28px 0;display:block}.below h2{font-size:19px}.pill-row{justify-content:flex-start;margin-top:12px}.pill-row span{font-size:9px}
 .stage>.overlay{position:fixed;inset:0;max-height:100dvh;overflow-y:auto;justify-content:center;padding:calc(18px + env(safe-area-inset-top)) 13px calc(18px + env(safe-area-inset-bottom));background:#f5fdfaef;backdrop-filter:blur(14px)}
 .overlay h2{font-size:clamp(39px,10vw,61px)}.overlay p{font-size:13px}.overlay-actions button{font-size:12px;min-height:42px}.instructions{font-size:9px}.result-score{font-size:52px}
}
@media(max-height:490px) and (max-width:720px){.stage>.overlay{justify-content:flex-start}}
@media(max-width:360px){.scorebar{gap:5px}.score-unit strong{font-size:17px}.move-icon{font-size:27px}.move-label strong{font-size:13px}.controller-caption{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* v2: deliberate 4:3 arcade proportions, larger readable character,
   no visual lane borders, restrained premium flat finish. */
.intro{max-width:1035px;margin-inline:auto}
.below{max-width:1035px;margin-inline:auto}
.stage{background:#e8fbf5;isolation:isolate}
.game-shell{border-color:#cbded9;box-shadow:0 17px 45px #84b6a41e,0 3px 0 #e1efe8}
.controls{background:linear-gradient(180deg,#fff,#f8fcfa)}
.move-btn{transition:transform .08s ease,background-color .15s ease}
.move-btn:active:not(:disabled){transform:translateY(2px) scale(.985)}
.controller-caption{color:#388d81}
@media(max-width:720px){.game-layout{width:100%}.stage{aspect-ratio:4/3}.position-track{max-width:105px}}
@media(prefers-reduced-motion:reduce){#positionThumb{transition:none}}