/* 既存の木の盤・和紙・駒を使った遊び将棋。 */
#screen-variants [hidden], #screen-variant-game [hidden] { display: none !important; }
.variant-intro { color: var(--text-dim); font-size: .86rem; line-height: 1.8; margin: 6px 4px 16px; }
.variant-mode-list { display: grid; gap: 8px; margin-bottom: 18px; }
.variant-mode { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: start; cursor: pointer; }
.variant-mode[aria-pressed='true'] { border-color: var(--accent); background: linear-gradient(130deg, var(--accent-soft), var(--panel)); box-shadow: inset 3px 0 var(--accent); }
.variant-mode-icon { font-family: 'Yu Mincho', serif; color: var(--accent); font-size: 1.7rem; width: 36px; text-align: center; }
.variant-mode-body { display: grid; gap: 5px; flex: 1; min-width: 0; }
.variant-mode-body b { font-size: .97rem; }
.variant-mode-body small { color: var(--text-dim); font-size: .75rem; }
.variant-mode-check { color: var(--accent); visibility: hidden; }
.variant-mode[aria-pressed='true'] .variant-mode-check { visibility: visible; }
.variant-rules summary { cursor: pointer; font-size: .84rem; color: var(--accent); padding: 6px 0; min-height: 34px; }
.variant-rules-list { padding-inline-start: 22px; padding-inline-end: 0; font-size: .8rem; line-height: 1.8; color: var(--text-dim); margin: 10px 0; }
.variant-rules-list li { padding-inline-start: 3px; margin-bottom: 9px; }
.variant-rule-source { color: var(--accent); font-size: .73rem; line-height: 1.6; }
.variant-footnote { text-align: center; line-height: 1.7; margin: 12px 8px; }
#variant-load-message:empty { display:none; }
.variant-option-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.variant-option-row .field { min-width: 0; }
.variant-mode:disabled { cursor: default; }
.variant-online-options { margin-bottom: 12px; }
.variant-online-options .field { margin-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .variant-online-options .btn.primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #f1cc86, #e0ad59 52%, #ca8d39);
    color: #211608;
  }
}
.variant-room-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.variant-room-header b { color: var(--accent); font-size: .95rem; line-height: 1.6; }
.variant-room-header .badge { flex-shrink: 0; }
#variant-room-list { margin-top: 10px; }
.variant-public-room .meta { min-width: 0; overflow-wrap: anywhere; }
.variant-public-room .room-actions { flex-shrink: 0; }
.variant-room-players { padding-inline-start: 20px; font-size: .8rem; color: var(--text-dim); line-height: 1.9; overflow-wrap: anywhere; }
.variant-online-error { color: var(--danger); font-size: .76rem; line-height: 1.6; margin: 8px 0 0; }
.variant-online-error:empty { display: none; }
.variant-connection { margin: 2px 1px 5px; font-size: .66rem; line-height: 1.5; color: var(--accent); overflow-wrap: anywhere; }
.variant-status b { overflow-wrap: anywhere; }
.variant-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.variant-score { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--panel); }
.variant-score.current { border-color: var(--accent); background: var(--accent-soft); }
.variant-score span { font-size: .7rem; color: var(--text-dim); }
.variant-score b { font-size: .85rem; font-variant-numeric: tabular-nums; }
.variant-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; font-size: .85rem; }
.variant-status b { color: var(--accent); }
#variant-check { color: var(--danger); font-size: .73rem; }
.variant-notice { font-size: .76rem; color: var(--text-dim); line-height: 1.65; min-height: 38px; margin: 2px 2px 8px; }
.variant-board-area { padding: 20px 18px 12px 8px; }
#variant-board-frame { width: 100%; height: auto; aspect-ratio: 1 / 1.07; }
#variant-board-frame :is(.coord-files, .coord-ranks) { color: var(--text-dim); }
#variant-board-grid { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
#variant-board-grid .koma { font-size: clamp(16px, 5vw, 21px); }
.variant-hand-label { margin: 2px 0 4px; }
.variant-handoff { text-align: center; padding: 28px 18px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.variant-handoff > .icon { width: 42px; height: 42px; margin: 0 auto 18px; color: var(--accent); }
.variant-handoff h3 { line-height: 1.7; }
.variant-handoff .hint { margin-bottom: 24px; }
.variant-actions { display: flex; gap: 4px; justify-content: space-around; margin: 6px 0; }
.variant-actions .btn { font-size: .76rem; padding-inline: 8px; }
.variant-result { border-color: var(--accent); margin-top: 12px; }
.variant-result h3 { font-size: 1.25rem; }
.variant-result .row { flex-wrap: wrap; }
.variant-promotion { border-color: var(--accent); }
.variant-promotion .row { flex-wrap: wrap; }
#variant-board-grid .cell:disabled { opacity: 1; }
:root { --mawari-player-0: #b3442e; --mawari-player-1: #236c9a; --mawari-player-2: #3a7841; --mawari-player-3: #85519a; }
.player-0 { --mawari-color: var(--mawari-player-0); color: var(--mawari-color); }
.player-1 { --mawari-color: var(--mawari-player-1); color: var(--mawari-color); }
.player-2 { --mawari-color: var(--mawari-player-2); color: var(--mawari-color); }
.player-3 { --mawari-color: var(--mawari-player-3); color: var(--mawari-color); }
.mawari-scores { grid-template-columns: repeat(var(--mawari-count, 2), minmax(0, 1fr)); }
.mawari-scores .variant-score { padding: 7px 7px 6px; border-top: 3px solid var(--mawari-color); gap: 3px; }
.mawari-scores .variant-score span { font-size: .66rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mawari-scores .variant-score b { color: var(--text); font-size: .76rem; }
.mawari-scores .variant-score > b { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mawari-score-track { display: flex; gap: 3px; margin-top: 2px; }
.mawari-score-track i { height: 3px; flex: 1; background: var(--line); border-radius: 2px; }
.mawari-score-track i.reached { background: var(--mawari-color); }
.mawari-score-track i.active { box-shadow: 0 0 0 1px var(--mawari-color); background: var(--text); }
.mawari-scores .variant-score.eliminated { opacity: .6; }
#screen-variant-game[data-variant='mawari'] .variant-notice { min-height: 27px; margin-bottom: 0; font-size: .72rem; }
#screen-variant-game[data-variant='mawari'] #variant-board-frame { aspect-ratio: 1; }
#screen-variant-game[data-variant='mawari'] .variant-board-area { padding: 3px; }
#screen-variant-game[data-variant='mawari'] :is(.coord-files, .coord-ranks) { display: none; }
#screen-variant-game[data-variant='mawari'] .cell { cursor: default; }
#screen-variant-game[data-variant='mawari'] .cell:not(.mawari-path) { background: rgba(255, 235, 188, .42); border-color: transparent; }
#screen-variant-game[data-variant='mawari'] .cell.star::before { display: none; }
#screen-variant-game[data-variant='mawari'] .cell.mawari-path { background: linear-gradient(140deg, #fff0c452, #dcad6317); box-shadow: inset 0 1px #fff7df4d, inset 0 -2px #5f370b22; }
#screen-variant-game[data-variant='mawari'] .cell.mawari-corner { background: #ffe8a98f; box-shadow: inset 0 0 0 2px #90562466; }
#screen-variant-game[data-variant='mawari'] .cell.mawari-last-landing { box-shadow: inset 0 -3px var(--trail-color); }
#screen-variant-game[data-variant='mawari'] .cell.mawari-current { box-shadow: inset 0 0 0 2px var(--mawari-color); background: #ffe6acb3; }
#screen-variant-game[data-variant='mawari'] .cell.mawari-next-corner { outline: 2px dashed var(--mawari-color); outline-offset: -4px; }
#screen-variant-game[data-variant='mawari'] .cell.mawari-target { outline: 3px solid var(--trail-color); outline-offset: -4px; background: color-mix(in srgb, var(--trail-color) 22%, #fff0bf); }
#screen-variant-game[data-variant='mawari'] .cell.mawari-trail { background: color-mix(in srgb, var(--trail-color) 30%, #ffe6b3); }
#screen-variant-game[data-variant='mawari'] .cell.mawari-landing { animation: mawari-landing .55s ease-out; }
#screen-variant-game[data-variant='mawari'] .cell:is([data-index='4'], [data-index='44'], [data-index='76'], [data-index='36'])::after { position: absolute; color: #6d461d; font: 700 16px system-ui; opacity: .7; pointer-events: none; }
#screen-variant-game[data-variant='mawari'] .cell[data-index='4']::after { content: '→'; }
#screen-variant-game[data-variant='mawari'] .cell[data-index='44']::after { content: '↓'; }
#screen-variant-game[data-variant='mawari'] .cell[data-index='76']::after { content: '←'; }
#screen-variant-game[data-variant='mawari'] .cell[data-index='36']::after { content: '↑'; }
.mawari-token { position: absolute; left: 50%; top: 50%; width: 82%; height: 91%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
#variant-board-grid .mawari-token .koma, .mawari-runner .mawari-token .koma { width: 100%; height: 100%; font-size: clamp(15px, 4.8vw, 21px); color: var(--mawari-color); }
.mawari-token.active { z-index: 5; filter: drop-shadow(0 1px 2px #3b210977); }
.mawari-token small { position: absolute; right: -2px; bottom: -2px; border-radius: 50%; color: #fff; background: var(--mawari-color); font: 700 8px system-ui; width: 12px; height: 12px; display: grid; place-items: center; border: 1px solid #fff6; z-index: 4; }
.mawari-token.eliminated { filter: grayscale(1); opacity: .5; }
.mawari-stack .mawari-token { width: 47%; height: 51%; }
#variant-board-grid .mawari-stack .mawari-token .koma { font-size: clamp(8px, 3.8cqw, 13px); }
.mawari-stack .mawari-token small { width: 8px; height: 8px; font-size: 6px; right: -1px; bottom: -1px; }
.mawari-start { position: absolute; top: 1px; left: 2px; font: 800 7px system-ui; pointer-events: none; }
.mawari-motion-layer { position: absolute; inset: 5px; pointer-events: none; z-index: 9; }
.mawari-runner { position: absolute; width: calc(100% / 9 * .87); height: calc(100% / 9 * .91); transform: translate(-50%, -50%); }
.mawari-runner .mawari-token { width: 100%; height: 100%; }
.variant-dice-panel { --mawari-color: var(--mawari-player-0); --mawari-ink: #503513; position: absolute; inset: 13% 16%; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 14px minmax(44px, 1fr) 25px 21px 44px; gap: 4px; padding: 9px; border: 1px solid #a6783eaa; border-radius: 14px; color: var(--mawari-ink); text-align: center; background: radial-gradient(ellipse at 30% 0, #fff8e8, #f4dfb8 90%); box-shadow: 0 5px 18px #55300940, inset 0 0 0 3px #fff7df80; }
.mawari-stage-heading { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.mawari-stage-heading b { font: 700 11px system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mawari-stage-mark { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #b78c53; border-radius: 50%; color: #a57630; font: 800 12px 'Yu Mincho', serif; }
.variant-dice { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 7px; padding: 9px 2px 2px; border-radius: 8px; background: radial-gradient(ellipse at 50% 70%, #b77c3026, transparent 75%); }
#variant-roll-label { color: #795323; font: 600 10px/14px system-ui; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gold-die { --gold-width: clamp(20px, 9.4cqw, 36px); --gold-depth: calc(var(--gold-width) * .22); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; perspective: 240px; min-width: 0; }
.gold-piece { position: relative; width: var(--gold-width); height: calc(var(--gold-width) * 1.16); transform-style: preserve-3d; z-index: 2; }
.gold-face { --mawari-wood: url('../assets/koma-wood-real-v2.jpg'); position: absolute; inset: 0; display: grid; place-items: center; clip-path: polygon(50% 0, 85% 15%, 100% 100%, 0 100%, 15% 15%); background: linear-gradient(130deg, #fff0bb8f, #b07c322b), var(--mawari-wood), var(--koma-face); background-size: auto, cover; font: 800 calc(var(--gold-width) * .66) 'Yu Mincho', serif; color: var(--koma-text); backface-visibility: hidden; box-shadow: inset 0 -2px #81511d66; text-shadow: 0 1px #ffedc777; }
.gold-front { transform: translateZ(calc(var(--gold-depth) / 2)); }
.gold-back { transform: rotateY(180deg) translateZ(calc(var(--gold-depth) / 2)); background: linear-gradient(145deg, #ffe3a54d, #b78b4833), var(--mawari-wood), var(--koma-face-2); background-size: auto, cover; }
.gold-edge { position: absolute; height: var(--gold-depth); background: repeating-linear-gradient(0deg, #c1985d, #b08345 1px, #d9b679 2px); box-shadow: inset 0 1px #ffedc977, inset 0 -1px #67401577; }
.gold-edge-0, .gold-edge-4 { filter: brightness(1.08); }
.gold-edge-2 { filter: brightness(.83); }
.gold-shadow { position: absolute; top: calc(var(--gold-width) * 1.06); width: var(--gold-width); height: 7px; border-radius: 50%; background: #69451d61; filter: blur(2px); }
.gold-die small { display: grid; gap: 1px; max-width: 100%; font-size: 8px; line-height: 10px; color: #775020; }
.gold-die small > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gold-die small b { font: 800 11px/12px system-ui; }
.variant-dice.unrolled small > span { visibility: hidden; }
.variant-dice-panel[data-phase='rolling'] .gold-die small { visibility: hidden; }
.mawari-roll-summary { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 3px; }
#mawari-effect { min-width: 0; font-size: 10px; line-height: 1.3; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mawari-total { display: flex; align-items: baseline; gap: 3px; color: #82540f; }
.mawari-total b { font: 800 27px system-ui; line-height: 1; font-variant-numeric: tabular-nums; }
.mawari-total small { font-size: 8px; white-space: nowrap; }
.mawari-objective { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 4px; padding: 2px 3px; border-top: 1px solid #ba975e66; color: var(--mawari-color); }
#mawari-next-piece { flex: none; font: 800 12px/16px 'Yu Mincho', serif; }
#mawari-target-label { font: 600 9px/14px system-ui; color: var(--mawari-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mawari-king-goal .mawari-objective { background: #e7bd523b; border-radius: 4px; }
.mawari-rank-track { display: flex; align-items: center; justify-content: space-between; gap: 2px; border-top: 1px solid #ba975e55; padding-top: 3px; }
.mawari-rank-track span { display: grid; place-items: center; width: 19px; height: 18px; color: #97846b; font: 700 11px 'Yu Mincho', serif; border-radius: 4px; }
.mawari-rank-track .reached { color: #765628; }
.mawari-rank-track .active { color: #fff9e9; background: var(--mawari-color); box-shadow: 0 1px 3px #663b1544; }
#variant-roll { min-width: 0; min-height: 44px; height: 44px; padding: 0 4px; border-radius: 8px; font-size: 12px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; background: linear-gradient(145deg, #be8b37, #946019); color: #fff9e9; border-color: #a27228; box-shadow: 0 2px 0 #775013, inset 0 1px #fff1af77; }
#variant-roll:disabled { opacity: .75; box-shadow: none; }
#variant-roll:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
#variant-roll > span { font-size: 18px; vertical-align: -1px; }
.mawari-celebration { position: absolute; inset: 12% 0 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 11px; background: radial-gradient(ellipse, #fff8defa 45%, #ffeabdde); pointer-events: none; z-index: 10; }
.mawari-celebration small { color: #936715; font: 700 11px/1.3 system-ui; max-width: 100%; text-align: center; }
.mawari-celebration b { max-width: 100%; color: #a56518; font: 700 11px/1.4 system-ui; text-shadow: 0 1px #fff; text-align: center; overflow-wrap: anywhere; }
.mawari-award { display: flex; align-items: center; gap: 8px; color: var(--mawari-color); }
.mawari-award .koma { width: clamp(22px, 11cqw, 40px); height: clamp(26px, 13cqw, 47px); font-size: clamp(18px, 8cqw, 31px); }
.mawari-award > .koma:last-child { filter: drop-shadow(0 0 5px #b77922a6); }
.mawari-spark { position: absolute; left: 50%; top: 50%; width: 5px; height: 8px; border-radius: 1px; background: #bf8c32; animation: mawari-spark .55s ease-out both; }
.mawari-spark:nth-child(3n) { background: var(--mawari-color); }
@keyframes mawari-spark { from { transform: rotate(var(--spark-angle)) translateY(8px) scale(.4); opacity: 1; } to { transform: rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) rotate(80deg); opacity: 0; } }
@keyframes mawari-landing { from { box-shadow: inset 0 0 0 4px var(--trail-color), 0 0 14px #f1cf75; } to { box-shadow: inset 0 0 0 1px transparent; } }
@media (max-width: 350px) {
  .mawari-stage-heading b { font-size: 10px; }
  .mawari-stage-mark { width: 16px; height: 16px; font-size: 10px; }
  .variant-dice { gap: 4px; }
  .gold-die small { font-size: 7px; line-height: 9px; }
  .mawari-total b { font-size: 23px; }
  #mawari-effect { font-size: 8px; }
  #variant-roll { font-size: 11px; }
  .mawari-rank-track span { height: 15px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mawari-spark, .cell.mawari-landing { animation: none; } }
html[data-motion='reduced'] .mawari-spark, html[data-motion='reduced'] .cell.mawari-landing { animation: none; }
.four-player-0 { --four-color: #b3442e; }
.four-player-1 { --four-color: #236c9a; }
.four-player-2 { --four-color: #3a7841; }
.four-player-3 { --four-color: #85519a; }
.four-score { border-inline-start: 4px solid var(--four-color); }
.four-score.current { border-color: var(--four-color); }
.four-scores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.four-scores .four-score { padding: 7px 6px; }
.four-scores .four-score span { white-space: nowrap; font-size: .67rem; }
.four-scores .four-score b { font-size: .7rem; }
.four-guide { font-size: .65rem; line-height: 1.5; margin: 2px 2px 0; }
#screen-variant-game[data-variant='four'] .variant-notice { min-height: 32px; font-size: .7rem; line-height: 1.5; margin-bottom: 3px; }
.four-owner-marker { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--four-color); font: 700 9px system-ui; z-index: 3; pointer-events: none; }
#variant-board-grid .four-eliminated-piece { filter: grayscale(1); opacity: .65; }
#variant-board-grid .four-back-king { opacity: .85; }
.four-hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 12px; }
.four-hand-section { border: 1px solid var(--line); border-inline-start: 3px solid var(--four-color); border-radius: 8px; padding: 8px; background: var(--panel); }
.four-hand-section.current { border-color: var(--four-color); }
.four-hand-section > b { display: block; color: var(--text-dim); font-size: .68rem; }
.four-hand-tray { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; min-height: 39px; margin-top: 3px; }
.four-hand-tray > .hint { margin: 0; font-size: .7rem; }
.four-hand-piece { display: flex; align-items: center; gap: 2px; min-height: 40px; border: 1px solid transparent; border-radius: 5px; padding: 3px; cursor: pointer; background: transparent; color: var(--text); }
.four-hand-piece[aria-pressed='true'] { border-color: var(--four-color); background: var(--accent-soft); }
.four-hand-piece:disabled { cursor: default; opacity: .65; }
.four-hand-piece .koma { width: 24px; height: 28px; font-size: 17px; }
.four-hand-piece > span:last-child { font-size: .66rem; }
@media (max-width: 350px) {
  .variant-score { padding: 7px 9px; }
  .four-scores .four-score { padding: 6px 4px; }
  .four-scores .four-score b { font-size: .65rem; }
  .variant-board-area { padding-left: 5px; padding-right: 16px; }
  #variant-board-grid .koma { font-size: 16px; }
  .mawari-token { font-size: 15px; }
}
/* 3D 山くずし. Left-drag moves pieces; right-drag and wheel control the camera. */
.kuzushi-stage { position:relative; width:100%; aspect-ratio:1; min-height:280px; overflow:hidden; border-radius:18px; background:#272a24; border:1px solid #897455; box-shadow:0 12px 25px #0003; }
#kuzushi-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:default; }
#kuzushi-canvas[data-hover-piece], #kuzushi-canvas[data-control="camera"] { cursor:grab; }
#kuzushi-canvas[data-gesture="piece"], #kuzushi-canvas[data-gesture="camera"] { cursor:grabbing; }
#kuzushi-canvas:focus-visible { outline:3px solid var(--accent,#d2a65a); outline-offset:-4px; }
.kuzushi-stage-hud { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; gap:8px; color:#fff4da; font-size:12px; pointer-events:none; }
.kuzushi-stage-hud span { padding:5px 8px; border-radius:8px; background:#1e241cbd; backdrop-filter:blur(8px); border:1px solid #dccb9f2b; }
.kuzushi-counts { display:flex; align-items:flex-start; flex-wrap:wrap; gap:5px; }
#kuzushi-streak { color:#fff1b6; border-color:#e9c87765; background:#624c24d9; }
#kuzushi-selected { align-self:flex-start; }
.kuzushi-stage[data-tension="risk"] { border-color:#daa369; }
.kuzushi-stage[data-tension="collapse"] { border-color:#c77b53; }
.kuzushi-feedback { position:absolute; bottom:14px; left:14px; max-width:calc(100% - 28px); padding:9px 12px; border-radius:11px; color:#fff4da; background:#24291fec; border:1px solid #d5c99b70; box-shadow:0 3px 12px #0003; pointer-events:none; }
.kuzushi-feedback strong, .kuzushi-feedback span { display:block; }
.kuzushi-feedback strong { font-size:14px; letter-spacing:.02em; }
.kuzushi-feedback span { margin-top:2px; font-size:11px; color:#e7d6b7; }
.kuzushi-feedback[data-kind="success"], .kuzushi-feedback[data-kind="complete"] { border-color:#b6dcb783; background:#284233ec; }
.kuzushi-feedback[data-kind="collapse"] { border-color:#e2a67d83; }
.kuzushi-feedback[hidden], #kuzushi-streak[hidden] { display:none; }
.kuzushi-camera-controls { display:flex; gap:3px; justify-content:center; margin:7px 0 4px; }
.kuzushi-camera-controls .btn { font-size:12px; padding:8px 10px; min-height:40px; }
.kuzushi-camera-controls button[aria-pressed="true"] { background:#486f56; color:#fff; }
#kuzushi-instruction { margin:3px 0 10px; font-size:12px; line-height:1.7; }
.kuzushi-noise-row { display:flex; align-items:center; gap:12px; margin:5px 0 12px; font-size:12px; }
#kuzushi-noise-label { min-width:9em; }
.kuzushi-noise-meter { position:relative; flex:1; height:9px; background:#54735d29; border-radius:10px; overflow:hidden; }
.kuzushi-noise-meter i { display:block; height:100%; width:0; background:#609f79; transition:width .12s linear; }
.kuzushi-noise-meter.noisy i { background:#c66a45; }
.kuzushi-noise-meter b { position:absolute; height:100%; width:2px; background:#aa734e; top:0; left:50%; }
.kuzushi-pull-controls { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:8px; }
.kuzushi-pull-controls .field { min-width:0; margin:0; }
.kuzushi-pull-controls select { width:100%; min-width:0; font-size:13px; }
#kuzushi-pull { grid-column:1 / -1; min-height:44px; touch-action:none; user-select:none; }
.kuzushi-error { position:absolute; inset:0; display:grid; place-items:center; padding:28px; background:#232922e8; color:#fff4db; text-align:center; }
.kuzushi-error[hidden] { display:none; }
.kuzushi-scores { grid-template-columns:repeat(var(--mawari-count),minmax(0,1fr)); }
.kuzushi-scores .variant-score { min-width:0; }
.kuzushi-scores .variant-score span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
.kuzushi-scores .variant-score b { font-size:19px; }
@media(max-width:360px) { .kuzushi-camera-controls .btn { padding:7px 6px; font-size:11px; } .kuzushi-stage-hud { left:8px; right:8px; font-size:10px; } }

/* The playfield uses the space left by the compact HUD; secondary controls
   live in modal menus, so neither rules nor long player names shrink the board. */
#screen-variants, #screen-variant-game {
  padding: calc(var(--safe-top) + 6px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 10px);
}
html[lang='ru'] :is(#screen-variants, #screen-variant-game) {
  --font-mincho: Georgia, 'Times New Roman', serif;
  --font-gothic: 'Segoe UI', system-ui, sans-serif;
  font-family: var(--font-gothic);
}
:is(#screen-variants, #screen-variant-game) > .title-bar { flex: none; min-height: 44px; margin-bottom: 6px; padding: 0 0 5px; gap: 8px; }
:is(#screen-variants, #screen-variant-game) > .title-bar .btn { min-height: 40px; width: 40px; height: 40px; padding: 8px; }
:is(#screen-variants, #screen-variant-game) > .title-bar h2 { font-size: 1rem; }
:is(#screen-variants, #screen-variant-game) > .screen-scroll { display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 6px; overflow: hidden; }
#screen-variants .variant-mode-list { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; gap: 5px; margin: 0; }
#screen-variants .variant-mode { position: relative; min-height: 54px; padding: 5px 3px; border-radius: 8px; justify-content: center; text-align: center; }
#screen-variants .variant-mode-icon, #screen-variants .variant-mode-check { display: none; }
#screen-variants .variant-mode-body { gap: 3px; }
#screen-variants .variant-mode-body b { font: 700 12px/1.3 var(--font-mincho); letter-spacing: 0; }
#screen-variants .variant-mode-body small { font-size: 10px; line-height: 1.2; }
#screen-variants .variant-setup-card { flex: none; padding: 8px 0; margin: 0; border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; }
#variant-setup-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#screen-variants .variant-option-row { gap: 8px; }
#screen-variants .variant-option-row:has(> #variant-player-field[hidden]) { grid-template-columns: minmax(0, 1fr); }
#screen-variants .field { margin: 0; min-width: 0; }
#screen-variants .field > label { font-size: 11px; margin-bottom: 3px; }
#screen-variants .control { padding: 8px 10px; min-height: 40px; height: 40px; font-size: 14px; }
#variant-ai-options { margin-top: 8px; }
#variant-online-name { font-size: 16px !important; }
#variant-name-error:empty { display: none; }
#screen-variants .variant-online-options { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; gap: 4px; }
#variant-online-form { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.variant-online-entry { flex: none; display: grid; gap: 7px; }
#screen-variants .variant-online-buttons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 5px; }
#screen-variants .variant-online-options .field { margin: 0; }
#screen-variants .variant-online-options .btn { min-height: 40px; padding: 7px 8px; font-size: 12px; }
#screen-variants .variant-room-browser { display: flex; flex-direction: column; flex: 1; min-height: 80px; padding: 8px 10px; margin: 0; }
#screen-variants .variant-room-header { gap: 5px; }
#screen-variants .variant-room-header h3 { font-size: 12px; margin: 0; }
#screen-variants #variant-refresh-rooms { min-height: 40px; height: 40px; width: 40px; }
#variant-room-list { flex: 1; margin: 0; min-height: 54px; overflow-y: auto; overscroll-behavior: contain; }
#variant-room-list .room-item { flex-direction: row; align-items: center; padding: 7px; gap: 6px; margin-top: 5px; }
#variant-room-list .room-status { font-size: 11px; }
#variant-room-list .room-detail { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#variant-room-list .room-actions .btn { font-size: 11px; min-height: 40px; padding: 6px 8px; }
#variant-room-list-status { margin: 3px 0 0; font-size: 11px; line-height: 1.5; }
#variant-room-list-status:empty { display: none; }
#screen-variants #variant-online-lobby { margin: 0; padding: 10px; }
#variant-online-lobby .variant-room-header b { font-size: 13px; }
#variant-room-status { font-size: 12px; margin: 6px 0; }
#variant-room-players { padding: 0; list-style: none; margin: 6px 0; line-height: 1.8; }
.variant-setup-actions { display: flex; flex: none; gap: 6px; margin-top: auto; }
.variant-setup-actions .btn { flex: 1; min-width: 0; min-height: 44px; padding: 8px; font-size: 13px; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
#variant-setup-help { flex: 0 1 auto; min-width: 72px; }
#variant-load-message { margin: 0; font-size: 11px; line-height: 1.5; }

#screen-variant-game .variant-scores { flex: none; margin: 0; gap: 4px; }
#screen-variant-game .variant-score { min-width: 0; padding: 4px 6px; gap: 2px; border-radius: 7px; }
#screen-variant-game .variant-score span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-variant-game .variant-score b { font-size: 12px; line-height: 1.25; }
#screen-variant-game .variant-status { flex: none; padding: 0 1px; min-height: 20px; gap: 5px; font-size: 12px; }
#variant-turn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#variant-check { flex: none; font-size: 11px; }
#screen-variant-game .variant-connection { margin: 0 0 0 auto; font-size: 10px; flex: none; }
#screen-variant-game #variant-notice { flex: none; margin: 0; min-height: 16px; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#variant-private { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 4px; }
#screen-variant-game .variant-board-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 15px 15px 3px 3px; container-type: size; }
#screen-variant-game #variant-board-frame { flex: none; width: min(100cqw, calc(100cqh / 1.07)); height: auto; aspect-ratio: 1 / 1.07; container-type: inline-size; }
#screen-variant-game[data-variant='mawari'] #variant-board-frame { width: min(100cqw, 100cqh); aspect-ratio: 1; }
#variant-board-grid .koma { font-size: clamp(11px, 6cqw, 20px); }
#variant-board-frame :is(.coord-files, .coord-ranks) { font-size: 10px; }
#screen-variant-game .variant-hand-label { flex: none; margin: 0; font-size: 10px; line-height: 12px; }
#screen-variant-game .hand-tray { flex: none; min-height: 42px; height: 42px; padding: 2px 5px; gap: 4px; border-radius: 8px; }
#screen-variant-game .hand-koma { width: 32px; height: 34px; }
#screen-variant-game .hand-koma .koma { font-size: 17px; }
#screen-variant-game .four-hands { flex: none; display: block; margin: 0; }
#screen-variant-game .four-hand-section { display: flex; align-items: center; gap: 5px; padding: 2px 5px; min-height: 44px; border-radius: 8px; }
#screen-variant-game .four-hand-section > b { flex: 0 1 auto; min-width: 0; font-size: 10px; max-width: 28%; line-height: 1.3; overflow-wrap: anywhere; }
#screen-variant-game .four-hand-tray { flex: 1; min-width: 0; flex-wrap: nowrap; margin: 0; gap: 2px; min-height: 38px; }
#screen-variant-game .four-hand-piece { min-height: 38px; padding: 1px; gap: 1px; }
#screen-variant-game .four-hand-piece .koma { width: 22px; height: 26px; font-size: 16px; }
#screen-variant-game .four-hand-piece > span:last-child { font-size: 10px; }
#variant-board-grid .four-owner-marker { width: clamp(8px, 3cqw, 11px); height: clamp(8px, 3cqw, 11px); font-size: clamp(6px, 2.2cqw, 8px); }
#variant-board-grid .four-owned-piece::after { border-bottom: 2px solid var(--four-color); }
.four-player-number { display: inline-grid; place-items: center; flex: none; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--four-color); color: #fff; font: 700 11px/1 system-ui; }
#screen-variant-game .four-score { border-inline-start-width: 3px; padding: 4px; }
#screen-variant-game .four-score.current { background: color-mix(in srgb, var(--four-color) 22%, var(--panel)); box-shadow: inset 0 0 0 1px var(--four-color); }
#screen-variant-game .four-score.mine { border-block-end: 3px solid var(--four-color); }
.four-player-header { display: flex; align-items: center; min-width: 0; gap: 3px; min-height: 16px; }
#screen-variant-game .four-player-header .four-player-number { color: #fff; font-size: 10px; overflow: visible; }
#screen-variant-game .four-player-seat { flex: 1; min-width: 0; font-size: 9px; }
#screen-variant-game .four-player-state { flex: 0 1 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: var(--text); }
#screen-variant-game .four-score.current .four-player-state { color: #fff; background: var(--four-color); border-radius: 3px; padding: 1px 3px; }
#screen-variant-game .four-player-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 17px; color: var(--text); }
.four-held-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px 3px; min-height: 37px; }
#screen-variant-game .four-held-label { grid-column: 1 / -1; font-size: 9px; line-height: 10px; }
#screen-variant-game .four-held-piece { display: flex; align-items: center; gap: 2px; min-width: 0; color: var(--text); overflow: visible; }
#screen-variant-game .four-held-piece .four-hand-symbol { color: var(--text); font: 700 12px/1.1 'Yu Mincho', serif; }
#screen-variant-game .four-held-piece .four-hand-quantity { color: var(--text); font: 700 10px/1.2 system-ui; }
#screen-variant-game .four-hand-empty { grid-column: 1 / -1; font-size: 9px; }
#screen-variant-game :is(.four-status, .online-variant-status) { border: 1px solid var(--four-color, var(--line)); border-inline-start-width: 4px; border-radius: 7px; background: var(--panel); padding: 5px 7px; min-height: 35px; gap: 6px; }
#screen-variant-game :is(.four-status, .online-variant-status) #variant-turn { display: flex; align-items: baseline; gap: 2px; flex: 1; color: var(--text); font-size: 14px; line-height: 20px; }
.four-turn-person, .variant-turn-person { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-variant-game :is(.four-status, .online-variant-status) #variant-turn-marker { min-width: 20px; height: 20px; font-size: 12px; }
#variant-turn-marker[hidden] { display: none; }
#screen-variant-game :is(.four-status, .online-variant-status) .variant-connection { max-width: 24%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.variant-player-header { display: flex; align-items: center; min-width: 0; gap: 3px; min-height: 16px; }
#screen-variant-game .online-player-card { border-inline-start: 3px solid var(--four-color); }
#screen-variant-game .online-player-card.current { background: color-mix(in srgb, var(--four-color) 22%, var(--panel)); box-shadow: inset 0 0 0 1px var(--four-color); }
#screen-variant-game .online-player-card.mine { border-block-end: 3px solid var(--four-color); }
#screen-variant-game .variant-player-header .four-player-number { color: #fff; overflow: visible; }
#screen-variant-game .variant-player-header .variant-player-seat { flex: 1; min-width: 0; font-size: 9px; }
#screen-variant-game .variant-player-header .variant-player-state { flex: 0 1 auto; max-width: 48%; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-variant-game .online-player-card.current .variant-player-state { color: #fff; background: var(--four-color); border-radius: 3px; padding: 1px 3px; }
#screen-variant-game .online-player-card .variant-player-name { font-size: 12px; line-height: 17px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-variant-game .online-player-card .variant-player-score { color: var(--text); }
.variant-hand-summary .four-player-number { vertical-align: middle; }
#screen-variant-game .variant-actions { flex: none; margin: auto 0 0; gap: 5px; }
#screen-variant-game .variant-actions .btn { min-width: 0; flex: 1; min-height: 44px; padding: 6px 4px; font-size: 12px; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
#screen-variant-game .variant-actions .icon { width: 14px; height: 14px; }
#kuzushi-main-controls { display: contents; }
#screen-variant-game #kuzushi-pull { font-size: 11px; }
#kuzushi-camera[aria-pressed='true'] { background: #486f56; color: #fff; }
#screen-variant-game .kuzushi-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 6px; }
#screen-variant-game .kuzushi-stage { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 12px; }
#screen-variant-game .kuzushi-noise-row { flex: none; margin: 0; font-size: 11px; gap: 8px; min-height: 18px; }
#screen-variant-game #kuzushi-noise-label { min-width: 8em; }
#screen-variant-game .kuzushi-stage-hud { top: 8px; left: 8px; right: 8px; font-size: 10px; gap: 5px; }
#screen-variant-game .kuzushi-stage-hud span { padding: 4px 6px; }
#screen-variant-game .kuzushi-feedback { bottom: 8px; left: 8px; padding: 6px 8px; max-width: calc(100% - 16px); }
#screen-variant-game .kuzushi-feedback strong { font-size: 12px; }
#screen-variant-game .kuzushi-feedback span { font-size: 10px; }
#screen-variant-game .variant-dice-panel { padding: 7px; gap: 3px; }
#screen-variant-game .mawari-stage-heading, #screen-variant-game .mawari-rank-track { display: none; }
#screen-variant-game .variant-dice { gap: 4px; }
#screen-variant-game .gold-die small > span { display: none; }
#screen-variant-game .mawari-total b { font-size: 22px; }
#screen-variant-game #mawari-effect { font-size: 9px; }
#screen-variant-game #variant-roll { height: 44px; min-height: 44px; }
@container (min-width: 300px) {
  #screen-variant-game .gold-die small > span { display: block; }
}
#screen-variant-game .variant-handoff { flex: 1; min-height: 0; margin: 0; padding: 15px; }
#screen-variant-game .variant-handoff > .icon { width: 28px; height: 28px; margin-bottom: 10px; }
#screen-variant-game .variant-handoff .hint { margin-bottom: 12px; }
#screen-variant-game .variant-result, #screen-variant-game .variant-promotion { position: absolute; z-index: 20; left: 18px; right: 18px; top: 50%; transform: translateY(-50%); margin: 0; padding: 14px; max-height: calc(100% - 100px); overflow-y: auto; background: var(--panel); box-shadow: 0 8px 28px #0008; }
#screen-variant-game .variant-result h3 { font-size: 1.1rem; }
.variant-menu { color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; width: min(360px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); box-shadow: 0 12px 48px #0007; overflow-y: auto; }
.variant-menu::backdrop { background: #080704a6; }
.variant-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.variant-menu-header h3 { margin: 0; font-size: 15px; }
.variant-menu-header .btn { flex: none; min-height: 40px; width: 40px; height: 40px; font-size: 20px; }
.variant-menu .hint { font-size: 12px; line-height: 1.6; }
.variant-menu-actions { display: flex; gap: 8px; margin-top: 12px; }
.variant-menu-actions .btn { flex: 1; min-height: 44px; }
.variant-hand-summary { font-size: 12px; line-height: 1.6; margin: 6px 0; }
.variant-menu .variant-footnote { text-align: start; margin: 12px 0 0; }
@media (hover: hover) and (pointer: fine) {
  :is(#screen-variants, #screen-variant-game) .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f1cc86, #e0ad59 52%, #ca8d39); color: #211608; }
}
@media (max-height: 550px) {
  #screen-variants .variant-mode { min-height: 48px; }
  :is(#screen-variants, #screen-variant-game) > .screen-scroll { gap: 4px; }
  #screen-variant-game .variant-score { padding: 3px 5px; }
  #screen-variant-game .variant-dice-panel { inset: 12% 16%; padding: 5px; grid-template-rows: 12px minmax(34px, 1fr) 22px 19px 44px; gap: 2px; }
}
@media (min-width: 600px) and (max-height: 500px) and (hover: none) {
  #screen-variant-game > .screen-scroll { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto auto auto 1fr auto; gap: 6px 12px; }
  #variant-private, #screen-variant-game .variant-handoff { grid-column: 1; grid-row: 1 / 6; height: 100%; }
  #screen-variant-game .variant-scores { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-variant-game .variant-status { grid-column: 2; grid-row: 2; }
  #screen-variant-game #variant-notice { grid-column: 2; grid-row: 3; white-space: normal; max-height: 48px; }
  #screen-variant-game .variant-actions { grid-column: 2; grid-row: 5; flex-wrap: wrap; }
  #screen-variant-game .variant-actions .btn { flex: 1 1 43%; }
  #screen-variant-game .variant-actions .with-icon { flex-direction: column; gap: 2px; }
  #screen-variants > .screen-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 6px 12px; }
  #screen-variants .variant-mode-list { grid-column: 1; grid-row: 1; }
  #screen-variants .variant-setup-card { grid-column: 1; grid-row: 2; align-self: start; }
  #screen-variants .variant-online-options { grid-column: 2; grid-row: 1 / 4; }
  #screen-variants .variant-setup-actions { grid-column: 1; grid-row: 3; }
  #variant-load-message { grid-column: 2; grid-row: 2; }
}