/* The Heuriger table (js/theory/heuriger.js): #heuriger-screen / #hg-root.
   The Chord Bridge's column (gauntlet.css lends its bar, buttons, cards and
   setup fold): control bar, then the table — the 7×7 board on the left, the
   hand, the carry, the two purses and the line readout on the right. Tiles
   are the mahjong tiles' dress (theory.css .td-pc-N colours). */
#hg-root { width: min(1100px, 97vw); display: flex; flex-direction: column; gap: 8px; --hg-sq: 58px; }
.hg-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: #9aa3b8; font-size: 12px; }
.hg-bar label { display: inline-flex; align-items: center; gap: 5px; }
.hg-bar select { background: #1a1f2b; color: #e8ecf6; border: 1px solid #2a3145; border-radius: 7px; padding: 4px 7px; font: inherit; }
.hg-title { font-weight: 700; color: #f3ecd8; font-size: 15px; }
.hg-main { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.hg-left { position: relative; flex: none; }
.hg-board {
  display: grid; grid-template-columns: repeat(7, var(--hg-sq)); grid-auto-rows: var(--hg-sq); gap: 4px;
  touch-action: manipulation;   /* no double-tap zoom over the board */
  padding: 8px; background: #3a2a1b; border-radius: 12px; border: 1px solid #5a4330;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.45);
}
.hg-sq {
  position: relative; border-radius: 6px; background: #2a2418; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hg-sq.s0 { background: #b8862a; box-shadow: inset 0 0 0 2px #ffd98a; }
.hg-sq.s1 { background: #2f5fa0; box-shadow: inset 0 0 0 2px #a8c8f2; }
.hg-sq.ok { cursor: pointer; }
.hg-sq.no::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: rgba(8,10,14,.58);
}
.hg-sq .hg-t { z-index: 1; }
.hg-sq.no .hg-t { opacity: .5; }
.hg-sq.ok:hover { filter: brightness(1.25); }
.hg-sq.hot { box-shadow: inset 0 0 0 2px #fff, 0 0 14px rgba(255,255,255,.5); }
.hg-sq.line { outline: 2px solid rgba(255,255,255,.35); outline-offset: -1px; }
.hg-t {
  width: 70%; height: 70%; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #1a1520; font: 900 calc(var(--hg-sq) * .36)/1 -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.4);
  user-select: none; -webkit-user-select: none;
}
.hg-t small { font-size: calc(var(--hg-sq) * .17); font-weight: 700; opacity: .8; margin-top: 2px; }
.hg-c0 { background: #ffd24a; } .hg-c1 { background: #4da3ff; }
.hg-c2 { background: #ff5c5c; } .hg-c3 { background: #4fd06a; }
.hg-t, .hg-ht { position: relative; }
.hg-mk { position: absolute; top: 1px; left: 3px; font-style: normal; font-size: calc(var(--hg-sq) * .2); line-height: 1; opacity: .55; }
.hg-ht .hg-mk { font-size: 11px; top: 2px; left: 4px; opacity: .6; }
.hg-t.wild { background: linear-gradient(135deg, #ffe08a, #ff9f5a 60%, #ff6f8f); color: #3a1c0a; }
.hg-t.hook { background: linear-gradient(180deg, #d9dde8, #9aa3b8); color: #1a1f2b; }
.hg-t.drop { animation: hg-drop .22s ease-out; }
@keyframes hg-drop { from { transform: translateY(-14px) scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.hg-t.gone { animation: hg-gone .4s ease-in forwards; }
@keyframes hg-gone { to { transform: scale(.2) rotate(20deg); opacity: 0; } }
.hg-right { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.hg-card { background: #151a26; border: 1px solid #2a3145; border-radius: 12px; padding: 10px 12px; }
.hg-card h3 { margin: 0 0 6px; font: 700 12px -apple-system, "Segoe UI", Roboto, sans-serif; color: #9aa3b8; text-transform: uppercase; letter-spacing: .08em; }
.hg-hand { display: flex; gap: 10px; align-items: center; min-height: 64px; }
.hg-hand .hg-ht {
  width: 54px; height: 62px; border-radius: 8px; border: 2px solid transparent; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1a1520;
  font: 900 20px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.4);
}
.hg-hand .hg-ht small { font-size: 11px; font-weight: 800; opacity: .75; margin-top: 3px; font-variant-numeric: tabular-nums; }
.hg-hand .hg-ht.wild { background: linear-gradient(135deg, #ffe08a, #ff9f5a 60%, #ff6f8f); color: #3a1c0a; }
.hg-hand .hg-ht.hg-c0, .hg-hand .hg-ht.hg-c1, .hg-hand .hg-ht.hg-c2, .hg-hand .hg-ht.hg-c3 { color: #1a1520; }
.hg-hand .hg-ht.hook { background: linear-gradient(180deg, #d9dde8, #9aa3b8); color: #1a1f2b; }
.hg-hand .hg-ht:hover { transform: translateY(-3px); }
.hg-hand .hg-ht.sel { border-color: #fff; transform: translateY(-6px); box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 18px rgba(255,255,255,.5); }
.hg-hand .hg-ht:disabled { opacity: .45; cursor: default; transform: none; }
.hg-hand .hg-eat { margin-left: auto; }
.hg-carry { display: flex; gap: 10px; align-items: center; }
.hg-carry .hg-ht { cursor: default; border-color: #ff9f5a; }
.hg-carry p { margin: 0; font-size: 13px; color: #ffcf9f; line-height: 1.35; flex: 1; }
.hg-purses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hg-purse { border-radius: 10px; padding: 8px 10px; background: #1a1f2b; border: 1.5px solid #2a3145; }
.hg-purse.s0 { border-color: #e7b54a; } .hg-purse.s1 { border-color: #6f9bd6; }
.hg-purse.turn { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.hg-purse .hg-who { font-weight: 700; color: #f3ecd8; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.hg-purse .hg-who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.hg-purse .hg-sc { font: 800 22px/1.1 -apple-system, "Segoe UI", Roboto, sans-serif; color: #e7b54a; font-variant-numeric: tabular-nums; margin-top: 3px; }
.hg-purse.s1 .hg-sc { color: #9cc1ef; }
.hg-purse .hg-st { font-size: 12px; color: #9aa3b8; font-variant-numeric: tabular-nums; }
.hg-glass { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: -1px; }
.hg-glass i { width: 9px; height: 12px; border-radius: 1px 1px 3px 3px; background: #2a3145; border: 1px solid #3a4360; }
.hg-glass i.on { background: #c4566b; border-color: #e07a8b; }
.hg-line { min-height: 74px; }
.hg-line .hg-lt { color: #f3ecd8; font-weight: 700; font-size: 13px; }
.hg-line .hg-lg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hg-chip { display: inline-flex; align-items: center; gap: 6px; background: #1a1f2b; border: 1px solid #2a3145; border-radius: 8px; padding: 3px 8px 3px 4px; font-size: 12px; color: #c6cddd; }
.hg-chip .hg-pcs { display: inline-flex; gap: 2px; }
.hg-chip .hg-pcs i { width: 15px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font: 800 9px/1 sans-serif; font-style: normal; background: #2a3145; color: #d7deec; }
.hg-chip b { color: #e7b54a; }
.hg-line .hg-ll { color: #9aa3b8; font-size: 12px; margin-top: 5px; }
.hg-msg { min-height: 40px; color: #c6cddd; font-size: 13.5px; line-height: 1.4; }
.hg-msg.bad { color: #ff9aa5; } .hg-msg.good { color: #6fd39a; }
.hg-say { font-style: italic; color: #9cc1ef; }
.hg-rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 8px 0 4px; color: #c6cddd; font-size: 14px; }
.hg-rstats b { color: #e7b54a; }
.hg-rank { color: #9aa3b8; font-size: 13px; margin-top: 4px; }
.hg-lit { color: #7f8aa5; font-size: 12px; font-style: normal; }
@media (max-width: 760px) {
  #hg-root { --hg-sq: min(46px, 11.5vw); }
  .hg-main { flex-direction: column; align-items: stretch; }
  .hg-left { align-self: center; }
  .hg-bar .gb-stats { margin-left: 0; width: 100%; font-size: 11.5px; }
}

/* the mini-games hub's inked vignette (theory/ui.js .tdm-prev[data-g="heuriger"]) */
.tdm-prev[data-g="heuriger"] .hgv-b { left: 50%; top: 6px; width: 214px; height: 104px; margin-left: -107px; border-radius: 8px; background: #3a2a1b; box-shadow: inset 0 0 0 1px #5a4330; }
.tdm-prev[data-g="heuriger"] .hgv-s { width: 26px; height: 26px; border-radius: 4px; }
.tdm-prev[data-g="heuriger"] .hgv-s.s1 { background: rgba(231,181,74,.35); box-shadow: inset 0 0 0 1.5px #e7b54a; }
.tdm-prev[data-g="heuriger"] .hgv-s.s2 { background: rgba(94,140,200,.35); box-shadow: inset 0 0 0 1.5px #6f9bd6; }
.tdm-prev[data-g="heuriger"] .hgv-s.a { left: calc(50% - 96px); top: 40px; } .tdm-prev[data-g="heuriger"] .hgv-s.b { left: calc(50% - 66px); top: 40px; }
.tdm-prev[data-g="heuriger"] .hgv-s.c { left: calc(50% - 36px); top: 40px; } .tdm-prev[data-g="heuriger"] .hgv-s.d { left: calc(50% - 6px); top: 40px; }
.tdm-prev[data-g="heuriger"] .hgv-s.e { left: calc(50% + 24px); top: 40px; }
.tdm-prev[data-g="heuriger"] .hgv-t { width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 900 11px/1 sans-serif; color: #1a1520; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.25); }
.tdm-prev[data-g="heuriger"] .hgv-t.t1 { left: calc(50% - 94px); top: 42px; } .tdm-prev[data-g="heuriger"] .hgv-t.t2 { left: calc(50% - 64px); top: 42px; }
.tdm-prev[data-g="heuriger"] .hgv-t.t3 { left: calc(50% - 34px); top: 42px; } .tdm-prev[data-g="heuriger"] .hgv-t.t4 { left: calc(50% - 4px); top: 42px; }
.tdm-prev[data-g="heuriger"] .hgv-t.t5 { left: calc(50% + 26px); top: 42px; }
.tdm-prev[data-g="heuriger"] .hgv-t.t6 { left: calc(50% + 56px); top: 42px; background: linear-gradient(135deg, #ffe08a, #ff9f5a 60%, #ff6f8f); animation: hgv-star 1.6s ease-in-out infinite alternate; }
@keyframes hgv-star { from { transform: translateY(-10px); opacity: .7; } to { transform: none; opacity: 1; } }
.tdm-prev[data-g="heuriger"] .hgv-n { left: 0; right: 0; top: 80px; text-align: center; font: italic 500 12px "EB Garamond", Georgia, serif; color: #7a5b2e; }