/* vindecatorul.css — "Vindecătorul": a calm 3D Orthodox healing game. Stage + HUD + overlays, vin- prefix.
   Structure mirrors css/arcasa.css + css/fotbal.css conventions. */

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

/* ---- overlays (menu / end) ---- */
.vin-overlay { position: absolute; inset: 0; z-index: 9; display: flex; align-items: flex-start; justify-content: center; padding: 1rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: radial-gradient(ellipse at center, rgba(24,20,40,0.82), rgba(8,8,14,0.96)); color: #fff; text-align: center; }
.vin-card { max-width: 560px; width: 100%; margin: auto 0; }
.vin-card h3 { font-weight: 800; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.vin-card .vin-how { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0.8rem 0; }
.vin-card .vin-how span { background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.vin-note { font-size: 0.8rem; color: #b7a6d6; margin-top: 0.5rem; }
.vin-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: 30vh; overflow-y: auto; }
.vin-keys-title { font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; color: #ffd77a; margin: 0.2rem 0 0.3rem; }
.vin-keys ul { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.vin-keys li { font-size: 0.82rem; color: #d7dde6; padding: 0.15rem 0; }
.vin-keys b { color: #fff; }
#vin-end .vin-score { font-size: 1.35rem; font-weight: 800; color: #ffd77a; margin: 0.4rem 0; }
#vin-end .vin-end-emoji { font-size: 3rem; line-height: 1; }

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

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

/* round progress pips (end/round screens) */
#vin-rounds { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; margin: 0.4rem 0 0.7rem; }
#vin-rounds b { font-size: 0.62rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px #000; margin-right: 4px; text-transform: uppercase; }
.vin-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,14,26,0.72); color: #8a84a3; }
.vin-pip.done { background: rgba(150,110,230,0.85); color: #150a2c; }
.vin-pip.cur { background: #ffd77a; color: #3a2c00; box-shadow: 0 0 8px rgba(255,215,122,0.85); }
.vin-pip.lock { opacity: 0.55; }

/* divine-energy bar (top-right, under fullscreen btn) */
#vin-energy-wrap { position: absolute; top: 10px; right: 62px; width: 160px; }
#vin-energy-wrap small { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: #cdb8ff; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
#vin-energy-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); }
#vin-energy { height: 100%; width: 100%; background: linear-gradient(90deg, #7b6cff, #4fc3f7, #ffe08a); transition: width 0.12s linear; }
#vin-energy.low { background: linear-gradient(90deg, #e74c3c, #ff8a5b); }

/* healer health (under the energy bar) — demons leech it */
#vin-health-wrap { position: absolute; top: 56px; right: 62px; width: 160px; }
#vin-health-wrap small { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: #ffb4b4; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
#vin-health-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); }
#vin-health { height: 100%; width: 100%; background: linear-gradient(90deg, #e74c3c, #ff8a5b); transition: width 0.15s ease-out; }

/* channel progress ring over the current target (billboard done in 3D; this is the on-screen hint) */
#vin-flash { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 1.6rem; color: #ffe08a; text-shadow: 0 2px 8px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; text-align: center; }
#vin-flash.vin-pop { animation: vin-pop 1.0s ease-out; }
@keyframes vin-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }

/* prompt (recharge at altar / target hint) */
#vin-prompt { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); pointer-events: none;
    background: rgba(80,60,150,0.82); color: #fff; font-weight: 700; padding: 0.45rem 1rem; border-radius: 12px; font-size: 0.85rem; opacity: 0; transition: opacity 0.15s; }
#vin-prompt.on { opacity: 1; }

/* soft holy vignette while channelling */
#vin-aura { position: absolute; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 90px 22px rgba(255,224,138,0); transition: box-shadow 0.2s; }

/* HUD buttons */
.vin-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; }
.vin-btn:active { transform: scale(0.92); }
.vin-btn.on { background: rgba(150,110,230,0.75); color: #150a2c; }
#btn-vin-fs { top: 10px; right: 10px; }
#btn-vin-mute { top: 60px; right: 10px; }

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

/* desktop controls legend */
#vin-help { position: absolute; left: 10px; bottom: 10px; pointer-events: none; max-width: 340px;
    background: rgba(16,14,26,0.72); color: #dfe6ea; font-size: 0.72rem; line-height: 1.4; padding: 0.4rem 0.65rem; border-radius: 9px; }
#vin-help b { color: #fff; }

/* ---- mobile touch controls ---- */
#vin-touch { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
/* virtual joystick (left zone) — positioned at touch origin by JS */
#vin-joy { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; display: none; pointer-events: none; }
#vin-joy.on { display: block; }
#vin-joy-base { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.10); border: 2px solid rgba(255,255,255,0.22); }
#vin-joy-knob { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(180,150,255,0.4); border: 2px solid rgba(255,255,255,0.4); }
/* action buttons (right zone) */
.vin-ab { position: absolute; pointer-events: auto; border: 0; border-radius: 50%; color: #fff; }
.vin-ab:active { transform: scale(0.9); }
.vin-ab small { display: block; font-size: 0.5rem; letter-spacing: 0.08em; margin-top: 1px; }
#vin-b-heal { right: 38px; bottom: 40px; width: 96px; height: 96px; font-size: 2rem; background: rgba(255,200,90,0.55); }
#vin-b-recharge { right: 142px; bottom: 60px; width: 70px; height: 70px; font-size: 1.35rem; background: rgba(120,110,230,0.5); }
#vin-b-send { right: 150px; bottom: 140px; width: 62px; height: 62px; font-size: 1.2rem; background: rgba(255,215,122,0.5); }
#vin-b-advise { right: 44px; bottom: 150px; width: 62px; height: 62px; font-size: 1.2rem; background: rgba(202,162,74,0.6); }

/* short viewports (mobile fullscreen landscape): tighten the menu */
@media (max-height: 560px) {
    .vin-overlay { padding: 0.6rem; align-items: flex-start; }
    .vin-card h3 { margin-bottom: 0.15rem; font-size: 1.15rem; }
    .vin-keys { max-height: 34vh; }
}