:root {
  --ink: #17324d;
  --ink-soft: #33516c;
  --paper: #fffaf0;
  --surface: #ffffff;
  --surface-2: #eef8f5;
  --teal: #1da58f;
  --teal-dark: #0e796b;
  --coral: #f27b57;
  --coral-dark: #c95537;
  --gold: #f3bd4d;
  --sky: #d9f0ef;
  --line: #d9e5df;
  --shadow: 0 18px 45px rgba(23, 50, 77, .13);
  --radius: 24px;
  --font: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

html[data-theme="lagoon"] { --ink:#153f48; --ink-soft:#35616a; --paper:#effbf9; --surface:#fff; --surface-2:#e0f6f1; --teal:#087f8c; --teal-dark:#075d69; --coral:#ff916b; --coral-dark:#d96643; --gold:#efc75e; --sky:#cceff1; --line:#cae3df; }
html[data-theme="evening"] { --ink:#264866; --ink-soft:#58728b; --paper:#fff8e8; --surface:#fffefb; --surface-2:#e8f7ff; --teal:#22b8a8; --teal-dark:#087d78; --coral:#ff7b73; --coral-dark:#cf4c4c; --gold:#ffc64c; --sky:#dff5ff; --line:#cde4e8; --shadow:0 18px 45px rgba(38,72,102,.14); }

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:var(--font); }
body { min-height:100dvh; overflow-x:hidden; background-image:radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 26rem), radial-gradient(circle at 94% 85%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 28rem); }
button, input, select, textarea { font:inherit; }
button, select, label[for] { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .match-card:focus-visible { outline:4px solid color-mix(in srgb, var(--gold) 72%, white); outline-offset:3px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; left:14px; top:-60px; z-index:9999; padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--surface); text-decoration:none; }
.skip-link:focus { top:12px; }

.app-shell { min-height:100dvh; display:flex; flex-direction:column; }
.topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(16px, 3vw, 40px); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(18px); position:relative; z-index:20; }
.brand { border:0; background:transparent; display:flex; align-items:center; gap:11px; padding:0; text-align:left; }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand strong { font-size:20px; letter-spacing:.04em; }
.brand small { color:var(--ink-soft); font-size:9px; letter-spacing:.16em; font-weight:800; }
.brand-mark { width:44px; height:44px; border-radius:14px; background:var(--ink); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:10px 8px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.14); transform:rotate(-2deg); }
.brand-mark i { width:8px; background:var(--gold); border-radius:3px 3px 1px 1px; }
.brand-mark i:nth-child(1) { height:15px; transform:rotate(9deg); }
.brand-mark i:nth-child(2) { height:23px; }
.brand-mark i:nth-child(3) { height:16px; transform:rotate(-9deg); background:var(--coral); }
.top-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.top-actions button { border:1px solid var(--line); background:var(--surface); border-radius:11px; min-height:40px; padding:8px 13px; font-size:13px; font-weight:800; box-shadow:0 5px 12px rgba(23,50,77,.06); }
.top-actions button:hover { transform:translateY(-1px); border-color:var(--teal); }
.session-action { display:none; }
body.is-playing .session-action { display:inline-flex; align-items:center; justify-content:center; }
body.is-playing #pauseButton { border-color:color-mix(in srgb,var(--gold) 62%,var(--line)); }
body.is-playing #quitButton { border-color:color-mix(in srgb,var(--coral) 45%,var(--line)); }
.save-pill { display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:12px; font-weight:700; padding:0 6px; }
.save-pill i { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent); }

