:root {
  color-scheme: dark;
  --gold: #c7a66c;
  --cream: #f0e7d3;
  --panel: rgba(12, 20, 17, .82);
  --line: rgba(204, 176, 121, .32);
}
* { box-sizing: border-box; }
html, body, #game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #101914; }
body { color: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
#game-shell { position: relative; isolation: isolate; }
#renderCanvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(3, 8, 7, .34) 100%); z-index: 1; }
.screen { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 22px; background: linear-gradient(115deg, rgba(4, 11, 9, .58), rgba(5, 12, 11, .38)); backdrop-filter: blur(5px); }
.hidden { display: none !important; }
.title-card { width: min(590px, 95vw); padding: 34px 38px 28px; border: 1px solid rgba(204, 176, 121, .4); border-radius: 18px; background: linear-gradient(145deg, rgba(27, 42, 35, .96), rgba(9, 17, 15, .97)); box-shadow: 0 28px 90px rgba(0, 0, 0, .5), inset 0 1px rgba(255,255,255,.035); }
.compact-card { width: min(500px, 94vw); text-align: center; }
.eyebrow { color: #c9a66a; font-size: 10px; font-weight: 850; letter-spacing: .28em; }
.title-mark { margin: 12px 0 10px; color: #f3ead8; font: 700 clamp(40px, 8vw, 70px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: .035em; text-shadow: 0 3px 22px rgba(207, 163, 85, .16); }
.small-title { font-size: clamp(34px, 7vw, 54px); }
.intro { color: #c1cbbf; font-size: 14px; line-height: 1.72; max-width: 500px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; margin: 25px 0 28px; }
.control-grid div { display: flex; align-items: center; gap: 10px; color: #d8d9cc; font-size: 12px; }
kbd { display: inline-flex; min-width: 50px; justify-content: center; padding: 5px 8px; color: #e4cd9d; background: rgba(4, 10, 9, .7); border: 1px solid rgba(203, 177, 128, .32); border-radius: 6px; font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.gold-button { min-height: 46px; border: 0; border-radius: 8px; padding: 0 25px; color: #111a13; background: linear-gradient(135deg, #e4cc97, #ae8750); box-shadow: 0 8px 22px rgba(0,0,0,.24); font-size: 12px; font-weight: 900; letter-spacing: .13em; cursor: pointer; transition: filter .15s, transform .15s; }
.gold-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.fine-print { margin-top: 20px; color: #718475; font-size: 10px; letter-spacing: .045em; }
#hud { position: absolute; z-index: 5; inset: 16px 18px 0; pointer-events: none; }
.hud-panel { position: absolute; top: 0; width: min(290px, 36vw); padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); backdrop-filter: blur(7px); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.hero-panel { left: 0; }
.enemy-panel { right: 0; text-align: right; }
.hud-label { margin-bottom: 9px; color: #ddc28e; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hud-label span { color: #819487; font-weight: 700; letter-spacing: .08em; }
.bar-row { display: flex; justify-content: space-between; gap: 8px; color: #c4cdbf; font-size: 9px; letter-spacing: .1em; }
.bar-row b { color: #f0e5d0; font-size: 10px; letter-spacing: .03em; }
.meter { height: 7px; margin-top: 6px; overflow: hidden; border-radius: 20px; background: rgba(101, 126, 104, .25); }
.meter i { display: block; width: 100%; height: 100%; border-radius: inherit; transition: width .14s linear; }
.health-fill { background: linear-gradient(90deg, #4e9769, #a9c17e); }
.enemy-fill { background: linear-gradient(90deg, #914a38, #d69d5a); }
.solar-row { margin-top: 10px; }
.solar-meter { height: 4px; }
#solar-charge-bar { background: linear-gradient(90deg, #9d7945, #f0d18b); }
#objective-title { color: #efe6d4; font-size: 12px; font-weight: 850; letter-spacing: .045em; }
#objective-subtitle { margin-top: 4px; color: #9cac9c; font-size: 10px; line-height: 1.4; }
.enemy-meter { margin-top: 10px; }
.toast { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); padding: 9px 15px; color: #f1dfb4; border: 1px solid rgba(205, 174, 113, .3); border-radius: 40px; background: rgba(12, 21, 18, .82); font-size: 11px; letter-spacing: .04em; opacity: 0; transition: opacity .18s; white-space: nowrap; }
.toast.show { opacity: 1; }
.bottom-hints { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: #b6c1b5; font-size: 9px; letter-spacing: .09em; white-space: nowrap; }
.bottom-hints kbd { min-width: 0; margin-right: 4px; padding: 4px 6px; font-size: 9px; }
.sound-button { position: absolute; right: 0; bottom: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: #d2c4a4; background: rgba(8, 15, 13, .8); font-size: 9px; font-weight: 800; letter-spacing: .08em; pointer-events: auto; cursor: pointer; }
#loading-note { position: absolute; z-index: 20; left: 50%; bottom: 22px; transform: translateX(-50%); color: #a4b2a5; font-size: 11px; letter-spacing: .08em; pointer-events: none; }
#mobile-controls { position: absolute; z-index: 7; inset: auto 0 20px; display: none; justify-content: space-between; align-items: flex-end; padding: 0 18px; pointer-events: none; }
.mobile-stick { width: 116px; height: 116px; border: 1px solid rgba(215,197,154,.28); border-radius: 50%; background: rgba(8,15,13,.34); pointer-events: auto; touch-action: none; position: relative; }
.stick-knob { position: absolute; width: 48px; height: 48px; left: 33px; top: 33px; border: 1px solid rgba(229,208,157,.48); border-radius: 50%; background: rgba(194,157,98,.55); }
.mobile-actions { display: grid; grid-template-columns: repeat(3, 54px); gap: 8px; pointer-events: auto; }
.mobile-actions button { width: 54px; height: 48px; border: 1px solid rgba(219,196,144,.42); border-radius: 12px; color: #f1dfb4; background: rgba(12,22,18,.72); font-size: 11px; font-weight: 900; touch-action: none; }
.mobile-actions .solar-action { color: #182018; background: #d4b477; }
@media (pointer: coarse) { #mobile-controls:not(.hidden) { display: flex; } .bottom-hints { display: none; } .sound-button { bottom: 144px; } }
@media (max-width: 650px) {
  .title-card { padding: 26px 22px 23px; }
  .control-grid { gap: 8px 9px; }
  .control-grid div { font-size: 10px; }
  .control-grid kbd { min-width: 45px; font-size: 9px; }
  #hud { inset: 9px 8px 0; }
  .hud-panel { width: 46vw; padding: 9px; }
  .hud-label { font-size: 8px; letter-spacing: .1em; }
  #objective-title { font-size: 10px; }
  #objective-subtitle { font-size: 9px; }
}

/* Make the live combat HUD and short control strip readable over the 3D arena. */
.bottom-hints { max-width: calc(100vw - 150px); padding: 7px 11px; border: 1px solid rgba(204,176,121,.16); border-radius: 12px; background: rgba(8,15,13,.62); backdrop-filter: blur(6px); }
@media (max-width: 850px) { .bottom-hints { max-width: 90vw; bottom: 8px; gap: 5px; font-size: 8px; } }