@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-tight-latin-800-normal.woff2) format('woff2')}
:root{
  color-scheme:light;
  --bg:#E7EAE4; --panel:#F6F7F3; --ink:#1C2723; --muted:#5E6B63; --line:#CDD3C8; --field:#EDF0E9;
  --sq-l:#E4DDC8; --sq-d:#7E9180;
  --rule:#6A3FD1; --rule-soft:#EEE9FC; --warn:#B4432E; --good:#2F7D55;
  --serif:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark; --bg:#1D2320; --panel:#262D29; --ink:#E9EDE6; --muted:#A3AEA6; --line:#3A443E; --field:#1F2622; --rule-soft:#2E2745; }
}
:root[data-theme="dark"]{ color-scheme:dark; --bg:#1D2320; --panel:#262D29; --ink:#E9EDE6; --muted:#A3AEA6; --line:#3A443E; --field:#1F2622; --rule-soft:#2E2745; }
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.02em}
h1{font-size:2.1rem} h2{font-size:1.4rem} h3{font-size:1rem;margin:18px 0 8px}
p{margin:.35em 0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rule);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:.85rem}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;max-width:1200px;margin:0 auto;padding:20px}
@media (max-width:920px){.app{grid-template-columns:1fr;padding:10px;gap:12px}}
.boardcol{min-width:0;display:flex;flex-direction:column;align-items:center}
.boardframe{width:min(100%, calc(100vh - 150px), 720px);min-width:280px}
@media (max-width:920px){.boardframe{width:100%}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;align-self:start;max-height:calc(100vh - 40px);overflow:auto}
@media (max-width:920px){.panel{max-height:none}}

/* ---------- Player bars ---------- */
.pbar{display:flex;align-items:center;gap:10px;padding:8px 0}
.avatar{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;background:var(--ink);flex:none}
.avatar svg{width:30px;height:30px}
.pinfo{flex:1;min-width:0}
.pname{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname .thinking{font-weight:500;margin-left:6px}
.psub{min-height:22px}
.psub{font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.elowrap{display:inline-flex;align-items:baseline;gap:4px}
.elochip{font:800 .82rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--bg);background:var(--ink);
  padding:3px 7px 3px;border-radius:5px;display:inline-block;min-width:3.4em;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.25);transition:background .25s,color .25s}
