/* Hand display */
.hand-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hand-row .label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  min-width: 40px;
}

.tiles {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

/* Tile sizing is driven by --tile-size so the size modifier classes
   (.tile-sm, .action-tile, .action-tile-sm) only override the custom
   property — everything else (border, background, vertical-align) stays
   shared on the base .tile rule. */
.tile {
  height: var(--tile-size, 36px);
  width: auto;
  border-radius: 3px;
  border: 2px solid transparent;
  vertical-align: middle;
  background: #fff;
}

.tile.tile-sm        { --tile-size: 24px; }
.tile.action-tile    { --tile-size: 32px; }
.tile.action-tile-sm { --tile-size: 24px; }

.action-text {
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

.tile.draw {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(79,195,247,0.5);
  margin-left: 10px;
  position: relative;
}

/* Riichi tile: rotated in place via CSS transform. The img keeps its normal
   layout box (~22×28 border-box), so later columns stay aligned across all
   rows — the rotated visual just overflows its layout box slightly, which
   is the desired "tilted tile" look. */
.tile.riichi-tile {
  transform: rotate(90deg);
  transform-origin: center center;
  border-color: var(--sev-major);
  box-shadow: 0 0 4px rgba(239, 83, 80, 0.4);
}

/* Skipped-turn placeholder: a blank tile img with the same layout box as a
   real tile, so columns stay aligned when a player was passed by a pon /
   kan call. Invisible but still hoverable, so the native `title` tooltip
   can explain why the gap exists. */
.tile.skip-placeholder {
  opacity: 0;
}

/* Hovering a specific riichi tile scopes a green "safe against this riichi"
   highlight to: (a) every discard from the riichi player (always genbutsu
   against themselves), and (b) every tile across all rows discarded after
   that riichi's absolute turn. Applied by JS so two separate riichis can
   be hovered independently. */
.tile.safe-from-riichi {
  outline: 2px solid rgba(102, 187, 106, 0.75);
  outline-offset: -1px;
  box-shadow: 0 0 4px rgba(102, 187, 106, 0.45);
  position: relative;
  z-index: 1;
}

/* Soft-safe anchor: an open threat's last tedashi (the discard that froze
   their wait). Sibling of the rotated red riichi anchor, but not rotated and
   in a distinct teal so the two reads don't blur together. Behavioural, not
   rules-absolute, hence the dashed border. */
.tile.soft-anchor-tile {
  border: 2px dashed rgba(38, 198, 218, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(38, 198, 218, 0.4);
}

/* Hovering the soft anchor scopes a teal "soft-safe against this open hand"
   highlight — the opp's own discards plus every tile that passed after their
   wait froze. Teal (vs the riichi green) flags the weaker, behavioural
   guarantee. */
.tile.safe-from-soft {
  outline: 2px solid rgba(38, 198, 218, 0.75);
  outline-offset: -1px;
  box-shadow: 0 0 4px rgba(38, 198, 218, 0.45);
  position: relative;
  z-index: 1;
}

/* Board context */
.board-context {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 6px;
}

.board-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.wind-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
}

.wind-badge .wind-tile {
  height: 20px;
}

.wind-badge .wind-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wind-badge.round-wind {
  background: rgba(74, 158, 255, 0.1);
}
.wind-badge.round-wind .wind-label { color: var(--accent); }

.wind-badge.seat-wind {
  background: rgba(168, 85, 247, 0.1);
}
.wind-badge.seat-wind .wind-label { color: #a855f7; }

.dora-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dora-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tile.dora-indicator {
  border-color: #ffa94d;
  box-shadow: 0 0 4px rgba(255, 169, 77, 0.3);
}

.tile.dora-highlight {
  border-color: #ffa94d;
}

.tile.tile-hover {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  z-index: 1;
  position: relative;
}


.all-discards {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.all-discards summary {
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}

.discard-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  /* Let the trailing yaku-strip drop to its own line on narrow widths. */
  flex-wrap: wrap;
}

.discard-row.you-row {
  background: rgba(74, 158, 255, 0.06);
}

/* Riichi is the bigger threat (guaranteed tenpai + stick + yaku floor), so
   paint it red. A non-riichi open threat (Open Defense axis) gets amber-gold
   — softer, since it's only a possibility of tenpai. */
.discard-row.danger-row {
  background: rgba(245, 179, 66, 0.09);
  box-shadow: inset 0 0 0 1px rgba(245, 179, 66, 0.38);
}

.discard-row.riichi-row {
  background: rgba(255, 107, 107, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.35);
}

.discard-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 0 0 110px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.you-tag {
  color: var(--accent);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
}

.danger-tag {
  color: var(--threat-open);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9.5px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--threat-open) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--threat-open) 12%, transparent);
}
/* Strong band (guaranteed ≥2 han — dora or two yakuhai): solid amber fill, a
   fat push-back hand. */
