/* Play screen. Desktop: the board fills the left, a quiet rail on the right.
   Phone: opponent, board, winds, hint, you, moves, stacked in that order. */
body.game {
  min-height: 100dvh;
  background:
    radial-gradient(60% 45% at 35% 40%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg);
}
.brand .brand-mark { width: 28px; height: 28px; }

.stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px 44px; align-items: start; padding-block: 22px 40px; }
.board-area { position: sticky; top: 76px; display: grid; place-items: center; }
.board { width: min(100%, calc((100dvh - 108px) * 0.9006)); aspect-ratio: 144 / 159.9; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.board svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rail { display: grid; gap: 14px; min-width: 0; }

@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "opp" "board" "winds" "turn" "me" "moves" "foot"; gap: 12px; padding-block: 12px 32px; }
  .rail { display: contents; }
  .player.opp { grid-area: opp; } .board-area { grid-area: board; position: relative; top: 0; }
  .winds { grid-area: winds; } .turn { grid-area: turn; } .player.me { grid-area: me; } .moves { grid-area: moves; } .rail-foot { grid-area: foot; }
  .board { width: min(100%, calc((100dvh - 60px) * 0.9006)); }
}

/* ---- board ---- */
.cell { cursor: pointer; transition: filter 160ms; }
.cell:focus { outline: none; }
.cell.dest:hover, .cell.dest.hover { filter: brightness(1.35); }
.cell.sel { filter: brightness(1.5); }
.tree-glow { fill: var(--tree); opacity: 0.35; filter: blur(5px); pointer-events: none; }
.tree-cell { fill: var(--tree); }
.tree-ink { fill: none; stroke: var(--tree-ink); stroke-width: 0.85; stroke-linecap: round; pointer-events: none; }
.cname { fill: var(--text-3); font: 600 2.4px var(--ff-mono); text-anchor: middle; pointer-events: none; }
.hl { fill: none; pointer-events: none; }
.hl.from { stroke: var(--accent); stroke-width: 0.6; opacity: 0.5; stroke-dasharray: 1.4 1.2; }
.hl.to { stroke: var(--accent); stroke-width: 0.9; }
.hl.focus { stroke: var(--text); stroke-width: 0.8; stroke-dasharray: 2 1.2; }
.piece { transition: transform 340ms var(--ease), opacity 300ms; pointer-events: none; }
.piece .lift { transition: transform 180ms var(--ease); transform-box: fill-box; transform-origin: center; }
.piece.sel .lift { transform: scale(1.15) translateY(-0.6px); }
.piece .aura { fill: none; stroke: none; }
.piece.mine .aura { stroke: var(--accent); stroke-width: 0.5; opacity: 0.4; }
.piece.sel .aura { stroke: var(--accent); stroke-width: 1; opacity: 1; }
.piece.danger .aura { stroke: var(--danger); stroke-width: 1.1; opacity: 1; animation: throb 1.1s ease-in-out infinite; }
.piece.taken { opacity: 0; }
@keyframes throb { 50% { opacity: 0.2; } }
.burst { fill: none; stroke: var(--accent); stroke-width: 1.3; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: burst 650ms ease-out forwards; }
@keyframes burst { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(2.3); } }
.mark { pointer-events: none; }
.mark .dot { fill: var(--accent); }
.mark.power .dot { fill: #2f7cf6; }
.mark.on-tree .dot { fill: var(--tree-ink); r: 2.6; }
.mark .ring { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.mark.power .ring { stroke: #2f7cf6; }
.mark.hover .dot { r: 2.7; }
.mark .badge { stroke: var(--bg); stroke-width: 0.6; }
.mark .badge.risk { fill: var(--danger); } .mark .badge.warn { fill: var(--warn); } .mark .badge.win { fill: var(--good); }
.mark .badge-t { fill: #fff; font: 700 3.2px var(--ff); text-anchor: middle; dominant-baseline: central; }
.board-alert { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); max-width: min(92%, 440px); background: var(--danger); color: #fff; font-weight: 600; font-size: 0.88rem; line-height: 1.35; padding: 9px 16px; border-radius: 14px; box-shadow: 0 12px 30px -10px var(--danger); text-align: center; animation: drop 300ms var(--ease); }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---- player cards ---- */
.player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--raise); box-shadow: var(--card-shadow); transition: box-shadow 200ms; }
.player.active { box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 30px -18px var(--accent); }
.player .avatar { width: 42px; height: 42px; flex: none; }
.player.thinking .avatar { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.92); opacity: 0.7; } }
.player .who { min-width: 0; flex: 1; display: grid; gap: 2px; }
.player .name { font-weight: 600; font-size: 0.98rem; display: flex; align-items: center; gap: 8px; }
.player .sub { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .army { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.player .army span { display: inline-flex; align-items: center; gap: 2px; font: 600 0.72rem var(--ff-mono); color: var(--text-2); }
.player .army span.out { opacity: 0.35; }
.player .army svg { width: 15px; height: 15px; }
.gift { display: flex; align-items: center; gap: 8px; flex: none; }
.gift-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--raise-2); font-size: 0.82rem; font-weight: 600; color: var(--text); }
.gift-chip svg { width: 16px; height: 16px; color: var(--accent-text); }
.gift-chip.spent { opacity: 0.4; text-decoration: line-through; }
.gift-chip small { color: var(--text-3); font-weight: 500; }
.gift .btn { height: 32px; padding: 0 12px; font-size: 0.8rem; }
.gift .btn.on { background: #2f7cf6; color: #fff; }

/* ---- wind tiles ---- */
.winds { background: var(--raise); border-radius: 20px; padding: 14px; box-shadow: var(--card-shadow); }
.winds-head { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 500; color: var(--text-3); margin-bottom: 10px; padding-inline: 2px; }
.winds-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1px 46px 46px; gap: 10px; align-items: start; }
.winds-row .sep { background: var(--line-2); align-self: stretch; margin-block: 6px 22px; }
.slot { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.wind { position: relative; width: 100%; aspect-ratio: 1; border: 0; border-radius: 16px; display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.22), var(--drop);
  transition: transform 160ms var(--ease), opacity 200ms, box-shadow 160ms, filter 200ms; }
