/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  color: #fff; background: #071b18;
}

/* ===== Lobby / Waiting ===== */
#lobby, #waitingRoom, #shieldSelect {
  display: flex; align-items: center; justify-content: center; height: 100vh;
}
.lobby-box {
  min-width: 360px; padding: 32px 40px; text-align: center;
  background: #203f39; border: 1px solid #56867d; border-radius: 8px;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
.lobby-box h1 { margin-bottom: 4px; color: #c5f2e8; font-size: 2.4em; letter-spacing: .15em; }
.lobby-box h2 { margin-bottom: 16px; color: #c5f2e8; font-size: 1.8em; }
.subtitle { margin-bottom: 24px; color: #8fc5ba; font-size: .9em; }
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; margin-bottom: 4px; color: #b6c8c4; font-size: .85em; }
.form-group input, .join-row input {
  width: 100%; padding: 8px 12px; color: #fff; font-size: 1em;
  background: #102a26; border: 1px solid #47756c; border-radius: 4px;
}
.room-settings {
  margin: 14px 0 16px; padding: 10px 12px; text-align: left;
  background: rgba(0,0,0,.15); border: 1px solid #3d665f; border-radius: 5px;
}
.room-settings-title {
  margin-bottom: 8px; color: #c5f2e8; font-size: .82em; font-weight: bold;
}
.room-setting-check, .room-setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 7px 0; color: #b6c8c4; font-size: .84em;
}
.room-setting-check { justify-content: flex-start; }
.room-setting-check input { accent-color: #68c4ad; }
.room-setting-row select {
  min-width: 92px; padding: 4px 8px; color: #fff;
  background: #102a26; border: 1px solid #47756c; border-radius: 4px;
}
.lobby-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; letter-spacing: .1em; }
.status-msg { min-height: 1.4em; margin-top: 12px; color: #ffc071; font-size: .9em; }
#playerList { margin: 16px 0; text-align: left; }
.player-list-item { margin: 4px 0; padding: 6px 10px; background: #102f2a; border-radius: 3px; font-size: .9em; }

/* ===== Buttons ===== */
.btn {
  padding: 10px 20px; color: #fff; font-size: 1em; cursor: pointer;
  background: #415a56; border: 0; border-radius: 4px; transition: opacity .15s;
}
.btn:hover { opacity: .84; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: #277b68; font-weight: bold; }
.btn-secondary { background: #4a5553; }
.btn-action {
  min-width: 54px; padding: 5px 10px; color: #fff; font-size: .78em;
  font-weight: bold; cursor: pointer; background: #263c3a;
  border: 1px solid #54756f; border-radius: 2px;
}
.btn-action:hover { background: #36524e; }
.btn-action.primary { background: #9a4627; border-color: #d77a4b; }

/* ===== Shield Selection ===== */
.shield-select-box {
  width: 95vw; max-width: 960px; padding: 24px 32px;
  background: #203f39; border: 1px solid #56867d; border-radius: 8px;
}
.shield-select-box h2 { margin-bottom: 8px; color: #c5f2e8; }
.shield-select-box p { margin-bottom: 12px; color: #b6c8c4; font-size: .85em; }
.shield-round-context {
  display: flex; align-items: center; gap: 28px; margin-bottom: 14px; padding: 8px 12px;
  background: rgba(0,0,0,.15); border: 1px solid #477069; border-radius: 4px;
}
.shield-round-context > div { display: flex; align-items: center; gap: 8px; }
.shield-context-label { color: #9cd3c8; font-size: .78em; font-weight: bold; }
#shieldSeatWind { color: #f0e5a4; font-size: 1.1em; }
#shieldDoraIndicators { min-height: 38px; gap: 3px; }
.shield-section { margin-bottom: 16px; }
.shield-section-label { margin-bottom: 6px; color: #9cd3c8; font-size: .85em; font-weight: bold; }
.shield-zone, .hand-zone {
  min-height: 64px; padding: 6px; gap: 4px; border-radius: 4px;
}
.shield-zone { background: rgba(218,169,67,.08); border: 1px dashed #ad9148; }
.hand-zone { background: rgba(0,0,0,.15); border: 1px solid #477069; }
.timer { margin: 8px 0; color: #ffc071; font-size: .9em; }

/* ===== Game Stage ===== */
#gameTable {
  display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; overflow: hidden; background: #071b18;
}
#table-wrap {
  position: relative; width: 900px; height: 800px; flex: 0 0 auto; overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(96,186,169,.16) 0 13%, transparent 14%),
    radial-gradient(ellipse at center, #166a5d 0%, #0d574e 56%, #073c37 100%);
  border: 2px solid #3b8e80;
  box-shadow: inset 0 0 70px rgba(0,0,0,.38), 0 12px 40px rgba(0,0,0,.5);
}
.player-area { position: absolute; z-index: 3; pointer-events: none; }
.player-area .tile { pointer-events: auto; }
.area-top { inset: 0 0 auto 0; height: 184px; }
.area-left { inset: 0 auto 0 0; width: 240px; }
.area-right { inset: 0 0 0 auto; width: 240px; }
.area-me { inset: auto 0 0 0; height: 180px; }

/* ===== Center Console ===== */
#center {
  position: absolute; left: 360px; top: 310px; z-index: 2;
  width: 180px; height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(9,34,31,.96), rgba(18,58,52,.96));
  border: 1px solid rgba(130,210,195,.55); border-radius: 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.35);
}
#round-info { color: #f0e5a4; font-size: 1.12em; font-weight: bold; letter-spacing: .1em; }
#counter-info { display: flex; gap: 8px; margin-top: 3px; color: #a9cfc7; font-size: .64em; }
#remaining-info { margin-top: 3px; color: #b6ddd4; font-size: .72em; }
#dora-area { margin-top: 5px; text-align: center; }
.dora-label { margin-bottom: 3px; color: #80b8ac; font-size: .62em; }
#dora-indicators { justify-content: center; flex-wrap: nowrap; }

/* Scores sit on the four inner edges of the center console. */
.score-panel {
  position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center;
  color: #d8ebe6; font-size: .72em; white-space: nowrap; pointer-events: none;
}
.score-panel-horizontal { width: 166px; height: 22px; gap: 4px; }
.score-panel-top { left: 367px; top: 314px; transform: rotate(180deg); }
.score-panel-bottom { left: 367px; top: 466px; }
.score-panel-vertical { width: 150px; height: 22px; gap: 4px; }
.score-panel-left { left: 296px; top: 389px; transform: rotate(90deg); }
.score-panel-right { left: 454px; top: 389px; transform: rotate(-90deg); }
.player-label {
  max-width: 92px; overflow: hidden; padding: 1px 2px;
  color: #9fcfc4; font-size: .82em; text-overflow: ellipsis;
}
.player-score { padding: 1px 2px; color: #fff; font-size: 1.12em; font-weight: bold; }
.player-label.current-turn { color: #ffee55; font-weight: bold; }
#riichi-indicator { color: #ff675d; font-size: .9em; font-weight: bold; }

/* ===== Rivers ===== */
.center-discards {
  position: absolute; z-index: 2; width: 178px; min-height: 118px;
  display: grid; grid-template-columns: repeat(6, 28px); grid-auto-rows: 38px; gap: 2px;
}
#center-discards-bottom { left: 361px; top: 490px; }
#center-discards-top { left: 361px; top: 192px; transform: rotate(180deg); }
#center-discards-left {
  left: 360px; top: 311px; transform: rotate(90deg); transform-origin: top left;
}
#center-discards-right {
  left: 540px; top: 489px; transform: rotate(-90deg); transform-origin: top left;
}
.center-discards .tile { width: 28px; height: 38px; }

/* ===== Tiles ===== */
.tile {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 50px; flex-shrink: 0; overflow: hidden;
  background: #f5f0e0; border: 1px solid #888; border-radius: 2px;
  box-shadow: 1px 2px 3px rgba(0,0,0,.45); cursor: pointer; user-select: none;
  transition: transform .1s, box-shadow .1s, opacity .1s;
}
.tile-img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.tile:hover:not(.no-interact) { transform: translateY(-4px); box-shadow: 1px 6px 7px rgba(0,0,0,.5); }
.tile.selected { transform: translateY(-7px); border-color: #ffd84b; box-shadow: 0 7px 12px rgba(255,216,75,.55); }
.tile.highlighted { border-color: #ff7b24; box-shadow: 0 0 8px rgba(255,123,36,.7); }
.tile.round-revealed-tile {
  border-color: #fff0a6;
  box-shadow: 0 0 8px rgba(255,225,114,.7), 1px 2px 3px rgba(0,0,0,.45);
  animation: reveal-tile-pop .32s ease-out;
}
.tile.riichi-invalid { opacity: 0.3; cursor: not-allowed; }
.tile.red-dora { box-shadow: 1px 2px 3px rgba(0,0,0,.45), 0 0 6px rgba(255,60,60,.8); }
.tile-back { background: #315f86; border-color: #244d70; cursor: default; }
.tile-back::after {
  content: ""; width: 70%; height: 72%;
  border: 1px solid #5689b1; border-radius: 1px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px);
}
.tile-sm { width: 28px; height: 38px; border-radius: 1px; }
.opponent-hand .tile { width: 28px; height: 38px; cursor: default; }

/* ===== Hands ===== */
.hand-row { display: flex; align-items: flex-end; gap: 2px; }
.drawn-tile {
  position: absolute; left: calc(100% + 6px); bottom: 0;
  margin-left: 0;
}
#hand-top {
  position: absolute; top: 7px; left: 258px;
  display: flex; gap: 1px;
}
#hand-top .tile { transform: rotate(180deg); }
#hand-left {
  position: absolute; left: 10px; top: 205px;
  display: flex; flex-direction: column; gap: 0;
}
#hand-left .tile { margin-block: -5px; transform: rotate(90deg); }
#hand-right {
  position: absolute; right: 10px; top: auto; bottom: 205px;
  display: flex; flex-direction: column-reverse; gap: 0;
}
#hand-right .tile { margin-block: -5px; transform: rotate(-90deg); }
#my-hand {
  position: absolute; bottom: 8px; left: 184px;
  display: block; width: max-content;
}
#my-hand-tiles { display: flex; gap: 2px; flex-wrap: nowrap; }

/* ===== Shields: the ring replacing the wall ===== */
.shield-row, .shield-col {
  background: rgba(4,24,23,.42); border: 1px solid rgba(133,190,180,.24);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.34);
}
#shields-top {
  position: absolute; top: 112px; left: 50%; transform: translateX(-50%);
  width: max-content; min-width: 0; min-height: 0; padding: 3px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#shields-top .tile { transform: rotate(180deg); }
#shields-left {
  position: absolute; left: 132px; top: 50%; transform: translateY(-50%);
  width: max-content; min-width: 0; height: max-content; padding: 3px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
#shields-left .tile { transform: rotate(90deg); }
#shields-right {
  position: absolute; right: 132px; top: 50%; transform: translateY(-50%);
  width: max-content; min-width: 0; height: max-content; padding: 3px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
#shields-right .tile { transform: rotate(-90deg); }
#my-shields {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
  width: max-content; min-width: 0; min-height: 0; padding: 4px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
#my-shields .label { color: #8ab9af; font-size: .66em; white-space: nowrap; }
#my-shield-tiles { display: flex; justify-content: center; align-items: flex-end; gap: 8px; flex-wrap: nowrap; }
.shield-group {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: 0; padding: 2px; border-radius: 2px;
}
.shield-group:empty { display: none; }
.shield-group-closed {
  background: rgba(45,96,128,.25); border: 1px solid rgba(87,155,190,.34);
}
.shield-group-open {
  background: rgba(150,101,39,.28); border: 1px solid rgba(221,160,75,.42);
}
#my-shield-tiles .shield-group[data-label]::before {
  content: attr(data-label); position: absolute; left: 3px; top: -11px;
  color: #a9c7c1; font-size: 8px; line-height: 1;
}
#shields-left .shield-group, #shields-right .shield-group {
  flex-direction: column; gap: 0;
}
#shields-left .shield-group .tile,
#shields-right .shield-group .tile {
  margin-block: -5px;
}
.tile.shield-open, .tile.shield-faceup {
  opacity: .76; border-color: #d99a47;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.18), 0 0 4px rgba(231,164,75,.5);
}
.tile.shield-open { pointer-events: none; }
.tile.shield-closed { border-color: #315f86; }
.tile.shield-private, .tile.shield-facedown {
  opacity: .9; border-color: #4ba1b1;
  box-shadow: 0 2px 5px rgba(0,0,0,.55), 0 0 0 1px rgba(75,161,177,.25);
}
.tile.shield-private::after {
  content: ""; position: absolute; inset: 2px; pointer-events: none;
  border: 1px solid rgba(77,199,219,.42);
}
.tile.shield-selectable { border-color: #00bfe8; cursor: pointer; }
.tile.shield-selectable:hover {
  outline: 2px solid rgba(70,213,255,.75); box-shadow: 0 0 10px rgba(0,190,255,.65);
}
.tile.shield-selectable.selected {
  transform: translateY(-7px);
  outline: 2px solid #ffe36d;
  border-color: #ffe36d;
  box-shadow: 0 7px 12px rgba(255,227,109,.65);
}
.tile.shield-exchange-candidate {
  outline: 1px solid rgba(70,213,255,.45); outline-offset: -2px;
}
.tile.shield-exchange-candidate:hover {
  outline: 2px solid rgba(70,213,255,.85);
  box-shadow: 0 0 10px rgba(0,190,255,.65);
}

.center-discards .tile.riichi-discard {
  transform: rotate(90deg);
  border-color: #e36d63;
  box-shadow: 0 0 5px rgba(227,109,99,.62);
}

/* ===== Melds ===== */
.melds-row, .melds-col {
  display: flex; gap: 4px; align-items: flex-end; pointer-events: none;
}
.meld-slot { position: relative; flex: 0 0 auto; }
.meld {
  display: flex; align-items: flex-end; gap: 1px; padding: 2px;
  width: max-content; background: rgba(0,0,0,.24);
  border: 1px solid rgba(155,196,187,.16); border-radius: 2px;
}
.meld-tile-slot {
  position: relative; width: 28px; height: 38px; flex: 0 0 auto;
}
.meld-tile-slot > .tile { position: absolute; left: 0; bottom: 0; }
.meld-called-slot { width: 38px; }
.meld-called-tile {
  left: 5px !important; bottom: -5px !important;
  transform: rotate(90deg);
  transform-origin: center;
}
.meld-added-tile {
  left: 5px !important; bottom: 5px !important; z-index: 2;
  box-shadow: 2px 0 3px rgba(0,0,0,.5);
}
#melds-top {
  position: absolute; top: 48px; left: 22px;
  flex-direction: row; align-items: flex-start;
}
#melds-top .meld { transform: rotate(180deg); transform-origin: center; }
#melds-left {
  position: absolute; left: 51px; bottom: 18px;
  flex-direction: column-reverse; align-items: flex-start;
}
#melds-right {
  position: absolute; right: 51px; top: 18px;
  flex-direction: column; align-items: flex-end;
}
#melds-left .meld-slot, #melds-right .meld-slot {
  width: 42px; height: 128px;
}
#melds-left .meld, #melds-right .meld {
  position: absolute; left: 50%; top: 50%;
}
#melds-left .meld {
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
#melds-right .meld {
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
#my-melds {
  position: absolute; right: 14px; bottom: 8px;
  flex-direction: row-reverse;
}
#my-melds .meld-tile-slot { width: 36px; height: 50px; }
#my-melds .meld-called-slot { width: 50px; }
#my-melds .meld-called-tile { left: 7px !important; bottom: -7px !important; }
#my-melds .meld-added-tile { left: 7px !important; bottom: 7px !important; }

/* ===== Action Bar ===== */
#action-panel {
  position: absolute; left: 12px; bottom: 72px;
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 3px;
  max-width: 420px; padding: 3px 6px; white-space: nowrap;
  background: rgba(5,30,27,.72); border: 1px solid rgba(125,185,174,.28);
}
#action-buttons { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; }
#action-hint { max-width: 540px; color: #b7d0cb; font-size: .68em; text-align: center; }
#turn-countdown, #claim-countdown {
  width: 100%; color: #ffe49a; font-size: .7em; font-weight: bold; text-align: left;
}
#turn-countdown::after, #claim-countdown::after {
  content: ""; display: block; width: var(--time-progress, 100%); height: 3px; margin-top: 2px;
  background: linear-gradient(90deg, #eeb64c, #d95743); transition: width .1s linear;
}
#turn-countdown.using-reserve, #claim-countdown.using-reserve { color: #ffb18f; }
#turn-countdown.time-expired, #claim-countdown.time-expired { color: #ff7667; }
#chi-choice-popup {
  position: absolute; left: 0; bottom: calc(100% + 5px); min-width: 190px;
  padding: 6px; background: rgba(7,31,28,.97); border: 1px solid #6f9e95;
  box-shadow: 0 6px 16px rgba(0,0,0,.48);
}

