/* backgammon — استایل بازی، محدودشده به #tk-stage
   تولید خودکار توسط tools/build-kit.mjs — دستی ویرایش نکنید. */
#tk-stage{font-family:var(--hb-font)}



#tk-stage{
  --wood-900: #150d06;
  --wood-800: #1e1309;
  --wood-700: #2a1a0e;
  --wood-600: #3a2413;
  --felt: #10352f;
  --felt-2: #0c2a25;

  --ivory: #f6eeda;
  --ivory-dim: #d9ccb0;
  --muted: #a08f74;

  --brass: #c9a24a;
  --brass-lit: #eccc76;
  --brass-deep: #8a6d27;
  --teal: #3fbfae;
  --teal-deep: #1d7f73;
  --red: #d1614f;
  --green: #52b988;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 2px 10px rgba(0, 0, 0, 0.45);
  --sh-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 1px rgba(201, 162, 74, 0.35);

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.1rem;
}


#tk-stage,#tk-stage *{ box-sizing: border-box; }


#tk-stage{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }


#tk-stage{
  margin: 0;
  font-family: var(--hb-font), "Tahoma", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ivory);
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(201, 162, 74, 0.13), transparent 68%),
    linear-gradient(180deg, #2a1a0e 0%, #1a1108 55%, var(--wood-900) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}


#tk-stage h1, #tk-stage h2, #tk-stage h3, #tk-stage h4{ line-height: 1.5; font-weight: 800; margin: 0 0 0.6em; color: var(--ivory); }

#tk-stage h1{ font-size: clamp(1.75rem, 4.6vw, var(--fs-2xl)); letter-spacing: -0.01em; }

#tk-stage h2{ font-size: clamp(1.35rem, 3.4vw, var(--fs-xl)); }

#tk-stage h3{ font-size: var(--fs-lg); }

#tk-stage p{ margin: 0 0 1.05em; color: var(--ivory-dim); }

#tk-stage ul, #tk-stage ol{ color: var(--ivory-dim); padding-inline-start: 1.35em; margin: 0 0 1.1em; }

#tk-stage li{ margin-bottom: 0.45em; }

#tk-stage img{ max-width: 100%; height: auto; display: block; }

#tk-stage a{ color: var(--brass-lit); text-decoration: none; }

#tk-stage a:hover{ color: var(--ivory); }

#tk-stage strong{ color: var(--ivory); }

#tk-stage :focus-visible{ outline: 3px solid var(--brass-lit); outline-offset: 2px; border-radius: 6px; }

#tk-stage table{ border-collapse: collapse; width: 100%; }


#tk-stage .container{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.05rem; }

#tk-stage .section{ padding-block: 2.6rem; }

#tk-stage .section-tight{ padding-block: 1.6rem; }

#tk-stage .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#tk-stage .center{ text-align: center; }

#tk-stage .muted{ color: var(--muted); }

#tk-stage .small{ font-size: var(--fs-sm); }

#tk-stage .stack > * + *{ margin-top: 1rem; }


#tk-stage .skip-link{ position: absolute; inset-inline-start: 1rem; top: -60px; background: var(--brass-lit); color: #241b06; padding: 0.6em 1em; border-radius: 8px; z-index: 100; }

#tk-stage .skip-link:focus{ top: 0.6rem; }



#tk-stage .hdr{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(21, 13, 6, 0.97), rgba(21, 13, 6, 0.86));
  backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(201, 162, 74, 0.2);
}

#tk-stage .hdr-in{ display: flex; align-items: center; gap: 0.8rem; min-height: 62px; }

#tk-stage .logo{ display: flex; align-items: center; gap: 0.55rem; font-weight: 900; font-size: 1.05rem; color: var(--ivory); }

#tk-stage .logo img{ width: 34px; height: 34px; }

#tk-stage .logo b{ color: var(--brass-lit); font-weight: 900; }

#tk-stage .nav{ display: none; margin-inline-start: auto; gap: 0.1rem; }

#tk-stage .nav a{ color: var(--ivory-dim); font-size: var(--fs-sm); font-weight: 600; padding: 0.5em 0.7em; border-radius: 9px; }

#tk-stage .nav a:hover, #tk-stage .nav a[aria-current="page"]{ background: rgba(255,255,255,0.07); color: var(--ivory); }

#tk-stage .hdr-cta{ display: none; }

@media (min-width: 1000px){
 #tk-stage .nav{ display: flex; }
 #tk-stage .hdr-cta{ display: inline-flex; }
 #tk-stage .nav-btn{ display: none; }
 
}

#tk-stage .nav-btn{
  margin-inline-start: auto; width: 44px; height: 44px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(201,162,74,0.35); color: var(--brass-lit);
  font-size: 1.25rem; cursor: pointer;
}

