.overlay.tbl-overlay {
  background: radial-gradient(ellipse at 50% 42%, rgba(48, 22, 12, 0.35), rgba(0, 0, 0, 0.74));
  padding: 10px;
}
.tbl-panel {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(var(--ui-vh) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  color: #f1e4c4;
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, rgba(255, 186, 96, 0.15), transparent 62%),
    radial-gradient(circle at 10% 40%, rgba(130, 64, 170, 0.16), transparent 46%),
    linear-gradient(180deg, #26141c 0%, #180d14 55%, #100a10 100%);
  border: 2px solid #c99a48;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #3d2410,
    0 0 0 4px rgba(201, 154, 72, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.66),
    inset 0 0 0 1px rgba(255, 230, 170, 0.14),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  scrollbar-color: #8a6630 transparent;
}
.tbl-panel::before {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(233, 196, 115, 0.26);
  border-radius: 4px;
  background:
    linear-gradient(135deg, #f0cf7d 0 6px, transparent 6px) top left / 14px 14px no-repeat,
    linear-gradient(225deg, #f0cf7d 0 6px, transparent 6px) top right / 14px 14px no-repeat,
    linear-gradient(45deg, #f0cf7d 0 6px, transparent 6px) bottom left / 14px 14px no-repeat,
    linear-gradient(315deg, #f0cf7d 0 6px, transparent 6px) bottom right / 14px 14px no-repeat;
}
.tbl-x {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid #c99a48;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a2c1a, #1c100a);
  color: #f3d58f;
  font-size: 12px;
  cursor: pointer;
}
.tbl-x:hover { color: #fff3c8; border-color: #f0cf7d; }
.tbl-x:focus-visible { outline: 2px solid #fff3c0; outline-offset: 2px; }
.tbl-head { text-align: center; padding: 0 30px; }
.tbl-bang {
  display: inline-block;
  filter: drop-shadow(0 2px 0 rgba(30, 6, 6, 0.8)) drop-shadow(0 0 8px rgba(255, 170, 80, 0.22));
}
.tbl-bang h2 {
  margin: 0;
  padding: 4px 28px 5px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe7a6;
  text-shadow: 0 1px 0 #5a0c10, 0 0 10px rgba(255, 200, 90, 0.5);
  background: linear-gradient(180deg, #d0383f 0%, #941b23 58%, #6d1017 100%);
  border-top: 2px solid #f0cf7d;
  border-bottom: 2px solid #f0cf7d;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.tbl-than { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; }
.tbl-trai { min-width: 0; }
.tbl-phai { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tbl-san {
  position: relative;
  width: min(250px, 100%);
  aspect-ratio: 1 / 1;
  margin: 2px auto 0;
}
.tbl-ban { display: block; width: 100%; height: 100%; }
.tbl-say {
  margin: 0;
  min-height: 2.6em;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: #f3dfae;
}
.tbl-tieude {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.4em;
  margin: 0 0 6px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbe3a3;
}
.tbl-tieude::before, .tbl-tieude::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c99a48);
}
.tbl-tieude::after { background: linear-gradient(90deg, #c99a48, transparent); }
.tbl-the {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.tbl-the-o {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #8a5d22;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 214, 140, 0.24), transparent 64%),
    linear-gradient(180deg, #3d2215 0%, #22120a 100%);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.1), 0 2px 0 #140a04;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.tbl-the-o canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.tbl-the-o:hover, .tbl-the-o:focus-visible {
  transform: translateY(-2px);
  border-color: #f0cf7d;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.22), 0 2px 0 #140a04, 0 0 10px rgba(255, 190, 90, 0.4);
  outline: none;
}
.tbl-the-o.dia {
  border-color: #ffcf6b;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 200, 90, 0.42), transparent 66%),
    linear-gradient(180deg, #5f300f 0%, #2e1607 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.25), 0 2px 0 #140a04, 0 0 8px rgba(255, 190, 80, 0.35);
}
.tbl-the-o.co canvas { opacity: 0.55; }
.tbl-the-co {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2f8a62;
  border: 1px solid #b9ffe0;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.tbl-bd-chu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 5px;
  font-size: 11px;
  color: #d8c69e;
}
.tbl-bd-nhan {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbe3a3;
}
.tbl-bd-chu b { color: #ffd36b; }
.tbl-ray {
  --tbl-nac: 10;
  --tbl-day: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tbl-nac), minmax(0, 1fr));
  align-items: center;
  min-height: 22px;
}
.tbl-ray::before, .tbl-ray::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% / var(--tbl-nac));
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
}
.tbl-ray::before {
  right: calc(50% / var(--tbl-nac));
  background: #2c1f1a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.tbl-ray::after {
  width: calc((100% - 100% / var(--tbl-nac)) * var(--tbl-day));
  background: linear-gradient(90deg, #c8262a, #ff6a3a 70%, #ffb347);
  box-shadow: 0 0 6px rgba(255, 100, 60, 0.6);
  transition: width 0.5s ease-out;
}
.tbl-nac {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a1d18;
  border: 2px solid #6a5340;
}
.tbl-nac.day {
  background: radial-gradient(circle at 35% 35%, #fff1c9, #f25b3a 55%, #9b1d14);
  border-color: #ffd27a;
  box-shadow: 0 0 6px rgba(255, 120, 60, 0.7);
}
.tbl-nac.ruong {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: linear-gradient(180deg, #6b4520 0%, #3b230e 55%, #2a180a 100%);
  border: 2px solid #e9c473;
  box-shadow: 0 0 8px rgba(255, 200, 90, 0.45), inset 0 2px 0 rgba(255, 230, 160, 0.3);
}
.tbl-nac.ruong::before {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 7px;
  height: 2px;
  background: #e9c473;
}
.tbl-nac.ruong i {
  position: absolute;
  left: 50%; top: 5px;
  width: 6px; height: 7px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #fff0b0, #d39a2c);
  box-shadow: 0 0 5px rgba(255, 210, 110, 0.9);
}
.tbl-ray.sap .tbl-nac.ruong { animation: tbl-nhip 1.1s ease-in-out infinite; }
.tbl-hanh {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.tbl-tien {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 86px;
  padding: 3px 8px;
  border: 1px solid rgba(201, 154, 72, 0.5);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.36);
  font-size: 10px;
  color: #cdb88a;
}
.tbl-tien-nhan::before { content: '◆'; color: #7fe0ff; margin-right: 3px; font-size: 8px; vertical-align: 1px; }
.tbl-tien b { font-size: 14px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.tbl-quay {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 6px 14px 5px;
  border: 2px solid #6b3d0c;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff3b6 0%, #ffd45a 36%, #f0a92a 70%, #c97a14 100%);
  color: #5a2a04;
  font-family: var(--font-serif);
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 3px 0 #7a4610,
    0 6px 12px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(255, 196, 80, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 0 rgba(150, 80, 10, 0.35);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tbl-quay-chu {
  display: block;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 245, 200, 0.8);
}
.tbl-quay-gia {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: #6e3c0a;
}
.tbl-quay::after {
  content: '';
  position: absolute;
  top: -60%; left: -70%;
  width: 40%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: rotate(20deg);
  animation: tbl-loe 2.8s ease-in-out infinite;
  pointer-events: none;
}
.tbl-quay:hover:not(:disabled) { filter: brightness(1.06); }
.tbl-quay:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 #7a4610, 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.tbl-quay:focus-visible { outline: 2px solid #fff3c0; outline-offset: 3px; }
.tbl-quay:disabled { cursor: default; }
.tbl-quay.khoa { filter: grayscale(0.85) brightness(0.72); }
.tbl-quay:disabled::after { display: none; }
.tbl-quay.rung { animation: tbl-rung 0.35s; }
@media (min-width: 620px) {
  .tbl-panel { width: min(580px, 100%); padding: 10px 16px 14px; }
  .tbl-than { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .tbl-san { width: min(270px, calc(var(--ui-vh) - 130px)); }
  .tbl-phai { padding-top: 4px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tbl-panel { padding: 8px 14px 10px; }
  .tbl-bang h2 { font-size: 13px; padding: 3px 24px 4px; }
  .tbl-san { width: min(270px, calc(var(--ui-vh) - 96px)); }
  .tbl-say { min-height: 1.3em; font-size: 11px; }
  .tbl-phai { gap: 8px; }
}
@keyframes tbl-loe { 0%, 55% { left: -70%; } 100% { left: 140%; } }
@keyframes tbl-rung {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
@keyframes tbl-nhip {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 200, 90, 0.45); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(255, 210, 110, 0.95); transform: scale(1.1); }
}
@keyframes tbl-xoay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tbl-quay::after, .tbl-ray.sap .tbl-nac.ruong { animation: none; }
}
#dialog-choices .forge-tbl {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 7px 12px 7px 8px;
  border: 2px solid #c99a48;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(255, 190, 90, 0.28), transparent 55%),
    linear-gradient(90deg, #6d1017 0%, #3a0c14 55%, #22101a 100%);
  color: #ffe7a6;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 0 #1a0d05, inset 0 0 0 1px rgba(255, 220, 150, 0.2), 0 0 12px rgba(255, 170, 80, 0.2);
}
#dialog-choices .forge-tbl::after {
  content: '';
  position: absolute;
  top: -60%; left: -40%;
  width: 22%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.35), transparent);
  transform: rotate(20deg);
  animation: tbl-loe 3.4s ease-in-out infinite;
  pointer-events: none;
}
#dialog-choices .forge-tbl:hover { border-color: #f0cf7d; filter: brightness(1.08); }
#dialog-choices .forge-tbl:focus-visible { outline: 2px solid #fff3c0; outline-offset: 2px; }
.forge-tbl-ban {
  flex: none;
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #e9c473;
  background:
    radial-gradient(circle, #f4e6c4 0 18%, #5a1018 18% 26%, transparent 27%),
    repeating-conic-gradient(#a8323a 0deg 30deg, #22594d 30deg 60deg);
  box-shadow: 0 0 8px rgba(255, 200, 90, 0.55);
  animation: tbl-xoay 9s linear infinite;
}
.forge-tbl-chu { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.forge-tbl-chu b {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #3a0608, 0 0 8px rgba(255, 200, 90, 0.5);
}
.forge-tbl-chu small { font-size: 11px; color: #e6cf9c; }
.forge-tbl-mui { font-size: 22px; color: #f0cf7d; }
#dialog-choices .forge-tbl.khoa { filter: saturate(0.55); }
#dialog-choices .forge-tbl.khoa .forge-tbl-ban { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #dialog-choices .forge-tbl::after, .forge-tbl-ban { animation: none; }
}