/* arcasa.css — "Arcașa": first-person low-poly archery. Stage + HUD + overlays, arc- prefix.
   Structure mirrors css/oras.css / orice-oras HUD conventions. */

#arc-stage { position: relative; width: 100%; height: 80vh; min-height: 440px; overflow: hidden; border-radius: 10px; background: #10161f; }
#arc-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: none; }
.arc-hidden { display: none !important; }

/* ---- overlays (menu / end) ---- */
.arc-overlay { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: radial-gradient(ellipse at center, rgba(14,20,30,0.82), rgba(8,10,14,0.96)); color: #fff; text-align: center; }
.arc-card { max-width: 540px; width: 100%; }
.arc-card h3 { font-weight: 800; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.arc-card .arc-how { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0.9rem 0; }
.arc-card .arc-how span { background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.arc-note { font-size: 0.8rem; color: #9aa3af; margin-top: 0.5rem; }
.arc-keys { text-align: left; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 0.7rem 0.9rem; margin: 0.6rem 0; max-height: 34vh; overflow-y: auto; }
.arc-keys-title { font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; color: #ffd34d; margin: 0.2rem 0 0.3rem; }
.arc-keys ul { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.arc-keys li { font-size: 0.82rem; color: #d7dde6; padding: 0.15rem 0; }
.arc-keys b { color: #fff; }
#arc-end .arc-score { font-size: 1.35rem; font-weight: 800; color: #ffd34d; margin: 0.4rem 0; }
#arc-end .arc-end-emoji { font-size: 3rem; line-height: 1; }

/* upgrade shop */
.arc-shop { margin: 0.5rem 0 0.9rem; }
.arc-coins-line { font-size: 0.9rem; color: #ffd34d; margin-bottom: 0.5rem; }
.arc-shop-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.arc-up { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 0.6rem 0.7rem; border: 0; border-radius: 12px; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
.arc-up i { font-size: 1.3rem; margin-bottom: 2px; }
.arc-up b { font-size: 0.9rem; }
.arc-up small { font-size: 0.72rem; color: #cfe0ff; }
.arc-up:hover:not([disabled]) { background: rgba(46,204,113,0.32); }
.arc-up:active:not([disabled]) { transform: scale(0.94); }
.arc-up[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- HUD (click-through except buttons) ---- */
#arc-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.arc-box { position: absolute; background: rgba(16,20,26,0.8); color: #fff; padding: 0.35rem 0.8rem; border-radius: 10px; font-weight: 700; }
.arc-box small { display: block; font-size: 0.6rem; letter-spacing: 0.1em; color: #9aa3af; }
#arc-enemies { top: 10px; left: 10px; }
#arc-round-box { top: 58px; left: 10px; }
#arc-coins-box { top: 106px; left: 10px; color: #ffd34d; }
#arc-score-box { top: 10px; left: 50%; transform: translateX(-50%); background: rgba(40,110,180,0.85); }

/* round progress pips (shown on end/round screens, not during gameplay) */
#arc-rounds { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; margin: 0.4rem 0 0.7rem; }
#arc-rounds b { font-size: 0.62rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px #000; margin-right: 4px; text-transform: uppercase; }
.arc-pip { width: 19px; height: 19px; border-radius: 6px; font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; background: rgba(16,20,26,0.72); color: #8a94a3; }
.arc-pip.done { background: rgba(46,204,113,0.85); color: #06281c; }
.arc-pip.cur { background: #ffd34d; color: #3a2c00; box-shadow: 0 0 8px rgba(255,211,77,0.85); }
.arc-pip.lock { opacity: 0.55; }

/* health bar (top-right, under fullscreen btn) */
#arc-health-wrap { position: absolute; top: 10px; right: 62px; width: 150px; }
#arc-health-wrap small { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: #ffb4b4; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
#arc-health-track { width: 100%; height: 14px; background: rgba(0,0,0,0.5); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
#arc-health { height: 100%; width: 100%; background: linear-gradient(90deg, #e74c3c, #ff8a5b); transition: width 0.15s ease-out; }

/* draw-power meter (bottom-center) */
#arc-power-wrap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(52%, 360px); opacity: 0; transition: opacity 0.12s; }
#arc-power-wrap.arc-on { opacity: 1; }
#arc-power-track { width: 100%; height: 12px; background: rgba(0,0,0,0.5); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
#arc-power { height: 100%; width: 0%; background: linear-gradient(90deg, #2ee6a6, #ffd34d, #e74c3c); }

/* center reticle */
#arc-reticle { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none; }
#arc-reticle::before, #arc-reticle::after { content: ''; position: absolute; background: rgba(255,255,255,0.85); box-shadow: 0 0 2px rgba(0,0,0,0.7); }
#arc-reticle::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#arc-reticle::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
#arc-reticle .arc-dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #2ee6a6; transform: translate(-50%, -50%); }

/* execution prompt (last girl) */
#arc-exec { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); pointer-events: auto; cursor: pointer;
    background: rgba(183,20,60,0.92); color: #fff; font-weight: 800; letter-spacing: 0.03em; padding: 0.6rem 1.2rem; border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5); animation: arc-execpulse 0.9s ease-in-out infinite; }
#arc-exec b { color: #ffd34d; }
/* detonate prompt (sticky bombs are planted) — sits just above the execute prompt so both can show */
#arc-detonate { position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%); pointer-events: auto; cursor: pointer;
    background: rgba(230,126,34,0.94); color: #fff; font-weight: 800; letter-spacing: 0.03em; padding: 0.55rem 1.15rem; border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5); animation: arc-execpulse 0.9s ease-in-out infinite; }
#arc-detonate b { color: #fff2c2; }
#arc-cont { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); pointer-events: none;
    background: rgba(0,0,0,0.6); color: #fff; font-weight: 700; padding: 0.5rem 1.1rem; border-radius: 10px;
    animation: arc-execpulse 1.1s ease-in-out infinite; }
@keyframes arc-execpulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }

/* hit / headshot flash */
#arc-flash { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 1.6rem; color: #ffd34d; text-shadow: 0 2px 8px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; }
#arc-flash.arc-pop { animation: arc-pop 0.9s ease-out; }
@keyframes arc-pop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }

/* Viață strength-aura vignette (opacity set per health level in applyItemVisuals) */
#arc-aura { position: absolute; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 80px 18px rgba(255,201,92,0); transition: box-shadow 0.3s; }

/* damage vignette when the player is hit */
#arc-hurt { position: absolute; inset: 0; pointer-events: none; z-index: 5; box-shadow: inset 0 0 120px 30px rgba(200,30,30,0.75); opacity: 0; }
#arc-hurt.arc-hit { animation: arc-hurt 0.5s ease-out; }
@keyframes arc-hurt { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* HUD buttons */
.arc-btn { position: absolute; pointer-events: auto; border: 0; border-radius: 8px; background: rgba(0,0,0,0.55); color: #fff; padding: 0; width: 44px; height: 44px; font-size: 1.05rem; cursor: pointer; }
.arc-btn:active { transform: scale(0.92); }
.arc-btn.on { background: rgba(46,204,113,0.75); color: #06281c; }
#btn-arc-fs { top: 10px; right: 10px; }
#btn-arc-mute { top: 60px; right: 10px; }
#btn-arc-slow { top: 110px; right: 10px; }

.arc-attrib { position: absolute; bottom: 6px; right: 8px; font-size: 0.62rem; color: rgba(255,255,255,0.55); z-index: 6; }

/* mobile touch controls */
#arc-touch { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.arc-tb { position: absolute; pointer-events: auto; width: 80px; height: 80px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,0.18); color: #fff; font-size: 1.6rem; }
.arc-tb:active { transform: scale(0.9); background: rgba(46,204,113,0.4); }
#arc-t-leanL { left: 18px; bottom: 120px; }
#arc-t-leanR { left: 110px; bottom: 120px; }
#arc-t-moveL { left: 18px; bottom: 28px; }
#arc-t-moveR { left: 110px; bottom: 28px; }
.arc-tb-lean { background: rgba(46,140,220,0.34); }
.arc-tb-shield { left: 24px; bottom: 214px; width: 88px; height: 88px; background: rgba(183,140,60,0.44); font-size: 1.8rem; }
.arc-tb-bomb { left: 120px; bottom: 220px; width: 76px; height: 76px; background: rgba(230,126,34,0.5); font-size: 1.65rem; }