.elochip.up{background:#2F9E5B;color:#fff}
.elochip.down{background:#D0453A;color:#fff}
.elochip.punch-up{animation:punchUp .5s cubic-bezier(.3,1.6,.5,1)}
.elochip.punch-down{animation:punchDown .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes punchUp{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(-5deg)}55%{transform:scale(.94) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes punchDown{0%{transform:scale(1)}25%{transform:scale(.8) rotate(5deg)}55%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.elolbl{font-size:.72rem;color:var(--muted);font-weight:600}
.elopop{position:fixed;z-index:60;pointer-events:none;font:900 1.35rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.02em;
  --tx:0px;transform:translate(var(--tx),-50%);animation:eloPop 1.2s cubic-bezier(.2,.9,.3,1) forwards;
  text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.6),1px 0 0 rgba(0,0,0,.35),-1px 0 0 rgba(0,0,0,.35)}
.elopop.up{color:#3DDC84} .elopop.down{color:#FF5A4E}
.elopop:not(.word){transform-origin:0 50%}
.elopop.word{font-family:var(--sans);font-weight:900;font-size:1.25rem;letter-spacing:.01em;--tx:-50%}
.elopop.word.rule{color:color-mix(in srgb,var(--rule) 65%,#fff)}
.elopop.word.swap{font-size:1.4rem;color:#E9C46A;animation-name:swapPop;animation-duration:1.1s;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 12px rgba(0,0,0,.35)}
@keyframes swapPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}35%{transform:translate(-50%,-55%) scale(1)}75%{opacity:1;transform:translate(-50%,-75%)}100%{opacity:0;transform:translate(-50%,-95%)}}
#board.spin{animation:boardSpin .35s ease-out}
@keyframes boardSpin{0%{opacity:.35;transform:scale(.975)}100%{opacity:1;transform:none}}
@keyframes eloPop{0%{opacity:0;transform:translate(var(--tx),-50%) scale(.3) rotate(0)}
  18%{opacity:1;transform:translate(var(--tx),-70%) scale(1.35) rotate(var(--rot))}
  35%{transform:translate(var(--tx),-80%) scale(1) rotate(var(--rot))}
  75%{opacity:1;transform:translate(var(--tx),-150%) scale(1) rotate(var(--rot))}
  100%{opacity:0;transform:translate(var(--tx),-210%) scale(.9) rotate(var(--rot))}}
.thinking{color:var(--rule)}
.clock{font:700 1.35rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;padding:8px 12px;border-radius:6px;background:var(--panel);border:1px solid var(--line);min-width:96px;text-align:right}
.clock.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.clock.low.active{background:var(--warn);border-color:var(--warn);color:#fff}

/* ---------- Board ---------- */
.boardrow{display:flex;gap:8px;width:100%}
.evalbar{width:14px;flex:none;border-radius:4px;overflow:hidden;background:#2A2E33;position:relative}
.evalbar .fill{position:absolute;left:0;right:0;bottom:0;background:#F1EEE6;transition:height .5s ease}
.evalbar.flip .fill{top:0;bottom:auto}
.boardwrap{position:relative;flex:1;border-radius:4px;overflow:hidden}
.boardwrap.fired{animation:fired 1.2s ease}
@keyframes fired{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 5px var(--rule)}}
#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.sq{position:relative;aspect-ratio:1}
.sq.l{background:var(--sq-l)} .sq.d{background:var(--sq-d)}
.sq .hl{position:absolute;inset:0;pointer-events:none}
.sq.last .hl{background:rgba(222,196,86,.5)}
.sq.sel .hl{background:rgba(222,196,86,.8)}
.sq.hover .hl{box-shadow:inset 0 0 0 4px rgba(255,255,255,.75)}
.sq.pre .hl{background:rgba(214,70,55,.42)}
.sq .mark{position:absolute;inset:0;pointer-events:none;z-index:1}
.boardwrap.viewing{box-shadow:0 0 0 3px var(--muted)}
.pausebadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;background:rgba(20,26,23,.82);color:#fff;font-weight:700;padding:10px 18px;border-radius:999px;pointer-events:none;letter-spacing:.02em}
body.dragging,body.dragging *{cursor:grabbing!important}
.moves .mv{cursor:pointer;border-radius:4px}
.moves .mv:hover{background:var(--line)}
.moves .mv.cur{background:var(--rule);color:#fff}
.sq.check .hl{background:radial-gradient(circle,rgba(220,50,40,.95) 0%,rgba(220,50,40,.55) 35%,rgba(220,50,40,0) 72%)}
.sq.fog::before{content:"";position:absolute;inset:0;background:rgba(20,26,23,.78);z-index:3;pointer-events:none}
.sq.zap::after{content:"";position:absolute;inset:0;background:var(--rule);opacity:0;animation:zap 1.5s ease;pointer-events:none;z-index:4}
@keyframes zap{15%{opacity:.75}100%{opacity:0}}
.sq .dot{position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;background:rgba(20,30,25,.22);pointer-events:none;z-index:5}
.sq .ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--sqs,60px) * .09) rgba(20,30,25,.22);pointer-events:none;z-index:5}
.sq .pc{position:absolute;inset:0;z-index:2;cursor:grab;will-change:transform}
.sq .pc svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.sq .pc.ghosted{opacity:.3}
.coord{position:absolute;font-size:calc(var(--sqs,60px) * .19);font-weight:700;z-index:1;pointer-events:none}
.coord.f{right:4%;bottom:1%} .coord.r{left:4%;top:1%}
.sq.l .coord{color:var(--sq-d)} .sq.d .coord{color:var(--sq-l)}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) scale(1.08)}
.ghost svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
#arrows{position:absolute;inset:0;pointer-events:none;z-index:6}
.overlay{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:rgba(15,20,18,.45)}
.promo{display:flex;gap:6px;background:var(--panel);padding:8px;border-radius:10px}
.promo button{width:min(18vw,80px);aspect-ratio:1;border:0;background:transparent;border-radius:6px;padding:4px}
.promo button:hover{background:var(--rule-soft)}
.result{background:var(--panel);border-radius:12px;padding:22px 26px;text-align:center;max-width:80%;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.result h2{margin-bottom:6px}
.result .btns{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ---------- Announcer (rule events live here, beside the board) ---------- */
.announce{margin:14px 0 4px;border-radius:10px;background:var(--rule);color:#fff;padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.announce .icon{width:34px;height:34px;flex:none;border-radius:8px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.announce .icon svg{width:28px;height:28px}
.announce b{display:block;font-size:1rem}
.announce span{font-size:.86rem;opacity:.9;display:block}
.announce.idle{background:var(--field);color:var(--muted)}
.announce.idle .icon{background:var(--line)}
.announce.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.96);opacity:.4}60%{transform:scale(1.02)}100%{transform:none;opacity:1}}

/* ---------- Panel controls ---------- */
.lede{font-family:var(--serif);font-size:1.05rem;margin:6px 0 14px;color:var(--muted)}
textarea,input[type=text],input[type=number],input[type=search],select{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink);font:inherit}
textarea{min-height:96px;resize:vertical}
textarea:focus,input:focus,select:focus{border-color:var(--ink);outline:none}
.primary{background:var(--ink);color:var(--bg);border:0;border-radius:8px;padding:11px 16px;font-weight:650}
.primary:disabled{opacity:.45;cursor:default}
.ghostbtn{background:transparent;border:1.5px solid var(--line);border-radius:8px;padding:9px 14px}
.ghostbtn:hover{border-color:var(--ink)}
.ghostbtn:disabled{opacity:.45;cursor:default}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font-size:.85rem}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.full{width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.field label,.flabel{display:block;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.seg{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;border:0;background:transparent;padding:8px 6px;font-size:.9rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin:18px 0 10px}
.tabs button{border:0;background:none;padding:8px 10px;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:650}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.botcard{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--field)}
.botcard .t{flex:1;min-width:0}
.botcard .t b{display:block;font-weight:650}
.botcard .t span{font-size:.82rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.botcard .a{display:flex;gap:6px;flex:none}
.botcard .a button{padding:6px 10px;font-size:.85rem}
.rulelist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.rulelist li{padding:10px 12px;border-left:4px solid var(--rule);background:var(--field);border-radius:0 8px 8px 0;font-size:.92rem;display:flex;gap:8px;align-items:flex-start}
.rulelist li.setting{border-left-color:var(--ink)}
.rulelist li .txt{flex:1}
.rulelist li .rm{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;padding:0 2px}
.rulelist li .rm:hover{color:var(--warn)}
.rulelist.cant li{border-left-color:var(--warn)}
.builder{border:1.5px solid var(--rule);border-radius:10px;padding:12px;margin-top:10px;background:var(--rule-soft)}
.builder h4{margin:0 0 6px;font-size:.9rem}
.builder .sub{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.builder .effrow{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:8px;position:relative}
.builder .effrow .rm{position:absolute;right:6px;top:4px;border:0;background:none;color:var(--muted);font-size:1.1rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.checks{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.88rem}
.checks label{display:flex;gap:4px;align-items:center;color:var(--ink);margin:0}
.checks input{accent-color:var(--rule)}
.q{background:var(--rule-soft);border-radius:8px;padding:12px;margin-bottom:8px}
.q p{margin:0 0 8px;font-weight:600}
.q .opts{display:flex;flex-wrap:wrap;gap:6px}
.q .opts button{border:1.5px solid var(--rule);background:var(--panel);border-radius:6px;padding:5px 10px;font-size:.88rem}
.q .opts button[aria-pressed="true"]{background:var(--rule);color:#fff}
.elorow{display:flex;gap:10px;align-items:center}
.armygrid{display:flex;flex-direction:column;gap:8px}
.armyrow{display:grid;grid-template-columns:44px repeat(5,1fr);gap:6px;align-items:end}
.armyrow b{font-size:.85rem;padding-bottom:10px}
.armyrow label{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);margin:0}
.armyrow input{padding:7px 6px;text-align:center}
.elorow input[type=range]{flex:1;accent-color:var(--rule)}
.elorow output{font-variant-numeric:tabular-nums;font-weight:700;min-width:84px;text-align:right}
.note{font-size:.82rem;color:var(--muted)}
.error{color:var(--warn);font-size:.88rem}
.okmsg{color:var(--good);font-size:.88rem}
.log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.log li{border-left:4px solid var(--rule);padding:8px 10px;background:var(--field);border-radius:0 8px 8px 0;font-size:.86rem}
.log li b{display:block;font-weight:650}
.log li.empty{border-left-color:var(--line);color:var(--muted)}
.moves{display:grid;grid-template-columns:36px 1fr 1fr;font-variant-numeric:tabular-nums;font-size:.9rem;max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--field)}
.moves div{padding:3px 8px}
.moves .n{color:var(--muted);background:var(--panel)}
.iconbtns{display:flex;gap:6px;flex-wrap:wrap}
.iconbtns button{flex:1;min-width:80px}
details.box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:12px}
details.box>summary{cursor:pointer;font-weight:650}
details pre{white-space:pre-wrap;word-break:break-word;background:var(--field);padding:10px;border-radius:8px;max-height:240px;overflow:auto;font-size:.78rem}
.switch{display:flex;align-items:center;gap:8px;font-size:.88rem}
.switch input{accent-color:var(--rule);width:18px;height:18px}

/* ---------- Pre-game screens take the whole page ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.center{text-align:center}
body.mode-setup .boardcol, body.mode-edit .boardcol{display:none}
body.mode-setup .app, body.mode-edit .app{grid-template-columns:1fr;max-width:760px}
body.mode-setup .panel, body.mode-edit .panel{background:none;border:0;padding:0;max-height:none;overflow:visible;border-radius:0}
body.mode-setup .app{padding-top:max(6vh,24px)}
.hero{text-align:center;margin-bottom:24px}
.brand{font-family:var(--serif);font-size:1rem;color:var(--muted);margin:0 0 20px}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.3rem);letter-spacing:-.045em;font-weight:800}
.hero .lede{margin:10px auto 0;max-width:none}
.promptbox{border:1.5px solid var(--line);border-radius:18px;background:var(--panel);padding:14px 14px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06);transition:border-color .15s}
.promptbox:focus-within{border-color:var(--ink)}
.promptbox textarea{border:0;background:transparent;padding:4px 6px 10px;min-height:92px;font-size:1.06rem;resize:none}
.promptbox textarea:focus{border:0;outline:none}
.promptbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding-left:12px;font-size:.84rem;color:var(--muted);background:var(--bg);margin:0}
.pill select{border:0;background:transparent;padding:7px 10px 7px 6px;width:auto;font-size:.9rem;color:var(--ink);font-weight:600}
.pill select:focus{border:0}
.promptbar .go{margin-left:auto;border-radius:999px;padding:9px 20px}
.altrow{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px 0 6px}
.altrow .ghostbtn{border-radius:999px;padding:9px 18px}
.browse{border-top:1px solid var(--line);margin-top:26px;padding-top:16px}
.browsehead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.browsetitle{font-family:var(--serif);font-size:1.05rem}
.browse .list{margin-top:12px}
.tabs2{display:flex;gap:4px}
.tabs2 button{border:1px solid transparent;background:none;border-radius:999px;padding:6px 12px;color:var(--muted);font-size:.9rem}
.tabs2 button:hover{color:var(--ink)}
.tabs2 button[aria-selected="true"]{border-color:var(--line);background:var(--panel);color:var(--ink);font-weight:600}

/* ---------- Editor ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-right{display:flex;gap:8px;align-items:center}
.navbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 10px 8px 2px;font-weight:600}
.sm{padding:7px 14px;font-size:.9rem}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;min-width:210px;z-index:30}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:6px}
.menu button:hover{background:var(--field)}
.edithead{margin:22px 0 4px}
.edithead h2{font-size:1.75rem}
.edithead .note{margin-top:6px}
.card{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-top:14px}
.cardhead{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;cursor:pointer}
.cardhead .avatar{width:42px;height:42px;border-radius:10px}
.cardhead .avatar svg{width:34px;height:34px}
.ctitle{flex:1;min-width:0}
.nameinput{font:600 1.12rem var(--serif);border:1px solid transparent;background:transparent;padding:2px 6px;margin-left:-7px;border-radius:6px;width:100%;color:var(--ink)}
.nameinput:hover{border-color:var(--line)}
.nameinput:focus{border-color:var(--ink);background:var(--field)}
.ctitle h3{font-size:1.12rem;margin:2px 0 1px}
.cmeta{font-size:.84rem;color:var(--muted)}
.chev{border:0;background:none;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none}
.chev:hover{background:var(--field);color:var(--ink)}
.chev svg{transition:transform .2s}
.chev[aria-expanded="false"] svg{transform:rotate(-90deg)}
.cardbody{padding:14px 16px 16px;border-top:1px solid var(--line)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fields .wide{grid-column:1/-1}
.subhead{font-size:.82rem;color:var(--muted);font-weight:600;margin:18px 0 6px}
.cardfoot{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.linkbtn.danger{color:var(--warn)}
.vs{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--muted);font-family:var(--serif);font-style:italic}
.vs::before,.vs::after{content:"";flex:1;height:1px;background:var(--line)}
.addbot{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;border:1.5px dashed var(--line);border-radius:12px;background:none;padding:13px;margin-top:10px;color:var(--ink);font-weight:600}
.addbot:hover{border-color:var(--ink);background:var(--panel)}
.startbar{position:sticky;bottom:0;z-index:15;padding:18px 0 20px;background:linear-gradient(to bottom, transparent, var(--bg) 40%);margin-top:10px;display:flex;justify-content:flex-end}
.startbar .primary{min-width:220px;padding:13px 24px;border-radius:999px;font-size:1rem}
@media (max-width:600px){.startbar .primary{width:100%}}
.callout{border-radius:12px;padding:12px 14px;margin-top:14px;border:1px solid var(--line);background:var(--panel)}
.callout.warn{background:rgba(180,67,46,.08);border-color:rgba(180,67,46,.35)}
.callout ul{margin:6px 0 0;padding-left:18px}
.callout .q{margin-top:10px}

/* ---------- Badges, add-a-rule box, folded settings ---------- */
.badges{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.badge{display:flex;align-items:stretch;background:var(--field);border:1px solid var(--line);border-left:4px solid var(--rule);border-radius:8px;overflow:hidden}
.badge.trait{border-left-color:var(--ink)}
.badge .btxt{flex:1;text-align:left;border:0;background:none;padding:10px 6px 10px 12px;font-size:.93rem;line-height:1.4;color:var(--ink)}
.badge .btxt:hover{background:rgba(127,127,127,.08)}
.badge .rm{border:0;background:none;color:var(--muted);font-size:1.15rem;padding:0 12px;line-height:1}
.badge .rm:hover{color:var(--warn);background:rgba(180,67,46,.08)}
.emptyrules{margin:2px 0 0}
.addtrigger{margin-top:10px;display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--line);border-radius:999px;background:none;padding:7px 14px;font-size:.9rem;color:var(--ink)}
.addtrigger:hover{border-color:var(--ink)}
.addbox{margin-top:10px;border:1.5px solid var(--ink);border-radius:12px;padding:10px;background:var(--bg)}
.addbox input{border-color:transparent;background:transparent}
.addbox input:focus{border-color:transparent}
.addalt{font-size:.85rem;color:var(--muted);margin:6px 4px 0}
details.settings{margin-top:14px;border-top:1px dashed var(--line);padding-top:8px}
details.settings>summary{cursor:pointer;color:var(--muted);font-size:.9rem;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
details.settings>summary::-webkit-details-marker{display:none}
details.settings>summary:hover{color:var(--ink)}
details.settings>summary svg{transition:transform .2s;transform:rotate(-90deg)}
details.settings[open]>summary svg{transform:none}
.settingsbody{padding-top:10px}
details.bconds>summary{cursor:pointer;font-size:.9rem;font-weight:600}
.createbtn{display:flex;gap:14px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--ink);border-radius:14px;background:var(--bg);padding:16px 18px;margin-top:14px}
.createbtn:hover{background:var(--field)}
.createbtn .plus{width:42px;height:42px;flex:none;border-radius:10px;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.createbtn b{display:block;font-size:1.02rem}
.createbtn small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.orlabel{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;margin:18px 0 4px}
.orlabel::before,.orlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.dialog.big{min-height:min(460px,80vh)}
details.more{margin-top:10px}
details.more>summary{cursor:pointer;font-size:.85rem;color:var(--muted);font-weight:600}
details.more>summary:hover{color:var(--ink)}
details.more .fgrid{margin-top:8px}
details.more details.more{margin-left:4px;padding-left:10px;border-left:2px solid var(--line)}
#pickCreateView .promptbox textarea{min-height:190px}
#pickCreateView .promptbar .ghostbtn{border-radius:999px}

/* ---------- Editor unfolding under the prompt ---------- */
body.editing .browse, body.editing #setupHint, body.editing #engineNote{display:none}
body.editing #p-edit{margin-top:26px}
#p-edit.reveal .topbar, #p-edit.reveal .edithead, #p-edit.reveal .callout, #p-edit.reveal #sideTop, #p-edit.reveal .vs,
#p-edit.reveal #sideBottom, #p-edit.reveal #gameCard, #p-edit.reveal details.box, #p-edit.reveal .startbar{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
#p-edit.reveal .edithead{animation-delay:.04s} #p-edit.reveal .callout{animation-delay:.08s} #p-edit.reveal #sideTop{animation-delay:.12s}
#p-edit.reveal .vs{animation-delay:.18s} #p-edit.reveal #sideBottom{animation-delay:.22s} #p-edit.reveal #gameCard{animation-delay:.3s}
#p-edit.reveal details.box{animation-delay:.36s} #p-edit.reveal .startbar{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Gear menu by the board ---------- */
.topline{display:flex;align-items:center;gap:8px}
.topline .pbar{flex:1;min-width:0}
.gearbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;flex:none}
.gearbtn:hover,.gearbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.gearmenu{min-width:260px;padding:12px;display:flex;flex-direction:column;gap:10px}
.gearmenu .switch{margin:0}
.gmrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gmrow select{width:auto;padding:5px 8px;font-size:.88rem}
.gmsep{height:1px;background:var(--line);margin:2px 0}
.gearmenu .note{margin:0;line-height:1.45}

/* ---------- Bot details popover ---------- */
.pbar{position:relative}
.pbar.clickable .pinfo,.pbar.clickable .avatar{cursor:pointer}
.pbar.clickable::before{content:"";position:absolute;left:-8px;top:22%;bottom:22%;width:2px;border-radius:2px;background:#fff;opacity:0;transition:opacity .15s}
.pbar.clickable:has(.pinfo:hover,.avatar:hover)::before{opacity:.9}
.pbar .pinfo{flex:0 1 auto}
.pbar .clock{margin-left:auto}
.botpop{position:fixed;z-index:65;width:min(360px,calc(100vw - 16px));max-height:62vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.bphead{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.bphead .avatar{width:40px;height:40px;border-radius:10px}
.bphead b{font-family:var(--serif);font-size:1.08rem}
.badges.ro .btxt{cursor:default;padding-right:12px}
.badges.ro .btxt:hover{background:none}

/* ---------- Bot picker ---------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(10,14,12,.5);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px}
.dialog{background:var(--panel);border-radius:16px;width:min(660px,100%);max-height:86vh;display:flex;flex-direction:column;padding:18px 18px 16px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dhead h3{font-size:1.3rem;margin:0}
.iconx{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--muted);width:36px;height:36px;border-radius:8px}
.iconx:hover{background:var(--field);color:var(--ink)}
.pickbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px;flex-wrap:wrap}
.pickbar input{width:auto;flex:1;min-width:160px;padding:7px 12px;border-radius:999px}
#pickList{overflow:auto;margin-top:12px;padding-right:2px}
/* ---------- Native controls follow the theme ---------- */
select option, select optgroup{background-color:var(--panel);color:var(--ink)}
input[type=password]{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink);font:inherit}
input::placeholder, textarea::placeholder{color:var(--muted);opacity:.85}

/* ---------- Piece avatars take their side's color ---------- */
.avatar{background:#2E3238}
.avatar.av-w{background:#2E3238}
.avatar.av-b{background:#ECE8DF}

/* ---------- Buttons that feel good ---------- */
.primary,.ghostbtn,.addbot,.addtrigger,.createbtn,.gearbtn,.botcard,.chev,.tabs2 button,.seg button,.pill,.iconx,.badge,.navbtn{transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,background-color .2s,border-color .2s,color .2s,opacity .2s}
.primary{box-shadow:0 1px 2px rgba(0,0,0,.12)}
.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14)}
.primary:active:not(:disabled){transform:translateY(0) scale(.97);box-shadow:0 1px 2px rgba(0,0,0,.2);transition-duration:.06s}
.ghostbtn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.14);background:var(--panel);border-color:var(--ink)}
.ghostbtn:active:not(:disabled),.addtrigger:active,.addbot:active,.createbtn:active,.gearbtn:active,.chev:active,.pill:active,.iconx:active,.seg button:active,.tabs2 button:active{transform:scale(.96);transition-duration:.06s}
.botcard{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .2s}
.botcard:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.12);border-color:var(--ink)}
.card{transition:box-shadow .25s,border-color .25s}
.card:hover{box-shadow:0 12px 32px rgba(0,0,0,.10)}
.badge:hover{box-shadow:0 3px 12px rgba(0,0,0,.10)}
.createbtn:hover{box-shadow:0 12px 28px rgba(0,0,0,.16);transform:translateY(-1px)}
.addbot:hover,.addtrigger:hover{transform:translateY(-1px)}
.pill:hover{border-color:var(--ink)}
.gearbtn:hover{transform:rotate(30deg)}
.navbtn:hover{transform:translateX(-2px)}
.promptbox:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--rule) 16%,transparent),0 14px 40px rgba(0,0,0,.10)}
.go{position:relative;overflow:hidden}
.go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s ease}
.go:hover::after{transform:translateX(130%)}
button.is-stop{min-width:46px;padding-left:15px!important;padding-right:15px!important;display:inline-flex;align-items:center;justify-content:center}
button.is-stop svg{display:block;animation:stopPulse 1.4s ease-in-out infinite}
@keyframes stopPulse{50%{opacity:.55;transform:scale(.88)}}

