:root{--sky:#0b3d5c;--sky-deep:#072a40;--water:#145a83;--water-deep:#0e4767;--ice:#eef7fc;--ice-edge:#b9dcef;--ice-shadow:#8bbcd8;--floe:#b6d7ea6b;--floe-rim:#d6ecf78c;--floe-edge:#6a9bb973;--text:#f2f8fc;--text-dim:#a9c7da;--ink:#12324a;--accent:#f5a524;--bad:#ff8a80;--good:#8ee6b0;--panel:#ffffff14;--panel-edge:#ffffff29;--gap:5px;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(ellipse at top, #1b6a96 0%, var(--sky) 45%, var(--sky-deep) 100%) fixed;background-color:var(--sky);color:var(--text);-webkit-tap-highlight-color:transparent;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--ice-edge)}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}input{font:inherit;border-radius:var(--radius);border:1px solid var(--panel-edge);color:var(--text);background:#0003;min-width:0;padding:10px 12px}.primary,.ghost{border:0;border-radius:999px;padding:10px 20px;font-weight:600}.primary{background:var(--accent);color:#2b1a00}.ghost{background:var(--panel);color:var(--text);border:1px solid var(--panel-edge)}.link{color:var(--ice-edge);background:0 0;border:0;padding:0;text-decoration:underline}.wide{width:100%}.small{font-size:.875rem}.muted{color:var(--text-dim)}.error{color:var(--bad)}.center{text-align:center;padding:48px 16px}.center-text{text-align:center}.app{max-width:560px;margin:0 auto;padding:0 16px 32px}.topbar{justify-content:space-between;align-items:center;padding:14px 0;display:flex}.topbar nav{gap:16px;display:flex}.brand{letter-spacing:.02em;color:var(--text);font-size:1.35rem;font-weight:800;text-decoration:none}.login{text-align:center;max-width:360px;margin:0 auto;padding:32px 0}.login h1{margin:8px 0 0;font-size:2.6rem}.logo{justify-content:center;gap:4px;display:flex}.tagline{color:var(--text-dim);margin-bottom:28px}.or{color:var(--text-dim);margin:14px 0}.email-form,.join-form,.hello{align-items:center;gap:8px;display:flex}.email-form input,.join-form input{flex:1}.notice{background:var(--panel);border-radius:var(--radius);padding:16px}.lobby-actions{flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0 16px;display:flex}.lobby-actions .join-form{flex:1;min-width:200px}.game-list h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:24px 0 8px;font-size:.95rem}.game-list ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.game-row{border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-edge);color:var(--text);justify-content:space-between;padding:14px 16px;text-decoration:none;display:flex}.game-row.hot{border-color:var(--accent)}.mini-score{font-variant-numeric:tabular-nums;color:var(--text-dim)}.badge{background:var(--accent);color:#2b1a00;border-radius:999px;padding:0 8px;font-size:.8rem}.invite-link{word-break:break-all;border-radius:var(--radius);background:#00000040;margin:12px 0;padding:12px;display:block}.code{letter-spacing:.15em;color:var(--accent);font-size:1.4rem}.game{gap:12px;display:grid}.scorebar{grid-template-columns:1fr 1fr;gap:8px;display:grid}.player{border-radius:var(--radius);background:var(--panel);border:2px solid #0000;align-items:center;gap:8px;min-width:0;padding:8px 12px;transition:border-color .2s;display:flex}.player.active{border-color:var(--accent)}.player .name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.player>div:nth-child(2){flex:1;min-width:0}.player .you,.player .sub{color:var(--text-dim);font-size:.8rem;font-weight:400}.player .score{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:800}.lastmove{text-align:center;color:var(--text-dim);min-height:1.4em;font-size:.9rem}.lastmove strong{color:var(--text)}.board{gap:var(--gap);padding:var(--gap);background:repeating-linear-gradient(160deg, transparent 0 9px, #ffffff0a 9px 11px), var(--water-deep);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:16px;display:grid;box-shadow:inset 0 0 30px #00000059}.cell{aspect-ratio:1;border-radius:8px;min-width:0;position:relative}.cell.water:before{content:"";border-radius:inherit;background-color:var(--floe);border:2px solid var(--floe-rim);background-image:radial-gradient(circle at 20% 30%,#ffffffb3 0 1px,#0000 1.5px),radial-gradient(circle at 70% 80%,#ffffff8c 0 1px,#0000 1.5px),repeating-linear-gradient(115deg,#0000 0 26px,#ffffff38 26px 31px,#0000 31px 70px),linear-gradient(160deg,#ffffff40,#78aac81f);background-size:37px 41px,53px 47px,auto,auto;background-attachment:fixed;position:absolute;inset:0}.cell.water:not(.j-b):before{box-shadow:0 3px 0 var(--floe-edge)}.cell.water.j-t:before{border-top-width:0}.cell.water.j-b:before{border-bottom-width:0}.cell.water.j-l:before{border-left-width:0}.cell.water.j-r:before{border-right-width:0}.cell.water[class*=crack-]:after{content:"";z-index:1;opacity:.55;pointer-events:none;background-repeat:no-repeat;background-size:contain;position:absolute;inset:18%}.cell.water.crack-0:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%237fb3d1' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 30 L14 22 L18 25 L28 12'/%3E%3Cpath d='M18 25 L22 34'/%3E%3C/svg%3E")}.cell.water.crack-1:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%237fb3d1' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M30 6 L24 16 L28 20 L20 32'/%3E%3C/svg%3E")}.cell.water.crack-2:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23ffffff' fill-opacity='.8'%3E%3Cpath d='M12 12 l1.5 4 4 1.5 -4 1.5 -1.5 4 -1.5 -4 -4 -1.5 4 -1.5z'/%3E%3Ccircle cx='28' cy='27' r='1.6'/%3E%3C/svg%3E")}.cell.letter{background:linear-gradient(160deg, #fff 0%, var(--ice) 55%, var(--ice-edge) 100%);box-shadow:0 3px 0 var(--ice-shadow);color:var(--ink);border:0;place-items:center;padding:0;transition:transform 80ms,box-shadow 80ms,background .15s;display:grid}.cell.letter:not(:disabled):hover{transform:translateY(-1px)}.cell.letter:disabled{opacity:1}.cell.letter.selected{background:linear-gradient(160deg,#fff2cf,#ffd57a);transform:translateY(2px);box-shadow:0 1px #c8902a}.glyph{font-size:clamp(1rem,5.5vw,1.7rem);font-weight:800}.value{opacity:.7;font-size:clamp(.55rem,2.2vw,.75rem);font-weight:600;position:absolute;bottom:2px;right:5px}.fish{color:#fff;border-radius:999px;padding:0 4px;font-size:clamp(.5rem,2vw,.65rem);font-weight:800;position:absolute;top:2px;left:3px}.bonus-DL .fish{background:#2c8fd6}.bonus-DW .fish{background:#d6452c}.order{background:var(--accent);color:#2b1a00;border-radius:50%;place-items:center;width:20px;height:20px;font-size:.7rem;font-weight:800;display:grid;position:absolute;top:-6px;right:-6px}.cell.penguin{background:color-mix(in srgb, var(--ice) 82%, var(--seat));place-items:center;padding:4%;display:grid}.cell.penguin svg{z-index:1;display:block;position:relative}.cell.huddled{background:0 0}.cell.huddled:before{content:"";border-radius:inherit;background:color-mix(in srgb, var(--seat) 45%, var(--ice));box-shadow:0 0 0 2px color-mix(in srgb, var(--seat) 70%, white);position:absolute;inset:0}:is(.cell.huddled,.cell.water).j-t:before{top:calc(var(--gap) * -.5)}:is(.cell.huddled,.cell.water).j-b:before{bottom:calc(var(--gap) * -.5)}:is(.cell.huddled,.cell.water).j-l:before{left:calc(var(--gap) * -.5)}:is(.cell.huddled,.cell.water).j-r:before{right:calc(var(--gap) * -.5)}:is(.cell.huddled,.cell.water).j-t{border-top-left-radius:0;border-top-right-radius:0}:is(.cell.huddled,.cell.water).j-b{border-bottom-right-radius:0;border-bottom-left-radius:0}:is(.cell.huddled,.cell.water).j-l{border-top-left-radius:0;border-bottom-left-radius:0}:is(.cell.huddled,.cell.water).j-r{border-top-right-radius:0;border-bottom-right-radius:0}.cell.huddled.covered:before{box-shadow:none}.big-penguin{z-index:2;pointer-events:none;border-radius:8px;min-width:0;min-height:0;padding:3px;position:relative}.big-penguin svg{filter:drop-shadow(0 3px 2px #001e3c40);display:block}.cell.steal-preview{outline:3px dashed var(--accent);outline-offset:-3px;animation:.6s ease-in-out infinite wobble}.anim-hop svg{animation:.5s ease-out hop}.anim-stolen svg{animation:.8s ease-in-out waddle}.anim-spawn{animation:.5s ease-out float-in}.anim-merge svg{animation:.6s ease-out merge}@keyframes merge{0%{opacity:0;transform:scale(.35)}60%{opacity:1;transform:scale(1.06,.94)}to{transform:none}}@keyframes hop{0%{opacity:0;transform:translateY(40%)scale(.4)}60%{opacity:1;transform:translateY(-12%)scale(1.05)}to{transform:none}}@keyframes waddle{0%,to{transform:rotate(0)}20%{transform:rotate(-14deg)translate(-6%)}40%{transform:rotate(14deg)translate(6%)}60%{transform:rotate(-10deg)}80%{transform:rotate(8deg)}}@keyframes float-in{0%{opacity:0;transform:translateY(-30%)scale(.6)}to{opacity:1;transform:none}}@keyframes wobble{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@media (prefers-reduced-motion:reduce){.anim-hop svg,.anim-stolen svg,.anim-spawn,.anim-merge svg,.cell.steal-preview{animation:none}}.tray{text-align:center;gap:6px;display:grid}.status{color:var(--text-dim);font-size:.9rem}.word{letter-spacing:.12em;min-height:2.2rem;font-size:1.6rem;font-weight:800}.word.empty{letter-spacing:0;color:var(--text-dim);font-size:1rem;font-weight:400;line-height:2.2rem}.word.bad{color:var(--bad)}.preview{justify-content:center;gap:12px;min-height:1.4em;font-size:.9rem;display:flex}.steal-note{color:var(--accent)}.bad-note{color:var(--bad)}.actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.gameover{text-align:center;background:var(--panel);border-radius:var(--radius);padding:16px}.gameover h2{margin:0 0 8px}.modal-backdrop{z-index:10;background:#02121eb3;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--sky);border:1px solid var(--panel-edge);border-radius:16px;max-width:460px;max-height:90vh;padding:20px 22px;overflow:auto}.modal h2{margin-top:0}.howto{gap:10px;padding-left:20px;display:grid}.howto-merge{flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;display:flex}.howto-merge .arrow{color:var(--text-dim);font-size:1.4rem}.howto-huddle,.howto-big{background:color-mix(in srgb, #e4572e 40%, var(--ice));border-radius:8px;padding:2px}.howto-huddle{grid-template-columns:repeat(2,34px);display:grid}.howto-big{width:72px;height:72px}.howto-big.wide{width:108px}.howto-big svg{display:block}.nickname-form{gap:6px;display:grid}.nickname-form .row{align-items:center;gap:8px;display:flex}.nickname-form input{flex:1}.plus{text-align:center;max-width:420px;margin:0 auto;padding:16px 0 32px}.plus h1{margin:8px 0 4px}.features{text-align:left;gap:8px;width:max-content;max-width:100%;margin:16px auto 20px;padding:0;list-style:none;display:grid}.features li:before{content:"✓ ";color:var(--good);font-weight:800}.notice.good{border:1px solid var(--good)}.colors h2{margin:24px 0 4px;font-size:1rem}.swatches{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:flex}.swatch{background:var(--panel);border:2px solid #0000;border-radius:12px;padding:4px}.swatch.on{border-color:var(--accent)}.plus-card{border-radius:var(--radius);color:var(--text);background:linear-gradient(120deg,#f5a5242e,#ffffff0f);border:1px solid #f5a52480;gap:2px;margin:8px 0 4px;padding:12px 16px;text-decoration:none;display:grid}.plus-card span{color:var(--text-dim);font-size:.9rem}select{font:inherit;border-radius:var(--radius);border:1px solid var(--panel-edge);background:var(--sky-deep);color:var(--text);padding:9px 10px}.dev-tools{margin-top:24px}.ad-slot{min-height:60px;margin:16px 0 0;overflow:hidden}.ad-slot.placeholder{border:1px dashed var(--panel-edge);border-radius:var(--radius);color:var(--text-dim);place-items:center;font-size:.8rem;display:grid}.offline-banner{border-radius:var(--radius);text-align:center;background:#ff8a8026;border:1px solid #ff8a8080;margin:0 0 12px;padding:8px 12px;font-size:.9rem}