#round-reveal-banner {
  position: absolute; left: 50%; top: 236px; z-index: 35;
  min-width: 150px; padding: 7px 16px; text-align: center;
  transform: translateX(-50%);
  background: rgba(7,31,28,.88); border: 1px solid rgba(255,225,130,.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.42), inset 0 0 16px rgba(255,225,130,.08);
  pointer-events: none;
}
#round-reveal-banner.ryukyoku { border-color: rgba(150,205,220,.55); }
.round-reveal-title {
  color: #fff0a6; font-size: 1.18em; font-weight: bold; letter-spacing: .12em;
}
.round-reveal-subtitle {
  margin-top: 2px; color: #b9d6d0; font-size: .72em;
}

@keyframes reveal-tile-pop {
  from { opacity: .35; }
  to { opacity: 1; }
}

/* ===== Audio Controls ===== */
#audio-controls {
  position: absolute; right: 8px; bottom: 8px; z-index: 30;
  display: flex; gap: 4px; align-items: flex-end;
  pointer-events: auto;
}
#audio-controls > button {
  min-width: 38px; height: 28px; padding: 0 7px; color: #c7ddd8;
  font-size: .68em; cursor: pointer; background: rgba(8,35,32,.92);
  border: 1px solid #527b73; border-radius: 2px;
}
#audio-controls > button:hover { background: rgba(24,70,63,.96); }
#audio-mute.is-muted { color: #ffb5a8; border-color: #a25a4d; }
#audio-settings-panel {
  position: absolute; right: 0; bottom: 34px; width: 210px; padding: 10px 12px;
  background: rgba(7,31,28,.97); border: 1px solid #6f9e95;
  box-shadow: 0 7px 20px rgba(0,0,0,.5);
}
#audio-settings-panel label {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 7px;
  margin: 5px 0; color: #c8ddd8; font-size: .7em;
}
#audio-settings-panel input[type="range"] { width: 100%; accent-color: #65b7a6; }
#audio-settings-panel .audio-check {
  display: flex; gap: 7px; margin-top: 9px; color: #9ec4bb;
}
.chi-choice-title { margin-bottom: 5px; color: #c8e9e2; font-size: .7em; }
.chi-choice-list { display: flex; flex-direction: column; gap: 4px; }
.chi-choice {
  display: flex; align-items: center; gap: 2px; padding: 4px 7px;
  background: #213d39; border: 1px solid #51776f; cursor: pointer;
}
.chi-choice:hover { background: #315650; border-color: #8fc9bd; }
.chi-choice .tile { width: 28px; height: 38px; pointer-events: none; }

/* ===== Overlay ===== */
#overlay {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
}
#overlay-content {
  width: 90%; max-width: 560px; margin-bottom: 16px; padding: 24px 32px; text-align: center;
  background: #203f39; border: 1px solid #56867d; border-radius: 8px;
}
#overlay-content h3 { margin-bottom: 12px; color: #c5f2e8; font-size: 1.6em; }
.yaku-list { max-width: 280px; margin: 12px auto; text-align: left; }
.yaku-item { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid #477069; font-size: .9em; }
.yaku-name { color: #d4f5ed; }
.yaku-han { color: #ffdf85; font-weight: bold; }
.score-change { margin-top: 8px; font-size: 1.1em; font-weight: bold; }
.score-change.gain { color: #91f5a5; }
.score-change.loss { color: #ff9292; }
.score-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.score-table th, .score-table td { padding: 4px 8px; border-bottom: 1px solid #477069; text-align: center; font-size: .9em; }
.score-table th { color: #9cd3c8; }

/* ===== Win Presentation ===== */
.round-result-overlay {
  background:
    radial-gradient(circle at center, rgba(60,118,104,.3), transparent 52%),
    rgba(0,0,0,.84);
  backdrop-filter: blur(2px);
}
.round-result-overlay #overlay-content {
  width: min(92vw, 820px); max-width: 820px; min-height: 390px; padding: 24px 30px;
  background: linear-gradient(155deg, rgba(15,48,43,.98), rgba(8,29,27,.98));
  border: 1px solid #7eb9ad; box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 35px rgba(68,146,130,.12);
}
.win-presentation { position: relative; min-height: 340px; }
.win-sequence {
  position: absolute; right: 0; top: 0; color: #86aaa3; font-size: .76em;
}
.win-declaration { min-height: 88px; }
.win-player { color: #b9d8d1; font-size: .95em; letter-spacing: .06em; }
.win-call {
  margin-top: 2px; color: #fff2ad; font-family: serif; font-size: 2.8em;
  font-weight: bold; letter-spacing: .18em; text-shadow: 0 0 16px rgba(255,218,102,.48);
  animation: win-call-enter .45s cubic-bezier(.2,.8,.25,1);
}
.win-loser { margin-top: -4px; color: #d59c91; font-size: .8em; }
.winning-hand-panel {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  min-height: 66px; margin: 8px 0 12px; padding: 8px;
  opacity: 0; transform: translateY(8px);
  background: rgba(0,0,0,.18); border-top: 1px solid rgba(133,190,178,.24);
  border-bottom: 1px solid rgba(133,190,178,.24);
  transition: opacity .28s, transform .28s;
}
.winning-hand-panel.is-visible { opacity: 1; transform: translateY(0); }
.winning-concealed, .winning-melds, .result-meld {
  display: flex; align-items: flex-end; gap: 2px;
}
.winning-melds { gap: 7px; }
.winning-tile { display: flex; margin-left: 6px; }
.result-dora-panel {
  display: flex; justify-content: center; gap: 18px; min-height: 36px;
  margin: -4px 0 10px; color: #a8c9c1; font-size: .72em;
}
.result-indicator-group {
  display: flex; align-items: center; gap: 6px;
}
.result-dora-indicators, .result-ura-indicators {
  display: flex; gap: 2px;
}
.result-winning-tile {
  border-color: #e8c45d; box-shadow: 0 0 10px rgba(255,220,104,.82);
  animation: winning-tile-pulse 1s ease-in-out infinite alternate;
}
.win-yaku-panel { display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: 20px; align-items: end; }
.win-yaku-list { min-height: 64px; max-height: 150px; overflow-y: auto; text-align: left; }
.win-yaku-row {
  display: flex; justify-content: space-between; gap: 24px; padding: 3px 8px;
  opacity: 0; transform: translateX(-14px); border-bottom: 1px solid rgba(119,172,162,.22);
  transition: opacity .18s, transform .18s;
}
.win-yaku-row.is-visible { opacity: 1; transform: translateX(0); }
.win-yaku-row strong { color: #ffe18b; white-space: nowrap; }
.win-total {
  min-width: 210px; padding: 10px 12px; opacity: 0; color: #ffea97;
  border: 1px solid rgba(230,198,94,.45);
  background: rgba(119,79,15,.18); transform: scale(.94); transition: opacity .2s, transform .2s;
}
.win-total.is-visible { opacity: 1; transform: scale(1); }
.win-total-score {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 7px; font-size: 1.05em; border-bottom: 1px solid rgba(230,198,94,.28);
}
.win-total-score strong { font-size: 1.32em; white-space: nowrap; }
.win-transfer-list { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.win-transfer-row {
  display: flex; justify-content: space-between; gap: 14px; color: #d7e8e4;
  font-size: .72em; font-weight: normal;
}
.win-transfer-row strong { white-space: nowrap; }
.win-transfer-row.gain strong { color: #91f5a5; }
.win-transfer-row.loss strong { color: #ff9292; }
.win-transfer-row.shield-zero strong { color: #84dfff; }
.shield-resolution {
  min-height: 42px; margin-top: 12px; padding: 7px 10px; opacity: 0;
  border: 1px solid transparent; transition: opacity .22s;
}
.shield-resolution.is-visible { opacity: 1; }
.shield-resolution.is-hidden { display: none; }
.shield-resolution-title { margin-bottom: 5px; font-weight: bold; letter-spacing: .08em; }
.shield-success { color: #ccefff; background: rgba(27,108,151,.18); border-color: #54b5dc; }
.shield-disabled { color: #ffc1b3; background: rgba(134,44,30,.2); border-color: #d66d58; }
.shield-none { color: #8eaaa4; font-size: .8em; }
.shield-resolution-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 3px 0;
}
.shield-disabled .tile { filter: grayscale(.7); }
.result-skip-hint { margin-top: 12px; color: #789b94; font-size: .68em; }
.score-settlement h3 { color: #f1dfa0; font-size: 1.7em; letter-spacing: .12em; }
.settlement-wins { margin: 8px 0 14px; color: #c8e7df; }
.result-score-table { max-width: 560px; margin: 0 auto; }
.result-score-table td { font-size: 1em; }
.score-change.shield-zero { color: #84dfff; font-weight: bold; }

@keyframes win-call-enter {
  from { opacity: 0; transform: scale(1.35); filter: blur(3px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes winning-tile-pulse {
  from { box-shadow: 0 0 6px rgba(255,220,104,.55); }
  to { box-shadow: 0 0 16px rgba(255,220,104,.95); }
}

@media (prefers-reduced-motion: reduce) {
  .win-call, .result-winning-tile { animation: none; }
  .winning-hand-panel, .win-yaku-row, .win-total, .shield-resolution { transition: none; }
}

/* ===== Shared Utilities ===== */
.tile-row { display: flex; flex-wrap: wrap; gap: 3px; }
.no-interact { cursor: default; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }

@media (max-width: 920px) {
  #table-wrap { transform: scale(.84); }
}
@media (max-height: 820px) {
  #table-wrap { transform: scale(.84); }
}
@media (max-width: 760px), (max-height: 690px) {
  #table-wrap { transform: scale(.68); }
}