/* Manarealm online boards — styles adapted from the Arcadia arcade.
   Player colors arrive via --p1 / --p2 custom properties on :root. */

/* ---------- match page layout ---------- */
.match-panel{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;margin-top:20px}
.match-players{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:14px}
.mp-card{display:flex;align-items:center;gap:9px;padding:10px 13px;border:2px solid var(--line);
  border-radius:12px;font-weight:700;font-size:14.5px;min-width:0;transition:border-color .2s, box-shadow .2s}
.mp-card .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-card.c1{color:var(--p1)} .mp-card.c2{color:var(--p2);justify-content:flex-end}
.mp-card.active{box-shadow:0 0 0 2px currentColor inset, 0 0 18px -6px currentColor}
.mp-vs{color:var(--muted);font-weight:800;font-size:13px}
.match-status{text-align:center;font-weight:700;font-size:15px;margin:0 0 16px;min-height:22px;color:var(--ink)}
.match-status .sub{display:block;color:var(--muted);font-weight:600;font-size:13px;margin-top:3px}
.board-box{display:flex;flex-direction:column;align-items:center;gap:12px}
.match-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.result-panel{text-align:center;padding:10px 0 4px}
.result-panel .big{font-family:var(--display);font-size:clamp(22px,5vw,30px);font-weight:700;margin:0 0 4px}
.scry-pill{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px}

/* ---------- tic-tac-toe ---------- */
.ttt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;aspect-ratio:1/1;width:min(100%,400px)}
.ttt-grid .cell{background:#0f141b;border:2px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(36px,11vw,64px);font-weight:800;
  cursor:pointer;user-select:none;font-family:var(--body);color:var(--ink);
  transition:background .12s,border-color .12s,transform .06s;padding:0}