#tk-stage .mnav{ display: none; flex-direction: column; padding: 0.5rem 1.05rem 1rem; border-top: 1px solid rgba(201,162,74,0.15); }

#tk-stage .mnav.open{ display: flex; }

#tk-stage .mnav a{ color: var(--ivory-dim); padding: 0.62em 0.3em; border-radius: 8px; font-size: 0.95rem; }

#tk-stage .mnav a:hover{ background: rgba(255,255,255,0.06); }



#tk-stage .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0.65em 1.35em; border-radius: var(--r-md);
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; transition: filter 0.15s var(--ease), background 0.15s var(--ease), transform 0.12s var(--ease);
}

#tk-stage .btn:active{ transform: translateY(1px); }

#tk-stage .btn-primary{ background: linear-gradient(180deg, var(--brass-lit), var(--brass-deep)); color: #241b06; box-shadow: var(--ring), 0 8px 20px rgba(0,0,0,0.4); }

#tk-stage .btn-primary:hover{ filter: brightness(1.07); color: #241b06; }

#tk-stage .btn-ghost{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: var(--ivory-dim); }

#tk-stage .btn-ghost:hover{ background: rgba(255,255,255,0.1); color: var(--ivory); }

#tk-stage .btn-teal{ background: linear-gradient(180deg, var(--teal), var(--teal-deep)); color: #05211e; }

#tk-stage .btn-teal:hover{ filter: brightness(1.07); color: #05211e; }

#tk-stage .btn-lg{ min-height: 54px; font-size: var(--fs-lg); padding-inline: 1.9rem; }

#tk-stage .btn-sm{ min-height: 38px; font-size: var(--fs-sm); padding: 0.35em 0.85em; }

#tk-stage .btn-block{ width: 100%; }

#tk-stage .btn-row{ display: flex; flex-wrap: wrap; gap: 0.7rem; }



#tk-stage .panel{
  background: linear-gradient(160deg, #24170d, #1a1108);
  border: 1px solid rgba(201, 162, 74, 0.17);
  border-radius: var(--r-lg);
  padding: 1.3rem;
  box-shadow: var(--sh-1);
}

#tk-stage .panel-teal{ border-color: rgba(63, 191, 174, 0.3); background: linear-gradient(160deg, rgba(16,53,47,0.75), rgba(12,42,37,0.5)); }

#tk-stage .grid{ display: grid; gap: 1rem; }

@media (min-width: 620px){
 #tk-stage .g2{ grid-template-columns: repeat(2, 1fr); }
 
}

@media (min-width: 880px){
 #tk-stage .g3{ grid-template-columns: repeat(3, 1fr); }
 #tk-stage .g4{ grid-template-columns: repeat(4, 1fr); }
 
}


#tk-stage .eyebrow{
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em;
  color: var(--brass); background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.28);
  padding: 0.2em 0.8em; border-radius: 999px; margin-bottom: 0.7rem;
}

#tk-stage .tag{ display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs-xs); font-weight: 700; padding: 0.2em 0.65em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.3); color: var(--ivory-dim); }

#tk-stage .tag-pending{ color: var(--muted); border-style: dashed; }

#tk-stage .tag-good{ color: var(--green); border-color: rgba(82,185,136,0.4); }



#tk-stage .hero{ padding-block: 2.2rem 1.4rem; position: relative; overflow: hidden; }

#tk-stage .hero-grid{ display: grid; gap: 1.6rem; align-items: center; }

@media (min-width: 900px){
 #tk-stage .hero-grid{ grid-template-columns: 1.05fr 0.95fr; }
 #tk-stage .hero{ padding-block: 3.2rem 2rem; }
 
}

#tk-stage .hero h1{ margin-bottom: 0.5rem; }

#tk-stage .hero .lead{ font-size: var(--fs-lg); color: var(--ivory); }

#tk-stage .hero-art{ border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(201,162,74,0.3); box-shadow: var(--sh-2); }

#tk-stage .hero-stats{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

#tk-stage .hero-stats span{ font-size: var(--fs-xs); color: var(--ivory-dim); background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,74,0.2); border-radius: 999px; padding: 0.25em 0.8em; }



#tk-stage .crumb{ font-size: var(--fs-sm); color: var(--muted); padding-block: 0.9rem 0.2rem; }

#tk-stage .crumb ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0; margin: 0; }

#tk-stage .crumb li::after{ content: "‹"; margin-inline-start: 0.35em; color: rgba(255,255,255,0.25); }

#tk-stage .crumb li:last-child::after{ content: ""; }

#tk-stage .crumb a{ color: var(--ivory-dim); }



