:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:0px;--safe-right:0px;--paper:#10242e;--ink:#eef9f4;--muted:#abc5c7;--teal:#74d4bc;--peach:#e6c47a;--lilac:#b7a1e7;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR','Malgun Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #df825e;outline-offset:4px}button:disabled{cursor:wait}button{transition:transform .15s,background .15s}button:active{transform:scale(.98)}[hidden]{display:none!important}#game-frame{position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:#2c457d;overflow:hidden}#GameCanvas{display:block;width:100%;height:100%;outline:none;touch-action:none}#comma-shell{position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);z-index:20;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;color:var(--ink);scrollbar-width:thin}#comma-shell[data-busy=true]{cursor:progress}#comma-shell[data-busy=true] button[data-action]{opacity:.65;pointer-events:none}.comma-header{max-width:540px;margin:auto;padding:24px 27px 12px;display:flex;align-items:center;justify-content:space-between}.comma-brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.6px;font-size:18px}.icon-button{background:transparent;border:1px solid #78b8ad55;color:var(--ink);border-radius:50%;width:38px;height:38px;font-size:25px}.comma-page{max-width:540px;margin:auto;padding:29px 28px 20px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.35px;display:flex;align-items:center;gap:6px;color:#a1d5c8}.eyebrow>span{display:inline-block;width:5px;height:5px;background:#85dcb9;border-radius:50%}h1{font-size:43px;line-height:1.3;font-weight:800;letter-spacing:-2px;margin:16px 0 12px;word-break:keep-all}.title-dot{color:#90dfc1}.hero-description{font-size:14px;line-height:1.75;color:#b0c8cc;margin:0}.comma-art{height:155px;width:235px;position:relative;margin:1px 0 3px auto}.art-square{position:absolute;width:62px;height:62px;border-radius:17px}.one{background:#7ed8b5;left:17px;top:63px;transform:rotate(-12deg)}.two{background:#e6c47a;left:78px;top:18px;transform:rotate(10deg)}.three{background:#68cdd7;left:88px;top:84px;transform:rotate(7deg)}.art-comma{position:absolute;width:66px;height:66px;background:#b7a1e7;border-radius:18px 18px 26px 18px;left:159px;top:57px;transform:rotate(-7deg)}.art-comma:after{content:'';position:absolute;width:33px;height:30px;background:#b7a1e7;right:0;bottom:-18px;border-radius:0 0 35px 0;transform:skewY(-20deg)}.art-spark{position:absolute;left:16px;top:15px;font-size:29px;color:#a4e6d5}.art-dot{position:absolute;right:4px;top:12px;width:9px;height:9px;background:#d6c4ff;border-radius:50%}.record-chip{display:flex;align-items:baseline;gap:6px;font-size:12px;color:#b0c8cc;padding:0 0 15px}.record-chip strong{margin-left:auto;color:#dff8ed;font-size:20px;font-variant-numeric:tabular-nums}.classic-card{display:flex;width:100%;border:0;background:var(--teal);border-radius:21px;color:#fff;padding:23px 20px;gap:14px;text-align:left;align-items:center;box-shadow:0 9px 20px #74d4bc12}.card-symbol{font-size:36px;color:#123e3b}.classic-card strong{display:block;font-size:21px;letter-spacing:-.8px}.classic-card small{display:block;font-size:11px;margin-top:6px;color:#184a43;letter-spacing:-.2px}.card-arrow{margin-left:auto;font-size:28px;font-weight:300}.prepare-status{font-size:11px;color:#adc7c9;text-align:center;margin:18px 0 8px}footer{text-align:center;color:#9ab4ba;font-size:10px;padding:10px 0 0;letter-spacing:.3px}.text-button{display:block;margin:15px auto;border:0;background:transparent;color:#b4ddd1;padding:11px;font-size:13px}.result-page{text-align:center;padding-top:45px}.result-page .eyebrow{justify-content:center}.result-page h1{font-size:32px}.result-art{font-size:78px;color:#9bdfc3;margin:0 0 20px}.result-page>p{color:#bed1d1;font-size:14px}.result-score{margin:37px 0 14px;display:flex;gap:6px;justify-content:center;align-items:baseline;flex-wrap:wrap}.result-score small{width:100%;font-size:12px;color:#accbc6}.result-score strong{font-size:64px;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-2px}.result-score>span{color:#bbd7d0;font-size:14px}.result-best{margin-bottom:38px!important}.primary-button,.soft-button{display:block;width:100%;border:0;border-radius:15px;padding:17px;font-size:15px;font-weight:700;margin:10px 0}.primary-button{background:var(--teal);color:white}.soft-button{background:#29434d;color:#d4ece5}#comma-dialog,.port-backdrop{position:fixed;inset:0;z-index:100;background:#05131cbb;display:flex;align-items:center;justify-content:center;padding:25px;backdrop-filter:blur(5px);touch-action:manipulation}.comma-modal,.port-dialog{background:#182e39;border:1px solid #89b8ad33;border-radius:26px;padding:27px;width:min(100%,390px);max-height:85dvh;overflow-y:auto;color:var(--ink);box-shadow:0 20px 65px #030c1566;touch-action:pan-y}.comma-modal h2,.port-dialog h2{font-size:24px;margin:0 0 13px;letter-spacing:-1px}.comma-modal p,.port-dialog p{font-size:13px;line-height:1.8;white-space:pre-line;color:#b6cdd0;margin:0 0 20px}.comma-modal button[aria-pressed]{display:flex;align-items:center;justify-content:space-between;background:#233d47;color:#d6ede6;font-size:14px;padding:15px 17px}.comma-modal button[aria-pressed]:after{content:'';display:block;width:30px;height:18px;border-radius:12px;background:#5b777e;box-shadow:inset 12px 0 #a5bbbf}.comma-modal button[aria-pressed=true]:after{background:#b5efdb;box-shadow:inset -12px 0 #59b99f}.port-dialog button{display:block;width:100%;padding:14px;border:0;border-radius:13px;background:var(--teal);color:white;margin-top:9px;font-weight:700}#comma-hud{position:absolute;z-index:14;top:calc(var(--safe-top) + 8px);left:14px;right:54px;display:flex;gap:11px;align-items:center;pointer-events:none;color:#d7eee7;font-size:11px;letter-spacing:.8px}#comma-hud button{border:0;border-radius:50%;background:#0d242dcc;color:white;width:32px;height:30px;pointer-events:auto;font-size:21px}#comma-hud button:last-child{margin-left:auto}#port-exit{position:fixed;top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 10px);width:31px;height:30px;border:0;border-radius:50%;color:#c4e2db;background:#25424b;z-index:110;font-size:21px}#toast{position:fixed;bottom:calc(var(--safe-bottom) + 25px);left:20px;right:20px;z-index:200;color:white;background:#152f3aed;padding:14px;border-radius:15px;text-align:center;font-size:13px}#failure{position:absolute;inset:20px;z-index:99;pointer-events:none;white-space:pre-wrap;color:#fff;font-size:13px}#retry{position:absolute;z-index:100;top:50%;left:30%;width:40%;padding:15px;border:0;border-radius:15px;background:var(--teal);color:white}#splash{position:absolute;inset:0;display:grid;place-content:center;background:#10242e;color:var(--teal);font-size:20px;z-index:9}.progress-bar{width:240px;height:4px;background:#32535a;margin-top:20px}.progress-bar span{display:block;height:100%;background:var(--teal);width:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:700px){.comma-header{padding-top:35px}.comma-page{padding-top:36px}.comma-art{height:175px;margin-top:10px}}@media(max-height:730px){.comma-header{padding-top:15px}.comma-page{padding-top:15px}h1{font-size:35px;margin-top:13px}.comma-art{height:115px;transform:scale(.82);transform-origin:right top;margin-bottom:-10px}.classic-card{padding:18px}.prepare-status{margin-top:10px}footer{padding-top:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.comma-header .icon-button{margin-right:28px}

.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0}.theme-choice{border:2px solid transparent;background:var(--theme-color);color:#fff;border-radius:12px;padding:17px 0;font-weight:700}.theme-choice[aria-pressed=true]{border-color:#d5fff1;box-shadow:0 0 0 3px #70d7bd}

@media(prefers-reduced-motion:no-preference){.comma-page{animation:comma-appear .35s ease-out}.comma-modal,.port-dialog{animation:comma-pop .2s ease-out}.comma-art{animation:comma-breathe 6s ease-in-out infinite}}@keyframes comma-appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes comma-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes comma-breathe{0%,100%{translate:0 0}50%{translate:0 -6px}}

.comma-modal{position:relative}.comma-modal h2{padding-right:27px}.modal-close{position:absolute;right:19px;top:19px;border:0;border-radius:50%;background:#29434d;color:#d4ece5;font-size:22px;width:30px;height:30px;line-height:1}

/* Original blue family, with a small shared color shift. */
:root{--paper:#354b80;--ink:#f6f8ff;--muted:#b8c7e5;--teal:#5c8ee2;--peach:#e6c47a;--lilac:#b7a1e7}
#comma-shell{background:linear-gradient(180deg,#425d9c,#354b80 65%)}
.comma-brand,h1{color:#f6f8ff}.title-dot,.eyebrow,.hero-description,.record-chip,.prepare-status,footer{color:#c7d6f3}
.record-chip strong{color:#ffdc79}.classic-card{background:#5688db;color:#fff;box-shadow:0 5px 0 #2c4780}
.classic-card small,.card-symbol{color:#e3edff}


.primary-button,.port-dialog button{background:#5688db;color:#fff}.soft-button,.modal-close{background:#3d5688;color:#edf2ff}
.comma-modal,.port-dialog{background:#30466f;border-color:#718dc44d}
.comma-modal p,.port-dialog p,.text-button,.result-page>p{color:#d0ddf4}
.comma-modal button[aria-pressed]{background:#3d5688;color:#f1f5ff}
#splash{background:#354b80}#comma-hud button,#port-exit{background:#263e68dc;color:#edf4ff}
#comma-hud>span{padding:4px 7px;background:#263e68e6;border-radius:8px;color:#edf4ff}
/* No sprite replacement, geometry changes, font override or per-game palette. */
#game-frame{isolation:isolate}
#GameCanvas{filter:hue-rotate(-5deg) saturate(.98)}
#comma-loading{position:fixed;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);padding:28px;text-align:center;min-height:100%;touch-action:none}
#comma-loading h2{font-size:30px;letter-spacing:-1px;margin:12px 0 15px}#comma-loading p{color:#c7d6f3;font-size:14px;line-height:1.7;margin:5px 0}.loading-spinner{width:34px;height:34px;border:3px solid #b9d3ff33;border-top-color:#d9e8ff;border-radius:50%;margin-bottom:28px;animation:comma-loading-spin 1s linear infinite}@keyframes comma-loading-spin{to{transform:rotate(360deg)}}
#comma-game-title{max-width:calc(100vw - 160px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}

.adventure-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:21px 20px;text-align:left;border:1px solid #97b1dc55;border-radius:21px;background:#485e94;color:#f6f8ff;box-shadow:0 5px 0 #293e6b}
.adventure-card strong{display:block;font-size:21px;letter-spacing:-.8px}.adventure-card small{display:block;font-size:11px;color:#d2def5;margin-top:6px}.adventure-card .card-symbol{font-size:36px;color:#e2ceff}
.port-dialog .port-discard{background:#485e94;color:#ffe0df;border:1px solid #df9d9a66}.port-dialog button:last-child{background:#3d5688;color:#edf4ff}.port-dialog button:disabled{opacity:.6}

/* Lobby: a light code-drawn puzzle stage, with the core game's beveled blocks. */
#comma-shell[data-view=home]{background:radial-gradient(ellipse at 50% 27%,#4c70b6 0,transparent 50%),linear-gradient(170deg,#385c9b,#2a437a 70%,#223866);isolation:isolate}
#comma-shell[data-view=home]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#b4d5ff06 1px,transparent 1px),linear-gradient(90deg,#b4d5ff06 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(transparent,#000 25%,#000 80%,transparent)}
.comma-header{max-width:440px;padding:19px 23px 0;height:64px;position:relative}
.comma-brand{font-size:13px;letter-spacing:.2px;color:#d6e7ff;gap:8px}.comma-brand img{width:29px;height:29px;filter:drop-shadow(0 3px 0 #182e59)}
.comma-header .icon-button{margin-right:23px;width:36px;height:36px;border-radius:12px;background:linear-gradient(#5d7eb4,#3d5c92);border:1px solid #a4c4ed55;box-shadow:inset 0 2px #ffffff18,0 3px 0 #213b70}
.comma-header .icon-button svg{width:23px;height:23px;fill:none;stroke:#eef5ff;stroke-width:1.8;stroke-linejoin:round}
#comma-home{max-width:420px;min-height:calc(100% - 64px);padding:9px 25px 22px;display:flex;flex-direction:column;align-items:center;position:relative}
.lobby-title{text-align:center;z-index:1}.lobby-kicker{display:flex;align-items:center;justify-content:center;gap:9px;margin:8px 0 5px;color:#bcd6ff;font-size:11px;letter-spacing:2px;font-weight:700}.lobby-kicker span{width:17px;height:1px;background:#b2d1fa66}
#comma-home .game-logo{font-size:49px;line-height:1.25;font-weight:950;letter-spacing:-3.5px;white-space:nowrap;margin:0;color:#f9fcff;-webkit-text-stroke:1px #fff7;text-shadow:0 2px 0 #bfdbf4,0 5px 0 #182f64,0 7px 0 #182f64,0 10px 14px #14264e66;transform:rotate(-3deg)}
.game-logo span{color:#ffdc6d;-webkit-text-stroke-color:#fff1b566;text-shadow:0 2px 0 #d09c3b,0 5px 0 #503e4f,0 7px 0 #503e4f,0 10px 14px #14264e66}.game-logo b{display:inline-block;font-size:72px;line-height:0;color:#ffdc6d;transform:translate(-1px,-3px);font-family:Georgia,serif}
.game-tagline{font-size:12px;color:#d9e9ff;letter-spacing:.1px;margin:14px 0 0}
#comma-home .record-chip{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:230px;margin:8px 0 23px;padding:10px 18px;border-radius:30px;color:#cbdffd;font-size:11px;background:#1b326360;box-shadow:inset 0 1px 3px #11274e66,0 1px #92b3ea22;border:1px solid #7e9cce33}
.record-chip svg{width:26px;height:26px;fill:#ffcd58;stroke:#e5a33b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px #26395e)}
#comma-home .record-chip strong{font-size:21px;line-height:1;letter-spacing:.4px;margin-left:7px;color:#ffe28a;text-shadow:0 2px #1c315c;font-weight:850}
.mode-select{width:100%;display:grid;gap:18px}
#comma-home .mode-card{position:relative;width:100%;margin:0;padding:15px 16px 17px 13px;min-height:99px;display:flex;align-items:center;gap:13px;border-radius:19px;text-align:left;border:2px solid #9fcfff99;background:linear-gradient(150deg,#538fe7 0%,#4075cf 65%,#3b65b5);box-shadow:inset 0 3px #e8f8ff33,inset 0 -3px #183c8b22,0 6px 0 #203a72,0 10px 14px #152c5922;overflow:visible;color:#fff;transition:transform .14s,filter .14s,box-shadow .14s}
#comma-home .mode-card:before{content:'';position:absolute;inset:3px;border:1px solid #ffffff13;border-radius:14px;pointer-events:none;background:radial-gradient(ellipse at 30% -20%,#ffffff20,transparent 65%)}
#comma-home .mode-card:active{transform:translateY(4px);box-shadow:inset 0 2px #fff2,0 2px 0 #203a72;filter:brightness(1.05)}
#comma-home .adventure-card{border-color:#b3a0ff99;background:linear-gradient(150deg,#8d6cdb,#7554c1 65%,#6248ad);box-shadow:inset 0 3px #eee3ff33,inset 0 -3px #3d256c22,0 6px 0 #392f6d,0 10px 14px #152c5922}
.mode-art{position:relative;display:block;width:76px;height:76px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 2px #1c315b55)}
.mode-copy{flex:1;min-width:0;z-index:1}#comma-home .mode-copy strong{display:block;font-size:28px;font-weight:900;line-height:1.25;letter-spacing:-1px;text-shadow:0 2px 0 #27498499}#comma-home .mode-copy small{display:block;color:#e5f1ff;font-size:11px;letter-spacing:-.2px;margin-top:5px;white-space:nowrap}.adventure-card .mode-copy strong{text-shadow:0 2px 0 #4c318499!important}.adventure-card .mode-copy small{color:#f0e7ff!important}
.mode-play{display:grid;place-content:center;flex-shrink:0;width:37px;height:37px;background:linear-gradient(#ffe796,#ffc750);border-radius:50%;border:2px solid #ffedb4;box-shadow:0 3px 0 #98632977,inset 0 2px #fff7;z-index:1}.mode-play svg{width:25px;height:25px;fill:#8b592b;filter:drop-shadow(0 1px #fff7)}
#comma-home .prepare-status{margin:20px 0 0;color:#bad1f2;font-size:10px;min-height:14px}#comma-home footer{margin-top:auto;padding-top:18px;color:#9db8e0;font-size:10px}#comma-home footer span{color:#ebcb7d;margin-right:4px;font-size:9px}
@media(min-height:850px){#comma-home{padding-top:25px}#comma-home .record-chip{margin-bottom:28px}.mode-select{gap:21px}#comma-home .mode-card{min-height:109px}}
@media(max-height:740px){.comma-header{height:55px;padding-top:11px}#comma-home{min-height:calc(100% - 55px);padding-top:4px;padding-bottom:15px}.lobby-kicker{margin-top:0}#comma-home .game-logo{font-size:43px}.game-tagline{margin-top:10px}#comma-home .record-chip{margin:8px 0 17px;padding:7px 14px}#comma-home .mode-card{min-height:87px;padding-top:10px;padding-bottom:12px}.mode-select{gap:15px}#comma-home footer{padding-top:12px}#comma-home .prepare-status{margin-top:16px}}
@media(max-width:350px){#comma-home{padding-left:19px;padding-right:19px}.mode-art{width:56px;scale:.9}#comma-home .mode-card{gap:8px;padding-right:11px}.mode-play{width:33px;height:33px}#comma-home .mode-copy strong{font-size:25px}.mode-copy small{font-size:10px!important}}
@media(max-height:650px){.comma-header{height:48px;padding-top:8px}#comma-home{min-height:calc(100% - 48px);padding-top:2px;padding-bottom:12px}#comma-home .game-logo{font-size:39px}.lobby-kicker{font-size:10px}.game-tagline{font-size:11px;margin-top:9px}#comma-home .record-chip{padding:6px 14px;margin:7px 0 14px}#comma-home .mode-card{min-height:78px;padding-top:7px;padding-bottom:9px}.mode-art{height:58px}#comma-home .mode-copy strong{font-size:25px}.mode-select{gap:14px}#comma-home .prepare-status{margin-top:14px}#comma-home footer{display:none}}
@media(max-height:590px){#comma-home .record-chip{margin-top:4px;margin-bottom:12px}}
/* Scale the stage as a whole; reserve its full visual height above the record. */
@media(max-height:740px){}

.game-logo .logo-spark{font-family:inherit;font-size:28px;transform:translate(5px,-10px);text-shadow:0 3px 0 #7c5c32,0 0 15px #ffd77566}
@media(prefers-reduced-motion:no-preference){.mode-play{animation:play-glow 5s ease-in-out infinite}.adventure-card .mode-play{animation-delay:1s}}
@keyframes play-glow{0%,90%,100%{filter:brightness(1)}95%{filter:brightness(1.15)}}

/* Shell polish only: the Cocos canvas and playfield keep their original style. */
#comma-home .mode-card{min-height:111px;padding-top:14px;padding-bottom:15px}
#comma-home .mode-copy strong{font-size:26px}
#comma-home .mode-copy small{white-space:normal;line-height:1.45;font-weight:700}
.mode-detail{display:block;font-size:10px;line-height:1.4;color:#c5dcff;margin-top:5px;letter-spacing:-.25px}
.adventure-card .mode-detail{color:#e1d5ff}
.challenge-meter{display:block;height:4px;max-width:155px;background:#3c2b7370;border-radius:8px;overflow:hidden;margin-top:8px;box-shadow:inset 0 1px #34245e66}
.challenge-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe39b,#ffc75a);border-radius:inherit;transition:width .4s ease}
#comma-home .record-chip{margin-bottom:20px}
#comma-shell[data-view=result]{background:radial-gradient(ellipse at 50% 21%,#536ca8 0,#354f86 42%,#263e70 85%)}
.result-page{position:relative;isolation:isolate;max-width:410px;padding:6px 24px 24px;overflow:hidden;text-align:center}
.result-hero{position:relative;width:260px;height:183px;margin:0 auto 0;pointer-events:none}
.result-hero img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 6px #162d5c66);opacity:0;transition:opacity .18s}
.result-page[data-art-ready=true] .result-hero img{opacity:1}
.result-aura{position:absolute;inset:-35px -45px -20px;opacity:.65;background:radial-gradient(ellipse at 50% 55%,#a1b9ff88,transparent 61%);border-radius:50%}
.result-page[data-record=true] .result-aura{background:radial-gradient(ellipse at 50% 55%,#ffcf6b70,transparent 61%)}
.result-page .eyebrow{justify-content:center;display:inline-flex;position:relative;min-width:183px;padding:6px 18px;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.8px;color:#c8e7ff;background:linear-gradient(90deg,transparent,#20376599,transparent)}
.result-page .eyebrow:before,.result-page .eyebrow:after{content:'';width:20px;height:1px;position:absolute;top:50%;background:linear-gradient(90deg,transparent,#c2d9ff77);left:-10px}.result-page .eyebrow:after{left:auto;right:-10px;rotate:180deg}
.result-page h1{font-size:30px;line-height:1.25;font-weight:900;letter-spacing:-1.6px;margin:8px 0 8px;color:#f4fbff;text-shadow:0 2px 0 #6585b9,0 4px 0 #1c3468,0 7px 12px #172e6666}
.result-page>p{font-size:11px;line-height:1.6;margin:0 0 16px;color:#c8d9f7}
.result-scoreboard{position:relative;border:2px solid #7da2d066;border-radius:20px;padding:15px 18px 0;margin:16px 0 19px;background:linear-gradient(150deg,#243e71,#1e335e);box-shadow:inset 0 2px #b5d7ff17,inset 0 -3px #10264e55,0 5px 0 #172e59,0 11px 18px #172c5044}
.result-scoreboard:before{content:'';position:absolute;inset:4px;border:1px solid #a8cfff0f;border-radius:14px;pointer-events:none}
.result-page .result-score{position:relative;margin:0 0 14px;gap:6px}.result-score small{font-size:10px;font-weight:700;letter-spacing:1px;color:#abc5ee}.result-score strong{color:#f9fcff;font-size:62px;line-height:1.2;font-weight:900;text-shadow:0 3px 0 #729ac5,0 5px 0 #0c244d;letter-spacing:-1.5px}.result-score>span{color:#bcd3f5;font-size:12px}
.result-summary{display:grid;grid-template-columns:1fr 1fr;padding:12px 0 13px;margin:0;border:0;border-top:1px solid #8facdc33;border-radius:0;background:transparent}.result-summary>div+div{border-left:1px solid #abc5ed30}.result-summary small{display:block;color:#a9c5ec;font-size:10px;margin-bottom:5px}.result-summary strong{font-variant-numeric:tabular-nums;font-size:24px;color:#f0f7ff;text-shadow:0 2px #122b54}.result-summary span{font-size:10px;color:#b0caef;margin-left:4px}.result-page .result-best{position:relative;border-top:1px solid #8facdc25;color:#bfd3f2;font-size:11px;margin:0!important;padding:10px 0 12px}.result-best strong{color:#ffe199;margin:0 4px;font-size:14px}
.result-page .primary-button{position:relative;padding:17px 14px;border-radius:16px;background:linear-gradient(#ffe690,#ffcd4e 48%,#edb53a);border:1px solid #fff0b1;color:#68411b;font-size:18px;font-weight:900;text-shadow:0 1px #fff4c6;box-shadow:inset 0 3px #fff8ca99,inset 0 -3px #c88b2e66,0 5px 0 #895c32,0 8px 12px #172e5b55;margin:0 0 17px;letter-spacing:-.4px}
.result-page .primary-button:after{content:'';position:absolute;inset:4px;border:1px solid #fff7ce77;border-radius:11px;pointer-events:none}
.result-page .primary-button:active{translate:0 3px;box-shadow:inset 0 2px #fff7,0 2px 0 #895c32}
.result-page .soft-button{background:linear-gradient(#577fb9,#42659d);border:1px solid #8fb2e070;box-shadow:inset 0 2px #c5e1ff22,0 3px #203a68;border-radius:14px;padding:13px;font-size:13px;color:#e9f3ff;margin:0 0 7px}
.result-page .text-button{margin:0 auto;padding:12px;font-size:11px;color:#bdcfee}
.result-page[data-record=true] .eyebrow{color:#ffe29a}.result-page[data-record=true] h1{color:#fff0b5;text-shadow:0 2px #b98536,0 4px #4c3c48,0 7px 12px #162b6266}.result-page[data-record=true] .result-score strong{color:#ffe294;text-shadow:0 3px #af7b31,0 5px #152749}
.result-confetti{position:absolute;inset:0 0 auto;height:440px;pointer-events:none;z-index:-1;overflow:hidden}.result-confetti i{position:absolute;left:var(--x);top:-12px;width:7px;height:13px;border-radius:2px;background:var(--color);opacity:0}
@media(prefers-reduced-motion:no-preference){.result-page[data-art-ready=true] .result-hero img{animation:reward-arrive .65s cubic-bezier(.2,.8,.2,1)}.result-page[data-counting=false] .result-score strong{animation:score-settle .25s ease-out}.result-confetti i{animation:result-confetti-fall 1.9s var(--delay) ease-out forwards}}
@keyframes reward-arrive{from{transform:translateY(9px) scale(.86)}60%{transform:scale(1.045)}to{transform:scale(1)}}@keyframes score-settle{50%{transform:scale(1.035)}}@keyframes result-confetti-fall{8%{opacity:.9}to{opacity:0;transform:translateY(430px) rotate(var(--spin))}}
.settings-panel{padding:24px;width:min(100%,390px)}.settings-panel>h2{font-size:24px;margin-bottom:7px}.settings-panel>p{font-size:12px;margin-bottom:18px}
.settings-switches{border:1px solid #94b4e133;border-radius:16px;background:#223c674d;padding:0 15px;margin:0 0 16px}.comma-modal .settings-toggle[aria-pressed]{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#eff5ff;font-size:14px;text-align:left}.settings-toggle+ .settings-toggle{border-top:1px solid #9db8dc22!important}.settings-toggle>span{flex:1;font-weight:650}.settings-toggle small{font-size:10px;color:#bfd0ee;min-width:25px}.toggle-track{position:relative;display:block;width:36px;height:22px;border-radius:20px;background:#1d3154;border:1px solid #8eaad555;flex-shrink:0;box-shadow:inset 0 1px 3px #11244766}.toggle-track:after{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:#a5bbd9;transition:translate .15s,background .15s;box-shadow:0 1px 2px #122b5e66}.settings-toggle[aria-pressed=true] .toggle-track{background:#659ce2;border-color:#add7ff}.settings-toggle[aria-pressed=true] .toggle-track:after{translate:14px 0;background:white}
.settings-options{border:1px solid #94b4e133;border-radius:16px;overflow:hidden;margin:0 0 15px;background:#223c6733}.settings-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:12px 15px;margin:0;border:0;border-radius:0;background:transparent;color:#eaf2ff;font-size:13px;text-align:left;font-weight:600}.settings-row+ .settings-row{border-top:1px solid #9db8dc22}.settings-row>span{font-size:23px;line-height:1;color:#9dbbe8;font-weight:400}.settings-game-action{padding:12px;font-size:12px;margin:7px 0}.settings-game-action.primary-button{background:#344e7d;color:#c8d7ef}.settings-panel>.soft-button:last-of-type{background:linear-gradient(#649be6,#4b7fd1);padding:14px;color:#fff}.settings-back{border:0;background:transparent;color:#bcd4fb;padding:0 0 16px;margin:0;font-size:12px;font-weight:600}.comma-modal:has(.settings-back)>h2{font-size:22px}.comma-modal:has(.settings-back)>p{line-height:1.75}
@media(max-height:740px){#comma-home .mode-card{min-height:104px;padding-top:11px;padding-bottom:12px}#comma-home .record-chip{margin-bottom:16px}.result-hero{height:154px;width:235px}.result-page{padding-top:8px}.result-page .result-score{margin-top:16px}.settings-panel{padding:22px}}
@media(max-height:650px){#comma-home .mode-card{min-height:96px;padding-top:9px;padding-bottom:10px}#comma-home .mode-copy strong{font-size:24px}.mode-detail{font-size:9px}.challenge-meter{margin-top:5px}.result-hero{height:133px;width:212px}.result-page h1{font-size:25px}.result-score strong{font-size:55px}.result-summary{padding:12px 0}.result-page .result-best{margin-bottom:15px!important}}
@media(max-width:350px){#comma-home .mode-copy strong{font-size:23px}.mode-detail{font-size:9px}#comma-home .mode-copy small{font-size:10px}.result-page{padding-left:22px;padding-right:22px}.result-page h1{font-size:25px}}
.comma-modal .settings-toggle[aria-pressed]:after{content:none}.settings-panel>.settings-continue{background:linear-gradient(#649be6,#4b7fd1);padding:14px;color:#fff;box-shadow:inset 0 2px #fff2,0 3px #21385f}.theme-choice[aria-pressed]:after{content:none}

@media(max-height:740px){.result-page .result-score{margin-top:0;margin-bottom:10px}.result-scoreboard{margin-top:12px}.result-page>p{margin-bottom:12px}}
@media(max-height:650px){.result-scoreboard{margin:12px 0 17px;padding-top:12px}.result-score strong{font-size:52px}.result-page h1{font-size:26px}.result-summary{padding:10px 0}.result-page .result-best{margin:0!important;padding:8px 0 10px}}

/* Generated lobby art shares the result screen's glossy block material. */
#comma-shell[data-view=home]{background:radial-gradient(ellipse at 50% 26%,#536ca8 0,#354f86 48%,#263e70 90%)}
#comma-shell[data-view=home]::before{display:none}
#comma-home .game-logo{font-size:48px;transform:rotate(-2deg);-webkit-text-stroke:.6px #ffffff88;text-shadow:0 2px #adcff2,0 5px #1c3468,0 8px 12px #172e6677}
.game-logo span{color:#ffe18d;text-shadow:0 2px #c08c3b,0 5px #604746,0 8px 12px #172e6677}
.lobby-scene{position:relative;width:310px;max-width:100%;height:232px;flex-shrink:0;margin:4px auto 0;pointer-events:none;isolation:isolate}
.lobby-scene>img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 6px #142d5f55)}
.lobby-glow{position:absolute;inset:5px -10px -20px;background:radial-gradient(ellipse at 50% 52%,#95b7f577,transparent 62%);z-index:-1}
#comma-home .record-chip{margin:9px 0 20px;padding:10px 19px;background:linear-gradient(#233e6e,#1d355f);border:1px solid #86a9d460;box-shadow:inset 0 2px #c1e0ff14,0 3px #172e56;border-radius:16px}
#comma-home .mode-card{min-height:112px;padding:12px 14px 14px 11px;gap:12px;border-radius:19px}
#comma-home .classic-card{background:linear-gradient(145deg,#ffe795,#ffd05b 55%,#edb53d);border-color:#fff0b1;box-shadow:inset 0 3px #fff8c999,inset 0 -3px #c48d2e55,0 6px #8c6235,0 11px 15px #172e5b44}
#comma-home .classic-card .mode-copy strong{color:#70471e;text-shadow:0 1px #fff2bd;font-weight:900}
#comma-home .classic-card .mode-copy small,#comma-home .classic-card .mode-detail{color:#6d4a25}
#comma-home .classic-card .mode-play{background:linear-gradient(#fff4c7,#ffe18a);border-color:#fff8d6;box-shadow:inset 0 2px #fff8,0 3px #a7733266}
#comma-home .adventure-card{background:linear-gradient(145deg,#9271e0,#7551bd 62%,#5b43a5);border-color:#c3a7ff;box-shadow:inset 0 3px #e9d9ff44,inset 0 -3px #43257544,0 6px #392c67,0 11px 15px #172e5b44}
#comma-home .mode-copy strong{font-size:26px}
#comma-home .mode-art{width:76px;height:76px;transform:none;scale:1}
#comma-home .mode-copy small{font-size:11px;line-height:1.45;margin-top:5px}
#comma-home .prepare-status{margin-top:21px}
@media(prefers-reduced-motion:no-preference){.lobby-scene>img{animation:lobby-art-float 6s ease-in-out infinite}}
@keyframes lobby-art-float{50%{translate:0 -4px}}
@media(min-height:850px){.lobby-scene{height:260px;margin-top:8px}#comma-home .record-chip{margin-bottom:25px}}
@media(max-height:740px){.lobby-scene{height:210px;width:282px;margin-top:2px}#comma-home .game-logo{font-size:43px}#comma-home .mode-card{min-height:102px;padding-top:10px;padding-bottom:12px}#comma-home .mode-art{width:70px;height:70px}#comma-home .record-chip{padding:8px 17px;margin:7px 0 18px}}
@media(max-height:650px){.lobby-scene{height:166px;width:246px;margin-top:0}#comma-home .game-logo{font-size:39px}#comma-home .mode-card{min-height:96px;padding-top:8px;padding-bottom:10px}#comma-home .mode-art{width:63px;height:63px}#comma-home .mode-copy strong{font-size:24px}#comma-home .record-chip{padding:7px 15px;margin:7px 0 16px}}
@media(max-height:590px){.lobby-scene{height:143px;width:223px}#comma-home .record-chip{margin-bottom:14px}#comma-home .prepare-status{margin-top:15px}}
@media(max-width:350px){#comma-home .mode-card{gap:8px;padding-left:9px;padding-right:10px}#comma-home .mode-art{width:61px;height:61px}#comma-home .mode-copy strong{font-size:23px}#comma-home .mode-copy small{font-size:10px}#comma-home .mode-play{width:32px;height:32px}}

@media(max-height:590px){#comma-shell[data-ready=true] #comma-prepare{display:none}}

#comma-hud button,#port-exit,.comma-header .icon-button,.modal-close{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;filter:none;
}
#comma-hud button img,#port-exit img,.comma-header .icon-button img,.modal-close img{
  display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;
}
#comma-hud button:active,#port-exit:active,.comma-header .icon-button:active,.modal-close:active{
  transform:translateY(2px) scale(.94);filter:brightness(.93);
}
/* As in the verified native host layout, use the browser's actual cutout
   padding instead of adding the SDK's larger host inset a second time.
   Keep the native corner menu clear horizontally, with one compact game row. */
html.onestore-native #game-frame,
html.onestore-native #comma-shell{
  inset:calc(env(safe-area-inset-top,0px) + 44px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
html.onestore-native #comma-hud{
  top:env(safe-area-inset-top,0px);
  right:calc(env(safe-area-inset-right,0px) + 144px);
  gap:8px;
}
html.onestore-native #port-exit{
  top:env(safe-area-inset-top,0px);
  right:calc(env(safe-area-inset-right,0px) + 98px);
}
html.onestore-native #comma-hud button,
html.onestore-native #port-exit{width:44px;height:44px;flex-shrink:0}
/* The lobby has no standalone exit control or empty toolbar row. */
html.onestore-native body[data-game-screen="home"] #comma-shell{top:env(safe-area-inset-top,0px)}
html.onestore-native body[data-game-screen="home"] .comma-header{padding-right:80px}
html.onestore-native body[data-game-screen="home"] .comma-header .icon-button{margin-right:0}