:root{--ink:#151d1f;--muted:#315155;--paper:#f8f6eb;--panel:#ffffffc7;--font-heading:"Caveat Brush", cursive;--font-body:"Mali", cursive}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);overflow-x:hidden}button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #18c7d2}img{max-width:100%;display:block}.coloring-screen{gap:.75rem;display:grid}.coloring-screen.is-active{--coloring-play-height:min(72rem, calc(100dvh - 11rem));grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 7.5rem);min-height:34rem;overflow:hidden}.coloring-shell-header{border:1px solid var(--border-color);background:color-mix(in srgb, var(--panel-solid) 78%, transparent);-webkit-backdrop-filter:blur(10px);border-radius:999px;grid-template-columns:auto minmax(0,max-content) auto;justify-content:center;justify-self:center;align-items:center;gap:1rem;width:fit-content;max-width:100%;padding:.7rem clamp(1rem,2vw,1.4rem);display:grid}.coloring-shell-mode{justify-self:center}.coloring-shell-center{text-align:center;justify-self:center;align-items:baseline;gap:.75rem;min-width:0;display:flex}.coloring-shell-phase{font-family:var(--font-heading);color:var(--primary-bg);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:.85}.coloring-shell-drawing{font-family:var(--font-heading);color:var(--muted-color);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(1.1rem,1.8vw,1.6rem);line-height:.95;overflow:hidden}.coloring-shell-stats{justify-self:center;gap:.8rem;display:flex}.shell-stat{justify-items:end;gap:.1rem;font-weight:800;display:grid}.shell-stat span{color:var(--muted-color);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.shell-stat strong{font-family:var(--font-heading);font-size:clamp(1.4rem,2.4vw,2rem);line-height:.85}.coloring-shell{-webkit-backdrop-filter:none;box-shadow:none;background:0 0;border:1px solid #0000;border-radius:12px;min-height:0;margin-bottom:.75rem;padding:clamp(.8rem,1.4vw,1.15rem);display:grid;overflow:hidden}.coloring-setup,.coloring-empty,.round-score-panel,.coloring-summary{border:1px solid var(--border-color);background:var(--panel-solid);box-shadow:0 24px 48px var(--shadow-color);border-radius:8px;gap:1rem;padding:clamp(1rem,4vw,1.35rem);display:grid}.coloring-side-panel{border:1px solid var(--border-color);background:var(--panel-soft);box-shadow:0 6px 14px color-mix(in srgb, var(--shadow-color) 55%, transparent);border-radius:8px;gap:.75rem;padding:clamp(.8rem,2.5vw,1.1rem);display:grid}.coloring-setup{justify-self:center;width:min(62rem,100%)}.choice-heading{gap:.35rem;display:grid}.choice-heading h1{font-family:var(--font-heading);font-size:clamp(3.2rem,10vw,6.8rem);line-height:.8}.coloring-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.coloring-mode-card,.coloring-start-button,.coloring-submit-button,.tool-button,.history-actions button,.swatch-button{font:inherit;color:inherit;cursor:pointer;border:0}.coloring-mode-card{border:1px solid var(--border-color);background:var(--panel-soft);text-align:left;min-height:8rem;box-shadow:inset 0 0 0 0 var(--primary-bg), 0 12px 28px transparent;border-radius:8px;align-content:end;gap:.6rem;padding:1rem;transition:background .18s,box-shadow .18s,transform .18s;display:grid}.coloring-mode-card strong{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3.2rem);line-height:.82}.coloring-mode-card span{color:var(--muted-color);font-weight:800}.coloring-mode-card.is-selected{background:var(--primary-bg);color:var(--primary-text);box-shadow:inset 0 0 0 2px var(--primary-bg), 0 20px 36px var(--shadow-color);transform:translateY(-2px)}.coloring-mode-card.is-selected span{color:var(--on-primary-muted)}.coloring-primary-grid,.coloring-setup-grid{gap:.8rem;display:grid}.coloring-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coloring-setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.coloring-field{color:var(--muted-color);text-transform:uppercase;gap:.4rem;font-size:.82rem;font-weight:900;display:grid}.coloring-field select,.coloring-field input,.coloring-check-field{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;min-height:3rem;color:var(--text-color);border-radius:8px;font-weight:900}.coloring-field select,.coloring-field input{padding:.35rem .6rem}.coloring-check-field{color:var(--muted-color);text-transform:uppercase;align-items:center;gap:.65rem;padding:.35rem .75rem;font-size:.82rem;display:flex}.coloring-check-field input{aspect-ratio:1;width:1.2rem;accent-color:var(--primary-bg)}.coloring-more-settings{gap:.8rem;display:grid}.coloring-more-settings summary{border:1px solid var(--border-color);background:var(--panel-soft);min-height:3rem;color:var(--muted-color);cursor:pointer;text-transform:uppercase;border-radius:8px;justify-content:space-between;align-items:center;padding:0 .8rem;font-weight:900;display:flex}.coloring-more-settings[open] summary{margin-bottom:.8rem}.coloring-start-button,.coloring-submit-button{background:var(--primary-bg);min-height:3.35rem;color:var(--primary-text);text-transform:uppercase;box-shadow:0 18px 34px var(--shadow-color);border-radius:8px;font-weight:900}.coloring-start-button:disabled,.coloring-submit-button:disabled,.tool-button:disabled,.history-actions button:disabled{background:var(--control-fill);color:var(--muted-color);cursor:default;box-shadow:none}.coloring-play-layout{--play-gap:clamp(.55rem, .8vw, .85rem);--left-panel-width:clamp(12rem, 14vw, 15rem);--right-panel-width:clamp(13rem, 15vw, 16.5rem);--board-size:min(72rem, calc(100dvh - 15.5rem), calc(100vw - 4rem - var(--left-panel-width) - var(--right-panel-width) - var(--play-gap) - var(--play-gap)));grid-template-columns:var(--left-panel-width) minmax(20rem, var(--board-size)) var(--right-panel-width);column-gap:var(--play-gap);row-gap:var(--play-gap);justify-content:center;align-items:stretch;display:grid}.coloring-result-layout{grid-template-columns:minmax(14rem,19rem) minmax(0,1fr);align-items:stretch;gap:min(1dvh,.75rem) min(1vw,.75rem);display:grid}.coloring-screen.is-active .coloring-play-layout,.coloring-screen.is-active .coloring-result-layout{height:100%;min-height:0}.coloring-board-panel{width:min(100%, var(--board-size,100%));grid-template-rows:minmax(0,1fr);justify-self:center;min-width:0;min-height:0;display:grid;position:relative}.coloring-phase-badge{z-index:3;border:1px solid var(--border-color);background:color-mix(in srgb, var(--panel-solid) 86%, transparent);font-family:var(--font-heading);box-shadow:0 14px 28px var(--shadow-color);border-radius:8px;padding:.35rem .55rem .45rem;font-size:clamp(1.65rem,4vw,2.85rem);line-height:.78;position:absolute;top:.75rem;left:.75rem}.coloring-canvas-frame{width:min(100%, var(--board-size,100%));aspect-ratio:1;border:1px solid var(--border-color);background:linear-gradient(45deg, color-mix(in srgb, var(--panel-soft) 80%, #fff), var(--panel-solid));max-width:100%;height:auto;max-height:100%;box-shadow:0 18px 36px color-mix(in srgb, var(--shadow-color) 65%, transparent);border-radius:8px;place-self:center;position:relative;overflow:hidden}.coloring-canvas{touch-action:none;cursor:crosshair;background:#fff;width:100%;height:100%;display:block}.coloring-canvas-loading{z-index:2;background:var(--panel-solid);color:var(--muted-color);text-transform:uppercase;place-items:center;font-weight:900;display:grid;position:absolute;inset:0}.coloring-side-panel{min-height:0;max-height:var(--coloring-play-height,none);align-content:start;overflow:auto}.coloring-screen.is-active .coloring-side-panel{height:100%}.coloring-left-panel{grid-template-rows:auto minmax(0,1fr);align-content:stretch}.coloring-color-panel{grid-template-rows:auto auto auto;gap:.55rem;padding:.75rem}.chat-section{grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}.chat-feed{border:1px solid var(--border-color);background:var(--panel-soft);border-radius:8px;align-content:start;gap:.45rem;min-height:2.25rem;max-height:100%;padding:.55rem;display:grid;overflow:auto}.chat-message{background:var(--panel-solid);border-radius:8px;gap:.1rem;padding:.45rem .55rem;display:grid}.chat-message strong{color:var(--muted-color);text-transform:uppercase;font-size:.72rem}.chat-message span{overflow-wrap:anywhere;font-size:.88rem}.chat-form{grid-template-columns:minmax(0,1fr) auto;gap:.45rem;display:grid}.chat-form input,.chat-form button{border:1px solid var(--border-color);min-height:2.5rem;font:inherit;border-radius:8px}.chat-form input{background:var(--panel-soft);min-width:0;color:var(--text-color);padding:0 .65rem}.chat-form button{background:var(--primary-bg);color:var(--primary-text);cursor:pointer;justify-content:center;align-items:center;gap:.35rem;padding:0 .7rem;font-weight:900;display:inline-flex}.ready-panel{gap:.35rem;display:grid}.ready-timer{color:var(--muted-color);font-family:var(--font-heading);font-variant-numeric:tabular-nums;justify-self:center;font-size:clamp(1.25rem,2vw,1.7rem);line-height:.85}.drawing-title-tag{z-index:4;border:1px solid var(--border-color);background:color-mix(in srgb, var(--panel-solid) 88%, transparent);max-width:min(80%,24rem);color:var(--text-color);font-family:var(--font-heading);text-align:center;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 10px 22px color-mix(in srgb, var(--shadow-color) 72%, transparent);border-top:0;border-radius:0 0 14px 14px;padding:.38rem .85rem .52rem;font-size:clamp(1.05rem,2vw,1.45rem);line-height:.9;animation:.36s both drawing-tag-in;position:absolute;top:0;left:50%;overflow:hidden;transform:translate(-50%)}.ready-button{isolation:isolate;position:relative;overflow:hidden}.ready-button:not(:disabled){color:#fff;background:#169b63;box-shadow:0 18px 34px #169b6359}.ready-button span{z-index:2;position:relative}.ready-button:before,.ready-button:after{content:"";pointer-events:none;position:absolute;inset:0}.ready-button:before{z-index:0;background:linear-gradient(90deg,#0000,#ffffff47,#0000);transform:translate(-110%)}.ready-button:after{z-index:1;transform-origin:0;background:#b8ffd56b;transform:scaleX(0)}.ready-button.is-confirming:not(:disabled){animation:.62s both ready-pop}.ready-button.is-confirming:before{animation:.85s both ready-sheen}.ready-button.is-holding:after{animation:.78s linear forwards ready-hold}@keyframes ready-pop{0%,to{transform:translateY(0)scale(1)}45%{transform:translateY(-1px)scale(1.025)}}@keyframes ready-sheen{to{transform:translate(110%)}}@keyframes ready-hold{to{transform:scaleX(1)}}@keyframes drawing-tag-in{0%{opacity:0;transform:translate(-50%,-.45rem)}to{opacity:1;transform:translate(-50%)}}.nudibranch-icon{--icon-accent:#2fd0c5;aspect-ratio:1;flex:none;width:1.45rem;display:block}.nudibranch-icon path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.nudibranch-icon .icon-accent{fill:var(--icon-accent);stroke:currentColor;opacity:.92}.tool-section{border-top:1px solid var(--border-color);gap:.55rem;padding-top:.6rem;display:grid}.tool-section:first-child{border-top:0;padding-top:0}.tool-section-title{color:var(--muted-color);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:900}.compact-tool-grid,.history-actions{gap:.45rem;display:grid}.compact-tool-grid{grid-template-columns:repeat(3,minmax(3.4rem,4.15rem));justify-content:start}.history-actions{grid-template-columns:repeat(2,minmax(3.4rem,4.15rem));justify-content:start}.tool-button,.history-actions button{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;max-width:4.15rem;min-height:2.55rem;color:var(--text-color);border-radius:8px;font-size:.82rem;font-weight:900}.compact-tool-button{place-items:center;gap:.1rem;min-height:2.75rem;padding:.35rem;display:grid}.tool-label{font-size:.65rem;line-height:1}.history-button{place-items:center;display:grid}.history-button .nudibranch-icon{width:1.55rem}.tool-button.is-selected,.history-actions button:not(:disabled):hover{background:var(--primary-bg);color:var(--primary-text)}.tool-button.is-selected .nudibranch-icon,.history-actions button:not(:disabled):hover .nudibranch-icon,.chat-form button .nudibranch-icon{--icon-accent:#f45fb3}.brush-size-control{color:var(--muted-color);grid-template-columns:3.6rem 1fr;align-items:center;gap:.6rem;font-weight:900;display:grid}.brush-size-control input{accent-color:#18c7d2;width:100%}.color-picker-shell{gap:.55rem;display:grid}.active-color-row{align-items:center;gap:.75rem;display:flex}.active-color-row strong{text-transform:uppercase;font-size:.95rem}.active-color{aspect-ratio:1;border:1px solid var(--border-color);background:var(--active-color);border-radius:8px;width:2.25rem;box-shadow:inset 0 0 0 3px #ffffffb8}.color-map{aspect-ratio:1;border:1px solid var(--border-color);background:linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, hsl(var(--picker-hue) 100% 50%));cursor:crosshair;touch-action:none;border-radius:8px;width:clamp(5.75rem,11dvh,7rem);min-height:0;position:relative;overflow:hidden}.color-map-thumb{left:var(--picker-x);top:var(--picker-y);aspect-ratio:1;pointer-events:none;border:2px solid #fff;border-radius:999px;width:1.05rem;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000008c,0 4px 12px #00000047}.hue-slider{width:100%;accent-color:hsl(var(--picker-hue) 100% 50%)}.recent-color-strip{scrollbar-width:thin;gap:.45rem;padding:.15rem .1rem .35rem;display:flex;overflow-x:auto}.swatch-button{border:1px solid var(--border-color);background:var(--swatch-color);border-radius:8px;min-height:2.1rem;box-shadow:inset 0 0 0 2px #ffffff8f}.recent-color-strip .swatch-button{flex:0 0 2.3rem}.swatch-button.is-selected{outline:3px solid var(--primary-bg);outline-offset:2px}.result-gallery{grid-template-columns:1fr 1fr;gap:.85rem;display:grid}.result-gallery.is-free{grid-template-columns:minmax(0,1fr)}.result-gallery figure{gap:.45rem;display:grid}.result-gallery img,.summary-card img{aspect-ratio:1;object-fit:contain;border:1px solid var(--border-color);width:100%;box-shadow:0 22px 44px var(--shadow-color);background:#fff;border-radius:8px}.result-gallery figcaption{color:var(--muted-color);text-transform:uppercase;font-weight:900}.round-score-panel{position:sticky;top:6rem}.drawing-owner-card,.memory-score-card,.vote-controls{border:1px solid var(--border-color);background:var(--panel-soft);border-radius:8px;gap:.45rem;padding:.75rem;display:grid}.drawing-owner-card span,.memory-score-card span,.vote-controls span,.memory-score-card small{color:var(--muted-color);text-transform:uppercase;font-weight:900}.drawing-owner-card strong,.memory-score-card strong{font-family:var(--font-heading);overflow-wrap:anywhere;font-size:clamp(2.4rem,7vw,4.2rem);line-height:.78}.vote-button-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;display:grid}.vote-button-grid button{border:1px solid var(--border-color);background:var(--panel-solid);min-height:2.65rem;color:var(--text-color);cursor:pointer;font:inherit;border-radius:8px;font-weight:900}.vote-button-grid button.is-selected{background:var(--primary-bg);color:var(--primary-text)}.round-score-panel strong,.summary-score strong{font-family:var(--font-heading);font-size:clamp(4rem,10vw,7rem);line-height:.76}.round-score-panel span:not(.eyebrow),.summary-score span{color:var(--muted-color);text-transform:uppercase;font-weight:900}.coloring-summary{justify-self:center;width:min(70rem,100%)}.summary-score{background:var(--panel-soft);border-radius:8px;place-items:center;gap:.3rem;padding:1rem;display:grid}.summary-grid{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem;display:grid}.summary-card{gap:.55rem;display:grid}.summary-card div{background:var(--panel-soft);border-radius:8px;justify-content:space-between;align-items:center;gap:.5rem;min-height:2.6rem;padding:.5rem .65rem;display:flex}.summary-card span{color:var(--muted-color);font-weight:900}.summary-card strong{font-family:var(--font-heading);font-size:2rem;line-height:.8}@media (width<=980px){.coloring-screen.is-active{--coloring-play-height:calc(100dvh - 8rem);min-height:0}.coloring-shell-header{grid-template-columns:auto minmax(0,max-content) auto;justify-content:center;gap:.65rem;width:fit-content;padding:.62rem .8rem}.coloring-shell-center{gap:.45rem}.coloring-shell-phase{font-size:clamp(1.35rem,3.4vw,1.9rem)}.coloring-shell-drawing{font-size:clamp(1rem,2.4vw,1.35rem)}.coloring-shell{padding:.65rem}.coloring-play-layout{--play-gap:clamp(.45rem, 1.2vw, .65rem);--right-panel-width:clamp(11.5rem, 26vw, 15rem);--board-size:min(calc(100dvh - 18rem), calc(100vw - 3rem - var(--right-panel-width) - var(--play-gap)));grid-template-columns:minmax(17rem, var(--board-size)) var(--right-panel-width);grid-template-rows:minmax(0,1fr) minmax(5.5rem,7.75rem);align-content:center}.coloring-left-panel{grid-area:2/1/3/2;grid-template-rows:minmax(0,1fr) auto;height:100%}.coloring-board-panel{grid-area:1/1/2/2}.coloring-color-panel{grid-area:1/2/3/3;height:100%;overflow:hidden}.chat-feed{min-height:0}.coloring-result-layout,.result-gallery{grid-template-columns:1fr;gap:.65rem}.coloring-side-panel,.round-score-panel{position:static}.coloring-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.coloring-mode-grid,.coloring-primary-grid,.coloring-setup-grid{grid-template-columns:1fr}.coloring-screen.is-active{--coloring-play-height:calc(100dvh - 5.5rem);gap:.45rem;height:auto;min-height:calc(100dvh - 5.5rem);overflow:visible}.coloring-shell-header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"center stats""mode stats";padding:.5rem .6rem}.coloring-shell-mode{grid-area:mode}.coloring-shell-center{grid-area:center;justify-content:start;justify-self:start;max-width:100%}.coloring-shell-stats{grid-area:stats}.coloring-shell-phase{font-size:clamp(1.25rem,7vw,1.85rem)}.coloring-shell-drawing{max-width:46vw;font-size:clamp(.9rem,4.5vw,1.25rem)}.shell-stat span{font-size:.62rem}.shell-stat strong{font-size:clamp(1.2rem,6vw,1.7rem)}.coloring-shell{border-radius:10px;margin-bottom:.45rem;padding:.45rem;overflow:visible}.coloring-play-layout{--play-gap:.45rem;--board-size:min(calc(100vw - 1.9rem), 26rem);grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr);place-content:start stretch;height:auto}.coloring-board-panel{width:min(100%, var(--board-size));grid-area:1/1}.coloring-canvas-frame{width:min(100%, var(--board-size))}.coloring-color-panel{grid-area:2/1;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:.45rem;height:auto;padding:.55rem;overflow:hidden}.coloring-color-panel .settings-section{grid-row:1/3}.coloring-left-panel{grid-area:3/1;grid-template-rows:auto auto;height:auto;min-height:0;padding:.55rem;overflow:visible}.chat-section{gap:.35rem}.chat-feed{max-height:8rem;display:grid}.chat-form{grid-template-columns:minmax(0,1fr) minmax(3.9rem,auto);gap:.35rem}.chat-form input,.chat-form button,.coloring-submit-button{min-height:2.25rem}.coloring-submit-button{justify-self:stretch;width:100%;max-width:none}.coloring-phase-badge{font-size:clamp(1.4rem,9vw,2.25rem);top:.5rem;left:.5rem}.compact-tool-grid{grid-template-columns:repeat(3,2.65rem);gap:.35rem}.tool-label{display:none}.compact-tool-button{min-height:2.35rem;padding:.25rem}.history-actions{grid-template-columns:repeat(2,2.65rem);gap:.35rem}.tool-button,.history-actions button{max-width:2.65rem;min-height:2.35rem}.tool-section{gap:.4rem;padding-top:.45rem}.tool-section-title{font-size:.68rem}.brush-size-control{grid-template-columns:1fr;gap:.25rem;font-size:.75rem}.active-color-row{gap:.45rem}.active-color-row strong{font-size:.78rem}.active-color{width:1.9rem}.color-map{width:clamp(4.8rem,18vw,6.3rem)}.recent-color-strip .swatch-button{flex-basis:1.9rem}.swatch-button{min-height:1.8rem}}.game-shell{--shell-bg:#eef8f3;--text-color:#151d1f;--muted-color:#315155;--panel-solid:#fff;--panel-soft:#f6fbf7;--border-color:#151d1f24;--control-fill:#151d1f1a;--shadow-color:#151d1f1f;--primary-bg:#151d1f;--primary-text:#fff;--on-primary-muted:#ffffffad;--inverse-panel-bg:#fff;--inverse-panel-text:#151d1f;isolation:isolate;background:var(--shell-bg);min-height:100vh;color:var(--text-color);transition:background-color .52s,color .52s;position:relative;overflow:hidden}.game-shell:after{content:"";z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at 85% 1.4rem, color-mix(in srgb, var(--primary-bg) 24%, transparent), transparent 34rem);position:fixed;inset:0}.game-shell.theme-shifting:after{animation:.62s both theme-tide}.game-shell.theme-dark{--shell-bg:#10191b;--text-color:#f5fbf7;--muted-color:#aec7c8;--panel-solid:#182326;--panel-soft:#223033;--border-color:#ffffff29;--control-fill:#ffffff1f;--shadow-color:#00000057;--primary-bg:#f5fbf7;--primary-text:#10191b;--on-primary-muted:#10191ba3;--inverse-panel-bg:#10191b;--inverse-panel-text:#f5fbf7}.reef-backdrop{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.nudi-float{left:var(--float-left);top:var(--float-top);width:clamp(8rem, var(--float-size), 24rem);opacity:var(--float-opacity);filter:saturate(1.12) drop-shadow(0 20px 28px var(--shadow-color));transform:rotate(var(--float-rotation));animation:nudi-drift var(--float-duration) ease-in-out infinite;animation-delay:var(--float-delay);position:absolute}.game-topbar{z-index:10;justify-content:space-between;align-items:center;gap:.85rem;padding:1rem clamp(1rem,4vw,2.5rem);display:flex;position:fixed;top:0;left:0;right:0}.brand-button,.gear-button,.topbar-icon-button,.back-button,.start-button,.secondary-start-button,.mode-card,.result-actions button,.switch-button,.segmented-control button,.submit-color-button,.room-search-button,.room-create-button,.player-name-button,.copy-invite-button,.start-room-button,.room-mode-card,.rgb-disclosure{font:inherit;color:inherit;cursor:pointer;border:0}.brand-button{border:1px solid var(--border-color);background:var(--panel-solid);font-family:var(--font-heading);box-shadow:0 10px 24px var(--shadow-color);border-radius:8px;padding:.7rem .9rem;font-size:clamp(1.1rem,2vw,1.45rem)}.topbar-controls{border:1px solid color-mix(in srgb, var(--border-color) 82%, transparent);background:color-mix(in srgb, var(--panel-solid) 72%, transparent);box-shadow:0 10px 24px var(--shadow-color);-webkit-backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:.45rem;padding:.35rem;display:flex}.topbar-icon-button{aspect-ratio:1;width:2.65rem;color:var(--text-color);background:0 0;border-radius:999px;place-items:center;transition:transform .18s,background-color .22s,color .22s;display:grid;position:relative}.topbar-icon-button:hover,.topbar-icon-button.is-active{background:var(--primary-bg);color:var(--primary-text);transform:translateY(-1px)scale(1.04)}.topbar-icon-button:active{transform:translateY(1px)scale(.96)}.topbar-icon-button:hover .header-nudi-icon,.topbar-icon-button.is-active .header-nudi-icon{animation:.62s both icon-swim}.topbar-icon-button:after{content:"";border-radius:inherit;opacity:0;border:1px solid;transition:opacity .18s,transform .18s;position:absolute;inset:.28rem;transform:scale(.72)}.topbar-icon-button:hover:after,.topbar-icon-button.is-active:after{opacity:.32;transform:scale(1)}.topbar-icon-chip{color:#10191b;background:#18c7d2;border-radius:999px;min-width:1.15rem;padding:.03rem .18rem .07rem;font-size:.58rem;font-weight:900;line-height:1;position:absolute;bottom:-.08rem;right:-.18rem}.header-nudi-icon{--icon-fill:#2fd0c5;aspect-ratio:1;width:1.72rem;display:block}.header-nudi-icon path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.header-nudi-icon .icon-fill{fill:var(--icon-fill);opacity:.9}.topbar-icon-button.is-active .header-nudi-icon{--icon-fill:#f45fb3}.gear-button{aspect-ratio:1;border:1px solid var(--border-color);background:var(--panel-solid);width:3rem;box-shadow:0 10px 24px var(--shadow-color);border-radius:8px;place-items:center;font-size:1.35rem;transition:transform .18s,background .18s;display:grid}.gear-button:hover,.gear-button.is-active{background:var(--primary-bg);color:var(--primary-text);transform:rotate(22deg)scale(1.04)}.settings-panel{z-index:12;border:1px solid var(--border-color);background:var(--panel-solid);width:min(20rem,100vw - 2rem);box-shadow:0 22px 50px var(--shadow-color);border-radius:8px;padding:1rem;position:fixed;top:4.9rem;right:clamp(1rem,4vw,2.5rem)}.settings-title{font-family:var(--font-heading);margin-bottom:.85rem;font-size:1.55rem}.setting-row{border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:1rem;min-height:3.2rem;display:flex}.switch-button,.segmented-control{background:var(--control-fill);border-radius:8px;min-width:7.1rem;min-height:2.15rem}.switch-button{padding:.35rem .7rem}.switch-button.is-on{background:var(--primary-bg);color:var(--primary-text)}.segmented-control{grid-template-columns:1fr 1fr;padding:.2rem;display:grid}.segmented-control button{background:0 0;border-radius:6px}.segmented-control button.is-selected{background:var(--primary-bg);color:var(--primary-text)}.game-main{align-items:center;width:min(1180px,100vw - 2rem);min-height:100vh;margin:0 auto;padding:6rem 0 2rem;display:grid}.game-main:has(.coloring-screen.is-active){align-items:start;width:calc(100vw - 2rem);max-width:min(2400px,100vw - 2rem);padding:5rem 0 2rem}.start-screen{grid-template-columns:minmax(0,.9fr) minmax(18rem,1.1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);display:grid}.start-copy{gap:1.1rem;display:grid;container-type:inline-size}.eyebrow{color:var(--muted-color);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;font-weight:800}.brand-title{max-width:100%;font-family:var(--font-heading);letter-spacing:0;overflow-wrap:normal;white-space:nowrap;font-size:clamp(2.4rem,15cqi,8rem);line-height:.86;display:block}.screen-heading h1{max-width:10ch;font-family:var(--font-heading);font-size:clamp(3.9rem,10vw,8.6rem);line-height:.85}.start-copy p:not(.eyebrow){max-width:36rem;color:var(--muted-color);font-size:clamp(1rem,2vw,1.25rem);line-height:1.65}.start-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem;width:min(36rem,100%);display:grid}.start-button{background:var(--primary-bg);width:100%;min-height:4rem;color:var(--primary-text);text-transform:uppercase;box-shadow:0 18px 34px var(--shadow-color);border-radius:8px;font-size:1.1rem;font-weight:800;position:relative;overflow:hidden}.start-button:before{content:"";background:conic-gradient(from 90deg,#18c7d2,#b8f141,#f6c945,#ff6b4a,#f43f8f,#18c7d2);animation:2.8s linear infinite spin;position:absolute;inset:-140% -40%}.start-button:after,.secondary-start-button:after{content:"";z-index:2;pointer-events:none;opacity:.28;background:radial-gradient(circle at 20% 38%,#fff3,#0000 14%),radial-gradient(circle at 74% 58%,#2fd0c533,#0000 13%),linear-gradient(115deg,#0000 20%,#fff3 48%,#0000 72%);animation:4.8s ease-in-out infinite button-caustics;position:absolute;inset:-45% -25%;transform:translate(-18%)rotate(-8deg)}.start-button span{z-index:3;background:var(--primary-bg);border-radius:6px;place-items:center;animation:5.4s ease-in-out infinite button-underwater;display:grid;position:absolute;inset:.18rem}.secondary-start-button{border:1px solid var(--border-color);background:var(--panel-solid);min-height:4rem;color:var(--text-color);text-transform:uppercase;box-shadow:0 18px 34px var(--shadow-color);border-radius:8px;font-size:1.1rem;font-weight:900;transition:transform .18s,background .18s,color .18s;position:relative;overflow:hidden}.multiplayer-start-button{isolation:isolate;overflow:visible}.secondary-start-button:hover,.secondary-start-button:focus-visible{background:var(--primary-bg);color:var(--primary-text);transform:translateY(-.15rem)scale(1.015)}.button-label{z-index:4;animation:5.8s ease-in-out -1.9s infinite button-underwater;display:inline-block;position:relative}.button-nudi-stream{z-index:3;pointer-events:none;opacity:0;transition:opacity .18s .68s;position:absolute;inset:0;transform:scale(1)}.multiplayer-start-button:hover .button-nudi-stream,.multiplayer-start-button:focus-visible .button-nudi-stream{opacity:1;transition-delay:0s}.multiplayer-start-button:before{content:"";z-index:1;opacity:0;background:radial-gradient(circle at 18%,#18c7d247,#0000 32%),radial-gradient(circle at 86% 45%,#f45fb338,#0000 34%);transition:opacity .18s,transform .26s;position:absolute;inset:0;transform:scaleX(.7)}.multiplayer-start-button:after{z-index:2;border-radius:8px;inset:0}.multiplayer-start-button:hover:before,.multiplayer-start-button:focus-visible:before{opacity:1;transform:scaleX(1)}.button-nudi{filter:saturate(1.2)drop-shadow(0 6px 8px #00000038);opacity:0;width:2.15rem;transform:translate3d(var(--entry-x), var(--entry-y), 0) rotate(var(--entry-rot)) scale(.45);will-change:transform, opacity;transition:transform .86s cubic-bezier(.22,1,.36,1),opacity .16s linear .66s;position:absolute}.nudi-one{--entry-x:-64vw;--entry-y:-4vh;--entry-rot:-34deg;top:24%;left:7%}.nudi-two{--entry-x:10vw;--entry-y:-54vh;--entry-rot:28deg;top:56%;left:29%}.nudi-three{--entry-x:58vw;--entry-y:2vh;--entry-rot:32deg;top:21%;right:13%}.nudi-four{--entry-x:-7vw;--entry-y:54vh;--entry-rot:-34deg;bottom:12%;right:35%}.multiplayer-start-button:hover .button-nudi,.multiplayer-start-button:focus-visible .button-nudi{opacity:.92;transition-delay:0s;transform:translate(0,0)rotate(0)scale(.72)}.start-stage{place-items:center;min-height:min(64vh,38rem);display:grid;position:relative}.start-stage img{z-index:2;width:min(88vw,39rem);filter:saturate(1.2) drop-shadow(0 30px 38px var(--shadow-color));animation:5s ease-in-out infinite hero-swim;position:relative}.color-wheel{aspect-ratio:1;opacity:.42;filter:blur(8px)saturate(1.22);background:conic-gradient(#18c7d2,#b8f141,#f6c945,#ff6b4a,#f43f8f,#7b48ff,#18c7d2);border-radius:50%;width:min(70vw,30rem);animation:16s linear infinite spin;position:absolute}.mode-screen,.classic-screen,.sound-screen,.multiplayer-screen,.room-lobby-screen{gap:2rem;display:grid}.multiplayer-screen,.room-lobby-screen{justify-self:center;width:min(42rem,100%)}.multiplayer-panel,.room-lobby-panel{border:1px solid var(--border-color);background:var(--panel-solid);box-shadow:0 24px 48px var(--shadow-color);border-radius:8px;gap:1rem;padding:clamp(1rem,4vw,1.4rem);display:grid}.multiplayer-name-panel{gap:1.2rem}.multiplayer-panel .choice-heading,.room-lobby-panel .choice-heading{text-align:center}.room-lobby-screen{width:min(54rem,100%)}.room-lobby-screen.is-playing{width:min(72rem,100%)}.room-game-panel{gap:1rem;display:grid}.room-coloring-panel{width:100%}.room-coloring-panel .coloring-screen{min-height:auto}.room-coloring-panel .coloring-shell-header{margin-top:.2rem}.coloring-room-results{margin-top:.75rem}.multiplayer-game-hud{justify-content:end}.multiplayer-player-strip{scrollbar-width:thin;gap:.65rem;padding-block:.1rem .35rem;display:flex;overflow-x:auto}.multiplayer-player-chip{border:1px solid color-mix(in srgb, var(--player-color) 52%, var(--border-color));background:radial-gradient(circle at 16% 24%, color-mix(in srgb, var(--player-color) 28%, transparent), transparent 44%), var(--panel-solid);min-width:9.2rem;min-height:4.5rem;box-shadow:0 12px 24px var(--shadow-color);border-radius:8px;grid-template-rows:1fr auto;grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:.1rem .55rem;padding:.45rem .65rem .45rem .45rem;display:grid;position:relative}.multiplayer-player-chip.is-self{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--player-color) 62%, transparent), 0 12px 24px var(--shadow-color)}.multiplayer-player-chip.is-away{opacity:.56;filter:saturate(.58)}.multiplayer-player-chip .player-nudi-image{width:3rem;filter:saturate(1.18) drop-shadow(0 6px 9px var(--shadow-color));grid-row:1/-1}.multiplayer-player-chip strong{color:var(--text-color);font-family:var(--font-heading);text-overflow:ellipsis;white-space:nowrap;font-size:1.15rem;line-height:.9;overflow:hidden}.multiplayer-player-chip span{color:var(--muted-color);text-transform:uppercase;font-size:.7rem;font-weight:900}.multiplayer-result-actions{gap:.85rem;display:grid}.multiplayer-result-board{gap:.45rem;display:grid}.multiplayer-result-board article{border:1px solid color-mix(in srgb, var(--player-color) 45%, var(--border-color));background:var(--panel-soft);border-radius:8px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.65rem;min-height:3.2rem;padding:.5rem .65rem;display:grid}.multiplayer-result-board strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.multiplayer-result-board span,.multiplayer-result-board small{color:var(--muted-color);font-weight:900}.multiplayer-result-board small{min-width:2.6rem;color:var(--text-color);text-align:right}.room-lobby-summary{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:.8rem;display:grid}.player-name-form,.room-invite-section,.room-players-section{gap:.8rem;display:grid}.player-name-field,.invite-link-field{gap:.45rem;font-weight:900;display:grid}.player-name-field span,.invite-link-field span{color:var(--muted-color);text-transform:uppercase;font-size:.82rem}.player-name-field input{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;min-height:3.6rem;color:var(--text-color);border-radius:8px;padding:.2rem .9rem;font-size:1.35rem;font-weight:900}.player-name-field input:disabled{color:var(--muted-color)}.player-name-button,.copy-invite-button,.start-room-button{text-transform:uppercase;border-radius:8px;min-height:3.4rem;font-weight:900}.player-name-button,.start-room-button{background:var(--primary-bg);color:var(--primary-text);box-shadow:0 14px 28px var(--shadow-color)}.copy-invite-button{border:1px solid var(--border-color);background:var(--panel-soft);color:var(--text-color)}.player-name-button:disabled,.start-room-button:disabled{background:var(--control-fill);color:var(--muted-color);box-shadow:none;cursor:default}.invite-room-chip{background:var(--control-fill);width:fit-content;color:var(--muted-color);text-transform:uppercase;border-radius:999px;align-items:center;gap:.55rem;padding:.45rem .65rem;font-size:.82rem;font-weight:900;display:inline-flex}.invite-room-chip strong{color:var(--text-color);letter-spacing:.08em}.invite-link-field output{border:1px solid var(--border-color);background:var(--panel-soft);min-height:3rem;color:var(--muted-color);text-overflow:ellipsis;white-space:nowrap;border-radius:8px;align-items:center;padding:.65rem .75rem;font-size:.92rem;font-weight:800;display:flex;overflow:hidden}.room-section-heading{justify-content:space-between;align-items:end;gap:.8rem;display:flex}.room-section-heading span{color:var(--muted-color);text-transform:uppercase;font-size:.82rem;font-weight:900}.room-players-grid{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;display:grid}.room-player-card{border:1px solid color-mix(in srgb, var(--player-color) 50%, var(--border-color));background:radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--player-color) 24%, transparent), transparent 38%), var(--panel-soft);min-height:10.4rem;box-shadow:0 16px 32px var(--shadow-color);border-radius:8px;align-content:end;justify-items:center;gap:.3rem;padding:.75rem;animation:.52s cubic-bezier(.16,1,.3,1) both player-nudi-arrive;display:grid;position:relative;overflow:hidden}.room-player-card.is-self{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--player-color) 68%, transparent), 0 16px 32px var(--shadow-color)}.room-player-card.is-away{opacity:.58;filter:saturate(.55)}.room-player-card .player-nudi-image{width:min(7.4rem,72%);filter:saturate(1.2) drop-shadow(0 12px 16px var(--shadow-color));animation:4.6s ease-in-out infinite lobby-nudi-swim;position:absolute;top:.4rem}.leader-crown-icon{z-index:3;aspect-ratio:1;background-image:var(--leader-crown-image);width:2.7rem;filter:drop-shadow(0 7px 10px var(--shadow-color));pointer-events:none;background-position:50% 70%;background-repeat:no-repeat;background-size:188%;border-radius:50%;position:absolute;top:.32rem;right:.42rem}.leader-crown-icon.is-compact{background-size:205%;width:1.7rem;top:-.35rem;right:-.25rem}.kick-player-button{z-index:4;border:1px solid color-mix(in srgb, #ff6b4a 45%, var(--border-color));background:color-mix(in srgb, var(--panel-solid) 90%, #ff6b4a);color:#ff6b4a;width:2rem;height:2rem;box-shadow:0 8px 16px var(--shadow-color);border-radius:50%;place-items:center;font-size:1.2rem;font-weight:900;line-height:1;display:grid;position:absolute;top:.42rem;left:.42rem}.kick-player-button:hover,.kick-player-button:focus-visible{color:#fff;background:#ff6b4a;transform:scale(1.06)}.kick-player-button.is-compact{width:1.55rem;height:1.55rem;font-size:.95rem;top:-.25rem;left:-.2rem}.room-player-card strong{z-index:1;max-width:100%;font-family:var(--font-heading);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:1.45rem;line-height:.9;position:relative;overflow:hidden}.room-player-card span{z-index:1;color:var(--muted-color);text-transform:uppercase;font-size:.72rem;font-weight:900;position:relative}.room-player-count{background:var(--panel-soft);min-width:8rem;color:var(--text-color);border-radius:8px;place-items:center;gap:.15rem;padding:.75rem;display:grid}.room-player-count span{color:var(--muted-color);text-transform:uppercase;font-size:.78rem;font-weight:900}.room-player-count strong{font-family:var(--font-heading);font-size:2.3rem;line-height:.8}.room-mode-section{gap:.7rem;display:grid}.room-mode-carousel{overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:thin;grid-auto-columns:minmax(15rem,48%);grid-auto-flow:column;gap:.8rem;padding:.1rem .1rem .65rem;display:grid;overflow-x:auto}.room-mode-card{border:1px solid color-mix(in srgb, var(--mode-color) 42%, var(--border-color));background:linear-gradient(160deg, color-mix(in srgb, var(--mode-color) 18%, var(--panel-solid)), var(--panel-solid) 56%, color-mix(in srgb, var(--mode-color-alt) 18%, var(--panel-solid))), var(--panel-solid);text-align:left;min-height:12rem;box-shadow:0 16px 32px var(--shadow-color);scroll-snap-align:start;border-radius:8px;align-content:start;gap:.65rem;padding:1rem;display:grid}.room-mode-card.is-ready:hover{border-color:var(--mode-color);transform:translateY(-.2rem)}.room-mode-card.is-selected{border-color:var(--mode-color);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--mode-color) 58%, transparent), 0 16px 32px var(--shadow-color)}.room-mode-card.is-locked{filter:saturate(.72);cursor:default}.room-mode-settings-panel{border:1px solid var(--border-color);background:var(--panel-soft);border-radius:8px;gap:.9rem;padding:1rem;display:grid}.room-mode-settings-panel>div:first-child{gap:.45rem;display:grid}.room-mode-settings-panel strong{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,2.8rem);line-height:.9}.room-mode-settings-panel p{color:var(--muted-color);margin:0;line-height:1.45}.room-mode-settings-grid{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.7rem;display:grid}.room-setting-field{gap:.35rem;font-weight:900;display:grid}.room-setting-field span{color:var(--muted-color);text-transform:uppercase;font-size:.76rem}.room-setting-field input{border:1px solid var(--border-color);background:var(--panel-solid);width:100%;min-height:2.8rem;color:var(--text-color);border-radius:8px;padding:.35rem .55rem;font-size:1.1rem;font-weight:900}.multiplayer-coloring-gallery{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.multiplayer-coloring-gallery figure{position:relative;overflow:hidden}.multiplayer-coloring-gallery figure.is-self{box-shadow:inset 0 0 0 2px var(--primary-bg), 0 18px 34px var(--shadow-color)}.multiplayer-coloring-gallery figcaption{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.multiplayer-coloring-gallery figcaption strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.multiplayer-vote-grid{inset-inline:.65rem;background:color-mix(in srgb, var(--panel-solid) 88%, transparent);box-shadow:0 12px 24px var(--shadow-color);border-radius:8px;padding:.35rem;position:absolute;bottom:3.15rem}.choice-heading h1,.choice-heading h2{font-family:var(--font-heading);font-size:clamp(2.5rem,5vw,4rem);line-height:.95}.room-code-form{gap:.8rem;display:grid}.room-code-field{gap:.45rem;font-weight:900;display:grid}.room-code-field span{color:var(--muted-color);text-transform:uppercase;font-size:.82rem}.room-code-field input{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;min-height:3.6rem;color:var(--text-color);letter-spacing:.08em;text-transform:uppercase;border-radius:8px;padding:.2rem .8rem;font-size:1.5rem;font-weight:900}.room-code-field input:disabled{color:var(--muted-color)}.room-search-button,.room-create-button{text-transform:uppercase;border-radius:8px;min-height:3.4rem;font-weight:900}.room-search-button{background:var(--primary-bg);color:var(--primary-text)}.room-create-button{border:1px solid var(--border-color);background:var(--panel-soft);color:var(--text-color)}.room-search-button:disabled,.room-create-button:disabled{background:var(--control-fill);color:var(--muted-color);cursor:default}.room-status{color:var(--muted-color);font-weight:900;line-height:1.4}.room-code-output{background:var(--primary-bg);min-height:4rem;color:var(--primary-text);border-radius:8px;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .9rem;display:flex}.room-code-output span{color:var(--on-primary-muted);text-transform:uppercase;font-weight:900}.room-code-output strong{font-family:var(--font-heading);letter-spacing:.06em;font-size:2.6rem;line-height:.8}.screen-heading{gap:.4rem;display:grid}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1rem;display:grid}.mode-card{border:1px solid color-mix(in srgb, var(--mode-color) 42%, var(--border-color));background:linear-gradient(160deg, color-mix(in srgb, var(--mode-color) 22%, var(--panel-solid)), var(--panel-solid) 48%, color-mix(in srgb, var(--mode-color-alt) 22%, var(--panel-solid))), var(--panel-solid);text-align:left;min-height:22rem;box-shadow:0 18px 36px var(--shadow-color);border-radius:8px;grid-template-rows:auto 1fr auto auto auto;gap:.8rem;padding:1rem;transition:transform .22s,box-shadow .22s,border-color .22s;display:grid}.mode-card:hover{border-color:var(--mode-color);box-shadow:0 28px 52px var(--shadow-color);transform:translateY(-.45rem)}.mode-card.is-locked,.mode-card:disabled{cursor:default}.mode-card img{width:100%;filter:saturate(1.18) drop-shadow(0 18px 24px var(--shadow-color));align-self:center;transition:transform .22s;transform:rotate(-6deg)}.mode-card:hover img{transform:rotate(2deg)scale(1.04)}.mode-meta,.mode-action{background:var(--control-fill);text-transform:uppercase;border-radius:6px;width:fit-content;padding:.35rem .5rem;font-size:.78rem;font-weight:800}.mode-action{background:var(--primary-bg);color:var(--primary-text)}.mode-name{font-family:var(--font-heading);font-size:clamp(2rem,3vw,2.7rem);line-height:.94}.mode-description{color:var(--muted-color);line-height:1.45}.mode-card.is-locked,.mode-card:disabled{filter:saturate(.72)}.mode-card:disabled:hover{border-color:color-mix(in srgb, var(--mode-color) 42%, var(--border-color));box-shadow:0 18px 36px var(--shadow-color);transform:none}.mode-card:disabled:hover img{transform:rotate(-6deg)}.play-hud{justify-content:space-between;align-items:stretch;gap:.8rem;display:flex}.back-button,.hud-stat{border:1px solid var(--border-color);background:var(--panel-solid);border-radius:8px;align-items:center;gap:.55rem;min-height:3.35rem;padding:.65rem .9rem;display:flex}.back-button{font-weight:800}.hud-stat{flex-direction:column;justify-content:center;gap:.1rem;min-width:7.3rem}.hud-stat span{color:var(--muted-color);text-transform:uppercase;font-size:.78rem;font-weight:800}.hud-stat strong{font-family:var(--font-heading);font-size:1.8rem;line-height:.9}.classic-layout,.sound-layout{grid-template-columns:minmax(0,1.02fr) minmax(20rem,.98fr);align-items:stretch;gap:clamp(1rem,4vw,2rem);display:grid}.color-arena{border:1px solid var(--border-color);background:var(--display-color);min-height:min(58vh,34rem);box-shadow:0 30px 60px var(--shadow-color);border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.color-arena.is-result{background:var(--panel-solid)}.sound-arena{border:1px solid var(--border-color);min-height:min(58vh,34rem);box-shadow:0 30px 60px var(--shadow-color);background:linear-gradient(135deg,#151d1f,#24464a 48%,#7b48ff);border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.sound-arena.is-result{background:var(--panel-solid)}.arena-state{z-index:1;color:#fff;text-shadow:0 3px 14px #151d1f47;place-items:center;gap:.5rem;display:grid;position:relative}.arena-state span{letter-spacing:.16em;text-transform:uppercase;font-weight:900}.arena-state strong{font-family:var(--font-heading);font-size:clamp(5rem,14vw,11rem);line-height:.75}.result-comparison{z-index:1;grid-template-columns:1fr 1fr;gap:.85rem;width:min(88%,34rem);display:grid;position:relative}.result-score{color:var(--text-color);font-family:var(--font-heading);text-shadow:0 8px 24px var(--shadow-color);pointer-events:none;justify-self:center;font-size:clamp(3.8rem,9vw,6.4rem);line-height:.75;display:block}.result-comparison .result-score,.hz-result .result-score{grid-column:1/-1}.comparison-swatch{color:#fff;text-shadow:0 2px 12px #0000006b;min-height:18rem;box-shadow:inset 0 0 0 1px #ffffff3d, 0 16px 28px var(--shadow-color);border-radius:8px;flex-direction:column;justify-content:flex-end;gap:.25rem;padding:1rem;display:flex}.target-swatch{background:var(--target-color)}.guess-swatch{background:var(--guess-color)}.comparison-swatch span{text-transform:uppercase;font-size:.78rem;font-weight:900}.comparison-swatch strong{font-family:var(--font-heading);font-size:2rem;line-height:.9}.hz-result{gap:.9rem;width:min(88%,34rem);display:grid}.hz-result-values{grid-template-columns:1fr 1fr;gap:.85rem;display:grid}.hz-result-values div{background:var(--primary-bg);min-height:11rem;color:var(--primary-text);box-shadow:0 16px 28px var(--shadow-color);border-radius:8px;flex-direction:column;justify-content:flex-end;gap:.25rem;padding:1rem;display:flex}.hz-result-values span{color:var(--on-primary-muted);text-transform:uppercase;font-size:.78rem;font-weight:900}.hz-result-values strong{font-family:var(--font-heading);font-size:clamp(2.2rem,5vw,3.8rem);line-height:.82}.choice-panel{align-content:start;gap:1rem;display:grid}.rgb-picker{border:1px solid var(--border-color);background:var(--panel-solid);box-shadow:0 18px 36px var(--shadow-color);border-radius:8px;gap:.9rem;padding:1rem;display:grid}.hz-picker{border:1px solid var(--border-color);background:var(--panel-solid);min-height:21rem;box-shadow:0 18px 36px var(--shadow-color);border-radius:8px;grid-template-columns:minmax(4.5rem,7rem) minmax(0,1fr);grid-template-areas:"slider number""slider action";align-items:center;gap:.9rem;padding:1rem;display:grid}.hz-picker.is-disabled{opacity:1}.hz-slider{appearance:none;writing-mode:vertical-lr;direction:rtl;background:linear-gradient(#7b48ff,#f43f8f,#f6c945,#b8f141,#18c7d2);border:0;border-radius:999px;outline:none;grid-area:slider;justify-self:center;width:1.15rem;height:18rem}.hz-slider::-webkit-slider-thumb{aspect-ratio:1;width:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);appearance:none;background:#151d1f;border:4px solid #fff;border-radius:50%}.hz-slider::-moz-range-thumb{width:1.75rem;height:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);background:#151d1f;border:4px solid #fff;border-radius:50%}.hz-number-field{grid-area:number;grid-template-columns:1fr;align-items:center;gap:.45rem;font-weight:900;display:grid}.hz-number-field span{color:var(--muted-color);text-transform:uppercase;font-size:.82rem}.hz-number{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;min-height:2.8rem;color:var(--text-color);text-align:center;border-radius:8px;font-size:1.25rem;font-weight:900}.hz-picker .submit-color-button{grid-area:action;align-self:start}.rgb-picker.is-disabled{opacity:1}.color-plane{border:1px solid var(--border-color);background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--picker-hue) 100% 50%));touch-action:none;cursor:crosshair;border-radius:8px;min-height:16rem;position:relative;overflow:hidden}.color-plane-thumb{left:var(--plane-x);top:var(--plane-y);aspect-ratio:1;width:1.5rem;box-shadow:0 0 0 1px #151d1f7a, 0 8px 18px var(--shadow-color);border:4px solid #fff;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.hue-slider,.rgb-channel input[type=range]{appearance:none;border:0;border-radius:999px;outline:none;width:100%;height:1rem}.hue-slider{background:linear-gradient(90deg,#ff2b2b,#ff0,#0f0,#0ff,#0038ff,#c0f,#ff2b2b)}.rgb-disclosure{border:1px solid var(--border-color);background:var(--panel-soft);width:fit-content;min-height:2.35rem;color:var(--text-color);border-radius:8px;align-items:center;gap:.5rem;padding:.35rem .7rem;font-weight:900;display:inline-flex}.disclosure-caret{border-top:.35rem solid #0000;border-bottom:.35rem solid #0000;border-left:.48rem solid;width:0;height:0;transition:transform .16s}.rgb-disclosure.is-open .disclosure-caret{transform:rotate(90deg)}.rgb-details{gap:.9rem;display:grid}.rgb-channel input[type=range]{background:linear-gradient(to right, #151d1f, var(--channel-color))}.hue-slider::-webkit-slider-thumb{aspect-ratio:1;width:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);appearance:none;background:currentColor;border:4px solid #fff;border-radius:50%}.rgb-channel input[type=range]::-webkit-slider-thumb{aspect-ratio:1;width:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);appearance:none;background:currentColor;border:4px solid #fff;border-radius:50%}.hue-slider::-moz-range-thumb{width:1.75rem;height:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);background:currentColor;border:4px solid #fff;border-radius:50%}.rgb-channel input[type=range]::-moz-range-thumb{width:1.75rem;height:1.75rem;box-shadow:0 0 0 1px #151d1f57, 0 8px 14px var(--shadow-color);background:currentColor;border:4px solid #fff;border-radius:50%}.picker-readout{border:1px solid var(--border-color);background:var(--panel-soft);border-radius:8px;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:.75rem;min-height:3.8rem;padding:.55rem;display:grid}.picker-swatch{aspect-ratio:1;background:var(--picker-color);border-radius:8px;width:2.5rem;box-shadow:inset 0 0 0 2px #ffffffb8}.picker-hex{text-transform:uppercase;font-size:1.2rem;font-weight:900}.picker-format{background:var(--control-fill);border-radius:8px;padding:.55rem .75rem;font-weight:900}.rgb-channels{gap:.65rem;display:grid}.rgb-channel{grid-template-columns:1.4rem 1fr 4.25rem;align-items:center;gap:.65rem;font-weight:900;display:grid}.channel-number{border:1px solid var(--border-color);background:var(--panel-soft);width:100%;min-height:2.4rem;color:var(--text-color);text-align:center;border-radius:8px;font-weight:900}.submit-color-button{background:var(--primary-bg);min-height:3.3rem;color:var(--primary-text);box-shadow:0 14px 28px var(--shadow-color);border-radius:8px;font-weight:900}.submit-color-button:disabled,.rgb-picker input:disabled,.rgb-picker.is-disabled .color-plane,.hz-picker input:disabled{cursor:default}.submit-color-button:disabled{background:var(--control-fill);color:var(--muted-color);box-shadow:none}.result-actions{justify-content:flex-end;align-items:center;padding:0;display:flex}.result-actions button{background:var(--primary-bg);min-height:3rem;color:var(--primary-text);box-shadow:0 18px 34px var(--shadow-color);border-radius:8px;padding:.6rem .9rem;font-weight:900}.click-wave{z-index:30;aspect-ratio:1;pointer-events:none;border:2px solid var(--wave-color);border-radius:50%;width:1rem;animation:.62s ease-out forwards click-burst;position:fixed;transform:translate(-50%,-50%)scale(.2)}@keyframes nudi-drift{0%,to{transform:translate3d(0, 0, 0) rotate(var(--float-rotation))}50%{transform:translate3d(var(--float-drift-x), var(--float-drift-y), 0) rotate(calc(var(--float-rotation) + 9deg))}}@keyframes hero-swim{0%,to{transform:rotate(-3deg)translateY(0)}50%{transform:rotate(3deg)translateY(-.9rem)}}@keyframes button-underwater{0%,to{filter:saturate();translate:0}45%{filter:saturate(1.08);translate:0 -.08rem}70%{translate:.04rem .03rem}}@keyframes button-caustics{0%,to{opacity:.2;transform:translate(-18%)rotate(-8deg)}50%{opacity:.38;transform:translate(18%)rotate(8deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes icon-swim{0%,to{transform:translate(0)rotate(0)}35%{transform:translate(-2px)rotate(-8deg)}70%{transform:translate(2px)rotate(8deg)}}@keyframes player-nudi-arrive{0%{opacity:0;transform:translateY(.7rem)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes lobby-nudi-swim{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-.35rem)rotate(5deg)}}@keyframes theme-tide{0%{opacity:0;transform:scale(.86)}45%{opacity:.28;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}@keyframes click-burst{0%{opacity:.9;transform:translate(-50%,-50%)scale(.1)}80%{opacity:.45}to{opacity:0;transform:translate(-50%,-50%)scale(7)}}.motion-off *,.motion-off :before,.motion-off :after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}@media (width<=980px){.start-screen,.classic-layout,.sound-layout{grid-template-columns:1fr}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.start-stage{min-height:20rem}}@media (width<=640px){.game-shell{overflow:hidden auto}.game-topbar{gap:.5rem;padding:.7rem .65rem}.brand-button{padding:.55rem .7rem;font-size:1.05rem}.topbar-controls{gap:.25rem;padding:.25rem}.topbar-icon-button{width:2.25rem}.header-nudi-icon{width:1.32rem}.game-main{width:min(100vw - 1rem,1180px);padding-top:5.25rem}.game-main:has(.coloring-screen.is-active){min-height:auto;padding:4.4rem 0 1rem}.screen-heading h1{font-size:clamp(3.1rem,18vw,5.2rem)}.start-actions,.mode-grid{grid-template-columns:1fr}.mode-card{min-height:19rem}.play-hud{grid-template-columns:1fr 1fr;display:grid}.back-button{grid-column:1/-1}.color-arena{min-height:20rem}.color-plane{min-height:13rem}.result-comparison,.hz-result-values{grid-template-columns:1fr}.comparison-swatch{min-height:8rem}.result-actions{justify-content:stretch}.result-actions button{width:100%}.room-lobby-summary{grid-template-columns:1fr}.room-mode-carousel{grid-auto-columns:minmax(13.5rem,86%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}