.wind:hover { transform: translateY(-2px); }
.wind .arrow { width: 48%; height: 48%; }
.wind .n { position: absolute; top: 6px; left: 8px; font: 600 0.74rem var(--ff-mono); opacity: 0.8; }
.wind.kara { background: var(--w-kara); color: var(--w-kara-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--drop); }
.wind.gok { background: var(--w-gok); color: var(--w-gok-ink); }
.wind.kizil { background: var(--w-kizil); color: var(--w-kizil-ink); }
.wind.ak { background: var(--w-ak); color: var(--w-ak-ink); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -3px 0 rgba(0, 0, 0, 0.06), var(--drop); }
.wind.small { border-radius: 12px; cursor: default; }
.wind.small:hover { transform: none; }
.wind.small .n { top: 3px; left: 5px; font-size: 0.6rem; }
.wind.dead { opacity: 0.3; filter: saturate(0.5); }
.wind.pick { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.wind.glow { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.wind.offer { animation: offer 1.3s ease-in-out infinite; }
@keyframes offer { 50% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); } }
.wind.moon { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #2f7cf6; cursor: pointer; }
.wind.rolling { animation: pop 460ms var(--ease); }
@keyframes pop { 0% { transform: scale(0.4) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.06) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.slot .cap { font-size: 0.74rem; color: var(--text-3); white-space: nowrap; min-height: 1.2em; }
.slot .cap.on { color: var(--text-2); font-weight: 500; }
.slot .cap.offer { color: var(--accent-text); font-weight: 600; }
.winds.call { animation: call 0.9s ease-out; }
@keyframes call { 0% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); } 100% { box-shadow: var(--card-shadow); } }

