/* Small layout refinements kept separate from the compact base stylesheet. */
.player-bottom > .player-card { left: -46px; }

/*
 * Each face is a complete 56×75 SVG. The button is transparent, so there is
 * no second card background or crop seam around the artwork.
 */
.tile.has-svg {
  appearance: none;
  width: 57px;
  height: 76px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: 0 7px 12px #0017105c;
}

.tile.has-svg .tile-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

.tile.has-svg.drawn {
  box-shadow: 0 8px 17px #00171080, 0 0 0 1px #e7b85c55;
}

.tile.has-svg.small,
.meld-group .tile.has-svg {
  width: 31px;
  height: 42px;
  box-shadow: 0 4px 7px #00171055;
}

.river .tile.has-svg {
  width: 29px;
  height: 39px;
  box-shadow: 0 4px 7px #0017104f;
}

.human-hand { height: 92px; }

/* Keep the opposite player's river clear of the concealed wall. */
.river-top { top: 145px; z-index: 6; }

.player.active .player-card b { color: #ff6a5d; text-shadow: 0 0 9px #ff594c80; }

.meld-group .meld-back,
.winner-group .meld-back {
  width: 31px;
  height: 42px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 4px 7px #00171055;
}
.winner-group .meld-back { width: 36px; height: 48px; }

/* Four diamond corners map to bottom/left/top/right players. Only the dealer LED is lit. */
.dealer-led {
  display: none;
  min-width: 25px;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #55f0834d;
  border-radius: 7px;
  background: #001a10e8;
  box-shadow: inset 0 0 9px #000b, 0 0 12px #41ef7350;
  z-index: 9;
}
.dealer-led.active { display: flex; }
.led-p2 { left: 9px; top: 9px; transform: rotate(-45deg) !important; }
.led-p3 { right: 9px; top: 9px; transform: rotate(-45deg) !important; }
.led-p0 { right: 9px; bottom: 9px; transform: rotate(-45deg) !important; }
.led-p1 { left: 9px; bottom: 9px; transform: rotate(-45deg) !important; }
.seven-digit { position: relative; display: block; width: 16px; height: 28px; }
.segment { position: absolute; display: block; border-radius: 3px; background: #123b22; box-shadow: inset 0 0 2px #00150a; }
.seg-a,.seg-g,.seg-d { left: 3px; width: 10px; height: 3px; }
.seg-a { top: 0; }.seg-g { top: 12px; }.seg-d { bottom: 0; }
.seg-b,.seg-c,.seg-e,.seg-f { width: 3px; height: 10px; }
.seg-b { right: 0; top: 2px; }.seg-c { right: 0; bottom: 2px; }.seg-e { left: 0; bottom: 2px; }.seg-f { left: 0; top: 2px; }
.seven-digit[data-value="0"] :is(.seg-a,.seg-b,.seg-c,.seg-d,.seg-e,.seg-f),
.seven-digit[data-value="1"] :is(.seg-b,.seg-c),
.seven-digit[data-value="2"] :is(.seg-a,.seg-b,.seg-g,.seg-e,.seg-d),
.seven-digit[data-value="3"] :is(.seg-a,.seg-b,.seg-g,.seg-c,.seg-d),
.seven-digit[data-value="4"] :is(.seg-f,.seg-g,.seg-b,.seg-c),
.seven-digit[data-value="5"] :is(.seg-a,.seg-f,.seg-g,.seg-c,.seg-d),
.seven-digit[data-value="6"] :is(.seg-a,.seg-f,.seg-g,.seg-e,.seg-c,.seg-d),
.seven-digit[data-value="7"] :is(.seg-a,.seg-b,.seg-c),
.seven-digit[data-value="8"] .segment,
.seven-digit[data-value="9"] :is(.seg-a,.seg-b,.seg-c,.seg-d,.seg-f,.seg-g) {
  background: #69ff87;
  box-shadow: 0 0 4px #69ff87, 0 0 9px #35e965, inset 0 0 2px #e0ffe8;
}

/* Prominent decision prompt: source tile on the left, large action buttons on the right. */
.action-bar {
  min-height: 78px;
  height: auto;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.action-bar.decision {
  border-color: #efc96f99;
  background: linear-gradient(100deg, #153d33f2, #08231df2);
  box-shadow: 0 0 0 2px #e7b85c18, 0 12px 34px #00100d88, inset 0 0 32px #e7b85c0c;
}

.action-bar.decision .message-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  box-shadow: 0 0 16px 3px #e7b85c99;
}

.action-bar.decision #message-text { color: #fff4d3; font-size: 15px; font-weight: 700; }
.decision-tile { width: 37px; height: 50px; flex: 0 0 auto; }
.decision-tile.hidden { display: none; }
.decision-tile .tile.has-svg { width: 37px; height: 50px; box-shadow: 0 5px 9px #00171070; }
.actions { align-items: center; }
.action-circle {
  width: 58px;
  height: 58px;
  border-width: 2px;
  font-size: 22px;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.action-circle:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.12); }
.action-win { color: #fff6db; border-color: #ffcf75; background: linear-gradient(145deg,#b94d3f,#7f2823); box-shadow: 0 7px 20px #9b342866; }
.action-pong { color: #e6fff7; border-color: #70d4b5; background: linear-gradient(145deg,#18755e,#0d493b); box-shadow: 0 7px 20px #0c5c4966; }
.action-kong { color: #f7ecff; border-color: #c39be9; background: linear-gradient(145deg,#704793,#44275e); box-shadow: 0 7px 20px #57317466; }
.action-pass { color: #cfddd8; border-color: #ffffff38; background: #17342d; }
.action-choice { width: auto; min-width: 58px; padding: 0 13px; border-radius: 18px; font-size: 15px; }

.result-card { width: min(760px, 100%); }

.nickname-card { width: min(460px, 100%); text-align: center; }
.nickname-icon { width: 62px; height: 62px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg,#efd084,#dba747); color: #35240d; font: 34px serif; box-shadow: 0 12px 32px #d9a74930; }
.nickname-help { margin: 0 auto 20px; max-width: 340px; color: #a9c0b8; font-size: 13px; line-height: 1.7; }
.nickname-input { width: 100%; height: 52px; border: 1px solid #e7c56b55; border-radius: 12px; outline: none; padding: 0 16px; background: #031e19; color: #fff8e6; font: 16px "Microsoft YaHei",sans-serif; text-align: center; box-shadow: inset 0 2px 8px #0004; }
.nickname-input:focus { border-color: #e7c56bcc; box-shadow: 0 0 0 3px #e7b85c18, inset 0 2px 8px #0004; }
.nickname-input::placeholder { color: #718e85; }
.nickname-error { min-height: 20px; margin: 7px 0 4px; color: #ef8d80; font-size: 12px; }
.nickname-submit { width: 100%; height: 48px; }

.winner-hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px -20px 4px;
  padding: 12px;
  border-radius: 12px;
  background: #031e1980;
  border: 1px solid #ffffff0d;
}

.winner-hand.hidden { display: none; }
.winner-group { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.winner-group.exposed { padding-left: 8px; border-left: 1px solid #d8c17d45; }
.winner-hand .tile.has-svg { width: 36px; height: 48px; box-shadow: 0 4px 7px #00171055; }

@media (max-width: 800px) {
  .player-bottom > .player-card { left: -1px; }
  .tile.has-svg { width: 54px; height: 72px; }
  .tile.has-svg.small,
  .meld-group .tile.has-svg { width: 29px; height: 39px; }
  .river .tile.has-svg { width: 26px; height: 35px; }
  .river-top { top: 128px; }
  .action-bar { min-height: 74px; padding-left: 12px; }
  .action-bar.decision #message-text { font-size: 12px; }
  .action-circle { width: 50px; height: 50px; font-size: 19px; }
  .decision-tile, .decision-tile .tile.has-svg { width: 32px; height: 43px; }
  .meld-group .meld-back { width: 29px; height: 39px; }
}