/* ---------- Piece loaders: a little looping move for each piece ---------- */
.genhost{display:flex;justify-content:center}
.hopper{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 6px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.hopper.in{opacity:1;transform:none}
.hopper.out{opacity:0;transform:translateY(-6px)}
.hop{--a:1;position:relative;width:100px;height:86px;perspective:240px}
.hop-piece{position:absolute;left:22px;bottom:0;width:56px;height:56px;transform-origin:50% 88%;animation:hp-p .9s cubic-bezier(.3,0,.3,1) infinite}
.hop-piece svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.hop-shadow{position:absolute;left:35px;width:30px;bottom:4px;height:7px;border-radius:50%;background:rgba(0,0,0,.32);animation:hs-p .9s cubic-bezier(.3,0,.3,1) infinite}
.hop-text{font-size:.92rem;color:var(--muted)}
.hop-text.swap{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hopper.compact{flex-direction:row;padding:10px 0 2px;gap:10px;justify-content:flex-start}
.hopper.compact .hop{--a:.5;width:54px;height:46px}
.hopper.compact .hop-piece{left:12px;width:30px;height:30px}
.hopper.compact .hop-shadow{left:19px;width:16px;bottom:2px;height:4px}
/* pawn: hops toward you, a little to the right */
@keyframes hp-p{0%{transform:translate(0,0) scale(1.08,.9)}14%{transform:translate(0,0) scale(.95,1.07)}50%{transform:translate(calc(9px*var(--a)),calc(-26px*var(--a))) scale(1.2) rotate(5deg)}86%{transform:translate(calc(3px*var(--a)),0) scale(1.03,1.02)}100%{transform:translate(0,0) scale(1.08,.9)}}
@keyframes hs-p{0%,100%{transform:none;opacity:.55}50%{transform:translate(calc(10px*var(--a)),calc(2px*var(--a))) scaleX(.8);opacity:.22}86%{transform:translate(calc(3px*var(--a)),0);opacity:.5}}
/* knight: an L-shaped jump, then back */
.hop.lp-n .hop-piece{animation-name:hp-n;animation-duration:1.6s}.hop.lp-n .hop-shadow{animation-name:hs-n;animation-duration:1.6s}
@keyframes hp-n{0%{transform:translate(calc(-10px*var(--a)),0) scale(1.06,.92)}10%{transform:translate(calc(-10px*var(--a)),0) scale(.96,1.05)}28%{transform:translate(calc(-10px*var(--a)),calc(-28px*var(--a))) rotate(-10deg)}42%{transform:translate(calc(12px*var(--a)),calc(-28px*var(--a))) rotate(10deg)}55%{transform:translate(calc(12px*var(--a)),0) scale(1.06,.92)}63%{transform:translate(calc(12px*var(--a)),0) scale(.96,1.05)}82%{transform:translate(0,calc(-20px*var(--a))) rotate(-6deg)}100%{transform:translate(calc(-10px*var(--a)),0) scale(1.06,.92)}}
@keyframes hs-n{0%,10%{transform:translateX(calc(-10px*var(--a)));opacity:.55}28%{transform:translateX(calc(-10px*var(--a))) scaleX(.6);opacity:.2}42%{transform:translateX(calc(12px*var(--a))) scaleX(.6);opacity:.2}55%,63%{transform:translateX(calc(12px*var(--a)));opacity:.55}82%{transform:scaleX(.7);opacity:.25}100%{transform:translateX(calc(-10px*var(--a)));opacity:.55}}
/* bishop: slides along a diagonal, back and toward you */
.hop.lp-b .hop-piece{animation:hp-b 2.6s ease-in-out infinite}.hop.lp-b .hop-shadow{animation:hs-b 2.6s ease-in-out infinite}
/* an X: away-left, back to center, toward-right, center, away-right, center, toward-left, center */
@keyframes hp-b{0%,25%,50%,75%,100%{transform:none}
  12.5%{transform:translate(calc(-14px*var(--a)),calc(-9px*var(--a))) scale(.82) rotate(-7deg)}
  37.5%{transform:translate(calc(14px*var(--a)),calc(3px*var(--a))) scale(1.16) rotate(7deg)}
  62.5%{transform:translate(calc(14px*var(--a)),calc(-9px*var(--a))) scale(.82) rotate(7deg)}
  87.5%{transform:translate(calc(-14px*var(--a)),calc(3px*var(--a))) scale(1.16) rotate(-7deg)}}
@keyframes hs-b{0%,25%,50%,75%,100%{transform:none;opacity:.5}
  12.5%{transform:translate(calc(-14px*var(--a)),calc(-9px*var(--a))) scale(.82);opacity:.35}
  37.5%{transform:translate(calc(14px*var(--a)),calc(3px*var(--a))) scale(1.16);opacity:.6}
  62.5%{transform:translate(calc(14px*var(--a)),calc(-9px*var(--a))) scale(.82);opacity:.35}
  87.5%{transform:translate(calc(-14px*var(--a)),calc(3px*var(--a))) scale(1.16);opacity:.6}}
/* rook: rolls straight across and stomps at each end */
.hop.lp-r .hop-piece{animation:hp-r 1.3s cubic-bezier(.6,0,.4,1) infinite}.hop.lp-r .hop-shadow{animation:hs-r 1.3s cubic-bezier(.6,0,.4,1) infinite}
@keyframes hp-r{0%{transform:translateX(calc(-16px*var(--a))) scale(1.07,.92)}8%{transform:translateX(calc(-16px*var(--a))) scale(.97,1.04)}42%{transform:translateX(calc(16px*var(--a)))}50%{transform:translateX(calc(16px*var(--a))) scale(1.07,.92)}58%{transform:translateX(calc(16px*var(--a))) scale(.97,1.04)}92%{transform:translateX(calc(-16px*var(--a)))}100%{transform:translateX(calc(-16px*var(--a))) scale(1.07,.92)}}
@keyframes hs-r{0%,8%,100%{transform:translateX(calc(-16px*var(--a))) scaleX(1.1)}42%,58%{transform:translateX(calc(16px*var(--a))) scaleX(1.1)}}
/* queen: rises and twirls */
.hop.lp-q .hop-piece{animation:hp-q 1.7s cubic-bezier(.45,0,.4,1) infinite}.hop.lp-q .hop-shadow{animation:hs-q 1.7s cubic-bezier(.45,0,.4,1) infinite}
@keyframes hp-q{0%{transform:translateY(0) rotateY(0) scale(1.05,.94)}12%{transform:translateY(0) rotateY(0) scale(.97,1.04)}50%{transform:translateY(calc(-22px*var(--a))) rotateY(180deg) scale(1.12)}88%{transform:translateY(0) rotateY(360deg)}100%{transform:translateY(0) rotateY(360deg) scale(1.05,.94)}}
@keyframes hs-q{0%,12%,88%,100%{transform:none;opacity:.55}50%{transform:scaleX(.55);opacity:.2}}
/* king: a stately waddle */
.hop.lp-k .hop-piece{animation:hp-k 1.4s ease-in-out infinite}.hop.lp-k .hop-shadow{animation:hs-k 1.4s ease-in-out infinite}
@keyframes hp-k{0%,100%{transform:translateX(calc(-5px*var(--a))) rotate(-9deg)}25%{transform:translate(0,calc(-7px*var(--a))) rotate(0)}50%{transform:translateX(calc(5px*var(--a))) rotate(9deg)}75%{transform:translate(0,calc(-7px*var(--a))) rotate(0)}}
@keyframes hs-k{0%,100%{transform:translateX(calc(-3px*var(--a)))}25%,75%{transform:scaleX(.85);opacity:.4}50%{transform:translateX(calc(3px*var(--a)))}}
.mini-hop{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:4px;--a:.35;animation:hp-p .9s cubic-bezier(.3,0,.3,1) infinite}
.mini-hop svg{width:16px;height:16px;display:block}
#engineNote.ready{animation:fadeUp .4s ease}
.tsbox{display:flex;justify-content:center;margin-top:10px}
.promptbox.hascode{border-color:var(--rule)}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.swatch:hover{transform:scale(1.12)}
.swatch.on{border-color:var(--ink)}
.menu .swatch{display:inline-block;width:26px;height:26px;min-height:0;padding:0;margin:0;flex:none;border-radius:8px}
.menu .swatch:hover{background-color:transparent}
.gearmenu{max-height:min(78vh,640px);overflow-y:auto}
.dice{display:inline-block;font-size:1.1em;line-height:1;margin-right:4px;vertical-align:-1px}
.dice.roll{animation:diceRoll .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}}
.altrow{flex-wrap:wrap}

/* ---------- Toasts, confetti, result card ---------- */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toastx{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transform:translateY(12px) scale(.95);transition:opacity .25s,transform .3s cubic-bezier(.2,1.3,.4,1)}
.toastx.in{opacity:1;transform:none}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:12}
.confetti i{position:absolute;top:-18px;border-radius:2px;animation-name:fall;animation-timing-function:cubic-bezier(.25,.5,.5,1);animation-fill-mode:forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),720px) rotate(var(--rot));opacity:0}}
.result{animation:resultIn .45s cubic-bezier(.2,1.35,.4,1)}
@keyframes resultIn{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:none}}
#aiModal .dialog{max-width:480px}
/* ---------- Modern touches (inspired by crisp game sites): pill buttons, springy hovers ---------- */
body{letter-spacing:-.005em}
.primary,.ghostbtn{border-radius:999px}
.primary{padding:11px 20px;font-weight:650}
.primary:hover:not(:disabled){transform:scale(1.045);box-shadow:0 10px 26px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15)}
.primary:active:not(:disabled){transform:scale(.95)}
.ghostbtn:hover:not(:disabled){transform:scale(1.035)}
.ghostbtn:active:not(:disabled){transform:scale(.95)}
.primary,.ghostbtn,.navlink,.iconbtn,.chcard,.logo{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background-color .2s,border-color .2s,color .2s}
.card{border-radius:18px}
.botcard{border-radius:14px}
.vs{font-style:normal;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:600}