#tk-stage .brand-card{
  display: flex; flex-direction: column; gap: 0.75rem;
  background: linear-gradient(165deg, #251810, #190f08);
  border: 1px solid rgba(201,162,74,0.18); border-radius: var(--r-lg);
  padding: 1.05rem; position: relative;
}

#tk-stage .brand-card .rankpip{
  position: absolute; inset-block-start: -12px; inset-inline-start: 16px;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f2dfa9, #a8801f 72%); color: #241b06;
  font-weight: 900; font-size: 0.85rem; border: 2px solid #150d06;
}

#tk-stage .brand-head{ display: flex; align-items: center; gap: 0.7rem; }

#tk-stage .brand-logo{
  width: 62px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: #fff;
  display: grid; place-items: center; padding: 4px; overflow: hidden;
}

#tk-stage .brand-logo img{ max-height: 36px; width: auto; object-fit: contain; }

#tk-stage .brand-name{ font-weight: 800; font-size: 1.02rem; }

#tk-stage .brand-name small{ display: block; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); }

#tk-stage .score-big{ margin-inline-start: auto; text-align: center; }

#tk-stage .score-big b{ display: block; font-size: 1.4rem; color: var(--brass-lit); line-height: 1.2; }

#tk-stage .score-big span{ font-size: var(--fs-xs); color: var(--muted); }

#tk-stage .bars{ display: grid; gap: 0.4rem; }

#tk-stage .bar-row{ display: grid; grid-template-columns: 6.6rem 1fr 2.1rem; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); }

#tk-stage .bar-track{ height: 7px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }

#tk-stage .bar-fill{ height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brass-deep), var(--brass-lit)); }

#tk-stage .bar-fill.teal{ background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }

#tk-stage .bar-row b{ text-align: end; color: var(--ivory); }

#tk-stage .bar-row .na{ color: var(--muted); font-weight: 600; }

#tk-stage .stars{ color: var(--brass-lit); letter-spacing: 0.1em; font-size: 0.95rem; }

#tk-stage .stars .off{ color: rgba(255,255,255,0.18); }



#tk-stage .table-wrap{ overflow-x: auto; border-radius: var(--r-lg); border: 1px solid rgba(201,162,74,0.18); }

#tk-stage table.data{ min-width: 680px; font-size: var(--fs-sm); background: rgba(0,0,0,0.2); }

#tk-stage table.data th, #tk-stage table.data td{ padding: 0.7rem 0.8rem; text-align: start; border-bottom: 1px solid rgba(255,255,255,0.07); }

#tk-stage table.data thead th{ background: rgba(201,162,74,0.1); color: var(--brass-lit); font-size: var(--fs-xs); white-space: nowrap; }

#tk-stage table.data tbody tr:last-child td{ border-bottom: 0; }

#tk-stage table.data td b{ color: var(--ivory); }



#tk-stage .prose{ max-width: 74ch; }

#tk-stage .prose h2{ margin-top: 2rem; padding-top: 0.4rem; }

#tk-stage .prose h3{ margin-top: 1.5rem; }

#tk-stage .prose a{ text-decoration: underline; text-underline-offset: 3px; }

#tk-stage .prose figure{ margin: 1.4rem 0; }

#tk-stage .prose figcaption{ font-size: var(--fs-xs); color: var(--muted); margin-top: 0.4rem; }

#tk-stage .callout{ border-inline-start: 3px solid var(--brass); background: rgba(201,162,74,0.08); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 0.9rem 1.1rem; margin: 1.3rem 0; }

#tk-stage .callout.teal{ border-color: var(--teal); background: rgba(63,191,174,0.09); }

#tk-stage .callout p:last-child{ margin-bottom: 0; }



#tk-stage .faq details{ border: 1px solid rgba(201,162,74,0.18); border-radius: var(--r-md); padding: 0.85rem 1rem; background: rgba(0,0,0,0.2); margin-bottom: 0.6rem; }

#tk-stage .faq summary{ cursor: pointer; font-weight: 700; color: var(--ivory); list-style: none; }

#tk-stage .faq summary::-webkit-details-marker{ display: none; }

#tk-stage .faq summary::after{ content: "+"; float: inline-start; color: var(--brass); margin-inline-end: 0.5rem; font-weight: 900; }

#tk-stage .faq details[open] summary::after{ content: "−"; }

#tk-stage .faq details p{ margin: 0.7rem 0 0; }



#tk-stage .review{ border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-md); background: rgba(0,0,0,0.22); padding: 0.9rem 1rem; }

#tk-stage .review-head{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; flex-wrap: wrap; }

#tk-stage .review-head b{ font-size: 0.95rem; }

