/* Graphite expedition UI. Fixed resource cells, compact progress, a broad mine. */
:root {
  --bg: #0c1821;
  --panel: #14242f;
  --panel2: #1b303d;
  --line: #314b5a;
  --text: #e6f0f5;
  --muted: #92aab8;
  --gold: #edc57b;
  --mint: #40d9db;
  --danger: #ff9d91;
  --surface: linear-gradient(145deg,#1b303e,#11222c);
  --nav-height: 78px;
  --header-height: 160px;
  font-family: "Dig Digits",Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
  background: #070f16;
}
body { background: #070f16; }
button { -webkit-user-select: none; user-select: none; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button:active:not(:disabled) { transform: translateY(1px); filter: brightness(1.14); }
.ui-art,.illustrated-icon { display: block; object-fit: contain; flex-shrink: 0; pointer-events: none; filter: drop-shadow(0 2px 2px #0005); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
#app { max-width:520px; min-height:100dvh; padding:env(safe-area-inset-top) 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); background:var(--bg); box-shadow:0 0 100px #0006; }
.game-header { display:block; position:relative; height:var(--header-height); padding:8px 9px 10px; background:linear-gradient(160deg,#13232e,#0b1821); border-bottom:1px solid #29414e; border-radius:0 0 14px 14px; z-index:2; }
.command-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.progress-panel { display:flex; align-items:center; gap:7px; min-width:0; flex:1; padding:3px; border:1px solid #2b4553; border-radius:12px; background:#0b1821; box-shadow:inset 0 1px #a3d5ea0c; }
.level-button { display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; min-height:56px; padding:0; border:1px solid #547986; border-radius:9px; background:linear-gradient(145deg,#294653,#142732); color:#f0fbff; box-shadow:inset 0 1px #ceeaf62b,0 2px 5px #0003; }
.level-button b { font-size:26px; letter-spacing:-.8px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; text-shadow:0 2px 5px #0004; }
.progress-meters { flex:1; min-width:0; display:flex; flex-direction:column; }
.status-meter,.progress-meters .energy { position:relative; display:flex; align-items:center; min-width:0; max-width:none; width:100%; height:28px; min-height:28px; flex:0 0 28px; margin:0; padding:0 7px; gap:0; border:0; background:transparent; border-radius:7px; text-align:right; overflow:hidden; }
.status-meter .bar,.energy .bar { position:absolute; inset:2px 0; margin:0; width:auto; height:auto; border-radius:6px; border:1px solid #304b59; background:#081722; box-shadow:inset 0 1px 2px #0004; }
.status-meter .bar i { width:0; height:100%; border-radius:4px; max-width:100%; background:linear-gradient(90deg,#078ba5,#24bdc9); box-shadow:inset 0 1px #a1f6ff24; }
.xp-meter .bar i { background:linear-gradient(90deg,#7451a8,#a27ace); }
.status-meter .meter-label,.energy>.meter-label { position:relative; z-index:1; display:grid; place-items:center; flex-shrink:0; width:20px; margin-right:4px; color:#ebd6ff; font-size:9px; font-weight:700; letter-spacing:.3px; }
.meter-label .ui-icon { width:16px; height:18px; }
.status-meter b,.energy b { position:relative; z-index:1; min-width:0; margin-left:auto; font-size:10px; line-height:1; font-weight:650; white-space:nowrap; color:#eaf6ff; text-shadow:0 1px 2px #0008; font-variant-numeric:tabular-nums; pointer-events:none; }
.status-meter:hover { filter:brightness(1.14); }
.header-actions { display:flex; gap:6px; flex-shrink:0; }
.header-icon-button { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #385463; border-radius:11px; background:var(--surface); color:#d7e7ed; box-shadow:inset 0 1px #d7eeff12,0 2px 4px #0003; }
.header-icon-button svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.wallet { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.wallet .resource-button { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; width:100%; min-height:68px; margin:0; padding:5px 2px; gap:3px; border:1px solid #324e5f; border-radius:11px; background:var(--surface); color:var(--text); box-shadow:inset 0 1px #bbd8ed0f,0 2px 3px #0003; text-align:center; }
.wallet .resource-button:hover { border-color:#56818e; background:linear-gradient(140deg,#234151,#172d39); }
.wallet .resource-button:active { background:#0c202b; box-shadow:inset 0 2px 5px #0006; }
.wallet .resource-button .ui-art { width:36px; height:34px; }
.wallet .resource-button b { display:block; max-width:100%; padding:0; font-family:inherit; font-size:clamp(12px,3.3vw,16px); font-weight:650; line-height:1.15; white-space:nowrap; overflow:visible; text-overflow:clip; letter-spacing:-.4px; font-variant-numeric:tabular-nums; color:var(--text); }
.wallet .home b { font-size:clamp(11px,3.4vw,16px); }
#mineView { position:relative; }
#gameArea { margin:-4px 0 0; height:calc(100dvh - var(--header-height) - var(--nav-height) + 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:220px; background-color:#102a38; }
#gameArea::before { display:none; }
.surfacebutton { top:13px; left:10px; min-height:44px; padding:4px 12px 4px 7px; gap:6px; border-radius:15px; border:1px solid #668594; background:#10232eef; box-shadow:inset 0 1px #fff1,0 3px 8px #0004; color:var(--text); font-weight:650; font-size:12px; backdrop-filter:blur(8px); }
.surfacebutton .ui-art { width:30px; height:30px; }
.depthpill { position:absolute; top:13px; right:10px; display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:4px; min-width:65px; min-height:44px; padding:11px; border:1px solid #668594; border-radius:16px; background:#10232eef; box-shadow:inset 0 1px #fff1,0 3px 8px #0004; color:var(--text); }
.depthpill b { font-weight:700; font-size:19px; line-height:1; }
.depthpill span { color:#afc4cf; font-size:10px; line-height:1; letter-spacing:0; margin:0; }
#adventurePanel { position:absolute; right:9px; bottom:39px; z-index:2; max-width:calc(100% - 18px); }
.adventure-entry.adventure-shortcut { display:flex; flex-direction:column; align-items:center; gap:2px; width:68px; min-height:75px; margin:0; padding:6px; border-radius:17px; border:1px solid #61828e; background:#10232eea; box-shadow:inset 0 1px #fff1,0 3px 8px #0004; text-align:center; color:var(--text); }
.adventure-shortcut .ui-art { width:43px; height:43px; }
.adventure-shortcut b { display:block; font-size:11px; color:var(--text); }
.adventure-entry.adventure-shortcut>span:first-child { display:block; font-size:initial; }
.adventure-entry.adventure-shortcut>span:first-child>.ui-icon { width:43px; height:43px; }
.adventure-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:310px; padding:5px; margin:0; border-radius:12px; background:#122632f2; border-color:var(--line); box-shadow:0 2px 8px #0005; }
.adventure-controls button { min-height:44px; padding:8px; }
.adventure-controls .adventure-status { display:flex; align-items:center; gap:5px; max-width:100%; text-align:left; border-radius:9px; border:1px solid #45606f; background:#1b3340; color:var(--text); font-size:11px; }
.adventure-controls .adventure-status .ui-art,.adventure-controls .adventure-status>.ui-icon { width:24px; height:24px; flex-shrink:0; }
.adventure-controls>small { align-self:center; padding:5px; font-size:10px; }
.adventure-controls.danger { border-color:#b0675e; color:var(--danger); }
#adventureCargo { position:absolute; top:66px; left:10px; width:max-content; max-width:calc(100% - 20px); padding:5px 8px; border:1px solid #b4975455; border-radius:8px; background:#10232eed; color:#edc982; font-size:11px; }
#hint,.adventure-world #hint { top:auto; bottom:10px; left:12px; right:12px; width:fit-content; max-width:calc(100% - 24px); margin:auto; padding:5px 9px; border:1px solid #ffffff14; border-radius:8px; background:#0c1e2ac4; color:#c5d9e4; font-size:10px; line-height:1.35; text-shadow:0 1px 3px #000; }
#findBanner { top:70px; left:18px; right:18px; z-index:3; background:#17313ef5; color:#edf7fa; border-color:#4a7481; box-shadow:0 3px 14px #0006; }
#findBanner.stars-reward,.stars-reward { background:linear-gradient(130deg,#3e3421,#142632); border-color:#ae8c46; color:#ffe2a1; }
#findBanner.level-up,.level-up { background:linear-gradient(130deg,#342747,#172b39); border-color:#9874c0; color:#e4ccff; }
#nav { position:fixed; left:0; right:0; bottom:0; transform:none; display:flex; width:100%; max-width:none; height:calc(var(--nav-height) + env(safe-area-inset-bottom)); margin:0; padding:0 0 env(safe-area-inset-bottom); border:0; border-top:1px solid #03080b; border-radius:0; background:linear-gradient(180deg,#0d1c23,#060e13); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 -4px 16px rgba(0,0,0,.6); overflow:hidden; gap:0; z-index:100; }
#nav button { position:relative; flex:1; width:auto; min-width:0; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 4px; gap:6px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#7f9098; font-weight:500; font-size:10px; transition:background .2s,color .2s; }
#nav button + button { border-left:1px solid rgba(0,0,0,.7); box-shadow:inset 1px 0 0 rgba(255,255,255,.035); }
#nav button>.ui-art { width:35px; height:35px; }
#nav button>.nav-label { height:auto; line-height:1.2; font-size:inherit; white-space:nowrap; }
/* Edge-to-edge flat navigation, with an inset dark active section. */
#nav button.active { color:#fff; background:rgba(0,0,0,.35); box-shadow:inset 0 2px 6px rgba(0,0,0,.6); }
#nav button.active::before { display:none; }
#nav button>.ui-art,#nav button>.nav-label { position:relative; z-index:1; }
#nav button.active>.ui-art { filter:none; }

#nav i { top:5px; right:17%; width:6px; height:6px; border:1px solid #132832; background:#ff6653; }
/* Sheets and secondary screens share the graphite material and clear typography. */
#pageView { padding:18px 14px 12px; min-height:65dvh; }
h1,h2,h3 { color:var(--text); font-family:inherit; }
h1,.pagehead h1,.sheethead h2 { font-family:inherit; }
.pagehead h1 { font-size:25px; font-weight:700; }
.hero { background:linear-gradient(135deg,#1b3643,#172630); border-color:#355562; box-shadow:inset 0 1px #fff1; }
.hero p,.hero small { color:#a9c0c9; }
.eyebrow,.zoneheading small { color:#74bfc8; }
.hero .bigicon { opacity:.14; }
.card,.row,.kit-option,.route-card { background:var(--panel); border-color:#2b4656; box-shadow:inset 0 1px #c8e6f508; }
.card .level { color:#e0bd7d; }
.row .score { color:var(--mint); }
.goldbutton { min-height:44px; background:linear-gradient(#31c5cd,#1aa2b1); border:1px solid #52d5db; color:#06222c; box-shadow:inset 0 1px #d3ffff33; }
.secondary { min-height:44px; background:#1c3543; color:#d1e3ec; border-color:#3e5d70; box-shadow:inset 0 1px #fff1; }
.linkbutton { min-height:44px; color:#71d8df; }
.badge { background:#16363d; color:#8fdfdc; border:1px solid #2e535b; }
.tabs { gap:7px; }
.tabs button { min-height:44px; border:1px solid #324e60; background:#152c39; color:#adc6d2; }
.tabs button.active { background:#174653; color:#d4fcff; border-color:#459aa8; }
.statgrid>div,.run-stats { background:#10232f; border-color:#2b4554; }
.statgrid b,.run-stats b { color:#dfc793; }
input,textarea,select { background:#0b1c27; border-color:#3d5a6a; color:var(--text); }
input:focus,textarea:focus,select:focus { outline:2px solid #36b5c6; outline-offset:1px; }
.bar { background:#213843; }
.bar i { background:linear-gradient(#35c9d1,#1596ad); }
.dialog-icon,.wallet-info-icon { width:54px; height:54px; margin:0 auto 10px; }
dialog { background:#11232e; border-color:#3b5666; box-shadow:0 -5px 40px #0008; padding-top:20px; }
dialog::backdrop { background:#030a10ba; backdrop-filter:blur(5px); }
.sheethead { background:#11232e; padding-bottom:9px; border-bottom:1px solid #294350; gap:12px; }
.sheethead h2 { line-height:1.25; }
.sheethead button { width:44px; height:44px; border:1px solid #375365; background:#1b3342; color:#bfd4df; box-shadow:inset 0 1px #fff1; }.kit-option.selected { background:#1a3643; border-color:#3d9aab; box-shadow:inset 3px 0 #3d9aab; }
.inventory-slot { background:radial-gradient(ellipse at 50% 30%,#29434f,#142834 85%); border-color:#3a5768; box-shadow:inset 0 1px #bfe6ff0a; }
.inventory-slot.empty-slot { opacity:1; background:#0c1d28; border-color:#2a4352; box-shadow:inset 0 2px 5px #0003; }
.inventory-item-name { color:#c6dce5; text-shadow:0 1px #07131b; }
.inventory-quantity { background:#091924; color:#e8cf93; border-color:#385565; }
.inventory-sale { background:#142b37; border-color:#345764; }
.inventory-run { background:linear-gradient(130deg,#29382f,#182d39); border-color:#52665a; }
.inventory-run p { color:#b7cbc6; }
.art-check { background:#173e34; border-color:#658d71; }
.result-illustration{ border-color:#486270; }
#toast { background:#1e3846; color:#e4f4f9; border:1px solid #567381; bottom:calc(92px + env(safe-area-inset-bottom)); }
#toast.error { background:#442c2c; color:#ffd0c7; border-color:#83534d; }
.welcome h1 { color:#edf7fb; text-shadow:0 3px 20px #0008; }
.welcome h1 em { color:#72e7e5; }
.welcome .eyebrow { color:#a0d9dd; }
.welcome button { background:#33bfca; color:#092b37; }
.balance-summary { display:flex; align-items:center; justify-content:center; gap:13px; padding:19px 12px; margin:8px 0 17px; border:1px solid #385767; border-radius:14px; background:var(--surface); box-shadow:inset 0 1px #ffffff0c; }
.balance-summary>.ui-icon { width:54px; height:54px; }
.balance-summary b { font-size:29px; font-variant-numeric:tabular-nums; }
#sheetBody>p { font-size:13px; line-height:1.65; }
#sheetBody>.full+.full { margin-top:10px; }
.character-preview { background:radial-gradient(ellipse,#36556377,transparent 72%); }
.skin-preview { background:radial-gradient(ellipse,#304f6880,transparent 72%); }
.route-card .eyebrow { color:#7cbac6; }
.route-art { background-color:#142b38; }
.settings-list { display:grid; gap:9px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.settings-row button { min-height:44px; }
@media(min-width:700px) {
  #app { margin:12px auto; min-height:calc(100dvh - 24px); border-radius:19px; border:1px solid #304a59; padding-top:0; }
  .game-header { border-radius:18px 18px 14px 14px; }
  #gameArea { height:calc(100dvh - var(--header-height) - var(--nav-height) - 22px); }
}
@media(max-width:350px) {
  .game-header { padding-left:6px; padding-right:6px; }
  .command-row { gap:5px; }
  .progress-panel { gap:5px; padding:3px; }
  .level-button b { font-size:26px; }
  .header-actions { gap:4px; }
  .header-icon-button { width:44px; padding:10px; }
  .status-meter,.progress-meters .energy { padding-left:2px; padding-right:4px; }
  .status-meter .meter-label,.energy>.meter-label { width:20px; margin-right:1px; font-size:9px; }
  .status-meter b,.energy b { font-size:10px; letter-spacing:-.25px; }
  .meter-label .ui-icon { width:15px; height:17px; }
  .wallet { gap:4px; }
  .wallet .resource-button { padding:5px 1px; border-radius:9px; }
  .wallet .resource-button b { font-size:11px; letter-spacing:-.35px; }
  .wallet .home b { font-size:11px; }
  #nav button { font-size:9px; }
  #nav button>.ui-art { width:33px; height:33px; }
  #pageView { padding-left:10px; padding-right:10px; }
  .adventure-controls { max-width:282px; }
  .sheethead h2 { font-size:20px; }
}
@media(max-height:620px) {
  :root { --nav-height:72px; }
  #nav button { min-height:54px; }
  #nav button>.ui-art { width:30px; height:30px; }
  .surfacebutton,.depthpill { top:10px; }
}

.air-balance { display:flex; align-items:center; gap:6px; min-height:44px; padding:6px 10px; border:1px solid #5a8493; border-radius:10px; background:#102d3bee; color:#c7edf3; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px #e2faff16; }
.air-balance .ui-icon { width:20px; height:20px; }
.air-balance.low-air { border-color:#cf7867; background:#3c2529ee; color:#ffb7a5; }
#adventureCargo:has(.air-balance) { padding:0; border:0; background:transparent; }
dialog[data-type="stars-found"] .balance-summary { border-color:#977d48; background:linear-gradient(135deg,#383322,#192c36); }
dialog[data-type="level"] .balance-summary { border-color:#76639e; background:linear-gradient(135deg,#312640,#192c36); }