:root{--surface: #EAF4FA;--depth-1: #BFE0F0;--depth-2: #7FC4E6;--depth-3: #3E97CB;--depth-4: #1E5C9E;--depth-5: #14294F;--abyss: #0E1E3C;--depth-1-hi: #DCEEF8;--depth-2-hi: #A6D8F0;--depth-3-hi: #62B0DC;--depth-4-hi: #2E74BE;--depth-5-hi: #21406F;--food-pink: #E93E8F;--food-pink-2: #D6297A;--food-green: #3FA34D;--food-green-2:#2E8039;--food-yellow: #FFD23F;--food-yellow-2:#F2C230;--predator: #F26B21;--predator-2: #E8452A;--warning: #F7941D;--white: #FFFFFF;--rock: #AEB9C4;--rock-shade: #8C99A6;--rock-hi: #CDD6DE;--p-magenta: #E93E8F;--p-green: #3FA34D;--p-purple: #7B4FB5;--p-yellow: #FFD23F;--p-orange: #F26B21;--p-teal: #2FB6B6;--ink: #0E1E3C;--ink-soft: #33507A;--ink-mute: #6B85A8;--chrome: #FFFFFF;--chrome-soft: #EAF4FA;--on-deep: #FFFFFF;--focus-ring: #7FC4E6;--tab-navy: #0E1E3C}:root{--font-display: "Anton", "Archivo Black", system-ui, sans-serif;--font-ui: "Inter", "Manrope", system-ui, sans-serif;--fw-regular: 400;--fw-medium: 500;--fw-semibold:600;--fw-bold: 700;--fw-black: 800;--fs-display: clamp(44px, 8vw, 96px);--fs-h1: 40px;--fs-h2: 30px;--fs-h3: 22px;--fs-h4: 18px;--fs-lead: 20px;--fs-body: 16px;--fs-sm: 14px;--fs-xs: 12px;--fs-label: 14px;--fs-label-sm: 12px;--lh-tight: .92;--lh-heading: 1.05;--lh-body: 1.5;--ls-label: .08em;--ls-wide: .14em;--ls-tight: -.01em}:root{--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--radius-pill: 999px;--radius-tile: 14px;--tile-size: 96px;--control-h: 48px;--control-h-sm: 38px}:root{--shadow-sm: 0 2px 5px rgba(14,30,60,.16);--shadow-md: 0 6px 16px rgba(14,30,60,.22);--shadow-lg: 0 16px 38px rgba(14,30,60,.3);--shadow-tile: 0 5px 10px rgba(14,30,60,.28);--shadow-inset-gloss: inset 0 2px 6px rgba(255,255,255,.35);--vignette: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(14,30,60,.35) 100%);--ease-out: cubic-bezier(.2,.8,.2,1);--ease-in-out: cubic-bezier(.45,0,.2,1);--ease-bounce: cubic-bezier(.34,1.56,.64,1);--dur-fast: .12s;--dur: .24s;--dur-slow: .42s;--dur-flip: .48s;--dur-float: .7s;--dd-ripple: repeating-linear-gradient( 92deg, rgba(255,255,255,0) 0px, rgba(255,255,255,.1) 3px, rgba(255,255,255,0) 7px, rgba(0,0,0,.05) 11px, rgba(255,255,255,0) 15px )}.dd-ui{font-family:var(--font-ui);color:var(--ink)}.dd-display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;line-height:var(--lh-tight)}.dd-label{font-family:var(--font-ui);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-label)}.ocean{background:linear-gradient(180deg,var(--surface) 0%,var(--depth-2) 30%,var(--depth-4) 70%,var(--abyss) 100%);color:var(--on-deep);font-family:var(--font-ui);position:relative}.ocean:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:var(--vignette);opacity:var(--pressure, 0);transition:opacity var(--dur-slow) var(--ease-out)}.dd-chrome{background:var(--chrome);color:var(--ink);font-family:var(--font-ui)}@keyframes dd-flip{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(90deg) scale(1.04)}55%{transform:rotateY(90deg) scale(1.04)}to{transform:rotateY(0) scale(1)}}@keyframes dd-shake{0%,to{transform:translate(0)}15%{transform:translate(-4px) rotate(-1.5deg)}30%{transform:translate(4px) rotate(1.5deg)}45%{transform:translate(-3px) rotate(-1deg)}60%{transform:translate(3px) rotate(1deg)}75%{transform:translate(-2px)}}@keyframes dd-red-flash{0%{opacity:0}20%{opacity:.55}to{opacity:0}}@keyframes dd-float-up{0%{transform:translateY(14px) scale(.96);opacity:0}60%{opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes dd-bubble{0%{transform:translateY(0) scale(.9);opacity:0}10%{opacity:.7}90%{opacity:.5}to{transform:translateY(-120px) scale(1.1);opacity:0}}@keyframes dd-current{0%{background-position:0 0}to{background-position:0 -14px}}.dd-anim-flip{animation:dd-flip var(--dur-flip) var(--ease-in-out) both;transform-style:preserve-3d}.dd-anim-shake{animation:dd-shake var(--dur-slow) var(--ease-out) both}.dd-anim-float{animation:dd-float-up var(--dur-float) var(--ease-bounce) both}@media(prefers-reduced-motion:reduce){.dd-anim-flip,.dd-anim-shake,.dd-anim-float{animation-duration:1ms!important;animation-iteration-count:1!important}}*{box-sizing:border-box}body{margin:0;font-family:var(--font-ui, "Inter", system-ui, sans-serif);color:var(--ink, #0e1e3c);background:var(--chrome-soft, #eaf4fa);line-height:1.5;min-height:100vh}#root{min-height:100vh}h1,h2,h3{margin:0 0 .4em;line-height:1.15;font-family:var(--font-ui, "Inter", sans-serif);font-weight:800;color:var(--ink, #0e1e3c)}button.link{border:none;background:none;box-shadow:none;color:var(--depth-4, #1e5c9e);text-decoration:underline;cursor:pointer;font:inherit;font-weight:700;padding:.2em .4em}input,select{font:inherit;padding:.5em .7em;border:2px solid var(--chrome-soft, #cfe4f0);border-radius:var(--radius-md, 10px);background:var(--white, #fff);color:var(--ink, #0e1e3c);width:100%}input:focus,select:focus{outline:none;border-color:var(--focus-ring, #7fc4e6);box-shadow:0 0 0 3px #7fc4e659}code{background:#0e1e3c14;border-radius:5px;padding:.1em .45em;font-family:ui-monospace,SFMono-Regular,monospace;font-weight:600}.muted{color:var(--ink-mute, #6b85a8)}.small{font-size:.82rem}.error-box{background:#fdecea;border:2px solid #f0b6b0;color:#c62f2f;border-radius:var(--radius-md, 10px);padding:.55em .85em;margin:.5em 0;max-width:64ch;font-weight:600}.page-center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem 1rem}.lobby{max-width:900px;margin:0 auto;padding:3rem 1.5rem 2rem;display:flex;flex-direction:column;gap:2rem;min-height:100vh}.lobby-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}.lobby-hero p{color:var(--ink-soft, #33507a);max-width:54ch;margin:0}.lobby-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.panel{background:var(--chrome, #fff);border:1.5px solid var(--chrome-soft, #d5e7f2);border-radius:var(--radius-lg, 16px);padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow-md, 0 6px 16px rgba(14, 30, 60, .18))}.panel label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft, #33507a)}.lobby-foot{text-align:center;color:var(--ink-mute, #6b85a8);font-size:.8rem;margin-top:auto}.panel.waiting{width:min(480px,92vw)}.join-code{display:flex;align-items:baseline;gap:.6rem}.join-code code{font-size:1.2rem;font-weight:700}.join-link-row{display:flex;gap:.5rem}.join-link-row input{flex:1;font-size:.85rem}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.player-list li{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1.5px solid var(--chrome-soft, #d5e7f2);border-radius:var(--radius-pill, 999px);background:var(--chrome-soft, #f2f9fd);font-weight:600}.player-dot{width:10px;height:10px;border-radius:50%;background:var(--p-magenta, #e93e8f)}.player-dot[data-idx="1"]{background:var(--p-green, #3fa34d)}.player-dot[data-idx="2"]{background:var(--p-purple, #7b4fb5)}.player-dot[data-idx="3"]{background:var(--p-yellow, #ffd23f)}.player-dot[data-idx="4"]{background:var(--p-orange, #f26b21)}.player-dot[data-idx="5"]{background:var(--p-teal, #2fb6b6)}.join-inline{display:flex;align-items:flex-end;gap:.6rem;border-top:1px dashed var(--chrome-soft, #d5e7f2);padding-top:.9rem;flex-wrap:wrap}.join-inline label{flex:1;min-width:180px}.board{max-width:1500px;margin:0 auto;padding:.5rem 1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;min-height:100vh}.board-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding-bottom:.4rem;border-bottom:1.5px solid var(--chrome-soft, #d5e7f2)}.head-info{color:var(--ink-soft, #33507a);font-size:.85rem;font-weight:600}.turn-banner{margin-left:auto;font-family:var(--font-ui, "Inter", sans-serif);text-transform:uppercase;letter-spacing:.05em;font-weight:800;font-size:.8rem;padding:.4em 1em;border-radius:var(--radius-pill, 999px);border:2px solid var(--chrome-soft, #cfe4f0);background:var(--white, #fff);color:var(--ink, #0e1e3c)}.turn-banner.mine{background:var(--depth-4, #1e5c9e);color:var(--white, #fff);border-color:var(--abyss, #0e1e3c);animation:pulseTurn 2.2s infinite}@keyframes pulseTurn{0%,to{box-shadow:0 0 #1e5c9e80}50%{box-shadow:0 0 0 7px #1e5c9e00}}.sync-warn{color:#c62f2f;font-weight:700}.prompt{background:var(--chrome, #fff);border:1.5px solid var(--chrome-soft, #d5e7f2);border-radius:var(--radius-lg, 16px);padding:.7rem 1rem;box-shadow:var(--shadow-sm, 0 2px 5px rgba(14, 30, 60, .16))}.prompt.mine{border-color:var(--depth-3, #3e97cb);box-shadow:0 0 0 2px #3e97cb4d}.prompt-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.prompt-actions{display:flex;gap:.5rem;margin-left:auto}.step{font-weight:600;color:var(--ink, #0e1e3c)}.rock-toggle{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.85rem;margin-left:auto}.rock-toggle input{width:auto}.board-ocean{display:flex;flex-direction:column;gap:4px;border-radius:var(--radius-lg, 16px);overflow:hidden;padding:6px}.band-wrap{border-radius:var(--radius-md, 10px);transition:outline-color .15s ease,opacity .15s ease;outline:3px solid transparent}.band-current{outline-color:var(--food-yellow, #ffd23f);box-shadow:0 0 14px #ffd23f66}.band-dim{opacity:.4}.dd-tile{transition:transform .1s ease,filter .1s ease}.dd-actionable{cursor:pointer;outline:3px dashed var(--food-yellow, #ffd23f);outline-offset:2px;border-radius:var(--radius-tile, 12px)}.dd-actionable:hover{transform:translateY(-3px);filter:brightness(1.06)}.players-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.75rem;align-items:start}.player-card{background:var(--chrome, #fff);border:1.5px solid var(--chrome-soft, #d5e7f2);border-radius:var(--radius-lg, 16px);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-sm, 0 2px 5px rgba(14, 30, 60, .16))}.player-card.current{border-color:var(--depth-3, #3e97cb);box-shadow:0 0 0 3px #3e97cb4d}.player-head{display:flex;align-items:center;gap:.4rem}.player-name{font-weight:800}.player-score{margin-left:auto;font-weight:800;color:var(--depth-4, #1e5c9e)}.player-stats{display:flex;gap:.8rem;flex-wrap:wrap;font-weight:600;font-size:.85rem}.game-end{max-width:1100px;margin:0 auto;padding:.6rem 1rem 2.5rem;display:flex;flex-direction:column;gap:1rem}.winner-banner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;text-align:center;font-size:1.4rem;background:var(--chrome, #fff);border:1.5px solid var(--chrome-soft, #d5e7f2);border-radius:var(--radius-lg, 16px);padding:1rem 1.2rem;box-shadow:0 0 0 4px var(--food-yellow, #ffd23f),var(--shadow-md, 0 6px 16px rgba(14, 30, 60, .18))}.score-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;align-items:start}.score-card{display:flex;flex-direction:column;gap:.6rem}.score-card.winner{box-shadow:0 0 0 4px var(--food-yellow, #ffd23f),var(--shadow-md, 0 6px 16px rgba(14, 30, 60, .2))}.score-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.score-name{display:flex;align-items:center;gap:.4rem;font-weight:800;font-size:1.05rem}.score-total{font-weight:800;font-size:1.6rem;color:var(--depth-4, #1e5c9e)}.end-actions{display:flex;justify-content:center}@media(max-width:720px){.prompt-row{flex-direction:column;align-items:flex-start}.prompt-actions,.rock-toggle{margin-left:0}.board-ocean{padding:3px}}