* { box-sizing: border-box; }
body { margin: 0; background: #0a0a0f; color: #fff; font-family: -apple-system, sans-serif; height: 100vh; overflow: hidden; }
.layout { width: 100vw; height: 100vh; }
#viewer { width: 100%; height: 100%; }
h2 { font-size: 14px; margin: 0 0 6px; color: #8aa; letter-spacing: 0.5px; }
button { background: #2a3050; border: 1px solid #4a5080; color: #fff; padding: 8px 12px;
         font-size: 13px; border-radius: 4px; cursor: pointer; font-family: inherit; }
button:hover { background: #3a4070; }
button:disabled { background: #1a1d28; color: #555; cursor: not-allowed; border-color: #222; }
button.action { background: #1a4080; border-color: #2860b0; }
button.action:hover { background: #2860b0; }
.actions-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.status { font-size: 12px; color: #888; padding: 4px 0; }
.status.error { color: #f88; }
.status.ok { color: #8f8; }
.status.reaction {
  background: #c62828;
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 2px solid #ff6f60;
  animation: reaction-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes reaction-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.7); }
  to   { box-shadow: 0 0 0 8px rgba(255, 80, 80, 0.0); }
}
#log { flex: 1; min-height: 100px; max-height: 300px; overflow-y: auto;
       background: #08090d; border: 1px solid #222; padding: 6px; font-family: monospace;
       font-size: 10px; color: #888; }
.scores { display: flex; gap: 8px; }
.score { background: #1a1d28; padding: 6px 10px; border-radius: 4px; font-size: 12px; min-width: 80px; }
.score .name { color: #aaa; font-size: 11px; }
.score .pts { font-weight: 600; font-size: 14px; color: #ffdd00; }
.score.me { border: 1px solid #2860b0; }
.warning-toast { position: fixed; top: 12px; right: 12px; background: #b71c1c; color: #fff;
  padding: 8px 12px; border-radius: 4px; font-size: 12px; box-shadow: 0 2px 8px #0008; z-index: 100; }
.game-over-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 200;
    display: flex; align-items: center; justify-content: center; }
.game-over-card { background: #1a1d28; border: 1px solid #4a5080; border-radius: 8px;
    padding: 28px 36px; min-width: 360px; max-width: 480px; }
.game-over-card h2 { margin: 0 0 16px; color: #ffdd00; font-size: 20px; }
.rank-row { display: flex; justify-content: space-between; padding: 8px 0;
    border-bottom: 1px solid #2a2d3a; }
.rank-row .rank { width: 32px; font-weight: 600; }
.rank-row.rank-1 .rank { color: #ffd700; }
.rank-row.rank-2 .rank { color: #c0c0c0; }
.rank-row.rank-3 .rank { color: #cd7f32; }
.rank-row .name { flex: 1; }
.rank-row .pts { color: #fff; font-weight: 600; }
.rank-row .delta { color: #888; font-size: 11px; margin-left: 8px; }
.delta.pos { color: #4caf50; }
.delta.neg { color: #ef5350; }
.game-over-actions { display: flex; gap: 8px; margin-top: 20px; }
.clickable-tile { transition: transform 0.12s ease; user-select: none; -webkit-user-select: none; }
#hand-click-overlay { user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.own-hand-area-3d { user-select: none; -webkit-user-select: none; }
.hover-tile {
  transform: translateY(-10px) !important;
  z-index: 50;
  box-shadow: 0 0 8px 2px rgba(255, 221, 0, 0.85),
              0 6px 10px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
.selected-tile {
  transform: translateY(-10px) !important;
  z-index: 50;
  box-shadow: 0 0 8px 2px rgba(0, 200, 255, 0.85),
              0 6px 10px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
.selected-tile.hover-tile {
  box-shadow: 0 0 8px 2px rgba(0, 200, 255, 0.85),
              0 6px 10px rgba(0, 0, 0, 0.5);
}
/* Settings panel */

.go-detail { margin-top: 16px; padding: 10px 12px; background: #0f1118; border-radius: 4px; }
.go-detail-title { font-size: 11px; text-transform: uppercase; color: #888; letter-spacing: 0.5px; margin-bottom: 6px; }
.go-detail-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; }
.yaku-list { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.yaku-tag { font-size: 11px; padding: 2px 6px; background: #1a2040; color: #aabbe0; border-radius: 3px; }
/* Per-kyoku result banner */
.kyoku-banner { background: #1a2040; border-left: 3px solid #4a80c0; padding: 8px 12px;
  margin: 6px 0; font-size: 12px; color: #ccd; border-radius: 0 4px 4px 0; }
.kyoku-banner.ryu { border-left-color: #888; color: #888; }
.kyoku-banner.hora { border-left-color: #ffd700; }

/* Reaction-phase discard highlight: replicate RiichiViewer's own
   addTile3DOverlay mechanism by attaching a fill div to each face of the
   target tile. Colour cycles white → grey → red. Each face overlay has
   position:absolute inside a tile face that already has position:absolute
   and the right transform, so the colour follows the tile geometry. */
.reaction-overlay-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  border-radius: inherit;
  z-index: 11;
  animation: reaction-face-blink 1.05s steps(1, end) infinite;
}
@keyframes reaction-face-blink {
  0%   { background-color: rgba(255, 255, 255, 0.6); }
  33%  { background-color: rgba(120, 120, 120, 0.55); }
  66%  { background-color: rgba(255, 60, 60, 0.6); }
  100% { background-color: rgba(255, 255, 255, 0.6); }
}
/* Invisible click hit-zone aligned with the tile rect. */
#reaction-click-zone {
  position: fixed; pointer-events: auto; z-index: 9998;
  cursor: pointer; background: transparent;
}

/* Floating action panel above the hand: shows reach/kita/pon/kan/ron/pass.
   Positioned in JS (fixed coords) so it tracks the actual hand area. */
#floating-actions {
  position: fixed; z-index: 80;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  pointer-events: auto;
}
#floating-actions .fa-btn {
  background: rgba(20, 22, 30, 0.92);
  border: 2px solid #4a80c0;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
#floating-actions .fa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
}
#floating-actions .fa-btn.fa-hora { background: #b8860b; border-color: #ffd700; color: #fff; }
#floating-actions .fa-btn.fa-reach { background: #1a4080; border-color: #4080d0; }
#floating-actions .fa-btn.fa-kita { background: #2d5a2d; border-color: #4a8a4a; }
#floating-actions .fa-btn.fa-pon, #floating-actions .fa-btn.fa-kan { background: #4a3070; border-color: #7a50a0; }
#floating-actions .fa-btn.fa-pass { background: #444; border-color: #777; color: #ddd; }

/* Unified player card. Layout: large avatar slot on top, then a row of
   wind kanji + initial below it. No score (the in-game panel still shows
   score). The whole card scales with viewer width so all bits resize as
   one unit. */
.player-panel-3d {
  visibility: hidden !important;
  pointer-events: none !important;
}

.seat-card {
  position: fixed;
  transform-origin: center center;
  z-index: 70;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.seat-card-avatar {
  width: 72px; height: 72px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  line-height: 72px;
  text-align: center;
  font-family: -apple-system, sans-serif;
  font-size: 33px;
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 3px 9px rgba(0,0,0,0.5);
}
.seat-card.active .seat-card-avatar {
  border-color: #ffd54a;
  box-shadow: 0 0 12px rgba(255, 213, 74, 0.55);
}
.seat-card-meta {
  display: flex; gap: 4px; align-items: center;
  background: rgba(20, 22, 30, 0.78);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(120, 140, 200, 0.3);
}
.seat-card-wind {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 13px;
  color: #ffe066;
  font-weight: 700;
}
.seat-card-wind.oya { color: #ffd700; text-shadow: 0 0 4px #ffd70080; }
.seat-card-initial {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: -apple-system, sans-serif;
}
.seat-card-tags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.seat-card-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.seat-card-tag.kita { background: #2d5a2d; color: #c8efc8; }
.seat-card-tag.riichi-tag { background: #b71c1c; color: #fff; }
.seat-card-tag.furiten-tag { background: #7f0000; color: #ff8a80; animation: furiten-pulse 1.2s ease-in-out infinite alternate; }
@keyframes furiten-pulse { from { opacity: 0.65; } to { opacity: 1.0; } }

/* Fullscreen effect for hora / ryukyoku. */
.fullscreen-effect {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  pointer-events: none; user-select: none;
  animation: fullscreen-fade 2s ease-out forwards;
}
.fullscreen-effect.hora { background: radial-gradient(circle, rgba(255,221,80,0.55), rgba(255,221,80,0.0) 70%); }
.fullscreen-effect.ryu { background: radial-gradient(circle, rgba(180,180,180,0.55), rgba(80,80,80,0.0) 70%); }
.fullscreen-effect .fs-headline {
  font-size: 96px; font-weight: 900; letter-spacing: 8px;
  color: #fff; text-shadow: 0 4px 24px #000c, 0 0 24px currentColor;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.fullscreen-effect.hora .fs-headline { color: #ffe066; }
.fullscreen-effect.ryu .fs-headline { color: #cccccc; }
.fullscreen-effect .fs-detail { font-size: 22px; color: #fff; margin-top: 16px; opacity: 0.9; }
@keyframes fullscreen-fade {
  0% { opacity: 0; transform: scale(0.96); }
  15% { opacity: 1; transform: scale(1.0); }
  80% { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Task 6c: hora result modal. Layout: portrait placeholder on the left,
   hand + winning tile + dora/uradora + yaku/score on the right. Fades in. */
.hora-result-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: hora-result-fade 0.25s ease-out forwards;
}
@keyframes hora-result-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hora-result-card {
  background: linear-gradient(180deg, #1c1f2c 0%, #14161e 100%);
  border: 1px solid #4a5080;
  border-radius: 10px;
  padding: 24px 28px;
  width: 920px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  font-family: -apple-system, "Hiragino Mincho ProN", serif;
}
.hora-portrait-slot {
  background: linear-gradient(180deg, #2a3050 0%, #1a1d28 100%);
  border-radius: 8px;
  border: 1px solid #2a3060;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 10px;
  min-height: 320px;
  position: relative;
}
.hora-portrait-slot .hora-portrait-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #444; font-size: 12px; letter-spacing: 1px;
}
.hora-portrait-name {
  margin-top: 8px;
  background: rgba(0,0,0,0.55);
  color: #ffe066;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.hora-right { display: flex; flex-direction: column; gap: 12px; }
.hora-hand-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hora-hand-tiles { display: flex; gap: 2px; align-items: flex-end; }
.hora-meld-group { display: flex; gap: 2px; margin-left: 8px; align-items: flex-end; }
.hora-tile.hora-tile-rotated {
  transform: rotate(90deg);
  transform-origin: center center;
  position: relative;
  top: 6px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 2px;
}
.hora-tile.hora-tile-rotated.hora-tile-svg {
  transform: rotate(90deg);
  transform-origin: center center;
  position: relative;
  top: 6px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 2px;
}
.hora-win-separator { width: 10px; flex-shrink: 0; }
.hora-tile {
  width: 28px; height: 40px;
  background: #f0ead6;
  border-radius: 3px;
  border: 1px solid #aaa;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 18px;
  color: #1a1a1a;
  font-weight: 700;
  user-select: none;
  line-height: 1;
}
.hora-tile.hora-tile-win {
  margin-left: 12px;
}
.hora-tile.hora-tile-back {
  background: linear-gradient(135deg, #f3a83a, #d97a16);
  border-color: #b06010;
  color: transparent;
}
/* When the modal renders RiichiViewer's TileRenderer SVG inside, drop
   the placeholder background and let the inner .tile-layer fill it. */
.hora-tile.hora-tile-svg {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.hora-tile.hora-tile-svg > .tile-layer {
  width: 100%;
  height: 100%;
  position: relative;
}
.hora-tile.hora-tile-svg .tile-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hora-kind-badge {
  background: #b8860b;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  align-self: center;
}
.hora-kind-badge.tsumo { background: #2860b0; }
.hora-kind-badge.ron   { background: #b71c1c; }
.hora-dora-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 6px;
}
.hora-dora-block { display: flex; align-items: center; gap: 6px; }
.hora-dora-label { color: #aaa; font-size: 12px; min-width: 64px; }
.hora-dora-tiles { display: flex; gap: 2px; }
.hora-yaku-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  border-radius: 6px;
  min-height: 80px;
}
.hora-yaku-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  flex: 1;
}
.hora-yaku-name { color: #ddd; font-size: 14px; }
.hora-yaku-fan  { color: #ffe066; font-size: 14px; text-align: right; font-weight: 700; }
.hora-yaku-empty { color: #444; font-size: 12px; }
.hora-han-circle {
  flex-shrink: 0;
  align-self: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe488, #b88f1a 75%);
  color: #1a1a1a;
  font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  font-family: "Hiragino Mincho ProN", serif;
  line-height: 1;
}
.hora-han-circle .hc-han { font-size: 22px; }
.hora-han-circle .hc-fu  { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.hora-bottom-outer { display: flex; align-items: flex-end; gap: 16px; padding-top: 4px; width: 100%; }
.hora-bottom-outer .hora-bottom { flex: 1; min-width: 0; }
.hora-delta-grid { display: grid; gap: 2px; flex-shrink: 0; }
.hora-delta-grid[style*="4"] .hora-delta-cell { grid-template-columns: repeat(4, 1fr); }
.hora-delta-cell { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; min-width: 56px; padding: 3px 6px; border-radius: 3px; border: 1px solid #333; background: rgba(255,255,255,0.05); }
.hora-delta-cell.pos { color: #4caf50; }
.hora-delta-cell.neg { color: #ef5350; }
.hora-delta-cell.winner { background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.3); }
.hora-bottom { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding-top: 4px; gap: 2px; }
.hora-bottom > .hora-score { align-self: flex-end; }
.hora-rank-name { color: #ffe066; font-size: 18px; font-weight: 700; min-height: 22px; }
.hora-score { color: #fff; font-size: 32px; font-weight: 900; letter-spacing: 1px; }
.hora-score .hora-score-suffix { font-size: 16px; color: #aaa; margin-left: 4px; }
.hora-bonus-row { display: flex; gap: 12px; justify-content: flex-end; }
.hora-bonus-item { color: #999; font-size: 13px; font-weight: 400; }
.hora-confirm {
  background: linear-gradient(180deg, #b8860b, #8a6309);
  color: #fff;
  border: 1px solid #ffd700;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  align-self: flex-end;
  margin-top: 8px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Task 5: Fullscreen mjai call banner — slides in from left, holds, slides
   out to the right. No opacity fade. Queued so consecutive events don't
   stack. Total ~0.9s. */
/* Call banner: a half-width horizontal strip anchored at the screen
   edge nearest the actor (bottom for self, right for shimocha, top
   for toimen, left for kamicha). Slides in from outside that edge,
   holds, slides back out. Works for both 3p (no left edge) and 4p. */
.call-banner {
  position: fixed;
  pointer-events: none; user-select: none;
  z-index: 150;
  width: fit-content;
  min-width: unset;
  max-width: 40vw;
  height: 44px;
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  display: flex; align-items: stretch; justify-content: center;
  padding: 0 8px; gap: 0;
  will-change: transform;
}
/* Bottom edge: bar centred horizontally, slides up from below. */
.call-banner.pos-bottom {
  left: 25vw; right: 25vw; bottom: 24px;
  animation: cb-slide-from-bottom 1.5s linear forwards;
}
.call-banner.pos-top {
  left: 25vw; right: 25vw; top: 24px;
  animation: cb-slide-from-top 1.5s linear forwards;
}
.call-banner.pos-right {
  right: 24px; top: 50%; transform: translateY(-50%);
  animation: cb-slide-from-right 1.5s linear forwards;
}
.call-banner.pos-left {
  left: 24px; top: 50%; transform: translateY(-50%);
  animation: cb-slide-from-left 1.5s linear forwards;
}

.call-banner .cb-text {
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ffe066;
  padding: 0 8px;
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.cb-portrait {
  height: 132px;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: -1px;
  position: relative;
  z-index: 0;
}
.pos-bottom .cb-portrait { order: -1; }
.pos-top .cb-portrait { order: 1; }
.pos-right .cb-portrait { order: 1; }
.pos-left .cb-portrait { order: -1; }
.call-banner.kind-pon  .cb-text { color: #ff8c33; }
.call-banner.kind-chi  .cb-text { color: #66c8ff; }
.call-banner.kind-kan  .cb-text { color: #c98aff; }
.call-banner.kind-reach .cb-text { color: #ffd24a; }
.call-banner.kind-tsumo .cb-text { color: #ffe066; }
.call-banner.kind-ron  .cb-text { color: #ff5c5c; }
.call-banner.kind-kita .cb-text { color: #6fe88c; }
@keyframes cb-slide-from-bottom {
  0%    { transform: translateY(120%); }
  5.3%  { transform: translateY(0); }
  94.7% { transform: translateY(0); }
  100%  { transform: translateY(120%); }
}
@keyframes cb-slide-from-top {
  0%    { transform: translateY(-120%); }
  5.3%  { transform: translateY(0); }
  94.7% { transform: translateY(0); }
  100%  { transform: translateY(-120%); }
}
@keyframes cb-slide-from-right {
  0%    { transform: translate(120%, -50%); }
  5.3%  { transform: translate(0, -50%); }
  94.7% { transform: translate(0, -50%); }
  100%  { transform: translate(120%, -50%); }
}
@keyframes cb-slide-from-left {
  0%    { transform: translate(-120%, -50%); }
  5.3%  { transform: translate(0, -50%); }
  94.7% { transform: translate(0, -50%); }
  100%  { transform: translate(-120%, -50%); }
}

/* Task 3: Recolour 3D tile side faces from yellow-brown to grey.
   RiichiViewer hard-codes:
     front: linear-gradient(to bottom, #e4dec8 70%, #c8a030 70%)
     back:  linear-gradient(to bottom, #c8a030 30%, #e4dec8 30%)
     right: linear-gradient(to right,  #b08828 30%, #dcd6c0 30%)
     left:  linear-gradient(to right,  #dcd6c0 70%, #b08828 70%)
   We swap them for neutral greys. The top face (#f0ead6 cream) stays. */
.tile-3d-front {
  background: linear-gradient(to bottom, #d8d8d8 70%, #888 70%) !important;
}
.tile-3d-back {
  background: linear-gradient(to bottom, #888 30%, #d8d8d8 30%) !important;
}
.tile-3d-right {
  background: linear-gradient(to right, #888 30%, #c4c4c4 30%) !important;
}
.tile-3d-left {
  background: linear-gradient(to right, #c4c4c4 70%, #888 70%) !important;
}

/* Task 2: Replace tile black drop-shadows with light grey so the
   outline reads as soft instead of inky. RiichiViewer sets a black
   0.3-alpha drop shadow on .own-tile-3d (3-stack) and .tile-bg.
   We override with mid-grey shadows. */
.own-tile-3d {
  box-shadow:
    0 3px 0 0 #c8c0a8,
    1px 3px 0 0 #bfb7a3,
    1px 4px 6px rgba(170, 170, 170, 0.55) !important;
}
.own-tile-3d .tile-bg,
.opp-tile .tile-bg,
.table-tile .tile-bg,
.dora-tile-3d .tile-bg {
  box-shadow: 1px 1px 2px rgba(170, 170, 170, 0.5) !important;
}

/* Task 1: Enlarge opponent hand tiles ~18%.
   Visual-only scale via transform; add gap-compensating margin so tiles
   don't overlap. transform-origin keeps the row centred. */
.opp-hand-3d .opp-tile,
.opp-hand-3d .opp-tile-rotated {
  transform: scale(1.18);
  transform-origin: center center;
  margin: 0 2.5px;
}

/* Task 8: Hide opponents' closed hand tiles by default. Their melds
   (.opp-melds-inner) and discards (river) remain visible. We use
   visibility:hidden (not display:none) so RiichiViewer's layout math
   for the row is unaffected. Toggleable via .show-opp-hands on body. */
body:not(.show-opp-hands) .opp-hand-3d .opp-tiles-inner {
  visibility: hidden;
}

/* Override v2 (correction): present opponent's closed-hand tiles as
   thin standing tiles seen from above, mimicking how real mahjong
   opponent racks look (a row of narrow rectangles, no face visible).
   We achieve this by:
     - keeping the tile container width small (narrow strip)
     - hiding any face SVG so no character/pip leaks
     - giving the visible top face a vertical light-to-dark gradient
       so it reads as the bevelled top of a vertical tile
     - removing the 3D back/left side faces (they would extend the
       tile into a face-down rectangle look). */
/* Opp closed-hand rendering: revert to RiichiViewer's default (face-up
   opponent tiles). We previously tried hiding faces / standing-pillar
   remix; those didn't match the desired look, so we leave RiichiViewer's
   own 3D rendering intact. The window.toggleOppHands() switch and
   `.show-opp-hands` body class are kept so a future hide/standing
   mode can be re-enabled without code changes. */
body:not(.show-opp-hands) .opp-hand-3d .opp-tiles-inner { visibility: visible; }

/* River: increase gap between discarded tiles slightly so the jitter
   doesn't feel cramped. */
.river-row-3d {
  gap: 3px !important;
}

/* Hide the built-in danger-tile (deal-in) red overlay and the listening
   indicator. RiichiViewer adds these as inline-styled divs:
     background-color: rgba(255, 0, 0, 0.4); z-index: 10
   We're a play shell, not a study tool — opponent waits should be
   hidden information. */
div[style*="rgba(255, 0, 0"],
div[style*="rgba(255,0,0"] {
  display: none !important;
}
/* Some hand-renderer paths set the danger highlight as a *background*
   on the meld tile rather than an overlay div. Catch those too. */
.opp-melds-inner [style*="rgba(255, 0, 0"],
.opp-melds-inner [style*="rgba(255,0,0"] {
  background-color: transparent !important;
}

/* Make opponent face-down tiles look more like real reversed tiles:
   a vertical gradient on the visible top face that suggests the
   bevel of the back, instead of a flat yellow rectangle.
   (Superseded by the .opp-tile narrow-strip rule above; kept as a
   fallback no-op when .show-opp-hands is on.) */
body.show-opp-hands .opp-hand-3d .opp-tile .tile-bg {
  background: linear-gradient(to bottom, #d8b85a 0%, #c8a030 60%, #a88020 100%) !important;
}

/* Accent: kyotaku/wall/dora. */
.player-panel-3d .riichi-indicator-3d,
.player-panel-3d .riichi-bet-3d,
.player-panel-3d .riichi-stick-3d {
  filter: drop-shadow(0 0 4px #ff8a65) brightness(1.15);
}
.wall-remaining-3d, .tiles-remaining-3d {
  background: rgba(20, 20, 30, 0.7) !important;
  padding: 2px 6px !important; border-radius: 4px;
  box-shadow: 0 0 6px rgba(255,221,0,0.3);
}
.dora-indicator-3d, .dora-marker-3d, .dora-3d, .dora-tile-3d {
  filter: drop-shadow(0 0 6px #ffd700cc) brightness(1.1);
}

#debug-panel {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
  padding: 0;
  min-width: 180px;
  font-family: monospace;
}
#debug-panel.collapsed { min-width: auto; }
#debug-panel.collapsed .debug-body { display: none; }
.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.debug-header span { font-weight: bold; }
.debug-body { padding: 8px 10px; border-top: 1px solid #333; }
.debug-body select { width: 100%; margin-bottom: 6px; padding: 3px; }
.debug-body button { width: 100%; padding: 6px; background: #4a9; border: none; color: #fff; border-radius: 3px; cursor: pointer; }
.debug-body button:hover { background: #3b8; }