/* Ragdoll Bowmen 3D - UI. Sizes are rem; ui.ts scales the root font size to the viewport. */
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
    background: #bfe3f5;
    touch-action: none; overscroll-behavior: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
body { font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; }
img, svg { -webkit-user-drag: none; }
#game { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui button { pointer-events: auto; }
button { font-family: inherit; cursor: pointer; border: 0; outline: none; -webkit-tap-highlight-color: transparent; }
button:focus-visible { box-shadow: 0 0 0 0.2rem #fff !important; }
svg { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ---------- boot ---------- */
#boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#5aa6e6, #bfe3f5); transition: opacity .35s; z-index: 50; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-bow { width: 64px; height: 64px; border: 6px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#boot .err { max-width: 80%; font-size: 18px; text-align: center; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* ---------- common text / buttons ---------- */
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
.screen.on { display: flex; animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.pause, .over, .settings, .twop, .workshop, .boon { background: rgba(10, 18, 34, 0.55); }
h2 { margin: 0 0 .6rem; font-size: 2.1rem; font-weight: 900; letter-spacing: .06em; text-align: center;
    text-shadow: 0 .18rem 0 #1b2536, 0 0 .6rem rgba(0,0,0,.35); }
h3 { margin: 0 0 .4rem; font-size: 1.1rem; letter-spacing: .08em; }
.panel { background: linear-gradient(#2d4466, #1d2c46); border: .2rem solid #0f1a2c; border-radius: 1.1rem;
    box-shadow: 0 .45rem 0 #0f1a2c, 0 1rem 2rem rgba(0,0,0,.4), inset 0 .15rem 0 rgba(255,255,255,.12);
    padding: 1.1rem 1.4rem; box-sizing: border-box; max-width: 52rem; max-height: 27.5rem; display: flex; flex-direction: column; align-items: stretch; }
.panel.small { width: 20rem; }
.panel.wide { width: 52rem; height: 27rem; }
.btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.6rem; padding: .4rem 1.2rem;
    font-size: 1.05rem; font-weight: 900; letter-spacing: .06em; color: #fff; border-radius: .8rem;
    background: linear-gradient(#5b7aa6, #3f5b85); box-shadow: 0 .3rem 0 #243552, inset 0 .12rem 0 rgba(255,255,255,.25);
    text-shadow: 0 .12rem 0 rgba(0,0,0,.35); margin: .3rem 0; transition: transform .06s; }
.btn:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 #243552; }
.btn svg { width: 1.3rem; height: 1.3rem; }
.btn.primary { background: linear-gradient(#ffcf3f, #f39c12); color: #4a2a00; text-shadow: 0 .1rem 0 rgba(255,255,255,.45); box-shadow: 0 .3rem 0 #a45f00, inset 0 .12rem 0 rgba(255,255,255,.5); }
.btn.primary:active { box-shadow: 0 .1rem 0 #a45f00; }
.btn.primary svg path { fill: #4a2a00; }
.btn.big { min-height: 3.3rem; font-size: 1.45rem; padding: .4rem 2rem; }
.btn.small { min-height: 2.2rem; font-size: .9rem; }
.btn.reward { background: linear-gradient(#8e7cf0, #6c5ce7); box-shadow: 0 .3rem 0 #3f2fa6, inset 0 .12rem 0 rgba(255,255,255,.3); }
.btn.life { background: linear-gradient(#ff6b7a, #e0344a); box-shadow: 0 .3rem 0 #8a1526, inset 0 .12rem 0 rgba(255,255,255,.3); }
.btn.life em { display: inline-flex; align-items: center; gap: .15rem; font-style: normal; margin-left: .3rem; }
.btn.life em svg { width: 1.1rem; height: 1.1rem; }
.row { display: flex; gap: .7rem; justify-content: center; }
.row .btn { flex: 1; }
.iconbtn { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: .8rem; background: rgba(15, 26, 44, .55); box-shadow: 0 .2rem 0 rgba(0,0,0,.3); box-sizing: border-box; }
kbd { display: inline-block; min-width: 1.2rem; padding: .05rem .35rem; margin: 0 .08rem; border-radius: .3rem; background: #eef2f7; color: #1d2c46;
    font-family: inherit; font-weight: 900; font-size: .8rem; box-shadow: 0 .15rem 0 #8b97a8; text-align: center; }

/* ---------- menu ---------- */
.menu { flex-direction: column; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 40%, rgba(8,20,40,.35)); }
.title { display: flex; flex-direction: column; align-items: center; line-height: .92; margin-bottom: 1.1rem; transform: rotate(-2deg); }
.title span { font-weight: 900; letter-spacing: .04em; }
.title .t2 { font-size: 4.2rem; color: #fff; -webkit-text-stroke: .12rem #10213b; text-shadow: 0 .32rem 0 #10213b, 0 .5rem 1.2rem rgba(0,0,0,.3); }
.title .t3 { font-size: 1.15rem; color: #10213b; background: #ffcf3f; padding: .15rem .8rem; border-radius: .5rem; letter-spacing: .18em;
    box-shadow: 0 .25rem 0 #a45f00; margin-top: .45rem; transform: rotate(2deg); }
.mbtns { width: 22rem; display: flex; flex-direction: column; }
.mbtns .workshop { position: relative; background: linear-gradient(#7cc36a, #4f9a33); box-shadow: 0 .3rem 0 #2c6118, inset 0 .12rem 0 rgba(255,255,255,.3); }
.badge { display: none; position: absolute; right: -.4rem; top: -.5rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #ff4757; box-shadow: 0 0 0 .15rem #fff; }
.badge.on { display: block; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.25); } }
.mstats { display: flex; gap: 1.2rem; margin-top: .8rem; font-weight: 900; font-size: 1.2rem; text-shadow: 0 .12rem 0 rgba(0,0,0,.4); }
.mstats span { display: flex; align-items: center; gap: .35rem; background: rgba(15,26,44,.5); padding: .25rem .8rem; border-radius: 1rem; }
.mstats svg { width: 1.4rem; height: 1.4rem; }
.gear { position: absolute; right: 1rem; top: 1rem; }
.menu-mute { position: absolute; left: 1rem; top: 1rem; width: max(2.6rem, 48px); height: max(2.6rem, 48px); }
.rotate-tip { display: none; align-items: center; gap: .4rem; margin-top: .7rem; padding: .3rem .9rem .3rem .7rem; border-radius: 1rem;
    background: rgba(15,26,44,.62); font-weight: 800; font-size: 1rem; color: #fff; text-shadow: 0 .1rem 0 rgba(0,0,0,.4); }
.rotate-tip svg { width: 1.6rem; height: 1.6rem; }
body.portrait.touch .rotate-tip { display: flex; }

/* ---------- workshop ---------- */
.phead { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.workshop-play { flex-shrink: 0; min-height: 48px; margin: 0; padding: .4rem .8rem; font-size: .9rem; }
.tabs { flex: 1; display: flex; gap: .4rem; justify-content: center; }
.tab { padding: .45rem 1.1rem; border-radius: .7rem; font-weight: 900; font-size: 1rem; letter-spacing: .06em; color: #c8d6ea; background: rgba(0,0,0,.25); }
.tab.on { color: #4a2a00; background: linear-gradient(#ffcf3f, #f39c12); }
.wallet { display: flex; align-items: center; gap: .35rem; font-weight: 900; font-size: 1.2rem; background: rgba(0,0,0,.28); padding: .25rem .8rem; border-radius: 1rem; }
.wallet svg { width: 1.4rem; height: 1.4rem; }
.pbody { flex: 1; min-height: 0; position: relative; }
.tabc { display: none; height: 100%; }
.tabc.on { display: grid; }
.tabc.up.on { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: .6rem; }
.upc { background: rgba(0,0,0,.25); border-radius: .8rem; padding: .45rem; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 0; }
.upc .ic { width: 2.4rem; height: 2.4rem; }
.upc .nm { font-weight: 900; font-size: .95rem; margin-top: .15rem; }
.upc .ds { font-size: .68rem; color: #b8c7dd; line-height: 1.15; min-height: 1.6rem; }
.pips { display: flex; gap: .15rem; margin: .25rem 0; }
.pips i { width: .55rem; height: .5rem; border-radius: .15rem; background: rgba(255,255,255,.18); }
.pips i.on { background: #ffcf3f; box-shadow: 0 0 .3rem rgba(255, 207, 63, .6); }
.buy { margin-top: auto; display: flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: .6rem; font-weight: 900; font-size: .95rem;
    color: #4a2a00; background: linear-gradient(#ffcf3f, #f39c12); box-shadow: 0 .2rem 0 #a45f00; }
.buy svg { width: 1rem; height: 1rem; }
.buy.poor { filter: grayscale(.8) brightness(.8); }
.buy.maxed { background: #3f5b85; color: #c8d6ea; box-shadow: none; }
.tabc.arrows.on { grid-template-columns: 15rem 1fr; gap: .8rem; }
.aleft { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.lotitle { font-weight: 900; font-size: .8rem; letter-spacing: .1em; color: #b8c7dd; }
.lorow { display: flex; gap: .4rem; }
.lslot { position: relative; flex: 1; height: 4.2rem; border-radius: .7rem; background: rgba(0,0,0,.3); padding: .35rem; box-sizing: border-box; border: .15rem solid transparent; color: #fff; }
.lslot.sel { border-color: #ffcf3f; background: rgba(255, 207, 63, .15); }
.lslot em { position: absolute; left: .25rem; top: .1rem; font-style: normal; font-weight: 900; font-size: .8rem; }
.lslot.locked { opacity: .55; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .5rem; }
.lslot.locked svg { width: 1.4rem; height: 1.4rem; }
.lslot.fixed { opacity: .85; }
.lslot .inf { position: absolute; right: .25rem; bottom: .2rem; width: 1.1rem; height: 1.1rem; }
.lslot .empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.8rem; font-weight: 900; color: #8ea3bf; }
.acell .lk.can { color: #ffcf3f; }
.adesc .btn { margin-top: .5rem; min-height: 2.2rem; font-size: .9rem; width: 100%; }
.btn.poor { filter: grayscale(.8) brightness(.8); }
.adesc { background: rgba(0,0,0,.25); border-radius: .8rem; padding: .6rem .7rem; flex: 1; min-height: 0; overflow: hidden; }
.an { font-weight: 900; font-size: 1.2rem; }
.ad { font-size: .8rem; color: #c8d6ea; margin: .2rem 0 .45rem; line-height: 1.2; }
.st { display: flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 900; margin: .18rem 0; }
.st span:first-child { width: 3.4rem; color: #b8c7dd; }
.sbar { flex: 1; height: .45rem; border-radius: .3rem; background: rgba(255,255,255,.12); overflow: hidden; }
.sbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffcf3f, #ff7a1a); }
.ah { font-size: .7rem; color: #8ea3bf; margin-top: .4rem; }
.agrid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: .35rem; min-height: 0; }
.acell { position: relative; border-radius: .6rem; background: rgba(0,0,0,.28); padding: .3rem; box-sizing: border-box; border: .13rem solid transparent; color: #fff; min-height: 0; }
.acell.eq { background: rgba(255, 207, 63, .18); }
.acell.sel { border-color: #fff; }
.acell em { position: absolute; right: .15rem; top: 0; font-style: normal; font-weight: 900; font-size: .75rem; color: #ffcf3f; }
.acell.locked svg { opacity: .32; filter: grayscale(.6); }
.acell .lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .1rem; font-weight: 900; font-size: .75rem; }
.acell .lk svg { width: .9rem; height: .9rem; opacity: 1; filter: none; }

/* ---------- boons ---------- */
.boon .panel { width: 42rem; align-items: center; }
.boon h2 { color: #ffcf3f; margin-bottom: .2rem; }
.bsub { font-weight: 800; color: #c8d6ea; margin-bottom: .7rem; }
.bcards { display: flex; gap: .7rem; width: 100%; }
.bcard { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: .8rem .6rem; border-radius: .9rem;
    background: linear-gradient(#3a567f, #283e60); border: .18rem solid #5b7aa6; color: #fff; box-shadow: 0 .3rem 0 #16243a; transition: transform .08s; }
.bcard:hover, .bcard:focus-visible { transform: translateY(-.25rem); border-color: #ffcf3f; }
.bcard .ic { width: 3rem; height: 3rem; }
.bcard .nm { font-weight: 900; font-size: 1.1rem; }
.bcard .ds { font-size: .8rem; color: #c8d6ea; line-height: 1.2; }
.bcard kbd { position: absolute; top: .35rem; left: .35rem; }

.tabc.medals.on { grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; align-content: start; gap: .6rem; overflow-y: auto; overscroll-behavior: contain; }
.medal { display: flex; align-items: center; gap: .6rem; padding: .65rem; border-radius: .8rem; background: rgba(0,0,0,.25); min-width: 0; }
.medal .ic { width: 2.5rem; height: 2.5rem; flex-shrink: 0; opacity: .55; }
.medal.earned { box-shadow: inset 0 0 0 .12rem rgba(255,207,63,.65); }
.medal.earned .ic { opacity: 1; }
.medal-copy { flex: 1; min-width: 0; }
.medal .nm { font-size: 1rem; font-weight: 900; }
.medal .ds { font-size: .75rem; color: #c8d6ea; line-height: 1.2; margin: .25rem 0; }
.medal-progress { height: .3rem; border-radius: .3rem; overflow: hidden; background: rgba(255,255,255,.15); }
.medal-progress i { display: block; height: 100%; background: #ffcf3f; }
.medal-status { display: flex; justify-content: space-between; gap: .2rem; margin-top: .25rem; font-size: .75rem; font-weight: 900; }
.medal-status span, .medal-reward { display: inline-flex; align-items: center; gap: .15rem; color: #ffcf3f; }
.medal-status svg { width: 1rem; height: 1rem; }
.workshop .tab { padding: .45rem .7rem; }

#hud .journey { display: flex; align-items: center; justify-content: center; gap: .2rem; margin-top: .25rem; }
#hud .journey span { font-weight: 900; font-size: .6rem; color: #fff4d6; text-shadow: 0 .1rem 0 #10213b; margin-right: .15rem; }
#hud .journey i { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(15,26,44,.5); border: .08rem solid rgba(255,255,255,.5); }
#hud .journey i.on { background: #ffcf3f; border-color: #ffcf3f; }
#hud .journey i:last-child { width: .9rem; height: .9rem; background: none; border: 0; opacity: .6; }
#hud .journey i.on:last-child { opacity: 1; }
#hud .run-boons { position: absolute; left: calc(.8rem + env(safe-area-inset-left)); top: calc(4.6rem + env(safe-area-inset-top)); display: flex; align-items: center; gap: .25rem; }
#hud .run-boons span { width: 1.7rem; height: 1.7rem; padding: .2rem; border-radius: .6rem; background: rgba(15,26,44,.6); border: .1rem solid rgba(255,207,63,.65); }
#hud .run-boons b { font-size: .7rem; text-shadow: 0 .1rem 0 #10213b; }
.gift-marker { position: absolute; top: 0; left: 0; pointer-events: none; }
.gift-label { position: absolute; left: 0; bottom: 1.9rem; transform: translateX(-50%); display: flex; align-items: center; gap: .25rem; white-space: nowrap; font-size: .8rem; font-weight: 900; background: rgba(15,26,44,.85); border: .1rem solid #ffcf3f; border-radius: .65rem; padding: .2rem .4rem; }
.gift-label svg { width: 1.25rem; height: 1.25rem; }
.gift-ring { position: absolute; left: -1.5rem; top: -1.5rem; width: 3rem; height: 3rem; border-radius: 50%; border: .12rem dashed rgba(255,207,63,.9); box-sizing: border-box; animation: gift-pulse 1.5s infinite; }
@keyframes gift-pulse { 50% { transform: scale(1.12); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .gift-ring { animation: none; } }

/* ---------- pause / settings / over ---------- */
.pause .panel .btn { margin: .3rem 0; }
.trow { display: flex; gap: .6rem; justify-content: center; margin-top: .4rem; }
.tog { width: 2.8rem; height: 2.8rem; padding: .55rem; border-radius: .8rem; background: #3f5b85; box-shadow: 0 .2rem 0 #243552; position: relative; box-sizing: border-box; }
.tog.off { opacity: .45; }
.tog.off::after { content: ""; position: absolute; left: 20%; right: 20%; top: 48%; height: .22rem; background: #ff4757; transform: rotate(-40deg); border-radius: .1rem; }
.srows { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.srow { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1rem; }
.sv { min-width: 7rem; padding: .35rem .6rem; border-radius: .6rem; font-weight: 900; font-size: .85rem; color: #c8d6ea; background: rgba(0,0,0,.3); }
.sv.on { color: #4a2a00; background: linear-gradient(#ffcf3f, #f39c12); }
.over .panel { width: 30rem; align-items: center; }
.ot { font-size: 2.6rem; color: #ffdede; }
.ostats { display: flex; gap: .8rem; width: 100%; justify-content: center; }
.ostats div { flex: 1; display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.25); border-radius: .8rem; padding: .35rem; }
.ostats small { font-size: .7rem; letter-spacing: .1em; color: #b8c7dd; font-weight: 900; }
.ostats b { font-size: 1.5rem; }
.obest { font-weight: 800; color: #ffcf3f; margin: .35rem 0 .2rem; min-height: 1rem; }
.ounl .ul { width: 100%; text-align: center; font-weight: 900; color: #ffcf3f; font-size: .9rem; letter-spacing: .08em; }
.ua { display: flex; align-items: center; gap: .3rem; background: rgba(255, 207, 63, .15); padding: .15rem .5rem; border-radius: .6rem; font-size: .85rem; }
.ua svg { width: 1.8rem; height: 1.8rem; }
.obtns { display: flex; flex-direction: column; width: 20rem; margin-top: .2rem; }
.orow { display: flex; gap: .6rem; width: 20rem; }
.orow .btn { flex: 1; }
.twop .panel { width: 40rem; }
.cols { display: flex; gap: .8rem; }
.pc { flex: 1; background: rgba(0,0,0,.25); border-radius: .8rem; padding: .6rem .8rem; font-size: .85rem; line-height: 1.5; }
.pc.p1 h3 { color: #6cb6ff; }
.pc.p2 h3 { color: #ffb366; }
.pc p { margin: .2rem 0; }
.pc svg { display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; }
.pc .alt { color: #b8c7dd; font-size: .75rem; }
.tnote { text-align: center; font-size: .8rem; color: #b8c7dd; margin: .5rem 0 .2rem; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .pp { position: absolute; top: calc(.6rem + env(safe-area-inset-top)); left: calc(.8rem + env(safe-area-inset-left)); width: 15rem; }
#hud .pp.p2 { left: auto; right: calc(4rem + env(safe-area-inset-right)); }
#hud.two .pp.p2 { right: calc(4rem + env(safe-area-inset-right)); }
#hud .lives { display: flex; gap: .2rem; height: 1.2rem; margin-bottom: .2rem; }
#hud .wv { display: flex; flex-direction: column; align-items: center; line-height: .95; }
#hud .wv small { font-weight: 900; font-size: .75rem; letter-spacing: .2em; color: #ffe08a; text-shadow: 0 .1rem 0 #10213b; }
#hud .wv .k { font-weight: 900; font-size: 2.4rem; -webkit-text-stroke: .08rem #10213b; text-shadow: 0 .2rem 0 #10213b; }
#hud .sub .ft-ic { width: 1.2rem; height: 1.2rem; }
#hud .sub .kl { margin-right: .5rem; color: #e8eef7; }
#hud .windg { margin-top: .2rem; }
#hud .wa { display: flex; align-items: center; gap: .25rem; font-weight: 900; font-size: .85rem; background: rgba(15, 26, 44, .5); padding: .12rem .6rem; border-radius: 1rem; }
#hud .wa svg { width: 1.1rem; height: 1.1rem; }
#hud .wa b { letter-spacing: -.1em; color: #bff4ff; }
#hud .wa.mid b { color: #ffe08a; }
#hud .wa.strong b { color: #ff8a7a; }
#hud .lives svg { width: 1.2rem; height: 1.2rem; }
#hud .bar { position: relative; height: 1.15rem; border-radius: .6rem; background: rgba(8, 14, 26, .6); border: .14rem solid rgba(8, 14, 26, .85); overflow: hidden; margin-bottom: .25rem; box-sizing: border-box; }
#hud .bar i { position: absolute; inset: 0; transform-origin: 0 50%; border-radius: .45rem; will-change: transform; }
#hud .hp i { background: linear-gradient(#7ee36a, #3fae2f); }
#hud .pp.low .hp i { background: linear-gradient(#ff7a7a, #e0344a); animation: blink .6s infinite; }
@keyframes blink { 50% { opacity: .6; } }
#hud .hp b { position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); font-size: .75rem; font-weight: 900; text-shadow: 0 .08rem 0 rgba(0,0,0,.6); }
#hud .hp u { position: absolute; left: 0; right: 0; top: 0; height: 38%; transform-origin: 0 50%; background: linear-gradient(#bff4ff, #4fc3ff); border-radius: .45rem .45rem 0 0; will-change: transform; transform: scaleX(0); }
#hud .pp.dead { opacity: .45; }
#hud .p2 .hp i { background: linear-gradient(#ffc27a, #f0932b); }
#hud .center { position: absolute; top: calc(.3rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#hud .sub { display: flex; align-items: center; gap: .3rem; font-weight: 900; font-size: 1rem; text-shadow: 0 .12rem 0 rgba(0,0,0,.5); }
#hud .bossbar { display: none; width: 18rem; margin-top: .25rem; text-align: center; }
#hud .bossbar.on { display: block; }
#hud .bossbar .bn { font-weight: 900; font-size: .8rem; letter-spacing: .12em; color: #ffdede; text-shadow: 0 .1rem 0 #000; }
#hud .bossbar .bar i { background: linear-gradient(#ff6b6b, #c0182c); }
#hud .pausebtn { position: absolute; top: calc(.6rem + env(safe-area-inset-top)); right: calc(.8rem + env(safe-area-inset-right)); width: 2.6rem; height: 2.6rem; padding: .6rem;
    border-radius: .8rem; background: rgba(15, 26, 44, .55); box-sizing: border-box; }
#hud .slots { position: absolute; bottom: calc(.7rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; }
#hud.two .slots.s1 { left: calc(.8rem + env(safe-area-inset-left)); transform: none; }
#hud.two .slots.s2 { left: auto; right: calc(.8rem + env(safe-area-inset-right)); transform: none; }
#hud:not(.duel) .slots.s2 { display: none; }
#hud .slot { position: relative; width: 3.4rem; height: 3.4rem; border-radius: .8rem; background: rgba(15, 26, 44, .6); padding: .35rem; box-sizing: border-box; border: .15rem solid rgba(255,255,255,.15); }
#hud .slot.on { border-color: #ffcf3f; background: rgba(60, 45, 10, .7); box-shadow: 0 0 .6rem rgba(255, 207, 63, .5); }
#hud .slot em { position: absolute; left: .2rem; top: .05rem; font-style: normal; font-weight: 900; font-size: .7rem; color: #fff; }
#hud .slot .cnt { position: absolute; right: .15rem; bottom: .05rem; min-width: .9rem; height: .95rem; font-weight: 900; font-size: .75rem; color: #fff; text-shadow: 0 .08rem 0 #000; }
#hud .slot .cnt svg { width: .95rem; height: .95rem; }
#hud .slot.empty { opacity: .4; filter: grayscale(1); }
body.touch #hud .slot em { display: none; }
#hud .slot.cyc { width: auto; display: flex; align-items: center; gap: .3rem; padding: .3rem .6rem; font-weight: 900; font-size: .8rem; }
#hud .slot.cyc svg { width: 2.4rem; height: 2.4rem; }
#hud .slot.cyc svg:last-child { width: 1rem; height: 1rem; opacity: .7; }
#hud .jumpbtn { display: none; position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom)); right: calc(1.2rem + env(safe-area-inset-right)); width: 4.4rem; height: 4.4rem; padding: 1rem;
    border-radius: 50%; background: rgba(15, 26, 44, .5); border: .18rem solid rgba(255,255,255,.35); box-sizing: border-box; touch-action: none; }
body.touch #hud .jumpbtn.j1 { display: block; }
body.touch #hud.two .jumpbtn.j1 { right: auto; left: calc(1.2rem + env(safe-area-inset-left)); bottom: calc(5rem + env(safe-area-inset-bottom)); }
body.touch #hud.two .jumpbtn.j2 { display: block; bottom: calc(5rem + env(safe-area-inset-bottom)); }
#hud .jumpbtn:active { background: rgba(255, 207, 63, .5); }

/* aim indicator (touch) */
.aim { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
.aim > div { will-change: transform; }
.aim.on { display: block; }
.aim .ring { position: absolute; left: -1.6rem; top: -1.6rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: .18rem solid rgba(255,255,255,.75); box-sizing: border-box; }
.aim .ring i { position: absolute; inset: .12rem; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(.15); }
.aim .ring i.full { background: rgba(126, 227, 106, .7); }
.aim .ring i.orange { background: rgba(255, 176, 48, .8); }
.aim .ring i.red { background: rgba(255, 74, 74, .85); animation: blink .25s infinite; }
.aim .line { position: absolute; left: 0; top: -1px; width: 1px; height: 2px; background: rgba(255,255,255,.7); transform-origin: 0 50%; }
.aim .dot { position: absolute; left: -.45rem; top: -.45rem; width: .9rem; height: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .85); }

/* floating texts */
#texts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ft { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.15rem; white-space: nowrap; opacity: 0; will-change: transform, opacity;
    -webkit-text-stroke: .06rem rgba(20, 10, 10, .9); text-shadow: 0 .12rem 0 rgba(0,0,0,.6); }
.ft.go { animation: ft .95s ease-out forwards; }
@keyframes ft { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 30% { transform: translate(-50%, -100%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(.95); } }
.ft.dmg { color: #fff; }
.ft.crit { color: #ffcf3f; font-size: 1.6rem; }
.ft.hs { color: #ff5a4a; font-size: 1.35rem; letter-spacing: .05em; }
.ft.hurt { color: #ff6b6b; }
.ft.heal { color: #7ee36a; }
.ft.stam { color: #7fd8ff; }
.ft.gold { color: #ffcf3f; }
.ft.info { color: #e8eef7; font-size: .95rem; }
.ft.feather { color: #fff4d6; font-size: 1.3rem; }
.ft.ward { color: #9ff3ff; }
.ft.shock { color: #bff4ff; font-size: 1.1rem; }

/* banner */
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; }
#banner.go { animation: banner 2.1s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
#banner .t { font-size: 3.3rem; font-weight: 900; letter-spacing: .05em; -webkit-text-stroke: .12rem #10213b; text-shadow: 0 .3rem 0 #10213b, 0 0 1rem rgba(0,0,0,.3); }
#banner .s { font-size: 1.3rem; font-weight: 900; text-shadow: 0 .15rem 0 #10213b; }
#banner.boss .t { color: #ff6b6b; }
#banner.win .t { color: #ffcf3f; }
#banner.round .t { color: #fff; }

/* toasts */
#toasts { position: absolute; top: calc(8rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .4rem; background: rgba(15, 26, 44, .78); padding: .35rem .9rem; border-radius: 1rem; font-weight: 900; font-size: .9rem; letter-spacing: .04em;
    animation: toast 2.6s ease-out forwards; white-space: nowrap; }
.toast svg { width: 1.6rem; height: 1.6rem; }
.toast.good { color: #7ee36a; }
.toast.bad { color: #ff8a8a; }
.toast.unlock { color: #ffcf3f; background: rgba(60, 40, 0, .85); animation-duration: 3.2s; }
.toast.info { color: #fff; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-.6rem); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* hints */
#hint { position: absolute; left: 50%; bottom: calc(5.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; pointer-events: none;
    background: rgba(15, 26, 44, .75); padding: .5rem 1rem; border-radius: 1rem; font-weight: 900; font-size: 1rem; text-align: center;
    width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box; }
#hint.on { display: block; animation: fadein .3s; }
#hint b { color: #ffcf3f; }
.gesture svg { display: block; width: 12rem; height: 4.3rem; margin: 0 auto .15rem; overflow: visible; }
.gesture-track { fill: none; stroke: #ffcf3f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gesture-hand { fill: white; stroke: #162338; stroke-width: 2.5; stroke-linejoin: round; }
.gesture-pulse { fill: none; stroke: #ffcf3f; stroke-width: 3; transform-origin: 158px 22px; animation: gesture-pulse 1s infinite; }
.gesture.drag .gesture-hand { animation: gesture-drag 1.8s infinite; }
.gesture.direct.drag .gesture-hand { animation: gesture-forward 1.8s infinite; }
.gesture.direct .gesture-pulse { transform-origin: 68px 72px; }
.gesture.hold .gesture-track, .gesture.release .gesture-track { opacity: .25; }
.gesture.release .gesture-hand { animation: gesture-release 1s infinite; }
@keyframes gesture-drag { 0%, 15% { transform: translate(0,0); } 70%, 90% { transform: translate(-90px,25px); } 100% { transform: translate(0,0); } }
@keyframes gesture-forward { 0%, 15% { transform: translate(0,0); } 70%, 90% { transform: translate(90px,-25px); } 100% { transform: translate(0,0); } }
@keyframes gesture-pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes gesture-release { 0%, 20% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-16px); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .gesture * { animation: none !important; } }

/* ---------- portrait ---------- */
body.portrait .panel.wide { width: 28rem; height: 46rem; max-height: none; }
body.portrait .panel { max-height: 48rem; }
body.portrait .tabc.up.on { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
body.portrait .workshop .phead { flex-wrap: wrap; gap: .5rem; }
body.portrait .workshop .tabs { flex-basis: 100%; order: 3; }
body.portrait .workshop .wallet { margin-left: auto; }
body.portrait .tabc.medals.on { grid-template-columns: 1fr; }
body.portrait .bcards { flex-direction: column; }
body.portrait .boon .panel { width: 27rem; }
body.portrait .tabc.arrows.on { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body.portrait .agrid { grid-template-columns: repeat(5, 1fr); }
body.portrait .adesc { display: none; }
body.portrait .twop .panel { width: 27rem; }
body.portrait .cols { flex-direction: column; }
body.portrait .over .panel { width: 27rem; }
body.portrait #hud .pp { width: 11rem; }
body.portrait #hud .wv .k { font-size: 2rem; }
body.portrait #hud .center { top: calc(3.8rem + env(safe-area-inset-top)); }
body.portrait #toasts { top: calc(11.6rem + env(safe-area-inset-top)); }

/* First-person aiming: the existing gold/white feedback, centred on the direct aim point. */
.fps-reticle { position: fixed; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; z-index: 4; filter: drop-shadow(0 1px 2px #172838); }
.fps-reticle[hidden] { display: none; }
.fps-reticle svg { width: 100%; height: 100%; fill: none; stroke: #fff4d2; stroke-width: 2; }
.fps-reticle .rim { stroke: #243247; stroke-width: 5; opacity: .75; }
.fps-reticle .charge { stroke: #ffcd55; stroke-width: 4; stroke-dasharray: 145; stroke-dashoffset: 145; transform: rotate(-90deg); transform-origin: center; }
.fps-reticle .dot { fill: #fff4d2; stroke: none; }
.fps-reticle.locked path, .fps-reticle.locked .dot { stroke: #ffcd55; }
.fps-hand { display: inline-block; width: 2.6rem; height: 2.6rem; vertical-align: middle; animation: gift-pulse 1.2s ease-in-out infinite; }

.fps-reticle.blocked { opacity: .45; }
.fps-reticle.frozen svg { stroke: #a4e8ff; }
.fps-reticle.hurt svg { stroke: #ff6b6b; }
@media (prefers-reduced-motion: reduce) { .fps-hand { animation: none; } }