@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Chivo+Mono:wght@500;600;700&display=swap');
:root{--bg:#061624;--bg2:#081d2f;--panel:rgba(13,39,59,.72);--panel-solid:#0c263b;--text:#edf7fb;--muted:#8ca5b7;--dim:#587184;--line:rgba(154,188,209,.15);--cyan:#24d3ef;--cyan2:#7cecff;--green:#38d98a;--amber:#f4bf4f;--red:#ff6177;--gold:#f2c230;--shadow:0 28px 90px rgba(0,0,0,.34);--display:'Archivo',system-ui,sans-serif;--mono:'Chivo Mono',monospace;color-scheme:dark}
[data-theme=light]{--bg:#eaf2f7;--bg2:#f8fbfd;--panel:rgba(255,255,255,.78);--panel-solid:#fff;--text:#071725;--muted:#5f7584;--dim:#8193a0;--line:rgba(7,23,37,.12);--shadow:0 24px 70px rgba(21,52,73,.12);color-scheme:light}
*{box-sizing:border-box}
/* Several blocks here set display explicitly (flex/grid), which outranks the plain
   [hidden] attribute and left the loading spinner painted underneath the board. */
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:linear-gradient(145deg,var(--bg),var(--bg2));color:var(--text);font-family:var(--display);overflow-x:clip}
button,input{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
.ambient{position:fixed;border-radius:50%;pointer-events:none;filter:blur(110px);opacity:.12;z-index:-1}
.ambient-one{width:500px;height:500px;background:var(--cyan);right:-210px;top:-220px}
.ambient-two{width:360px;height:360px;background:var(--gold);left:-220px;top:45vh;opacity:.07}
.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:26px 0 70px}

/* hero */
.game-hero{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}
.overline{display:flex;align-items:center;gap:8px;font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.overline i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(36,211,239,.16)}
.game-hero h1{margin:10px 0 6px;font-size:clamp(38px,7vw,60px);font-weight:900;font-style:italic;letter-spacing:-.045em;line-height:.92}
.game-hero h1 em{color:var(--cyan);font-style:italic}
.game-hero p{margin:0;color:var(--muted);font-size:14px;max-width:46ch;line-height:1.55}
.hero-stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.stat{min-width:96px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(9px)}
.stat span{display:block;font:700 8px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.stat b{display:block;margin-top:5px;font:900 24px var(--display);color:var(--cyan);line-height:1}
.stat small{display:block;margin-top:2px;font:600 9px var(--mono);color:var(--muted)}

/* layout */
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.glass{border:1px solid var(--line);border-radius:20px;background:var(--panel);backdrop-filter:blur(11px);box-shadow:var(--shadow);padding:20px}
.card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.mode-label{font:700 8px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan)}
.card-head h2{margin:5px 0 0;font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.03em}
.card-head h2 em{color:var(--cyan);font-style:normal}
.guesses-left{margin-left:auto;text-align:right;flex:0 0 auto}
.guesses-left b{display:block;font:900 26px var(--display);line-height:1;color:var(--cyan)}
.guesses-left span{font:700 8px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}

/* the board */
.board-wrap{overflow-x:auto;padding-bottom:4px}
.board{display:grid;grid-template-columns:104px repeat(3,minmax(96px,1fr));gap:7px;min-width:440px}
.head-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:9px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);min-height:64px}
.head-cell.corner{background:transparent;border:0}
.head-cell b{font:800 11px var(--display);letter-spacing:-.01em;line-height:1.18}
.head-cell small{font:600 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.head-cell.row-head{min-height:88px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:88px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);transition:.16s;text-align:center;overflow:hidden}
.cell:not(.filled):not(.dead):hover{border-color:rgba(36,211,239,.55);background:rgba(36,211,239,.07)}
.cell.active{border-color:var(--cyan);background:rgba(36,211,239,.12);box-shadow:0 0 0 2px rgba(36,211,239,.18)}
.cell.filled{background:rgba(56,217,138,.13);border-color:rgba(56,217,138,.45);cursor:default}
.cell.dead{opacity:.4;cursor:default}
.cell .plus{font:700 20px var(--display);color:var(--dim)}
.cell .pname{font:800 11.5px var(--display);line-height:1.2;word-break:break-word}
.cell .ppos{font:700 8px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cell .rarity{position:absolute;top:5px;right:6px;font:700 8px var(--mono);color:var(--green)}
.cell .miss{font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}

/* guess panel */
.guess-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.guess-box label{display:block;font:700 8px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.target-line{font:800 13px var(--display);margin-bottom:10px}
.target-line em{color:var(--cyan);font-style:normal}
.search-row{display:flex;gap:9px}
.search-wrap{position:relative;flex:1;min-width:0}
.search-wrap input{width:100%;height:48px;padding:0 40px 0 15px;border:1px solid var(--line);border-radius:12px;background:rgba(2,12,22,.36);color:var(--text);font-weight:700;outline:none}
[data-theme=light] .search-wrap input{background:rgba(255,255,255,.9)}
.search-wrap input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(36,211,239,.13)}
.search-wrap input:disabled{opacity:.5}
.clear-search{position:absolute;right:9px;top:9px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--dim);font-size:19px;display:none}
.clear-search.show{display:block}
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:270px;overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel-solid);box-shadow:var(--shadow);display:none}
.suggestions.open{display:block}
.suggestions button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;text-align:left}
.suggestions button:hover,.suggestions button[aria-selected=true]{background:rgba(36,211,239,.12)}
.suggestions button b{font-size:13px;font-weight:800}
.suggestions button i{font:700 8px var(--mono);letter-spacing:.08em;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--muted);font-style:normal}
.suggestions button span{margin-left:auto;font:600 9px var(--mono);color:var(--dim);white-space:nowrap}
.suggestions button:disabled{opacity:.65}
.primary-button{height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--cyan);color:#04131d;font:800 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.primary-button:disabled{opacity:.42}
.secondary-button{height:48px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);font:800 11px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.microcopy{margin:11px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}
.microcopy b{color:var(--muted)}

