/* ─────────── DEEPCORE UI ─────────── */
:root{
  --amber:#ffb43c;
  --amber-dim:#c9822a;
  --ink:#0b0c0f;
  --panel:rgba(12,13,17,.72);
  --line:rgba(255,180,60,.28);
  --good:#7fd66a;
  --bad:#ff6b5e;
  --text:#e9e3d6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05060a;color:var(--text);
  font-family:"Segoe UI",Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
canvas#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}
b{color:var(--amber)}

/* ── HUD ── */
#hud{position:fixed;inset:0;pointer-events:none;user-select:none}
.panel{position:absolute;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 6px 22px rgba(0,0,0,.5)}
#wallet{top:16px;left:16px;min-width:216px}
.cash{font-size:30px;font-weight:800;color:var(--amber);letter-spacing:.5px;
  text-shadow:0 0 18px rgba(255,180,60,.35);line-height:1.1}
.row{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13px;opacity:.92}
.ico{width:16px;text-align:center;opacity:.8}
.bar{flex:1;height:7px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .18s}
.bar i.full{background:linear-gradient(90deg,#a33,#ff6b5e)}

#savedDot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--good);opacity:0;transition:opacity .5s}
#savedDot.on{opacity:.9;transition:opacity .12s}
#rebirthRow{color:#c9a8ff}
#rebirthRow .ico{opacity:1}
#depthPanel{top:16px;right:16px;width:150px;text-align:center}
.depth-num{font-size:28px;font-weight:800;line-height:1}
.depth-num small{font-size:13px;opacity:.6;margin-left:2px}
.depth-label{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;opacity:.65;margin-top:3px}
#depthTrack{position:relative;height:5px;margin-top:9px;border-radius:3px;
  background:linear-gradient(90deg,#4a7fb5,#6b5535,#3a3129,#20160f,#7a2a12)}
#depthTrack i{position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;background:#fff;
  box-shadow:0 0 7px #fff;transition:left .2s}
#coreMark{left:calc(100% - 3px);background:#ff5a2b !important;box-shadow:0 0 8px #ff5a2b !important}

#speed{left:50%;top:74px;transform:translateX(-50%);min-width:104px;text-align:center;
  padding:7px 14px}
#speed span{font-size:25px;font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums}
#speed small{font-size:11px;opacity:.6;margin-left:4px;letter-spacing:1px}
body.touch #speed{top:70px}

/* top-centre price button */
#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
#pricesBtn{pointer-events:auto;display:flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--text);
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:1.6px;padding:8px 13px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 6px 22px rgba(0,0,0,.45)}
#pricesBtn:hover{border-color:var(--amber);color:var(--amber)}
#pricesBtn .ico{font-size:14px;opacity:1}
#pricesBtn kbd{font:inherit;font-size:10px;letter-spacing:1px;opacity:.55;
  border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:1px 5px}
body.touch #pricesBtn kbd{display:none}
body.touch #topbar{transform:translateX(calc(-50% - 32px))}
body.touch #tPause{left:calc(50% + 40px)}

/* ── PRICE BOARD ── */
#prices{justify-content:flex-start;gap:0;padding:28px 20px;
  background:linear-gradient(180deg,#0e0d10 0%,#07070a 100%)}
#priceChips{width:min(900px,96vw);display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 11px}
#priceChips span{background:rgba(255,180,60,.12);border:1px solid var(--line);color:var(--amber);
  border-radius:20px;padding:5px 12px;font-size:12px;letter-spacing:.6px}
#priceChips .tot{background:rgba(127,214,106,.14);border-color:rgba(127,214,106,.4);color:var(--good);
  font-weight:700}
#pricesList{width:min(900px,96vw);flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  padding-right:6px;pointer-events:auto}
#pricesList::-webkit-scrollbar{width:7px}
#pricesList::-webkit-scrollbar-thumb{background:#2a2621;border-radius:4px}
.price{display:flex;align-items:center;gap:13px;padding:7px 13px;border-radius:9px;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.price.locked{opacity:.5}
.price.held{border-color:rgba(255,180,60,.35);background:rgba(255,180,60,.07)}
.price .sw{width:16px;height:16px;border-radius:4px;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4)}
.price .who{flex:1;min-width:0}
.price .nm{font-weight:700;font-size:14px}
.price .sub{font-size:11.5px;opacity:.55;margin-top:1px}
.price .base,.price .each{text-align:right;font-variant-numeric:tabular-nums}
.price .base{width:96px;font-size:13px;opacity:.6}
.price .each{width:120px;font-size:17px;font-weight:800;color:var(--amber)}
.price .base small,.price .each small{display:block;font-size:9.5px;letter-spacing:1.2px;
  opacity:.5;font-weight:400;color:var(--text);text-transform:uppercase}
