:root {
  --ink: #0b0e13;
  --ink-2: #131821;
  --ink-3: #1c2330;
  --bone: #ece4d6;
  --bone-dim: #b4ab9c;
  --amber: #f2a33a;
  --amber-deep: #c47a1e;
  --red: #e0533a;
  --green: #5dd38a;
  --line: rgba(236, 228, 214, 0.16);
  --display: 'Saira Stencil One', 'Barlow Condensed', sans-serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
::selection { background: var(--amber); color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
a { color: var(--amber); text-underline-offset: 3px; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; z-index: 20; display: flex; }
#loading { align-items: center; justify-content: center; background: var(--ink); }
.load-box { width: min(360px, 80vw); text-align: center; }
.load-box p { font-family: var(--ui); letter-spacing: .08em; color: var(--bone-dim); margin: 18px 0 10px; text-transform: uppercase; font-size: 14px; }
.bar { height: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--amber); }

/* logo */
.logo { font-family: var(--display); font-weight: 400; line-height: .82; display: flex; flex-direction: column; }
.logo span { font-size: clamp(64px, 10vw, 132px); color: var(--bone); letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.logo em { font-style: normal; font-family: var(--ui); font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .62em; color: var(--amber); margin-top: 10px; padding-left: .2em; }
.logo.small span { font-size: 64px; } .logo.small em { font-size: 18px; }

/* menu */
#menu, #pause { background: linear-gradient(90deg, rgba(8,10,14,.94) 0%, rgba(8,10,14,.78) 34%, rgba(8,10,14,.15) 70%, rgba(8,10,14,0) 100%); }
#pause { background: rgba(8,10,14,.72); backdrop-filter: blur(6px) saturate(.8); -webkit-backdrop-filter: blur(6px) saturate(.8); }
.menu-col { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 6vh clamp(20px, 6vw, 96px); width: min(560px, 100%); min-height: 100%; }
.tagline { font-family: var(--body); color: var(--bone-dim); font-size: 17px; max-width: 34ch; line-height: 1.5; }
.menu-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.menu-list button { font-family: var(--ui); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .02em; text-transform: uppercase; padding: 6px 0 6px 0; color: var(--bone-dim); position: relative; transition: color .2s var(--ease), transform .25s var(--ease); }
.menu-list button::before { content: ''; position: absolute; left: -22px; top: 50%; width: 10px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.menu-list button:hover, .menu-list button:focus-visible, .menu-list button.on { color: var(--bone); transform: translateX(6px); }
.menu-list button:hover::before, .menu-list button.on::before { transform: scaleX(1); }
.menu-list button.primary { color: var(--amber); font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; margin-bottom: 8px; }
.menu-list button.primary:hover { color: #ffbe5c; }
.menu-list.row { flex-direction: row; gap: 28px; align-items: baseline; }
.credit { font-family: var(--ui); font-size: 14px; letter-spacing: .06em; color: var(--bone-dim); }

.panel { margin: auto clamp(16px, 4vw, 64px) auto auto; width: min(520px, 92vw); max-height: 86vh; overflow: auto; background: rgba(13,17,24,.9); border: 1px solid var(--line); padding: 28px 30px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); animation: panel-in .35s var(--ease); scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
@keyframes panel-in { from { opacity: 0; transform: translateX(16px); } }
.panel h3 { font-family: var(--ui); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; }
.panel h4 { font-family: var(--ui); font-size: 18px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); margin: 22px 0 8px; }
.panel p, .panel li { font-size: 16px; line-height: 1.55; color: var(--bone-dim); }
.panel p + p { margin-top: 10px; }
.panel strong { color: var(--bone); font-weight: 500; }
.panel ul { list-style: none; display: grid; gap: 6px; }
.panel .go { margin-top: 24px; font-family: var(--ui); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--ink); background: var(--amber); padding: 12px 26px; transition: background .2s var(--ease), transform .2s var(--ease); }
.panel .go:hover { background: #ffbe5c; transform: translateY(-1px); }
.panel .close { float: right; font-family: var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-dim); font-size: 14px; padding: 6px 0 6px 12px; }
.panel .close:hover { color: var(--bone); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
.keys kbd { font-family: var(--ui); font-weight: 600; font-size: 15px; background: var(--ink-3); border: 1px solid var(--line); border-bottom-width: 3px; padding: 2px 8px; min-width: 32px; text-align: center; color: var(--bone); white-space: nowrap; }
.keys span { color: var(--bone-dim); font-size: 15px; }
.mission { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.mission:hover, .mission:focus-visible { background: rgba(236,228,214,.05); }
.mission.cur b { color: var(--amber, #f2a33a); }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mission b { font-family: var(--ui); font-size: 22px; font-weight: 600; text-transform: uppercase; }
.mission small { grid-column: 1; color: var(--bone-dim); font-size: 15px; }
.mission .tag { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--ui); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--bone-dim); }
.mission.open .tag { color: var(--green); }

/* form */
.field { display: grid; gap: 6px; margin-top: 14px; }
.field label { font-family: var(--ui); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--bone-dim); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line); padding: 10px 12px; caret-color: var(--amber); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); }
.field textarea { min-height: 110px; resize: vertical; }
.field input[type=range] { accent-color: var(--amber); padding: 0; border: 0; background: none; }
.field .val { font-family: var(--ui); color: var(--bone); font-variant-numeric: tabular-nums; }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { flex: 1; padding: 9px 6px; font-family: var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-dim); font-size: 15px; }
.seg button.on { background: var(--amber); color: var(--ink); font-weight: 700; }
.msg { margin-top: 12px; font-size: 15px; }
.msg.ok { color: var(--green); } .msg.err { color: var(--red); }
.alt { font-size: 14px; margin-top: 8px; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: var(--ui); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#obj { position: absolute; left: 24px; top: 20px; display: grid; gap: 4px; max-width: 340px; }
#obj .o { font-size: 18px; font-weight: 600; letter-spacing: .02em; display: flex; gap: 10px; align-items: baseline; color: var(--bone); }
#obj .o i { width: 10px; height: 10px; border: 2px solid var(--amber); display: inline-block; flex: none; transform: translateY(1px); }
#obj .o.done { color: var(--bone-dim); text-decoration: line-through; text-decoration-color: rgba(236,228,214,.4); }
#obj .o.done i { background: var(--green); border-color: var(--green); }
#obj .o b { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 700; }
#compass { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: min(420px, 50vw); height: 54px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
#compass-strip { position: absolute; top: 0; left: 0; height: 34px; white-space: nowrap; }
#compass-strip span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 15px; font-weight: 600; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
#compass-strip span.c { color: var(--bone); font-size: 18px; top: 2px; }
#compass-strip i { position: absolute; bottom: 0; width: 1px; height: 7px; background: rgba(236,228,214,.45); }
.compass-needle { position: absolute; left: 50%; top: 22px; width: 2px; height: 12px; background: var(--amber); transform: translateX(-50%); }
#compass-mark { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#compass-mark b { width: 10px; height: 10px; background: var(--amber); transform: rotate(45deg); margin-top: 22px; }
#compass-mark span { position: absolute; top: 36px; font-size: 13px; color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
#minimap { position: absolute; right: 20px; top: 18px; width: 150px; height: 126px; opacity: .92; border: 1px solid var(--line); background: rgba(8,10,14,.55); }
#vitals { position: absolute; left: 24px; bottom: 22px; display: flex; gap: 28px; align-items: flex-end; }
.vital { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.v-num { font-size: 52px; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.v-lbl { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--bone-dim); }
.v-bar { grid-column: 1 / span 2; height: 4px; background: rgba(236,228,214,.18); margin-top: 6px; width: 140px; }
.v-bar i { display: block; height: 100%; background: var(--bone); }
.vital.low .v-num { color: var(--red); } .vital.low .v-bar i { background: var(--red); }
.vital.armor .v-num { font-size: 34px; color: #9fc0e8; } .vital.armor .v-bar { width: 96px; } .vital.armor .v-bar i { background: #9fc0e8; }
#ammo { position: absolute; right: 24px; bottom: 22px; text-align: right; }
.a-num { font-size: 52px; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.a-num small { font-size: 26px; color: var(--bone-dim); font-weight: 600; margin-left: 4px; }
.a-num.low #mag { color: var(--red); }
.a-name { font-size: 18px; text-transform: uppercase; letter-spacing: .14em; color: var(--amber); margin-top: 4px; }
.a-slots { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.a-slots span { font-size: 13px; padding: 1px 7px; border: 1px solid var(--line); color: var(--bone-dim); }
.a-slots span.on { border-color: var(--amber); color: var(--amber); }
#cross { position: absolute; left: 50%; top: 50%; --g: 10px; transition: opacity .15s; }
#cross i { position: absolute; background: var(--bone); box-shadow: 0 0 2px rgba(0,0,0,.9); }
#cross i:nth-child(1), #cross i:nth-child(2) { width: 2px; height: 8px; left: -1px; }
#cross i:nth-child(1) { bottom: var(--g); } #cross i:nth-child(2) { top: var(--g); }
#cross i:nth-child(3), #cross i:nth-child(4) { height: 2px; width: 8px; top: -1px; }
#cross i:nth-child(3) { right: var(--g); } #cross i:nth-child(4) { left: var(--g); }
#hitmark { position: absolute; left: 50%; top: 50%; opacity: 0; }
#hitmark i { position: absolute; width: 2px; height: 9px; background: #fff; left: -1px; top: -4px; }
#hitmark i:nth-child(1) { transform: rotate(45deg) translateY(-10px); } #hitmark i:nth-child(2) { transform: rotate(135deg) translateY(-10px); }
#hitmark i:nth-child(3) { transform: rotate(225deg) translateY(-10px); } #hitmark i:nth-child(4) { transform: rotate(315deg) translateY(-10px); }
#hitmark.kill i { background: var(--red); height: 12px; }
#hitmark.show { animation: hm .3s var(--ease) forwards; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
#prompt { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); text-align: center; font-size: 20px; font-weight: 600; letter-spacing: .03em; }
#prompt kbd { font-family: var(--ui); border: 1px solid var(--bone); padding: 0 6px; margin: 0 2px; }
#prompt .bar { width: 220px; margin: 8px auto 0; }
#feed { position: absolute; right: 24px; top: 170px; display: grid; gap: 4px; justify-items: end; }
#feed div { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; animation: feed 2.6s var(--ease) forwards; }
#feed div.head { color: var(--amber); }
@keyframes feed { 0% { opacity: 0; transform: translateX(12px); } 10%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; font-size: clamp(22px, 3vw, 34px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: 0; }
#toast small { display: block; font-size: 16px; font-weight: 500; color: var(--bone-dim); letter-spacing: .04em; text-transform: none; font-family: var(--body); margin-top: 6px; }
#toast.show { animation: toast 3.6s var(--ease) forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); filter: blur(6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); filter: blur(0); } 100% { opacity: 0; } }
#dmg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(150,10,5,.55) 100%); opacity: 0; transition: opacity .1s; }
#dmgdir { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border-top: 6px solid rgba(224,60,40,.85); opacity: 0; filter: blur(1px); }
#pause-btn { position: absolute; right: 186px; top: 18px; width: 42px; height: 42px; pointer-events: auto; background: rgba(8,10,14,.5); border: 1px solid var(--line); }
#pause-btn svg { width: 22px; fill: var(--bone); }

/* touch */
.touch-only { display: none; }
body.touch .touch-only { display: block; }
#touch { position: fixed; inset: 0; z-index: 11; pointer-events: none; }
#stick { position: absolute; left: 4vw; bottom: 6vh; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(236,228,214,.25); background: rgba(8,10,14,.25); pointer-events: auto; touch-action: none; }
#stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; background: rgba(236,228,214,.28); border: 1px solid rgba(236,228,214,.5); }
#look { position: absolute; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; width: 62px; height: 62px; border-radius: 50%; background: rgba(8,10,14,.45); border: 1px solid rgba(236,228,214,.35); font-family: var(--ui); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--bone); z-index: 2; }
.tbtn.held { background: rgba(242,163,58,.4); border-color: var(--amber); }
#t-fire { right: 6vw; bottom: 16vh; width: 92px; height: 92px; border-color: rgba(242,163,58,.7); }
#t-fire svg { width: 40px; fill: var(--amber); color: var(--amber); }
#t-aim { right: calc(6vw + 104px); bottom: 20vh; }
#t-reload { right: calc(6vw + 18px); bottom: calc(16vh + 104px); }
#t-jump { right: 3vw; bottom: 3vh; width: 54px; height: 54px; }
#t-crouch { right: calc(3vw + 66px); bottom: 3vh; width: 54px; height: 54px; }
#t-swap { right: calc(6vw + 100px); bottom: calc(20vh + 74px); width: 54px; height: 54px; }
#t-use { left: 50%; bottom: 30vh; transform: translateX(-50%); width: 90px; height: 54px; border-radius: 28px; border-color: var(--amber); color: var(--amber); }

/* fine missione */
#end { align-items: center; justify-content: center; background: rgba(8,10,14,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.end-box { width: min(560px, 92vw); display: grid; gap: 22px; padding: 24px; }
.screen-title { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 84px); line-height: .9; }
#end.fail .screen-title { color: var(--red); }
#end-sub { color: var(--bone-dim); font-size: 17px; line-height: 1.5; }
#end-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#end-stats div { display: grid; gap: 2px; }
#end-stats dt { font-family: var(--ui); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--bone-dim); }
#end-stats dd { font-family: var(--ui); font-weight: 700; font-size: 34px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  #menu { background: linear-gradient(0deg, rgba(8,10,14,.96) 0%, rgba(8,10,14,.8) 55%, rgba(8,10,14,.35) 100%); }
  .menu-col { justify-content: flex-end; gap: 20px; padding: 24px 16px 28px; }
  .panel { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-height: 82vh; padding: 22px 16px; }
  #obj { left: 12px; top: 12px; max-width: 46vw; } #obj .o { font-size: 15px; }
  #compass { top: 64px; width: 60vw; }
  #minimap { right: 12px; top: 12px; width: 110px; height: 92px; }
  #pause-btn { right: 132px; top: 12px; }
  #vitals { left: 50%; transform: translateX(-50%); top: 12px; bottom: auto; display: none; }
  #ammo { right: 50%; transform: translateX(50%); bottom: auto; top: 108px; }
  .a-num { font-size: 32px; } .a-num small { font-size: 18px; } .a-name, .a-slots { display: none; }
  #feed { top: 130px; right: 12px; }
}
body.touch #vitals { display: flex; left: 12px; transform: none; top: auto; bottom: auto; top: calc(12px + 3 * 22px); gap: 14px; }
body.touch .v-num { font-size: 30px; } body.touch .vital.armor .v-num { font-size: 22px; } body.touch .v-bar { width: 80px; } body.touch .vital.armor .v-bar { width: 60px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* granate, visore notturno, cannocchiale */
.a-gren { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; font-family: var(--ui); font-weight: 700; font-size: 18px; color: var(--bone); }
.a-gren i { width: 12px; height: 15px; border-radius: 50% 50% 45% 45%; background: #6a7a50; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); position: relative; }
.a-gren i::before { content: ''; position: absolute; top: -4px; left: 4px; width: 5px; height: 4px; background: var(--amber); }
#nv-ind { position: absolute; top: 132px; left: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--ui); color: #7dff9a; letter-spacing: .1em; }
#nv-ind .bar { width: 80px; height: 4px; background: rgba(125,255,154,.2); }
#nv-ind .bar i { background: #7dff9a; height: 100%; display: block; }
#scope { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 min(36vw, 40vh), #000 calc(min(36vw, 40vh) + 2px)); }
#scope::before, #scope::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(0,0,0,.85); }
#scope::before { width: min(72vw, 80vh); height: 1.5px; transform: translate(-50%, -50%); }
#scope::after { height: min(72vw, 80vh); width: 1.5px; transform: translate(-50%, -50%); }
#scope i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #e0533a; transform: translate(-50%, -50%); }
#t-gren { right: calc(6vw + 100px); bottom: calc(20vh + 140px); width: 54px; height: 54px; }
#t-knife { right: calc(3vw + 132px); bottom: 3vh; width: 54px; height: 54px; }
#t-nv { left: calc(3vw + 160px); bottom: calc(3vh + 120px); width: 50px; height: 50px; font-size: 12px; }