* {box-sizing: border-box}
html,body {margin: 0}
html,body {width: 100%}
html,body {height: 100%}
html,body {overflow: hidden}
html,body {background: #111a1a}
html,body {color: #eee9d9}
html,body {font-family: Arial, Helvetica, sans-serif}
html,body {touch-action: none}
html,body {overscroll-behavior: none}
html,body {-webkit-user-select: none}
html,body {user-select: none}
button {font: inherit}
button {cursor: pointer}
button {touch-action: manipulation}
button {-webkit-tap-highlight-color: transparent}
button {color: inherit}
button:focus-visible {outline: 2px solid #eed49a}
button:focus-visible {outline-offset: 4px}
button:disabled {opacity: .45}
[hidden] {display: none !important}
#game {position: fixed}
#game {inset: 0}
#game {width: 100%}
#game {height: 100%}
#vignette {position: fixed}
#vignette {inset: 0}
#vignette {pointer-events: none}
#vignette {background: radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(12,20,20,.5) 100%)}
#hurt {position: fixed}
#hurt {inset: 0}
#hurt {pointer-events: none}
#hurt {box-shadow: inset 0 0 100px 25px #b34b38}
#hurt {opacity: 0}
#hud {position: fixed}
#hud {top: max(20px,env(safe-area-inset-top))}
#hud {left: 24px}
#hud {right: 24px}
#hud {display: flex}
#hud {justify-content: space-between}
#hud {align-items: center}
#hud {pointer-events: none}
.brand {display: grid}
.brand {gap: 5px}
.brand {text-shadow: 0 2px 9px #182322}
.eyebrow {font-size: 9px}
.eyebrow {letter-spacing: 3px}
.eyebrow {color: #c8c6b4}
.brand strong {font-size: 27px}
.brand strong {font-weight: 900}
.brand strong {letter-spacing: -1px}
.brand b {color: #d9b978}
.top-right {display: flex}
.top-right {align-items: center}
.top-right {gap: 16px}
.top-right {font-family: monospace}
#pause {width: 40px}
#pause {height: 40px}
#pause {border: 1px solid #ffffff40}
#pause {border-radius: 50%}
#pause {background: #1b2824aa}
#pause {pointer-events: auto}
#objective {position: fixed}
#objective {top: 100px}
#objective {left: 24px}
#objective {display: flex}
#objective {align-items: center}
#objective {gap: 12px}
#objective {background: #152422ce}
#objective {border: 1px solid #d8c68b25}
#objective {padding: 12px 15px}
#objective {border-radius: 4px}
#objective {box-shadow: 0 8px 24px #0002}
#objective {max-width: calc(100% - 48px)}
#objective i {width: 8px}
#objective i {height: 8px}
#objective i {background: #e4bf69}
#objective i {transform: rotate(45deg)}
#objective i {flex-shrink: 0}
#objective div {display: grid}
#objective div {gap: 5px}
#objective-label {font-size: 10px}
#objective-label {font-weight: bold}
#objective-label {letter-spacing: 1.2px}
#objective-detail {font-size: 11px}
#objective-detail {color: #b1bcb2}
#distance {font: 12px monospace}
#distance {color: #e4bf69}
#distance {margin-left: 12px}
#distance {white-space: nowrap}
#toast {position: fixed}
#toast {top: 174px}
#toast {left: 50%}
#toast {transform: translateX(-50%)}
#toast {max-width: 90%}
#toast {width: max-content}
#toast {font-size: 11px}
#toast {line-height: 1.5}
#toast {letter-spacing: .4px}
#toast {padding: 10px 16px}
#toast {background: #152422ed}
#toast {border-left: 2px solid #d9b978}
#toast {opacity: 0}
#toast {transition: opacity .2s}
#toast {pointer-events: none}
#toast.show {opacity: 1}
#minimap {position: fixed}
#minimap {right: 24px}
#minimap {top: 100px}
#minimap {width: 100px}
#minimap {height: 120px}
#minimap {border: 1px solid #c8d1b830}
#minimap {opacity: .88}
#health {position: fixed}
#health {left: 26px}
#health {bottom: calc(206px + env(safe-area-inset-bottom))}
#health {width: 145px}
#health {display: grid}
#health {grid-template-columns: 1fr auto}
#health {gap: 7px}
#health {text-shadow: 0 2px 8px #17201c}
#health>span {font-size: 9px}
#health>span {letter-spacing: 2px}
#health>span {grid-column: 1 / -1}
.hp-track {height: 6px}
.hp-track {background: #18231dc9}
.hp-track {border: 1px solid #ccd9c544}
.hp-track {align-self: center}
#hp-fill {display: block}
#hp-fill {height: 100%}
#hp-fill {width: 100%}
#hp-fill {background: #a9c6a2}
#hp-fill {transition: width .1s}
#hp-number {font: bold 13px monospace}
#weapon {position: fixed}
#weapon {right: 27px}
#weapon {bottom: calc(215px + env(safe-area-inset-bottom))}
#weapon {text-align: right}
#weapon {display: grid}
#weapon {gap: 3px}
#weapon {text-shadow: 0 2px 8px #17201c}
#weapon-name {font-size: 9px}
#weapon-name {letter-spacing: 2px}
#ammo {font: bold 30px monospace}
#ammo span {font-size: 13px}
#ammo span {font-weight: normal}
#ammo span {color: #c2c6b9}
#reload-label {font-size: 8px}
#reload-label {letter-spacing: 1.4px}
#reload-label {color: #d1c6a7}
#stick {position: fixed}
#stick {left: 28px}
#stick {bottom: calc(47px + env(safe-area-inset-bottom))}
#stick {width: 140px}
#stick {height: 140px}
#stick {border: 1px solid #f5ebc77a}
#stick {border-radius: 50%}
#stick {background: radial-gradient(circle,transparent 35%,#17241d30 36%,#17241d30 66%,#eee9c812 67%)}
#stick {display: grid}
#stick {place-items: center}
#stick-knob {width: 49px}
#stick-knob {height: 49px}
#stick-knob {border: 1px solid #e4d6aaa0}
#stick-knob {border-radius: 50%}
#stick-knob {background: #e1d3a62b}
#stick-knob {box-shadow: inset 0 0 18px #fff1}
#stick-knob {pointer-events: none}
#actions {position: fixed}
#actions {right: 24px}
#actions {bottom: calc(42px + env(safe-area-inset-bottom))}
#actions {width: 150px}
#actions {display: grid}
#actions {grid-template-columns: 1fr 1fr}
#actions {gap: 12px}
#actions button {height: 66px}
#actions button {width: 66px}
#actions button {border: 1px solid #ede7cd66}
#actions button {border-radius: 50%}
#actions button {background: #17231c65}
#actions button {display: flex}
#actions button {flex-direction: column}
#actions button {align-items: center}
#actions button {justify-content: center}
#actions button {gap: 1px}
#actions button {box-shadow: inset 0 0 20px #fff1}
#actions b {font-size: 28px}
#actions b {font-weight: normal}
#actions b {line-height: 1}
#actions small {font-size: 7px}
#actions small {letter-spacing: .5px}
#actions #grenade {border-color: #debc7f99}
#desktop-help {position: fixed}
#desktop-help {bottom: 16px}
#desktop-help {left: 50%}
#desktop-help {transform: translateX(-50%)}
#desktop-help {font: 10px monospace}
#desktop-help {color: #d3d6c5}
#desktop-help {white-space: nowrap}
#desktop-help {text-shadow: 0 2px 5px #000}
#overlay,#result {position: fixed}
#overlay,#result {inset: 0}
#overlay,#result {display: grid}
#overlay,#result {place-items: center}
#overlay,#result {background: linear-gradient(90deg,#0d1818f2,#14221be0 45%,#15231a90)}
#overlay,#result {padding: 26px}
#briefing,#result section {width: 100%}
#briefing,#result section {max-width: 460px}
.classification {font: 10px monospace}
.classification {letter-spacing: 3px}
.classification {color: #b2b9a3}
.classification {margin-bottom: 28px}
h1 {font-size: clamp(52px,10vw,90px)}
h1 {line-height: .9}
h1 {letter-spacing: -5px}
h1 {margin: 0}
h1 {font-weight: 900}
h1 em {font-style: normal}
h1 em {color: #ddba76}
.title-line {width: 42px}
.title-line {height: 3px}
.title-line {background: #ddba76}
.title-line {margin: 28px 0}
h2 {font-size: 22px}
h2 {font-weight: 500}
h2 {letter-spacing: -.4px}
h2 {margin: 0 0 14px}
#briefing p,#result p {font-size: 14px}
#briefing p,#result p {line-height: 1.8}
#briefing p,#result p {color: #bfc5b6}
.brief-details {display: flex}
.brief-details {gap: 35px}
.brief-details {border-top: 1px solid #bec4ad30}
.brief-details {border-bottom: 1px solid #bec4ad30}
.brief-details {padding: 20px 0}
.brief-details {margin: 27px 0}
.brief-details span {font: bold 24px monospace}
.brief-details small {display: block}
.brief-details small {font: 8px Arial}
.brief-details small {letter-spacing: 1.5px}
.brief-details small {margin-top: 7px}
.brief-details small {color: #a8b19f}
#briefing .instructions {font-size: 12px}
#briefing .instructions {max-width: 340px}
#briefing .instructions {margin-bottom: 25px}
#start,#retry {width: 100%}
#start,#retry {height: 54px}
#start,#retry {border: 0}
#start,#retry {background: #dabc7b}
#start,#retry {color: #19251e}
#start,#retry {font-size: 11px}
#start,#retry {font-weight: bold}
#start,#retry {letter-spacing: 2px}
.footnote {display: block}
.footnote {margin-top: 15px}
.footnote {text-align: center}
.footnote {font-size: 10px}
.footnote {color: #8a9786}
#result {z-index: 10}
body:not(.playing) #actions,body:not(.playing) #stick {pointer-events: none}
@media (pointer:coarse) {#desktop-help {display:none}}
@media (max-width:600px) {#minimap {top:170px} #minimap {right:18px} #minimap {width:65px} #minimap {height:78px} #hud {left:20px} #hud {right:20px} #objective {left:20px} #objective {top:94px} #toast {top:265px} #stick {left:20px} #stick {width:130px} #stick {height:130px} #actions {right:16px} #health {left:22px} .classification {margin-bottom:22px} .brief-details {margin:20px 0}}
@media (max-height:520px) {#briefing {max-width:640px} #briefing h1 {font-size:46px} .classification {margin-bottom:12px} .title-line {margin:12px 0} .brief-details {display:none} #briefing .instructions {margin:8px 0} #briefing p {margin:8px 0} #start {height:42px} #stick {bottom:18px} #stick {width:110px} #stick {height:110px} #actions {bottom:18px} #actions button {height:52px} #actions button {width:52px} #actions {width:118px} #health {bottom:140px} #weapon {bottom:145px} #minimap {width:65px} #minimap {height:78px} #objective {top:75px} #toast {top:140px} #desktop-help {display:none}}
#game, #stick, #play-area {touch-action: none}
#objective, #health, #weapon, #minimap, #desktop-help {pointer-events: none}
#actions {pointer-events: none}
#actions button {pointer-events: auto}
body {position: fixed}
body {inset: 0}
#play-area {position: fixed}
#play-area {top: 0}
#play-area {left: 0}
#play-area {width: 100%}
#play-area {height: 100dvh}
#play-area {overflow: hidden}
#play-area {transform: translate3d(0,0,0)}
#pov {position: fixed}
#pov {left: 28px}
#pov {bottom: calc(195px + env(safe-area-inset-bottom))}
#pov {width: 140px}
#pov {height: 44px}
#pov {background: #d7bf7d}
#pov {color: #15201c}
#pov {font-weight: bold}
#pov {border: 1px solid #fff6}
#pov {border-radius: 8px}
#pov {pointer-events: auto}
#pov {box-shadow: 0 2px 12px #0005}
#crosshair {display: none}
#crosshair {position: fixed}
#crosshair {left: 50%}
#crosshair {top: 50%}
#crosshair {transform: translate(-50%,-50%)}
#crosshair {color: #fff9df}
#crosshair {pointer-events: none}
#crosshair {z-index: 4}
#crosshair {font: 24px monospace}
body.pov #crosshair {display: block}
#health {bottom: calc(256px + env(safe-area-inset-bottom))}
#weapon {bottom: calc(260px + env(safe-area-inset-bottom))}
#fire {position: fixed}
#fire {right: 24px}
#fire {bottom: calc(195px + env(safe-area-inset-bottom))}
#fire {width: 150px}
#fire {height: 48px}
#fire {border: 1px solid #ffe0ad}
#fire {border-radius: 12px}
#fire {background: #ab572c}
#fire {font-weight: bold}
#fire {touch-action: none}
#fire:active {background: #e48c44}
body:not(.playing) #fire {pointer-events: none}
#aim-down-sights {display: none}
#aim-down-sights {position: fixed}
#aim-down-sights {right: 103px}
#aim-down-sights {bottom: calc(195px + env(safe-area-inset-bottom))}
#aim-down-sights {width: 71px}
#aim-down-sights {height: 48px}
#aim-down-sights {border: 1px solid #d7bf7d}
#aim-down-sights {border-radius: 10px}
#aim-down-sights {background: #24342eee}
#aim-down-sights {font-size: 11px}
body.pov #aim-down-sights {display: block}
#aim-down-sights[aria-pressed="true"] {background: #d7bf7d}
#aim-down-sights[aria-pressed="true"] {color: #15201c}
body.pov #fire {width: 72px}
body.pov #stick::after {content: "HOD + OKRET"}
body.pov #stick::after {position: absolute}
body.pov #stick::after {bottom: -18px}
body.pov #stick::after {font: 9px Arial}
body.pov #stick::after {letter-spacing: 1px}
body.pov #stick::after {pointer-events: none}
@media(max-width:600px) {#desktop-help {display:none} #pov {left:20px} #pov {width:130px} #fire {right:16px} #aim-down-sights {right:95px}}
@media(max-height:520px) {#pov {bottom:140px} #pov {height:40px} #pov {width:110px} #health {bottom:194px} #fire {bottom:140px} #fire {height:40px} #weapon {bottom:194px} #aim-down-sights {bottom:140px} #aim-down-sights {height:40px}}