#tk-stage .review-head time{ font-size: var(--fs-xs); color: var(--muted); margin-inline-start: auto; }

#tk-stage .review p{ margin: 0; font-size: var(--fs-sm); }

#tk-stage .review.pending{ border-style: dashed; border-color: rgba(201,162,74,0.4); }

#tk-stage .pending-flag{ font-size: var(--fs-xs); color: var(--brass); }

#tk-stage .form-grid{ display: grid; gap: 0.8rem; }

@media (min-width: 620px){
 #tk-stage .form-grid .two{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
 
}

#tk-stage label{ display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.3rem; color: var(--ivory-dim); }

#tk-stage input, #tk-stage select, #tk-stage textarea{
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--ivory);
  background: rgba(0,0,0,0.35); border: 1px solid rgba(201,162,74,0.25);
  border-radius: var(--r-sm); padding: 0.6rem 0.75rem; min-height: 44px;
}

#tk-stage textarea{ min-height: 110px; resize: vertical; }

#tk-stage .form-note{ font-size: var(--fs-xs); color: var(--muted); }

#tk-stage .form-ok{ color: var(--green); font-size: var(--fs-sm); font-weight: 700; }



#tk-stage .game-wrap{ margin-block: 1.2rem; }

#tk-stage #game-root{ min-height: 480px; }

#tk-stage #game-root.game-loading{ display: grid; place-items: center; border: 1px dashed rgba(201,162,74,0.3); border-radius: var(--r-lg); color: var(--muted); }

#tk-stage .rulechips{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }

#tk-stage .rulechips a{ font-size: var(--fs-sm); font-weight: 700; padding: 0.35em 0.9em; border-radius: 999px; border: 1px solid rgba(201,162,74,0.3); color: var(--ivory-dim); background: rgba(0,0,0,0.25); }

#tk-stage .rulechips a:hover{ border-color: var(--brass); color: var(--ivory); }



#tk-stage .mini-board{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: #2a1a0e; padding: 6px; border-radius: 10px; border: 1px solid rgba(201,162,74,0.25); }

#tk-stage .mini-board i{ display: block; aspect-ratio: 1 / 2.4; background: linear-gradient(180deg, #e8d7b0, #c9b184); border-radius: 2px; }

#tk-stage .mini-board i:nth-child(even){ background: linear-gradient(180deg, #52301a, #3a2110); }

#tk-stage .mini-board i[data-h]::after, #tk-stage .mini-board i[data-c]::after{ content: ""; display: block; width: 72%; margin: 6% auto; aspect-ratio: 1; border-radius: 50%; }

#tk-stage .mini-board i[data-h]::after{ background: radial-gradient(circle at 34% 30%, #fff, #cdbf9e 76%); }

#tk-stage .mini-board i[data-c]::after{ background: radial-gradient(circle at 34% 30%, #a9702f, #4c2a10 78%); }



#tk-stage .ftr{ margin-top: 3rem; border-top: 1px solid rgba(201,162,74,0.18); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.42)); padding-block: 2.2rem 1.3rem; }

#tk-stage .ftr-grid{ display: grid; gap: 1.4rem; }

@media (min-width: 760px){
 #tk-stage .ftr-grid{ grid-template-columns: 1.5fr 1fr 1fr 1fr; }
 
}

#tk-stage .ftr h4{ font-size: var(--fs-sm); color: var(--brass); margin-bottom: 0.7rem; }

#tk-stage .ftr a{ display: block; color: var(--ivory-dim); font-size: var(--fs-sm); padding: 0.18em 0; }

#tk-stage .ftr-bottom{ margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--fs-xs); color: var(--muted); }


@media (prefers-reduced-motion: reduce){

  #tk-stage,#tk-stage *{ animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; }

  #tk-stage{ scroll-behavior: auto; }


}




#tk-stage{
  --c-ivory: var(--ivory);
  --c-ivory-dim: var(--ivory-dim);
  --c-muted: var(--muted);
  --c-brass: var(--brass);
  --c-brass-bright: var(--brass-lit);
  --c-brass-deep: var(--brass-deep);
  --c-turquoise: var(--teal-deep);
  --c-turquoise-bright: var(--teal);
  --c-win: var(--green);
  --c-loss: var(--red);
  --c-panel: #1a1108;
  --c-panel-2: #24170d;

  --c-point-ivory: #e9d9b4;
  --c-point-ivory-2: #d5bd8c;
  --c-point-walnut: #4d2e16;
  --c-point-walnut-2: #38200f;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-2);
  --shadow-brass: var(--ring), 0 6px 18px rgba(0, 0, 0, 0.45);
  --fs-base: 1rem;
}



#tk-stage .btn-turquoise{ background: linear-gradient(180deg, var(--teal), var(--teal-deep)); color: #05211e; }