/* side */
.side-stack{display:flex;flex-direction:column;gap:16px}
.section-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.section-head h3{margin:4px 0 0;font-size:16px;font-weight:900;font-style:italic;letter-spacing:-.02em}
.locker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;text-align:center}
.locker-grid>div{padding:11px 5px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03)}
.locker-grid b{display:block;font:900 19px var(--display);color:var(--cyan)}
.locker-grid span{font:600 8px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.how-card>div{display:flex;gap:11px;margin-top:12px}
.how-card .key{flex:0 0 auto;display:grid;place-items:center;width:27px;height:27px;border-radius:8px;font-size:13px;font-weight:800}
.how-card .key.ok{background:rgba(56,217,138,.16);color:var(--green)}
.how-card .key.no{background:rgba(255,97,119,.14);color:var(--red)}
.how-card .key.rare{background:rgba(242,194,48,.16);color:var(--gold)}
.how-card p{margin:0}.how-card b{display:block;font-size:12.5px}
.how-card small{color:var(--dim);font-size:11px;line-height:1.5}

/* result */
.result-panel{margin-top:16px;padding:18px;border:1px solid rgba(56,217,138,.4);border-radius:16px;background:rgba(56,217,138,.09);text-align:center}
.result-panel h2{margin:6px 0 4px;font-size:26px;font-weight:900;font-style:italic;letter-spacing:-.04em}
.result-panel p{margin:0;color:var(--muted);font-size:12.5px}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.result-stats>div{padding:10px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04)}
.result-stats b{display:block;font:900 19px var(--display);color:var(--cyan)}
.result-stats span{font:600 8px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.result-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.result-panel small{display:block;margin-top:9px;font:600 10px var(--mono);color:var(--green);min-height:14px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,22px);z-index:999;padding:12px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel-solid);box-shadow:var(--shadow);font:700 12px var(--display);opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.loading-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 0;color:var(--muted)}
.loading-state i{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

footer{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:26px 0 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:11px;color:var(--dim)}
footer .brand{display:flex;align-items:baseline;font-style:italic;letter-spacing:-.6px}
footer .brand b,footer .brand i{font-size:15px;font-weight:900}
footer .brand i{color:var(--cyan);margin-left:3px}
footer>div{margin-left:auto;display:flex;gap:14px}
footer small{flex:0 0 100%;color:var(--dim);line-height:1.5}

@media(max-width:940px){.play-layout{grid-template-columns:1fr}.hero-stats{margin-left:0}}
@media(max-width:560px){
  .shell{width:calc(100% - 20px);padding-top:18px}
  .glass{padding:15px;border-radius:16px}
  /* A 3x3 board that needs sideways scrolling on a phone is a broken 3x3 board, so the
     row header and columns are sized to fit inside 375px once the shell and card padding
     are taken off. The overflow-x on .board-wrap stays as the safety net for very narrow
     devices and long franchise names. */
  .board{grid-template-columns:62px repeat(3,minmax(0,1fr));gap:4px;min-width:0}
  .head-cell{padding:7px 3px;min-height:56px}
  .head-cell b{font-size:9px;letter-spacing:-.02em}.head-cell small{font-size:6.5px}
  .head-cell.row-head{min-height:76px}
  .cell{min-height:76px;padding:6px 3px}
  .cell .pname{font-size:9.5px}.cell .ppos{font-size:7px}.cell .rarity{font-size:7px;top:4px;right:4px}
  .search-row{flex-direction:column}.primary-button,.secondary-button{width:100%}
  footer>div{margin-left:0;flex-basis:100%}
}

/* ---- custom board + rooms ---------------------------------------------- */
.mode-card .mode-btns{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px}
.mode-card .mode-btns button{width:100%}
.cfg-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:11px;font:700 11px var(--display);color:var(--muted)}
.cfg-row select,.cfg-row input{
  flex:0 0 auto;max-width:58%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:10px;
  background:rgba(2,12,22,.36);color:var(--text);font:700 12px var(--display);outline:none}
