:root {
  color-scheme: light;
  --ink: #18304b;
  --muted: #57708a;
  --sky: #69caff;
  --gold: #ffbf2f;
  --gold-dark: #d98800;
  --mint: #20c997;
  --danger: #ff5b64;
  --glass: rgba(255,255,255,.88);
  --border: rgba(255,255,255,.82);
  --shadow: 0 14px 40px rgba(25,72,106,.18);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif; color: var(--ink); background: #79d3ff; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 4px solid rgba(30,115,255,.35); outline-offset: 3px; }
[hidden], .screen[hidden], button[hidden], .toast[hidden] { display: none !important; }

#app, #game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#game-canvas { display: block; }
.screen { position: fixed; inset: 0; z-index: 5; pointer-events: none; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.screen button, .glass { pointer-events: auto; }
.glass { background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.home-screen { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(390px, 520px); grid-template-rows: auto 1fr auto; gap: 14px; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 22px; padding: 13px 18px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.eyebrow { color: #35749a; font-size: .68rem; font-weight: 900; letter-spacing: .16em; margin-bottom: 5px; }
.stats-row { display: flex; align-items: center; gap: 9px; }
.stat { min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 15px; background: #f5fbff; font-weight: 900; white-space: nowrap; }
.stat b { font-size: 1.2rem; }
.icon-btn { width: 46px; height: 46px; border: 0; border-radius: 15px; background: #edf8ff; cursor: pointer; font-size: 1.15rem; }

.home-actions { align-self: end; max-width: 520px; border-radius: 22px; padding: 18px; display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.home-actions p { color: var(--muted); margin-top: 4px; font-size: .88rem; }
.primary, .secondary { border: 0; min-height: 48px; border-radius: 15px; padding: 0 20px; font-weight: 900; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.primary { color: #493000; background: linear-gradient(180deg,#ffd86b,#ffad17); box-shadow: 0 7px 0 #d98700, 0 12px 20px rgba(217,135,0,.25); }
.secondary { color: var(--ink); background: #edf6fb; box-shadow: inset 0 0 0 2px #cfe3ee; }
.primary.big { min-width: 150px; font-size: 1.05rem; }
.primary:active, .secondary:active { transform: translateY(3px); }
.primary:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .48; box-shadow: none; }

.build-panel { grid-column: 2; grid-row: 2 / 4; align-self: end; border-radius: 22px; padding: 16px; max-height: calc(100vh - 118px); overflow: auto; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.text-btn { border: 0; background: transparent; color: #58718c; font-weight: 800; cursor: pointer; padding: 9px; }
.house-cards { display: grid; gap: 9px; }
.house-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 80px; border-radius: 17px; background: rgba(241,249,253,.94); padding: 10px; border: 2px solid transparent; }
.house-card.current { border-color: #ffbf2f; background: #fffaf0; }
.house-card.locked { opacity: .62; }
.house-badge { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#dff3ff,#fff); font-size: 1.65rem; }
.house-card h3 { margin: 0 0 2px; font-size: 1rem; }
.house-card p { color: var(--muted); font-size: .75rem; }
.stage-dots { display: flex; gap: 4px; margin-top: 6px; }
.stage-dots i { width: 24px; height: 6px; border-radius: 9px; background: #d7e6ed; }
.stage-dots i.done { background: linear-gradient(90deg,#ffb30f,#ffd45f); }
.build-btn { min-width: 90px; min-height: 44px; border: 0; border-radius: 13px; padding: 6px 10px; color: #473000; background: #ffd15b; font-weight: 900; cursor: pointer; }
.build-btn:disabled { background: #dde8ed; color: #8294a1; cursor: not-allowed; }

.run-screen { display: flex; flex-direction: column; align-items: center; }
.run-hud { display: flex; gap: 8px; border-radius: 18px; padding: 8px; }
.run-hud > span { min-width: 95px; text-align: center; padding: 4px 10px; border-right: 1px solid #dbe9ef; }
.run-hud > span:nth-child(3) { border-right: 0; }
.run-hud small { display: block; color: var(--muted); font-size: .66rem; }
.run-hud strong { display: block; font-size: 1.05rem; }
.shield-hud { margin-top: 9px; width: min(360px, 88vw); border-radius: 14px; padding: 9px 12px; }
.shield-label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 900; color: #885500; }
.meter, .build-progress { height: 9px; border-radius: 20px; background: rgba(145,105,0,.15); overflow: hidden; margin-top: 6px; }
.meter i, .build-progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff9d00,#fff27a); transform-origin: left; }
.controls-hint { margin-top: auto; color: white; background: rgba(10,35,55,.58); border-radius: 12px; padding: 7px 13px; font-size: .76rem; font-weight: 800; text-shadow: 0 1px 2px #000; }

.centered { display: grid; place-items: center; background: rgba(13,38,57,.36); }
.modal { width: min(520px, calc(100vw - 30px)); border-radius: 26px; padding: 24px; text-align: center; }
.death-icon, .trophy { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 18px 0 22px; }
.result-grid div { background: #f2f9fc; padding: 12px 8px; border-radius: 15px; }
.result-grid small { color: var(--muted); display: block; font-size: .7rem; }
.result-grid strong { font-size: 1.15rem; }
.button-row { display: flex; justify-content: center; gap: 10px; }

.build-modal { width: min(440px, calc(100vw - 30px)); }
.build-modal > p:not(.eyebrow) { color: var(--muted); margin-top: 5px; }
.build-progress { height: 14px; margin: 20px 0 6px; }
.build-progress i { width: 0; transition: width .08s linear; }
.build-timer { color: var(--muted); font-weight: 900; margin-bottom: 16px; }
.celebration { background: radial-gradient(circle at center,rgba(255,235,102,.3),rgba(13,38,57,.38)); }
.completion-card h2 { font-size: clamp(2rem,6vw,3.3rem); color: #9c6000; }
.completion-card p:not(.eyebrow) { margin: 8px 0 20px; color: var(--muted); }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 26px; transform: translateX(-50%); color: white; background: rgba(16,42,59,.9); border-radius: 13px; padding: 10px 16px; font-weight: 800; box-shadow: var(--shadow); }

@media (hover:hover) {
  .primary:hover, .secondary:hover, .build-btn:hover:not(:disabled), .icon-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
}

@media (max-width: 820px) {
  .home-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .build-panel { grid-column: 1; grid-row: 2; align-self: start; max-height: 48vh; }
  .home-actions { grid-row: 3; width: 100%; max-width: none; }

}

@media (max-width: 560px) {
  .screen { padding: 9px; }
  .topbar { padding: 10px 12px; border-radius: 17px; }
  .topbar .eyebrow { display: none; }
  h1 { font-size: 1.2rem; }
  .stat { min-height: 40px; padding: 0 8px; font-size: .8rem; }
  .stat:nth-child(2) { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .build-panel { border-radius: 17px; padding: 11px; max-height: 52vh; }
  .section-title { margin-bottom: 7px; }
  .house-card { grid-template-columns: 45px minmax(0,1fr) auto; min-height: 69px; padding: 7px; }
  .house-badge { width: 45px; height: 45px; font-size: 1.3rem; }
  .build-btn { min-width: 76px; font-size: .73rem; }
  .home-actions { padding: 12px; border-radius: 17px; }
  .home-actions p { display: none; }
  .home-actions h2 { font-size: 1rem; }
  .primary.big { min-width: 130px; }
  .run-hud > span { min-width: 75px; padding: 3px 5px; }
  .run-hud > span:nth-child(3) { display: none; }

  .result-grid { grid-template-columns: 1fr; }
  .result-grid div { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; }
  .button-row { flex-direction: column; }
}