#tk-stage .btn-turquoise:hover:not(:disabled){ filter: brightness(1.07); color: #05211e; }

#tk-stage .btn-secondary{ background: transparent; border-color: rgba(201, 162, 74, 0.5); color: var(--brass-lit); }

#tk-stage .btn-danger{ background: #7f2e26; color: var(--ivory); }

#tk-stage .btn:disabled{ opacity: 0.45; cursor: not-allowed; }


#tk-stage .badge{ display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs-xs); font-weight: 700; padding: 0.22em 0.7em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); }

#tk-stage .badge-mode{ color: var(--brass-lit); border-color: rgba(201,162,74,0.45); }

#tk-stage .badge-tutorial{ color: var(--teal); border-color: rgba(63,191,174,0.45); }


#tk-stage .notice{ border-radius: var(--r-md); padding: 0.8rem 1rem; font-size: var(--fs-sm); border: 1px solid; display: flex; gap: 0.6rem; }

#tk-stage .notice-warn{ background: rgba(217,164,65,0.1); border-color: rgba(217,164,65,0.38); color: #f0dcae; }

#tk-stage .notice-info{ background: rgba(63,191,174,0.1); border-color: rgba(63,191,174,0.35); color: #bdeee6; }


#tk-stage .flex{ display: flex; }

#tk-stage .wrap{ flex-wrap: wrap; }

#tk-stage .items-center{ align-items: center; }

#tk-stage .justify-between{ justify-content: space-between; }

#tk-stage .justify-center{ justify-content: center; }

#tk-stage .gap-sm{ gap: 0.5rem; }

#tk-stage .gap-md{ gap: 1rem; }

#tk-stage .mt-1{ margin-top: 0.5rem; }
 #tk-stage .mt-2{ margin-top: 1rem; }
 #tk-stage .mt-3{ margin-top: 1.5rem; }
 #tk-stage .mt-4{ margin-top: 2rem; }

#tk-stage .text-center{ text-align: center; }

#tk-stage .hidden{ display: none !important; }


#tk-stage .modal-overlay{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(10,6,3,0.82); backdrop-filter: blur(4px); }

#tk-stage .modal-box{ width: 100%; background: linear-gradient(160deg, #24170d, #1a1108); border: 1px solid rgba(201,162,74,0.4); border-radius: var(--r-xl); padding: 1.6rem; box-shadow: var(--sh-2); max-height: 92vh; overflow-y: auto; }


#tk-stage .stat-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

@media (min-width: 520px){
 #tk-stage .stat-grid{ grid-template-columns: repeat(3, 1fr); }
 
}

#tk-stage .stat-cell{ background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 0.6rem 0.7rem; text-align: center; }

#tk-stage .stat-cell .label{ font-size: var(--fs-xs); color: var(--muted); }

#tk-stage .stat-cell .value{ font-size: var(--fs-lg); font-weight: 800; color: var(--ivory); }

#tk-stage .stat-cell.win .value{ color: var(--green); }

#tk-stage .stat-cell.loss .value{ color: var(--red); }


#tk-stage .result-title{ text-align: center; font-size: var(--fs-2xl); margin-bottom: 0.3rem; }

#tk-stage .result-title.win{ color: var(--green); }

#tk-stage .result-title.loss{ color: var(--red); }

#tk-stage .result-badge{ display: inline-block; margin: 0 auto 0.6rem; }



#tk-stage .bonus-pop{ position: relative; text-align: center; }

#tk-stage .bonus-close{ position: absolute; top: -0.5rem; left: -0.3rem; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; }

#tk-stage .bonus-title{ margin: 0.1rem 0 0; font-size: var(--fs-xl); line-height: 1.7; }

#tk-stage .bonus-sub{ margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--ivory-dim); }

#tk-stage .bonus-ctas{ display: grid; gap: 0.6rem; margin-top: 1.2rem; }

#tk-stage .bonus-ctas .btn{ text-decoration: none; }

#tk-stage .bonus-disclosure{ margin: 0.9rem 0 0; font-size: var(--fs-xs); color: var(--muted); }

#tk-stage .bonus-inline{ margin-top: 1.1rem; padding: 1rem; text-align: center; border: 1px solid rgba(201,162,74,0.32); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(201,162,74,0.1), rgba(201,162,74,0.03)); }

#tk-stage .bonus-inline-title{ margin: 0; font-size: var(--fs-lg); font-weight: 700; }



#tk-stage .bg-board{ background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px),
  linear-gradient(160deg, #14453d, #0e332d) !important;
}

#tk-stage .bg-shell{ background: linear-gradient(160deg, #2a1a0e, #150d06); }