/* ---------- Top navigation ---------- */
.topnav{position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.navin{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:9px;background:none;border:0;padding:4px 6px 4px 2px;border-radius:10px;color:var(--ink);font:800 1.08rem/1 var(--sans);letter-spacing:-.03em;cursor:pointer}
.logo:hover{transform:scale(1.04)}
.logo:active{transform:scale(.96)}
.logomark{width:28px;height:28px;border-radius:8px;background:#2E3238;display:grid;place-items:center;flex:none}
.logomark svg{width:22px;height:22px}
.navlinks{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlink{position:relative;background:none;border:0;padding:7px 11px;border-radius:999px;color:var(--muted);font:500 .92rem/1 var(--sans);white-space:nowrap;cursor:pointer}
.navlink:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.navlink:active{transform:scale(.94)}
.navlink[aria-current="page"]{color:var(--ink);font-weight:650}
.navlink .dot{position:absolute;top:4px;right:3px;width:6px;height:6px;border-radius:50%;background:#FF5AA5;box-shadow:0 0 0 2px var(--bg)}
.navright{display:flex;gap:6px;margin-left:auto}
.iconbtn{width:36px;height:36px;border-radius:999px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.iconbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);transform:scale(1.08)}
.iconbtn:active{transform:scale(.92)}
.iconbtn[aria-pressed="false"]{opacity:.55}
@media (max-width:560px){.logo .wordmark{font-size:1rem}.navin{gap:4px 8px;padding:8px 10px 4px;flex-wrap:wrap}.navlinks{order:3;flex-basis:100%;margin:0 -4px;justify-content:space-between}.navlink{padding:7px 7px;font-size:.88rem}.navlong{display:none}.navlink[data-nav=featured]{text-transform:capitalize}.iconbtn{width:32px;height:32px}}
body.mode-setup .app{padding-top:max(4vh,18px)}
#p-setup{padding-top:clamp(0px, calc(28vh - 110px), 190px)}
@media (max-width:640px){#p-setup{padding-top:clamp(0px, 6vh, 48px)}}

/* ---------- Challenges page ---------- */
.daily{position:relative;overflow:hidden;border:0;border-radius:22px;padding:28px;margin-top:22px;color:#F3F1EA;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--rule) 60%,transparent),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(61,220,132,.18),transparent 60%),#16181B;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.daily.featured{margin-top:22px;background:radial-gradient(120% 140% at 100% 0%,rgba(233,196,106,.45),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(208,69,58,.28),transparent 60%),#16181B}
.daily.featured + .daily{margin-top:16px}
.daily .kick{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.daily h2{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.04em;font-weight:800;margin:8px 0 6px}
.daily p{margin:0 0 16px;opacity:.8}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip2{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:600;font-size:.88rem}
.daily .primary{background:#F3F1EA;color:#16181B}
.daily .bigpiece{position:absolute;right:-10px;bottom:-18px;width:190px;height:190px;opacity:.9;transform:rotate(-8deg);pointer-events:none}
@media (max-width:600px){.daily .bigpiece{width:120px;height:120px;opacity:.35}}
.done{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:#3DDC84}
.sechead{margin:34px 0 12px;font-size:1.25rem}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.chcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.chcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.14)}
.chcard .top{display:flex;align-items:center;gap:10px}
.chcard h3{font-size:1.1rem}
.chcard p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.chcard p.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.botsbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:22px 0 16px}
.segtabs{display:inline-flex;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.segtabs button{border:0;background:none;padding:7px 16px;border-radius:999px;color:var(--muted);font-weight:600;cursor:pointer;transition:background-color .2s,color .2s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.segtabs button:hover{color:var(--ink)}
.segtabs button:active{transform:scale(.94)}
.segtabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.botsearch{flex:0 1 240px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--field);color:var(--ink);font:inherit}
.botsearch:focus{outline:none;border-color:var(--rule)}
body.mode-setup:has(#p-bots:not([hidden])) .app,body.mode-setup:has(#p-challenges:not([hidden])) .app{max-width:980px}
.dialog.ask{max-width:380px}
.footlinks{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:26px 0 6px;font-size:.8rem;color:var(--muted);opacity:.75}
.footlinks .linkbtn{font-size:.8rem;color:var(--muted);text-decoration:none}
.footlinks .linkbtn:hover{color:var(--ink);text-decoration:underline}
.dialog.info{max-width:520px}
.limitcard{position:relative;display:flex;gap:14px;align-items:flex-start;margin:14px auto 0;max-width:720px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);animation:lcIn .35s cubic-bezier(.2,.8,.2,1)}
.limitcard .lc-icon{width:40px;height:40px;flex:none;border-radius:12px;background:var(--field);display:grid;place-items:center}
.limitcard .lc-icon svg{width:30px;height:30px}
.limitcard .lc-body b{display:block;font-size:1.02rem}
.limitcard .lc-body p{margin:4px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.limitcard .lc-body strong{color:var(--ink)}
.limitcard .lc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.limitcard .lc-key{margin-top:10px;font-size:.8rem;color:var(--muted)}
.limitcard .lc-x{position:absolute;top:10px;right:10px}
@keyframes lcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.infotabs{margin:12px 0 4px}
.infobody{font-size:.93rem;line-height:1.55;color:var(--ink)}
.infobody p{margin:12px 0 0}
.infobody a{color:var(--rule)}
.infolist{margin:12px 0 0;padding-left:18px;display:grid;gap:8px}
.reportlink{font-size:.8rem;color:var(--muted);opacity:.7}
.reportlink:hover{opacity:1}
/* splash: the rook slams down, then the name slides out from behind it */
#splash{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;transition:opacity .45s ease,visibility .45s ease}
#splash.out{opacity:0;visibility:hidden}
html.nosplash #splash{display:none}
.splash-in{display:flex;align-items:flex-end;transform:translateY(-4vh);animation:spShake .32s .3s ease-out}
.sp-rook{position:relative;width:74px;height:74px;flex:none;z-index:2}
.sp-piece{position:absolute;inset:0;transform-origin:50% 92%;animation:spSlam .62s cubic-bezier(.55,0,1,.45) both}
.sp-piece svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.sp-shadow{position:absolute;left:14px;right:14px;bottom:3px;height:9px;border-radius:50%;background:rgba(0,0,0,.35);animation:spShadow .62s cubic-bezier(.55,0,1,.45) both}
.sp-dust{position:absolute;bottom:4px;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent);opacity:0}
.sp-dust.l{left:6px;animation:spDustL .5s .3s ease-out both}
.sp-dust.r{right:6px;animation:spDustR .5s .3s ease-out both}
.sp-mask{overflow:hidden;padding:6px 4px 10px 12px;margin-left:-6px}
.splash-word{font:800 clamp(2rem,6.4vw,2.9rem)/1 var(--sans);letter-spacing:-.045em;color:var(--ink);white-space:nowrap;transform:translateX(-110%);animation:spWord .5s .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes spSlam{0%{transform:translateY(-150px) scale(.92);opacity:0}8%{opacity:1}48%{transform:translateY(0) scale(1)}58%{transform:translateY(0) scale(1.18,.78)}72%{transform:translateY(-7px) scale(.95,1.06)}86%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}
@keyframes spShadow{0%{transform:scaleX(.25);opacity:0}48%{transform:scaleX(1);opacity:.6}58%{transform:scaleX(1.25);opacity:.7}100%{transform:scaleX(1);opacity:.55}}
@keyframes spDustL{0%{opacity:.6;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-26px,-10px) scale(1.6)}}
@keyframes spDustR{0%{opacity:.6;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(26px,-10px) scale(1.6)}}
@keyframes spShake{0%,100%{transform:translateY(-4vh)}25%{transform:translate(0,calc(-4vh + 3px))}50%{transform:translate(-2px,calc(-4vh - 1px))}75%{transform:translate(1px,calc(-4vh + 1px))}}
@keyframes spWord{to{transform:none}}
html.nofx #splash .splash-word{transform:none}
/* round arrow instead of "Continue" */
.gobtn{width:46px;height:46px;min-width:46px;border-radius:50%!important;padding:0!important;display:inline-grid;place-items:center;flex:none}
.gobtn svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.gobtn:hover:not(:disabled) svg{transform:translateX(2px)}
.promptbar{flex-wrap:nowrap}
.promptbar .pill{min-width:0;flex:0 1 auto}
.promptbar .pill select{min-width:0;max-width:100%}
.promptbar .gobtn{margin-left:auto}
/* uniform segmented tabs for browsing */
.tabs2{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.tabs2 button{border:0;padding:7px 16px;text-align:center;white-space:nowrap}
.tabs2 button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:transparent}
/* move navigation */
.movesrow{display:flex;align-items:stretch;gap:6px}
.movesrow .moves{flex:1;min-width:0}
.movesrow .mvbtn{display:none}
.mvnav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.mvbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;font:600 1.15rem/1 var(--sans);padding:7px 0;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.mvbtn:hover:not(:disabled){background:var(--field)}
.mvbtn:active:not(:disabled){transform:scale(.92)}
.mvbtn:disabled{opacity:.35;cursor:default}
/* hamburger (phones) */
.burgerwrap{display:none}
.burger{display:grid;place-content:center;gap:4px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burgermenu{min-width:220px;padding:8px}
.bmitem{display:flex!important;align-items:center;gap:8px;font:600 1rem/1.2 var(--sans)!important;padding:12px 12px!important;border-radius:10px!important;color:var(--ink)}
.bmdot{width:7px;height:7px;border-radius:50%;background:#FF5AA5}
@media (max-width:640px){
  .navlinks,#navSound,#navTheme,#navSettings{display:none!important}
  .burgerwrap{display:block}
  .navin{flex-wrap:nowrap!important;padding:10px 12px!important}
  .burgermenu{position:fixed;top:56px;right:10px;left:auto}
  .navmenu{position:fixed!important;top:56px!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100svh - 72px)!important}
  /* home */
  .browsehead{flex-direction:column;align-items:stretch;gap:10px}
  .browsehead .tabs2{display:grid;width:100%}
  .tabs2 button{padding:8px 4px;font-size:.88rem}
  .promptbar{gap:6px}
  .pill{padding-left:10px;font-size:.8rem}
  .pill select{padding:7px 6px 7px 4px;font-size:.86rem}
  .botsbar{flex-direction:column;align-items:stretch}
  .botsbar .segtabs{display:grid;grid-template-columns:repeat(3,1fr)}
  .botsbar .segtabs button{padding:8px 4px}
  .botsbar .botsearch{flex:1 1 auto}
  /* game: everything on one screen */
  body.mode-game .app{padding:6px 10px 10px;gap:8px}
  body.mode-game .boardframe{width:min(100%, calc(100svh - 330px))!important;margin:0 auto}
  body.mode-game .pbar{padding:4px 0}
  body.mode-game .panel{padding:0;border:0;background:none;max-height:none}
  #gName,#gStatus,.movesh,.mvnav{display:none!important}
  .announce{margin:0;padding:8px 12px;align-items:center}
  .announce .icon{width:28px;height:28px}
  .announce .icon svg{width:22px;height:22px}
  .announce b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #annText{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .announce > div:last-child{min-width:0}
  #p-game .iconbtns{margin-top:8px!important;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
  #p-game .iconbtns button{padding:8px 2px;font-size:.8rem;border-radius:12px!important;white-space:nowrap;min-width:0}
  #p-game .iconbtns button[hidden]{display:none}
  .movesrow{margin-top:8px}
  .movesrow .mvbtn{display:block;width:44px;flex:none}
  .movesrow .moves{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;max-height:none;white-space:nowrap;scrollbar-width:none;padding:0 4px}
  .movesrow .moves::-webkit-scrollbar{display:none}
  .movesrow .moves div{padding:7px 6px;flex:none}
  .movesrow .moves .n{background:none;padding-right:2px}
}
.tipi{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:7px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--muted) 70%,transparent);color:var(--muted);
  font:700 .68rem/1 var(--sans);cursor:help;vertical-align:middle;flex:none;user-select:none;transition:color .2s,border-color .2s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.tipi:hover,.tipi:focus-visible{color:var(--ink);border-color:var(--ink);transform:scale(1.15);outline:none}
.tippop{position:fixed;z-index:95;max-width:280px;padding:10px 13px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:.86rem;line-height:1.45;box-shadow:0 14px 34px rgba(0,0,0,.28);pointer-events:none;animation:tipIn .16s ease-out}
@keyframes tipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.trow{display:flex;align-items:center;min-width:0}
.trow .nameinput{flex:1;min-width:0}
.addbot .tipi{margin-left:8px}
.navright .menuwrap{position:relative}
.navmenu{width:300px;right:0;top:calc(100% + 10px);padding:14px}
.mhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}.mhead b{margin-right:auto}
.menu .mclose{display:grid!important;place-items:center;width:30px!important;height:30px;padding:0!important;border-radius:50%!important;font-size:1.2rem;flex:none}
.nameset{width:100%;padding:8px 11px;border-radius:8px;border:1.5px solid var(--line);background:var(--field);color:var(--ink);font:inherit;margin-top:4px}
.nameset:focus{outline:none;border-color:var(--rule)}
.byline{font-size:.8rem;color:var(--muted);margin-top:2px}
.logo .wordmark{font-size:1.15rem}
.qhint{font-weight:500;color:var(--muted);font-size:.82rem;margin-left:6px}
.qother{margin-top:8px;width:100%;padding:8px 11px;border-radius:8px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.9rem}
.qother:focus{outline:none;border-color:var(--rule)}
.chcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lvl{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.suggestlink{margin-left:6px}
html.nofx *{animation:none!important;transition:none!important}