.danger-tag.strong {
  color: #1a1a2e;
  background: var(--threat-open);
  border-color: transparent;
}
/* Trailing detail after the chip: "2 calls · ≥3 han" (han = the guaranteed floor). */
.danger-detail {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-open-defense);
  text-transform: none;
  letter-spacing: 0;
}
.discard-row.danger-row.speculative .danger-detail {
  color: var(--text-dim);
}

/* Open-threat han breakdown popover — the discard row's sibling of the yaku
   strip's hover detail (.yp-detail in style-game-detail.css). Lifts above the
   row on hover over a danger-tag that carries a breakdown. */
.danger-tag.has-detail {
  position: relative;
  cursor: help;
}
.threat-detail {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
  text-align: left;
  white-space: normal;
  font-weight: 400;
  color: var(--text);
}
.danger-tag.has-detail:hover .threat-detail {
  opacity: 1;
  pointer-events: auto;
}
.threat-detail .td-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.threat-detail .td-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-open-defense);
}
.threat-detail .td-total {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.threat-detail .td-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.threat-detail .td-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.threat-detail .td-tile {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.threat-detail .td-tile img.tile {
  height: 17px;
  width: auto;
  border: 0;
}
.threat-detail .td-name {
  color: var(--text);
}
.threat-detail .td-row.td-needed .td-name {
  color: var(--text-dim);
  font-style: italic;
}
.threat-detail .td-han {
  margin-left: auto;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.threat-detail .td-foot {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-dim);
}

.riichi-tag {
  color: color-mix(in srgb, var(--threat-riichi) 70%, #fff);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 9.5px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--threat-riichi) 50%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--threat-riichi) 10%, transparent);
}

.scores-bar {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.score-item {
  font-size: 12px;
  color: var(--text);
}

.score-seat {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  margin-right: 2px;
}

.inline-melds {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Called tile (taken from this discard pool by an opponent's chi/pon/kan).
   Marked with a visible dashed outline rather than dimming — grey/opacity is
   being reserved for tsumogiri shading. The matching outline on the meld's
   called tile (.meld-called > .tile) links the two views of the same tile.
   2px matches the base .tile transparent border, so there's no layout shift. */
.tile.ghost-tile {
  border: 2px dashed var(--text-dim);
  border-radius: 3px;
}

/* Tsumogiri (drawn-and-immediately-discarded) tile: greyed/shaded to set it
   apart from a tedashi (discard from hand) — the tedashi tiles are the ones a
   defender reads. Reuses the dimming the called-tile ghost used to carry,
   which freed up now that "called" is a dashed outline. A tile can be both
   tsumogiri and called: the dashed outline + the shading stack cleanly. */
.tile.tsumogiri-tile {
  opacity: 0.4;
}

/* KD-driven hand highlight: "Safe" = green underline; unsafe tiles get
   an HSL gradient via inline style set by renderHand. */
.tile.hand-tile-safe { border-bottom: 3px solid var(--sev-minor); }

/* Soft-safe ("Safe*") hand tile: dealin-0 only by the behavioural
   tsumogiri-extended-genbutsu read, not a rules-guaranteed safe tile. Dashed
   teal underline distinguishes it from the solid-green hard "Safe". */
.tile.hand-tile-soft-safe { border-bottom: 3px dashed rgba(38, 198, 218, 0.9); }