/* Local glass-and-rainbow design trial. One final rule per element, loaded after style.css; controls stay native. */
:root{
 --glass:linear-gradient(125deg,#ffffff9c 0%,#b7f9ff66 28%,#fff8da70 52%,#ffc6f178 80%,#90faff78);
 --glass-edge:inset 0 2px 3px #fff,inset 0 -3px 6px #fff9,0 0 0 2px #ffffff77,0 3px 7px #59e8ffb0,0 8px 18px #f283dd88;
 /* Candy glass tube from the references: lemon, mint and aqua inside a thick translucent rim with cyan and pink light. */
 --candy:linear-gradient(100deg,#fbff98 0%,#f0ff6e 22%,#cbffb3 50%,#95f6e0 76%,#6ce5f6 100%);
 --candy-hover:linear-gradient(100deg,#fff1fa 0%,#ffbde8 30%,#dfc7ff 58%,#9aeefb 84%,#d3fdff 100%);
 --tube:inset 0 0 0 1.5px #fff,inset 0 6px 8px #ffffffc8,inset 0 -6px 9px #33c6de7a,0 0 0 3.5px #ffffffa0,0 0 0 5px #a4ebffc0,0 0 15px #6ef0ffb5,0 9px 15px #ef7ad870;
 --tube-hover:inset 0 0 0 1.5px #fff,inset 0 6px 8px #ffffffd8,inset 0 -6px 9px #c77bf070,0 0 0 3.5px #ffffffb8,0 0 0 5px #ffc6efc8,0 0 18px #a8f7ffc8,0 10px 16px #e779ca90;
 --card:radial-gradient(120% 55% at 10% 0%,#ffffffb8 0%,#ffffff00 50%),linear-gradient(155deg,#ffffffc8 0%,#e9fdffb0 30%,#fffae2a8 58%,#ffe4f5b8 100%);
 --card-edge:inset 0 2px 4px #fff,inset 0 -5px 12px #ffc8ee66,0 0 0 3px #ffffff70,0 0 0 5px #b3efffa0,0 0 20px #92f3ffa0,0 14px 28px #ef85d85c;
 /* White faces: a fine blue edge and a blue-to-lilac extrusion underneath. */
 --face-edge:#16447b;
 --depth:0 1px 0 #2d6cb2,0 2px 0 #3a5cae,0 3px 0 #5a4ba8,0 4px 0 #43378a,0 5px 4px #2b1f6645;
 --depth-sm:0 1px 0 #2d6cb2,0 2px 0 #5a4ba8,0 3px 2px #2b1f663d;
 /* Pixel arrow and play marks drawn with the same white face, edge and extrusion as the lettering. */
 --arrow:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 18 21' shape-rendering='crispEdges'><defs><path id='a' d='M5 1h10v3H5zM12 4h3v7h-3zM9 4h3v3H9zM7 6h3v3H7zM5 8h3v3H5zM3 10h3v3H3zM1 12h3v3H1z'/></defs><use href='%23a' y='3.2' fill='%2343378a'/><use href='%23a' y='2.2' fill='%235a4ba8'/><use href='%23a' y='1.1' fill='%232d6cb2'/><use href='%23a' x='-.8' fill='%2316447b'/><use href='%23a' x='.8' fill='%2316447b'/><use href='%23a' y='-.8' fill='%2316447b'/><use href='%23a' y='.8' fill='%2316447b'/><use href='%23a' fill='%23fff'/></svg>");
 --play:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 15 20' shape-rendering='crispEdges'><defs><path id='p' d='M2 1h3v14H2zM5 3h3v10H5zM8 5h3v6H8zM11 7h2v2h-2z'/></defs><use href='%23p' y='3.2' fill='%2343378a'/><use href='%23p' y='2.2' fill='%235a4ba8'/><use href='%23p' y='1.1' fill='%232d6cb2'/><use href='%23p' x='-.8' fill='%2316447b'/><use href='%23p' x='.8' fill='%2316447b'/><use href='%23p' y='-.8' fill='%2316447b'/><use href='%23p' y='.8' fill='%2316447b'/><use href='%23p' fill='%23fff'/></svg>");
}
/* The sky continues above and below the vertical stage on tall phones. */
body{background:linear-gradient(180deg,var(--theme-sky) 0 9%,#b5f3e2 28%,#fff3a8 50%,#ffc3df 72%,var(--theme-horizon) 90%,#d4aaf2 100%)}
@media(max-width:520px){#game-container{box-shadow:none}}

/* Home: approved logo image and live glossy controls. */
#menu .home-spectrum{display:none}
#menu #home-title{opacity:1;position:absolute;inset:8% 10% auto;width:80%;height:23%;margin:0;transform:none;filter:none}
#menu .home-logo{display:block;width:100%;height:100%;max-height:none;overflow:visible;object-fit:contain;image-rendering:auto;filter:none;animation:none}

/* Candy actions. */
#menu #start,#menu #rankings,#resume,#game-container #lobby-play,#game-container #save-score,#game-container #join-room{
 isolation:isolate;border:2px solid #fff;border-radius:999px;background:var(--candy);box-shadow:var(--tube);
 font-family:var(--pixel);font-weight:400;letter-spacing:0;transform:none;transition:filter .15s,translate .15s,box-shadow .15s;
 color:#fff;-webkit-text-stroke:1px var(--face-edge);paint-order:stroke fill;text-shadow:var(--depth);
}
/* Gloss above the lettering and a soft reflection along the lower rim; both stay behind the text. */
#menu #start::before,#menu #rankings::before,#resume::before,#game-container #lobby-play::before,#game-container #save-score::before,#game-container #join-room::before{
 content:"";position:absolute;z-index:-1;left:7%;right:7%;top:7%;height:27%;border-radius:999px;
 background:linear-gradient(#ffffffeb,#ffffff5c 70%,#ffffff00);pointer-events:none;
}
#menu #start::after,#menu #rankings::after,#resume::after,#game-container #lobby-play::after,#game-container #save-score::after,#game-container #join-room::after{
 content:"";position:absolute;z-index:-1;left:18%;right:18%;bottom:6%;height:15%;border-radius:999px;
 background:radial-gradient(closest-side,#ffffffb0,#ffffff00);pointer-events:none;
}
#menu #start{left:13%;top:72.2%;width:74%;height:10.6%;display:flex;align-items:center;justify-content:center;gap:2.4cqw;padding:0;font-size:7.5cqw}
#menu #start span{display:block;width:6.4cqw;height:7.3cqw;font-size:0;color:transparent;background:var(--arrow) center/contain no-repeat;translate:0 -.3cqw}
#menu #rankings{left:32%;top:85.8%;width:36%;height:5.6%;min-height:0;padding:0;font-size:3.1cqw;text-shadow:var(--depth-sm)}
#menu #home-ranking{top:93%;font-size:2.5cqw;text-shadow:0 1px 0 #7a4fb8,0 2px 0 #3f3584,0 3px 3px #2b1f6655}
#game-container #lobby-play,#resume{font:400 3.1cqw/1.65 var(--pixel);letter-spacing:-.04em;text-shadow:var(--depth-sm)}
#game-container #lobby-play{position:relative;bottom:auto;z-index:auto;flex:none;gap:2cqw;min-height:12cqw;padding:3cqw 1cqw;margin:2.6cqw 0 0}
#game-container #lobby-play .action-arrow{display:block;width:3.2cqw;height:3.7cqw;background:var(--arrow) center/contain no-repeat;translate:0 -.2cqw}
#resume{position:relative;display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%;min-height:12cqw;padding:4cqw 1cqw;text-decoration:none;white-space:nowrap}
#resume span{display:block;width:2.8cqw;height:3.6cqw;margin:0;font-size:0;background:var(--play) center/contain no-repeat;translate:0 .2cqw}
#resume:hover,#resume:focus-visible{color:#fff}
#game-container #save-score{position:relative;font:800 3.2cqw/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.02em;padding:1cqw 3.4cqw;min-height:40px;-webkit-text-stroke:.8px var(--face-edge);text-shadow:var(--depth-sm)}
#game-container #join-room{position:relative;font-size:4.6cqw;min-height:13cqw;margin-top:6cqw;padding:3cqw 1cqw}
/* Opaque candy hover: the scene must never show through the primary buttons. */
#menu #start:hover,#menu #rankings:hover,#resume:hover,#game-container #lobby-play:hover,#game-container #save-score:hover,#game-container #join-room:hover,
#menu #start:focus-visible,#menu #rankings:focus-visible{background:var(--candy-hover);background-color:#edc8f5;filter:none;translate:0 -2px;box-shadow:var(--tube-hover)}
#menu #start:active,#menu #rankings:active,#resume:active,#game-container #lobby-play:active,#game-container #save-score:active,#game-container #join-room:active{background:var(--candy-hover);background-color:#edc8f5;translate:0 1px}
#game-container button:focus-visible,#game-container input:focus-visible{outline:3px solid #075ab6;outline-offset:4px}

/* Ranking, results and rooms: the sky remains visible through the cards. */
#game-container .lobby{background:transparent;padding:3.5cqw 5cqw 3cqw}
#game-container #lobby{display:flex;flex-direction:column;overflow-y:auto}
#game-container #lobby>*{flex-shrink:0}
#game-container #lobby.room-entry{display:block}
#game-container .lobby .lobby-header{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;margin:0 0 1.5cqw;flex:none}
#game-container .lobby .mini-logo{display:block;width:26cqw;height:13cqw;color:#efffa2;font:0/0 var(--pixel);text-shadow:none;transform:none}
.mini-logo img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
/* Back and refresh are twin glass circles on the header line. */
#game-container .lobby-header>button,#game-container #refresh-ranking{
 position:absolute;top:1.8cqw;display:grid;place-items:center;width:9cqw;height:9cqw;padding:0;margin:0;
 font-size:7cqw;line-height:1;color:#15558a;text-shadow:none;outline:none;transform:none;
 background:linear-gradient(145deg,#fff 0%,#e2f9ffdc 36%,#c4e4f2bd 70%,#fff 100%);
 border:1.5px solid #fff;border-radius:50%;box-shadow:inset 0 2px 3px #fff,inset 0 -2px 4px #8baac066,0 0 0 2px #ffffff55,0 3px 6px #47789b55;
 transition:translate .15s,box-shadow .15s;
}
#game-container .lobby-header>button{left:0}
#game-container .lobby-header>button svg{width:58%;height:58%;filter:drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #8cc5e1)}
#game-container .lobby-header>button:hover{translate:-2px 0;box-shadow:inset 0 2px 3px #fff,0 0 0 2px #ffffffaa,0 3px 8px #47789b66}
#game-container .lobby-header>button:focus-visible,#game-container #refresh-ranking:focus-visible{outline:2px solid #15558a;outline-offset:4px}
#game-container .results-screen .lobby-header>button{display:none}
/* Positioned against the lobby, so the card never clips it. */
#game-container .table-heading{position:static}
#game-container #refresh-ranking{top:5.3cqw;right:5cqw;font-size:4.8cqw;font-weight:900}
#game-container #refresh-ranking:hover{translate:0 -1px;box-shadow:inset 0 2px 3px #fff,0 0 0 2px #ffffffaa,0 3px 8px #47789b66}
#game-container #lobby.results-screen #refresh-ranking{display:none}
/* Titles follow the approved logo: pastel face, cobalt edge, blue and pink extrusion. */
#game-container #lobby-title,.pause-screen h2{
 font-family:var(--pixel);font-size:6.2cqw;line-height:1.42;letter-spacing:-.1cqw;margin:0 0 2.4cqw;padding-bottom:1.2cqw;
 color:#fff;-webkit-text-stroke:0;text-shadow:none;
 filter:drop-shadow(1px 0 0 #0f3e86) drop-shadow(-1px 0 0 #0f3e86) drop-shadow(0 -1px 0 #0f3e86) drop-shadow(0 1px 0 #0f3e86) drop-shadow(0 2px 0 #2d62b3) drop-shadow(0 2px 0 #ff8ad9) drop-shadow(0 3px 3px #6b3fa055);
}
#game-container #lobby-title span,.pause-screen h2{
 background:linear-gradient(#fffff6 8%,#f7ff8e 38%,#99ffe6 62%,#dfe0ff 80%,#ffb3ee 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#game-container #lobby-title span{font-size:inherit!important}
#game-container .rank-tabs{margin:0 0 3cqw;gap:2cqw}
#game-container .rank-tabs button{border:1.5px solid #fff;border-radius:999px;padding:2.3cqw 1cqw;font-size:3cqw;color:#0b2d68;background:#ffffff80;box-shadow:inset 0 2px 3px #fff,0 2px 6px #5fb9e02e}
#game-container .rank-tabs button[aria-pressed="true"]{background:var(--candy);border-color:#fff;box-shadow:inset 0 0 0 1px #fff,inset 0 4px 6px #ffffffb0,0 0 0 2.5px #ffffff90,0 0 10px #6ef0ff80}
#game-container #ranking-card,#game-container #room-settings,.pause-glass{background:var(--card);border:2px solid #fff;border-radius:8cqw;box-shadow:var(--card-edge);color:#062457}
#game-container #ranking-card{padding:3.8cqw 3.8cqw 3cqw;min-height:0}
#game-container #lobby #ranking-card{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden}
#game-container #lobby #ranking-card>*{flex-shrink:0}
#game-container #lobby.room-lobby #ranking-card{flex:0 0 auto;overflow:visible}
/* Result summary: score and provisional place before saving. */
#game-container #run-result{border-color:#ffffffb0;padding-bottom:2.2cqw;margin-bottom:2.2cqw}
#game-container .result-summary{margin-bottom:2cqw;gap:2cqw;align-items:center}
#game-container #run-result .run-points{display:flex;flex-direction:column;gap:1.6cqw;color:#062b69;font:900 10cqw/1 'Barlow Condensed','DM Sans',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:none}
#run-result .run-points small{font:800 3cqw 'DM Sans',sans-serif;letter-spacing:.02em}
#game-container #run-points{font:400 8cqw/1.3 var(--pixel);letter-spacing:-.2cqw}
#game-container #result-position{border:1.5px solid #fff;border-radius:5cqw;background:radial-gradient(90% 60% at 20% 0%,#ffffffc0,#ffffff00 60%),linear-gradient(135deg,#aaf9ffa0,#fccaffb0,#fff9b9b8,#83faffa8);box-shadow:inset 0 2px 3px #fff,inset 0 -3px 6px #ffffff90,0 0 0 2px #ffffff80,0 3px 8px #59e8ff90,0 8px 16px #f283dd70;padding:2cqw 2.4cqw;min-width:24%;align-items:center;text-align:center;gap:1cqw}
#game-container #result-position strong{font:400 6cqw/1.3 var(--pixel);letter-spacing:-.2cqw}
#result-position small{font:800 2.5cqw 'DM Sans',sans-serif;letter-spacing:.02em}
#game-container #score-form label{font:800 3.3cqw 'DM Sans',sans-serif;letter-spacing:.02em;margin-bottom:1.2cqw}
#game-container .lobby input{height:9.6cqw;min-height:38px;padding:2cqw 8cqw 2cqw 3.4cqw;border:1.5px solid #fff;border-radius:999px;background:linear-gradient(160deg,#ffffffb0,#ffffff70);box-shadow:inset 0 2px 4px #ffffffcc,inset 0 -2px 4px #9fdcf040,0 0 0 2px #ffffff55,0 4px 8px #437bb822;color:#062457}
#game-container .lobby input[aria-invalid="true"]{border-color:#ff7fb8;background:#fff0f7d9}
/* Table with its own scroll; actions stay outside it. */
#game-container .table-heading{display:grid;grid-template-columns:9.5cqw minmax(0,1fr) 20cqw;gap:2cqw;padding:0 3cqw 1.4cqw;font:800 2.9cqw 'DM Sans',sans-serif;letter-spacing:.03em}
#game-container .table-heading span:last-of-type{text-align:right}
#game-container #lobby .ranking-scroll{position:relative;flex:1 1 0;min-height:16cqw;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#537aa0 #ffffff88;padding:3px 4px 3px 1px}
#game-container #lobby.room-lobby .ranking-scroll{flex:0 1 auto;min-height:12cqw;max-height:30cqw;overflow:auto}
#game-container #ranking-list li{display:grid;grid-template-columns:9.5cqw minmax(0,1fr) 20cqw;gap:2cqw;min-height:8.4cqw;padding:1.2cqw 3cqw;margin-bottom:1.5cqw;border:1px solid #fff;border-radius:999px;background:linear-gradient(100deg,#ffffffc8 0%,#eefcffaa 38%,#fff7dfa8 68%,#ffe9f7bc 100%);box-shadow:inset 0 1px 2px #fff,inset 0 -2px 5px #a6dcf045,0 0 0 1px #d6f6ff70,0 2px 5px #6fcfee4d}
#game-container #ranking-list b,#game-container #ranking-list strong{width:auto;font:400 3.6cqw/1.35 var(--pixel);letter-spacing:-.04em;color:#fff}
#game-container #ranking-list strong{text-align:right}
#game-container #ranking-list .rank-name{min-width:0;overflow-wrap:anywhere;font:700 3.4cqw/1.25 'DM Sans',sans-serif;color:#0b2d68}
#game-container #ranking-list .rank-name small{font-size:2cqw}
#game-container #ranking-list .own-result{background:linear-gradient(100deg,#fbff9ef0,#c3ffe0e8 45%,#aef6ffe0 70%,#ffd9f5e8);border:2px solid #fff;box-shadow:inset 0 2px 3px #fff,0 0 0 2px #ffffff80,0 0 12px #5ff0ffb0,0 4px 10px #ef85d855}
#game-container #ranking-list .pending-result{border-style:dashed}
#game-container #ranking-list .rank-gap{background:none;border:0;box-shadow:none;min-height:16px;padding:0}
/* Scores and places: white faces with blue/lilac depth. */
#game-container #run-points,#game-container #result-position strong,#game-container #ranking-list b,#game-container #ranking-list strong{
 color:#fff;background:none;-webkit-text-fill-color:#fff;-webkit-text-stroke:1.2px var(--face-edge);paint-order:stroke fill;filter:none;text-shadow:var(--depth);
}
#game-container #ranking-list b,#game-container #ranking-list strong{-webkit-text-stroke:1px var(--face-edge);text-shadow:var(--depth-sm)}
/* Small labels stay legible without effects. */
#game-container .table-heading,#game-container #score-form label,#game-container #run-result small,
#game-container .rank-tabs button,#game-container .invite-button,#game-container #ranking-list .rank-name{
 text-shadow:0 1px 0 #fff,0 2px 2px #446d9a18;
}
#game-container #results-home,#game-container #manage-rooms,#game-container #lobby-leave-room{position:static;margin:2.4cqw auto 0;font:700 3cqw/1.3 'DM Sans',sans-serif;color:#0b2d68}
#game-container #results-home{text-shadow:none}
#game-container #online-status,#game-container #save-status{font-size:2.5cqw}
#game-container #save-status{margin:1cqw 0 0;min-height:0}
#game-container #online-status:empty{display:none}
#game-container #lobby-position,#game-container #general-position{background:#ffffff80;border:1px solid #fff;border-radius:999px;padding:2cqw;margin:2cqw 0 0;font:700 2.7cqw/1.4 'DM Sans',sans-serif;text-align:center;color:#082653}
/* Rooms: glass PIN slots, notices and sharing controls. */
#game-container .pin-slots span{background:linear-gradient(160deg,#ffffffd0,#e9fdffa8 50%,#ffe9f7b0);border:1.5px solid #fff;border-radius:4cqw;box-shadow:inset 0 2px 4px #fff,inset 0 -3px 6px #9fdcf04d,0 0 0 2px #ffffff55,0 3px 8px #5fb9e033;color:#6a86b8}
#game-container .pin-control:focus-within .pin-slots .active{box-shadow:inset 0 0 0 2px #fff,0 0 0 3px #62e8ff,0 0 12px #62e8ffaa}
#game-container .pin-control:has(input[aria-invalid="true"]) .pin-slots span{border-color:#ff8fbe;background:#fff0f7d9}
#game-container .room-notice{border:1.5px solid #fff;border-left:5px solid #ff6fb5;border-radius:3.5cqw;background:#fff1f8e6;box-shadow:0 3px 10px #f06fb440;color:#0b2d68}
#game-container .invite-button{border:1.5px solid #fff;border-radius:999px;background:var(--candy);box-shadow:inset 0 0 0 1px #fff,inset 0 4px 6px #ffffffb0,0 0 0 2.5px #ffffff90,0 0 10px #6ef0ff80,0 4px 8px #ef7ad84d;color:#0b2d68;font:800 3cqw/1.2 'DM Sans',sans-serif}
#game-container .presence-chip{border:1px solid #fff;border-radius:999px;background:#ffffffa6;box-shadow:inset 0 1px 2px #fff,0 2px 5px #6fcfee40}
@media(max-height:550px){#game-container #lobby{overflow-y:auto}#game-container #lobby #ranking-card{flex:0 0 auto}#game-container #lobby .ranking-scroll{flex:none;height:35cqw;max-height:180px}}

/* HUD is freestanding: no glass boxes over the sky. */
.hud{left:4%;top:3%;width:49%;gap:2cqw;text-shadow:none}
.hud .score-line,.hud .live-rank,.hud #meters,.lives{width:max-content;max-width:100%;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#fff;text-shadow:1px 2px 0 #103462,-1px -1px 0 #103462}
.hud strong{font-size:7.4cqw!important}
.hud .live-rank{font-size:3cqw}
.hud #meters{font-size:4cqw!important}
.lives{top:3%;right:4%;gap:1cqw;max-width:42%;flex-wrap:wrap;justify-content:flex-end}
.lives .pixel-heart{width:6.5cqw;height:6.4cqw;filter:none}
.hud .score-line,.hud .live-rank,.hud #meters{color:#133563;-webkit-text-stroke:0;paint-order:stroke fill;text-shadow:none}
#game-container .hud .live-rank,#game-container .hud #meters{color:#fff;-webkit-text-stroke:1px var(--face-edge);paint-order:stroke fill;text-shadow:var(--depth-sm)}
#game-container .hud #score{background:none;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:1.2px var(--face-edge);paint-order:stroke fill;filter:none;text-shadow:var(--depth)}
#game-container .hud #multiplier{color:#f6ff7a;-webkit-text-stroke:1px var(--face-edge);paint-order:stroke fill;text-shadow:var(--depth-sm)}

/* Pause panel. */
.pause-screen{padding:0;display:block}
.pause-glass{position:absolute;top:46%;left:7%;width:86%;padding:5.5cqw 5cqw 6cqw}
.pause-screen h2{font-size:7.6cqw;line-height:1.45;margin:0 0 4cqw;white-space:nowrap}

/* Bottom controls: glass pause/play and one quiet vertical volume dial (native range keeps touch and keyboard access). */
#game-container .game-tools{right:5%;bottom:3%;gap:3cqw;align-items:flex-end}
#game-container .game-tools button,#game-container #pause[aria-pressed="true"]{
 width:10cqw;height:10cqw;max-width:46px;max-height:46px;color:#0751a0;font-size:6cqw;text-shadow:none;
 background:radial-gradient(circle at 34% 24%,#fffffff0,#ffffff90 38%,#dff8ff78 68%,#ffd9f48c);border:1.5px solid #fff;
 box-shadow:inset 0 2px 3px #fff,inset 0 -3px 6px #9fdcf066,0 0 0 2px #ffffff70,0 0 0 3.5px #bdf3ff90,0 3px 8px #5fb9e055,0 6px 14px #ef85d840;
}
#game-container #pause,#game-container #pause[aria-pressed="true"]{order:0;width:11cqw;height:11cqw;max-width:48px;max-height:48px}
#game-container #pause svg{width:5.5cqw;height:5.5cqw;filter:drop-shadow(0 1px 0 #ffffff) drop-shadow(0 1px 1px #0d67ad66)}
#game-container #pause svg[data-icon="play"] path{fill:#0b4c93;translate:1px 0}
#game-container #sound{display:none!important}
.volume-control{
 order:1;display:flex;flex-direction:column;align-items:center;justify-content:center;align-content:center;grid-template-columns:1fr;
 width:8cqw;min-width:30px;max-width:38px;height:28cqw;min-height:100px;max-height:126px;padding:10px 0;margin:0;gap:0;
 border:1px solid #ffffffd9;border-radius:999px;background:linear-gradient(90deg,#ffffff40,#ffffff80 48%,#ffffff35);
 box-shadow:inset 1px 0 2px #fff,inset -1px 0 2px #ffffff99,0 0 0 2px #ffffff40,0 2px 7px #41618026;
 color:#082653;font:700 1.8cqw/1 'DM Sans',sans-serif;text-shadow:none;cursor:pointer;touch-action:none;
}
.volume-control:focus-within{outline:2px solid #ffffffdd;outline-offset:3px}
#volume{
 writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;
 width:24px;height:100%;min-height:0;margin:0;padding:0;border:0;clip-path:none;overflow:visible;
 background:transparent;border-radius:999px;cursor:ns-resize;touch-action:none;
}
#volume::-webkit-slider-runnable-track{
 width:5px;height:100%;border:1px solid #ffffffb0;border-radius:999px;
 background:linear-gradient(to top,#ffffffed 0 var(--volume,85%),#8193a340 var(--volume,85%) 100%);
 box-shadow:inset 0 1px 3px #61718340;
}
#volume::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-left:-7.5px;
 border:1px solid #fff;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff 15%,#edf5f9 55%,#bfccd5 100%);
 box-shadow:inset 0 1px 2px #fff,0 2px 4px #3b53644d;
}
#volume::-moz-range-track{width:5px;height:100%;border:1px solid #ffffffb0;border-radius:999px;background:#ffffffaa;box-shadow:inset 0 1px 3px #61718340}
#volume::-moz-range-thumb{width:16px;height:16px;border:1px solid white;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#d8e2ea);box-shadow:0 2px 4px #3b53644d}
#volume:focus-visible{clip-path:none;border-radius:4px}
#game-container #volume:focus-visible{outline:none}

@media(prefers-reduced-motion:reduce){#menu #home-title{animation:none}#menu button,#resume{transition:none}}