#tk-stage .bg-app{ --stage-max: 980px; }


#tk-stage .bg-shell{
  background: linear-gradient(160deg, #2a1a0e, #17100a);
  border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: var(--r-xl);
  padding: 1rem;
  box-shadow: var(--shadow-2);
}

@media (min-width: 700px){
 #tk-stage .bg-shell{ padding: 1.4rem; }
 
}


#tk-stage .bg-topbar{
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 0.9rem;
}

#tk-stage .bg-chip{
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: 999px; padding: 0.3rem 0.8rem; font-size: var(--fs-sm); font-weight: 700;
}

#tk-stage .bg-chip .k{ color: var(--c-muted); font-weight: 600; font-size: var(--fs-xs); }

#tk-stage .bg-chip .v{ color: var(--c-brass-bright); }



#tk-stage .bg-playerbar{
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22);
  font-size: var(--fs-sm);
}

#tk-stage .bg-playerbar.active{ border-color: var(--c-brass); box-shadow: 0 0 0 1px rgba(201,162,74,0.4) inset; }

#tk-stage .bg-playerbar .who{ display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }

#tk-stage .bg-dot{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.3); }

#tk-stage .bg-dot.human{ background: radial-gradient(circle at 35% 30%, #ffffff, #cdbf9e 75%); }

#tk-stage .bg-dot.computer{ background: radial-gradient(circle at 35% 30%, #a9702f, #4c2a10 78%); }



#tk-stage .bg-stage{ display: flex; gap: 0.5%; width: 100%; max-width: var(--stage-max); margin-inline: auto; direction: ltr; }


#tk-stage .bg-board{
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  aspect-ratio: 11 / 9;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #6b4326, #4a2c15);
  border: clamp(6px, 1.6vw, 14px) solid #35200f;
  border-radius: 10px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.55), var(--shadow-1);
  overflow: hidden;
  position: relative;
}


#tk-stage .bg-row{ flex: 1 1 50%; display: flex; }

#tk-stage .bg-quad{ flex: 1 1 auto; display: flex; }

#tk-stage .bg-point{ flex: 1 1 0; position: relative; background: transparent; border: 0; padding: 0; cursor: default;
  display: flex; flex-direction: column; align-items: center; min-width: 0; }

#tk-stage .bg-point .tri{ position: absolute; inset: 0; z-index: 0; }

#tk-stage .bg-row.top .bg-point .tri{ clip-path: polygon(0 0, 100% 0, 50% 92%); }

#tk-stage .bg-row.bottom .bg-point .tri{ clip-path: polygon(50% 8%, 0 100%, 100% 100%); }

#tk-stage .bg-point.ivory .tri{ background: linear-gradient(180deg, var(--c-point-ivory), var(--c-point-ivory-2)); }

#tk-stage .bg-point.walnut .tri{ background: linear-gradient(180deg, var(--c-point-walnut), var(--c-point-walnut-2)); }

#tk-stage .bg-row.bottom .bg-point.ivory .tri{ background: linear-gradient(0deg, var(--c-point-ivory), var(--c-point-ivory-2)); }

#tk-stage .bg-row.bottom .bg-point.walnut .tri{ background: linear-gradient(0deg, var(--c-point-walnut), var(--c-point-walnut-2)); }


#tk-stage .bg-point .pnum{
  position: absolute; z-index: 3; font-size: clamp(7px, 1.3vw, 11px);
  color: rgba(255,255,255,0.55); font-weight: 700; pointer-events: none;
}

#tk-stage .bg-row.top .bg-point .pnum{ top: 1px; }

#tk-stage .bg-row.bottom .bg-point .pnum{ bottom: 1px; }



#tk-stage .bg-checkers{ position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 2%; }

#tk-stage .bg-row.bottom .bg-checkers{ flex-direction: column-reverse; padding-top: 0; padding-bottom: 2%; margin-top: auto; }



#tk-stage .bg-point.selectable{ cursor: pointer; }

#tk-stage .bg-point.target{ cursor: pointer; }

#tk-stage .bg-point.target::after{
  content: ""; position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(70, 208, 191, 0.35);
  border: 2px solid var(--c-turquoise-bright); box-shadow: 0 0 12px rgba(70,208,191,0.6);
  animation: pulse 1.1s var(--ease) infinite;
}

#tk-stage .bg-point.selectable::before{
  content: ""; position: absolute; inset: 6% 12%; z-index: 1; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(230, 199, 102, 0.6) inset;
}

@keyframes pulse{ 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }



#tk-stage .bg-checker{
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  margin-block: -6%; /* overlap when stacked */
  background-size: cover; background-position: center;
  box-shadow: 0 2px 3px rgba(0,0,0,0.5); position: relative;
}

