/* 遊ぶ場所と、見て覚える場所。操作・待ちは必ず手牌の近くに置く。 */
#game { grid-template-columns: minmax(0, 1fr) 252px; grid-template-rows: 42px minmax(0, 1fr); gap: 12px 20px; padding: 10px 24px 16px; }
#bar { padding-bottom: 6px; }
#arena { --hw: min(calc((100vw - 370px) / 15.1), 52px); }
#stageWrap { min-height: 150px; margin-bottom: 12px; }
#playDock { flex: none; width: 100%; max-width: 1060px; margin: 0 auto; position: relative; border: 1px solid #5f82705c; border-radius: 20px; background: linear-gradient(180deg, #163b32ed, #0c2521); box-shadow: 0 10px 32px #0003; }
#learningFacts { display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0; background: #09211b80; border: 0; border-radius: 20px 20px 0 0; }
.waitPanel { flex: 1; min-width: 0; padding: 10px 14px; }
.waitHeading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.waitHeading h3, .doraPanel h3, .defensePanel h3 { margin: 0; font-size: 12px; color: #c5d9ca; }
.waitHeading small { color: #9ab3a4; font-size: 10px; }
.waitPanel.ready h3 { color: #ffe1a0; }
.waitList { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; align-items: center; }
.waitCard { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 7px; background: #ffffff07; border: 1px solid #7d9e7950; }
.waitCard .factTile { width: 26px; height: 35px; box-shadow: 0 2px 0 #9b967a; }
.waitCard > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.waitCard small { display: flex; justify-content: space-between; gap: 7px; font-size: 10px; color: #adc5b6; white-space: nowrap; }
.waitCard b { font-size: 11px; color: #f4e8c8; font-variant-numeric: tabular-nums; }
.waitNote { display: block; font-size: 10px; color: #b8cdbf; margin-top: 6px; }
.emptyWait { color: #5d7b6c; letter-spacing: 4px; font-size: 26px; line-height: 1; }
.doraPanel { flex: 0 0 auto; min-width: 60px; max-width: 140px; padding: 10px 14px; border-left: 1px solid #385a46; }
.doraPanel h3 { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.doraPanel h3 small { color: #e1c27b; font-size: 10px; font-weight: 400; }
.doraPanel .factTiles { max-width: 110px; }
.doraPanel .factTile { box-shadow: inset 0 0 0 1px #efcf7f; background: #f8e5a2; }
.defensePanel { flex: 1 0 100%; padding: 9px 14px; border-top: 1px solid #b98c5a55; background: #6a431318; }
.defensePanel h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; color: #ffce94; }
.defensePanel h3 small { font-size: 10px; font-weight: 400; color: #d6bd99; }
.defenseRow { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; }
.defenseRow + .defenseRow { margin-top: 5px; }
.defenseRow > span:first-child { min-width: 0; }
.defenseRow b { display: inline-block; max-width: 110px; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.defenseRow small { font-size: 9px; color: #9dbba8; }
.defenseRow .factTile { width: 16px; height: 21px; }
.defenseLegend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; font-size: 9px; color: #c1cbb7; }
.defenseLegend span:first-child { color: #91dfd2; }
.defenseLegend span:last-child { color: #e7b989; }
#actions, #actions:empty, #actions:not(:empty) { display: flex; height: 62px; min-height: 62px; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 14px 3px; }
.act { flex: 0 1 205px; min-width: 0; height: 48px; padding: 6px 12px; border-radius: 9px; font-size: 20px; touch-action: manipulation; }
.act[data-a=pon] { flex-basis: 260px; }
.act small { font-size: 10px; line-height: 1.1; }
.act[data-a=skip] { margin-left: auto; flex-basis: 110px; background: #29483d; color: #d1dfd2; border-color: #71877560; box-shadow: none; }
.act.glow { animation: actionGlow 1.6s ease-in-out infinite; box-shadow: 0 0 0 2px #f9d783, 0 3px 0 #8c6b2b; }
@keyframes actionGlow { 50% { box-shadow: 0 0 0 2px #ffe7a5, 0 0 16px #efd67944; } }
.actMain { gap: 9px; }
.ponPreview { gap: 1px; }
.ponPreview i { font-style: normal; font-size: 10px; margin: 0 3px; }
.ponPreview .tile { --w: 15px; }
.ponPreview .claimTile { display: inline-flex; padding: 2px; background: #e4bf7160; border-radius: 4px; }
#mine, #mine.turn { padding: 2px 14px 10px; border: 0; background: none; box-shadow: none; border-radius: 0; }
#meLine { min-height: 30px; height: 30px; margin: 0 0 3px; gap: 8px; }
#meHead { font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shanten { max-width: 36%; margin-left: auto; font-size: 12px; padding: 3px 8px; border: 1px solid #d0bb6666; background: #c4b45512; border-radius: 20px; white-space: nowrap; }
#selectionPreview { display: flex; align-items: center; gap: 6px; flex: none; height: 30px; }
#selectionPreview .tile { --w: 22px; --thickness: 4px; margin: 0; box-shadow: 0 2px 0 #a39166; }
#selectionPreview small { font-size: 10px; color: #b8e8dc; }
#handRow { justify-content: center; }
#hand { gap: 1px; height: calc(var(--hw) * 1.95 + 12px); min-height: calc(var(--hw) * 1.95 + 12px); padding-top: calc(var(--hw) * .5); }
#hand .concealedHand { gap: 1px; }
#hand .tile { touch-action: manipulation; transition: transform .12s ease-out; }
#hand .tile::before { content: ''; position: absolute; inset: -12px 0 -14px; }
#hand .tile.sel { z-index: 3; transform: translateY(-12px) rotateX(24deg) scale(1.1); outline: none; }
#hand .tile.sel .tileFace { outline: 2px solid #a8f2df; outline-offset: 2px; }
#hand .tile.glow > .tileFace::before { top: -17px; border-bottom-color: #81d8ff; }
#hand .tile.linkedTile .tileFace { outline: 2px solid #9fe5e3; }
.safetyMark { position: absolute; z-index: 2; bottom: -3px; right: 0; font: 800 10px/14px system-ui, sans-serif; font-style: normal; width: 14px; height: 14px; text-align: center; border-radius: 4px; box-shadow: 0 1px 3px #0004; }
.safeTile .safetyMark { background: #076a64; color: #effff8; }
.partialSafe .safetyMark { background: #f1d28a; color: #534212; }
.cautionTile .safetyMark { background: #884527; color: #fff0d1; }
#playDock .coachCard { flex-direction: row; align-items: center; gap: 12px; border-radius: 0 0 19px 19px; padding: 9px 14px; background: #ffffff05; color: #d1e0d3; box-shadow: none; border-top: 1px solid #54705c45; }
#playDock .railEyebrow { flex: none; font-size: 10px; color: #96c1ab; letter-spacing: 0; gap: 7px; }
#playDock .liveDot { width: 6px; height: 6px; background: #7dd9b6; }
#playDock #coach { height: auto; min-height: 20px; font-size: 12px; line-height: 1.45; color: #d7e6d7; align-items: center; }
#guideRail { gap: 12px; padding: 4px 0; overflow-y: auto; }
#groupFacts, #roleFacts { flex: none; background: #112e27b8; border: 1px solid #789b7740; border-radius: 14px; padding: 14px; }
.groupHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.groupHeading h3, #roleFacts h3 { font-size: 13px; margin: 0; }
.groupHeading small { font-size: 9px; color: #97b09e; }
.groupList { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.groupExample { display: flex; align-items: center; flex-direction: column; gap: 7px; border: 1px solid #789b7759; border-radius: 9px; background: #34583b40; padding: 8px 3px; touch-action: manipulation; }
.groupExample > span { display: flex; gap: 1px; pointer-events: none; }
.groupExample .tile { --w: 22px; --thickness: 4px; margin-bottom: 3px; }
.groupExample small { font-size: 10px; color: #c7d4bd; }
.groupExample:hover, .groupExample:focus-visible { border-color: #e9cb80; background: #5c673b55; }
.groupNew, .meldJoined { animation: groupJoined 1.2s ease-out; }
@keyframes groupJoined { 0%, 30% { outline: 2px solid #9fe5e3; background-color: #63bbac33; box-shadow: 0 0 20px #9fe5e333; } 100% { outline: 0 solid transparent; } }
.groupEmpty { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: #8aa794; }
.groupEmpty > span { font-size: 27px; letter-spacing: 3px; }
.groupEmpty small { font-size: 10px; }
#roleFacts h3 { margin-bottom: 12px; }
.roleGoal { font-size: 11px; color: #ecd391; margin-bottom: 9px; }
.roleVisual { width: 100%; display: block; text-align: left; color: #e7eedf; border: 1px solid #6e926d55; border-radius: 10px; background: #ffffff05; padding: 10px; margin: 7px 0 0; }
.roleVisual.ready { border-color: #d3b65f90; background: #b0a54c0d; }
.roleVisualHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.roleVisual b { font-size: 14px; }
.roleVisualHead small { color: #e1c57f; font-size: 10px; }
.roleVisualBody { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; font-size: 10px; color: #b7cdb8; }
.roleVisualBody .factTile { width: 18px; height: 24px; }
.roleSymbol { display: grid; place-items: center; width: 25px; height: 25px; color: #f5d27c; background: #ac994622; border-radius: 50%; }
.roleFoot { display: block; font-size: 9px; color: #96af9d; line-height: 1.7; margin-top: 12px; }
#shapeGuide { background: transparent; border-color: #56785f40; }

/* 結果は「得点 → 完成形 → 役と牌の対応 → 受け渡し」。次へは常に押せる。 */
#banner { position: fixed; inset: 60px max(16px, calc((100vw - 1000px) / 2)) 18px; z-index: 19; padding: 0; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 50% 0, #294d39, #0e2620 65%); box-shadow: 0 0 0 100vmax #00110caa, 0 24px 80px #0008; }
#banner.won { border-color: #d6b56b; }
.resultScroll { flex: 1; padding: 20px 28px 12px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.resultTop { display: flex; justify-content: space-between; color: #b8cdb6; font-size: 11px; letter-spacing: .1em; }
#banner .resultHero { padding: 20px 0; }
#banner .resultHero > span { font-size: 11px; letter-spacing: .08em; color: #bdcfb8; }
#banner .resultHero h2 { margin: 8px 0 10px; font-size: clamp(23px, 4vw, 38px); color: #f4e8c3; line-height: 1.3; }
#banner.won .resultHero h2 { color: #ffe6a0; text-shadow: 0 0 28px #e9c55e44; }
.heroValue { display: flex; justify-content: center; align-items: center; gap: 18px; }
.heroValue > b { color: #e7ce8d; font-size: 18px; }
#banner .heroValue strong { font-size: clamp(36px, 6vw, 58px); color: #ffe8a8; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#banner .heroValue small { font-size: 14px; margin-left: 6px; }
.myResultDelta { margin-top: 14px; display: inline-flex; align-items: center; gap: 16px; padding: 7px 18px; background: #0003; border-radius: 24px; color: #c3d5c4; }
.myResultDelta > span { font-size: 11px; }
.myResultDelta b { font-size: 22px; font-variant-numeric: tabular-nums; }
.myResultDelta small { font-size: 11px; margin-left: 3px; }
#banner .plus { color: #a5ebc1; } #banner .minus { color: #ffb39c; }
.winningCard { padding: 18px; border-radius: 14px; border-color: #7f98634d; background: #ffffff04; margin-bottom: 14px; }
.winningTitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.winningTitle h3 { margin: 0; font-size: 13px; color: #d9e4cb; }
.winningTitle > span { font-size: 10px; color: #a9c0a6; }
.winKey { color: #f5d375; }
.winningShape { margin: 15px 0 17px; }
.shapeGroups { justify-content: center; gap: 8px; }
.shapeUnit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shapeUnit > small { font-size: 9px; color: #acbea6; }
.shapeGroup { padding: 7px 4px; border-radius: 7px; border-bottom: 2px solid #d1b764; background: #94ad7520; gap: 1px; }
.shapeGroup.pairGroup { background: #75c1b118; border-color: #86c9b8; }
.shapeGroup .tile { --w: clamp(18px, 3vw, 35px); --thickness: 4px; margin-bottom: 1px; }
.shapeGroup .tile.win { outline: 2px solid #ffcf55; outline-offset: 1px; }
.shapeGroup .tile.finishTile .tileFace { background: #ffe6a0; }
.shapeGroup .tile.roleMatch .tileFace { box-shadow: inset 0 0 0 2px #83c7b8; }
.shapeGroup .tile.finishTile { animation: finishArrives .5s ease-out both; }
@keyframes finishArrives { from { opacity: .25; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
.roleCards { display: flex; flex-wrap: wrap; gap: 7px; }
.roleCards li { padding: 0; background: transparent; border-radius: 0; }
.roleCards li button { display: flex; gap: 12px; align-items: baseline; background: #112d24; border: 1px solid #6e8e675e; border-radius: 8px; padding: 9px 13px; color: #d9e5ce; min-height: 42px; }
.roleCards li button[aria-pressed=true] { background: #efe1b8; color: #263f2b; border-color: #f0d78f; }
.roleCards b { font-size: 14px; }
.roleCards span { font-size: 10px; }
.roleEvidence { font-size: 12px; color: #d0d9b6; min-height: 22px; margin-top: 10px; }
.scoreBreakdown { border-top: 1px solid #71856640; padding-top: 9px; margin-top: 6px; }
.scoreReason { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 12px; font-weight: 400; color: #bac8ad; }
.scoreReason b { color: #f2ddb0; }
.bonusYaku { font-size: 10px; margin: 7px 0 0; color: #acbda4; }
.resultContinue { position: static; flex: none; margin: 0; padding: 12px 28px 16px; background: #10291ff5; border-top: 1px solid #6f8c5544; }
.resultContinue button { min-height: 48px; padding: 12px 20px; font-size: 17px; }
.resultContinue .resultHome { margin-top: 6px; justify-content: center; padding: 6px; min-height: 30px; background: transparent; border: 0; color: #bed0b9; font-size: 12px; }
#resultSettlement { margin-bottom: 8px; padding: 14px; background: #071f18a6; }
#resultSettlement h3 { color: #b9cbb0; font-size: 12px; }
.balanceRows > div { padding: 5px 7px; align-items: center; }
.balanceRows > .isMe { background: #b6c48b12; border-radius: 6px; }
.balanceRows small { font-size: 12px; }
.resultTransfers { gap: 6px; margin-top: 10px; }
.resultTransfers li { padding: 8px; background: #a7b98908; border-color: #486341; }
.drawSeats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.drawSeats > div { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 5px; border-radius: 12px; background: #ffffff05; border: 1px solid #6e8e6740; }
.drawSeats span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.drawSeats b { font-size: 16px; color: #9eb49b; }
.drawSeats small { font-size: 10px; color: #97ad93; }
.drawSeats .isTenpai { border-color: #d3b65f80; background: #b7a85e12; }
.drawSeats .isTenpai b { color: #f3d58b; }
.finalRanks { margin-top: 18px; }
#banner .finalRanks h2 { font-size: 15px; color: #e1d4ae; margin-bottom: 10px; }
.finalRank { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; background: #ffffff04; border-radius: 8px; margin-top: 5px; }
.finalRank > b { font-size: 26px; color: #d8d2af; }
.finalRank:first-of-type > b { color: #ffe39d; }
.finalRank small { font-size: 10px; margin-left: 4px; }
.finalRank > span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finalRank strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.finalRank.isMe { background: #ead58c17; outline: 1px solid #cfbc6b66; }

@media (max-width:899px) {
  #game { display: flex; padding: max(5px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)); gap: 5px; height: auto; min-height: 100dvh; overflow: visible; }
  #bar { flex: none; min-height: 37px; padding-bottom: 4px; }
  #arena { --hw: min(calc((100vw - 31px) / 14.5), 48px); flex: none; }
  #stageWrap { flex: none; min-height: 130px; margin-bottom: 8px; }
  #playDock { border-radius: 13px; }
  #learningFacts { border-radius: 13px 13px 0 0; }
  .waitPanel { padding: 8px; }
  .waitHeading { margin-bottom: 5px; gap: 6px; }
  .waitHeading h3, .doraPanel h3 { font-size: 11px; }
  .waitCard { padding: 3px 5px; gap: 5px; }
  .waitCard .factTile { width: 21px; height: 28px; }
  .waitCard small { font-size: 9px; gap: 4px; }
  .waitCard b { font-size: 9px; }
  .waitList { gap: 4px; min-height: 30px; }
  .waitNote { font-size: 9px; line-height: 1.45; }
  .doraPanel { padding: 8px; min-width: 52px; max-width: 88px; }
  .doraPanel h3 { gap: 3px; margin-bottom: 6px; }
  .doraPanel h3 small { font-size: 8px; }
  .doraPanel .factTile { width: 18px; height: 24px; }
  .defensePanel { padding: 7px 8px; }
  .defensePanel h3 { margin-bottom: 4px; font-size: 10px; }
  .defenseLegend { gap: 4px 8px; font-size: 8px; margin-top: 4px; }
  #actions, #actions:empty, #actions:not(:empty) { height: 60px; min-height: 60px; padding: 6px 7px 3px; gap: 6px; }
  .act { flex: 1 1 85px; height: 46px; padding: 5px; font-size: 17px; }
  .act[data-a=pon] { flex-basis: 128px; }
  .act[data-a=skip] { flex-basis: 62px; }
  .act small { font-size: 9px; }
  .act:has(.ponPreview) .actMain { flex-direction: column; gap: 1px; }
  .act:has(.ponPreview) > small { display: none; }
  .ponPreview .tile { --w: 11px; }
  .ponPreview i { font-size: 8px; margin: 0 2px; }
  #mine { padding: 0 5px 8px; }
  #meLine { min-height: 26px; height: 26px; gap: 4px; }
  #meHead { font-size: 10px; max-width: 32%; }
  #shanten { max-width: 34%; font-size: 10px; padding: 3px 5px; }
  #selectionPreview { gap: 4px; }
  #selectionPreview .tile { --w: 18px; }
  #selectionPreview small { font-size: 8px; }
  #hand { height: calc(var(--hw) * 1.95 + 9px); min-height: calc(var(--hw) * 1.95 + 9px); }
  #hand .tile.sel { transform: translateY(-10px) rotateX(24deg) scale(1.1); }
  .safetyMark { width: 11px; height: 11px; font-size: 8px; line-height: 11px; right: -1px; }
  #playDock .coachCard { border-radius: 0 0 12px 12px; padding: 7px 9px; gap: 8px; }
  #playDock .railEyebrow { font-size: 9px; }
  #playDock #coach { font-size: 10px; min-height: 18px; }
  #guideRail { flex: none; overflow: visible; padding: 7px 2px 12px; gap: 10px; }
  #groupFacts, #roleFacts { padding: 12px; }
  .groupList { display: flex; flex-wrap: wrap; gap: 7px; }
  .groupExample { flex: 1 1 65px; max-width: 110px; padding: 6px 3px; }
  .groupExample .tile { --w: 18px; }
  .groupExample small { font-size: 9px; }
  .groupHeading { margin-bottom: 9px; }
  .roleVisual { display: inline-flex; flex-direction: column; width: calc(50% - 4px); vertical-align: top; margin-right: 3px; padding: 8px; }
  .roleVisual b { font-size: 12px; }
  .roleVisualBody { gap: 5px; }
  #banner { inset: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)); border-radius: 16px; }
  .resultScroll { padding: 15px 12px 10px; }
  #banner .resultHero { padding: 18px 0; }
  .winningCard { padding: 12px 8px; }
  .winningTitle { flex-wrap: wrap; gap: 4px; }
  .winningTitle > span { font-size: 9px; }
  .shapeGroups { gap: 5px; }
  .shapeGroup { padding: 5px 3px; }
  .shapeGroup .tile { --w: clamp(14px, calc((100vw - 122px) / 14), 23px); }
  .winningShape:has(.shapeUnit:nth-child(7)) .shapeGroup .tile { --w: clamp(13px, calc((100vw - 151px) / 14), 22px); }
  .shapeUnit > small { font-size: 8px; }
  .roleCards { gap: 5px; }
  .roleCards li button { min-height: 40px; padding: 8px 10px; gap: 8px; }
  .roleCards b { font-size: 12px; }
  .roleEvidence { font-size: 11px; }
  .scoreReason { font-size: 11px; }
  .resultContinue { padding: 10px 12px 14px; }
  .resultContinue button { min-height: 46px; font-size: 16px; }
  .drawSeats b { font-size: 13px; }
}
@media (max-width:360px) {
  #meHead { max-width: 26%; }
  #selectionPreview small { max-width: 56px; line-height: 1.3; }
  .shapeGroups { gap: 4px; }
  .finalRank { grid-template-columns: 36px 1fr auto; padding: 9px; gap: 7px; }
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #game { display: grid; grid-template-columns: minmax(0,1fr) 220px; height: 100dvh; overflow-y: auto; }
  #arena { --hw: min(calc((100vw - 270px) / 14.5), 33px); }
  #guideRail { overflow-y: auto; }
  #stageWrap { min-height: 100px; }
  .ponPreview { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .act.glow, .groupNew, .meldJoined, .shapeGroup .tile.finishTile { animation: none; }
  #hand .tile { transition: none; }
}
.groupExample[aria-pressed=true], .roleVisual[aria-pressed=true] { border-color: #ead18b; background: #6b704536; }
.tableMelds .linkedTile .tileFace { outline: 2px solid #9fe5e3; }
.groupExample.pairExample { border-color: #6ba99c66; background: #65a99c0d; }
.missingTile { display: inline-grid; place-items: center; width: 18px; height: 24px; border: 1px dashed #aec5a5; border-radius: 3px; font-size: 11px; color: #b7cdb8; font-style: normal; }
/* PCは待ちと守りを横に並べ、卓の読む大きさも確保する。 */
@media (min-width:900px) {
  #learningFacts { flex-wrap: nowrap; min-height: 96px; }
  .defensePanel { flex: 0 1 34%; min-width: 220px; border-top: 0; border-left: 1px solid #b98c5a55; padding: 10px 12px; }
  .defenseLegend { font-size: 8px; gap: 4px 9px; }
  #hand { flex: 0 1 auto; width: calc(var(--hw) * 14.5 + 13px); max-width: 100%; }
  #playDock .coachCard { min-height: 37px; padding-top: 7px; padding-bottom: 7px; }
}
.resultContinue button:focus-visible { outline: 2px solid #fff1b6; outline-offset: 3px; }

/* 操作は卓の空き面へ。手牌・待ち・学習欄は縦に伸ばさない。 */
#arena { min-height: 0; }
#stageWrap { position: relative; margin-bottom: 0; }
#actions, #actions:empty, #actions:not(:empty) { position: absolute; z-index: 4; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; width: max-content; max-width: calc(100% - 12px); height: 42px; min-height: 0; padding: 0; margin: 0; gap: 5px; justify-content: center; }
#actions:empty { display: none; }
.act, .act[data-a=pon], .act[data-a=skip] { flex: 0 1 auto; min-width: 68px; height: 40px; margin: 0; padding: 5px 11px; font-size: 16px; border-radius: 9px; }
.act small, .act .ponPreview i:last-child { display: none; }
.act .actMain { flex-direction: row; gap: 6px; }
.ponPreview .tile { --w: 12px; }
#playDock { container-type: inline-size; max-width: none; border-radius: 12px; margin: 0; box-shadow: none; }
#mine { --hw: min(calc((100cqw - 26px) / 14.5), 60px); padding: 2px 6px 4px; }
#meLine { height: 20px; min-height: 20px; margin: 0; }
#handRow { justify-content: flex-start; }
#hand { flex: none; width: calc(var(--hw) * 14.5 + 13px); max-width: 100%; padding-right: 0; height: calc(var(--hw) * 1.85 + 5px); min-height: calc(var(--hw) * 1.85 + 5px); padding-top: calc(var(--hw) * .4); }
#hand .concealedHand { flex: none; }
#hand .drawSlot { position: static; flex: none; margin-left: calc(var(--hw) * .4); width: var(--hw); height: calc(var(--hw) * 1.33); }
#hand .tile.sel { transform: translateY(-9px) rotateX(24deg); }
#learningFacts { min-height: 96px; height: 96px; flex-wrap: nowrap; border-radius: 0; border-top: 1px solid #57725a55; overflow: hidden; }
.waitPanel { padding: 6px 8px 4px; overflow: hidden; }
.waitHeading { min-height: 20px; margin-bottom: 3px; gap: 6px; }
.waitHeading h3 { white-space: nowrap; }
.waitHeading > small { font-size: 9px; white-space: nowrap; }
.waitHeading h3 small { font-size: 9px; color: #9bb8a6; font-weight: 400; }
.scoreTabs { margin-left: auto; display: flex; gap: 2px; flex: none; }
.scoreTabs button { min-height: 22px; font-size: 10px; border: 1px solid #5b7c6655; background: #153b2d; color: #b5cdb8; border-radius: 5px; padding: 3px 7px; }
.scoreTabs button[aria-pressed=true] { background: #e5d7ab; color: #263d29; border-color: #e5d7ab; }
.scoreSlides { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.scoreSlides::-webkit-scrollbar, .guideSlides::-webkit-scrollbar { display: none; }
.scoreSlide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.waitList { flex-wrap: nowrap; min-height: 47px; height: 47px; overflow-x: auto; overflow-y: hidden; gap: 4px; scrollbar-width: thin; align-items: flex-start; }
.waitCard { flex: none; padding: 3px 5px; min-height: 43px; gap: 5px; }
.waitCard .factTile { width: 19px; height: 25px; }
.waitTile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.waitCard .waitTile > small { display: block; color: #afc9b6; font-size: 7px; white-space: nowrap; }
.waitCard > span:last-child { padding-top: 2px; gap: 3px; }
.waitCard small, .waitCard b { font-size: 9px; }
.waitNote { margin-top: 3px; font-size: 8px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doraPanel { padding: 7px 8px; min-width: 48px; max-width: 90px; }
.doraPanel h3 { gap: 4px; font-size: 11px; margin-bottom: 5px; }
.doraPanel .factTile { width: 18px; height: 24px; }
#playDock .coachCard { padding: 4px 8px; min-height: 26px; height: 26px; gap: 7px; border-radius: 0 0 12px 12px; }
#playDock #coach { min-height: 0; font-size: 10px; overflow: hidden; }
#playDock #coach [data-coach] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playDock .railEyebrow { font-size: 9px; }
#guideRail { overflow: hidden; padding: 0; min-width: 0; }
#railTabs { display: flex; flex: none; gap: 3px; }
#railTabs button { flex: 1; padding: 5px 4px; background: #163a2e; border: 1px solid #59735b55; border-radius: 7px; color: #acc7b2; font-size: 10px; min-height: 25px; }
#railTabs button[aria-pressed=true] { background: #43634a; color: #f5ebcc; border-color: #b9ba7366; }
.guideSlides { display: flex; position: relative; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#groupFacts, #roleFacts, #defenseFacts { flex: 0 0 100%; min-width: 0; width: 100%; padding: 8px; margin: 0; border-radius: 10px; border: 1px solid #789b7740; background: #112e27b8; }
#defenseFacts h3 { font-size: 12px; margin: 0 0 8px; }
.groupHeading { margin-bottom: 5px; }
.groupCategories { display: flex; flex-direction: column; gap: 4px; }
.groupCategory { display: flex; align-items: center; gap: 7px; min-height: 29px; }
.groupCategory > b { flex: 0 0 55px; font-size: 10px; font-weight: 500; color: #aac6b2; }
.groupCategory > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.groupExample { flex: none; max-width: none; display: inline-flex; padding: 3px 2px; gap: 0; border-radius: 5px; }
.groupExample .tile { --w: 14px; --thickness: 3px; margin-bottom: 1px; }
.noGroup { color: #526f5c; font-size: 12px; }
#shapeGuide { display: none !important; }
.guideless #railTabs { display: none; }
.side .river { --river-w: 25px; top: 326px; }

/* 金はドラだけ。アガリ牌は青い輪郭と高さで示す。 */
#banner .resultHero { padding: 18px 0 16px; }
#banner .resultHero h2 { font-size: clamp(28px, 5vw, 42px); margin: 0; color: #f3e6c4; }
#banner .resultHero h2 small { font-size: 14px; margin-left: 6px; }
.resultBonus { margin-bottom: 15px; padding: 10px 14px; border-radius: 12px; border: 1px solid #a6965e66; background: #b7a95a0a; }
.bonusLegend { display: flex; gap: 33px; margin-left: 52px; color: #94af9b; font-size: 9px; margin-bottom: 5px; }
.resultBonusLine { display: flex; align-items: center; gap: 10px; min-height: 37px; }
.resultBonusLine > b { width: 42px; flex: none; font-size: 11px; color: #c4d2b7; }
.resultBonusLine > i { font-style: normal; color: #95aa8b; font-size: 12px; }
.indicatorTiles, .actualBonusTiles { display: flex; align-items: center; gap: 3px; min-width: 26px; color: #708d74; }
.indicatorTiles .tile { --w: 20px; --thickness: 3px; }
.actualBonusTiles .factTile { width: 23px; height: 30px; background: #ffe4a0; box-shadow: inset 0 0 0 1px #bea05b; }
.shapeGroup .tile.finishTile, .shapeGroup .tile.win { outline: 2px solid #9bdbe9; outline-offset: 1px; transform: translateY(-7px); animation: none; }
.shapeGroup .tile.finishTile .tileFace { background: linear-gradient(145deg,#fffdf2,#eee5d0); }
#banner .tile.bonusTile > .tileFace { background: linear-gradient(145deg,#fff0a3,#e8bd4d); box-shadow: inset 0 0 0 1px #a57a25, inset 1px 1px 1px #fff8; }
#banner .tile.bonusTile.roleMatch > .tileFace { box-shadow: inset 0 0 0 2px #83c7b8; }
.winKey { color: #9bdbe9; }
.finalRanks { border-bottom: 2px solid #bba36e80; padding: 14px 0 20px; margin: 0 0 18px; }
#banner .finalRanks h2 { font-size: 25px; text-align: center; color: #e5d7af; letter-spacing: .15em; margin-bottom: 18px; }
.resultContinue [data-next-count] { font-size: 11px; align-self: center; }
@media (min-width:900px) {
  .guideSlides { flex-direction: column; overflow-y: auto; gap: 10px; }
  #railTabs { display: none; }
  #groupFacts, #roleFacts, #defenseFacts { flex: none; }
  .roleVisual { width: 100%; }
}
@media (max-width:899px) {
  #game { height: 100dvh; min-height: 0; overflow: hidden; padding: max(4px,env(safe-area-inset-top)) 5px max(4px,env(safe-area-inset-bottom)); gap: 4px; }
  #bar { min-height: 33px; height: 33px; padding-bottom: 3px; }
  #arena { flex: none; min-height: 0; }
  #stageWrap { flex: none; min-height: 130px; }
  #playDock { border-radius: 9px; }
  #mine { padding: 1px 4px 3px; }
  #meLine { height: 19px; min-height: 19px; }
  #meHead { max-width: 55%; font-size: 9px; }
  #shanten { font-size: 9px; padding: 2px 5px; }
  #hand .tile.sel { transform: translateY(-7px) rotateX(24deg); }
  #actions, #actions:not(:empty) { height: 35px; }
  .act, .act[data-a=pon], .act[data-a=skip] { height: 35px; min-width: 55px; padding: 4px 8px; font-size: 14px; }
  .act:has(.ponPreview) .actMain { flex-direction: row; }
  .ponPreview .tile { --w: 10px; }
  #learningFacts { height: 94px; min-height: 94px; }
  .waitPanel { padding: 4px 6px; }
  .waitHeading h3 { font-size: 10px; }
  .scoreTabs button { font-size: 9px; padding: 3px 5px; }
  .doraPanel { max-width: 68px; padding: 7px 5px; }
  .doraPanel h3 { flex-direction: column; gap: 2px; font-size: 10px; }
  #guideRail { height: 112px; flex: none; padding: 0; gap: 3px; }
  .guideSlides { height: 84px; flex: none; }
  #groupFacts, #roleFacts, #defenseFacts { scroll-snap-align: start; height: 84px; padding: 5px 7px; overflow-y: auto; scrollbar-width: thin; }
  .groupHeading, #roleFacts > h3 { display: none; }
  .groupCategory { min-height: 22px; gap: 4px; }
  .groupCategories { gap: 1px; }
  .groupCategory > b { flex-basis: 48px; font-size: 9px; }
  .groupExample { padding: 1px; }
  .groupExample .tile { --w: 12px; --thickness: 2px; }
  #roleFacts { display: flex; align-items: flex-start; gap: 5px; }
  .roleVisual { flex: 1 0 88px; max-width: 130px; width: auto; padding: 6px; margin: 0; }
  .roleVisual b { font-size: 11px; }
  .roleVisualBody { gap: 3px; font-size: 9px; margin-top: 5px; }
  .roleVisualBody .factTile, .missingTile { width: 14px; height: 19px; }
  .roleGoal { display: none; }
  #defenseFacts h3 { display: none; }
  .defenseRow { font-size: 10px; min-height: 25px; }
  .defenseLegend { font-size: 8px; }
  .resultBonus { padding: 7px 10px; }
}
/* 手番によって余白を変えない。左右・上下の移動をここで防ぐ。 */
#mine, #mine.turn { padding: 2px 6px 4px; }
@media (max-width:899px) {
  #mine, #mine.turn { padding: 1px 4px 3px; }
  #railTabs { height: 25px; }
  #railTabs button { height: 25px; line-height: 14px; padding-top: 4px; padding-bottom: 4px; }
  .groupExample .tile { --w: clamp(12px, calc((100vw - 132px) / 14), 16px); }
  .groupCategory > b { font-size: 10px; }
}
.addedStack { position: relative; display: inline-flex; align-items: flex-end; }
.side .tableMelds .addedStack > .tile.addedKan { position: absolute; left: 0; bottom: calc(var(--w) * 1.05); }
#wallMini { font-size: 11px; color: #b3cbb9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.waitCard .waitTile > small b { font-size: 11px; color: #e6d8aa; margin: 0 1px; }
@media (max-width:899px) { .gameBrand { display: none; } #wallMini { font-size: 10px; } }
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #mine { --hw: min(calc((100cqw - 26px) / 14.5), 24px); }
}

/* 代走の切り替えはヘッダーに、復帰は画面中央の主操作にする。 */
#bar .autoPlayToggle { margin-left: auto; flex: none; min-height: 32px; padding: 5px 10px; border: 1px solid #8caf94; border-radius: 7px; background: #214638; color: #eff8ed; font-size: 12px; white-space: nowrap; }
#bar .autoPlayToggle[aria-pressed=true] { background: #f4d98c; color: #193a2d; border-color: #ffe7aa; }
#returnControl { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 40px)); z-index: 25; }
#returnControl .act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; min-height: 88px; padding: 18px 22px; border: 2px solid #fff1bd; border-radius: 14px; background: linear-gradient(145deg,#ffecb5,#f1ca72); color: #173c2c; box-shadow: 0 10px 38px #0009, 0 0 0 5px #173d32aa; }
#returnControl .act small { font-size: 12px; color: #3e5740; }
#returnControl .act span { font-size: 23px; font-weight: 700; color: #173c2c; line-height: 1.3; }
#returnControl .act:hover { background: #fff0bb; }
#returnControl .act:focus-visible { outline: 3px solid #9be9ff; outline-offset: 6px; }
#banner .winnerName { font-size: 16px; color: #e4e9d9; margin: 0 0 7px; overflow-wrap: anywhere; }
#banner .resultHandValue { font-size: 13px; font-weight: 400; color: #bfd0b8; margin: 7px 0 0; }
.fuEquation { font-size: 10px; line-height: 1.8; color: #a7bba4; margin: -4px 0 15px; }
.resultContinue > p { text-align: center; color: #bdcfb8; font-size: 12px; margin: 0; padding: 3px 0; }
@media (max-width:480px) {
  #bar { gap: 4px; }
  #bar .autoPlayToggle { font-size: 11px; padding: 4px 7px; min-height: 30px; }
  #bar .icon { min-width: 28px; width: 28px; height: 30px; }
  #bar #soundBtn { width: 38px; min-width: 38px; font-size: 10px; }
  #wallMini { display: none; }
}

#lobbyCode { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
#lobbyCode > small { grid-column: 1; font-size: 11px; }
#lobbyCode > b { grid-column: 1; font-size: 34px; }
#copyRoomBtn { grid-column: 2; grid-row: 1 / 3; font-size: 11px; padding: 9px; min-height: 40px; }
#lobbySeats b { min-width: 0; overflow-wrap: anywhere; }
#lobbySeats small { flex: none; font-size: 10px; }
#lobbyNote { color: #a8c6b5; font-size: 11px; line-height: 1.6; margin: 0 0 14px; }
.rematchNote { display: block; text-align: center; color: #b4c8b3; font-size: 11px; margin-bottom: 9px; }
#fullscreenBtn { font-size: 22px; line-height: 1; }
@media (max-width:480px) { #roundMini { display: none; } }

/* スマホは手牌の下、PCは右側へ同じ情報を移す。 */
#sidebarFacts:empty { display: none; }
#fullscreenBtn { margin-left: 0; }
@media (min-width:900px) {
  #game { max-width: none; grid-template-columns: minmax(0,1fr) clamp(300px,26vw,360px); }
  #guideRail { overflow-y: auto; gap: 12px; padding-right: 3px; }
  #sidebarFacts { display: flex; flex-direction: column; gap: 12px; flex: none; min-width: 0; }
  #sidebarFacts #learningFacts { height: auto; min-height: 0; flex: none; flex-direction: column; overflow: visible; border: 1px solid #57725a77; border-radius: 12px; }
  #sidebarFacts .waitPanel { flex: none; padding: 14px; overflow: visible; }
  #sidebarFacts .waitHeading { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  #sidebarFacts .waitHeading h3 { font-size: 16px; }
  #sidebarFacts .waitHeading h3 small, #sidebarFacts .waitHeading > small { font-size: 12px; }
  #sidebarFacts .scoreTabs { margin-left: 0; }
  #sidebarFacts .scoreTabs button { min-height: 30px; font-size: 12px; padding: 5px 10px; }
  #sidebarFacts .waitList { flex-wrap: wrap; height: auto; min-height: 58px; overflow: visible; gap: 8px; }
  #sidebarFacts .waitCard { flex: 1 1 125px; padding: 7px; min-height: 60px; gap: 7px; }
  #sidebarFacts .waitCard .factTile { width: 27px; height: 36px; }
  #sidebarFacts .waitCard small, #sidebarFacts .waitCard b { font-size: 12px; }
  #sidebarFacts .waitCard .waitTile > small { font-size: 10px; }
  #sidebarFacts .waitNote { margin-top: 10px; font-size: 11px; white-space: normal; line-height: 1.5; }
  #sidebarFacts .doraPanel { display: flex; align-items: center; gap: 16px; flex: none; padding: 12px 14px; max-width: none; border-left: 0; border-top: 1px solid #57725a66; }
  #sidebarFacts .doraPanel h3 { margin: 0; font-size: 15px; gap: 7px; }
  #sidebarFacts .doraPanel h3 small { font-size: 12px; }
  #sidebarFacts .doraPanel .factTiles { max-width: none; }
  #sidebarFacts .doraPanel .factTile { width: 26px; height: 35px; }
  #sidebarFacts #coachCard { flex: none; min-width: 0; gap: 10px; padding: 14px; border: 1px solid #789b7740; border-radius: 12px; background: #15382e; }
  #sidebarFacts .railEyebrow { display: flex; flex-wrap: wrap; font-size: 13px; color: #b4d6be; gap: 7px; }
  #sidebarFacts #tableContext { flex: 1 0 100%; margin: 0; font-size: 12px; white-space: normal; }
  #sidebarFacts #coach { min-height: 24px; height: auto; font-size: 16px; line-height: 1.65; color: #e4eedf; }
  #sidebarFacts #coach [data-coach] { white-space: normal; overflow-wrap: anywhere; }
  #guideRail .guideSlides { flex: none; overflow: visible; }
  .groupHeading h3, #roleFacts > h3 { font-size: 15px; }
  .groupCategory > b { font-size: 12px; flex-basis: 64px; }
  .groupExample .tile { --w: 18px; }
}