.ttt-grid .cell:active{transform:scale(.97)}
.ttt-grid .cell.p1{color:var(--p1)} .ttt-grid .cell.p2{color:var(--p2)}
.ttt-grid .cell.win{border-color:#f2cc60;background:rgba(242,204,96,.15)}
.ttt-grid .cell.last{border-color:#4a5568}

/* ---------- connect 4 ---------- */
.c4-grid{background:#10243f;border-radius:14px;padding:8px;width:min(100%,440px);
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.c4-grid .slot{aspect-ratio:1/1;background:var(--void);border-radius:50%;border:none;padding:0;
  cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.c4-grid .disc{position:absolute;inset:8%;border-radius:50%;transform:translateY(-650%)}
.c4-grid .disc.show{animation:c4drop .32s cubic-bezier(.34,.05,.42,1.2) forwards}
.c4-grid .disc.p1{background:radial-gradient(circle at 35% 30%,#ffffff66,var(--p1))}
.c4-grid .disc.p2{background:radial-gradient(circle at 35% 30%,#ffffff66,var(--p2))}
.c4-grid .slot.win .disc{box-shadow:0 0 0 3px #f2cc60, 0 0 14px #f2cc60}
@keyframes c4drop{to{transform:translateY(0)}}

/* ---------- checkers ---------- */
.chk-grid{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1/1;width:min(100%,440px);
  border:3px solid #20262f;border-radius:10px;overflow:hidden;touch-action:manipulation}
.ccell{position:relative;display:flex;align-items:center;justify-content:center}
.ccell.lite{background:#6b7689}
.ccell.dark{background:#333b48;cursor:pointer}
.ccell.sel{box-shadow:inset 0 0 0 3px #f2cc60}
.ccell.dest::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;
  background:#f2cc60;opacity:.75;pointer-events:none}
.ccell.dest.cap::after{width:62%;height:62%;background:transparent;border:3px solid #f2cc60;opacity:.85}
.cpiece{width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,5vw,26px);line-height:1;color:#f2cc60;
  box-shadow:0 2px 4px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.3)}
.cpiece.p1{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--p1))}
.cpiece.p2{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--p2))}
.cpiece.king{box-shadow:0 2px 4px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.4), 0 0 0 2px #f2cc60}

/* ---------- canvas games ---------- */
.dab-canvas,.hex-canvas{display:block;touch-action:manipulation;border-radius:10px}
.hex-swap-btn{margin-top:4px}

/* ---------- presence (who's here) ---------- */
.presence-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin:-6px 0 14px}
.mp-card{position:relative}
.mp-card::after{content:"";width:8px;height:8px;border-radius:50%;background:#4a5568;flex:0 0 auto;
  transition:background .3s, box-shadow .3s}
.mp-card.here::after{background:#3ddc97;box-shadow:0 0 8px #3ddc97}

/* ---------- hangman (online) ---------- */
.hang-set{display:flex;flex-direction:column;gap:10px;width:min(100%,340px)}
.hg-input{background:#0e0a1e;border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:inherit;font-size:16px;padding:11px 12px}
.hg-input:focus{outline:2px solid var(--mana);outline-offset:0}
.hang-note{color:var(--muted);font-size:13.5px;text-align:center;margin:8px 0;line-height:1.5}
.hang-canvas{display:block}
.hang-hintline{color:var(--muted);font-size:13px;margin:0}
.hang-hintline b{color:var(--ink)}
.hang-word{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.hang-slot{width:24px;height:36px;display:flex;align-items:flex-end;justify-content:center;
  font-size:22px;font-weight:800;border-bottom:3px solid var(--line);padding-bottom:3px;color:var(--ink)}
.hang-slot.filled{border-bottom-color:var(--p2)}
.hang-slot.miss{color:#ff6b8b;border-bottom-color:#ff6b8b}
.hang-lives{font-size:13px;color:var(--muted);letter-spacing:1px;margin:0}
.hang-keys{display:flex;flex-direction:column;gap:6px;width:min(100%,420px)}
.hang-krow{display:flex;gap:5px;justify-content:center}
.hkey{flex:1 1 0;min-width:0;height:42px;border-radius:8px;border:1px solid var(--line);
  background:#1f1840;color:var(--ink);font:inherit;font-weight:800;font-size:15px;cursor:pointer;
  text-transform:uppercase;padding:0}
.hkey.good{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
.hkey.bad{background:#120d24;color:#4a4368;border-color:#241d45;opacity:.6}
.hkey:disabled{cursor:default}

/* ---------- trivia (online) ---------- */
.tv-lives{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:14px;font-weight:800}
.tv-q{font-size:clamp(16px,4vw,20px);font-weight:700;text-align:center;margin:6px 0 2px;
  line-height:1.35;color:var(--ink)}
.tv-opts{display:flex;flex-direction:column;gap:10px;width:100%}
.tv-opt{width:100%;text-align:left;background:#1f1840;border:2px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--ink);font:inherit;font-weight:600;font-size:15.5px;cursor:pointer;
  transition:border-color .12s}
.tv-opt:disabled{cursor:default;opacity:.75}
.tv-opt:not(:disabled):hover{border-color:var(--mana)}
.tv-result{font-size:13px;color:var(--muted);text-align:center;margin:0}
.tv-result b{color:var(--ink)}

/* ---------- brews list on circle cards ---------- */
.brews{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.brew-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:rgba(255,255,255,.02)}
.brew-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.brew-row .game-tag{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#b9a4f5}

/* ---------- sea battle ---------- */
.sea-wrap{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
.sea-board{display:flex;flex-direction:column;gap:6px;align-items:center;width:min(100%,340px)}
.sea-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.sea-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:100%;aspect-ratio:1}
.sea-cell{background:#0d1420;border:1px solid #1d2735;border-radius:4px;padding:0;position:relative;min-width:0}
.sea-cell.can{cursor:pointer}
.sea-cell.can:hover{filter:brightness(1.9)}
.sea-cell.ship{background:#31415a;border-color:#4a5d80}
.sea-cell.preview{background:rgba(76,201,240,.38);border-color:#4cc9f0}
.sea-cell.bad{background:rgba(255,107,139,.42);border-color:#ff6b8b}
.sea-cell.miss::after{content:"";position:absolute;inset:36%;border-radius:50%;background:#3d4f6b}
.sea-cell.hit{background:#5b2333;border-color:#ff6b8b}
.sea-cell.hit::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#ffa4ba;font-size:11px;font-weight:800}
.sea-cell.sunkcell{background:#7a1f36;border-color:#ff6b8b;box-shadow:0 0 9px -3px #ff6b8b}
.sea-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sea-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#131a26;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.sea-chip.sel{border-color:#4cc9f0;box-shadow:0 0 10px -4px #4cc9f0}
.sea-chip.placed{opacity:.5}
.sea-chip .pips{display:inline-flex;gap:2px}
.sea-chip .pips i{width:7px;height:7px;background:#4a5d80;border-radius:2px}
.sea-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sea-log{font-size:13px;color:var(--muted);text-align:center;min-height:18px}
.sea-blackout{display:flex;flex-direction:column;gap:16px;align-items:center;padding:44px 12px;text-align:center}
.sea-blackout .big{font-family:var(--display);font-size:clamp(19px,4.5vw,25px);font-weight:700;margin:0}

/* ---------- alchemist's dice ---------- */
.dice-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.dice-stage{position:relative;width:min(100%,420px);height:190px;display:grid;place-items:center}

/* the cup: two sprite frames, swapped at the tip */
.dice-cup{position:absolute;top:-6px;left:50%;width:118px;height:118px;margin-left:-59px;
  background:url("../assets/dice/cup-up.png") center/contain no-repeat;
  transform-origin:60% 92%;pointer-events:none;opacity:0;transition:opacity .18s}
.dice-cup.show{opacity:1}
.dice-cup.shake{animation:cupShake .8s ease-in-out}
.dice-cup.tip{background-image:url("../assets/dice/cup-tip.png");animation:cupTip .45s cubic-bezier(.34,1.3,.64,1) forwards}
@keyframes cupShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-7px,-3px) rotate(-8deg)}
  22%{transform:translate(7px,-5px) rotate(9deg)}
  34%{transform:translate(-8px,-2px) rotate(-10deg)}
  46%{transform:translate(9px,-6px) rotate(11deg)}
  58%{transform:translate(-10px,-3px) rotate(-12deg)}
  70%{transform:translate(10px,-7px) rotate(13deg)}
  84%{transform:translate(-6px,-2px) rotate(-7deg)}
}
@keyframes cupTip{
  from{transform:rotate(0) translate(0,0)}
  to{transform:rotate(102deg) translate(16px,-6px)}
}

/* the dice tray — each die is a flat sprite of the painted face art
   (the art carries its own bevel, trim, and lighting; alpha background) */
.dice-row{display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  min-height:80px}
.die{width:62px;height:62px;position:relative;
  background:transparent center/contain no-repeat;border:0;padding:0;cursor:default;
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2), filter .2s}
.die.can{cursor:pointer}
.die.can:hover{filter:brightness(1.22) drop-shadow(0 0 5px rgba(76,201,240,.55))}
.die.held{filter:drop-shadow(0 0 7px #e9b96e) drop-shadow(0 0 2px #e9b96e);
  transform:translateY(-5px)!important}
.die.held::after{content:"⚓";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  font-size:10px;color:#e9b96e;text-shadow:0 0 6px #e9b96e}
.die.spill{transition:transform .85s cubic-bezier(.18,.85,.3,1.05), opacity .2s, filter .2s}
.die.inCup{opacity:0}
.die-hint{font-size:11.5px;color:var(--muted);letter-spacing:.4px;min-height:14px}

/* scorecard */
.dice-cardwrap{width:100%;overflow-x:auto}
.dice-card{width:100%;border-collapse:collapse;font-size:13px;min-width:260px}
.dice-card th,.dice-card td{border:1px solid var(--line);padding:5px 8px;text-align:center}
.dice-card th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:800}
.dice-card th.turn{border-bottom:2px solid currentColor;text-shadow:0 0 8px currentColor}
.dice-card .cat{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap;
  font-size:13px;text-transform:none;letter-spacing:0}
.dice-card td.sc{color:var(--muted);font-variant-numeric:tabular-nums}
.dice-card td.sc.has{color:var(--ink);font-weight:700}
.dice-card tr.turn td{background:rgba(139,92,246,.09)}
.dice-card td.pick{cursor:pointer;color:var(--elixir,#3ddc97);font-weight:800}
.dice-card td.pick:hover{background:rgba(61,220,151,.14)}
.dice-card tr.sub td{background:#10162099;font-size:12px;color:var(--muted)}
.dice-card tr.sub th.cat{background:#10162099;font-size:12px;color:var(--muted)}
.dice-card tr.total td{background:#12192699;font-weight:800;color:var(--ink)}
.dice-rolls{font-size:13px;font-weight:700;color:var(--ink)}
.dice-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .dice-cup,.dice-cup.shake,.dice-cup.tip{animation:none!important}
  .die,.die.spill{transition:none!important}
}

/* ---------------- Liar's Bones ---------------- */
.liar-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.liar-cups{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.liar-cup{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;font-size:13px;
  border:2px solid var(--line);border-radius:12px;color:var(--ink)}
.liar-cup.turn{border-color:var(--seat);box-shadow:0 0 14px -4px var(--seat)}
.liar-cup.out{opacity:.35}
.liar-cup .cupicon{width:24px;height:24px;display:inline-block;
  background:url("../assets/dice/cup-up.png") center/contain no-repeat}
.liar-cup .cnt{font-variant-numeric:tabular-nums}
.ldie{width:40px;height:40px;display:inline-block;flex:none;
  background-size:contain;background-position:center;background-repeat:no-repeat}
.ldie.hit{filter:drop-shadow(0 0 7px #e9b96e) brightness(1.12);transform:translateY(-2px)}
.ldie.dim{opacity:.55}
.liar-bid{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);
  flex-wrap:wrap;justify-content:center}
.liar-bid .ldie{width:34px;height:34px}
.liar-mine{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.liar-mine .nm{font-size:12px;color:var(--muted);margin-right:4px}
.liar-reveal{border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;
  max-width:440px;display:flex;flex-direction:column;gap:8px;background:#10162066}
.liar-hand-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.liar-hand-row .nm{font-size:12.5px;font-weight:700;min-width:74px}
.liar-hand-row .ldie{width:30px;height:30px}
.liar-verdict{font-size:13.5px;color:var(--ink);margin:0}
.liar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.liar-step{display:flex;align-items:center;gap:8px}
.liar-step .q{font-size:20px;min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.liar-faces{display:flex;gap:5px}
.liar-face{background:none;border:2px solid transparent;border-radius:10px;padding:2px;cursor:pointer}
.liar-face .ldie{width:32px;height:32px;display:block}
.liar-face.sel{border-color:var(--p1,#8b5cf6);box-shadow:0 0 10px -3px var(--p1,#8b5cf6)}
.liar-face:hover{border-color:var(--line)}
.liar-spotbtn{border-color:#e9b96e;color:#e9b96e;background:transparent}
.liar-spotbtn:hover{background:rgba(233,185,110,.12)}