/* HiveMinds.io style. Dark is the default; light is opt-in via [data-theme="light"]. */
:root,:root[data-theme="dark"]{color-scheme:dark;--page:#0D0D0D;--surface:#212121;--surface-2:#2A2A2A;--ink:#F2F2F2;--muted:#999999;--line:#333333;--accent:#B04AA9;--accent-hover:#8C3A87;--accent-text:#F26DE9;--glow:#F26DE966;--gradient:linear-gradient(125deg,#8C3A87 0%,#BF54B8 55%,#F26DE9 100%);--board:linear-gradient(160deg,#3A1838 0%,#24101F 100%);--board-edge:#160A14;--hole:#0D0D0D;--hole-hover:#3A3A3A;--focus:#F26DE9;--error:#FF7A8A}
:root[data-theme="light"]{color-scheme:light;--page:#F6F6F6;--surface:#FFFFFF;--surface-2:#F1F1F1;--ink:#212121;--muted:#666666;--line:#E6E6E6;--accent:#DB0029;--accent-hover:#B80023;--accent-text:#DB0029;--glow:#FF366B55;--gradient:linear-gradient(125deg,#FF5E4E 0%,#FF4461 47%,#FF366B 100%);--board:linear-gradient(160deg,#333333 0%,#212121 100%);--board-edge:#111111;--hole:#F6F6F6;--hole-hover:#FFFFFF;--focus:#DB0029;--error:#B80023}
:root{--coral:#FF5E4E;--gold:#E5AE6A;--font:"ofelia-text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-family:var(--font);color:var(--ink);background:var(--page)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background-color:var(--page);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33M0 48l-28 16M56 48l28 16' fill='none' stroke='%23888' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");background-attachment:fixed;transition:background-color .25s,color .25s}
button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
header,main,footer{max-width:1280px;margin:auto}
header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--ink);font-size:26px;font-weight:700;letter-spacing:-.8px;display:flex;align-items:center}
.brand-dot{color:var(--accent-text)}
.brand-mark{width:34px;height:34px;margin-right:12px;flex-shrink:0;background:var(--gradient);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);display:grid;place-items:center;color:#fff;font-size:9px;line-height:7px;letter-spacing:1px;text-align:center}
.header-tools{display:flex;align-items:center;gap:18px}
.edition,.eyebrow,footer,.intro-note{font-size:10px;font-weight:700;letter-spacing:2px}
.edition{color:var(--muted)}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:5em;padding:8px 14px 8px 10px;font-size:11px;font-weight:600;transition:border-color .2s,box-shadow .2s}
.theme-toggle:hover{border-color:var(--accent-text);box-shadow:0 5px 25px var(--glow)}
.theme-toggle .icon{width:18px;height:18px;border-radius:50%;background:var(--gradient);position:relative;overflow:hidden}
:root:not([data-theme="light"]) .theme-toggle .icon::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--surface);top:-3px;right:-3px}
.intro{display:flex;align-items:end;justify-content:space-between;padding:55px 0 37px}
.eyebrow{color:var(--accent-text);margin:0 0 16px}
h1{font-size:64px;line-height:1.05;font-weight:700;letter-spacing:-2.5px;margin:0}
h1 em{font-style:normal;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:15px;line-height:1.8;color:var(--muted);margin:20px 0 0}
.intro-note{display:flex;gap:28px;color:var(--muted);padding-bottom:8px}
.game-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:1.5em;transition:background-color .25s,border-color .25s}
.settings{padding:28px}.settings .eyebrow{font-size:9px;margin-bottom:8px}
h2{font-size:25px;font-weight:700;letter-spacing:-.6px;margin:0 0 26px}
fieldset{padding:0;margin:0 0 24px;border:0;min-width:0}
legend{font-size:12px;font-weight:700;margin-bottom:12px}
.presets{display:flex;gap:7px}
.presets button{background:transparent;border:1px solid var(--line);border-radius:5em;flex:1;height:43px;font-weight:700;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s}
.presets button:hover{border-color:var(--accent-text)}
.presets button:last-child{font-size:10px;flex:1.5}
.presets button.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.custom-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:12px}
.custom-label input{width:64px;padding:6px 10px}
.dimensions{display:flex;align-items:center;gap:12px}
.dimensions label{flex:1;font-size:10px;color:var(--muted)}
input,#game-mode{color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.dimensions input{display:block;width:100%;margin-top:7px;font-size:15px}
.dimensions>span{color:var(--muted);padding-top:18px}
.player-input{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.player-input input{width:100%;font-size:12px}
.disc{display:inline-block;width:23px;height:23px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 -3px 0 #00000022}
.coral{background:var(--coral)}.gold{background:var(--gold)}
.wild-disc{background:linear-gradient(135deg,var(--coral) 50%,var(--gold) 50%)}
.primary{border:0;border-radius:5em;padding:15px 22px;background:var(--accent);color:#fff;width:100%;text-align:left;font-size:13px;font-weight:700;display:flex;justify-content:space-between;transition:background .2s,box-shadow .2s}
.primary:hover{background:var(--accent-hover);box-shadow:0 5px 25px var(--glow)}
.settings-hint{font-size:10px;color:var(--muted);line-height:1.6;text-align:center;margin-bottom:0}
.error{font-size:12px;color:var(--error)}.error:empty{display:none}
.mode-label{display:block;font-size:10px;color:var(--muted);margin-bottom:7px}
#game-mode{font-size:12px;width:100%}
#mode-help{text-align:left}
.play{padding:26px 30px 16px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.play-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:10px}
.turn{display:flex;align-items:center;gap:12px}.turn .disc{width:30px;height:30px}.turn p{margin:0}
#status{font-size:16px;font-weight:700;overflow-wrap:anywhere}
#subtitle{font-size:11px;color:var(--muted);margin-top:5px}
.mode{font-size:9px;font-weight:700;letter-spacing:1.5px;white-space:nowrap;border:1px solid var(--line);border-radius:5em;padding:9px 14px;background:var(--surface-2);color:var(--accent-text)}
.board-scroll{overflow-x:auto;padding:5px 4px 14px}
.board{display:grid;grid-template-columns:repeat(var(--columns),minmax(28px,1fr));gap:clamp(5px,1vw,12px);background:var(--board);padding:clamp(10px,1.5vw,20px);border-radius:1.5em;min-width:calc(var(--columns)*35px + 20px);width:100%;box-shadow:0 7px 0 var(--board-edge),0 15px 30px #0000002e}
.column{border:0;background:transparent;padding:0;display:flex;flex-direction:column;gap:clamp(5px,1vw,12px);border-radius:30px;min-width:0}
.column:focus-visible{outline:none}
.column:is(:hover,:focus-visible):not([aria-disabled="true"]){outline:3px solid var(--focus);outline-offset:3px}
.column:is(:hover,:focus-visible):not([aria-disabled="true"]) .cell:not(.piece){background:var(--hole-hover)}
.column[aria-disabled="true"]{cursor:default}
.cell{width:100%;aspect-ratio:1;border-radius:50%;background:var(--hole);box-shadow:inset 0 3px 5px #00000055;display:block}
.p1{background:var(--coral)}.p2{background:var(--gold)}
.piece{box-shadow:inset 0 -4px 0 #00000022,inset 0 2px 1px #ffffff33}
.winning{outline:3px solid #fff;outline-offset:-6px;filter:brightness(1.12);box-shadow:0 0 18px var(--glow),inset 0 -4px 0 #00000022}
.new-piece{animation:drop .62s both;transform-origin:center bottom}
@keyframes drop{
  0%{transform:translateY(var(--fall));animation-timing-function:cubic-bezier(.45,0,.85,.55)}
  60%{transform:translateY(0) scale(1.08,.92);animation-timing-function:ease-out}
  76%{transform:translateY(-24%) scale(.98,1.02);animation-timing-function:ease-in}
  89%{transform:translateY(0) scale(1.04,.96);animation-timing-function:ease-out}
  95%{transform:translateY(-6%);animation-timing-function:ease-in}
  100%{transform:translateY(0) scale(1)}
}
.play-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:var(--muted)}
.text-button{background:none;border:0;font-size:11px;color:var(--ink);padding:8px;border-radius:5em}
.text-button:hover{color:var(--accent-text)}
.keyboard-hint{text-align:center;font-size:10px;color:var(--muted);margin:16px 0 0}
.rules{display:flex;gap:13px;align-items:center;margin:35px 0 45px}
.rules p{font-size:11px;line-height:1.8;color:var(--muted);flex:1;margin:0}
.rules strong{display:block;font-size:12px;color:var(--ink)}
.rule-number{font-size:27px;font-weight:700;margin-right:5px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
footer{border-top:1px solid var(--line);padding:25px 0 32px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}
footer span:last-child{font-weight:400;letter-spacing:0;font-size:11px}
footer a{color:var(--accent-text);text-decoration:none}
@media(min-width:1000px){.board{max-width:650px;margin:auto}}
@media(max-width:1360px){header,main,footer{margin-left:6%;margin-right:6%}}
@media(max-width:800px){header{height:85px}.intro{padding:35px 0}.intro-note{display:none}h1{font-size:52px}.game-layout{grid-template-columns:1fr}.play{grid-row:1;padding:20px 15px}.settings{padding:24px}.settings form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.settings form>.primary,.settings-hint,.error{grid-column:1/-1}.settings fieldset:last-of-type{grid-column:1/-1}.player-input{display:inline-flex;width:48%}.player-input:last-child{margin-left:2%}.rules{gap:8px}.rules p{font-size:10px}.rule-number{font-size:20px}.edition{display:none}}
@media(max-width:460px){header,main,footer{margin-left:16px;margin-right:16px}.brand{font-size:21px}.brand-mark{width:28px;height:28px;margin-right:9px}.theme-toggle .label{display:none}.theme-toggle{padding:8px}h1{font-size:44px}.lede{font-size:13px}.play-top{align-items:start;flex-wrap:wrap}.mode{font-size:8px;padding:7px 10px}#status{font-size:14px}#subtitle{font-size:10px}.rules{display:grid;grid-template-columns:30px 1fr;row-gap:18px}.rules strong{display:inline}.rules p{font-size:11px}footer{gap:20px;line-height:1.8}.settings form{column-gap:14px}.presets{gap:4px}.presets button{font-size:13px}.keyboard-hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){.new-piece{animation:none}body,.card{transition:none}}
/* Online play */
[hidden]{display:none!important}
.play-modes button,.play-modes button:last-child{font-size:12px;flex:1}
.notice{margin:0 0 20px;padding:14px 20px;border-radius:1.5em;border:1px solid var(--accent-text);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600}
.share-row{display:flex;gap:8px;margin-bottom:12px}
.share-row input{flex:1;font-size:12px;width:100%}
.pill{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:5em;padding:0 16px;font-size:12px;font-weight:700;white-space:nowrap;transition:border-color .2s}
.pill:hover{border-color:var(--accent-text)}
#native-share{margin-bottom:6px}
.join-intro{font-size:13px;line-height:1.6;margin:0 0 16px}
#join-form .primary{margin-top:8px}
.scoreboard{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line)}
.scoreboard li{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.score-name{flex:1;overflow-wrap:anywhere}
.scoreboard strong{font-size:18px;color:var(--accent-text)}
.new-game-link{display:block;margin-top:18px;text-align:center;font-size:12px;font-weight:700;color:var(--accent-text);text-decoration:none}
.new-game-link:hover{text-decoration:underline}
#restart:disabled{opacity:.4;cursor:default}
@media(max-width:800px){#online-panel form{display:block}#online-panel .player-input{display:flex;width:auto;margin-left:0}}
@media(max-width:800px){body:not(.online) .play,body.waiting .play{grid-row:auto}body.online .intro{display:none}body.online main{padding-top:20px}}