:root {
  color-scheme: dark;
  --ink: #0b0c0f;
  --panel: #16171b;
  --panel-2: #202126;
  --line: rgba(245, 245, 239, .13);
  --text: #f4f4ef;
  --muted: #9a9ca3;
  --hot: #ff8c82;
  --gold: #f6cb62;
  --dawn: #b797ff;
  --cyan: #99f0df;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #090a0d; color: var(--text); }
body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 20%, rgba(115, 105, 150, .12), transparent 35%),
    linear-gradient(145deg, #121318 0%, #08090b 70%);
}
button { color: inherit; font: inherit; }

.game-shell {
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr) 28px;
  width: min(100vw, 1720px);
  height: 100vh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom));
}

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.resource-strip { display: flex; gap: 10px; }
.resource-pill {
  position: relative; display: grid; grid-template-columns: 56px minmax(46px, auto); grid-template-rows: 1fr 1fr;
  align-items: center; min-width: 168px; height: 58px; padding: 7px 18px 7px 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(45,46,52,.94), rgba(22,23,27,.98));
  box-shadow: 0 10px 35px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04);
}
.resource-value { align-self: end; font: 700 23px/1 ui-monospace, monospace; }
.resource-label { align-self: start; margin-top: 4px; color: var(--muted); font-size: 11px; letter-spacing: .18em; }
.coin-stack { position: relative; grid-row: 1 / 3; width: 38px; height: 36px; margin-left: 5px; }
.coin-stack i { position: absolute; left: 2px; width: 34px; height: 13px; border: 2px solid #f1f1ed; border-radius: 50%; background: #2d2f34; box-shadow: inset 0 -3px #0b0c0f; }
.coin-stack i:nth-child(1){ top:3px }.coin-stack i:nth-child(2){ top:11px }.coin-stack i:nth-child(3){ top:19px }
.core-mark { grid-row: 1 / 3; position: relative; width: 32px; height: 32px; margin-left: 8px; transform: rotate(30deg); border: 2px solid #f1f1ed; }
.core-mark::before,.core-mark::after{ content:""; position:absolute; inset:5px; border:1px solid #f1f1ed; }
.core-mark::after{ inset:11px; background:#f1f1ed; box-shadow:0 0 14px #f1f1ed; }

.time-controls { display: flex; gap: 8px; }
.icon-button,.speed-button {
  height: 52px; min-width: 54px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg,#2a2b31,#17181c); box-shadow: 0 8px 22px rgba(0,0,0,.25); cursor: pointer;
}
.icon-button:hover,.speed-button:hover,.speed-button.is-active { border-color: rgba(255,255,255,.42); background: linear-gradient(180deg,#3a3c42,#202126); }
.pause-button { display:flex; justify-content:center; align-items:center; gap:8px; }
.pause-button span { width:5px; height:25px; background:#f4f4ef; border-radius:1px; }
.pause-button.is-paused span:first-child { width:0; height:0; border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:18px solid #f4f4ef; background:none; }
.pause-button.is-paused span:last-child { display:none; }
.speed-button { color:#c7c8cd; font:800 16px/1 ui-monospace,monospace; }

.day-panel { justify-self: end; width: min(420px, 100%); padding: 10px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(19,20,24,.94); }
.day-heading,.day-times { display:flex; justify-content:space-between; align-items:center; }
.day-heading { margin-bottom:7px; font-weight:700; }.day-heading span:last-child { color:#babcc4; font-size:12px; letter-spacing:.15em; }
.day-track { position:relative; height:8px; overflow:visible; border-radius:8px; background:#35363d; }
.day-fill { width:0; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--gold),var(--hot) 48%,var(--dawn)); box-shadow:0 0 15px rgba(255,140,130,.25); }
.day-track i { position:absolute; top:11px; left:0; width:0; height:0; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #f4f4ef; }
.day-times { margin-top:7px; color:#73757d; font-size:10px; }

.play-layout { display:grid; grid-template-columns:112px minmax(0,1fr) 190px; gap:12px; min-height:0; }
.build-bar,.intel-panel { border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(30,31,36,.96),rgba(16,17,20,.98)); box-shadow:0 18px 45px rgba(0,0,0,.26); }
.build-bar { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:13px 10px; }
.eyebrow { margin:0; color:#7d7f87; text-transform:uppercase; letter-spacing:.22em; font-size:10px; font-weight:800; }
.build-card { position:relative; display:grid; grid-template-rows:58px auto auto; place-items:center; min-height:112px; padding:7px 6px 9px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#292a2f; cursor:pointer; transition:.16s ease; }
.build-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.35); }
.build-card.is-selected { border-color:#f3f3ef; box-shadow:0 0 0 2px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.35); background:#383a40; }
.build-card.is-disabled { opacity:.45; }
.keycap { position:absolute; top:5px; left:6px; color:#85878e; font:700 11px/1 ui-monospace,monospace; }
.sprite-card,.selection-icon { display:block; background-image:url("assets/flat-2d-sprites.png"); background-repeat:no-repeat; }
.sprite-card { width:62px; height:62px; filter:drop-shadow(0 5px 5px rgba(0,0,0,.45)); }
.sprite-card.sprite-arrow { background-size:266px 178px; background-position:-25px -23px; }
.sprite-card.sprite-mine { background-size:266px 178px; background-position:-102px -23px; }
.selection-icon.sprite-arrow { background-size:185px 124px; background-position:-16px -15px; }
.selection-icon.sprite-mine { background-size:185px 124px; background-position:-70px -15px; }
.build-name { font-weight:700; font-size:13px; }.build-cost { color:var(--text); font:700 12px/1 ui-monospace,monospace; }
.build-card.is-disabled .build-cost { color:var(--hot); }
.build-help { margin-top:auto; display:grid; gap:3px; color:#70727a; font-size:10px; }.build-help b{ color:#aaa; font-weight:600; }

.battlefield-wrap { position:relative; min-width:0; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:#26272b; box-shadow:0 22px 60px rgba(0,0,0,.35); }
#gameCanvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.map-title { position:absolute; top:14px; left:16px; display:flex; gap:8px; align-items:center; pointer-events:none; }
.map-title span,.map-title strong { padding:6px 9px; border:1px solid rgba(255,255,255,.13); border-radius:6px; background:rgba(13,14,17,.66); backdrop-filter:blur(7px); }
.map-title span { color:#8e9097; font:700 10px/1 ui-monospace,monospace; }.map-title strong { font-size:11px; letter-spacing:.12em; }
.message-toast { position:absolute; left:50%; bottom:23px; transform:translate(-50%,12px); padding:9px 13px; opacity:0; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:rgba(8,9,11,.84); color:#ecece8; font-size:12px; pointer-events:none; transition:.2s; }
.message-toast.is-visible { opacity:1; transform:translate(-50%,0); }.message-toast.is-error { color:#ffaaa3; border-color:rgba(255,140,130,.4); }

.tutorial-card { position:absolute; top:66px; left:16px; width:260px; padding:15px 16px 14px; border:1px solid rgba(255,255,255,.17); border-radius:10px; background:rgba(11,12,15,.86); box-shadow:0 16px 40px rgba(0,0,0,.32); backdrop-filter:blur(11px); transition:.2s; }
.tutorial-card.is-hidden { opacity:0; transform:translateX(-12px); pointer-events:none; }
.tutorial-card button { position:absolute; right:8px; top:5px; border:0; background:transparent; color:#74767d; font-size:22px; cursor:pointer; }
.tutorial-card h1 { margin:8px 0 12px; font-size:18px; }.tutorial-card ol{ list-style:none; padding:0; margin:0; display:grid; gap:8px; color:#c3c4c9; font-size:11px; }
.tutorial-card li { display:flex; align-items:center; gap:8px; }.tutorial-card li span{ color:#74767e; font:700 9px/1 ui-monospace,monospace; }

.intel-panel { padding:14px 13px; display:flex; flex-direction:column; gap:11px; }
.intel-block { padding:11px 10px; border-top:1px solid var(--line); background:rgba(255,255,255,.018); }
.intel-block span { display:block; margin-bottom:4px; color:#777982; font-size:10px; }.intel-block strong { font:700 17px/1.1 ui-monospace,monospace; }
.selection-info { display:flex; gap:9px; align-items:center; padding:10px 8px; margin-top:auto; border:1px solid var(--line); border-radius:9px; background:#232429; }
.selection-icon { flex:0 0 auto; width:45px; height:45px; }.selection-info small,.selection-info b{ display:block; }.selection-info small{ margin-bottom:5px; color:#eee; }.selection-info b{ color:#888a91; font-size:9px; line-height:1.35; }
.sound-toggle { display:flex; align-items:center; justify-content:center; gap:8px; height:36px; border:1px solid var(--line); border-radius:8px; background:#1c1d21; color:#999ba2; font-size:10px; cursor:pointer; }
.sound-bars { display:flex; align-items:end; gap:2px; height:14px; }.sound-bars i{ width:2px; background:#aaa; }.sound-bars i:nth-child(1){height:5px}.sound-bars i:nth-child(2){height:11px}.sound-bars i:nth-child(3){height:8px}

.result-overlay { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; background:rgba(8,9,12,.78); backdrop-filter:blur(8px); z-index:5; }
.result-overlay[hidden] { display:none; }.result-overlay h2{ margin:8px 0 4px; font-size:42px; }.result-overlay p:not(.eyebrow){ margin:4px 0 22px; color:#b8bac1; }
.result-overlay button { padding:11px 22px; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:#f1f1ec; color:#17181b; font-weight:800; cursor:pointer; }
.sun-burst { width:92px; height:92px; margin-bottom:18px; border-radius:50%; background:#f7f5e7; box-shadow:0 0 0 12px rgba(247,245,231,.10),0 0 60px 25px rgba(246,203,98,.35); }

.footer-hints { display:flex; justify-content:center; align-items:end; gap:24px; color:#5f6168; font-size:10px; letter-spacing:.05em; }
.shake { animation:shake .24s linear; } @keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

@media (max-width: 1060px) {
  .game-shell { grid-template-rows:68px minmax(0,1fr) 24px; padding-left:8px; padding-right:8px; }
  .play-layout { grid-template-columns:86px minmax(0,1fr); }.intel-panel{display:none}.resource-pill{min-width:130px;grid-template-columns:46px minmax(35px,auto)}.resource-label{display:none}.day-panel{width:280px}.build-card{min-height:96px}.sprite-card{width:50px;height:50px}.tutorial-card{width:230px}
}
@media (max-width: 720px) {
  body{overflow:auto}.game-shell{height:100svh;min-height:590px;grid-template-rows:98px minmax(0,1fr) 0;padding:4px}.topbar{grid-template-columns:1fr auto;gap:5px}.resource-strip{gap:4px}.resource-pill{min-width:0;width:93px;height:46px;padding:5px;grid-template-columns:38px 1fr}.resource-value{font-size:17px}.coin-stack{transform:scale(.75);transform-origin:left center}.core-mark{transform:scale(.72) rotate(30deg);transform-origin:left center}.time-controls{gap:3px}.icon-button,.speed-button{height:42px;min-width:38px}.day-panel{grid-column:1 / -1;width:100%;padding:6px 9px}.play-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 82px}.build-bar{grid-row:2;flex-direction:row;padding:7px;gap:7px}.build-bar>.eyebrow,.build-help{display:none}.build-card{grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;min-height:0;flex:1}.sprite-card{grid-row:1/3;width:49px;height:49px}.build-name,.build-cost{justify-self:start}.tutorial-card{top:50px;width:220px}.map-title{top:8px;left:9px}.footer-hints{display:none}
}