/* ═══════════════════════════════════════════
   3D TABLETOP · the match arena as a tilted playmat
   Reference: "Cricket card combat — ball resolution" mockup.
   Only .bd-arena (opp row · face-off · your row) is tilted; the scorebar,
   hand and action bar stay flat on top so text and buttons read normally.
   The tilt pivots near your row, so your cards keep their size and the
   opponent's side recedes. Clicks and drag targets follow the transform.
   Loaded last; delete this file's <link> to go back to the flat board.
═══════════════════════════════════════════ */
#s-board{background:#eef2f7;}
#s-board .bd-frame{background:linear-gradient(180deg,#f4f1f0 0%,#eef2f7 50%,#e8f0f8 100%);}

/* the tilt */
#s-board .bd-arena{transform:perspective(1000px) rotateX(20deg);transform-origin:50% 82%;margin-top:-84px;
  justify-content:space-evenly;padding:28px 0 18px;}
#s-board .opp-hand{position:relative;z-index:2;}

/* the playmat: warm half for the opponent, cool half for you */
#s-board .bd-arena > .bd-ground{inset:6px 10px;border-radius:38px;overflow:hidden;
  background:linear-gradient(180deg,#f8ded6 0%,#fbeee9 47%,#eaf2fb 53%,#d7e7f7 100%);
  box-shadow:0 22px 40px rgba(40,60,90,.12),inset 0 0 0 2px rgba(255,255,255,.6);}
/* pitch strip running end to end, crease ring at the centre */
#s-board .bd-grass:before{left:50%;right:auto;top:30%;width:70px;height:36%;transform:translateX(-50%);
  border-radius:6px;background:rgba(226,208,170,.45);}
#s-board .bd-grass:after{top:48%;width:140px;height:140px;box-sizing:border-box;border:8px solid rgba(255,255,255,.75);}

/* soft white slots, like cards resting on the mat */
#s-board .card.empty-slot,#s-board .card.locked-slot{background:rgba(255,255,255,.5);border:0;border-radius:9px;}
#s-board .empty-active{background:rgba(255,255,255,.55);border:0;border-radius:11px;}
#s-board .card:not(.empty-slot):not(.locked-slot){box-shadow:0 6px 12px rgba(40,60,90,.18);}

/* hand sits on the table edge, no band behind it */
#s-board .hzone{background:none;}

/* ─── No instruction bar: a small End turn / End setup button under the support box ─── */
#s-board .sup-col{justify-content:center;}
#s-board .sup-col > .wizard{position:static;order:5;width:auto;height:auto;min-height:0;padding:0;margin:0;
  background:none;border:0;border-radius:0;box-shadow:none;}
#s-board .wizard:has(#wbtns:empty){display:none;}
#s-board .winstr{display:none!important;}
#s-board .wbody{width:auto;gap:6px;flex-direction:column;}
#s-board .timer-pill,#s-board[data-multiplayer="true"] .timer-pill{display:flex;flex-direction:column;align-items:center;gap:3px;width:108px;height:auto;padding:6px 4px 8px;box-sizing:border-box;border:1px solid #c5d9df;border-radius:10px;background:linear-gradient(#247769,#247769) left bottom / calc(var(--t,1)*100%) 3px no-repeat,#f5fbfc;color:#24594f;}
#s-board .timer-pill[hidden]{display:none!important;}
#s-board #timer-label{font:700 10px/1.3 var(--fb);text-align:center;}
#s-board .timer-num{width:auto;height:auto;border-radius:0;background:none;color:inherit;font:800 20px/1.1 var(--fb);font-variant-numeric:tabular-nums;}
#s-board .timer-pill.low{color:#9f321e;border-color:#e5b6a7;background:linear-gradient(#b84328,#b84328) left bottom / calc(var(--t,1)*100%) 3px no-repeat,#fff1e9;}
#s-board .wbtn.lock{height:30px;min-width:0;padding:0 11px;border:0;border-radius:15px;background:#1d2b36;color:#fff;
  font:800 10px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 10px rgba(40,60,90,.25);}
#s-board .wbtn.lock:disabled{opacity:.4;box-shadow:none;}
#s-board .card.chand{width:86px;height:121px;}
/* empty support box beside your player (drop or tap a support card) */
#s-board[data-phase="turn"] .sup-slot:has(.sup-slot-txt){visibility:visible;display:grid;place-items:center;
  background:rgba(255,255,255,.45);border:1.5px dashed rgba(90,120,150,.45)!important;border-radius:8px;}
#s-board .sup-slot-txt{font:700 8px/1.2 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:#7d8fa3;}
/* End turn without a required player: the empty pitch slot shakes */
#s-board .empty-active.nudge{animation:bdNudge .45s ease;}
@keyframes bdNudge{20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
/* setup happens on the board: the face-off is faded until the first ball */
#s-board[data-phase="setup"] :is(.field-left,#my-active){opacity:.35;}