:root {
  --table: #18231f;
  --table-light: #21312a;
  --table-line: #34483d;
  --clay: #a85245;
  --mustard: #b7943d;
  --moss: #547b52;
  --indigo: #526789;
  --active-color: var(--clay);
  --card-w: 80px;
  --card-h: 120px;
  --card-clip: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 2px 6px, 2px 2px, 6px 2px);
}

body { min-height: 100dvh; overflow: hidden; background: #111713; color: var(--px-ink); font-family: "Courier New", "Microsoft YaHei", monospace; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 44px color-mix(in srgb, var(--active-color) 32%, transparent); transition: box-shadow 180ms steps(3, end); }
.card-game { position: relative; width: 100%; height: 100dvh; min-height: 600px; overflow: hidden; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:
  linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), var(--table); background-size: 18px 18px; }
.card-game::after { content: ""; position: absolute; z-index: 0; inset: 60px 5% 120px; border: 2px solid var(--table-line); pointer-events: none; box-shadow: inset 0 0 0 3px #121a16; }

.table-header { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; }
/* 整场比分条:只在累计赛制下显示 */
.scoreboard { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 2px solid var(--px-line); padding: 7px 11px; background: #191c19; font-size: 11px; font-weight: 800; }
.scoreboard[hidden] { display: none; }
.scoreboard-round { color: var(--px-accent); }
.scoreboard ol { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.scoreboard li { display: flex; gap: 6px; color: var(--px-muted); }
.scoreboard li.is-you { color: var(--px-ink); }
.scoreboard li b { color: var(--px-accent); }
/* 结算分数明细 */
.score-breakdown { display: grid; gap: 5px; margin: 14px 0; padding: 11px 12px; border: 2px dashed var(--px-line); list-style: none; text-align: left; font-size: 11px; font-weight: 800; }
.score-breakdown[hidden] { display: none; }
.score-breakdown li { display: flex; justify-content: space-between; gap: 10px; color: var(--px-muted); }
.score-breakdown li.is-total { color: var(--px-ink); }
.score-breakdown li b { color: var(--px-accent); }
#music-button { color: var(--px-muted); }
#music-button.is-active { border-color: var(--px-accent); color: var(--px-accent); }
.settings-hint { margin: -4px 0 2px; color: var(--px-muted); font-size: 10px; font-weight: 700; line-height: 1.5; }
.brand-block { padding-left: 58px; }
.brand-block h1 { margin: 2px 0 0; font-size: 30px; }
.turn-indicator { display: grid; grid-template-columns: 10px auto; align-items: center; column-gap: 8px; border: 2px solid var(--table-line); padding: 7px 12px; background: #111914; text-align: center; }
.turn-indicator i { grid-row: span 2; width: 9px; height: 9px; background: var(--active-color); box-shadow: 0 0 8px var(--active-color); }
.turn-indicator span { font-size: 12px; font-weight: 900; }
.turn-indicator b { color: var(--px-muted); font-size: 9px; }
.header-actions { justify-self: end; display: flex; gap: 8px; }

.opponents { position: relative; z-index: 3; display: flex; width: min(940px, 88%); min-height: 104px; margin: 8px auto 0; align-items: start; justify-content: space-around; gap: 12px; }
.opponent { min-width: 150px; text-align: center; opacity: .62; transition: opacity 120ms steps(2,end), transform 120ms steps(2,end); }
.opponent.is-active { opacity: 1; transform: translateY(4px); }
.opponent-head { display: inline-flex; align-items: center; gap: 7px; border-left: 3px solid transparent; padding: 4px 8px; background: rgba(10,15,12,.66); font-size: 10px; }
.opponent.is-active .opponent-head { border-color: var(--active-color); }
.avatar { display: grid; width: 22px; height: 22px; place-items: center; background: #343a34; color: var(--px-accent); font-weight: 900; }
.opponent-cards { display: flex; height: 72px; margin-top: 4px; justify-content: center; padding-left: 24px; }
.opponent-cards .pixel-card { margin-left: -24px; }

.table-center { position: absolute; z-index: 2; inset: 42% 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 7vw, 92px); transform: translateY(-50%); }
.pile { position: relative; width: var(--card-w); height: var(--card-h); border: 0; padding: 0; background: transparent; color: inherit; }
.draw-pile { cursor: pointer; }
.draw-pile::before, .draw-pile::after { content: ""; position: absolute; inset: 0; clip-path: var(--card-clip); background: #ddd4c4; }
.draw-pile::before { transform: translate(-5px, 4px); opacity: .45; }
.draw-pile::after { transform: translate(-2px, 2px); opacity: .68; }
.draw-pile .pixel-card { position: relative; z-index: 2; }
.draw-pile > b { position: absolute; z-index: 4; right: -10px; bottom: -8px; min-width: 27px; border: 2px solid #0d110f; padding: 3px 5px; background: var(--px-accent); color: #17130b; font-size: 10px; }
.draw-pile:focus-visible { outline: 3px solid var(--px-accent); outline-offset: 5px; }
.discard-pile .pixel-card { position: absolute; inset: 0; }
.discard-pile .pixel-card:nth-last-child(3) { transform: translate(-4px, 3px) rotate(-4deg); opacity: .72; }
.discard-pile .pixel-card:nth-last-child(2) { transform: translate(3px, 1px) rotate(3deg); opacity: .9; }
.discard-pile .pixel-card:last-child { transform: rotate(-1deg); }
.direction-ring { position: absolute; width: 310px; height: 190px; border: 2px dashed color-mix(in srgb, var(--active-color) 52%, transparent); opacity: .48; pointer-events: none; }
.direction-ring span { position: absolute; color: var(--active-color); font-size: 24px; font-weight: 900; }
.direction-ring span:nth-child(1) { top: -15px; left: 50%; }.direction-ring span:nth-child(2) { right: -8px; top: 45%; transform: rotate(90deg); }.direction-ring span:nth-child(3) { bottom: -15px; left: 50%; transform: rotate(180deg); }.direction-ring span:nth-child(4) { left: -8px; top: 45%; transform: rotate(-90deg); }
.direction-ring.is-reversed { transform: scaleX(-1); }
.direction-ring.is-spinning { animation: ring-spin 420ms steps(6,end); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.effect-banner { position: absolute; z-index: 9; left: 50%; top: 50%; min-width: 170px; transform: translate(-50%,-50%); border: 3px solid var(--px-accent); padding: 12px 18px; background: #181713; color: var(--px-accent); box-shadow: 5px 5px 0 #090a09; text-align: center; font-size: 18px; font-weight: 900; }
.effect-banner[hidden] { display: none; }

.player-zone { position: absolute; z-index: 4; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; }
.hand-header { display: flex; width: min(1050px, calc(100% - 32px)); margin: 0 auto 5px; align-items: end; justify-content: space-between; gap: 14px; }
.hand-header h2 { margin: 3px 0 0; font-size: 15px; }.hand-header h2 span { color: var(--px-accent); }
.turn-actions { display: flex; gap: 8px; }
.hand-scroller { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 7px 16px 3px; scrollbar-color: var(--active-color) #111713; }
.player-hand { display: flex; width: max-content; min-width: 100%; height: 132px; align-items: end; justify-content: center; padding-left: 44px; }
.player-hand .pixel-card { margin-left: -34px; flex: 0 0 var(--card-w); }
.player-hand .pixel-card:first-child { margin-left: 0; }
/* 能出的牌向右让出更多身位:出牌不可撤销,命中区不能只有 37px */
.player-hand .pixel-card.can-play { margin-left: -18px; transform: translateY(-6px); filter: drop-shadow(0 0 4px var(--active-color)); }
.player-hand .pixel-card.can-play + .pixel-card { margin-left: -18px; }
.player-hand .pixel-card.cannot-play { filter: brightness(.48) saturate(.55); }
.player-hand .pixel-card:hover.can-play, .player-hand .pixel-card:focus-visible.can-play { z-index: 20; transform: translateY(-15px); outline: 3px solid var(--px-accent); outline-offset: 2px; }
.callout-button { min-width: 130px; min-height: 46px; border: 3px solid #6f251f; padding: 3px 8px; background: var(--clay); color: #fff4e8; box-shadow: 4px 4px 0 #250d0a; cursor: pointer; }
.callout-button span, .callout-button b { display: block; }.callout-button b { color: #ffdda0; font-size: 10px; }
.callout-button[hidden] { display: none; }

.pixel-card { position: relative; width: var(--card-w); height: var(--card-h); border: 0; padding: 5px; clip-path: var(--card-clip); background: #e4dccd; color: #f8f1e4; box-shadow: inset 0 0 0 3px rgba(30,25,21,.45); font-family: "Courier New", monospace; cursor: default; transition: transform 120ms steps(3,end), filter 120ms steps(2,end); }
button.pixel-card { cursor: pointer; }
.pixel-card::before { content: ""; position: absolute; inset: 5px; clip-path: var(--card-clip); background: var(--card-color, #444); box-shadow: inset 0 0 0 3px rgba(33,24,20,.22); }
.pixel-card[data-color="clay"] { --card-color: var(--clay); }.pixel-card[data-color="mustard"] { --card-color: var(--mustard); }.pixel-card[data-color="moss"] { --card-color: var(--moss); }.pixel-card[data-color="indigo"] { --card-color: var(--indigo); }
.pixel-card[data-color="wild"] { --card-color: #34353a; }
.corner { position: absolute; z-index: 3; font-size: 13px; font-weight: 900; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }.corner.top { top: 10px; left: 10px; }.corner.bottom { right: 10px; bottom: 10px; transform: rotate(180deg); }
.card-center { position: absolute; z-index: 2; inset: 25% 15%; display: grid; place-items: center; transform: skew(-13deg); background: #eee7d8; color: var(--card-color); clip-path: polygon(18% 0,82% 0,100% 15%,100% 85%,82% 100%,18% 100%,0 85%,0 15%); }
.card-center strong { transform: skew(13deg); font-size: 32px; line-height: 1; text-shadow: 2px 2px 0 rgba(0,0,0,.13); }
.wild-grid { display: grid; width: 38px; height: 50px; grid-template-columns: 1fr 1fr; transform: skew(13deg); clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }.wild-grid i:nth-child(1){background:var(--clay)}.wild-grid i:nth-child(2){background:var(--mustard)}.wild-grid i:nth-child(3){background:var(--indigo)}.wild-grid i:nth-child(4){background:var(--moss)}
.pixel-card.is-back { background: #d8cebd; padding: 5px; }
.pixel-card.is-back::before { background: #293b35; }
.back-frame { position: absolute; z-index: 2; inset: 11px; display: grid; place-items: center; border: 3px solid #b79a55; background: repeating-linear-gradient(135deg,#263832 0 4px,#30483e 4px 8px); clip-path: polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px); }
.back-frame i { position: absolute; width: 38px; height: 38px; border: 4px solid #b79a55; transform: rotate(45deg); }.back-frame b { position: relative; z-index: 1; padding: 3px; background: #293b35; color: #e3d7ba; font-size: 12px; }
.pixel-card.is-small { width: 48px; height: 72px; padding: 3px; }.pixel-card.is-small .back-frame { inset: 7px; border-width: 2px; }.pixel-card.is-small .back-frame i { width: 24px; height: 24px; border-width: 2px; }.pixel-card.is-small .back-frame b { font-size: 8px; }

.settings-layer, .color-layer, .result-layer { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8,11,9,.78); backdrop-filter: blur(4px); }.settings-layer[hidden],.color-layer[hidden],.result-layer[hidden]{display:none}
.settings-card { width: min(430px,100%); padding: 20px; }.settings-card header { display:flex;align-items:start;justify-content:space-between;margin-bottom:18px}.settings-card h2,.color-panel h2,.result-card h2{margin:5px 0 0;font-size:25px}.settings-card>.pixel-label{margin-bottom:14px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--px-line);padding:13px 0;cursor:pointer}.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:4px;color:var(--px-muted);font-size:10px}.toggle-row input{width:21px;height:21px;accent-color:var(--px-accent)}.settings-card>.pixel-button--primary{width:100%;margin-top:10px}
.color-panel { width:min(380px,100%);padding:22px;text-align:center}.color-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.color-options button{height:74px;border:4px solid #ddd2bd;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);cursor:pointer}.color-options button[data-color="clay"]{background:var(--clay)}.color-options button[data-color="mustard"]{background:var(--mustard)}.color-options button[data-color="moss"]{background:var(--moss)}.color-options button[data-color="indigo"]{background:var(--indigo)}.color-options button:focus-visible,.color-options button:hover{outline:3px solid #fff;outline-offset:3px}
.result-card{width:min(390px,100%);padding:25px;text-align:center}.result-card h2{color:var(--px-accent);font-size:30px}.result-card p:not(.pixel-kicker){color:var(--px-muted);margin:10px 0 20px}.result-card .pixel-button{width:100%}
.flying-card { position: fixed !important; z-index: 300 !important; pointer-events: none; margin: 0 !important; transition: transform var(--fly-duration,320ms) steps(7,end), opacity var(--fly-duration,320ms) steps(7,end); }

@media (max-width: 720px) {
  :root { --card-w: 62px; --card-h: 93px; }
  .card-game { min-height: 540px; padding-inline: 8px; }
  .card-game::after { inset: 55px 7px 116px; }
  .brand-block { padding-left: 56px; }.brand-block .pixel-kicker { display:none }.brand-block h1 { font-size:24px;margin-top:5px }
  .table-header { grid-template-columns: 1fr auto auto; gap:6px }.turn-indicator{padding:6px 7px}.turn-indicator b{display:none}.header-actions{gap:5px}.header-actions .pixel-button{width:44px;min-height:44px}
  .opponents { width:100%;min-height:83px;margin-top:4px;gap:3px }.opponent{min-width:0;flex:1}.opponent-head{padding:3px 4px}.opponent-head span:not(.avatar){font-size:8px}.avatar{width:18px;height:18px}.opponent-cards{height:54px;padding-left:17px}.opponent-cards .pixel-card{margin-left:-17px}.pixel-card.is-small{width:36px;height:54px}.pixel-card.is-small .back-frame{inset:5px}.pixel-card.is-small .back-frame b{display:none}
  .table-center { inset:40% 0 auto;gap:46px}.direction-ring{width:220px;height:145px}.effect-banner{font-size:14px;min-width:140px}
  .hand-header { width:calc(100% - 20px);margin-bottom:1px }.hand-header .pixel-kicker{display:none}.hand-header h2{font-size:12px}.turn-actions .pixel-button{min-height:44px;padding-inline:9px;font-size:10px}.callout-button{min-width:105px;min-height:44px}
  .hand-scroller{padding-inline:8px}.player-hand{height:103px;justify-content:flex-start;padding-left:30px}.player-hand .pixel-card{margin-left:-25px}.player-hand .pixel-card.can-play{margin-left:-8px}.player-hand .pixel-card.can-play + .pixel-card{margin-left:-8px}.corner{font-size:10px}.corner.top{top:8px;left:8px}.corner.bottom{right:8px;bottom:8px}.card-center strong{font-size:24px}.wild-grid{width:28px;height:38px}
}

@media (max-height: 650px) and (orientation: landscape) {
  .opponents{min-height:72px}.table-center{inset:43% 0 auto}.player-hand{height:102px}.player-zone{bottom:2px}.hand-header{margin-bottom:0}
}

@media (prefers-reduced-motion: reduce) { .pixel-card,.flying-card,body::before{transition:none}.direction-ring.is-spinning{animation:none} }