.price .held{width:150px;text-align:right;font-size:12.5px;opacity:.85}
#priceTotal{width:min(900px,96vw);margin-top:11px;font-size:13px;opacity:.75;text-align:center}

@media (max-width: 620px){
  #prices{padding:16px 12px}
  #priceChips span{font-size:11px;padding:4px 9px}
  .price{gap:9px;padding:8px 10px}
  .price .nm{font-size:13px}
  .price .sub{font-size:10.5px}
  .price .base{display:none}
  .price .each{width:92px;font-size:15px}
  .price .held{width:86px;font-size:11px}
}

/* crosshair */
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;opacity:.8}
#crosshair span{position:absolute;background:#fff;box-shadow:0 0 4px #000}
#crosshair span:nth-child(1){left:50%;top:0;width:2px;height:22px;margin-left:-1px}
#crosshair span:nth-child(2){top:50%;left:0;height:2px;width:22px;margin-top:-1px}

/* target readout */
#target{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);width:230px;text-align:center}
.tname{font-size:14px;letter-spacing:1.6px;text-transform:uppercase;opacity:.9;
  text-shadow:0 2px 6px #000}
.tbar{height:6px;margin-top:6px;border-radius:4px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);overflow:hidden}
.tbar i{display:block;height:100%;width:0;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.thint{font-size:11px;margin-top:5px;color:var(--bad);letter-spacing:.6px;text-shadow:0 2px 6px #000}

#prompt{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 16px;
  font-size:14px;letter-spacing:.4px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);text-align:center}

#log{position:absolute;left:16px;bottom:58px;width:330px;display:flex;
  flex-direction:column-reverse;gap:4px}
#log div{background:rgba(10,11,15,.62);border-left:3px solid var(--amber);
  border-radius:0 6px 6px 0;padding:5px 10px;font-size:13px;animation:slide .25s ease-out;
  transition:opacity .5s}
#log div.out{opacity:0}
#log div.money{border-left-color:var(--good)}
#log div.warn{border-left-color:var(--bad)}
@keyframes slide{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}

#keys{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:11.5px;
  opacity:.42;letter-spacing:.3px}

/* damage/dust vignette */
#hud.deep::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 100%)}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;
  background:radial-gradient(ellipse at center,#161109 0%,#05060a 70%);
  background-blend-mode:screen}
.logo{font-size:clamp(44px,9vw,86px);font-weight:900;letter-spacing:9px;line-height:1;
  color:#f4ead9;text-shadow:0 0 34px rgba(255,140,40,.4)}
.logo span{color:var(--amber)}
.logo.win{color:#ffd9a0;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{text-shadow:0 0 30px rgba(255,90,40,.5)}50%{text-shadow:0 0 70px rgba(255,140,40,.95)}}
.logo.small{font-size:clamp(28px,6vw,46px);letter-spacing:5px}
.choices{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.big.danger{background:none;border:1px solid rgba(255,107,94,.6);color:var(--bad);
  box-shadow:none}
.big.danger:hover{background:rgba(255,107,94,.12);filter:none}
#wipeConfirm{background:radial-gradient(ellipse at center,#25100d 0%,#05060a 70%)}
#wipeText{max-width:520px;line-height:1.75;opacity:.85;font-size:14px}
#wipeText b{color:#fff}
.tag{letter-spacing:5px;text-transform:uppercase;font-size:12px;opacity:.55;margin-top:-4px}
.big{pointer-events:auto;margin-top:8px;padding:14px 34px;font-size:15px;font-weight:700;
  letter-spacing:2.4px;color:#1a1206;background:linear-gradient(180deg,#ffc95e,#e08a1e);
  border:0;border-radius:9px;cursor:pointer;box-shadow:0 8px 26px rgba(224,138,30,.35)}
.big:hover{filter:brightness(1.1)}
.tiny{pointer-events:auto;margin-top:6px;background:none;border:0;color:#7a736a;
  font-size:11px;letter-spacing:1.4px;cursor:pointer;text-decoration:underline}
.tiny:hover{color:var(--bad)}
.help{display:grid;grid-template-columns:auto auto;gap:5px 16px;font-size:13px;
  margin-top:10px;text-align:left;opacity:.85}
.help div{display:contents}
.help i{font-style:normal;opacity:.7}
.tip{max-width:520px;font-size:13px;line-height:1.65;opacity:.6;margin-top:6px}
p#winText{max-width:560px;line-height:1.7;opacity:.85}

.loadbar{width:min(420px,70vw);height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e08a1e,#ffd98a);transition:width .2s}
#loadText{font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.5}

/* ── SHOP ── */
#shop{justify-content:flex-start;gap:0;padding:28px 20px;
  background:linear-gradient(180deg,#0e0d10 0%,#07070a 100%)}
.shop-head{width:min(900px,96vw);display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.shop-head h2{font-size:19px;letter-spacing:4px;font-weight:800;color:#f1e6d4}
.shop-cash{font-size:25px;font-weight:800;color:var(--amber)}
#shopTabs{width:min(900px,96vw);display:flex;gap:8px;margin:14px 0}
#shopTabs button{pointer-events:auto;background:rgba(255,255,255,.05);color:#c8c0b3;border:1px solid transparent;
  padding:7px 15px;border-radius:7px;font-size:12px;letter-spacing:1.6px;cursor:pointer}
#shopTabs button.on{background:rgba(255,180,60,.14);border-color:var(--line);color:var(--amber)}
#shopList{width:min(900px,96vw);flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  padding-right:6px;pointer-events:auto;text-align:left}
#shopList::-webkit-scrollbar{width:7px}
#shopList::-webkit-scrollbar-thumb{background:#2a2621;border-radius:4px}
.item{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:13px 16px}
.item.owned{opacity:.5}
.item.locked{opacity:.62}
.item .emo{font-size:29px;width:42px;text-align:center;filter:drop-shadow(0 3px 5px #000)}
.item .txt{flex:1}
.item .nm{font-weight:700;font-size:15px;letter-spacing:.4px}
.item .ds{font-size:12.5px;opacity:.65;margin-top:3px;line-height:1.45}
.item .st{font-size:11.5px;color:var(--amber);margin-top:4px;letter-spacing:.6px}
.item button{pointer-events:auto;min-width:112px;padding:11px 8px;border:0;border-radius:8px;
  font-weight:800;font-size:13.5px;letter-spacing:.6px;cursor:pointer;
  background:linear-gradient(180deg,#ffc95e,#e08a1e);color:#1a1206}
.item button:disabled{background:#26241f;color:#6b6459;cursor:not-allowed;box-shadow:none}
.item button.done{background:#1f2a1c;color:var(--good)}

/* ─────────── TOUCH CONTROLS ─────────── */
body.touch { overscroll-behavior: none; -webkit-touch-callout: none; }
.touch-help { display: none }
body.touch .help:not(.touch-help) { display: none }
body.touch .touch-help { display: grid }
body.touch canvas#view { touch-action: none; cursor: default; }
body.touch #keys { display: none; }
body.touch #crosshair { width: 16px; height: 16px; opacity: .6 }
body.touch #crosshair span:nth-child(1) { height: 16px }
body.touch #crosshair span:nth-child(2) { width: 16px }
body.touch #target { bottom: auto; top: 58%; }
body.touch #prompt { bottom: auto; top: 48%; font-size: 12.5px; padding: 7px 12px }
body.touch #log { top: 118px; bottom: auto; width: min(56vw, 300px); flex-direction: column }

#touch {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#touch > #tBtns { pointer-events: none }

#stick {
  position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px;
  border-radius: 50%; border: 2px solid rgba(255, 180, 60, .3);
  background: rgba(10, 11, 15, .25); opacity: 0; transition: opacity .14s;
}
#stick.on { opacity: 1 }
#stick.sprint { border-color: rgba(255, 180, 60, .85); box-shadow: 0 0 20px rgba(255, 180, 60, .3) }
#stick i {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffd694, #c9822a);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55); transform: translate(-50%, -50%);
}

.tbtn {
  position: absolute; pointer-events: auto; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(8, 9, 12, .68); color: var(--amber); font-family: inherit;
  border-color: rgba(255, 180, 60, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  touch-action: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.tbtn.on { background: rgba(255, 180, 60, .3); color: #1a1206 }
.tbtn.small { font-size: 18px; font-weight: 800; letter-spacing: .5px }

#tBtns [data-a="mine"]   { right: 20px;  bottom: calc(24px + env(safe-area-inset-bottom)); width: 92px; height: 92px; font-size: 34px }
#tBtns [data-a="jump"]   { right: 126px; bottom: calc(28px + env(safe-area-inset-bottom)); width: 64px; height: 64px; font-size: 22px }
#tBtns [data-a="place"]  { right: 126px; bottom: calc(102px + env(safe-area-inset-bottom)); width: 64px; height: 64px; font-size: 24px }
#tBtns [data-a="scan"]   { right: 34px;  bottom: calc(130px + env(safe-area-inset-bottom)); width: 56px; height: 56px }
#tBtns [data-a="recall"] { right: 34px;  bottom: calc(194px + env(safe-area-inset-bottom)); width: 56px; height: 56px }
#tBtns [data-a="use"] {
  right: 20px; bottom: calc(258px + env(safe-area-inset-bottom));
  min-width: 106px; height: 52px; border-radius: 26px; border: 0; padding: 0 18px;
  font-size: 14px; font-weight: 800; letter-spacing: 1.6px;
  background: linear-gradient(180deg, #ffc95e, #e08a1e); color: #1a1206;
}
#tPause { left: 50%; top: 14px; transform: translateX(-50%); width: 44px; height: 44px; font-size: 13px }

/* landscape phones: everything tucks in */
@media (max-height: 520px) {
  #tBtns [data-a="mine"]   { width: 74px; height: 74px; font-size: 28px }
  #tBtns [data-a="jump"]   { right: 104px; width: 54px; height: 54px }
  #tBtns [data-a="place"]  { right: 104px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 54px; height: 54px }
  #tBtns [data-a="scan"]   { right: 28px; bottom: calc(106px + env(safe-area-inset-bottom)); width: 46px; height: 46px }
  #tBtns [data-a="recall"] { right: 28px; bottom: calc(158px + env(safe-area-inset-bottom)); width: 46px; height: 46px }
  #tBtns [data-a="use"]    { bottom: calc(212px + env(safe-area-inset-bottom)); height: 44px }
  #stick { width: 108px; height: 108px; margin: -54px 0 0 -54px }
  #stick i { width: 46px; height: 46px }
}

/* ─────────── SMALL SCREENS ─────────── */
@media (max-width: 620px) {
  /* The wallet is half the screen wide on a phone, so the top-centre row drops
     below it, the speed readout tucks under the depth gauge, and the message
     log starts below both. */
  #topbar { top: 128px }
  body.touch #topbar { transform: translateX(calc(-50% - 40px)) }
  body.touch #tPause { top: 128px; left: calc(50% + 46px) }
  #speed { left: auto; right: 12px; top: 86px; transform: none; min-width: 92px; padding: 6px 11px }
  #speed span { font-size: 21px }
  body.touch #speed { top: 86px }
  body.touch #log { top: 176px }

  #wallet { top: 12px; left: 12px; min-width: 148px; padding: 8px 11px }
  .cash { font-size: 23px }
  .row { font-size: 12px; margin-top: 5px }
  #depthPanel { top: 12px; right: 12px; width: 104px; padding: 8px 10px }
  .depth-num { font-size: 21px }
  .depth-label { font-size: 9.5px; letter-spacing: 1.6px }
  #log div { font-size: 12px; padding: 4px 8px }

  .screen { padding: 20px 14px; gap: 11px }
  .logo { letter-spacing: 6px }
  .help { grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12px }
  .tip { font-size: 12px; line-height: 1.55 }
  .big { padding: 13px 26px; font-size: 13.5px; letter-spacing: 1.8px }

  #shop { padding: 16px 12px }
  .shop-head h2 { font-size: 14px; letter-spacing: 2px }
  .shop-cash { font-size: 19px }
  #shopTabs { margin: 11px 0; gap: 6px }
  #shopTabs button { padding: 7px 11px; font-size: 11px; letter-spacing: 1px }
  #shopList { gap: 7px }
  .item { gap: 10px; padding: 10px 11px; border-radius: 9px }
  .item .emo { font-size: 22px; width: 28px }
  .item .nm { font-size: 13.5px }
  .item .ds { font-size: 11.5px; margin-top: 2px }
  .item .st { font-size: 10.5px }
  .item button { min-width: 86px; padding: 10px 5px; font-size: 12.5px }
}