/* ---- turn ---- */
.turn { padding: 6px 4px; display: grid; gap: 6px; min-height: 92px; align-content: start; }
.turn-title { font: 700 1.45rem/1.1 var(--ff-display); letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.turn-title .dot3::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.turn-hint { color: var(--text-2); font-size: 0.93rem; }
.turn-preview { display: grid; gap: 4px; font-size: 0.86rem; }
.turn-preview:empty { display: none; }
.pv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--raise); }
.pv-row .w { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; place-items: center; }
.pv-row .w .arrow { width: 14px; height: 14px; }
.pv-row .t { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.risk { background: var(--danger-soft); color: var(--danger); } .tag.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.tag.win { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); } .tag.safe { color: var(--text-3); }
.pv-next { color: var(--text-3); font-size: 0.8rem; padding-inline: 2px; }

/* ---- moves ---- */
.moves { background: var(--raise); border-radius: var(--r); box-shadow: var(--card-shadow); }
.moves summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; font-weight: 600; font-size: 0.92rem; }
.moves summary::-webkit-details-marker { display: none; }
.moves summary .count { color: var(--text-3); font-size: 0.8rem; }
.log { margin: 0; padding: 0 16px 14px 40px; max-height: 260px; overflow-y: auto; font-size: 0.84rem; color: var(--text-2); display: grid; gap: 3px; }
.log li::marker { color: var(--text-3); font: 500 0.74rem var(--ff-mono); }
.log li.k { color: var(--text-3); }
.log .empty { list-style: none; margin-left: -24px; color: var(--text-3); }
.rail-foot { display: flex; gap: 8px; }
.rail-foot .btn.armed { background: var(--danger); color: #fff; }

/* ---- dialogs ---- */
.bless-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .bless-grid { grid-template-columns: 1fr; } }
.giftcard { text-align: left; border: 0; cursor: pointer; padding: 18px; border-radius: 18px; background: var(--raise-2); display: grid; gap: 8px; align-content: start; transition: transform 160ms var(--ease), box-shadow 160ms; }
.giftcard:hover, .giftcard:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--accent), 0 16px 40px -20px var(--accent); outline: none; }
.giftcard .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 4px; }
.giftcard .ico svg { width: 26px; height: 26px; }
.giftcard .gt { font-size: 0.76rem; color: var(--text-3); font-weight: 500; }
.giftcard b { font: 700 1.35rem var(--ff-display); letter-spacing: -0.02em; }
.giftcard p { color: var(--text-2); font-size: 0.9rem; }

.over { position: relative; padding: 36px 26px 26px; text-align: center; display: grid; gap: 14px; justify-items: center; overflow: hidden; }
.over-glow { position: absolute; inset: -40% -20% auto; height: 80%; background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.over.lost .over-glow { background: radial-gradient(closest-side, var(--kara-soft), transparent); }
.over h2 { font-size: clamp(2.2rem, 7vw, 3rem); position: relative; }
.over.won h2 { color: var(--accent-text); }
.over-stats { display: flex; gap: 28px; position: relative; }
.over-stats div { display: grid; }
.over-stats b { font: 700 1.6rem var(--ff-display); }
.over-stats span { font-size: 0.78rem; color: var(--text-3); }
.over-feel { display: grid; gap: 8px; justify-items: center; font-size: 0.88rem; color: var(--text-2); padding-top: 6px; }
.over-feel .thanks { color: var(--good); font-size: 0.82rem; }
.over-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }

.field { display: grid; gap: 10px; }
.field-label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.level { text-align: left; border: 0; cursor: pointer; padding: 12px 14px; border-radius: 14px; background: var(--raise-2); display: grid; gap: 3px; transition: box-shadow 150ms, background 150ms; }
.level:hover { background: var(--raise-3); }
.level[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.level .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.level b { font-size: 0.95rem; }
.level small { font-size: 0.78rem; color: var(--text-3); line-height: 1.35; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 5px; height: 12px; border-radius: 2px; background: var(--raise-3); }
.meter i.on { background: var(--accent); }
.level svg { width: 18px; height: 18px; color: var(--text-2); }
.switches { display: grid; border-top: 1px solid var(--line); }
.switches .switch { border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.set-note { color: var(--accent-text); font-size: 0.84rem; }
.rule-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.rule-steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; }
.rule-steps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font: 700 0.85rem var(--ff-mono); display: grid; place-items: center; }
.rule-steps b { font-size: 0.98rem; }
.rule-steps p { color: var(--text-2); font-size: 0.9rem; }
.rule-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule-pieces div { display: flex; gap: 10px; align-items: center; font-size: 0.86rem; }
.rule-pieces svg { width: 38px; height: 38px; flex: none; }
.rule-pieces small { display: block; color: var(--text-3); font-size: 0.78rem; }
@media (max-width: 460px) { .rule-pieces, .levels { grid-template-columns: 1fr; } }
/* Kutyada tabletop interface */
body.game{background:var(--bg)}.game-content{padding:27px 36px 40px;max-width:1510px;margin:auto}.game-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.back-link{font-size:10px;color:var(--text-2);display:block;margin-bottom:12px}.back-link:before{content:'←';margin-right:8px}.game-heading h1{font-size:26px;letter-spacing:-1px;font-weight:650}.game-heading p{font-size:11px;color:var(--text-2);margin-top:7px}.game-tools{display:flex;gap:3px}.stage{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:25px;align-items:start;padding:0}.board-panel{background:#edf0e3;border:1px solid #2f4a3015;border-radius:17px;overflow:hidden;min-width:0;position:sticky;top:20px}.board-panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px 23px 0}.board-panel-head .kicker{font-size:9px}.board-turn{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--text-2)}.board-turn b{font-weight:500;font-family:var(--ff-mono)}.board-area{position:relative;top:0;padding:13px 18px 4px;display:grid;place-items:center}.board{width:min(100%,calc((100dvh - 300px)*.9006));min-width:280px;aspect-ratio:144/159.9;filter:drop-shadow(0 8px 4px #233c2010)}.board-panel-foot{margin:4px 23px 0;padding:15px 0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #233b2b15;font-size:7px;letter-spacing:.09em;color:#7a856e}.board-key{display:flex;gap:6px;align-items:center;font-size:8px;letter-spacing:0}.board-key i{width:7px;height:7px;background:#fcf5e1;border:1px solid #c8c9b5;border-radius:50%;margin-left:6px}.board-key i.dark{background:#2c4834;border-color:#2c4834}.cell{stroke:#a9b996;stroke-width:.12}.cell.sel{filter:brightness(1.1);stroke:#789452;stroke-width:.55}.cell.dest:hover{filter:brightness(1.05)}.piece.mine .aura{opacity:.4;stroke:#496a3c}.piece.sel .aura{stroke:#426c35}.rail{gap:14px;display:grid}.player{background:transparent;border:1px solid var(--line-2);border-radius:12px;padding:13px 12px;box-shadow:none;flex-wrap:wrap;gap:8px}.player.active{box-shadow:none;border-color:#93ad70;background:#f4f6e9}.player .avatar{width:37px;height:37px}.player .name{font-size:12px}.player .sub{font-size:9px}.player .army{gap:7px;margin-top:6px}.player .army span{font-size:9px}.player .army svg{width:12px;height:12px}.player .gift{gap:5px}.gift-chip{font-size:9px;padding:0 8px;height:28px;background:#e8eddf;gap:4px}.gift-chip svg{width:13px;height:13px}.gift .btn{height:28px;min-height:28px;padding:0 8px;font-size:9px}.winds{background:#fdfdf6;border:1px solid var(--line-2);border-radius:12px;padding:14px;box-shadow:none}.winds-head{font-size:10px;margin-bottom:13px}.winds-row{grid-template-columns:repeat(3,minmax(0,1fr)) 1px 35px 35px;gap:8px}.wind{border-radius:9px;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #10261b20,0 3px 5px #1b36200a}.wind.kara,.wind.ak{box-shadow:inset 0 0 0 1px #203b2b15,inset 0 -2px 0 #203b2b10}.wind .n{font-size:8px;left:6px;top:5px}.wind.small{border-radius:7px}.wind.small .n{font-size:6px}.slot .cap{font-size:8px}.turn{padding:6px 3px;min-height:77px;gap:9px}.turn-title{font-size:22px;font-weight:600;letter-spacing:-.9px}.turn-title:before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#809b5f;box-shadow:0 0 0 4px #809b5f13;margin-right:4px}.turn-hint{font-size:11px;line-height:1.8}.turn-preview{font-size:10px;max-height:170px;overflow:auto}.pv-row{padding:7px 8px;gap:6px;border-radius:6px;background:#edf0e4}.tag{font-size:8px;padding:2px 5px}.pv-next{font-size:9px;line-height:1.6}.moves{background:transparent;border:1px solid var(--line-2);border-radius:10px;box-shadow:none}.moves summary{padding:12px;font-size:11px}.moves summary .count{font-size:10px}.log{font-size:10px;line-height:1.8;padding-left:33px}.rail-foot .btn{width:100%;font-size:10px;min-height:36px}.game-guide{display:flex;gap:11px;border-top:1px solid var(--line);padding-top:17px;color:#7b8c68;font-size:22px}.game-guide b{font-size:10px;font-weight:600;color:#60724d;display:block;margin-bottom:3px}.game-guide p{font-size:10px;color:#7e8972;line-height:1.7}.board-alert{font-size:10px;padding:9px 12px;border-radius:8px;top:0}.giftcard{background:#eff2e7;border:1px solid var(--line-2);border-radius:13px;padding:20px;gap:9px}.giftcard .ico{width:42px;height:42px;border-radius:50%;background:#dfe9cc;color:#49613a}.giftcard b{font-size:23px;font-weight:600;letter-spacing:-.7px}.giftcard .gt{font-size:9px;letter-spacing:.06em}.giftcard p{font-size:12px;line-height:1.7}.level{border-radius:8px;background:#f0f2e9}.level b{font-size:12px}.level small{font-size:10px}.meter i{background:#dce3d2}.meter i.on{background:#6c8952}.rule-steps b{font-size:13px}.rule-steps p{font-size:12px;line-height:1.8}.rule-steps li:before{background:#e6edd8;border-radius:50%;color:#52713c}.field-label{font-size:11px}.rule-pieces{gap:15px}.rule-pieces div{font-size:12px}.rule-pieces small{font-size:10px}.switches .switch{font-size:12px}.set-note{font-size:10px}.over h2{font-size:42px}.over-stats b{font-size:30px;font-weight:600}.over-stats span{font-size:10px}.over-feel{font-size:11px}.over .seg button{font-size:10px}.over .muted{font-size:12px;line-height:1.7}.over-actions .btn{font-size:11px}.intro-art{display:flex;justify-content:center;gap:22px;padding:25px;background:#edf1e3;border-radius:13px}.intro-art svg{width:65px;height:65px}.ranked-result{width:100%;padding:15px;border-radius:12px;background:#e9f0db;display:grid;gap:5px;font-size:12px}.ranked-result strong{font-size:23px}.level:disabled{opacity:.4;cursor:default}
@media(min-width:1450px){.game-content{padding:35px 46px}.stage{grid-template-columns:minmax(0,1fr) 330px;gap:36px}.board{width:min(100%,calc((100dvh - 295px)*.9006))}}
@media(max-width:1180px){.game-content{padding:25px 26px}.stage{grid-template-columns:minmax(0,1fr) 266px;gap:18px}.board{min-width:220px}.board-area{padding-inline:10px}.winds-row{gap:5px;grid-template-columns:repeat(3,minmax(0,1fr)) 1px 30px 30px}.board-panel-foot{font-size:6px}.gift-chip{font-size:8px}}
@media(max-width:840px){.stage{grid-template-columns:1fr;gap:14px;grid-template-areas:'opp' 'board' 'turn' 'winds' 'me' 'moves' 'foot' 'guide'}.rail{display:contents}.board-panel{grid-area:board;position:relative;top:0}.player.opp{grid-area:opp}.player.me{grid-area:me}.turn{grid-area:turn}.winds{grid-area:winds}.moves{grid-area:moves}.rail-foot{grid-area:foot}.game-guide{grid-area:guide}.board{width:min(100%,400px)}.board-panel-head{padding:16px 20px 0}.board-panel-foot{margin-inline:20px;font-size:8px}.board-area{padding:10px 20px}.player{padding:10px 13px}.player .gift{margin-left:auto}.player .army{display:inline-flex}.player .avatar{width:34px;height:34px}.player .sub{font-size:10px}.player .name{font-size:12px}.turn{min-height:0;padding:9px 2px;gap:8px}.winds-row{grid-template-columns:repeat(3,minmax(0,1fr)) 1px 43px 43px;gap:14px}.wind{max-width:64px;min-height:44px}.wind.small{min-height:0}.slot .cap{font-size:10px}.wind .n{font-size:9px}.turn-preview{max-height:130px}.game-heading{margin-bottom:20px}.turn-hint{font-size:12px}.wind .arrow{width:44%;height:44%}}
@media(max-width:720px){.game-content{padding:19px 17px 106px}.game-heading h1{font-size:23px}.game-heading p{font-size:10px}.game-heading .back-link{font-size:9px;margin-bottom:9px}.game-tools{gap:0}.game-tools .icon-btn{width:33px;height:36px}.game-tools .icon-btn svg{width:18px;height:18px}.game-tools #btn-feedback{display:none}.board{width:min(100%,340px);min-width:0}.board-area{padding:7px 10px}.board-panel-foot{padding:12px 0;font-size:7px}.player{padding:10px 12px}.player .army{gap:6px;margin-top:3px}.player .gift{max-width:150px;flex-wrap:wrap;justify-content:flex-end}.player .sub{font-size:9px}.turn-title{font-size:23px}.winds{padding:14px}.winds-row{gap:11px;grid-template-columns:repeat(3,minmax(0,1fr)) 1px 40px 40px}.winds-head{font-size:11px}.board-turn{font-size:9px}.board-key{font-size:9px}.game-guide{padding-top:15px}.bless-grid{grid-template-columns:1fr 1fr;gap:10px}.giftcard{padding:17px 13px}.giftcard b{font-size:21px}.giftcard p{font-size:11px}.giftcard .ico{width:35px;height:35px}.giftcard .gt{font-size:8px}.over-actions .btn{font-size:12px}.rule-pieces,.levels{grid-template-columns:1fr 1fr}}
@media(min-width:841px){.board{width:min(100%,calc((100dvh - 350px)*.9006))}}
@media(max-width:720px){.game .mobile-nav{display:none}.game .topbar{height:56px}.game-content{padding:12px 17px 28px}.game-heading{margin-bottom:14px}.game-heading .back-link{font-size:9px;margin-bottom:5px}.game-heading p{display:none}.game-heading h1{font-size:21px}.stage{grid-template-areas:'opp' 'board' 'winds' 'turn' 'me' 'moves' 'foot' 'guide';gap:12px}.board{width:min(100%,290px)}.board-panel-head{padding:12px 15px 0}.board-panel-head .kicker{font-size:8px}.board-area{padding:5px 10px}.board-panel-foot{padding:10px 0;margin-inline:15px}.player{padding:8px 11px}.player .avatar{width:30px;height:30px}.player .army{margin:1px 0 0}.player .army svg{width:10px;height:10px}.player .army span{font-size:8px}.winds{padding:11px 13px}.winds-head{margin-bottom:9px}.wind{max-width:53px}.winds-row{grid-template-columns:repeat(3,minmax(0,1fr)) 1px 37px 37px}.slot .cap{font-size:9px}.turn{padding:4px 1px}.game-guide{margin-top:4px}}

/* Player clocks and guidance stay readable beside the board and on a phone. */
.player-clock{margin-left:auto;display:grid;text-align:right;min-width:78px;padding:7px 9px;border-radius:9px;background:#e6eadc;color:var(--text-2)}
.player-clock b{font:600 25px/1.1 var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-1px}.player-clock small{font-size:10px;margin-top:4px;letter-spacing:.01em}.player-clock.running{background:#294532;color:#f7fae9;box-shadow:0 0 0 3px #2945320a}.player-clock.low{background:#f4ded1;color:#8c3926}.player .gift:not(:empty){flex-basis:100%;justify-content:flex-end}
.game-guide{display:grid;gap:13px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#f1f3e8;color:var(--text)}.guide-heading{display:flex;align-items:center;gap:8px}.guide-heading>span{font-size:22px;color:#6c8750}.game-guide .guide-heading b{font-size:15px;color:var(--text);margin:0}.guide-help{margin-left:auto;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:12px;cursor:pointer;color:var(--text-2);min-height:40px}.game-guide p{font-size:14px;line-height:1.65;color:var(--text-2)}.move-steps{display:grid;gap:5px}.move-steps span{font-size:13px;padding:8px 10px;border-radius:7px;color:var(--text-2);border:1px solid transparent}.move-steps .current{background:#dfe8ce;color:#294532;border-color:#bfcea9;font-weight:600}.piece-coach{display:flex;gap:10px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--line)}.piece-coach>svg{width:38px;height:38px;flex:none}.piece-coach b{font-size:14px;color:var(--text);margin-bottom:5px}.piece-coach span{display:block;font-size:13px;line-height:1.65;color:var(--text-2)}.game-guide .clock-policy{font-size:12px;border-top:1px solid var(--line);padding-top:12px}.wind-explainer{font-size:12px;line-height:1.6;color:var(--text-2);margin-top:15px}.clock-setting-note{font-size:14px;line-height:1.65;color:var(--text-2)}#time-control{font:inherit;font-size:16px;min-height:48px;border:1px solid var(--line);background:#f1f3e8;color:var(--text);border-radius:10px;padding:10px 14px;width:100%}
@media(min-width:1181px){.stage{grid-template-columns:minmax(0,1fr) 340px}}@media(max-width:720px){.player-clock b{font-size:23px}.player-clock{min-width:80px;padding:6px 9px}.game-guide{padding:17px}.player .gift:not(:empty){flex-basis:auto}.game-guide p{font-size:14px}.wind-explainer{font-size:12px}.player .name{font-size:14px}.player .sub{font-size:11px}}

.board-clocks{display:none}@media(max-width:840px){.board-clocks{display:flex;justify-content:space-between;margin:13px 15px 0;gap:16px}.board-clocks>div{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}.board-clocks .player-clock{min-width:74px}.board-clocks .player-clock b{font-size:22px}.board-clocks .player-clock small{font-size:9px}.player .player-clock{display:none}}

.turn .move-steps{display:flex;gap:4px}.turn .move-steps span{flex:1;padding:8px 6px;font-size:11px;line-height:1.5}.turn .piece-coach{padding:12px 10px;border:1px solid var(--line);border-radius:10px;background:#f1f3e8}.turn .piece-coach b{display:block;margin:0 0 4px}.turn .piece-coach span{font-size:13px}.board-objective{font-size:13px;line-height:1.6;text-align:center;color:#4e6143;padding:10px 22px 3px;max-width:620px;margin:0 auto}.board-panel-foot{margin-top:10px}@media(max-width:720px){.board-objective{font-size:12px;padding:6px 20px 0}.turn .move-steps span{font-size:12px}}