* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120d0a; overflow: hidden; font-family: Georgia, 'Times New Roman', serif; color: #f4ead8; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(120,10,0,0) 45%, rgba(110,8,0,0.85) 100%); }

#compass { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9)); background: linear-gradient(90deg, rgba(20,12,6,0), rgba(20,12,6,0.72) 16%, rgba(20,12,6,0.72) 84%, rgba(20,12,6,0)); border-radius: 4px; }
#place-name { position: absolute; top: 70px; left: 0; right: 0; text-align: center; font-size: 26px; letter-spacing: 0.18em; opacity: 0; transition: opacity 0.7s; text-shadow: 0 2px 6px #000; font-variant: small-caps; }
#place-name.show { opacity: 1; }

#panel-objective { position: absolute; top: 16px; right: 20px; width: 300px; text-align: right; text-shadow: 0 1px 2px #000; padding: 8px 12px; background: linear-gradient(90deg, rgba(20,12,6,0), rgba(20,12,6,0.68) 30%); border-radius: 4px; }
#objective-title { font-weight: 600; font-size: 14px; letter-spacing: 0.14em; color: #e8c070; font-variant: small-caps; }
#objective { font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff8ea; margin-top: 3px; }

#panel-left { position: absolute; left: 18px; bottom: 16px; width: 184px; }
#minimap { display: block; margin: 0 0 8px 8px; width: 164px; height: 164px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7)); }
.bar-row { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.bar-row label { font-size: 11px; width: 54px; text-align: right; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; font-variant: small-caps; color: #e9dcc4; }
#tithe-label { color: #a08a70; }
#tithe-label.ready { color: #ff9a5a; }
.bar { flex: 1; height: 9px; background: rgba(15,9,5,0.72); border: 1px solid rgba(220,190,140,0.32); border-radius: 1px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.bar i { display: block; height: 100%; width: 100%; transition: width 0.12s linear; }
.bar.hp i { background: linear-gradient(#c23f2a, #7e1d12); }
.bar.hp.low { animation: pulse 0.7s infinite alternate; }
.bar.st i { background: linear-gradient(#d9c07a, #94793a); }
.bar.ti i { background: linear-gradient(#ff7a2a, #9c1d08); box-shadow: 0 0 6px #ff5a10; }
.bar.ho i { background: linear-gradient(#b08a5a, #6e5230); }
@keyframes pulse { to { box-shadow: 0 0 10px #ff2a10; } }

#panel-weapon { position: absolute; right: 22px; bottom: 18px; width: 240px; text-align: right; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.6); }
#weapon-name { font-size: 17px; font-variant: small-caps; letter-spacing: 0.05em; }
#weapon-row { margin-top: 1px; display: flex; flex-direction: row-reverse; gap: 10px; align-items: baseline; justify-content: flex-start; }
#weapon-ammo { font-size: 26px; font-weight: bold; }
#weapon-icons { font-size: 12px; color: #d9c07a; font-style: italic; }
.empty #weapon-ammo { color: #ff6a4a; }
#rep { margin-top: 8px; }
#honour-label { font-size: 11px; color: #e8c070; letter-spacing: 0.08em; font-variant: small-caps; }
#honour-bar { position: relative; height: 5px; margin: 3px 0 3px auto; background: rgba(15,9,5,0.7); width: 150px; border: 1px solid rgba(220,190,140,0.28); }
#honour-fill { position: absolute; top: 0; bottom: 0; }
#honour-bar b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #f4ead8; }
#rep-row { display: flex; justify-content: flex-end; gap: 10px; font-size: 12px; }
#bounty { color: #ff6a4a; font-weight: bold; }

#prompt { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 6px 14px; background: rgba(20,12,6,0.65); border: 1px solid rgba(232,192,112,0.4); font-size: 15px; opacity: 0; transition: opacity 0.12s; white-space: nowrap; }
#subtitle { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); max-width: 720px; width: 80%; text-align: center; font-size: 18px; line-height: 1.32; text-shadow: 0 1px 3px #000, 0 0 10px #000; opacity: 0; transition: opacity 0.25s; }
#subtitle b { color: #e8c070; font-weight: normal; font-variant: small-caps; margin-right: 6px; }
#notices { position: absolute; left: 50%; top: 106px; transform: translateX(-50%); text-align: center; }
.notice { font-size: 15px; margin-bottom: 4px; text-shadow: 0 1px 3px #000, 0 0 8px #000; animation: fadein 0.2s; }
.notice.good { color: #cfe39a; }
.notice.bad { color: #ff8a6a; }
@keyframes fadein { from { opacity: 0; transform: translateY(5px); } }
#kill-text { position: absolute; left: 50%; top: 58%; transform: translateX(-50%) scale(0.86); font-size: 21px; letter-spacing: 0.32em; font-variant: small-caps; color: #ff5a3a; text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity 0.24s, transform 0.24s; }
#kill-text.show { opacity: 1; transform: translateX(-50%) scale(1); transition: opacity 0.05s, transform 0.08s; }
#kill-text.head { color: #ffcf55; font-size: 25px; }

.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(14,8,4,0.28), rgba(10,5,2,0.8)); overflow-y: auto; padding: 20px; z-index: 5; }
.screen.on { display: flex; }
.card { width: min(660px, 94vw); max-height: 94vh; overflow-y: auto; background: rgba(24,16,10,0.93); border: 1px solid rgba(232,192,112,0.34); padding: 22px 28px; box-shadow: 0 10px 50px rgba(0,0,0,0.75); }
#screen-title { background: linear-gradient(rgba(10,5,2,0.06) 55%, rgba(10,5,2,0.42)); }
#screen-title details { background: rgba(20,12,6,0.62); }
.title-card { background: transparent; border: none; box-shadow: none; text-align: center; max-height: none; }
.title-card h1 { font-size: 76px; letter-spacing: 0.17em; margin: 0; font-weight: normal; color: #f6e2bb; text-shadow: 0 3px 22px rgba(0,0,0,0.85), 0 0 60px rgba(255,120,40,0.35); }
.tag { font-style: italic; margin: 6px 0 22px; color: #eadbc0; text-shadow: 0 1px 4px #000; }
.card h2 { margin: 0 0 8px; font-weight: normal; letter-spacing: 0.1em; color: #f6e2bb; }
.card h3 { margin: 18px 0 8px; font-weight: normal; color: #e8c070; font-size: 15px; letter-spacing: 0.1em; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.title-card .buttons { flex-direction: column; align-items: center; }
.title-card .buttons button { width: 220px; }
button { font: inherit; color: #f4ead8; background: rgba(90,50,24,0.75); border: 1px solid rgba(232,192,112,0.55); padding: 8px 18px; cursor: pointer; transition: background 0.12s; }
button:hover:not(:disabled) { background: rgba(160,90,40,0.85); }
button:disabled { opacity: 0.45; cursor: default; }
details { margin-top: 16px; text-align: left; background: rgba(20,12,6,0.78); padding: 8px 12px; }
summary { cursor: pointer; color: #e8c070; }
.ctl-grid { display: grid; grid-template-columns: 1fr; gap: 3px 16px; font-size: 13px; margin-top: 6px; }
.ctl { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px dotted rgba(232,192,112,0.18); padding: 2px 0; }
kbd { font: inherit; color: #ffd98a; text-align: right; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 14px; font-size: 13px; }
.options label { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.options input[type=range] { flex: 1; min-width: 80px; }
.options label:has(input[type=checkbox]) { justify-content: flex-start; flex-direction: row-reverse; }
.options small { grid-column: 1 / -1; color: #e8c070; min-height: 14px; }
select { font: inherit; background: #2a1a0e; color: #f4ead8; border: 1px solid rgba(232,192,112,0.4); }
#pause-info { font-size: 14px; line-height: 1.4; }
#save-note { min-height: 16px; font-size: 13px; color: #cfe39a; text-align: center; margin: 6px 0 0; }
.shop .item { display: flex; justify-content: space-between; width: 100%; text-align: left; margin-bottom: 6px; gap: 14px; }
.item em { color: #ffd98a; font-style: normal; white-space: nowrap; }
#shop-coins { color: #ffd98a; }
#shop-blurb { font-style: italic; }
.map-card { width: auto; text-align: center; }
#world-map { width: min(620px, 70vh); height: min(620px, 70vh); border: 1px solid rgba(232,192,112,0.4); }
#loading { position: fixed; inset: 0; background: #120b07; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9; transition: opacity 0.4s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading-title { font-size: 46px; letter-spacing: 0.22em; color: #f6e2bb; }
#loading-bar { width: 320px; height: 4px; margin: 18px 0 10px; background: #2c1d12; }
#loading-fill { display: block; height: 100%; width: 0; background: #d98a3a; transition: width 0.1s; }
#loading-text { font-style: italic; color: #bba88a; font-size: 14px; }

#frame-hint { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); display: none; z-index: 4; max-width: 92vw; padding: 7px 10px 7px 14px; font-size: 13px; line-height: 1.35; background: rgba(24,16,10,0.9); border: 1px solid rgba(232,192,112,0.5); text-align: center; }
#frame-hint.on { display: block; }
#frame-hint a { color: #ffd98a; margin-left: 6px; }
#frame-hint button { padding: 0 7px; margin-left: 8px; background: transparent; border: none; font-size: 16px; }

body.soundtest { overflow: auto; height: auto; user-select: text; touch-action: pan-y; }
body.soundtest #game, body.soundtest #hud, body.soundtest .screen, body.soundtest #frame-hint { display: none !important; }
#soundtest { max-width: 720px; margin: 0 auto; padding: 16px 18px 60px; font-size: 15px; }
#soundtest h1 { font-weight: normal; letter-spacing: 0.08em; color: #f6e2bb; margin: 6px 0; }
#soundtest h2 { font-size: 15px; font-weight: normal; color: #e8c070; margin: 18px 0 6px; letter-spacing: 0.1em; }
#soundtest a { color: #ffd98a; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px dotted rgba(232,192,112,0.2); }
.st-row button { padding: 7px 16px; }
.st-name { flex: 1; }
.st-level { color: #d9c9a8; font-size: 13px; white-space: nowrap; }

/* ---- no page gestures anywhere ---- */
html, body { overscroll-behavior: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; position: fixed; width: 100%; }
body.soundtest { position: static; }
.screen, .card { touch-action: pan-y; }
body.touch .screen, body.touch .card, body.touch .card * { touch-action: none; }
.touch-only { display: none !important; }
body.touch .touch-only { display: flex !important; }
#touch, #touch-help, #rotate { display: none; }

/* ---- touch controls ---- */
body.touch #touch { display: block; position: fixed; inset: 0; z-index: 3; touch-action: none; }
#t-stick { display: none; position: absolute; left: 0; top: 0; width: calc(var(--ts, 1) * 108px); height: calc(var(--ts, 1) * 108px); border-radius: 50%; border: 2px solid rgba(255,240,210,0.35); background: rgba(20,12,6,0.18); pointer-events: none; }
#t-stick.sprint { border-color: rgba(255,200,110,0.85); }
#t-knob { position: absolute; left: calc(var(--ts, 1) * 30px); top: calc(var(--ts, 1) * 30px); width: calc(var(--ts, 1) * 48px); height: calc(var(--ts, 1) * 48px); border-radius: 50%; background: rgba(255,240,210,0.42); }
.tb { position: absolute; display: flex; align-items: center; justify-content: center; width: calc(var(--ts, 1) * 58px); height: calc(var(--ts, 1) * 58px); padding: 0; border-radius: 50%; font-size: calc(var(--ts, 1) * 12px); line-height: 1.05; color: #fff4dc; background: rgba(30,20,12,0.28); border: 1.5px solid rgba(255,235,190,0.4); touch-action: none; text-shadow: 0 calc(var(--ts, 1) * 1px) calc(var(--ts, 1) * 2px) #000; }
.tb.down { background: rgba(190,120,50,0.72); }
.tb.on { background: rgba(150,90,40,0.6); border-color: #ffd98a; }
.tw { touch-action: none; }
/* Right thumb's arc, well clear of the reticle in the middle of the screen. */
#tb-fire { right: calc(calc(var(--ts, 1) * 18px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 18px) + env(safe-area-inset-bottom)); width: calc(var(--ts, 1) * 92px); height: calc(var(--ts, 1) * 92px); font-size: calc(var(--ts, 1) * 15px); background: rgba(120,40,24,0.36); }
#tb-aim { right: calc(calc(var(--ts, 1) * 118px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 22px) + env(safe-area-inset-bottom)); width: calc(var(--ts, 1) * 66px); height: calc(var(--ts, 1) * 66px); font-size: calc(var(--ts, 1) * 13px); }
#tb-roll { right: calc(calc(var(--ts, 1) * 26px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 118px) + env(safe-area-inset-bottom)); }
#tb-reload { right: calc(calc(var(--ts, 1) * 92px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 98px) + env(safe-area-inset-bottom)); }
#tb-crouch { right: calc(calc(var(--ts, 1) * 158px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 94px) + env(safe-area-inset-bottom)); }
#tb-cover { right: calc(calc(var(--ts, 1) * 192px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 26px) + env(safe-area-inset-bottom)); }
#tb-tithe { right: calc(calc(var(--ts, 1) * 26px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 184px) + env(safe-area-inset-bottom)); border-color: #ff9a5a; }
#tb-tithe.big { right: calc(calc(var(--ts, 1) * 18px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 18px) + env(safe-area-inset-bottom)); width: calc(var(--ts, 1) * 92px); height: calc(var(--ts, 1) * 92px); font-size: calc(var(--ts, 1) * 15px); background: rgba(150,40,14,0.6); }
#tb-use { right: calc(calc(var(--ts, 1) * 226px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 74px) + env(safe-area-inset-bottom)); width: auto; max-width: calc(var(--ts, 1) * 190px); min-width: calc(var(--ts, 1) * 76px); height: calc(var(--ts, 1) * 50px); padding: 0 calc(var(--ts, 1) * 12px); border-radius: calc(var(--ts, 1) * 12px); font-size: calc(var(--ts, 1) * 13px); background: rgba(120,84,30,0.72); border-color: #ffd98a; }
#tb-whistle { left: calc(calc(var(--ts, 1) * 14px) + env(safe-area-inset-left)); top: calc(calc(var(--ts, 1) * 118px) + env(safe-area-inset-top)); width: calc(var(--ts, 1) * 50px); height: calc(var(--ts, 1) * 50px); font-size: calc(var(--ts, 1) * 10.5px); }
#tb-map { right: calc(calc(var(--ts, 1) * 66px) + env(safe-area-inset-right)); top: calc(calc(var(--ts, 1) * 8px) + env(safe-area-inset-top)); width: calc(var(--ts, 1) * 46px); height: calc(var(--ts, 1) * 40px); border-radius: calc(var(--ts, 1) * 10px); }
#tb-pause { right: calc(calc(var(--ts, 1) * 12px) + env(safe-area-inset-right)); top: calc(calc(var(--ts, 1) * 8px) + env(safe-area-inset-top)); width: calc(var(--ts, 1) * 46px); height: calc(var(--ts, 1) * 40px); border-radius: calc(var(--ts, 1) * 10px); }
#t-weapons { position: absolute; left: 50%; bottom: calc(calc(var(--ts, 1) * 8px) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: calc(var(--ts, 1) * 6px); }
.tw { min-width: calc(var(--ts, 1) * 50px); height: calc(var(--ts, 1) * 38px); padding: 0 calc(var(--ts, 1) * 6px); font-size: calc(var(--ts, 1) * 12px); border-radius: calc(var(--ts, 1) * 9px); color: #fff4dc; background: rgba(30,20,12,0.42); border: 1.5px solid rgba(255,235,190,0.35); }
.tw.on { background: rgba(150,90,40,0.66); border-color: #ffd98a; }
#t-mark-hint { display: none; position: absolute; left: 50%; top: 74%; transform: translateX(-50%); font-size: 15px; color: #ffcfa0; text-shadow: 0 1px 3px #000; pointer-events: none; }
body.touch #touch-help { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); width: min(420px, 60vw); padding: 8px 12px; font-size: 13px; line-height: 1.3; text-align: center; background: rgba(24,16,10,0.82); border: 1px solid rgba(232,192,112,0.45); z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
body.touch #touch-help.on { opacity: 1; }
#touch-help b { color: #ffd98a; font-weight: normal; }

/* The HUD rearranged around the thumbs. */
body.touch #panel-left { left: calc(10px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); bottom: auto; width: 196px; display: grid; grid-template-columns: 84px 1fr; column-gap: 8px; }
body.touch #minimap { grid-row: 1 / span 5; width: 84px; height: 84px; margin: 0; }
body.touch .bar-row { margin-top: 3px; }
body.touch .bar-row label { display: none; }
body.touch .bar { height: 8px; }
body.touch #compass { top: 6px; width: 260px; height: 24px; }
body.touch #panel-objective { top: calc(54px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 190px; font-size: 12px; }
body.touch #objective { font-size: 12px; }
body.touch #objective-title { font-size: 11px; }
body.touch #panel-weapon { left: 50%; right: auto; bottom: calc(50px + env(safe-area-inset-bottom)); width: 240px; transform: translateX(-50%); text-align: center; }
body.touch #weapon-name { display: none; }
body.touch #rep { display: none; }
body.touch #weapon-row { justify-content: center; gap: 6px; }
body.touch #weapon-ammo { font-size: 16px; }
body.touch #weapon-icons { font-size: 11px; }
body.touch #subtitle { bottom: 106px; font-size: 14px; width: 54%; }
body.touch #notices { top: 40px; }
body.touch .notice { font-size: 13px; }
body.touch #place-name { top: 34px; font-size: 18px; }
body.touch #kill-text { font-size: 17px; }
body.touch button { min-height: 44px; }
body.touch .tb, body.touch .tw { min-height: 44px; min-width: 44px; }
body.touch input[type=range] { height: 28px; }
body.touch .card { padding: 14px 18px; max-height: calc(100vh - 16px); -webkit-overflow-scrolling: touch; }
body.touch .screen { padding: 8px; align-items: flex-start; }
body.touch .title-card h1 { font-size: 44px; }
body.touch #world-map { width: min(60vh, 300px); height: min(60vh, 300px); }
body.touch .map-card h2 { margin: 0 0 6px; font-size: 18px; }
body.touch .map-card .buttons { margin-top: 8px; }

/* Upright phone: ask for landscape. */
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 20; align-items: center; justify-content: center; padding: 30px; text-align: center; font-size: 20px; line-height: 1.4; color: #f6e2bb; background: #120b07; }
}

body.touch .mouse-only { display: none !important; }

/* Hints taught in the action: one line, low and centred, never in the way of the reticle or a tap. */
#hint { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); max-width: min(720px, 80vw); padding: 7px 16px; text-align: center;
  background: rgba(14,9,5,0.62); border-left: 2px solid #e8c070; font-size: 15px; line-height: 1.35; color: #f6ead2; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#hint.on { opacity: 1; }
body.touch #hint { bottom: auto; top: 58px; font-size: 13px; max-width: 56vw; }
#btn-skip { display: none; position: fixed; z-index: 4; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); padding: 6px 12px;
  font: 13px Georgia, serif; color: #f4ead8; background: rgba(20,12,6,0.55); border: 1px solid rgba(232,192,112,0.45); letter-spacing: 0.04em; cursor: pointer; touch-action: none; }
body:not(.touch) #btn-skip { top: 14px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); top: 62px; }
body.touch #btn-skip { right: auto; left: calc(12px + env(safe-area-inset-left)); bottom: auto; top: calc(198px + env(safe-area-inset-top)); }

#boss-bar { display: none; position: absolute; left: 50%; top: 92px; transform: translateX(-50%); width: min(520px, 60vw); text-align: center; pointer-events: none; }
#boss-name { font-variant: small-caps; letter-spacing: 0.14em; font-size: 15px; color: #f2dcb0; text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
#boss-track { height: 8px; background: rgba(15,9,5,0.75); border: 1px solid rgba(220,170,110,0.5); }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #7a1c12, #c2412a); transition: width 0.2s; }
body.touch #boss-bar { top: 64px; width: 44vw; }
body.touch #boss-name { font-size: 12px; }
#tb-firearrow { right: calc(calc(var(--ts, 1) * 96px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 236px) + env(safe-area-inset-bottom)); width: calc(var(--ts, 1) * 54px); height: calc(var(--ts, 1) * 54px); font-size: calc(var(--ts, 1) * 10.5px); border-color: #ffb060; }
#tb-firearrow.on { background: rgba(170,70,20,0.6); }

/* Streaks and combos: under the reticle, short, never over a control. */
#streak { position: absolute; left: 50%; top: 61%; transform: translateX(-50%) scale(0.9); font-variant: small-caps; letter-spacing: 0.12em; font-size: 20px; color: #ffe2a8;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(255,150,60,0.35); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; white-space: nowrap; }
#streak.show { opacity: 1; transform: translateX(-50%) scale(1); }
#streak.pop { animation: streakpop 0.35s ease-out; }
#streak.head { color: #ffd24a; } #streak.big { color: #ffb070; font-size: 24px; } #streak.quiet { color: #cfe0c8; }
@keyframes streakpop { 0% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1); } }
body.touch #streak { top: 64%; font-size: 15px; }
/* The kill camera: letterbox bars and a quiet skip note. */
#killcam { display: none; position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#killcam::before, #killcam::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #000; }
#killcam::before { top: 0; } #killcam::after { bottom: 0; }
#killcam span { position: absolute; right: 18px; bottom: calc(9vh + 8px); font-size: 13px; color: rgba(255,240,220,0.7); }
#killcam.on { display: block; }

/* During the kill camera only the kill itself is on screen. */
body.killcam #panel-left, body.killcam #panel-weapon, body.killcam #panel-objective, body.killcam #compass, body.killcam #hud-canvas, body.killcam #touch { visibility: hidden; }

#activity { display: none; position: absolute; left: 50%; top: 66px; transform: translateX(-50%); padding: 6px 16px; background: rgba(14,9,5,0.66); border: 1px solid rgba(232,192,112,0.4); font-size: 15px; pointer-events: none; white-space: nowrap; }
body.touch #activity { top: 46px; font-size: 12px; }
#side-objective { position: absolute; right: 20px; top: 70px; max-width: 340px; text-align: right; font-size: 13px; color: #d8d0c0; text-shadow: 0 1px 3px #000; pointer-events: none; }
#side-objective:not(:empty)::before { content: '\25C7  '; color: #c8c8d8; }
body.touch #side-objective { top: 112px; right: calc(12px + env(safe-area-inset-right)); font-size: 11px; max-width: 40vw; }
#shop-items .item.poster { display: flex; align-items: center; gap: 12px; text-align: left; }
#shop-items .item.poster img { width: 72px; height: 90px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
body.touch #shop-items .item.poster img { width: 52px; height: 65px; }

#tb-jump { right: calc(calc(var(--ts, 1) * 150px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 96px) + env(safe-area-inset-bottom)); }

/* Title screen: the name and menu down the left over a dark wash, the valley open on the right. */
#screen-title { justify-content: flex-start; padding-left: 7vw; background: linear-gradient(90deg, rgba(10,6,3,0.84) 0%, rgba(10,6,3,0.6) 30%, rgba(10,6,3,0.12) 58%, rgba(10,6,3,0) 70%), linear-gradient(rgba(0,0,0,0) 72%, rgba(10,5,2,0.45)); }
#screen-title .title-card { text-align: left; width: min(640px, 88vw); padding: 0; overflow: visible; }
#screen-title .title-card h1 { white-space: nowrap; display: inline-block; padding-right: 0.1em; }
#screen-title .title-card h1 { font-size: 86px; letter-spacing: 0.1em; line-height: 1; background: linear-gradient(#fff3d6 20%, #e2b066 85%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 12px rgba(0,0,0,0.85)); }
#screen-title .tag { display: block; width: fit-content; font-style: normal; font-variant: small-caps; letter-spacing: 0.16em; font-size: 15px; color: #d9c49c; margin: 12px 0 34px; padding-top: 10px; border-top: 1px solid rgba(232,192,112,0.55); display: inline-block; }
#screen-title .buttons { align-items: flex-start; gap: 2px; margin: 0; }
#screen-title .buttons button, #screen-title summary { width: auto; min-width: 230px; text-align: left; font-size: 22px; letter-spacing: 0.08em; background: transparent; border: none; border-left: 2px solid transparent; padding: 7px 16px; color: #efe2c8; text-shadow: 0 1px 4px #000; transition: border-color 0.15s, background 0.15s, padding 0.15s; }
#screen-title .buttons button:hover:not(:disabled), #screen-title .buttons button:focus-visible, #screen-title summary:hover { border-left-color: #e8c070; background: linear-gradient(90deg, rgba(232,192,112,0.2), rgba(232,192,112,0)); padding-left: 22px; color: #fff3d6; }
#screen-title #btn-new { color: #ffe3a8; }
#screen-title .buttons button:disabled { opacity: 0.38; }
#screen-title details { background: transparent; margin-top: 2px; padding: 0; }
#screen-title summary { list-style: none; display: block; font-size: 18px; color: #cdbb98; }
#screen-title summary::-webkit-details-marker { display: none; }
#screen-title details[open] { background: rgba(20,12,6,0.74); border-left: 2px solid rgba(232,192,112,0.5); }
#screen-title details[open] > div { padding: 0 16px 12px; }
body.touch #screen-title { padding-left: calc(5vw + env(safe-area-inset-left)); }
body.touch #screen-title .title-card h1 { font-size: 46px; }
body.touch #screen-title .tag { margin: 8px 0 14px; font-size: 13px; }
body.touch #screen-title .buttons button, body.touch #screen-title summary { font-size: 18px; padding: 6px 14px; min-width: 180px; }
/* The shop's Leave button stays in reach however long the list gets (small phone screens). */
.card.shop > .buttons { position: sticky; bottom: -22px; margin: 8px -28px -22px; padding: 10px 28px 14px; background: linear-gradient(rgba(24,16,10,0.6), rgba(24,16,10,0.98) 35%); }

/* iPhone Safari zooms the page in when a form control with text under 16px gets focus, and the game
   turns pinch-zoom off, so the player could not zoom back out. 16px controls never trigger it. */
body.touch select, body.touch input, body.touch textarea { font-size: 16px; }


/* ==== Finished presentation: one type system, crafted panels, moving parts ==== */
:root {
  --f-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gold: #e8c070; --gold-d: #a47f3f; --ink: #17100a; --paper: #f4ead8;
}
html, body { font-family: var(--f-display); }
#objective, #subtitle, .notice, #hint, #prompt, .options, .ctl-grid, #pause-info, #shop-blurb { font-family: var(--f-ui); }
#objective { font-size: 14px; font-weight: 500; }
#subtitle { font-weight: 500; }
#subtitle b { font-family: var(--f-display); font-size: 1.05em; }

/* Panels and menus. */
.card { position: relative; background: linear-gradient(170deg, rgba(38,27,17,0.97), rgba(20,13,8,0.98)); border: 1px solid rgba(232,192,112,0.5); border-radius: 3px; box-shadow: 0 18px 60px rgba(0,0,0,0.65), inset 0 0 0 4px rgba(20,13,8,0.9), inset 0 0 0 5px rgba(232,192,112,0.2); animation: card-in 0.32s cubic-bezier(.2,.75,.3,1); }
.title-card { animation: none; box-shadow: none; }
#screen-title .title-card { background: transparent; border: none; }
.card h2 { font-size: 26px; letter-spacing: 0.14em; font-variant: small-caps; text-align: center; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(232,192,112,0.32); }
.screen { animation: screen-in 0.25s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes screen-in { from { opacity: 0; } }
button { font-family: var(--f-display); letter-spacing: 0.05em; border-radius: 2px; background: linear-gradient(rgba(112,66,32,0.92), rgba(70,40,18,0.92)); box-shadow: inset 0 1px 0 rgba(255,225,170,0.22), 0 1px 3px rgba(0,0,0,0.5); transition: background 0.14s, transform 0.1s, border-color 0.14s; }
button:hover:not(:disabled) { background: linear-gradient(rgba(176,104,46,0.95), rgba(112,62,26,0.95)); border-color: var(--gold); }
button:active:not(:disabled) { transform: translateY(1px); }
.tb, .tw { font-family: var(--f-display); box-shadow: 0 2px 6px rgba(0,0,0,0.45); }

/* Bars and pop-ups. */
.bar { height: 10px; border-radius: 5px; border: 1px solid rgba(232,192,112,0.42); background: rgba(13,8,4,0.78); }
.bar i { border-radius: 5px; transition: width 0.24s cubic-bezier(.2,.7,.3,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32); }
.notice { animation: notice-in 0.28s cubic-bezier(.2,.8,.3,1); padding: 3px 14px; background: linear-gradient(90deg, rgba(14,9,5,0), rgba(14,9,5,0.58) 18%, rgba(14,9,5,0.58) 82%, rgba(14,9,5,0)); }
@keyframes notice-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
#subtitle { background: linear-gradient(90deg, rgba(10,6,3,0), rgba(10,6,3,0.62) 14%, rgba(10,6,3,0.62) 86%, rgba(10,6,3,0)); padding: 7px 26px; }
#prompt, #hint { border-radius: 2px; }

/* Loading. */
#loading { background: #0e1a24; justify-content: flex-end; align-items: stretch; }
#loading-art { position: absolute; inset: 0; width: 100%; height: 100%; }
#loading-panel { position: relative; padding: 26px 7vw 34px; background: linear-gradient(rgba(8,6,4,0), rgba(8,6,4,0.86) 42%); }
#loading-title { font-family: var(--f-display); font-size: clamp(32px, 6vw, 60px); letter-spacing: 0.16em; color: #fff0d0; text-shadow: 0 3px 14px rgba(0,0,0,0.7); }
#loading-bar { width: min(560px, 80vw); height: 5px; margin: 10px 0 8px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
#loading-fill { background: linear-gradient(90deg, #d98a3a, #ffd98a); border-radius: 3px; }
#loading-text { font-family: var(--f-ui); font-style: normal; font-size: 13px; color: #cdbb98; }
#loading-tip { font-family: var(--f-ui); margin-top: 8px; max-width: 760px; font-size: 15px; color: #f4ead8; line-height: 1.35; min-height: 2.7em; transition: opacity 0.3s; }

#fade { display: none; position: fixed; inset: 0; background: #070504; opacity: 0; pointer-events: none; z-index: 8; }

/* Dialogue: bars in from top and bottom. Under the HUD text; never reaches the reticle. */
#letterbox i { position: absolute; left: 0; right: 0; height: 8.5vh; background: #050403; transition: transform 0.45s cubic-bezier(.3,.7,.3,1); }
#letterbox i:first-child { top: 0; transform: translateY(-101%); }
#letterbox i:last-child { bottom: 0; transform: translateY(101%); }
body.dialogue #letterbox i { transform: none; }
body.touch #letterbox i { height: 6.5vh; }

/* Mission cards. High on the screen, clear of the reticle. */
#mission-card { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); min-width: min(560px, 74vw); max-width: 84vw; padding: 10px 40px 13px; text-align: center; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(12,8,4,0.74), rgba(12,8,4,0) 74%); }
#mission-card.show { animation: mc 3.8s cubic-bezier(.2,.7,.3,1) forwards; }
#mission-card .mc-k { font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
#mission-card .mc-t { font-size: clamp(26px, 4vw, 44px); letter-spacing: 0.08em; font-variant: small-caps; color: #fff3d8; text-shadow: 0 2px 12px rgba(0,0,0,0.9); margin: 3px 0 2px; }
#mission-card .mc-rule { height: 1px; width: 72%; margin: 4px auto 6px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#mission-card .mc-s { font-family: var(--f-ui); font-size: 15px; color: #efe2c8; text-shadow: 0 1px 4px #000; }
#mission-card.done .mc-k { color: #cfe39a; }
@keyframes mc { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px); } 10% { opacity: 1; transform: translateX(-50%); } 88% { opacity: 1; } 100% { opacity: 0; } }
body.touch #mission-card { top: 11%; padding: 6px 24px 8px; }
body.touch #mission-card .mc-s { font-size: 13px; }
body.touch #mission-card .mc-k { font-size: 11px; }

/* Phone buttons: icons. The word stays in the element for screen readers. */
.tb.ic { font-size: 0 !important; background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-fire { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 40 40 8M40 8H30M40 8v10M8 40l-3 3M12 44l-4-4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-aim { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='13'/%3E%3Ccircle cx='24' cy='24' r='2.4' fill='%23f6ead2'/%3E%3Cpath d='M24 4v8M24 36v8M4 24h8M36 24h8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-reload { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 24a14 14 0 1 1-4-10'/%3E%3Cpath d='M35 5v10H25'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-cover:not(.txt) { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 42V24l6-5 6 5 6-5 6 5 6-5 4 4v19z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-roll { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 24a16 16 0 1 1-6-12.5'/%3E%3Cpath d='M36 4v9h-9'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23f6ead2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-crouch { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='11' r='5'/%3E%3Cpath d='M24 16l-7 12h12l-4 13M17 28l-6 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-tithe:not(.txt) { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5c8 9 12 14 12 21a12 12 0 0 1-24 0c0-7 4-12 12-21z'/%3E%3Cpath d='M24 27v9M19 31h10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-firearrow { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 42 30 18M30 18l-1 8M30 18l-8 1'/%3E%3Cpath d='M36 4c5 5 7 8 7 12a7 7 0 0 1-14 0c0-4 2-7 7-12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-jump { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 34V8M14 18 24 8l10 10M8 42h32'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-whistle { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22h22a10 10 0 1 1-10 12l-12-6z'/%3E%3Cpath d='M34 12l4-6M41 18l6-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-map { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l12-5 12 5 12-5v29l-12 5-12-5-12 5zM18 7v29M30 12v29'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
#tb-pause { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 10v28M31 10v28' stroke-width='6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 60%; }
.tw.tw-longbow { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c20 8 20 30 0 38M12 5v38M12 24h28M40 24l-6-4M40 24l-6 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: auto 76%; }
.tw.tw-crossbow { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16c10-8 26-8 36 0M6 16l18 6 18-6M24 8v36M20 44h8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: auto 76%; }
.tw.tw-handcannon { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16h30l3-4h7v12h-7l-3-4H24l-6 22H9l5-20H4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: auto 76%; }
.tw.tw-sword { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 6 16 28M42 6h-4M42 6v4M42 6 18 30l-4-4M10 22l16 16M14 34l-8 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: auto 76%; }

input[type=range], input[type=checkbox] { accent-color: var(--gold-d); }
#screen-title { background: linear-gradient(90deg, rgba(10,6,3,0.72) 0%, rgba(10,6,3,0.46) 30%, rgba(10,6,3,0.08) 58%, rgba(10,6,3,0) 70%), linear-gradient(rgba(0,0,0,0) 72%, rgba(10,5,2,0.4)); }
#loading-art { object-fit: cover; }
body.dialogue #hud-canvas { opacity: 0; }
#hud-canvas { transition: opacity 0.3s; }

#gfx-warning { display: none; position: fixed; left: 50%; top: 10px; transform: translateX(-50%); width: min(620px, 92vw); max-height: 40vh; overflow: auto; z-index: 20; padding: 8px 12px; background: rgba(60,14,8,0.95); border: 1px solid #ff9a6a; font: 13px/1.35 var(--f-ui, sans-serif); color: #fff; }
#gfx-warning.on { display: block; }
#gfx-warning button { margin-left: 8px; padding: 1px 10px; }
#gfx-warning .gw-m { margin-top: 5px; font: 11px/1.3 monospace; color: #ffd8c8; word-break: break-word; }

.credits { max-height: 34vh; overflow-y: auto; font-size: 13px; line-height: 1.45; text-align: left; color: #e8dcc2; }
.credits p { margin: 0 0 8px; }
.st-src { display: block; font-size: 12px; color: #b9a988; }
.st-rate { padding: 5px 10px !important; opacity: 0.75; }
.st-rate.on { opacity: 1; background: #a8843c; color: #1a140a; }
.st-row { flex-wrap: wrap; }

/* The action bar: desktop only, small and see-through. */
#action-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
body.touch #action-bar { display: none; }
body:not(.touch) #weapon-name, body:not(.touch) #weapon-row { display: none; }
#ab-slots { display: flex; gap: 5px; padding: 4px; border-radius: 7px; background: rgba(16, 11, 6, 0.42); box-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.ab-slot { pointer-events: auto; position: relative; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(232,192,112,0.32); border-radius: 5px; background: rgba(30,21,12,0.62); color: #e8dcc2; cursor: pointer; }
.ab-slot:hover { border-color: rgba(232,192,112,0.8); }
.ab-slot.active { border-color: #ffd98a; background: rgba(90,62,24,0.72); box-shadow: 0 0 8px rgba(255,200,110,0.55); color: #fff4d6; }
.ab-slot.reloading .ab-ico { animation: ab-beat 0.8s ease-in-out infinite alternate; }
.ab-slot.empty .ab-ammo { color: #ff7a5a; }
.ab-slot.locked { color: #8c7f6a; background: rgba(20,15,10,0.4); }
.ab-slot.locked .ab-ico { opacity: 0.32; }
.ab-ico { position: absolute; left: 7px; top: 8px; width: 32px; height: 32px; }
.ab-key { position: absolute; left: 4px; top: 2px; font-size: 11px; font-weight: 700; color: #f6e2bb; text-shadow: 0 1px 2px #000; }
.ab-ammo { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.ab-lock { display: none; position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; color: #d7c8aa; }
.ab-slot.locked .ab-lock { display: block; }
.ab-slot.ab-pulse { animation: ab-pulse 0.25s ease-out; }
@keyframes ab-pulse { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ab-beat { from { opacity: 0.45; } to { opacity: 1; } }
#ab-hints { display: flex; gap: 10px; min-height: 18px; font-size: 12px; color: #efe3cb; text-shadow: 0 1px 2px #000; }
.ab-hint { display: inline-flex; align-items: center; gap: 4px; }
.ab-hint kbd { font: inherit; font-size: 10px; font-weight: 700; padding: 0 4px; border: 1px solid rgba(232,192,112,0.55); border-radius: 3px; background: rgba(20,14,8,0.55); color: #ffe6b0; }
#ab-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 3px 8px; white-space: nowrap; font-size: 12px; color: #f2e7cf; background: rgba(16,11,6,0.72); border-radius: 4px; opacity: 0; transition: opacity 0.12s; }
#ab-tip.on { opacity: 1; }
body:not(.touch) #prompt { display: none; }

/* Page zoom recovery on phones: see js/game/zoomguard.js */
body.touch select, body.touch input, body.touch textarea { font-size: 16px; }
body.page-zoomed, body.page-zoomed * { touch-action: pinch-zoom !important; }
#zoom-fix { display: none; position: fixed; left: 0; top: 0; z-index: 40; transform-origin: top center; padding: 10px 16px; white-space: nowrap; font: 15px Georgia, serif; color: #f4ead8; background: rgba(20,12,6,0.9); border: 1px solid rgba(232,192,112,0.7); border-radius: 6px; }

/* ---- phones: designed for thumbs ---- */
body.touch #touch-help { top: calc(36px + env(safe-area-inset-top)); width: min(430px, 56vw); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; padding: 6px 8px 6px 14px; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 4; border: 1px solid rgba(232,192,112,0.45); border-radius: 4px; }
body.touch #touch-help .ch-t { flex: 1 1 auto; text-align: left; }
body.touch #touch-help .ch-pips { font-size: 9px; letter-spacing: 1px; color: #e8c070; }
body.touch #coach-skip { pointer-events: auto; min-height: 44px; min-width: 56px; padding: 0 10px; font-size: 13px; }
body.touch.coaching #panel-objective, body.touch.coaching #hint { visibility: hidden; }
.coach-glow { animation: coach-glow 0.9s ease-in-out infinite alternate; }
@keyframes coach-glow { from { box-shadow: 0 0 0 0 rgba(255,217,138,0.2); } to { box-shadow: 0 0 0 7px rgba(255,217,138,0.75); } }
body.touch #t-weapons .tw { min-width: 46px; }
body.touch #tb-map, body.touch #tb-pause { min-height: 44px; }
body.touch #tb-map { right: calc(calc(var(--ts, 1) * 68px) + env(safe-area-inset-right)); }
body.touch #panel-weapon { bottom: calc(60px + env(safe-area-inset-bottom)); }
body.touch .screen { padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
body.touch .card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); }
body.touch .options label { min-height: 44px; font-size: 14px; }
body.touch .options input[type=range] { height: 44px; }
body.touch .options input[type=checkbox] { width: 22px; height: 22px; }
body.touch .options select { min-height: 44px; font-size: 16px; }
body.touch summary { min-height: 44px; display: flex; align-items: center; }
body.touch .ctl-grid { font-size: 13px; }
body.touch #shop-items .item { min-height: 48px; font-size: 15px; }
body.touch #world-map { width: min(calc(100dvh - 136px), 300px); height: min(calc(100dvh - 136px), 300px); }
body.touch #subtitle { padding: 0 6px; font-size: 15px; bottom: calc(96px + env(safe-area-inset-bottom)); }
body.touch #btn-skip { min-height: 44px; }
body.touch #notices { top: calc(40px + env(safe-area-inset-top)); }
body.touch #tb-reload { right: calc(calc(var(--ts, 1) * 106px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 112px) + env(safe-area-inset-bottom)); }
body.touch #tb-crouch { right: calc(calc(var(--ts, 1) * 172px) + env(safe-area-inset-right)); bottom: calc(calc(var(--ts, 1) * 96px) + env(safe-area-inset-bottom)); }

/* Finishing touches: screens rise into place; a press answers at once. */
.screen.on { animation: screen-in 0.22s ease-out; }
.screen.on .card { animation: card-in 0.3s cubic-bezier(.2,.8,.3,1); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.98); filter: brightness(1.18); transition: transform 40ms; }
#panel-objective.obj-new { animation: obj-new 1.5s cubic-bezier(.2,.7,.3,1); }
@keyframes obj-new { 0% { transform: translateX(14px); box-shadow: 0 0 0 1px rgba(255,217,138,0); } 18% { transform: translateX(0); box-shadow: 0 0 22px 2px rgba(255,217,138,0.75); } 100% { box-shadow: 0 0 0 1px rgba(255,217,138,0); } }
#reward-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 42%, rgba(255,214,130,0.5), rgba(255,190,90,0.14) 46%, rgba(255,180,80,0) 72%); }
#reward-glow.go { animation: reward-glow 1.5s ease-out; }
@keyframes reward-glow { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* The map's side panel: what to do, in words, beside where it is. */
.map-row { display: flex; gap: 16px; align-items: stretch; justify-content: center; }
.map-side { width: 200px; text-align: left; color: #efe2c8; font-size: 15px; line-height: 1.35; }
.map-side h3 { margin: 2px 0 6px; color: var(--gold); font-variant: small-caps; letter-spacing: 0.06em; font-size: 17px; }
.map-side p { margin: 0 0 8px; }
#map-obj-dist { color: #ffd98a; }
.map-key { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.map-key li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.map-key i { display: inline-block; width: 11px; height: 11px; transform: rotate(45deg); }
.k-you { background: #fff; border: 1px solid #201810; } .k-goal { background: #ffd98a; border: 1px solid #3a2410; } .k-bounty { background: #d8dcec; border: 1px solid #20222a; } .k-horse { background: #c79a60; border-radius: 50%; }
body.touch .map-side { width: 180px; font-size: 13px; }
body.touch .map-side h3 { font-size: 15px; margin-bottom: 3px; }
body.touch .map-side p { margin-bottom: 5px; }
body.touch .map-key { font-size: 12px; margin-top: 5px; }
body.touch .map-card { width: auto; max-width: 96vw; }

/* The finished frame. A crest over the title, gold rule under it; menus and panels carry brass corners. */
#screen-title .title-card::before { content: ''; display: block; width: 72px; height: 86px; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 76'%3E%3Cpath d='M6 8 L58 8 L58 40 Q58 62 32 72 Q6 62 6 40 Z' fill='%23321d10' stroke='%23e2b066' stroke-width='3'/%3E%3Cpath d='M14 58 L50 18 M50 58 L14 18' stroke='%23f2dca8' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M46 14 L54 14 L54 22 Z M18 14 L10 14 L10 22 Z' fill='%23f2dca8'/%3E%3Cpath d='M9 54 L16 52 M9 58 L16 60 M55 54 L48 52 M55 58 L48 60' stroke='%23f2dca8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7)); }
body.touch #screen-title .title-card::before { width: 36px; height: 44px; margin-bottom: 4px; }
.card:not(.title-card) { position: relative; border: 1px solid rgba(226,176,102,0.5); outline: 1px solid rgba(226,176,102,0.16); outline-offset: 3px; background: linear-gradient(rgba(38,25,14,0.96), rgba(22,14,8,0.97)); }
.card:not(.title-card)::before, .card:not(.title-card)::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; border-color: #e2b066; border-style: solid; }
.card:not(.title-card)::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.card:not(.title-card)::after { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }
.card h2 { text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
#loading-panel { background: linear-gradient(rgba(10,6,3,0), rgba(10,6,3,0.82) 34%, rgba(10,6,3,0.92)); }
#loading-title { font-size: 54px; letter-spacing: 0.2em; background: linear-gradient(#fff3d6 20%, #e2b066 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#loading-title::before { content: ''; display: inline-block; width: 38px; height: 46px; margin-right: 14px; vertical-align: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 76'%3E%3Cpath d='M6 8 L58 8 L58 40 Q58 62 32 72 Q6 62 6 40 Z' fill='%23321d10' stroke='%23e2b066' stroke-width='3'/%3E%3Cpath d='M14 58 L50 18 M50 58 L14 18' stroke='%23f2dca8' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M46 14 L54 14 L54 22 Z M18 14 L10 14 L10 22 Z' fill='%23f2dca8'/%3E%3Cpath d='M9 54 L16 52 M9 58 L16 60 M55 54 L48 52 M55 58 L48 60' stroke='%23f2dca8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
#loading-bar { height: 5px; border: 1px solid rgba(226,176,102,0.4); background: rgba(40,24,12,0.8); }
#loading-fill { background: linear-gradient(90deg, #c8843a, #f2c878); box-shadow: 0 0 10px rgba(242,200,120,0.5); }
#loading-tip { color: #f0e2c6; text-shadow: 0 1px 4px #000; }
body.touch #loading-title { font-size: 32px; }
body.touch #loading-title::before { width: 24px; height: 30px; }
.k-camp { background: #7a1e12; border: 1px solid #f2e2bc; transform: none !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.k-clue { background: transparent; border: 2px dashed #e2b066; border-radius: 50%; transform: none !important; }
.fly-coin { position: fixed; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #d39a30 60%, #8a5a18); box-shadow: 0 0 6px rgba(255,210,120,0.8); pointer-events: none; z-index: 8; animation: fly-coin 0.62s cubic-bezier(.4,.1,.6,1) both; }
@keyframes fly-coin { 0% { opacity: 0; transform: translate(0, 12px) scale(0.5); } 18% { opacity: 1; transform: translate(0, -18px) scale(1.1); } 100% { opacity: 0.2; transform: translate(var(--dx), var(--dy)) scale(0.6); } }
#side-objective { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.8); color: #f2e6cc; background: linear-gradient(90deg, rgba(14,9,5,0), rgba(14,9,5,0.5) 30%); padding: 2px 6px 3px; border-radius: 2px; }
/* The rope's touch slot: a coil, drawn to match the other weapon icons, compact enough for five on a small phone. */
.tw.tw-rope { font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f6ead2' stroke-width='3' stroke-linecap='round'%3E%3Cellipse cx='21' cy='17' rx='14' ry='9'/%3E%3Cellipse cx='21' cy='20' rx='10' ry='6'/%3E%3Ccircle cx='33' cy='23' r='2.6' fill='%23f6ead2'/%3E%3Cpath d='M34 26 C38 31 33 36 39 43'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 62%; }
body.touch #t-weapons { gap: calc(var(--ts, 1) * 4px); }
body.touch .tw { min-width: 44px; padding: 0 2px; }
#map-legend { color: #f2c878; margin-bottom: 2px; }
.map-legend-text { font-size: 13px; color: #d8cbb0; margin: 0 0 10px; }
body.touch .map-legend-text { font-size: 12px; margin-bottom: 4px; }

body.touch .map-key { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
body.touch .map-key li { margin: 1px 0; }
body.touch .map-legend-text { font-size: 11px; line-height: 1.25; }