:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:#050a12; color:#f5f7f5; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.viewer-header { display:flex; align-items:center; gap:20px; padding:10px 18px; background:#090f19; border-bottom:1px solid #26364a; }
.viewer-header h1 { margin:0; font-size:24px; }
.viewer-header p { margin:4px 0 0; color:#c7d7c7; }
.back-link { color:#b9efb9; text-decoration:none; white-space:nowrap; }
main { max-width:1380px; margin:auto; padding:12px; }
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.controls button,.controls select { min-height:42px; border:1px solid #597659; border-radius:8px; background:#173817; color:#fff; padding:7px 13px; font-size:16px; }
#prevButton,#nextButton { touch-action:none; user-select:none; -webkit-user-select:none; }
.controls button:active { transform:translateY(1px); background:#245024; }
#stepLabel { min-width:130px; text-align:center; color:#d0e3d0; }
.step-slider { display:block; width:min(900px,100%); margin:12px auto 18px; accent-color:#72d572; }
.table-viewport { width:100%; height:920px; overflow:hidden; }
.mahjong-table { position:relative; display:block; width:1280px; height:920px; overflow:hidden; transform-origin:top left; padding:12px; border:2px solid #172438; border-radius:12px; background-color:#12213a; background-image:radial-gradient(circle at center,#213b62 0,#162b49 48%,#0d1a2d 100%),repeating-linear-gradient(35deg,#ffffff04 0 2px,transparent 2px 7px); box-shadow:inset 0 0 80px #020812,0 12px 36px #000a; }
.seat { position:absolute; z-index:5; width:760px; height:440px; padding:5px; background:transparent; transform-origin:center center; }
.seat-top { left:260px; top:6px; transform:rotate(180deg); }
.seat-bottom { left:260px; bottom:6px; }
.seat-left { left:-160px; top:240px; transform:rotate(90deg); }
.seat-right { left:680px; top:240px; transform:rotate(-90deg); }
.table-center { position:absolute; z-index:4; left:50%; top:50%; width:360px; min-height:210px; display:flex; flex-direction:column; justify-content:center; transform:translate(-50%,-50%); padding:18px; border:1px solid #080b10; border-radius:10px; background:linear-gradient(145deg,#272b31,#15181d); text-align:center; box-shadow:inset 0 0 18px #000b,0 3px 12px #0008; font-family:serif; font-size:17px; }
.center-round { display:flex; align-items:center; justify-content:center; gap:8px; }
.counter-summary { display:inline-flex; align-items:center; gap:4px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.counter-summary b { min-width:10px; font-size:14px; }
.counter-stick { position:relative; display:inline-flex; width:52px; height:11px; flex:0 0 52px; align-items:center; justify-content:center; border:1px solid #b6b1a5; border-radius:5px; background:linear-gradient(#fffdf4,#d8d4c9); box-shadow:0 1px 2px #000b,inset 0 0 2px #fff; }
.counter-stick i { display:block; width:4px; height:4px; border-radius:50%; background:#d52929; box-shadow:0 0 0 1px #9a1111; }
.counter-stick-honba { justify-content:space-evenly; padding:0 3px; }
.counter-stick-honba i { width:3px; height:3px; background:#171717; box-shadow:0 0 0 1px #050505; }
.counter-stick-riichi i { width:6px; height:6px; }
.seat-title { position:absolute; left:-28px; right:-28px; bottom:12px; display:flex; justify-content:space-between; gap:8px; margin:0; font-weight:700; }
.seat-title > span:first-child { min-width:0; }
.seat-title .wind { color:#ffd66d; }
.player-label { display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; }
.player-score { margin-top:2px; font-size:14px; color:#e8eee8; }
.wait-above { display:flex; height:34px; align-items:flex-end; gap:2px; margin-bottom:3px; white-space:nowrap; }
.wait-above b { align-self:center; margin-right:2px; color:#9ee89e; font-size:14px; }
.wait-above .tile { width:24px; height:31px; border-radius:3px; filter:drop-shadow(0 1px 1px #0008); }
.wait-empty { visibility:hidden; }
.tiles,.melds { display:flex; flex-wrap:nowrap; gap:1px; align-items:flex-end; justify-content:center; min-height:36px; white-space:nowrap; }
.hand-row { position:absolute; left:50%; bottom:0; display:flex; flex-wrap:nowrap; align-items:flex-end; gap:12px; width:max-content; transform:translateX(-50%); }
.hand-row > .melds { justify-content:flex-start; margin:0; }
.river { display:flex; flex-direction:column; width:213px; min-height:175px; margin:8px auto 0; align-items:flex-start; justify-content:flex-start; }
.seat > .river { position:absolute; left:50%; top:96px; transform:translateX(-50%); margin:0; }
.melds { margin-top:6px; }
.tile { display:inline-flex; width:34px; height:43px; flex:0 0 auto; overflow:hidden; border:0; border-radius:4px; filter:drop-shadow(0 2px 1px #0009); }
.tile-back { background:#e6a80f url('/images/mahjong/tileset2-back.svg') center/100% 100% no-repeat; box-shadow:0 2px 1px #0009; }
.tile.drawn { margin-left:11px; }
.draw-placeholder { display:block; width:34px; height:43px; flex:0 0 34px; margin-left:11px; visibility:hidden; }
.meld-group .tile.called { transform:rotate(90deg); margin:5px 7px; }
.meld-group { display:inline-flex; gap:1px; margin-right:5px; padding:2px; border-radius:4px; background:#ffffff18; }
.river .tile { width:34px; height:43px; }
.river-row { display:flex; height:43px; align-items:center; justify-content:center; }
.river-cell { display:flex; width:34px; height:43px; flex:0 0 34px; align-items:center; justify-content:center; }
.river-cell-riichi { width:43px; flex-basis:43px; }
.river .tile.riichi { transform:rotate(90deg); margin:0; }
.wall { position:absolute; z-index:3; display:flex; gap:3px; pointer-events:none; filter:drop-shadow(0 2px 2px #000a); }
.wall-top { top:86px; left:50%; transform:translateX(-50%) rotate(180deg); }
.wall-bottom { bottom:86px; left:50%; transform:translateX(-50%); }
.wall-left { left:120px; top:50%; transform:translate(-50%,-50%) rotate(90deg); }
.wall-right { right:120px; top:50%; transform:translate(50%,-50%) rotate(-90deg); }
.wall-stack { position:relative; display:inline-block; width:34px; height:87px; }
.wall-stack > * { position:absolute; left:0; width:34px; height:43px; }
.wall-stack > *:first-child { top:0; }
.wall-stack > *:nth-child(2) { top:44px; }
.wall-back { border:1px solid #b7d1e7; border-radius:3px; background-color:#214f78; background-image:radial-gradient(circle,#b9d8ee 1px,transparent 1.8px),linear-gradient(#376e9c,#183d62); background-position:center; background-size:6px 6px,auto; box-shadow:inset 0 0 0 2px #102c48,0 1px 2px #0009; }
.wall-face { display:block; overflow:hidden; border-radius:3px; background:#f5f2e8; box-shadow:0 1px 2px #0009; }
.wall-face .tile { display:block; width:34px; height:43px; filter:none; }
.wall-stack.empty { visibility:hidden; }
.wall-layer-empty { visibility:hidden; }
.wall-stack.dead { filter:drop-shadow(0 0 3px #ffca55); }
.wall-stack.dead-start { margin-left:9px; }
.wall-count { margin-top:7px; color:#d5c58b; font-size:14px; }
.wall-break { margin-top:3px; color:#8fb6d9; font-size:12px; }
.event-label { color:#bfeebf; font-weight:700; margin:8px 0; }
.event-flash { width:max-content; min-width:96px; margin:8px auto 2px; padding:5px 18px; border:2px solid #fff; border-radius:5px; color:#fff; background:#a30d14; box-shadow:0 0 18px #ffcf5a99; font-family:serif; font-size:30px; font-weight:900; line-height:1.15; text-shadow:0 2px 2px #000; animation:event-pop .22s ease-out; }
.seat-action { position:absolute; z-index:30; left:50%; bottom:88px; min-width:86px; transform:translateX(-50%); padding:5px 14px; border:2px solid #fff; border-radius:5px; color:#fff; background:#a30d14; box-shadow:0 0 18px #ffcf5a99; text-align:center; font-family:serif; font-size:27px; font-weight:900; line-height:1.1; text-shadow:0 2px 2px #000; animation:seat-action-pop .22s ease-out; }
.seat-action.effect-リーチ { background:#1764b2; }
.seat-action.effect-ツモ,.seat-action.effect-ロン { background:#b11b16; }
.event-label.effect-流局 { color:#ffe6a0; }
@keyframes seat-action-pop { from { opacity:.2; transform:translateX(-50%) scale(1.5); } to { opacity:1; transform:translateX(-50%) scale(1); } }
.effect-リーチ { background:#1764b2; }
.effect-ツモ,.effect-ロン { background:#b11b16; }
@keyframes event-pop { from { opacity:.2; transform:scale(1.5); } to { opacity:1; transform:scale(1); } }
.dora-row { margin:10px 0; }
.ura-dora-row { color:#ffe6a0; }
.result-panel { display:none; position:absolute; z-index:20; left:50%; top:50%; width:min(620px,78%); transform:translate(-50%,-50%); padding:20px 24px; border:2px solid #d4bd72; border-radius:10px; color:#fff; background:#10151bf2; box-shadow:0 14px 50px #000,inset 0 0 25px #000; text-align:center; }
.result-panel.visible { display:block; animation:result-in .18s ease-out; }
.result-panel.visible.yakuman-result { border-color:#ffe27a; box-shadow:0 14px 60px #000,inset 0 0 38px #9d630055,0 0 28px #ffd35a66; animation:yakuman-result-in 2.2s cubic-bezier(.18,.75,.2,1); }
.result-panel h2 { margin:0 0 10px; font-size:24px; color:#ffe6a0; }
.result-panel h2:empty { display:none; }
.score-changes { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-top:14px; }
.result-panel.match-result .score-changes { grid-template-columns:1fr; }
.final-rank b { display:inline-block; min-width:42px; color:#ffe6a0; }
.score-change { display:flex; justify-content:space-between; padding:7px 10px; background:#ffffff0d; border-radius:5px; }
.score-change.plus strong { color:#ffdb64; }
.score-change.minus strong { color:#8fc9ff; }
.score-change.zero strong { color:#aaa; }
.result-yaku { display:inline-block; margin-top:5px; color:#e5ecf4; line-height:1.6; }
.win-result-block { display:grid; gap:4px; padding:9px 12px; border-radius:6px; background:#ffffff0b; }
.win-result-block + .win-result-block { margin-top:8px; border-top:1px solid #d4bd7266; }
.win-result-block > b { color:#ffe6a0; }
.win-result-block > strong { font-size:20px; }
.result-dora { margin-top:12px; }
.result-dora-row { display:flex; align-items:center; justify-content:center; gap:4px; min-height:45px; }
.result-dora-row > span:first-child { min-width:82px; margin-right:5px; color:#d5c58b; text-align:right; }
.result-dora-row .tile { width:34px; height:43px; }
.next-round-note { margin-top:12px; color:#aebdd0; font-size:13px; }
@keyframes result-in { from { opacity:0; transform:translate(-50%,-47%) scale(.96); } }
@keyframes yakuman-result-in {
  0% { opacity:0; transform:translate(-50%,-44%) scale(.84); filter:brightness(.55); }
  55% { opacity:.82; transform:translate(-50%,-50%) scale(1.035); filter:brightness(1.35); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:brightness(1); }
}
.muted { color:#aebbae; font-size:13px; }
.tile-credit { margin:7px 2px 0; color:#718096; font-size:11px; text-align:right; }
.tile-credit a { color:#8da9c7; }
@media (max-width:760px) {
  main { padding:8px; }
  .viewer-header { align-items:flex-start; padding:10px; }
  .viewer-header h1 { font-size:20px; }
  .viewer-header p { font-size:12px; }
  .controls button,.controls select { min-height:38px; padding:5px 9px; font-size:14px; }
}

.member-predictions { max-width: 900px; margin: 16px auto; padding: 16px; background: #fff; color: #183d32; border-radius: 10px; }
.member-predictions h2 { font-size: 18px; margin: 0 0 8px; }
.prediction-row { display: grid; grid-template-columns: 8em repeat(3, 7.5em) max-content; justify-content: start; align-items: start; gap: 8px; margin: 10px 0; }
.prediction-row > strong { overflow-wrap: anywhere; }
.prediction-row > small { grid-column: 5; }
.prediction-row > span { display: inline-flex; align-items: center; gap: 4px; }
.prediction-row .tile { width: 26px; height: 34px; }
.member-predictions small { color: #53645d; }
.member-predictions[hidden] { display: none; }
.prediction-row .prediction-candidate { display: inline-flex; flex-direction: column; align-items: flex-start; }
.prediction-candidate > span { display: inline-flex; align-items: center; gap: 4px; }
.prediction-candidate small { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width:760px) {
  .prediction-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .prediction-row > strong,.prediction-row > small { grid-column: 1 / -1; }
}