html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #102b22; color: #f8f5df; font-family: "Microsoft YaHei", sans-serif; }
button { font: inherit; cursor: pointer; }
.game-shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 8px; background: radial-gradient(circle at 50% 0%, #326949, #102b22 70%); }
.game-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px; border: 1px solid #87a55f; border-radius: 12px; background: #1d3f2c; box-shadow: 0 3px 12px #071a13aa; }
.game-brand { font-size: clamp(14px, 1.3vw, 20px); font-weight: 800; white-space: nowrap; color: #f8e5a3; }
.game-status { color: #d1e9b8; font-size: 13px; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 5px; }
.tool-btn { min-width: 38px; height: 36px; padding: 0 9px; border: 1px solid #9eba73; border-radius: 8px; color: #f8f5df; background: #3d6845; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tool-btn:hover, .tool-btn:focus-visible { background: #578658; }
.tool-btn:active { transform: translateY(1px); background: #6a9c64; }
.tool-btn:disabled { opacity: .45; cursor: not-allowed; }
.play-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stage-wrap { width: 900px; height: 600px; flex: none; position: relative; }
.game-stage { width: 900px; height: 600px; position: relative; overflow: hidden; transform-origin: top left; background: #0c2419; box-shadow: 0 15px 40px #06170fcc; }
.content-box { display: block; width: 900px; height: 600px; margin: 0; overflow: hidden; position: absolute; inset: 0; }
#canvas { display: block; width: 1400px; height: 600px; margin-left: -120px; background: #000; touch-action: none; }
.intro-game { position: absolute; left: 460px; top: 12px; width: 410px; font-size: 18px; line-height: 1.45; color: #f5dd96; text-shadow: 0 2px 4px #000; }
.startGame-btn { position: absolute; left: 240px; top: 520px; width: 321px; height: 69px; line-height: 80px; text-align: center; font-size: 20px; font-weight: 800; color: #fff5ae; cursor: pointer; background: url(../images/LogoLine.png) no-repeat center/contain; z-index: 9; }
.cards-list { display: none; position: absolute; left: 0; top: 0; width: 100px; z-index: 9; }
.cards-list.show { display: block; }
.cards-list .cards-item { position: relative; width: 100%; height: 60px; cursor: pointer; }
.cards-list .cards-item .card-intro { display: none; position: absolute; left: 100px; top: 0; width: 175px; padding: 7px; border: 1px solid #3f6b3d; border-radius: 6px; background: #fff9dc; color: #192b1d; box-shadow: 0 4px 10px #0005; }
.cards-list .cards-item:hover .card-intro { display: block; }
.cards-list .cards-item .card-intro span { display: block; font-size: 12px; line-height: 1.35; margin: 3px 0; }
.menu-box { display: none !important; }
.sun-img { position: absolute; left: 300px; top: -100px; z-index: 12; cursor: pointer; }
.show { display: block; }
.none { display: none; }
.settings-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 18px; background: #06160fc9; }
.settings-backdrop.open { display: flex; }
.settings-panel { width: min(360px, 100%); padding: 20px; border: 2px solid #adcb80; border-radius: 16px; background: #23432f; color: #f8f5df; box-shadow: 0 16px 50px #0009; }
.settings-panel h2 { font-size: 22px; margin-bottom: 16px; color: #ffe5a0; }
.settings-panel p { font-size: 14px; line-height: 1.5; margin: 10px 0 20px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-actions .tool-btn { flex: 1 1 42%; }
body.night .game-shell { background: radial-gradient(circle at 50% 0%, #1e334a, #0a1728 70%); }
body.night .game-toolbar, body.night .settings-panel { background: #1d3045; border-color: #657fa2; }
body.night .tool-btn { background: #34506d; border-color: #8099bc; }
body.night .game-stage { filter: brightness(.78); }
@media (max-width: 1000px) { .game-status { display: none; } .game-toolbar { min-height: 42px; padding: 3px 5px; } .tool-btn { min-width: 34px; height: 32px; padding: 0 5px; } }
@media (max-width: 720px) { .game-brand { display: none; } .game-toolbar { justify-content: center; } .toolbar-actions { gap: 3px; } .tool-btn .label { display: none; } }


@media (max-height: 480px) { .game-brand, .tool-btn .label { display: none; } .game-toolbar { min-height: 38px; } }

@media (orientation: landscape) and (max-height: 480px) { .game-shell { flex-direction: row; } .play-area { order: 1; } .game-toolbar { order: 2; width: 126px; flex: none; flex-direction: column; justify-content: center; padding: 6px; } .toolbar-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .tool-btn { width: 34px; min-width: 0; height: 34px; padding: 0; } }

.sound-settings { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding: 12px; margin: 0 0 16px; border: 1px solid #829d72; border-radius: 10px; background: #ffffff12; }
.sound-settings .sound-toggle { grid-column: 1 / -1; width: 100%; }
.sound-settings label { font-size: 15px; font-weight: 700; }
.sound-settings output { display: inline-block; min-width: 40px; text-align: right; color: #ffe5a0; }
.sound-settings input[type="range"] { width: 100%; grid-column: 1 / -1; height: 28px; accent-color: #b5e279; cursor: pointer; }

/* Some in-app browsers never report landscape. Rotate the playable UI instead of blocking it. */
@media (orientation: portrait) and (max-width: 600px) {
  .game-shell, .settings-backdrop {
    position: fixed;
    left: 100vw;
    top: 0;
    width: 100dvh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: top left;
  }
  .game-shell { flex-direction: row; }
  .play-area { order: 1; }
  .game-toolbar { order: 2; width: 126px; flex: none; flex-direction: column; justify-content: center; padding: 6px; }
  .toolbar-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .game-brand, .game-status, .tool-btn .label { display: none; }
  .game-toolbar .tool-btn { width: 34px; min-width: 0; height: 34px; padding: 0; }
}

/* Six-level campaign UI */
.level-chip { border:1px solid #c5a65e; border-radius:8px; background:#694f2c; color:#fff0ba; padding:7px 10px; font-weight:800; white-space:nowrap; cursor:pointer; }
.level-banner { position:absolute; z-index:8; left:255px; top:4px; display:flex; flex-direction:column; gap:1px; max-width:600px; padding:4px 12px; border-radius:8px; background:#102c23bb; color:#fff7d1; text-shadow:0 1px 2px #000; pointer-events:none; }
.level-banner strong { font-size:16px; }.level-banner span { font-size:11px; }
.level-backdrop,.result-backdrop { display:none; position:fixed; inset:0; z-index:110; align-items:center; justify-content:center; padding:14px; background:#06160fe8; }
.level-backdrop.open,.result-backdrop.open { display:flex; }
.level-panel,.result-panel { width:min(680px,100%); max-height:95dvh; overflow:auto; padding:20px; border:2px solid #b7ca7a; border-radius:16px; background:#23432f; color:#fff6db; box-shadow:0 20px 60px #0009; }
.level-panel h2,.result-panel h2 { margin:0 0 8px; color:#ffe4a0; }.level-panel p,.result-panel p { margin:0 0 14px; font-size:14px; }
.level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 14px; }
.level-option { display:grid; gap:4px; min-height:80px; border:1px solid #9cb579; border-radius:10px; padding:8px; background:#355d40; color:#fff9dc; text-align:left; cursor:pointer; font:inherit; }
.level-option b { display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#d7a84d; color:#25321c; }.level-option span { font-weight:800; }.level-option small { font-size:11px; color:#d5e9c0; }
.level-option:disabled { opacity:.42; cursor:not-allowed; }.level-option:not(:disabled):hover { background:#537a51; }
.result-panel { width:min(400px,100%); text-align:center; }.result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }.result-actions [hidden] { display:none; }
body[data-venue="stars"] .game-shell { background:radial-gradient(circle at 50% 0%,#705778,#1c263d 72%); }
body[data-venue="leaves"] .game-shell { background:radial-gradient(circle at 50% 0%,#8b5730,#2a291f 72%); }
body[data-venue="moon"] .game-shell { background:radial-gradient(circle at 50% 0%,#46527a,#111e39 72%); }
body[data-venue="mist"] .game-shell { background:radial-gradient(circle at 50% 0%,#557670,#203b39 72%); }
body[data-venue="sparks"] .game-shell { background:radial-gradient(circle at 50% 0%,#864860,#291b32 72%); }
body.night[data-venue] .game-shell { background:radial-gradient(circle at 50% 0%,#1e334a,#0a1728 70%); }
@media (max-height:480px), (orientation:portrait) and (max-width:600px) { .level-chip { padding:5px 3px; font-size:11px; }.level-banner { top:2px; padding:2px 7px; }.level-banner strong { font-size:13px; }.level-banner span { font-size:10px; }.level-panel { padding:12px; }.level-grid { grid-template-columns:repeat(3,1fr); gap:5px; }.level-option { min-height:58px; padding:5px; font-size:12px; }.level-option small { font-size:9px; } }
@media (orientation:portrait) and (max-width:600px) { .level-backdrop,.result-backdrop { left:100vw; top:0; width:100dvh; height:100vw; transform:rotate(90deg); transform-origin:top left; }.game-toolbar .level-chip { width:100%; } }