@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--theme-page:#00cbe8;--theme-sky:#00d5ed;--theme-horizon:#ff8dcc;--theme-sun:#fff58c;--theme-panel:#fffdf0;--theme-ink:#081b48;--theme-title:#efff63;--theme-titleAlt:#8cffe1;--theme-button:#ebff57;--theme-facade:#ff4bbd;--pixel:'Press Start 2P',monospace;font-family:'DM Sans',Arial,sans-serif;color:var(--theme-ink)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:var(--form-page-height,100svh);display:grid;place-items:center;overflow:hidden;background:var(--theme-page)}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{opacity:.45;cursor:default}
.game-workspace{display:flex;align-items:center;justify-content:center;gap:24px}.preview-column{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}#game-preview{flex:none}
#game-container{container-type:inline-size;position:relative;width:var(--form-stage-width,min(100vw,calc((100svh - 38px - env(safe-area-inset-bottom))*.6),480px));height:var(--form-stage-height,min(calc(100svh - 38px - env(safe-area-inset-bottom)),calc(100vw*5/3),800px));overflow:hidden;isolation:isolate;transform-origin:top left;background:var(--theme-sky);box-shadow:0 0 0 3px #fff9,6px 7px 0 #081b4833}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}
.hud{position:absolute;top:24px;left:27px;z-index:3;display:flex;flex-direction:column;gap:10px;pointer-events:none;color:#fff;font-family:var(--pixel);text-shadow:2px 0 #081b48,-2px 0 #081b48,0 2px #081b48,0 -2px #081b48,3px 4px #081b48}.hud strong{font-size:27px;line-height:1.3}.hud #meters{font-size:15px;line-height:1.4}.lives{display:flex;gap:5px;position:absolute;top:26px;right:25px;z-index:3;pointer-events:none}.pixel-heart{display:block;width:32px;height:31px;flex:none;image-rendering:pixelated}.pixel-heart.empty{opacity:.3;filter:grayscale(1)}
.overlay{position:absolute;inset:0;z-index:2}.overlay[hidden]{display:none}#menu{pointer-events:none}#menu button{pointer-events:auto}#game-container[data-state="menu"] .hud,#game-container[data-state="menu"] .lives{visibility:hidden}#game-container[data-lobby="open"] #menu,#game-container[data-lobby="open"] .hud,#game-container[data-lobby="open"] .lives{visibility:hidden}
#home-title{position:absolute;top:8%;left:3%;width:94%;margin:0;transform:rotate(-3deg);pointer-events:none}
.home-logo{display:block;width:100%;height:39cqw;max-height:188px;overflow:visible}
.home-logo stop{animation:logo-spectrum 7.2s linear infinite;animation-delay:var(--phase)}
@keyframes logo-spectrum{0%,100%{stop-color:#fffedc}18%{stop-color:var(--theme-title)}36%{stop-color:#eaff48}53%{stop-color:var(--theme-titleAlt)}70%{stop-color:#74eaff}85%{stop-color:#ff73df}}
.menu-bottom{position:absolute;left:12%;right:12%;bottom:6.5%;display:flex;flex-direction:column;align-items:center;gap:24px}
.primary,.online-button,.input-row button,.rank-tabs button,.room-actions button{border:3px solid #081b48;border-radius:2px;background:linear-gradient(170deg,var(--theme-button) 45%,#a8ff93 75%,#50ffe3);color:#081b48;font-family:var(--pixel);font-size:12px;line-height:1.5;font-weight:400;box-shadow:4px 6px 0 var(--theme-facade);padding:14px 12px}
.primary{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:55px}.primary span{font:700 27px Arial,sans-serif}.primary:active,.online-button:active{transform:translateY(3px);box-shadow:2px 3px var(--theme-facade)}#start{font-size:29px;padding:19px 15px;border-width:4px;box-shadow:inset 0 4px #fff,inset 0 -4px #08d9ec,5px 7px #ff4bbd,9px 11px #081b48;text-shadow:1px 1px #fff,-1px -1px #fff}#start span{font-size:38px}#rankings{width:58%;font-size:14px;padding:12px}.online-button{display:block;width:100%;text-align:center;margin-top:14px}.secondary{display:block;border:0;background:none;color:#081b48;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px;margin:18px auto 0;padding:5px}
h2{font-family:var(--pixel);font-weight:400;color:var(--theme-title);font-size:30px;line-height:1.35;letter-spacing:-1px;margin:0 0 22px;text-shadow:2px 0 #081b48,-2px 0 #081b48,0 2px #081b48,0 -2px #081b48,4px 5px #ff4bbd,6px 7px #081b48}.pixel-card{background:var(--theme-panel);color:#081b48;border:4px solid #081b48;border-radius:4px;box-shadow:5px 7px var(--theme-facade);padding:20px 16px}.modal{z-index:4;padding:110px 28px 24px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center}.modal .pixel-card>p{font-size:12px;line-height:1.6}.modal .primary{margin-top:18px}#end{justify-content:flex-start;padding-top:28px}#end .pixel-card{flex-shrink:0}#game-container[data-state="over"] .hud,#game-container[data-state="over"] .lives{visibility:hidden}#end h2{font-size:27px;margin-bottom:15px}.stats{display:flex;gap:25px;border-block:2px solid #081b4833;padding:14px 0;margin:12px 0}.stats strong{display:block;font-family:var(--pixel);font-size:22px;line-height:1.5}.stats small{font-size:9px;font-weight:800}.record{font-size:9px;font-weight:800}.pixel-card label{display:block;font-size:10px;font-weight:800;margin:16px 0 7px;letter-spacing:.4px}.pixel-card input{width:100%;min-width:0;border:2px solid #081b48;border-radius:2px;background:#fffdf6;color:#081b48;padding:11px;font-size:16px}.pixel-card input::placeholder{color:#64708c}.input-row{display:flex;gap:8px}.input-row button{font-family:'DM Sans',Arial,sans-serif;font-size:11px;font-weight:800;padding:10px;box-shadow:none}#save-status,#online-status,#room-status{font-size:11px;line-height:1.5;min-height:16px;margin:14px 0}
.lobby{position:absolute;inset:0;z-index:6;overflow-y:auto;overscroll-behavior:contain;padding:17px 28px 30px;background:transparent;touch-action:pan-y}.lobby-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}.lobby-header button{padding:0 5px;border:0;background:none;font-size:43px;font-weight:900;color:#fff;text-shadow:3px 3px #081b48,-2px -2px #081b48;line-height:1}.mini-logo{font-family:var(--pixel);color:#fff;text-align:center;font-size:13px;line-height:1.4;transform:rotate(-3deg);text-shadow:2px 0 #081b48,-2px 0 #081b48,0 -2px #081b48,0 2px #081b48,3px 4px #081b48}.lobby h2{text-align:center;font-size:clamp(25px,7.5cqw,36px);margin:8px 0 28px}.rank-tabs{display:flex;margin:0 8px 19px;gap:0}.rank-tabs button{flex:1;min-width:0;box-shadow:none;background:var(--theme-panel);font-family:'DM Sans',Arial,sans-serif;font-size:12px;font-weight:900;padding:12px 5px;overflow-wrap:anywhere}.rank-tabs button+button{border-left:0}.rank-tabs button[aria-pressed="true"]{background:var(--theme-button)}.table-heading{position:relative;display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;padding:4px 18px 13px 34px}.table-heading button{position:absolute;right:-8px;top:-12px;transform:translateY(-50%);border:2px solid #081b48;background:var(--theme-panel);color:#081b48;font-size:18px;line-height:1;padding:3px}#ranking-list{list-style:none;padding:0;margin:0}#ranking-list li{display:flex;align-items:center;gap:9px;border:1.5px solid #081b48;border-radius:3px;padding:12px 9px;margin-bottom:7px;min-height:51px;background:#fffefa}#ranking-list li:first-child{background:linear-gradient(130deg,#f7ff9a,#e6ff56)}#ranking-list b{font-family:var(--pixel);font-size:15px;width:23px;flex:none}#ranking-list .rank-avatar{width:26px;height:30px;display:grid;place-items:center;flex:none;border:1.5px solid #081b48;border-radius:3px;background:#ff84d0;font-weight:900;font-size:16px}#ranking-list li:nth-child(3n+2) .rank-avatar{background:#73dafa}#ranking-list li:nth-child(3n) .rank-avatar{background:#cfb2fc}#ranking-list .rank-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:900;text-transform:uppercase}#ranking-list strong{font-family:var(--pixel);font-size:16px;white-space:nowrap}#lobby-play{font-size:21px;padding:16px 10px;margin-top:15px}#room-settings #active-room{font-size:13px;font-weight:900;margin:0 0 15px;overflow-wrap:anywhere}.room-actions{margin-top:15px}.room-actions button{flex:1;font-family:var(--pixel);font-size:10px}.game-tools{display:flex;justify-content:center;align-items:center;gap:10px;height:32px;flex:none}.game-tools button{width:32px;height:30px;padding:0;margin:0;border:1px solid #081b4866;border-radius:5px;background:#fff8;color:#081b48;box-shadow:none;font:700 21px Arial,sans-serif}.game-tools .icon span{display:none}
#render-status{position:absolute;z-index:12;top:100px;left:20px;right:20px;padding:16px;background:#fffdf0;color:#081b48;border:3px solid #081b48;font-size:13px}
.color-panel{position:relative;flex:none;width:340px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px;background:#fffdf5;color:#254366;border:2px solid #526b83;border-radius:12px;box-shadow:0 8px 24px #25436633}.color-panel header{position:sticky;top:-18px;z-index:2;background:#fffdf5;padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.color-panel header small{font-size:9px;font-weight:800;letter-spacing:2px}.color-panel h2{font:800 25px 'DM Sans',Arial,sans-serif;color:#254366;text-shadow:none;letter-spacing:-.5px;margin:4px 0}.color-panel button{border:1px solid #607b94;border-radius:5px;background:#fff0a6;color:#254366;font-weight:800;padding:10px;font-size:11px;min-height:38px}.color-panel header button{background:#fff;font-size:16px}.color-panel p{font-size:11px;line-height:1.5;margin:10px 0}#color-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-control{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;background:#eef6fa;border:1px solid #bacbd6;border-radius:6px;padding:6px;min-width:0}.color-control input{width:38px;height:38px;grid-row:1/3;border:0;padding:0;background:none;cursor:pointer}.color-control span{font-size:10px;font-weight:800}.color-control small{font:9px monospace;color:#47617a}#color-contrast{padding:8px;background:#e5f6e9;border-radius:5px;color:#254366}#color-contrast[data-low="true"]{background:#ffedbb}#color-status{min-height:33px}.color-actions{display:flex;gap:8px;position:sticky;bottom:-18px;background:#fffdf5;padding:10px 0}.color-actions button:first-child{flex:1}.color-actions button:last-child{background:#fff}
#game-container[data-motion="paused"] #home-title stop{animation-play-state:paused}
@media(max-height:700px){.hud{top:20px;left:22px}.hud strong{font-size:23px}.hud #meters{font-size:12px}.lives{top:21px;right:22px;gap:6px}.pixel-heart{width:28px;height:27px}.menu-bottom{gap:19px;bottom:6%}#start{font-size:25px;padding:15px 12px}#rankings{font-size:12px;padding:10px}.lobby{padding:15px 24px 25px}.lobby-header{margin-bottom:20px}.lobby h2{margin-bottom:23px}.pixel-card{padding:17px 13px}#ranking-list li{padding:9px 6px;min-height:44px}#ranking-list strong{font-size:14px}#ranking-list .rank-name{font-size:11px}.modal{z-index:4;padding:91px 24px 20px}.modal h2{font-size:25px}}
@media(max-width:700px){.game-workspace{gap:12px}.color-panel{width:170px;padding:10px;max-height:calc(100dvh - 32px)}#color-fields{grid-template-columns:1fr}.color-panel h2{font-size:18px}.color-panel header{top:-10px;gap:4px}.color-panel header button{padding:6px;min-height:32px}.color-panel p{font-size:10px}.color-actions{flex-direction:column;bottom:-10px}.color-actions button{font-size:10px}}
@media(max-width:360px){#home-title{font-size:10.7cqw;letter-spacing:-1px}.lobby{padding-inline:19px}.lobby h2{font-size:7cqw}#ranking-list .rank-avatar{display:none}.rank-tabs button{font-size:11px}.primary{font-size:10px}.stats strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){#home-title stop{animation:none}*{scroll-behavior:auto}}

#run-result{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #081b4833}#run-result .run-points{font-family:var(--pixel);font-size:18px;margin:0 0 10px}#run-result .run-points small{font:700 10px Arial,sans-serif}#lobby-play{position:sticky;bottom:0;z-index:2;font-size:clamp(12px,3.5cqw,18px)}

.pause-screen{z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:transparent;padding:24px;text-align:center}
.pause-screen h2{font-family:var(--pixel);font-size:clamp(22px,6.8cqw,32px);line-height:1.5;letter-spacing:0;margin:0;color:#fff;text-shadow:2px 0 #081b48,-2px 0 #081b48,0 2px #081b48,0 -2px #081b48,4px 5px #081b48}
#resume{border:0;border-radius:0;background:transparent;box-shadow:none;padding:16px 5px;color:#fff;font-family:var(--pixel);font-size:clamp(11px,3.4cqw,16px);line-height:1.8;text-shadow:1px 0 #081b48,-1px 0 #081b48,0 1px #081b48,0 -1px #081b48,2px 3px #081b48;text-decoration:underline;text-underline-offset:9px}
#resume:hover,#resume:focus-visible{color:var(--theme-title)}

.menu-bottom{left:12%;right:12%;bottom:5.5%;gap:24px}#start{min-height:86px;font-size:clamp(28px,8.5cqw,40px);padding:15px;border-width:5px;border-radius:17px;box-shadow:inset 0 5px #fff,inset 0 -5px #04dfe9,5px 8px #ff4bbd,9px 12px #081b48}#start span{font-size:44px}#rankings{width:48%;min-height:47px;border-width:4px;font-size:15px}
.lives{top:26px;right:26px;gap:8px}.pixel-heart{width:38px;height:36px}
@media(max-height:700px){.menu-bottom{bottom:5.5%;gap:22px}#start{min-height:72px;font-size:30px}#rankings{font-size:12px;min-height:42px}.lives{top:22px;right:22px;gap:7px}.pixel-heart{width:33px;height:31px}}

/* Reserve independent responsive columns: long scores never collide with five lives. */
.hud{left:5%;top:4cqw;width:43%;gap:2.2cqw;min-width:0}
.hud strong{font-size:6.1cqw;white-space:nowrap;line-height:1.4}
.hud #meters{font-size:3.4cqw;white-space:nowrap}
.lives{top:4cqw;right:4%;width:44%;gap:1cqw;justify-content:flex-end}
.lives .pixel-heart{width:7cqw;height:6.6cqw;max-width:34px;max-height:32px;flex:none}
/* End-of-run cards follow the general / room reference layouts. */
.name-editor{position:relative;display:block;flex:1;min-width:0}.name-editor input{padding-right:30px}.edit-pencil{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:21px}
.position-heading{width:32px;flex:none}.table-heading{display:grid;grid-template-columns:32px 1fr auto;gap:10px;padding-inline:10px}#lobby-title span{display:block}
#ranking-list .rank-name>span{display:block}#ranking-list .rank-name small{display:block;font-size:10px;font-weight:500;margin-top:3px}
#ranking-list li:first-child{background:#fffefa}#ranking-list li.own-result{background:linear-gradient(155deg,#f4ff79 30%,#adffb7 70%,#71f9ee);border:2px solid #081b48}
#general-position{background:#bcfff7;border:2px solid #081b48;text-align:center;font-family:var(--pixel);font-size:10px;line-height:1.6;padding:9px 4px;margin:10px 0 0;overflow-wrap:anywhere}
.results-screen{padding:16px 26px 18px;display:flex;flex-direction:column;gap:0;overflow-y:auto}
.results-screen .lobby-header{justify-content:center;margin:0 0 20px;flex:none}
.results-screen .lobby-header>button{display:none}.results-screen .mini-logo{font-size:17px;line-height:1.2;text-shadow:2px 0 #081b48,-2px 0 #081b48,0 -2px #081b48,0 2px #081b48,3px 4px #081b48,5px 6px #ff4bbd}
.results-screen #lobby-title{font-size:clamp(20px,6.8cqw,33px);line-height:1.32;margin:0 0 18px;letter-spacing:-.8px;flex:none;overflow-wrap:anywhere;text-transform:uppercase}
.results-screen #lobby-title span:nth-child(2){font-size:inherit}
.results-screen #ranking-card{display:flex;flex-direction:column;flex:1;min-height:400px;padding:16px 18px 12px;border-width:4px;border-radius:2px;box-shadow:5px 7px #ff4bbd}
.results-screen #run-result{margin:0 0 11px;padding:0 0 12px;border-bottom:1px solid #081b4866;flex:none}
.results-screen #run-result .run-points{display:block;font-size:4cqw;margin:0 0 2cqw}.results-screen #score-form label{font-size:12px;margin:0 0 5px}
.results-screen #score-form .input-row{gap:10px}.results-screen #save-name{height:44px;font-size:18px;border-width:2px;border-radius:0;padding:8px 26px 8px 10px}
.results-screen #save-score{font:800 13px 'DM Sans',Arial,sans-serif;border-width:3px;box-shadow:4px 5px #ff4bbd;padding:7px 10px}
.results-screen #save-status{font-size:9px;min-height:0;line-height:1.2;margin:5px 0 0}.results-screen #save-status:empty{display:none}
.results-screen .table-heading{font-size:11px;grid-template-columns:38px minmax(0,1fr) 90px;gap:10px;padding:0 8px 8px;flex:none}.results-screen .table-heading span:last-of-type{text-align:right}.results-screen #refresh-ranking{display:none}
.results-screen .ranking-scroll{flex:1;min-height:120px;max-height:310px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#637498 #bfe0e8;padding-right:6px}
.results-screen #ranking-list li{display:grid;grid-template-columns:38px minmax(0,1fr) 90px;gap:10px;padding:8px;min-height:44px;margin-bottom:5px;border-width:1.5px;border-radius:1px}
.results-screen #ranking-list b{width:auto;font-size:17px}.results-screen #ranking-list strong{font-size:17px;text-align:right}.results-screen #ranking-list .rank-name{font-size:14px}.results-screen #ranking-list .rank-name small{font-size:9px}
.results-screen #online-status{font-size:10px;min-height:0;margin:7px 0;flex:none}.results-screen #online-status:empty{display:none}
.results-screen #lobby-play{position:static;flex:none;font-size:clamp(11px,3.5cqw,17px);padding:15px 4px;min-height:53px;border-width:3px;margin:15px 0 0;box-shadow:4px 6px #ff4bbd}
.results-screen #results-home{font-size:12px;font-weight:500;margin:15px auto 0;padding:3px}
@container(max-width:370px){.results-screen{padding:12px 17px 16px}.results-screen .lobby-header{margin-bottom:14px}.results-screen #ranking-card{padding:12px 12px 10px;min-height:340px}.results-screen .table-heading,.results-screen #ranking-list li{grid-template-columns:28px minmax(0,1fr) 76px;gap:7px}.results-screen #ranking-list b,.results-screen #ranking-list strong{font-size:14px}.results-screen #ranking-list .rank-name{font-size:12px}.results-screen #save-name{font-size:15px}.results-screen #save-score{font-size:11px;padding:7px}.results-screen #general-position{font-size:8px}}
.results-screen #ranking-card{padding-top:12px;padding-bottom:10px}
.results-screen #save-name{height:40px}.results-screen #save-score{padding-block:5px}
.results-screen #run-result{position:relative;padding-bottom:13px;margin-bottom:8px}
.results-screen #save-status.saved-message{position:absolute;bottom:1px;left:0;font-size:8px;margin:0}
.results-screen .table-heading{padding-bottom:6px}
.results-screen #ranking-list li{min-height:8cqw;padding:1.3cqw 7px;margin-bottom:4px}
.results-screen #ranking-list .rank-name{font-size:3.2cqw;line-height:1.15}
.results-screen #ranking-list .rank-name small{font-size:2cqw;line-height:1.15;margin-top:1px}
.results-screen #general-position{font-size:2.2cqw;line-height:1.3;padding:5px 3px;margin-top:7px}
.results-screen #lobby-play{margin-top:12px;min-height:49px;padding-block:11px}
.results-screen #results-home{margin-top:11px;font-size:11px;padding:2px}
.results-screen .ranking-scroll::-webkit-scrollbar{width:6px}.results-screen .ranking-scroll::-webkit-scrollbar-track{background:#c5dfe6;border-radius:5px}.results-screen .ranking-scroll::-webkit-scrollbar-thumb{background:#637498;border-radius:5px}

/* Room entry and lobby share the reference's cream cards and pixel borders. */
.room-entry,.room-lobby{padding:4cqw 6.5cqw 5cqw}
.room-entry .lobby-header,.room-lobby .lobby-header{position:relative;justify-content:center;margin:0 0 8cqw;min-height:11cqw}
.room-entry .mini-logo,.room-lobby .mini-logo{font-size:4.2cqw;line-height:1.2;text-shadow:2px 0 #081b48,-2px 0 #081b48,0 -2px #081b48,0 2px #081b48,3px 4px #081b48,5px 6px #ff4bbd}
.room-entry .lobby-header>button,.room-lobby .lobby-header>button{display:grid;place-items:center;position:absolute;left:0;top:1px;width:10cqw;height:10cqw;font:900 8cqw/1 Arial,sans-serif;color:#fff;background:#081b48;border:3px solid #fff;outline:3px solid #081b48;border-radius:2px;box-shadow:5px 6px var(--theme-facade);text-shadow:none;padding:0}
.room-entry #lobby-title{line-height:1.4;letter-spacing:-.8px;text-transform:uppercase;margin:6cqw 0 8cqw}
.room-entry #room-settings{padding:5cqw 4.5cqw 3cqw;border-radius:2px;box-shadow:5px 7px var(--theme-facade)}
.room-entry .pixel-card label{font-size:4.1cqw;letter-spacing:-.3px;margin:0 0 2cqw;line-height:1.2}
.room-entry #room-name{height:11cqw;font-size:4.2cqw;padding:2.5cqw 3cqw;background:#fffefa}
.room-entry #room-pin-label{margin-top:6.5cqw;margin-bottom:3cqw}
.pin-control{position:relative;height:16cqw}
.pin-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw;height:100%;pointer-events:none}
.pin-slots span{display:grid;place-items:center;background:#fffefa;border:2px solid #081b48;border-radius:2px;color:#899cbe;font:800 9cqw/1 'DM Sans',Arial,sans-serif;padding-bottom:2cqw}
.pin-control:focus-within .pin-slots .active{box-shadow:inset 0 0 0 3px #00e9f4}
#room-pin{position:absolute;inset:0;width:100%;height:100%;opacity:.01;color:transparent;caret-color:transparent;cursor:text;border:0}
.pin-control:has(input[aria-invalid="true"]) .pin-slots span{border-color:#d12b79;background:#fff0f7}
.pin-control.password-mode .pin-slots{display:none}
.pin-control.password-mode{height:11cqw}
.pin-control.password-mode #room-pin{opacity:1;color:#081b48;caret-color:auto;border:2px solid #081b48;font-size:5cqw}
.room-entry #join-room{font-size:6cqw;min-height:14cqw;border-width:3px;box-shadow:4px 6px var(--theme-facade);margin-top:7cqw;padding:3cqw 1cqw}
.room-entry .secondary{font-size:2.8cqw;margin:2.5cqw auto 0;padding:1cqw}
.room-entry #create-room{display:inline-block;width:55%;text-align:left}
.room-entry #legacy-pin{display:inline-block;width:45%;text-align:right}
.room-entry #back-ranking{font-size:2.6cqw;font-weight:500}
.room-notice,#room-status.room-notice{padding:3cqw;margin:4cqw 0 0;border:2px solid #081b48;border-left:6px solid #ff4bbd;box-shadow:3px 3px #ffb4db;background:#ffebf4;color:#081b48;font-size:3cqw;line-height:1.45;font-weight:700;min-height:0}
.pixel-card input[aria-invalid="true"]{border-color:#d12b79;background:#fff0f7}
.room-lobby .lobby-header{margin-bottom:4cqw}
.room-lobby #lobby-title{margin:0 0 4cqw;line-height:1.35}
.room-lobby #ranking-card{padding:4cqw 4cqw 5cqw;min-height:110cqw}
.room-lobby h3{font-size:3.5cqw;line-height:1.2;margin:0 0 2.5cqw;font-weight:900;letter-spacing:-.25px}
.room-lobby .table-heading{font-size:2.8cqw;padding-top:1cqw;padding-bottom:2cqw}
.room-lobby .ranking-scroll{max-height:48cqw;min-height:20cqw}
.room-lobby #ranking-list li{min-height:8.5cqw}
.room-lobby #room-presence{border-top:1px solid #081b4855;padding-top:2.5cqw;margin-top:3cqw;flex:none}
.presence-dot{display:inline-block;width:2.7cqw;height:2.7cqw;border-radius:50%;background:#09ce36;flex:none;vertical-align:middle;margin-left:1cqw}
#presence-list{display:flex;flex-wrap:wrap;gap:1.5cqw;font-size:2.8cqw;line-height:1.4;max-height:18cqw;overflow-y:auto}
.presence-chip{display:flex;align-items:center;gap:2cqw;min-width:26%;flex:1;padding:1.7cqw 1cqw;border:2px solid #081b48;background:#b6fff7;font-size:3.1cqw;font-weight:800;text-transform:uppercase}
.presence-chip>span{overflow-wrap:anywhere;min-width:0}
.room-lobby #profile-form{margin-top:3cqw;border-top:1px solid #081b4855;padding-top:2.5cqw;flex:none}
.room-lobby #profile-form label{font-size:3.1cqw;margin:0 0 1.2cqw}
.room-lobby #nickname{font-size:4cqw;height:9cqw;padding:1.5cqw 7cqw 1.5cqw 2.5cqw}
.room-lobby #lobby-play{font-size:6cqw;min-height:14cqw;margin-top:4cqw;padding:2cqw}
.room-lobby #online-status{font-size:2.8cqw}
.room-lobby #ranking-card{padding:3cqw;flex:0 0 auto}
.room-lobby #room-presence,.room-lobby #profile-form{margin-top:2cqw;padding-top:2cqw}
.room-lobby h3{margin-bottom:2cqw}
.room-lobby #lobby-play{margin-top:3cqw;min-height:13cqw}

.room-lobby #lobby-leave-room{flex:none;font-size:2.8cqw;font-weight:600;margin:2cqw auto 0;padding:1cqw;min-height:24px}

/* The approved home illustration is displayed intact; real controls match its printed buttons. */
#home-title{opacity:0;pointer-events:none}
#menu .menu-bottom{inset:0;display:block;gap:0}
#menu #start,#menu #rankings{position:absolute;display:block;margin:0;padding:0;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-shadow:none;color:transparent;font-size:0;transform:none}
#menu #start{left:13.5%;top:72.2%;width:73.5%;height:11%}
#menu #rankings{left:33.5%;top:88.5%;width:33%;height:6.5%}
#menu #start span{color:transparent;font-size:0}
#menu #start:focus-visible,#menu #rankings:focus-visible{outline:3px solid #fff;outline-offset:3px}
#menu #start:hover,#menu #rankings:hover{background:#ffffff12}
#menu #start:active,#menu #rankings:active{background:#ffffff26}
.home-spectrum{position:absolute;inset:0;pointer-events:none;background:url('assets/home-reference.png') center/100% 100% no-repeat;mask-image:linear-gradient(transparent 7%,#000 11%,#000 27%,transparent 32%);animation:home-color-flow 9s ease-in-out infinite}
@keyframes home-color-flow{0%,100%{filter:hue-rotate(0deg)}35%{filter:hue-rotate(24deg)}70%{filter:hue-rotate(-22deg)}}
#game-container[data-motion="paused"] .home-spectrum{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.home-spectrum{animation:none}}

.score-line{display:flex;align-items:center;gap:1.5cqw;min-width:0}#multiplier{font-size:3cqw;color:var(--theme-title);white-space:nowrap;flex:none}

/* Small sharing controls match the room's pixel palette. */
.invite-button{border:2px solid #081b48;background:linear-gradient(135deg,var(--theme-title,#efff63),#8cffe1);color:#081b48;box-shadow:3px 3px var(--theme-facade,#ff4bbd);font:700 3cqw "Barlow Condensed",sans-serif;padding:2cqw;cursor:pointer;flex:none}
#invite-friends{margin-top:3cqw;min-height:9cqw;width:100%}
#invite-panel{border-top:1px solid #081b4855;margin-top:3cqw;padding-top:3cqw;flex:none}
#invite-panel label{font-size:3cqw;margin-bottom:1cqw}#invite-panel p{font-size:2.8cqw;line-height:1.35;margin:1.5cqw 0}
#invite-panel input{width:100%;font-size:3.3cqw;padding:2cqw;border:2px solid #081b48;background:#fffefa;color:#081b48}
#invite-form button{margin-top:2cqw;width:100%}.invite-actions{display:flex;gap:2cqw;margin-top:2cqw}.invite-actions button{flex:1}

/* Keep touch controls in the game, reachable in both playing and paused states. */
#game-container .game-tools{position:absolute;z-index:5;right:max(12px,env(safe-area-inset-right));left:auto;bottom:12px;height:auto;gap:10px;justify-content:flex-start}
#game-container .game-tools button{position:relative;display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--theme-ink);border-radius:50%;background:var(--theme-panel);box-shadow:3px 3px var(--theme-facade);color:var(--theme-ink);font-size:20px;touch-action:manipulation}
#game-container .game-tools button:active{transform:translateY(2px);box-shadow:1px 1px var(--theme-facade)}
#sound[aria-pressed="false"]::after{content:"";position:absolute;width:29px;height:3px;background:var(--theme-ink);transform:rotate(-45deg);box-shadow:0 1px var(--theme-panel)}
#game-container:not([data-state="playing"]):not([data-state="paused"]) .game-tools,#game-container[data-lobby="open"] .game-tools{display:none}
/* iOS zooms focused inputs below 16px. Keep text legible without disabling pinch zoom. */
#game-container .lobby input{font-size:clamp(16px,4.2cqw,20px);scroll-margin-block:24px}
#game-container .lobby{top:var(--form-top,0px);height:var(--form-height,100%);bottom:auto;-webkit-overflow-scrolling:touch;scroll-padding-block:24px}
#game-container .lobby:focus-within>#ranking-card{flex-shrink:0}

/* Soft footer fades into the scene, with freestanding social icons. */
.game-credit{position:relative;height:calc(38px + env(safe-area-inset-bottom));padding:0 14px env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(105deg,#fff3ac 0%,#ffa5ca 27%,#f48bdd 55%,#c698f3 76%,#61f2e4 100%);color:#fff;font:9px/1.5 var(--pixel);white-space:nowrap;text-shadow:none}
.game-credit::before{content:"";position:absolute;inset:auto 0 100%;height:22px;background:inherit;mask-image:linear-gradient(transparent,#000);pointer-events:none}
.game-credit .social-links{display:flex;gap:8px}.game-credit a{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:0;background:none;box-shadow:none;touch-action:manipulation;position:relative}.game-credit #instagram-link,.game-credit #x-link{color:#fff}.game-credit svg{width:20px;height:20px}.game-credit a:hover{filter:brightness(1.15)}.game-credit a:focus-visible{outline:2px solid #fff;outline-offset:1px}
.game-credit a::after,#game-container .game-tools button::before{content:"";position:absolute;inset:-4px}
.hud .live-rank{font:3.2cqw/1.4 var(--pixel);display:flex;flex-direction:column;gap:3px;white-space:nowrap}
#rank-gain:empty{display:none}#rank-gain span{display:block;color:#efff63;font-size:.85em;animation:rank-rise 2s ease-out forwards}
@keyframes rank-rise{0%{opacity:0;transform:translateY(3px)}15%,75%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#rank-gain span{animation-name:rank-fade}@keyframes rank-fade{0%,75%{opacity:1}100%{opacity:0}}}

#lobby-position{font:clamp(8px,2.5cqw,12px)/1.7 var(--pixel);text-align:center;color:var(--theme-ink);padding:8px 4px;background:#b8fff3;border:2px solid var(--theme-ink)}

#game-container #pause svg{width:22px;height:22px;display:block}
#game-container #pause[aria-pressed="true"]{background:var(--theme-ink);color:#fff}
.portrait-notice{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:24px;background:linear-gradient(135deg,#73eee7,#f19cd8);color:#081b48;text-align:center;font:12px/1.8 var(--pixel);touch-action:none}
.portrait-notice svg{width:54px;height:72px}.portrait-notice p{margin:0}.portrait-notice small{font:16px/1.5 'DM Sans',sans-serif}