main { flex:1; min-height:0; }
.screen { display:none; }
.screen.is-active { display:block; }
.home-screen { min-height:calc(100dvh - 74px); padding:clamp(22px,4vw,60px); position:relative; isolation:isolate; overflow:hidden; background-image:linear-gradient(90deg,rgba(255,255,255,.18),transparent 34%,transparent 66%,rgba(255,255,255,.12)),url("assets/images/home-storybook-bg-v1.png"); background-position:center bottom; background-size:cover; background-repeat:no-repeat; }
.home-screen::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 58%,rgba(255,250,222,.2)); }
.home-grid { min-height:calc(100dvh - 74px - clamp(44px,8vw,120px)); max-width:1500px; margin:auto; position:relative; z-index:1; display:grid; grid-template-columns:minmax(500px,1.15fr) minmax(280px,.75fr) minmax(330px,.85fr); align-items:center; gap:clamp(18px,2.2vw,36px); }
.eyebrow { display:block; color:var(--teal-dark); font-size:11px; line-height:1.3; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.home-copy { position:relative; z-index:2; text-align:center; }
.home-copy .eyebrow { display:inline-flex; padding:7px 11px; border:1px solid rgba(255,255,255,.72); border-radius:999px; background:rgba(255,255,255,.65); box-shadow:0 7px 18px rgba(23,50,77,.08); backdrop-filter:blur(9px); }
.home-copy h1 { margin:16px 0 20px; color:#17324d; font-size:clamp(44px,4.7vw,72px); line-height:1.08; letter-spacing:-.055em; }
.home-copy h1 em { display:inline-block; white-space:nowrap; color:#d96643; font-style:normal; }
.home-copy > p { max-width:620px; margin-left:auto; margin-right:auto; font-size:clamp(16px,1.4vw,21px); line-height:1.8; color:#294f5a; font-weight:700; }
.mascot-stage { height:min(70dvh,680px); min-height:440px; position:relative; align-self:end; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; isolation:isolate; pointer-events:none; }
.mascot-stage img { width:100%; height:100%; object-fit:contain; object-position:center bottom; position:relative; z-index:1; transform:translateY(-9%); filter:drop-shadow(0 24px 18px rgba(23,50,77,.2)); }
.mascot-halo { display:none; }
.speech-bubble { position:absolute; z-index:2; left:50%; bottom:5%; width:max-content; max-width:calc(100% - 28px); display:flex; align-items:center; gap:12px; border:2px solid rgba(255,255,255,.72); border-radius:18px; padding:13px 16px; background:rgba(255,255,255,.9); color:#17324d; backdrop-filter:blur(12px); box-shadow:0 10px 28px rgba(23,50,77,.18); transform:translateX(-50%); }
.speech-bubble strong { background:var(--coral); color:white; padding:6px 9px; border-radius:9px; }
.speech-bubble span { font-weight:800; font-size:13px; }
.access-card { position:relative; z-index:3; align-self:center; background:color-mix(in srgb,var(--surface) 93%,transparent); border:3px solid rgba(255,255,255,.82); border-radius:30px; padding:clamp(24px,2.5vw,38px); box-shadow:0 24px 55px rgba(23,50,77,.2),inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter:blur(18px); }
.access-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--teal-dark); font-size:12px; line-height:1.3; font-weight:900; letter-spacing:.16em; }
.access-kicker::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 23%,transparent); }
.access-card h2 { margin:10px 0 7px; color:var(--ink); font-size:clamp(24px,2vw,32px); letter-spacing:-.03em; }
.access-intro { margin:0 0 25px; color:var(--ink-soft); font-size:14px; line-height:1.65; font-weight:700; }
.access-label { display:block; margin:0 0 9px; color:var(--ink); font-size:15px; font-weight:900; }
.password-field { display:flex; align-items:stretch; padding:5px; border:2px solid color-mix(in srgb,var(--teal) 30%,var(--line)); border-radius:16px; background:rgba(255,255,255,.74); box-shadow:0 0 0 5px color-mix(in srgb,var(--sky) 52%,transparent); transition:border-color .2s ease,box-shadow .2s ease; }
.password-field:focus-within { border-color:var(--teal); box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 16%,transparent); }
.password-field input { min-width:0; flex:1; min-height:48px; border:0; outline:0; background:transparent; color:var(--ink); padding:9px 11px; font-size:18px; font-weight:800; }
.password-field input::placeholder { color:color-mix(in srgb,var(--ink-soft) 70%,white); }
.password-field button { min-width:76px; border:0; border-radius:11px; background:color-mix(in srgb,var(--sky) 75%,white); color:var(--teal-dark); font-size:14px; font-weight:900; }
.password-field input[aria-invalid="true"] { color:var(--coral-dark); }
.password-field:has(input[aria-invalid="true"]) { border-color:var(--coral); box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 13%,transparent); }
.access-error { min-height:22px; margin:8px 2px 2px; color:var(--coral-dark); font-size:13px; font-weight:800; }
.access-error.is-success { color:var(--teal-dark); text-align:center; }
.access-submit { min-height:64px; margin-top:9px; padding-inline:22px; border-radius:19px; font-size:20px; background:linear-gradient(100deg,#ffb75f,var(--coral) 48%,#ff72a2); }
.access-submit i { font-style:normal; font-size:19px; }
.access-hint { display:block; margin-top:20px; color:var(--ink-soft); text-align:center; font-size:13px; font-weight:700; }
.field-label, fieldset legend { display:block; color:var(--ink-soft); font-size:12px; font-weight:900; margin:0 0 8px; }
.select-row { display:flex; gap:8px; margin-bottom:15px; }
.select-row select { min-width:0; flex:1; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:12px; padding:11px 13px; font-weight:800; }
.select-row button { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:0 13px; font-weight:800; }
fieldset { border:0; padding:0; margin:14px 0; }
.segment { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:5px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); }
.segment:has(button:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.segment button { border:0; background:transparent; color:var(--ink-soft); min-height:38px; border-radius:9px; font-size:12px; font-weight:900; }
.segment button.active { background:var(--surface); color:var(--teal-dark); box-shadow:0 6px 14px rgba(23,50,77,.10); }
.timer-settings { margin-top:16px; padding:11px; border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line)); border-radius:15px; background:linear-gradient(145deg,rgba(224,250,245,.72),rgba(255,250,229,.72)); }
.timer-settings legend { margin-left:2px; padding:0 5px; color:var(--teal-dark); }
.dual-mode-settings { padding:9px; border:1px solid color-mix(in srgb,var(--gold) 48%,var(--line)); border-radius:15px; background:linear-gradient(145deg,rgba(255,248,214,.78),rgba(232,249,245,.72)); }
.dual-mode-settings legend { margin-left:2px; padding:0 5px; color:var(--coral-dark); }
.timer-setting-row { display:grid; gap:9px; }
.countdown-control { margin-top:9px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink-soft); font-size:12px; font-weight:900; }
.countdown-control[hidden] { display:none; }
.duration-input { display:flex; align-items:center; gap:5px; color:var(--ink); white-space:nowrap; }
.duration-input input { width:66px; min-height:34px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); padding:5px 8px; text-align:center; font-size:15px; font-weight:900; }
.primary-action, .modal-actions .primary, .modal-footer .primary { border:0; background:var(--coral); color:#fff; font-weight:900; border-radius:14px; min-height:50px; padding:12px 18px; box-shadow:0 7px 0 var(--coral-dark), 0 13px 22px color-mix(in srgb, var(--coral) 24%, transparent); }
.primary-action { width:100%; display:flex; justify-content:space-between; align-items:center; font-size:16px; margin-top:20px; }
.primary-action:active, .modal-actions .primary:active, .modal-footer .primary:active { transform:translateY(5px); box-shadow:0 2px 0 var(--coral-dark); }
.resume-note { text-align:center; color:var(--ink-soft); font-size:12px; margin:16px 0 0; }

.game-screen { min-height:calc(100dvh - 74px); padding:14px clamp(16px,2.8vw,38px) 26px; }
.game-header { position:absolute; z-index:7; left:clamp(150px,12vw,195px); right:28px; top:17px; min-height:0; margin:0; }
.game-message { width:100%; position:relative; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.game-message::after { display:none; }
.game-header h1 { max-width:980px; font-size:clamp(22px,2.25vw,34px); line-height:1.24; margin:5px 0 7px; letter-spacing:-.025em; }
.game-header p { display:flex; flex-wrap:wrap; gap:7px 18px; color:var(--ink-soft); margin:0; font-size:12px; }
.game-header p strong { color:var(--coral-dark); }
.game-rule { color:var(--teal-dark); font-weight:900; }
.game-header h1,.game-header .eyebrow,.game-header p { text-shadow:0 2px 0 rgba(255,255,255,.86),0 5px 13px rgba(23,92,105,.1); }
.bridge-progress { max-width:1600px; margin:0 auto 14px; display:block; }
.bridge-scene { min-width:0; min-height:260px; position:relative; display:grid; grid-template-columns:118px minmax(0,1fr) 118px; align-items:end; gap:0; overflow:hidden; padding:7px 14px 9px; border:3px solid rgba(255,255,255,.84); border-radius:26px; background:linear-gradient(180deg,#bceff1 0 72%,#d5f4e4 72% 79%,#79d8dc 79% 100%); box-shadow:0 10px 24px rgba(23,50,77,.13),inset 0 2px 0 rgba(255,255,255,.78); }
.bridge-scene::before { content:""; position:absolute; z-index:0; inset:0 0 34%; opacity:.92; background:radial-gradient(ellipse at 3% 72%,rgba(255,255,255,.88) 0 7%,transparent 7.5%),radial-gradient(ellipse at 10% 78%,rgba(255,249,220,.83) 0 8%,transparent 8.5%),radial-gradient(ellipse at 88% 66%,rgba(255,255,255,.85) 0 9%,transparent 9.5%),radial-gradient(ellipse at 98% 72%,rgba(255,249,220,.8) 0 9%,transparent 9.5%),linear-gradient(165deg,transparent 55%,rgba(255,255,255,.46) 55.5% 57%,transparent 57.5%); }
.bridge-scene::after { content:""; position:absolute; z-index:0; left:0; right:0; bottom:0; height:36px; background:repeating-radial-gradient(ellipse at 50% 112%,rgba(255,255,255,.48) 0 5px,transparent 6px 24px),linear-gradient(180deg,rgba(77,190,195,.08),rgba(45,164,181,.24)); opacity:.82; }
.bridge-bank { position:relative; z-index:4; width:100%; min-height:55px; border:0; border-radius:58% 55% 7px 7px; background:linear-gradient(180deg,#7ed36f 0 14px,#b8df72 14px 21px,#e8bd66 21px 100%); box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 7px 0 #c9974e,0 11px 15px rgba(95,67,30,.2); color:transparent; font-size:0; }
.bridge-bank::before { content:""; position:absolute; z-index:5; top:-11px; width:23px; height:68px; border:2px solid #95602f; border-radius:8px 8px 5px 5px; background:linear-gradient(90deg,#a86631 0 18%,#d99a4e 19% 67%,#b77638 68%); box-shadow:inset 3px 0 0 rgba(255,255,255,.16),0 4px 5px rgba(76,47,20,.2); }
.bridge-bank::after { content:""; position:absolute; left:8px; right:8px; top:-8px; height:20px; background:radial-gradient(circle at 12% 72%,#55bd6d 0 7px,transparent 7.5px),radial-gradient(circle at 29% 42%,#87db7b 0 9px,transparent 9.5px),radial-gradient(circle at 58% 64%,#65c76f 0 8px,transparent 8.5px),radial-gradient(circle at 82% 38%,#9ade7f 0 10px,transparent 10.5px); }
.bridge-bank-start { border-radius:65% 48% 7px 7px; }
.bridge-bank-start::before { right:-4px; }
.bridge-bank-end { border-radius:48% 65% 7px 7px; }
.bridge-bank-end::before { left:-4px; }
.bridge-lanes { min-width:0; position:relative; z-index:3; display:grid; gap:8px; align-self:stretch; }
.bridge-lane { min-width:0; min-height:132px; position:relative; display:flex; align-items:flex-end; padding-top:26px; }
.bridge-lane::before { content:""; position:absolute; z-index:0; left:-5px; right:-5px; bottom:27px; height:46px; border-bottom:4px solid #ae7135; border-radius:0 0 50% 50%; opacity:.72; }
.bridge-lane-label { position:absolute; z-index:6; left:8px; top:1px; padding:3px 9px; border:2px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(255,255,255,.78); color:#087f8c; box-shadow:0 3px 8px rgba(23,50,77,.08); font-size:9px; font-weight:900; }
.bridge-progress:not(.is-dual) .bridge-lane-label { display:none; }
.bridge-plank-row { width:100%; position:relative; z-index:2; display:grid; grid-template-columns:repeat(var(--slot-count),minmax(0,1fr)); align-items:end; gap:4px; margin-bottom:17px; padding:0 1px; }
.bridge-slot { height:43px; position:relative; border:2px dashed rgba(160,106,54,.5); border-radius:10px 10px 8px 8px; background:rgba(255,246,215,.4); box-shadow:inset 0 -6px 0 rgba(116,78,38,.08); transform:translateY(0); transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease; }
.bridge-slot.is-built { border-style:solid; border-color:#a86d37; background:linear-gradient(180deg,#ffe793,#f4c75d); box-shadow:inset 0 4px 0 rgba(255,255,255,.46),inset 0 -5px 0 rgba(139,83,32,.13),0 5px 0 #aa6832,0 9px 13px rgba(89,56,25,.2); }
.bridge-slot.is-built::before { content:""; position:absolute; left:10%; right:10%; top:8px; height:2px; border-radius:2px; background:rgba(255,255,255,.44); box-shadow:0 14px 0 rgba(126,77,34,.09); }
.bridge-slot.is-built::after { content:""; position:absolute; right:7px; bottom:5px; width:4px; height:4px; border-radius:50%; background:rgba(105,65,31,.28); }
.bridge-slot.is-built:nth-child(4n+1) { background:linear-gradient(180deg,#9be8d8,#55c8b5); }
.bridge-slot.is-built:nth-child(4n+2) { background:linear-gradient(180deg,#ffe793,#f4c75d); }
.bridge-slot.is-built:nth-child(4n+3) { background:linear-gradient(180deg,#fff6d9,#ead8aa); }
.bridge-slot.is-built:nth-child(4n) { background:linear-gradient(180deg,#ffad89,#ef7457); }
.bridge-slot.just-built { animation:plankLand .42s ease-out; }
.bridge-runner { width:112px; height:120px; object-fit:contain; position:absolute; z-index:5; left:0; bottom:48px; transform:translateX(-50%); filter:drop-shadow(0 7px 6px rgba(23,50,77,.25)); transition:left .45s cubic-bezier(.2,.85,.35,1.15),transform .35s ease; pointer-events:none; }
.bridge-runner.is-finished { transform:translateX(-50%) translateY(-4px) rotate(5deg) scale(1.08); }
.bridge-progress.is-dual .bridge-scene { min-height:340px; display:block; padding:0 12px 10px; }
.bridge-progress.is-dual .game-header { left:38px; right:38px; top:14px; }
.bridge-progress.is-dual .game-header h1 { max-width:none; margin:3px 0 4px; font-size:clamp(22px,2vw,31px); }
.bridge-progress.is-dual .game-header p { font-size:12px; }
.bridge-progress.is-dual .bridge-scene > .bridge-bank { display:none; }
.bridge-progress.is-dual .bridge-lanes { height:100%; padding-top:106px; display:grid; grid-template-rows:repeat(2,minmax(100px,1fr)); gap:8px; }
.bridge-progress.is-dual .bridge-lane {
  --lane-color:#23aa9a;
  min-height:100px;
  display:grid;
  grid-template-columns:82px minmax(0,1fr) 82px;
  align-items:end;
  gap:0;
  padding:4px 9px 7px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:19px;
  background:linear-gradient(90deg,rgba(219,255,246,.76),rgba(255,255,255,.28));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.68),0 5px 12px rgba(23,50,77,.08);
}
.bridge-progress.is-dual .bridge-lane[data-player="2"] { --lane-color:#ef7b5f; background:linear-gradient(90deg,rgba(255,239,218,.78),rgba(255,255,255,.3)); }
.bridge-progress.is-dual .bridge-lane::before { display:none; }
.bridge-progress.is-dual .bridge-lane-label {
  left:14px;
  top:8px;
  width:68px;
  min-height:42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:4px 6px;
  border-color:color-mix(in srgb,var(--lane-color) 42%,white);
  color:color-mix(in srgb,var(--lane-color) 76%,#17324d);
  font-size:11px;
  line-height:1.1;
}
.bridge-progress.is-dual .bridge-lane-label b { font-size:12px; }
.bridge-progress.is-dual .bridge-lane-label em { font-style:normal; font-weight:900; color:#17324d; }
.bridge-track { min-width:0; min-height:78px; position:relative; display:flex; align-items:flex-end; }
.bridge-progress.is-dual .bridge-track::before { content:""; position:absolute; z-index:0; left:-4px; right:-4px; bottom:20px; height:39px; border-bottom:4px solid #ae7135; border-radius:0 0 50% 50%; opacity:.7; }
.bridge-progress.is-dual .lane-bank { display:block; min-height:42px; margin-bottom:7px; }
.bridge-progress.is-dual .lane-bank::before { width:18px; height:52px; top:-8px; }
.bridge-progress.is-dual .bridge-plank-row { gap:4px; margin-bottom:10px; }
.bridge-progress.is-dual .bridge-slot { height:34px; }
.bridge-progress.is-dual .bridge-runner { width:70px; height:78px; bottom:32px; }
.bridge-progress.is-dual + .game-layout { height:calc(100dvh - 74px - 380px); }
.bridge-summary { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line)); border-radius:13px; background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--gold) 10%,var(--surface))); color:var(--ink-soft); font-size:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.bridge-summary span { font-weight:800; }
.bridge-summary strong { color:var(--ink); font-size:13px; }
.round-progress.is-dual { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.dual-player-chip { min-width:0; display:flex!important; flex-direction:column; align-items:center; gap:2px; padding:7px 5px; border:1px solid #72d5c7; border-radius:10px; background:#e5fbf6; color:#08796d!important; line-height:1.15; }
.dual-player-chip[data-player="2"] { border-color:#f5ad8f; background:#fff0e7; color:#c6533b!important; }
.dual-player-chip b { font-size:12px; white-space:nowrap; }
.dual-player-chip em { font-style:normal; font-size:15px; font-weight:900; color:#17324d; white-space:nowrap; }
.flying-plank { width:72px; height:32px; position:fixed; z-index:2200; pointer-events:none; border:2px solid #bd7b3d; border-radius:10px; background:linear-gradient(180deg,#ffe49a,#efbd5d); box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 7px 16px rgba(74,43,20,.25); }
.flying-plank.tone-0 { background:linear-gradient(180deg,#8de2d3,#43bfae); }
.flying-plank.tone-1 { background:linear-gradient(180deg,#ffe59b,#efbc58); }
.flying-plank.tone-2 { background:linear-gradient(180deg,#fff9e7,#ead9ad); }
.flying-plank.tone-3 { background:linear-gradient(180deg,#ff9a78,#ef684c); }
@keyframes plankLand { 0%{transform:translateY(-18px) rotate(-7deg) scale(.75);opacity:.35} 70%{transform:translateY(3px) rotate(2deg) scale(1.08)} 100%{transform:translateY(0) rotate(0) scale(1);opacity:1} }
.game-layout { max-width:1600px; height:calc(100dvh - 74px - 326px); min-height:360px; margin:auto; display:grid; grid-template-columns:210px minmax(0,1fr); gap:16px; }
.mission-panel { border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.mini-mascot { background:var(--surface-2); border-radius:15px; overflow:hidden; position:relative; min-height:190px; }
.mini-mascot img { width:100%; height:180px; object-fit:cover; object-position:center 35%; display:block; }
.mini-mascot p { margin:-42px 8px 8px; position:relative; z-index:2; background:rgba(255,255,255,.92); color:#17324d; border-radius:10px; padding:9px; font-size:11px; line-height:1.45; font-weight:800; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.metric-grid div { padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.metric-grid span { display:block; color:var(--ink-soft); font-size:10px; font-weight:800; }
.metric-grid strong { display:block; margin-top:3px; font-size:21px; }
#timeValue.is-warning { color:#e84f47; animation:timerPulse .8s ease-in-out infinite alternate; }
@keyframes timerPulse { from{transform:scale(1)} to{transform:scale(1.06)} }
.metric-grid strong.is-dual-value { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:5px; font-size:14px; }
.metric-grid strong.is-dual-value .metric-player { display:flex; align-items:center; justify-content:center; gap:2px; min-width:0; padding:4px 2px; border-radius:8px; background:#dff8f2; color:#08796d; font-size:14px; line-height:1; }
.metric-grid strong.is-dual-value .metric-player[data-player="2"] { background:#ffebe1; color:#c6533b; }
.metric-grid strong.is-dual-value i { font-style:normal; font-size:11px; }
.metric-grid strong.turn-time .metric-player { flex-direction:column; gap:3px; font-size:15px; }
.metric-grid strong.turn-time .metric-player.is-active-turn { outline:3px solid var(--gold); background:#fff6cf; color:#8a5a00; }
.metric-grid strong.turn-time.is-warning .metric-player.is-active-turn { color:#e84f47; }
.bridge-progress.is-dual + .game-layout .mission-panel { gap:9px; padding:11px; }
.bridge-progress.is-dual + .game-layout .mini-mascot { min-height:88px; display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:7px; padding:7px; }
.bridge-progress.is-dual + .game-layout .mini-mascot img { width:74px; height:74px; border-radius:12px; object-fit:cover; object-position:center 32%; }
.bridge-progress.is-dual + .game-layout .mini-mascot p { margin:0; padding:7px; font-size:11px; line-height:1.4; }
.bridge-progress.is-dual + .game-layout .bridge-summary { width:100%; gap:7px; padding:8px; }
.bridge-progress.is-dual + .game-layout .bridge-summary > strong { width:100%; padding:5px 8px; border-radius:8px; background:#fff8e9; text-align:center; }
.bridge-progress.is-dual + .game-layout .metric-grid { grid-template-columns:1fr; gap:7px; }
.bridge-progress.is-dual + .game-layout .metric-grid > div { padding:7px; }
.bridge-progress.is-dual + .game-layout .metric-grid .detail-metric { display:none; }
.bridge-progress.is-dual + .game-layout .metric-grid .time-metric { padding:11px; text-align:center; background:linear-gradient(145deg,#e6fbf6,#fff7dc); }
.bridge-progress.is-dual + .game-layout .metric-grid .time-metric span { font-size:12px; }
.bridge-progress.is-dual + .game-layout .metric-grid .time-metric strong { margin-top:4px; color:var(--teal-dark); font-size:34px; letter-spacing:.03em; }
.bridge-progress.is-dual + .game-layout .keyboard-tip { display:none; }
.keyboard-tip { margin:auto 0 0; color:var(--ink-soft); font-size:10px; line-height:1.55; }
.board-wrap { min-width:0; min-height:0; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 72%,var(--surface)); border-radius:20px; padding:14px; box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--surface) 55%,transparent); overflow:auto; touch-action:manipulation; }
.single-board { height:100%; display:grid; gap:clamp(8px,1vw,13px); }
.single-board.easy { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); }
.single-board.medium { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); }
.single-board.hard { grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); }
.dual-boards { height:100%; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.player-board { min-width:0; display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:10px; }
.player-head { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.player-head strong { display:flex; align-items:center; gap:7px; font-size:14px; }.player-head span { color:var(--teal-dark); font-weight:900; font-size:12px; }
.player-turn-status { padding:3px 7px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); font-size:9px; line-height:1; }
.player-board.is-active-turn { border-color:var(--gold); box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent),0 9px 18px rgba(23,50,77,.12); }
.player-board.is-active-turn .player-turn-status { background:var(--gold); color:#17324d; }
.player-board.is-waiting-turn { opacity:.58; filter:saturate(.68); }
.player-board.is-waiting-turn .player-grid { pointer-events:none; }
.player-board.is-finished-turn { opacity:.8; }
.player-board.is-finished-turn .player-turn-status { background:var(--teal); color:#fff; }
.player-grid { min-height:0; flex:1; display:grid; gap:7px; }
.player-grid.easy { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); }
.player-grid.medium { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); }
.player-grid.hard { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(6,1fr); }
.match-card { min-width:0; min-height:0; border:2px solid var(--line); border-radius:14px; background:var(--surface); position:relative; padding:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--ink); box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 13%,transparent),0 9px 13px rgba(23,50,77,.07); font-weight:900; line-height:1.12; text-align:center; overflow:hidden; user-select:none; touch-action:pan-y; transition:transform .12s,opacity .22s,border-color .12s,background .12s; }
.single-board .match-card { font-size:clamp(15px,2.5vmin,32px); }
.player-grid .match-card { font-size:clamp(10px,1.45vmin,18px); border-radius:10px; padding:4px; }
.match-card[data-side="en"] { border-color:color-mix(in srgb,var(--teal) 42%,var(--line)); background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--sky) 54%,var(--surface))); color:var(--teal-dark); }
.match-card[data-side="zh"] { border-color:color-mix(in srgb,var(--coral) 40%,var(--line)); background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--coral) 12%,var(--surface))); color:var(--coral-dark); }
.match-card::after { content:attr(data-kind); position:absolute; right:7px; top:6px; color:var(--ink-soft); opacity:.42; font-size:8px; letter-spacing:.08em; }
.match-card small { display:block; margin-top:5px; font-size:.43em; color:var(--ink-soft); opacity:.78; font-weight:700; }
.match-card:hover { transform:translateY(-2px); }
.match-card.is-selected { transform:translateY(4px) scale(.98); border-color:var(--gold); box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--gold) 26%,transparent); }
.match-card.is-wrong { animation:shake .4s; border-color:#d94a42; background:#fff0ed; }
.match-card.is-matched { animation:buildAway .3s ease-in forwards; pointer-events:none; }
.match-card.is-matched::after { display:none!important; }
.board-wrap.is-paused { filter:blur(7px); pointer-events:none; }
@keyframes shake { 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
@keyframes buildAway { 0%{opacity:1;transform:scale(1)} 35%{opacity:.62;transform:scale(1.06) rotate(-2deg)} 100%{opacity:0;transform:translateY(-22px) scale(.28) rotate(8deg);visibility:hidden} }

.modal-layer { position:fixed; inset:0; z-index:1000; background:rgba(9,27,45,.64); backdrop-filter:blur(10px); padding:18px; display:flex; align-items:center; justify-content:center; overflow:auto; }
.modal-card { width:min(720px,100%); max-height:calc(100dvh - 36px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:clamp(20px,3vw,34px); box-shadow:0 28px 80px rgba(0,0,0,.28); }
.wide-card { width:min(1180px,100%); }
.modal-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:20px; }
.modal-header h2 { font-size:clamp(25px,3vw,38px); margin:4px 0; }.modal-header p{margin:0;color:var(--ink-soft);}
.close-modal { border:1px solid var(--line); background:var(--surface-2); border-radius:11px; min-width:40px; min-height:40px; font-weight:900; }
.modal-actions,.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:22px; }
.modal-actions button,.modal-footer button { border:1px solid var(--line); background:var(--surface-2); border-radius:12px; min-height:44px; padding:9px 15px; font-weight:900; }
.modal-actions .primary,.modal-footer .primary { background:var(--coral); border:0; min-height:44px; }
.top-actions #libraryButton,.top-actions #settingsButton { border-color:color-mix(in srgb,var(--teal) 55%,var(--line)); color:var(--teal-dark); }
.top-actions #audioButton { min-width:92px; }
.settings-card { width:min(1180px,100%); }
.settings-card .modal-header { margin-bottom:14px; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.settings-panel { min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface-2) 72%,transparent); }
.settings-panel h3 { margin:0 0 9px; color:var(--ink); font-size:16px; }
.settings-panel fieldset { margin:8px 0; }
.settings-panel .select-row { margin-bottom:8px; }
.settings-panel-span-2 { grid-column:span 2; }
.settings-lower-grid { display:grid; grid-template-columns:1fr; align-items:stretch; gap:8px; }
.settings-card .timer-settings,.theme-settings { height:100%; margin:0; padding:9px; border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line)); border-radius:14px; background:linear-gradient(145deg,rgba(224,250,245,.72),rgba(255,250,229,.72)); }
.theme-settings legend { margin-left:2px; padding:0 5px; color:var(--teal-dark); }
.settings-card .timer-setting-row { grid-template-columns:1fr; align-items:center; }
.settings-card .countdown-control { min-height:48px; margin:0; padding:0 9px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.7); }
.settings-section-heading { min-height:38px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.settings-section-heading h3 { margin:0 0 2px; }
.settings-section-heading p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.35; }
.settings-section-heading > button { border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:7px 10px; font-size:11px; font-weight:900; white-space:nowrap; }
.settings-records-panel .record-summary { gap:7px; margin-bottom:7px; }
.settings-records-panel .record-summary div { padding:7px 9px; }
.settings-records-panel .record-summary strong { font-size:18px; }
.settings-records-panel .record-list { max-height:122px; gap:5px; }
.settings-records-panel .record-row { padding:7px 9px; font-size:11px; }
.settings-records-panel .empty-state { padding:19px 12px; }
.settings-archive-panel .archive-options { grid-template-columns:1fr; gap:7px; }
.settings-archive-panel .archive-options article { grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; }
.settings-archive-panel .archive-options article > span { grid-row:1; width:36px; height:36px; border-radius:10px; font-size:18px; }
.settings-archive-panel .archive-options article > div { grid-column:2; }
.settings-archive-panel .archive-options strong { font-size:12px; }
.settings-archive-panel .archive-options p { margin:2px 0 0; font-size:10px; line-height:1.3; }
.settings-archive-panel .archive-options button,.settings-archive-panel .archive-options label { grid-column:3; grid-row:1; width:auto; padding:7px 9px; white-space:nowrap; }
.settings-archive-panel .archive-note { margin:7px 2px 0; font-size:10px; }
.settings-note { margin:10px 2px 0; color:var(--ink-soft); font-size:12px; font-weight:700; }
.settings-card .modal-footer { margin-top:10px; }
.audio-card { width:min(620px,100%); }
.audio-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.audio-choice {
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 11px;
  padding:16px;
  border:2px solid var(--line);
  border-radius:17px;
  background:var(--surface-2);
  color:var(--ink);
  text-align:left;
}
.audio-choice > span { grid-row:1 / 3; display:grid; place-items:center; width:50px; height:50px; border-radius:15px; background:#dbe8e8; color:var(--ink-soft); font-size:24px; font-weight:900; }
.audio-choice strong { align-self:end; font-size:16px; }
.audio-choice small { align-self:start; color:var(--ink-soft); font-size:11px; line-height:1.35; }
.audio-choice em { grid-column:3; grid-row:1 / 3; padding:5px 8px; border-radius:999px; background:#e2e9e9; color:var(--ink-soft); font-size:11px; font-style:normal; font-weight:900; white-space:nowrap; }
.audio-choice.is-on { border-color:color-mix(in srgb,var(--teal) 65%,white); background:linear-gradient(145deg,#e7fbf7,#fffdf4); box-shadow:0 8px 18px rgba(23,50,77,.08); }
.audio-choice.is-on > span { background:var(--teal); color:#fff; }
.audio-choice.is-on em { background:#d8f6ef; color:var(--teal-dark); }
.result-card { text-align:center; }.result-badge{margin:auto auto 13px;display:grid;place-items:center;width:72px;height:72px;border-radius:23px;background:var(--teal);color:#fff;font-size:36px;box-shadow:0 9px 0 var(--teal-dark);}.result-card h2{font-size:clamp(30px,4vw,48px);margin:10px 0}.result-card>p{color:var(--ink-soft)}
.result-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:24px 0; }.result-stats.is-compact{grid-template-columns:repeat(3,1fr)}.result-stats div{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:12px 6px}.result-stats span{display:block;color:var(--ink-soft);font-size:11px}.result-stats strong{display:block;font-size:23px;margin-top:4px}
.library-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; min-height:420px; }.library-layout>aside{border:1px solid var(--line);border-radius:15px;padding:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}.unit-list{display:flex;flex-direction:column;gap:7px;overflow:auto}.unit-list button{border:1px solid transparent;background:transparent;border-radius:10px;padding:11px;text-align:left}.unit-list button.active{background:var(--surface);border-color:var(--line);box-shadow:0 5px 12px rgba(23,50,77,.08)}.unit-list strong,.unit-list small{display:block}.unit-list small{color:var(--ink-soft);font-size:10px;margin-top:3px}.library-layout aside>button{margin-top:auto;border:1px dashed var(--teal);color:var(--teal-dark);background:var(--surface);border-radius:11px;padding:11px;font-weight:900}.word-preview{min-width:0;border:1px solid var(--line);border-radius:15px;padding:14px}.word-preview>header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:10px}.word-preview h3{margin:0;font-size:22px}.word-preview p{margin:3px 0 0;color:var(--ink-soft);font-size:12px}.word-preview header button{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:8px 10px;font-weight:800}.danger{color:#b93f37!important}.word-table-wrap{max-height:370px;overflow:auto;border:1px solid var(--line);border-radius:11px}table{width:100%;border-collapse:collapse;font-size:12px}th,td{padding:10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{position:sticky;top:0;background:var(--ink);color:var(--surface);z-index:1}td:first-child{font-weight:900;color:var(--teal-dark)}
.editor-field{display:flex;flex-direction:column;gap:8px;margin:14px 0;color:var(--ink-soft);font-size:12px;font-weight:900}.editor-field input,.editor-field textarea{border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:12px;font-size:14px;line-height:1.6}.import-tools{display:flex;gap:9px}.import-tools label,.import-tools button,.archive-options label,.archive-options button{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:9px 13px;font-weight:900;font-size:12px}.editor-hint,.archive-note{color:var(--ink-soft);font-size:12px;line-height:1.6}.editor-hint.is-error{color:#b93f37}.editor-hint.is-success{color:var(--teal-dark)}
.record-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.record-summary div{background:var(--surface-2);border-radius:13px;padding:14px}.record-summary span{display:block;color:var(--ink-soft);font-size:11px}.record-summary strong{font-size:25px}.record-list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}.record-row{display:grid;grid-template-columns:1.4fr repeat(5,.6fr);gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px}.record-row strong{display:block}.record-row small{color:var(--ink-soft)}.empty-state{text-align:center;color:var(--ink-soft);padding:45px 15px;border:1px dashed var(--line);border-radius:13px}
.archive-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.archive-options article{display:grid;grid-template-columns:auto 1fr;gap:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:16px}.archive-options article>span{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ink);color:var(--gold);font-size:23px}.archive-options strong{font-size:16px}.archive-options p{color:var(--ink-soft);font-size:12px;line-height:1.5}.archive-options button,.archive-options label{grid-column:2;width:max-content}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-grid article{border:1px solid var(--line);background:var(--surface-2);border-radius:15px;padding:15px}.help-grid b{color:var(--coral-dark);font-size:11px;letter-spacing:.1em}.help-grid h3{margin:7px 0}.help-grid p{margin:0;color:var(--ink-soft);line-height:1.65;font-size:13px}
.pause-layer{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:rgba(9,27,45,.55);backdrop-filter:blur(9px)}.pause-layer>div{background:var(--surface);border-radius:22px;padding:32px;text-align:center;box-shadow:var(--shadow)}.pause-layer span,.pause-layer strong{display:block}.pause-layer span{color:var(--ink-soft)}.pause-layer strong{font-size:27px;margin:7px 0 20px}.pause-layer button{border:0;background:var(--coral);color:#fff;border-radius:12px;padding:12px 28px;font-weight:900}.toast{position:fixed;z-index:2000;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--surface);border-radius:12px;padding:11px 18px;font-size:13px;font-weight:800;box-shadow:var(--shadow);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}

.orientation-layer {
  position:fixed;
  z-index:1100;
  inset:74px 0 0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(19,63,75,.56);
  backdrop-filter:blur(10px);
}
.orientation-card {
  width:min(520px,100%);
  padding:30px 28px;
  border:3px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:linear-gradient(145deg,#fffef8,#e6fbf7 58%,#fff3dd);
  color:var(--ink);
  text-align:center;
  box-shadow:0 24px 60px rgba(9,43,56,.28);
}
.orientation-icon {
  width:72px;
  height:72px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:var(--teal);
  color:white;
  font-size:44px;
  font-weight:900;
  box-shadow:0 8px 0 var(--teal-dark);
}
.orientation-card strong { display:block; font-size:clamp(24px,4vw,36px); }
.orientation-card p { margin:13px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.7; font-weight:700; }
body.is-dual-orientation-blocked { overflow:hidden; }

/* 软萌搭搭木牌棋盘 */
.board-wrap {
  border:3px solid color-mix(in srgb,var(--teal) 28%,var(--surface));
  border-radius:30px;
  padding:16px;
  background-color:#eaf8f3;
  background-image:
    radial-gradient(circle at 17px 17px,rgba(29,165,143,.12) 0 4px,transparent 4.5px),
    radial-gradient(circle at 48px 47px,rgba(242,123,87,.10) 0 3px,transparent 3.5px),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(226,246,239,.82));
  background-size:64px 64px,64px 64px,100% 100%;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.72),0 13px 0 rgba(14,121,107,.10),0 24px 40px rgba(23,50,77,.10);
}
.single-board,.player-grid { padding:4px; }
.player-board {
  border:2px solid rgba(29,165,143,.18);
  border-radius:23px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 7px 16px rgba(23,50,77,.08);
}
.player-head { min-height:36px; border-radius:13px; padding:7px 11px; background:linear-gradient(90deg,#fff5dc,#e8f8f2); }
.player-head strong::before { content:"●"; color:var(--coral); margin-right:7px; font-size:10px; }
.match-card {
  border-width:3px;
  border-radius:24px 19px 25px 19px;
  padding:13px 10px 9px;
  isolation:isolate;
  box-shadow:0 7px 0 rgba(23,50,77,.12),0 12px 18px rgba(23,50,77,.07),inset 0 0 0 3px rgba(255,255,255,.62);
  transition:transform .16s cubic-bezier(.2,.9,.25,1.25),box-shadow .16s,opacity .22s,border-color .12s;
}
.match-card::before {
  content:"";
  position:absolute;
  z-index:2;
  left:10px;
  top:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f3bd4d;
  box-shadow:0 1px 0 rgba(112,72,22,.26),inset 0 1px 1px rgba(255,255,255,.75);
}
.match-card::after {
  right:9px;
  top:8px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(23,50,77,.08);
  color:var(--ink-soft);
  opacity:.82;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  box-shadow:0 2px 5px rgba(23,50,77,.06);
}
.match-card[data-side="en"] {
  border-color:#82d7c6;
  background:
    radial-gradient(circle at 18% 82%,rgba(255,255,255,.9) 0 7px,transparent 7.5px),
    radial-gradient(circle at 28% 88%,rgba(255,255,255,.72) 0 4px,transparent 4.5px),
    linear-gradient(145deg,#fafffd,#dff6ef);
  color:#087b6b;
}
.match-card[data-side="zh"] {
  border-color:#f4b29e;
  background:
    radial-gradient(circle at 18% 82%,rgba(255,255,255,.9) 0 7px,transparent 7.5px),
    radial-gradient(circle at 28% 88%,rgba(255,255,255,.72) 0 4px,transparent 4.5px),
    linear-gradient(145deg,#fffdf8,#ffebe2);
  color:#c94f36;
}
.match-card .card-copy { position:relative; z-index:1; text-shadow:0 2px 0 rgba(255,255,255,.85); }
.match-card small { width:max-content; max-width:100%; margin:6px auto 0; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.72); border:1px dashed rgba(8,123,107,.22); }
.match-card:hover { transform:translateY(-4px) rotate(-.6deg); box-shadow:0 10px 0 rgba(23,50,77,.11),0 16px 22px rgba(23,50,77,.09),inset 0 0 0 3px rgba(255,255,255,.72); }
.match-card:nth-child(2n):hover { transform:translateY(-4px) rotate(.6deg); }
.match-card.is-selected { transform:translateY(5px) scale(.97) rotate(0); border-color:#f3bd4d; box-shadow:inset 0 0 0 5px rgba(243,189,77,.25),0 3px 0 rgba(23,50,77,.12); }
.match-card.is-wrong { border-color:#e45c51; background:#fff1eb; }
.match-card.is-wood {
  border-color:#f3ca72;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,246,195,.3) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(151,91,30,.08) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#efae59 0 16px,#f6bf6c 16px 18px,#e9a14c 18px 20px);
  box-shadow:0 6px 0 #c98238,0 11px 17px rgba(105,65,24,.14),inset 0 0 0 4px rgba(255,240,198,.52);
}
.match-card.is-wood .card-copy {
  min-width:0;
  max-width:100%;
  padding:0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#126f87;
  font-family:"Arial Rounded MT Bold","Microsoft YaHei","PingFang SC",sans-serif;
  font-weight:900;
  letter-spacing:.025em;
  -webkit-text-stroke:.35px rgba(255,249,226,.9);
  text-shadow:-1px -1px 0 rgba(255,247,218,.8),1px -1px 0 rgba(255,247,218,.8),-1px 1px 0 rgba(255,247,218,.8),1px 1px 0 rgba(255,247,218,.8),0 3px 5px rgba(111,63,23,.2);
  box-shadow:none;
}
.single-board .match-card.is-wood { font-size:clamp(20px,2.5vw,36px); }
.player-grid .match-card.is-wood { font-size:clamp(12px,1.8vmin,23px); }
.match-card.is-wood[data-side="en"] .card-copy { color:#0087a3; }
.match-card.is-wood[data-side="zh"] .card-copy { color:#eb5947; }
.match-card.is-wood small { display:none; }
.match-card.is-wood::after { display:none; }
.match-card.is-wood.is-selected {
  z-index:2;
  border-color:#fff2a1;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.42) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(20,126,145,.08) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#75d9e4 0 16px,#94e9e8 16px 18px,#62c9d7 18px 20px);
  transform:translateY(5px) scale(.97) rotate(0);
  box-shadow:0 0 0 5px #ffd95a,0 5px 0 #2e9caf,0 0 25px rgba(255,217,90,.82),inset 0 0 0 4px rgba(255,255,255,.62);
  animation:cardSelectPop .24s ease-out;
}
.match-card.is-wood.is-selected .card-copy { transform:scale(1.06); color:#075d70; }
.match-card.is-wood.is-selected[data-side="zh"] .card-copy { color:#c63f34; }
.match-card.is-wood.is-selected::after {
  content:"✓";
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  right:8px;
  top:7px;
  border:2px solid #fff7c8;
  border-radius:50%;
  background:#ffce45;
  color:#664100;
  opacity:1;
  font-size:18px;
  line-height:1;
  letter-spacing:0;
  box-shadow:0 3px 0 rgba(154,102,15,.28),0 0 12px rgba(255,255,255,.7);
}
.match-card.is-wood.is-wrong {
  border-color:#ff766c;
  background:repeating-linear-gradient(0deg,#ffaaa0 0 16px,#ffc0ad 16px 18px,#ff978e 18px 20px);
  box-shadow:0 0 0 5px #ffe2b9,0 5px 0 #d85c50,0 0 22px rgba(255,105,89,.5),inset 0 0 0 4px rgba(255,255,255,.5);
  animation:shake .4s;
}
.match-card.is-wood.is-wrong::after {
  content:"×";
  display:grid;
  place-items:center;
  border-color:#fff1eb;
  background:#f0524a;
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 3px 0 rgba(139,45,40,.3),0 0 14px rgba(255,255,255,.72);
}
.match-card.is-wood.is-matched {
  animation:buildAway .3s ease-in forwards;
  pointer-events:none;
}
@keyframes cardSelectPop {
  0% { transform:translateY(0) scale(1); }
  55% { transform:translateY(7px) scale(.945); }
  100% { transform:translateY(5px) scale(.97); }
}
@media (max-width:1180px) {
  .home-grid { grid-template-columns:1fr .9fr; }.home-copy{grid-column:1}.mascot-stage{grid-column:2;grid-row:1 / span 2}.access-card{grid-column:1}.topbar{align-items:flex-start}.top-actions{max-width:68%}.save-pill{display:none}.game-layout{grid-template-columns:175px minmax(0,1fr)}.bridge-scene{min-height:250px;grid-template-columns:102px minmax(0,1fr) 102px}.bridge-lane{min-height:117px}.bridge-runner{width:98px;height:106px;bottom:47px}.bridge-slot{height:39px}
  body.is-playing .mission-panel{padding:10px;gap:9px}body.is-playing .mini-mascot{min-height:150px}body.is-playing .mini-mascot img{height:150px}body.is-playing .bridge-summary{padding:7px 10px;gap:2px}body.is-playing .metric-grid div{padding:7px 9px}body.is-playing .keyboard-tip{display:none}
}
@media (max-width:900px) {
  .orientation-layer { inset:62px 0 0; }
  .topbar{min-height:62px;padding:8px 12px}.brand small{display:none}.brand-mark{width:38px;height:38px}.top-actions{max-width:74%;gap:5px}.top-actions button{min-height:36px;padding:6px 9px;font-size:11px}.home-screen{min-height:calc(100dvh - 62px);padding:18px}.home-grid{min-height:auto;grid-template-columns:1fr 1fr;align-items:start}.home-copy h1{font-size:42px}.home-copy>p{font-size:15px}.mascot-stage{height:430px;min-height:0}.access-card{grid-column:1 / -1;max-width:620px;width:100%;justify-self:center}.game-screen{min-height:calc(100dvh - 62px);padding:12px}.game-layout{height:auto;min-height:calc(100dvh - 190px);grid-template-columns:1fr}.mission-panel{display:grid;grid-template-columns:170px 1fr auto;align-items:center}.mini-mascot{min-height:0;height:80px}.mini-mascot img{display:none}.mini-mascot p{margin:0}.metric-grid{grid-template-columns:repeat(4,1fr)}.keyboard-tip{max-width:150px}.board-wrap{min-height:520px}.library-layout{grid-template-columns:200px minmax(0,1fr)}
  .settings-grid,.settings-lower-grid{grid-template-columns:1fr}.settings-panel-span-2{grid-column:auto}.settings-card .timer-setting-row{grid-template-columns:1fr 1fr}
}
@media (max-width:900px) {
  .bridge-progress.is-dual + .game-layout { grid-template-columns:1fr; height:auto; }
  .bridge-progress.is-dual + .game-layout .mission-panel { grid-template-columns:minmax(240px,.8fr) minmax(260px,1fr); align-items:stretch; }
  .bridge-progress.is-dual + .game-layout .mini-mascot { grid-column:1; }
  .bridge-progress.is-dual + .game-layout .bridge-summary { grid-column:2; }
  .bridge-progress.is-dual + .game-layout .metric-grid { grid-column:1 / -1; grid-template-columns:1fr; }
}
@media (max-width:700px), (orientation:portrait) and (max-width:900px) {
  .home-grid{display:flex;flex-direction:column}.home-copy{order:1;width:100%}.mascot-stage{order:2;width:100%;height:390px}.access-card{order:3;width:100%;display:block}.top-actions #fullscreenButton{display:none}.game-header{left:78px;right:14px;top:12px}.game-header h1{font-size:21px}.bridge-progress{grid-template-columns:1fr}.bridge-summary{min-width:0;flex-direction:row;justify-content:flex-end}.bridge-scene{grid-template-columns:54px minmax(0,1fr) 54px;min-height:210px;padding-inline:7px}.bridge-bank{min-height:39px}.bridge-bank::before{width:16px;height:49px}.bridge-slot{height:29px}.bridge-runner{width:57px;height:63px;bottom:36px}.bridge-lane{min-height:85px}.bridge-plank-row{gap:2px;margin-bottom:12px}.mission-panel{grid-template-columns:1fr}.mini-mascot,.keyboard-tip{display:none}.board-wrap{min-height:600px}.single-board.easy{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.single-board.hard{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}.dual-boards{grid-template-columns:1fr;min-height:1050px}.player-grid.easy{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}.player-grid.hard{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}.library-layout{grid-template-columns:1fr}.unit-list{max-height:160px}.record-row{grid-template-columns:1.3fr repeat(2,.7fr)}.record-row span:nth-child(n+4){display:none}.archive-options,.help-grid{grid-template-columns:1fr}.result-stats{grid-template-columns:repeat(3,1fr)}
  .audio-choice-grid{grid-template-columns:1fr}.settings-card .timer-setting-row{grid-template-columns:1fr}
}
@media (max-width:700px) {
  .bridge-progress.is-dual + .game-layout .mission-panel { grid-template-columns:1fr; }
  .bridge-progress.is-dual + .game-layout .mini-mascot,
  .bridge-progress.is-dual + .game-layout .bridge-summary,
  .bridge-progress.is-dual + .game-layout .metric-grid { grid-column:1; }
  .bridge-progress.is-dual + .game-layout .metric-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .top-actions button[data-open="helpModal"] { display:none; }
}
@media (min-width:901px) and (max-height:850px) {
  .settings-card { padding:18px 22px; }
  .settings-card .modal-header { margin-bottom:10px; }
  .settings-note { margin-top:6px; }
  .settings-card .modal-footer { margin-top:6px; }
}
/* 电脑横屏：整站锁定在一个可视页面内，内容在可用高度中弹性分配。 */
@media (min-width:901px) {
  html,
  body { width:100%; height:100%; min-height:0; overflow:hidden; }
  body { min-height:0; }
  .app-shell { height:100dvh; min-height:0; overflow:hidden; }
  .topbar { height:74px; min-height:74px; flex:0 0 74px; flex-wrap:nowrap; overflow:hidden; }
  .top-actions { max-width:none; flex-wrap:nowrap; }
  main { height:calc(100dvh - 74px); flex:0 0 auto; overflow:hidden; }
  .screen.is-active { height:100%; min-height:0; overflow:hidden; }

  .home-screen { height:100%; min-height:0; padding:clamp(12px,1.8vw,28px); }
  .home-grid {
    width:100%;
    max-width:1760px;
    height:100%;
    min-height:0;
    grid-template-columns:minmax(360px,.88fr) minmax(400px,1.12fr);
    grid-template-rows:max-content minmax(0,1fr);
    align-items:stretch;
    column-gap:clamp(28px,4vw,72px);
    row-gap:0;
  }
  .home-copy { grid-column:1; grid-row:1; align-self:end; max-width:650px; }
  .home-copy h1 { margin:11px 0 13px; font-size:clamp(36px,4.15vw,64px); }
  .home-copy > p { margin:0 auto; font-size:clamp(14px,1.2vw,19px); line-height:1.62; }
  .mascot-stage {
    grid-column:2;
    grid-row:1 / span 2;
    height:100%;
    min-height:0;
    align-self:stretch;
  }
  .mascot-stage::after {
    content:"";
    position:absolute;
    z-index:0;
    left:50%;
    bottom:20.5%;
    width:min(66%,390px);
    height:30px;
    border-radius:50%;
    background:rgba(23,50,77,.2);
    filter:blur(12px);
    transform:translateX(-50%);
  }
  .mascot-stage img {
    width:auto;
    max-width:none;
    height:min(78%,740px);
    position:absolute;
    left:50%;
    bottom:23%;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(-50%);
    filter:drop-shadow(0 25px 20px rgba(23,50,77,.22));
  }
  .speech-bubble { left:50%; right:auto; bottom:2%; width:max-content; max-width:calc(100% - 24px); padding:10px 12px; transform:translateX(-50%); }

  .access-card {
    grid-column:1;
    grid-row:2;
    width:100%;
    max-width:570px;
    max-height:100%;
    align-self:start;
    justify-self:center;
    margin-top:clamp(12px,2dvh,22px);
    padding:clamp(22px,2vw,34px);
    overflow:hidden;
  }
  .access-card h2 { font-size:clamp(23px,1.8vw,31px); }
  .access-intro { margin-bottom:clamp(18px,2dvh,25px); }
  .access-submit { min-height:clamp(54px,6.5dvh,64px); }

  .game-screen.is-active {
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    padding:10px clamp(14px,2.2vw,34px) 12px;
  }
  .bridge-progress { width:100%; flex:0 0 auto; margin:0 auto 10px; }
  .bridge-scene { height:clamp(220px,28dvh,260px); min-height:0; }
  .bridge-progress.is-dual .bridge-scene { height:clamp(280px,34dvh,340px); min-height:0; }
  .bridge-progress.is-dual .bridge-lanes { padding-top:84px; grid-template-rows:repeat(2,minmax(86px,1fr)); }
  .bridge-progress.is-dual .bridge-lane { min-height:86px; }
  .bridge-progress.is-dual .game-header h1 { font-size:clamp(20px,1.8vw,29px); }
  .game-layout,
  .bridge-progress.is-dual + .game-layout {
    width:100%;
    height:auto;
    min-height:0;
    flex:1 1 auto;
    margin:0 auto;
    overflow:hidden;
  }
  .mission-panel,
  .board-wrap,
  .dual-boards,
  .player-board { min-height:0; }
  .board-wrap { height:100%; overflow:hidden; }
  .player-board { overflow:hidden; }
}

/* 湖湾：清透水色贯穿桥面、棋盘与卡片。 */
html[data-theme="lagoon"] .game-screen {
  background:linear-gradient(155deg,#e8fcff 0%,#f6fff9 52%,#e5f7ff 100%);
}
html[data-theme="lagoon"] .bridge-scene {
  border-color:#e9ffff;
  background:linear-gradient(180deg,#91e3ed 0 70%,#c6f1d5 70% 79%,#49bdd4 79% 100%);
  box-shadow:0 12px 28px rgba(8,127,140,.18),inset 0 2px 0 rgba(255,255,255,.9);
}
html[data-theme="lagoon"] .mission-panel {
  border-color:#a8dedb;
  background:linear-gradient(180deg,#fbffff,#e9faf6);
}
html[data-theme="lagoon"] .mini-mascot { background:linear-gradient(145deg,#ddf7f3,#edfaff); }
html[data-theme="lagoon"] .board-wrap {
  border-color:#74d6d0;
  background-color:#e3fbf7;
  background-image:
    radial-gradient(circle at 17px 17px,rgba(8,127,140,.16) 0 4px,transparent 4.5px),
    radial-gradient(circle at 48px 47px,rgba(73,189,212,.14) 0 3px,transparent 3.5px),
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(208,247,241,.88));
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.76),0 13px 0 rgba(8,127,140,.13),0 24px 40px rgba(8,93,105,.12);
}
html[data-theme="lagoon"] .player-board { border-color:#8adbd2; background:rgba(250,255,254,.92); }
html[data-theme="lagoon"] .player-head { background:linear-gradient(90deg,#dff9f3,#dff5ff); }
html[data-theme="lagoon"] .match-card.is-wood {
  border-color:#82daca;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.35) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(5,111,123,.08) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#78dccc 0 16px,#9be9d9 16px 18px,#65cdbd 18px 20px);
  box-shadow:0 6px 0 #3aa99e,0 11px 17px rgba(8,93,105,.15),inset 0 0 0 4px rgba(232,255,250,.58);
}
html[data-theme="lagoon"] .match-card.is-wood[data-side="zh"] {
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.35) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(6,105,119,.08) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#9fe4ea 0 16px,#bfeef0 16px 18px,#87d5df 18px 20px);
}
html[data-theme="lagoon"] .bridge-progress.is-dual + .game-layout .metric-grid .time-metric {
  background:linear-gradient(145deg,#dcfaf5,#dff5ff);
}

/* 糖果晴空：奶油、蜜桃和晴空蓝形成明显的明亮游戏主题。 */
html[data-theme="evening"] .game-screen {
  background:
    radial-gradient(circle at 8% 10%,rgba(255,198,76,.24),transparent 20rem),
    radial-gradient(circle at 92% 86%,rgba(255,123,115,.18),transparent 24rem),
    linear-gradient(145deg,#fff9e9 0%,#edf9ff 48%,#fff3f7 100%);
}
html[data-theme="evening"] .bridge-scene {
  border-color:#fffdf3;
  background:linear-gradient(180deg,#ccefff 0 56%,#fff1bf 56% 72%,#7fd5e8 72% 100%);
  box-shadow:0 12px 30px rgba(255,123,115,.17),inset 0 2px 0 rgba(255,255,255,.94);
}
html[data-theme="evening"] .bridge-bank {
  background:linear-gradient(180deg,#89db78 0 14px,#bfe675 14px 21px,#ffd16f 21px 100%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.42),0 7px 0 #e4a44a,0 11px 15px rgba(145,85,39,.16);
}
html[data-theme="evening"] .mission-panel {
  border-color:#f6cad1;
  background:linear-gradient(180deg,#fffefb,#fff3e7);
}
html[data-theme="evening"] .mini-mascot { background:linear-gradient(145deg,#fff0cf,#e8f8ff); }
html[data-theme="evening"] .bridge-summary { border-color:#f5c96f; background:linear-gradient(145deg,#fff9dd,#fff1eb); }
html[data-theme="evening"] .board-wrap {
  border-color:#ffb9c2;
  background-color:#fff2f6;
  background-image:
    radial-gradient(circle at 17px 17px,rgba(255,123,115,.18) 0 4px,transparent 4.5px),
    radial-gradient(circle at 48px 47px,rgba(255,198,76,.22) 0 3px,transparent 3.5px),
    linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,235,242,.88));
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.78),0 13px 0 rgba(255,123,115,.13),0 24px 40px rgba(130,72,90,.11);
}
html[data-theme="evening"] .player-board { border-color:#ffc5cc; background:rgba(255,254,250,.94); }
html[data-theme="evening"] .player-head { background:linear-gradient(90deg,#fff0c8,#e2f6ff 58%,#ffe7ed); }
html[data-theme="evening"] .match-card[data-side="en"] {
  border-color:#8ed8ed;
  background:linear-gradient(145deg,#ffffff,#dff5ff);
  color:#167694;
}
html[data-theme="evening"] .match-card[data-side="zh"] {
  border-color:#ffb3bd;
  background:linear-gradient(145deg,#fffefd,#ffe5eb);
  color:#d85262;
}
html[data-theme="evening"] .match-card.is-wood[data-side="en"] {
  border-color:#8bd9e8;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.4) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(18,111,135,.07) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#8edfec 0 16px,#afeaf1 16px 18px,#79d1e2 18px 20px);
  box-shadow:0 6px 0 #4ba9c1,0 11px 17px rgba(38,72,102,.14),inset 0 0 0 4px rgba(241,253,255,.66);
}
html[data-theme="evening"] .match-card.is-wood[data-side="zh"] {
  border-color:#ffb4ad;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.4) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(160,70,63,.07) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#ffae94 0 16px,#ffc2a8 16px 18px,#ff9d87 18px 20px);
  box-shadow:0 6px 0 #dc745e,0 11px 17px rgba(130,72,90,.14),inset 0 0 0 4px rgba(255,243,234,.66);
}
html[data-theme="evening"] .bridge-slot.is-built:nth-child(4n+1) { background:linear-gradient(180deg,#9eeaf1,#64ccdf); }
html[data-theme="evening"] .bridge-slot.is-built:nth-child(4n+2) { background:linear-gradient(180deg,#ffe991,#ffc94f); }
html[data-theme="evening"] .bridge-slot.is-built:nth-child(4n+3) { background:linear-gradient(180deg,#fff9e9,#f4dfb3); }
html[data-theme="evening"] .bridge-slot.is-built:nth-child(4n) { background:linear-gradient(180deg,#ffb4ac,#ff7f73); }
html[data-theme="evening"] .bridge-progress.is-dual + .game-layout .metric-grid .time-metric {
  background:linear-gradient(145deg,#e7f8ff,#fff3c9 54%,#ffe7ed);
}
html[data-theme="lagoon"] .match-card.is-wood.is-selected,
html[data-theme="evening"] .match-card.is-wood.is-selected {
  border-color:#fff2a1;
  background:
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.44) 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 48%,rgba(20,126,145,.08) 48% 51%,transparent 51%),
    repeating-linear-gradient(0deg,#75d9e4 0 16px,#94e9e8 16px 18px,#62c9d7 18px 20px);
}
html[data-theme="lagoon"] .match-card.is-wood.is-wrong,
html[data-theme="evening"] .match-card.is-wood.is-wrong {
  border-color:#ff766c;
  background:repeating-linear-gradient(0deg,#ffaaa0 0 16px,#ffc0ad 16px 18px,#ff978e 18px 20px);
}

/* 将左侧信息栏融合进桥区顶部，把整行宽度留给单词棋盘。 */
.game-header,
.bridge-progress.is-dual .game-header {
  left:38px;
  right:38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(440px,600px);
  align-items:center;
  gap:16px;
}
.game-header h1,
.bridge-progress.is-dual .game-header h1 { max-width:none; }
.game-message {
  width:max-content;
  max-width:100%;
  margin-left:-10px;
  padding:5px 10px 7px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.68),rgba(255,255,255,.34) 72%,transparent);
}
.bridge-hud {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(170px,1.15fr) minmax(150px,.95fr) minmax(110px,.72fr);
  align-items:stretch;
  gap:7px;
}
.bridge-hud .mini-mascot {
  min-width:0;
  min-height:68px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:6px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:15px;
  background:rgba(255,255,255,.74);
  box-shadow:0 5px 13px rgba(23,50,77,.08);
}
.bridge-hud .mini-mascot img {
  width:58px;
  height:58px;
  display:block;
  border-radius:11px;
  object-fit:cover;
  object-position:center 32%;
}
.bridge-hud .mini-mascot p {
  min-width:0;
  margin:0;
  padding:0;
  background:transparent;
  font-size:10px;
  line-height:1.35;
}
.bridge-hud .bridge-summary {
  min-height:68px;
  justify-content:center;
  gap:5px;
  padding:6px;
  background:rgba(255,253,245,.8);
  box-shadow:0 5px 13px rgba(23,50,77,.08);
}
.bridge-hud .bridge-summary > strong {
  width:100%;
  padding:3px 6px;
  border-radius:8px;
  background:rgba(255,248,225,.9);
  text-align:center;
  font-size:11px;
}
.bridge-hud .round-progress.is-dual { gap:4px; }
.bridge-hud .dual-player-chip { padding:4px 3px; }
.bridge-hud .dual-player-chip b { font-size:9px; }
.bridge-hud .dual-player-chip em { font-size:12px; }
.bridge-hud .metric-grid { min-width:0; grid-template-columns:1fr; gap:0; }
.bridge-hud .metric-grid .detail-metric { display:none!important; }
.bridge-hud .metric-grid .time-metric {
  min-height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px;
  text-align:center;
  background:linear-gradient(145deg,rgba(230,251,246,.92),rgba(255,247,220,.92));
  box-shadow:0 5px 13px rgba(23,50,77,.08);
}
.bridge-hud .metric-grid .time-metric span { font-size:10px; }
.bridge-hud .metric-grid .time-metric strong { margin-top:2px; color:var(--teal-dark); font-size:23px; line-height:1; letter-spacing:.02em; }
.bridge-hud .metric-grid strong.is-dual-value { width:100%; gap:3px; }
.bridge-hud .metric-grid strong.turn-time .metric-player { padding:4px 1px; font-size:11px; }
.bridge-hud .metric-grid strong.turn-time .metric-player i { font-size:8px; }
.game-layout,
.bridge-progress.is-dual + .game-layout {
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
html[data-theme="lagoon"] .bridge-hud .metric-grid .time-metric { background:linear-gradient(145deg,#dcfaf5,#dff5ff); }
html[data-theme="evening"] .bridge-hud .metric-grid .time-metric { background:linear-gradient(145deg,#e7f8ff,#fff3c9 54%,#ffe7ed); }

@media (min-width:701px) and (max-width:1180px) {
  .game-header,
  .bridge-progress.is-dual .game-header {
    left:24px;
    right:24px;
    grid-template-columns:minmax(0,1fr) minmax(360px,42%);
    gap:10px;
  }
  .game-header h1,
  .bridge-progress.is-dual .game-header h1 { font-size:clamp(20px,2.5vw,26px); }
  .game-header p,
  .bridge-progress.is-dual .game-header p { gap:4px 9px; font-size:10px; }
  .bridge-hud { grid-template-columns:minmax(115px,1fr) minmax(130px,1fr) minmax(96px,.72fr); gap:5px; }
  .bridge-hud .mini-mascot { min-height:62px; grid-template-columns:40px minmax(0,1fr); gap:5px; padding:5px; }
  .bridge-hud .mini-mascot img { width:40px; height:50px; }
  .bridge-hud .mini-mascot p { font-size:9px; line-height:1.22; }
  .bridge-hud .bridge-summary,
  .bridge-hud .metric-grid .time-metric { min-height:62px; }
  .bridge-hud .metric-grid .time-metric strong { font-size:19px; }
  .board-wrap { padding:11px; }
  .dual-boards { gap:9px; }
  .player-grid .match-card { font-size:clamp(14px,1.8vmin,19px); }
  .player-grid .match-card.is-wood { font-size:clamp(14px,2vmin,21px); }
}
@media (max-width:900px) and (orientation:portrait) {
  .game-header,
  .bridge-progress.is-dual .game-header {
    left:20px;
    right:20px;
    top:9px;
    grid-template-columns:minmax(0,1fr);
    gap:5px;
  }
  .game-message { width:100%; margin-left:0; padding:4px 8px 5px; }
  .game-header h1,
  .bridge-progress.is-dual .game-header h1 { margin:3px 0 4px; }
  .bridge-hud { grid-template-columns:minmax(190px,1.4fr) minmax(145px,1fr) minmax(96px,.66fr); gap:6px; }
  .bridge-hud .mini-mascot { grid-template-columns:48px minmax(0,1fr); }
  .bridge-hud .mini-mascot img { width:48px; height:52px; }
  .bridge-hud .mini-mascot p { font-size:10px; line-height:1.28; }
  .bridge-scene { min-height:278px; }
}
@media (min-width:901px) {
  .bridge-progress:not(.is-dual) .bridge-runner {
    width:96px;
    height:104px;
    bottom:10px;
  }
  .bridge-progress.is-dual .bridge-runner { bottom:12px; }
}

@media (min-width:701px) and (max-width:900px) and (orientation:landscape) {
  .bridge-progress:not(.is-dual) .bridge-runner {
    width:88px;
    height:96px;
    bottom:10px;
  }
}

@media (min-width:901px) and (min-height:900px) {
  .bridge-progress.is-dual .bridge-lanes { padding-top:100px; }
}

@media (min-width:901px) and (max-height:899px) {
  .bridge-progress.is-dual .bridge-runner {
    width:64px;
    height:70px;
    bottom:10px;
  }
}

/*
 * 游戏桥区适配：旧的窄屏规则会把任务栏小鸟强制拉到 150px 高，
 * 从而撑高整组信息牌并盖住桥面。这里限定桥区 HUD 自己的尺寸，
 * 同时压缩双人卡片的辅助标签，保证矮屏也能完整显示文字。
 */
body.is-playing .bridge-hud .mini-mascot {
  min-height:68px;
  height:auto;
}
body.is-playing .bridge-hud .mini-mascot img {
  width:58px;
  height:58px;
}
.player-grid .match-card {
  line-height:1.06;
}
.player-grid .match-card small {
  margin-top:2px;
  padding:1px 5px;
  line-height:1;
}
.bridge-progress.is-simultaneous + .game-layout .match-card {
  touch-action:none;
}

@media (min-width:701px) and (max-width:1180px) {
  body.is-playing .bridge-hud .mini-mascot {
    min-height:62px;
    height:auto;
  }
  body.is-playing .bridge-hud .mini-mascot img {
    width:40px;
    height:50px;
  }
}

/* 高缩放电脑或横向平板：把空间优先让给双人卡片区。 */
@media (min-width:901px) and (max-height:760px) {
  .bridge-scene {
    height:clamp(196px,27dvh,210px);
  }
  .bridge-progress.is-dual .bridge-scene {
    height:clamp(232px,32dvh,250px);
  }
  .bridge-progress.is-dual .bridge-lanes {
    padding-top:72px;
    grid-template-rows:repeat(2,minmax(72px,1fr));
  }
  .bridge-progress.is-dual .bridge-lane {
    min-height:72px;
  }
  .player-board {
    gap:7px;
    padding:8px;
  }
  .player-head {
    min-height:30px;
    padding:5px 9px;
  }
  .player-grid {
    gap:5px;
  }
  .player-grid .match-card {
    padding:3px 5px;
  }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }