/* An unobstructed first-person hunt. Data nodes stay mounted for the game loop. */
:root { --green: #91dda5; --gold: #ebefd9; --glass: #10261db3; --line: #e5efdb24; }
#vignette { background: radial-gradient(ellipse at center, transparent 65%, #11241b33 100%); }
#menu { padding: max(24px, env(safe-area-inset-top)) clamp(24px, 7vw, 100px); justify-content: flex-start; background: linear-gradient(90deg, #071b16c7 0%, #071b164d 48%, transparent 76%); overflow-y: auto; }
#menu .menu-col { width: min(330px, 100%); gap: 15px; }
#menu .logo { font-size: clamp(44px, 5.7vw, 74px); gap: 12px; text-shadow: 0 3px 14px #05170f80; }
#menu .logo .capsule.big { --w: 21px; margin: 0; animation: none; }
#menu .tagline { font-size: 13px; color: #e3efdfa6; }
#menu .eyebrow, #menu .menu-foot, #menu .menu-card, #menu .build, #menu .mbtn small, #ticker, #load-tip { display: none !important; }
#menu .menu-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
#menu .mbtn { height: 58px; min-width: 0; padding: 8px 4px; border-radius: 7px; flex-direction: column; justify-content: center; gap: 5px; font-size: 11px; animation: none; background: #102a2073; box-shadow: none; backdrop-filter: blur(4px); }
#menu .mbtn span { flex: none; }
#menu .mbtn i { width: auto; height: auto; font-size: 19px; border-radius: 0; background: none; color: #e6efdb; }
#menu .mbtn:hover, #menu .mbtn:focus-visible { transform: none; background: #2b503b; border-color: #a6dcbc; box-shadow: none; }
#menu .mbtn:focus-visible { outline: 2px solid #eef4db; outline-offset: 2px; }
#menu .mbtn.primary { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; height: 53px; padding: 0 17px; font-size: 20px; color: #14311e; background: #a8e4b1; }
#menu .mbtn.primary:hover, #menu .mbtn.primary:focus-visible { background: #c0efc6; box-shadow: none; }
#menu .mbtn.primary i { color: #14311e; background: none; }
#menu #character-host .character-trigger { padding: 7px 10px 7px 7px; margin: 0; border-radius: 7px; background: #102a2073; gap: 9px; }
#menu .character-trigger-portrait { flex-basis: 38px; height: 38px; border-radius: 4px; }
#menu .character-trigger-text small { display: none; }
#menu .character-trigger-text b { font-size: 14px; }
#menu .character-trigger-change { font-size: 0; }
#menu .character-trigger-change::after { content: '›'; font-size: 25px; color: #d4e9ce; }

/* Balance, a quiet progress line, reticle and one contextual action. */
#hud .hud-loc { top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); width: auto; min-width: 102px; max-width: 165px; padding: 0; gap: 10px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; animation: none; }
#hud .balance { gap: 8px; text-shadow: 0 1px 5px #143118; }
#hud .balance .coin { width: auto; height: auto; padding: 0; background: none; box-shadow: none; font: 600 11px var(--ui); color: #e2f0d7; }
#hud .balance .coin { display:inline-block; white-space:nowrap; }
#hud .balance .coin::after { display:none; }
#hud .balance b { font: 600 23px/1 var(--ui); color: #f5f8e8; text-shadow: 0 1px 5px #173218; }
#hud .loc-head, #hud .hud-stats, #hud #onboard, #hud #objective, #hud #news, #hud #rush, #hud #combo, #hud #banner, #hud .bl, #hud .farmer-top, #hud #gain-layer { display: none !important; }
#hud .pile { display: block; width: 88px; }
#hud .pile-top, #hud .pile-bot { display: none; }
#hud .pile .bar { height: 2px; background: #eaf1d73b; }
#hud .pile .bar > i { background: #e0edd0; }
#crosshair i { display: none; }
#crosshair::after { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px #193727; }
#crosshair.on::after { width: 5px; height: 5px; background: #c0f0c0; }
#target-label { top: calc(50% + 22px); padding: 5px 8px; border-radius: 4px; background: #0b24145c; font: 500 12px var(--ui); letter-spacing: 0; color: #f4f7e5; text-shadow: 0 1px 2px #113522; max-width: calc(100vw - 30px); text-align: center; white-space: normal; }
#hud .scanner { left: max(20px, env(safe-area-inset-left)); top: 84px; padding: 5px 7px; gap: 7px; border: 0; border-radius: 4px; background: #142d2140; box-shadow: none; animation: none; }
#hud .scanner .scan-arrow { width: 23px; height: 23px; background: none; color: #d5f7d7; font-size: 17px; box-shadow: none; }
#hud .scanner b { font-size: 13px; }
#hud .scanner small { display: none; }
#hud .scanner.hot { animation: none; box-shadow: none; }
#toast-layer .toast.hint { display: none !important; }
#toast-layer { bottom: 90px; max-width: 280px; }

/* Two joined rows of icon slots keep the centre of the screen clear. */
#hud .hintbar { left: calc(50% - 93px); bottom: max(18px, env(safe-area-inset-bottom)); width: 176px; height: 48px; padding: 3px; gap: 2px; border-radius: 7px 0 0 7px; background: #10241b85; box-shadow: none; border-right: 0; }
#hud .hk { position: relative; width: 40px; height: 40px; padding: 0; flex: 1; border-radius: 4px; justify-content: center; }
#hud .hk .tool-icon { font-size: 22px; color: #e5efdc; line-height: 1; }
#hud .hk kbd { position: absolute; bottom: 1px; right: 2px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 500 8px var(--mono); color: #d9e3ce88; }
#hud .hintbar .sep, #hud .hintbar .ctl { display: none; }
#hud .farmer { right: auto; left: calc(50% + 87px); top: auto; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 184px; height: 48px; padding: 3px; gap: 0; border-radius: 0 7px 7px 0; background: #10241b85; box-shadow: none; border-left: 0; animation: none; }
#hud .abilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
#hud .ability { height: 40px; border-radius: 4px; }
#hud .ability > b { display: none; }
#hud .ability kbd { top: auto; bottom: 1px; right: 2px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 500 8px var(--mono); color: #d9e3ce88; }
#hud .ring { width: 38px; height: 38px; background: none; border: 0; border-radius: 4px; box-shadow: none; }
#hud .ring .ico { font-size: 23px; color: #e3edda; }
#hud .ring .cd { font-size: 11px; }
#hud .ability.locked .ring::before { display: none; }
#hud .ability.locked { opacity: .28; }
#hud .ability.active .ring { box-shadow: none; animation: none; background: #a1dc9626; }
#hud .look-hint { bottom: 86px; background: #15312166; padding: 6px 10px; border-radius: 4px; font-size: 11px; }

/* Pointer-lock fallback stays available without changing the first-person view. */
body.playing .hs-access { bottom: 79px; padding: 4px 5px; border-radius: 6px; gap: 4px; width: auto; max-width: calc(100vw - 24px); box-shadow: none; background: #10241b85; }
body.playing .hs-access button { height: 29px; min-width: 27px; }
body.playing .hs-access .hs-access-view { display: none !important; }
body.playing .hs-access .hs-access-harvest { font-size: 0; padding: 0 8px; }
body.playing .hs-access .hs-access-harvest::after { content: '✋'; font-size: 17px; }
body.playing .hs-access .hs-access-harvest[aria-pressed=true]::after { content: '■'; }
body.playing .hsc { --hs-chat-bottom: 20px; --hs-chat-width: 310px; }
body.playing .hsc .hsc-badge, body.playing .hsc .hsc-bar kbd, body.playing .hsc .hsc-msg.sys { display: none !important; }
body.playing .hsc .hsc-btn { border-radius: 5px; height: 30px; }

@media (max-width: 900px) {
  #menu { padding: max(22px, env(safe-area-inset-top)) 24px; flex-direction: row; align-items: center; justify-content: flex-start; background: linear-gradient(90deg, #091f17cf, #091f175e); }
  #menu .menu-col { width: min(310px, 100%); gap: 11px; }
  #menu .logo { font-size: 58px; }
  #hud .hud-loc { left: max(14px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); }
  body.touch-ui #hud .farmer { display: none; }
  #hud .t-top { flex-direction: row; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); gap: 6px; }
  #hud .t-top button { width: 38px; height: 38px; padding: 0; border-radius: 5px; font-size: 19px; letter-spacing: 0; }
  #hud .joy { width: 104px; height: 104px; bottom: max(24px, env(safe-area-inset-bottom)); left: max(18px, env(safe-area-inset-left)); border-width: 1px; }
  #hud .joy i { width: 43px; height: 43px; }
  #hud .t-right { right: max(18px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); gap: 9px; }
  #hud .t-main { width: 79px; height: 79px; font-size: 29px; color: #133820; background: #b1e1adba; box-shadow: 0 2px 12px #162e1940; }
  #hud .t-main small { display: none; }
  #hud .t-row { gap: 6px; }
  #hud .t-row button { width: 39px; height: 39px; border-width: 1px; font-size: 21px; }
  body.playing .hs-access { bottom: 79px; width: auto; flex-wrap: nowrap; }
  body.playing .hsc.hsc-touch { --hs-chat-top-touch: 76px; --hs-chat-width: 210px; }
}
@media (max-width: 440px) { #menu .logo { font-size: 53px; } #menu .mbtn { font-size: 10px; } }
@media (max-height: 600px) { #menu { align-items: flex-start; } #menu .menu-col { gap: 8px; } #menu .logo { font-size: 47px; } #menu .mbtn { height: 43px; flex-direction: row; } #menu .mbtn.primary { height: 45px; } }

/* Only the discovered capsule, elapsed time and reward interrupt the view. */
.win-modal #win-grid, .win-modal #win-stars, .win-modal .win-total small { display:none; }
.win-modal { width:min(480px,calc(100vw - 28px)); }
.win-modal #win-title { font-size:clamp(29px,5vw,43px); }
#target-label:empty { display:none; }
