/* ===================== Tavla playable game ===================== */
.tg-shell{
  background:var(--wood-panel); border:1px solid var(--wood-line); border-radius:var(--radius);
  padding:26px; max-width:900px; margin:0 auto;
}
:fullscreen .tg-shell{
  max-width:none; width:100vw; height:100vh; margin:0; border-radius:0;
  display:flex; flex-direction:column; justify-content:center;
}
:fullscreen{ background:var(--wood-deep); }

/* setup screen */
.tg-setup-row{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.tg-setup-row label{ min-width:140px; color:var(--cream-dim); font-size:.92rem; }
.tg-setup select{
  background:var(--wood-deep); color:var(--cream); border:1px solid var(--wood-line);
  padding:10px 14px; border-radius:var(--radius); font-family:inherit; font-size:.95rem; min-width:220px;
}
.tg-toggle{ display:inline-flex; border:1px solid var(--wood-line); border-radius:var(--radius); overflow:hidden; }
.tg-toggle button{
  background:var(--wood-deep); color:var(--cream-dim); border:none; padding:9px 18px; font-family:inherit;
  font-size:.9rem; cursor:pointer;
}
.tg-toggle button.active{ background:var(--gold); color:var(--wood-deep); font-weight:600; }
.tg-setup #tg-start{ margin-top:6px; }
.tg-note{ margin-top:18px; font-size:.82rem; color:var(--cream-faint); max-width:56ch; }

/* toolbar */
/* top bar — always visible, even before a game starts */
.tg-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:20px; flex-wrap:wrap;
}
.tg-status{ font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--gold-bright); min-height:1.4em; }
.tg-ai-note{ font-size:.78rem; color:var(--cream-faint); margin:-12px 0 16px; }
.tg-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.tg-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cream); color:var(--wood-deep); border:1px solid var(--cream);
  padding:10px 18px; border-radius:4px; font-family:inherit; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.tg-btn svg{ flex-shrink:0; }
.tg-btn:hover{ background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.45); }
.tg-btn:active{ transform:scale(.97); }
.tg-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.tg-btn-gold{ background:var(--gold); color:var(--wood-deep); border-color:var(--gold); }
.tg-btn-gold:hover{ background:var(--gold-bright); }
.tg-btn-gold:disabled{ opacity:.35; }
@media (max-width:480px){ .tg-fs-label{ display:none; } .tg-btn{ padding:10px 12px; } }
@media (forced-colors: active){
  .tg-btn, .tg-btn-gold{ border:2px solid ButtonText; forced-color-adjust:none; background:ButtonFace; color:ButtonText; }
}

/* board frame */
.tg-board-frame{ display:flex; align-items:stretch; gap:10px; direction:ltr; }
.tg-board{
  flex:1; display:flex; flex-direction:column; gap:10px;
  background:
    repeating-linear-gradient(98deg, rgba(0,0,0,.14) 0 3px, transparent 3px 22px),
    repeating-linear-gradient(98deg, rgba(255,205,120,.03) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, #2E1B10, #3B2416 45%, #2A1810 100%);
  border:10px solid #2A160D;
  outline:2px solid rgba(184,134,46,.55);
  outline-offset:-13px;
  border-radius:6px;
  padding:14px;
  box-shadow:
    inset 0 0 0 1px rgba(184,134,46,.2),
    inset 0 2px 14px rgba(0,0,0,.55),
    0 18px 40px rgba(0,0,0,.5);
}
.tg-row{ display:grid; grid-template-columns:repeat(6,1fr) 0.5fr repeat(6,1fr); gap:0; height:196px; }

.tg-point{
  position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  padding:2px 0;
}
.tg-point-shape{
  position:absolute; inset:0; pointer-events:none;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
  transition:filter .12s ease, opacity .12s ease;
}
.tg-point-top .tg-point-shape{ clip-path:polygon(8% 0, 92% 0, 50% 92%); top:0; }
.tg-point-bot .tg-point-shape{ clip-path:polygon(8% 100%, 92% 100%, 50% 8%); bottom:0; }
.tg-shade-a{ background:linear-gradient(165deg,#C1526C 0%,#A8455E 35%,#7A2A3E 100%); }
.tg-point-top .tg-shade-a, .tg-point-bot .tg-shade-a{ background:linear-gradient(165deg,#C1526C 0%,#A8455E 35%,#7A2A3E 100%); }
.tg-shade-b{ background:linear-gradient(165deg,#EAC873 0%,#D8B24E 35%,#A9822A 100%); }
.tg-point:hover .tg-point-shape{ filter:brightness(1.18); }
.tg-selected .tg-point-shape{ filter:brightness(1.3) drop-shadow(0 0 6px rgba(229,193,88,.7)); }
.tg-target .tg-point-shape{ filter:brightness(1.22); }
.tg-target::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%;
  background:rgba(229,193,88,.85); transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(229,193,88,.8);
}
.tg-point-num{
  position:relative; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:.58rem;
  color:rgba(239,230,211,.55);
}
.tg-point-top .tg-point-num{ order:0; margin-top:2px; }
.tg-point-bot .tg-point-num{ order:2; margin-bottom:2px; }
.tg-checkers{
  position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center;
  gap:2px; width:100%;
}
.tg-point-top .tg-checkers{ flex-direction:column; order:1; padding-top:6px; }
.tg-point-bot .tg-checkers{ flex-direction:column-reverse; order:1; padding-bottom:6px; }

.tg-checker{
  width:27px; height:27px; border-radius:50%; flex-shrink:0; margin:-8px 0; position:relative;
  box-shadow:0 3px 5px rgba(0,0,0,.55), inset 0 -3px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35);
}
/* The rim does real work: a cream checker sitting on the ochre points is only
   2.6:1 against them, which is hard to read on a phone or in sunlight. The
   darker ring supplies the edge the fill can't. */
.tg-checker.tg-w{ background:radial-gradient(circle at 33% 28%, #fffdf6, #EFE6D3 55%, #c9bb96 100%); border:2px solid rgba(20,13,8,.62); }
.tg-checker.tg-b{ background:radial-gradient(circle at 33% 28%, #4a3c2e, #241a12 55%, #0d0805 100%); border:2px solid rgba(239,230,211,.32); }
.tg-more{
  position:relative; z-index:3; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--wood-deep);
  background:var(--gold-bright); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  margin-top:2px; font-weight:700;
}
.tg-pin-chip{
  width:14px; height:14px; border-radius:50%; margin:1px 0; opacity:.85;
  box-shadow:0 0 0 2px var(--gold-bright), 0 2px 4px rgba(0,0,0,.5);
}
.tg-pin-chip.tg-w{ background:#EFE6D3; }
.tg-pin-chip.tg-b{ background:#1B120C; border:1px solid rgba(255,255,255,.3); }

.tg-bar{
  position:relative;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 3px, transparent 3px 10px),
    linear-gradient(180deg,#4A3018,#2A160D);
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(184,134,46,.3);
}
.tg-bar-inner{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.tg-bar-chip{ margin:0; width:21px; height:21px; }

/* off trays */
.tg-off{ width:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.tg-off-label{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-align:center; color:var(--cream-faint); text-transform:uppercase; letter-spacing:.06em; }
.tg-off-slot{
  width:60px; height:60px; border:1px dashed var(--wood-line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.tg-off-slot.tg-target{ box-shadow:inset 0 0 0 2px var(--gold-bright); border-color:var(--gold-bright); }
.tg-off-count{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:var(--cream); }

/* dice */
.tg-dice-row{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.tg-dice{ display:flex; gap:10px; min-height:44px; align-items:center; }
.tg-die{
  width:42px; height:42px; border-radius:9px; background:var(--cream);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px; padding:6px; box-sizing:border-box;
  box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.18);
}
.tg-die span{ background:var(--wood-deep); border-radius:50%; align-self:center; justify-self:center;
  width:7px; height:7px; }
.tg-die-used{ opacity:.3; background:var(--cream-faint); }
.tg-opening{ display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--cream-dim);
  font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }

@media (max-width:640px){
  .tg-row{ height:132px; }
  .tg-checker{ width:19px; height:19px; margin:-5px 0; }
  .tg-bar-chip{ width:15px; height:15px; }
  .tg-pin-chip{ width:10px; height:10px; }
  .tg-off{ width:52px; }
  .tg-off-slot{ width:44px; height:44px; }
  .tg-setup-row label{ min-width:100%; }
  .tg-board-frame{ gap:4px; }
  .tg-board{ padding:8px; border-width:6px; }
}


/* ===================== added in v3 ===================== */

/* setup extras */
.tg-setup-label{ min-width:140px; color:var(--cream-dim); font-size:.92rem; }
.tg-setup #tg-match{
  background:var(--wood-deep); color:var(--cream); border:1px solid var(--wood-line);
  padding:10px 14px; border-radius:var(--radius); font-family:inherit; font-size:.95rem; min-width:90px;
}
.tg-resume{
  border:1px solid var(--gold); border-radius:var(--radius); padding:16px 18px; margin-bottom:22px;
  background:rgba(184,134,46,.1);
}
.tg-resume p{ margin:0 0 12px; color:var(--cream); font-size:.92rem; }
.tg-resume-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* score / stake chips above the board */
.tg-scorebar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tg-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--wood-line); border-radius:999px; padding:5px 12px; color:var(--cream-dim);
  background:rgba(0,0,0,.25);
}
.tg-chip-cube{ border-color:var(--gold); color:var(--gold-bright); }
.tg-chip-note{ text-transform:none; letter-spacing:normal; font-family:inherit; color:var(--cream-faint); }

/* dice row: pip counts on the left, buttons on the right */
.tg-dice-row{ flex-wrap:wrap; direction:ltr; }
.tg-roll-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.tg-pip-box{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--cream-dim); }
.tg-pip-label{ text-transform:uppercase; letter-spacing:.06em; color:var(--cream-faint); }
.tg-pip-val{ display:inline-flex; align-items:center; gap:5px; }
.tg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.tg-dot.tg-w{ background:#EFE6D3; }
.tg-dot.tg-b{ background:#1B120C; box-shadow:0 0 0 1px rgba(255,255,255,.35); }

/* checkers still waiting to enter (Acey-Deucey) */
.tg-entry{
  margin-top:6px; border:1px dashed var(--gold); border-radius:var(--radius); padding:6px 4px;
  display:flex; flex-direction:column; align-items:center; cursor:pointer; width:60px; text-align:center;
}
.tg-entry.tg-selected{ box-shadow:inset 0 0 0 2px var(--gold-bright); }
.tg-entry-count{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:700; color:var(--cream); }
.tg-entry-label{ font-family:'IBM Plex Mono',monospace; font-size:.5rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cream-faint); }

/* a point you may pick up from this roll */
.tg-source .tg-point-shape{ filter:brightness(1.12); }
.tg-source::before{
  content:""; position:absolute; left:50%; width:6px; height:6px; border-radius:50%;
  background:rgba(239,230,211,.55); transform:translateX(-50%); z-index:3;
}
.tg-point-top.tg-source::before{ bottom:6px; }
.tg-point-bot.tg-source::before{ top:6px; }
.tg-bar.tg-source{ box-shadow:inset 0 0 0 2px var(--gold-bright); }
.tg-bar.tg-selected{ box-shadow:inset 0 0 0 2px var(--cream); }

.tg-point:focus-visible, .tg-bar:focus-visible, .tg-off-slot:focus-visible, .tg-entry:focus-visible{
  outline:2px solid var(--gold-bright); outline-offset:1px;
}

/* modal overlay for cube offers, the Acey-Deucey pick and results */
.tg-shell{ position:relative; }
.tg-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,8,5,.82); border-radius:var(--radius); padding:20px; z-index:20;
}
.tg-overlay-card{
  background:var(--wood-panel); border:1px solid var(--gold); border-radius:var(--radius);
  padding:26px 28px; max-width:460px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.tg-overlay-card p{
  margin:0 0 18px; color:var(--cream); font-family:'Fraunces',serif; font-size:1.1rem; line-height:1.45;
}
.tg-overlay-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tg-overlay-dice .tg-overlay-actions button{ min-width:64px; font-family:'IBM Plex Mono',monospace; }

@media (max-width:640px){
  .tg-dice-row{ gap:10px; justify-content:space-between; }
  .tg-pip-box{ width:100%; justify-content:center; order:-1; }
  .tg-entry{ width:44px; }
  .tg-die{ width:34px; height:34px; padding:5px; }
  .tg-die span{ width:6px; height:6px; }
  .tg-overlay-card{ padding:20px 18px; }
  .tg-overlay-card p{ font-size:.98rem; }
}
@media (prefers-reduced-motion: reduce){
  .tg-btn, .tg-point-shape{ transition:none; }
}