[data-theme=light] .cfg-row select,[data-theme=light] .cfg-row input{background:rgba(255,255,255,.9)}
.cfg-row select:focus,.cfg-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(36,211,239,.13)}
.cfg-row input{text-transform:uppercase;letter-spacing:.08em}
.cfg-label{display:block;margin:14px 0 8px;font:700 8px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.cfg-checks{display:flex;flex-direction:column;gap:8px}
.cfg-checks label{display:flex;align-items:center;gap:9px;font:600 12px var(--display);color:var(--text);cursor:pointer}
.cfg-checks input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}
.cfg-actions{display:flex;gap:9px;margin-top:14px}
.cfg-actions button{flex:1}
.room-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--dim);font:700 8px var(--mono);letter-spacing:.14em}
.room-or:before,.room-or:after{content:"";flex:1;height:1px;background:var(--line)}
.room-code-box{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(36,211,239,.35);border-radius:12px;background:rgba(36,211,239,.07);margin-bottom:11px}
.room-code-box span{font:700 8px var(--mono);letter-spacing:.1em;color:var(--dim)}
.room-code-box b{font:900 20px var(--mono);letter-spacing:.16em;color:var(--cyan);margin-left:auto}
.text-button{border:0;background:none;color:var(--cyan);font:700 9px var(--mono);letter-spacing:.08em;cursor:pointer;padding:4px}
.room-list{display:flex;flex-direction:column;gap:6px;margin:11px 0;max-height:280px;overflow-y:auto}
.rrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.rrow.self{border-color:rgba(36,211,239,.45);background:rgba(36,211,239,.09)}
.rnum{font:700 10px var(--mono);color:var(--dim);flex:0 0 16px}
.rname{font:800 12.5px var(--display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rname i{font-style:normal;font:700 8px var(--mono);letter-spacing:.08em;color:var(--cyan);margin-left:5px}
.rscore{font:700 11px var(--mono);color:var(--muted);white-space:nowrap}
.rscore b{color:var(--cyan);font-size:13px}
@media(max-width:560px){
  .cfg-row{flex-direction:column;align-items:stretch;gap:6px}
  .cfg-row select,.cfg-row input{max-width:none;width:100%}
  .cfg-actions{flex-direction:column}
}

/* claimed squares carry their owner's colour; the winning line is highlighted */
.cell.filled[style*="--mark"]{background:color-mix(in srgb,var(--mark) 16%,transparent);border-color:color-mix(in srgb,var(--mark) 55%,transparent)}
.cell.filled.win{box-shadow:0 0 0 2px var(--mark) inset}
.rmark{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.rrow.turn{border-color:rgba(36,211,239,.5)}
.rrow .rname i{color:var(--cyan)}