#tk-stage .bg-checker:first-child{ margin-block-start: 0; }

#tk-stage .bg-checker.human{ background-image: url('/games/backgammon/assets/checker-white.webp'); border: 1px solid rgba(120,100,60,0.4); }

#tk-stage .bg-checker.computer{ background-image: url('/games/backgammon/assets/checker-brown.webp'); }

#tk-stage .bg-checker.top{ box-shadow: 0 2px 5px rgba(0,0,0,0.55); }

#tk-stage .bg-count{
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.72); color: #fff; font-size: clamp(9px,1.6vw,13px);
  font-weight: 800; border-radius: 999px; padding: 0 5px; min-width: 18px; text-align: center;
  border: 1px solid rgba(255,255,255,0.25);
}

#tk-stage .bg-row.top .bg-count{ top: 40%; }

#tk-stage .bg-row.bottom .bg-count{ bottom: 40%; }



#tk-stage .bg-bar{
  flex: 0 0 7%; background: linear-gradient(180deg, #2a1a0e, #1c1108);
  border-inline: clamp(3px,0.8vw,7px) solid #35200f;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative;
}

#tk-stage .bg-row.bottom .bg-bar{ justify-content: flex-end; }

#tk-stage .bg-bar .bg-checkers{ padding: 4% 0; }

#tk-stage .bg-bar.bartarget{ cursor: pointer; box-shadow: 0 0 0 2px var(--c-turquoise-bright) inset; }

#tk-stage .bg-bar.barsel{ box-shadow: 0 0 0 2px var(--c-brass-bright) inset; }



#tk-stage .bg-offcol{ flex: 0 0 8.5%; display: flex; flex-direction: column; gap: 0.5%; min-width: 34px; }

#tk-stage .bg-tray{
  flex: 1 1 50%; border: 2px solid #35200f; border-radius: 8px;
  background: linear-gradient(160deg, #23150a, #160d06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px; position: relative; gap: 2px;
}

#tk-stage .bg-tray.target{ cursor: pointer; box-shadow: 0 0 0 2px var(--c-turquoise-bright) inset; }

#tk-stage .bg-tray .off-bar{ width: 80%; height: 7%; min-height: 4px; border-radius: 3px; }

#tk-stage .bg-tray .off-bar.human{ background: linear-gradient(90deg, #f0e6cd, #cdbf9e); }

#tk-stage .bg-tray .off-bar.computer{ background: linear-gradient(90deg, #a9702f, #5c3316); }

#tk-stage .bg-tray .off-label{ font-size: var(--fs-xs); color: var(--c-muted); font-weight: 700; }

#tk-stage .bg-tray .off-num{ font-size: var(--fs-lg); font-weight: 800; color: var(--c-ivory); }



#tk-stage .bg-dicebox{ display: flex; align-items: center; gap: 0.5rem; }

#tk-stage .bg-die{
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(160deg, #f6efdc, #d9caa6);
  box-shadow: var(--shadow-1), inset 0 -3px 6px rgba(0,0,0,0.2);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 6px; gap: 1px; position: relative;
}

#tk-stage .bg-die.rolling{ animation: shake 0.5s var(--ease); }

#tk-stage .bg-die.used{ opacity: 0.4; filter: grayscale(0.6); }

#tk-stage .bg-die.doubles{ box-shadow: 0 0 0 2px var(--c-turquoise-bright), var(--shadow-1); }

#tk-stage .bg-die .pip{ width: 8px; height: 8px; border-radius: 50%; background: #2a1a0e; align-self: center; justify-self: center; }

@keyframes shake{ 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) translateY(-3px); } 75% { transform: rotate(14deg) translateY(2px); } }



#tk-stage .bg-die[data-v="1"] .pip:nth-child(1){ grid-area: 2 / 2; }

#tk-stage .bg-die .pip{ display: none; }

#tk-stage .bg-die[data-v="1"] .p5, #tk-stage .bg-die[data-v="3"] .p5, #tk-stage .bg-die[data-v="5"] .p5{ display: block; grid-area: 2 / 2; }

#tk-stage .bg-die[data-v="2"] .p1, #tk-stage .bg-die[data-v="3"] .p1, #tk-stage .bg-die[data-v="4"] .p1, #tk-stage .bg-die[data-v="5"] .p1, #tk-stage .bg-die[data-v="6"] .p1{ display: block; grid-area: 1 / 1; }

#tk-stage .bg-die[data-v="2"] .p9, #tk-stage .bg-die[data-v="3"] .p9, #tk-stage .bg-die[data-v="4"] .p9, #tk-stage .bg-die[data-v="5"] .p9, #tk-stage .bg-die[data-v="6"] .p9{ display: block; grid-area: 3 / 3; }

#tk-stage .bg-die[data-v="4"] .p3, #tk-stage .bg-die[data-v="5"] .p3, #tk-stage .bg-die[data-v="6"] .p3{ display: block; grid-area: 1 / 3; }

#tk-stage .bg-die[data-v="4"] .p7, #tk-stage .bg-die[data-v="5"] .p7, #tk-stage .bg-die[data-v="6"] .p7{ display: block; grid-area: 3 / 1; }

#tk-stage .bg-die[data-v="6"] .p4{ display: block; grid-area: 2 / 1; }

#tk-stage .bg-die[data-v="6"] .p6{ display: block; grid-area: 2 / 3; }



#tk-stage .bg-controls{ display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 1rem; }

#tk-stage .bg-actionbar{ display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }


#tk-stage .bg-cube{
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, #efe6cf, #cbbb95); color: #2a1a0e; font-weight: 900; font-size: 1.1rem;
  box-shadow: var(--shadow-1); border: 1px solid rgba(0,0,0,0.2);
}



#tk-stage .bg-layout{ display: grid; gap: 1rem; }

@media (min-width: 1000px){
 #tk-stage .bg-layout{ grid-template-columns: 260px 1fr 260px; align-items: start; }
 
}

#tk-stage .bg-panel{ background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 0.8rem; }

#tk-stage .bg-panel h4{ font-size: var(--fs-sm); color: var(--c-brass); margin-bottom: 0.5rem; }

#tk-stage .bg-loglist{ list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--c-ivory-dim); max-height: 220px; overflow-y: auto; }

#tk-stage .bg-loglist li{ padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

#tk-stage .bg-dicehist{ display: flex; flex-wrap: wrap; gap: 0.3rem; }

#tk-stage .bg-dicehist .hd{ font-size: var(--fs-xs); background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,74,0.2); border-radius: 6px; padding: 1px 6px; }


#tk-stage .bg-status{ text-align: center; min-height: 1.5em; color: var(--c-ivory); font-weight: 600; margin: 0.4rem 0; }

#tk-stage .bg-hint{ border-radius: var(--r-md); border: 1px solid rgba(70,208,191,0.4); background: rgba(47,179,163,0.1); padding: 0.8rem 1rem; }

#tk-stage .bg-hint h4{ color: var(--c-turquoise-bright); margin-bottom: 0.3rem; }



#tk-stage .bg-menu{ max-width: 640px; margin-inline: auto; }

#tk-stage .bg-optgrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; }

#tk-stage .bg-opt{
  border: 1px solid rgba(201,162,74,0.3); background: rgba(0,0,0,0.24); color: var(--c-ivory-dim);
  border-radius: var(--r-md); padding: 0.7rem; cursor: pointer; font-family: inherit; font-weight: 700;
  min-height: 48px; transition: all 0.15s var(--ease);
}

#tk-stage .bg-opt:hover{ border-color: var(--c-brass); color: var(--c-ivory); }

#tk-stage .bg-opt.selected{ background: rgba(201,162,74,0.16); border-color: var(--c-brass-bright); color: var(--c-ivory); box-shadow: var(--shadow-brass); }

#tk-stage .bg-mode-card{ text-align: start; }

#tk-stage .bg-mode-card small{ display: block; color: var(--c-muted); font-weight: 600; margin-top: 0.2rem; font-size: var(--fs-xs); }



#tk-stage .bg-setrow{ display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

#tk-stage .bg-setrow label{ font-weight: 600; color: var(--c-ivory-dim); font-size: var(--fs-sm); }

#tk-stage .bg-select{ background: #1c1108; color: var(--c-ivory); border: 1px solid rgba(201,162,74,0.3); border-radius: 8px; padding: 0.4rem 0.6rem; font-family: inherit; min-height: 40px; }

#tk-stage .bg-switch{ position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid rgba(201,162,74,0.3); background: rgba(0,0,0,0.4); cursor: pointer; flex: 0 0 auto; }

#tk-stage .bg-switch .knob{ position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-muted); transition: all 0.15s var(--ease); }

#tk-stage .bg-switch.on{ background: rgba(47,179,163,0.3); border-color: var(--c-turquoise); }

#tk-stage .bg-switch.on .knob{ inset-inline-start: 22px; background: var(--c-turquoise-bright); }


#tk-stage .result-title{ text-align: center; font-size: var(--fs-2xl); margin-bottom: 0.3rem; }

#tk-stage .result-title.win{ color: var(--c-win); }

#tk-stage .result-title.loss{ color: var(--c-loss); }

#tk-stage .result-badge{ display: inline-block; margin: 0 auto 0.6rem; }