/* Vilagjaro game styles */
/* Hide footer so the page doesn't scroll during game */
.main:has([game-page="game"].vjr-game-page:not(.hide)) .game-footer{display:none}
.main:has([game-page="game"].vjr-game-page:not(.hide)){overflow:hidden}
.game-content:has([game-page="game"].vjr-game-page:not(.hide)){max-width:100%;width:100%;margin:0 !important;padding:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
[game-page="game"].vjr-game-page{position:relative;display:flex;flex-direction:column;width:100%;flex:1;min-height:0;overflow:hidden;background:#0f172a}
.vjr-game-page .vjr-map-loader{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0f172a}
.vjr-game-page .vjr-map-loader.hide{display:none}
.vjr-spinner{width:40px;height:40px;border:3px solid var(--overlay-border);border-top-color:#38bdf8;border-radius:50%;animation:vjr-spin 0.8s linear infinite}
@keyframes vjr-spin{to{transform:rotate(360deg)}}
.vjr-hud{display:flex;align-items:center;justify-content:space-between;padding:8px max(16px,calc((100% - 860px)/2));background:#0f172a;border-bottom:1px solid #1e293b;color:#f8fafc;font-size:14px;flex-shrink:0;z-index:10}
.vjr-hud-left{display:flex;align-items:center;gap:8px;overflow:hidden}
.vjr-hud-question{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#e2e8f0}
.vjr-hud-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
@media (max-width:599px){.vjr-hud{flex-direction:column;align-items:stretch;gap:4px;padding:8px 16px}.vjr-hud-left{justify-content:flex-start}.vjr-hud-right{justify-content:center}}
.vjr-hud-left.hide{display:none}
.vjr-hud-streak,.vjr-hud-attempts{display:flex;align-items:center;gap:4px}
.vjr-hud-streak.hide,.vjr-hud-attempts.hide{display:none}
.vjr-stars-wrap{display:flex;gap:1px}
.vjr-star{font-size:20px;color:#334155;line-height:1;transition:color .15s}
.vjr-star.lit{color:#f59e0b}
.vjr-timer{font-weight:700;font-size:16px;color:#94a3b8;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:3.2ch;text-align:right}
.vjr-attempts-value{font-weight:700;font-size:18px;color:#fbbf24}
.vjr-attempts-label{color:#94a3b8;font-size:12px}
.vjr-game-host{flex:1;min-height:0;position:relative;margin:8px;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.vjr-game-host::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 60px 6px rgba(15,23,42,0.28);z-index:5}
.vjr-feedback{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;padding:10px 24px;border-radius:12px;font-size:15px;font-weight:600;text-align:center;pointer-events:none;transition:opacity 0.3s;max-width:90vw}
.vjr-feedback-correct{background:#22c55e;color:#fff}
.vjr-feedback-typo{background:#166534;color:#fff}
.vjr-feedback-typo mark{background:#fbbf24;color:#1a1a1a;border-radius:3px;padding:0 2px}
.vjr-feedback-wrong{background:#ef4444;color:#fff}
.vjr-feedback-lenient{background:#f97316;color:#fff}
/* Typography — mirror the [page="game"] overrides from 7streak/style.css (not loaded for vilagjaro) */
[page="game"] h5{font-size:var(--game-font-m,15px);font-family:var(--main-font,Outfit,sans-serif)}
[page="game"] h6{font-size:var(--game-font-s,13px);font-family:var(--main-font,Outfit,sans-serif)}
/* Opening page: mode buttons side by side (mirrors 7streak/style.css pattern exactly) */
.main .content-buttons{gap:15px;grid-auto-flow:column;justify-self:center;width:min-content;margin-top:30px}
.main .content-buttons .button{min-width:115px}
.main .content-buttons>div{align-content:start}
.main .content-buttons>div h6{justify-self:center}
@media screen and (max-width:600px){.main .content-buttons{gap:10px;grid-auto-flow:initial;width:auto}}
/* Cards page */
.main:has([game-page="cards"].vjr-cards-page:not(.hide)) .game-footer{display:none}
.main:has([game-page="cards"].vjr-cards-page:not(.hide)){overflow:hidden}
.game-content:has([game-page="cards"].vjr-cards-page:not(.hide)){max-width:100%;width:100%;margin:0 !important;padding:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
.vjr-cards-page{display:flex;flex-direction:column;width:100%;flex:1;min-height:0;overflow:hidden;background:#fff}
.vjr-cards-page.hide{display:none}
.vjr-cards-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid #e5e7eb;gap:12px}
.vjr-cards-title{font-size:17px;font-weight:700;color:#1e293b;font-family:var(--main-font,Outfit,sans-serif)}
.vjr-cards-count{font-size:13px;color:#94a3b8;font-weight:500;white-space:nowrap;font-family:var(--main-font,Outfit,sans-serif)}
.vjr-cards-grid{flex:1;overflow-y:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-content:start}
.vjr-card{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border-left:4px solid #e5e7eb;background:#f8fafc}
.vjr-card-icon{font-size:15px;flex-shrink:0}
.vjr-card-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;font-size:13px;font-weight:600;font-family:var(--main-font,Outfit,sans-serif)}
.vjr-cards-footer{padding:14px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:center;background:#fff}
/* Progress bar */
.vjr-progress-wrap{margin:18px auto 0;width:min(360px,90vw)}
.vjr-end-knowledge{margin:18px auto 0;width:min(360px,60vw)}
.vjr-progress-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#e5e7eb}
.vjr-progress-labels{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px}
.vjr-prog-label{font-size:12px;font-weight:600;font-family:var(--main-font,Outfit,sans-serif)}
/* Pins mode HUD */
.vjr-pins-task-timer{display:flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.vjr-pins-task-timer.hide,.vjr-pins-lives.hide,.vjr-pins-score.hide{display:none}
.vjr-task-timer-value{font-weight:700;font-size:20px;color:#38bdf8;min-width:2ch;text-align:right}
.vjr-task-timer-label{font-size:13px;color:#94a3b8}
.vjr-timer-urgent .vjr-task-timer-value{color:#ef4444;animation:vjr-pulse .5s infinite alternate}
@keyframes vjr-pulse{to{opacity:.5}}
.vjr-pins-lives{display:flex;align-items:center;gap:2px}
.vjr-life{font-size:18px;transition:opacity .2s}
.vjr-life--lost{opacity:.2;filter:grayscale(1)}
.vjr-pins-score{display:flex;align-items:center;gap:4px}
.vjr-pins-score-value{font-weight:700;font-size:20px;color:#f8fafc;font-variant-numeric:tabular-nums}
.vjr-pins-score-label{font-size:13px;color:#94a3b8}
/* Star colors for pins */
.vjr-star.vjr-star--gold{color:#ffd700}
.vjr-star.vjr-star--silver{color:#c0c0c0}
.vjr-star.vjr-star--bronze{color:#cd7f32}
/* Mode info popup */
.vjr-mode-popup{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.vjr-mode-popup.hide{display:none}
.vjr-mode-popup-card{background:#fff;border-radius:16px;padding:28px 32px;max-width:340px;width:90vw;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.vjr-mode-popup-title{font-size:20px;font-weight:700;color:#1e293b;font-family:var(--main-font,Outfit,sans-serif)}
.vjr-mode-popup-subtitle{font-size:13px;color:#6b7280;font-family:var(--main-font,Outfit,sans-serif);margin-top:-4px}
.vjr-mode-popup-ceiling{background:#f8fafc;border-radius:12px;padding:12px 20px;border:1px solid #e5e7eb}
.vjr-mode-popup-ceiling-icon{display:none}
.vjr-mode-popup-ceiling-label{font-size:14px;font-weight:500;color:#1e293b;font-family:var(--main-font,Outfit,sans-serif);line-height:1.5;text-align:left}
.vjr-mode-popup-note{font-size:12px;color:#6b7280;font-family:var(--main-font,Outfit,sans-serif);max-width:260px}
.vjr-mode-popup-note.hide{display:none}
/* Popup + cards buttons — light mode: light button, dark text */
.vjr-mode-popup-ok{min-width:180px;margin-top:4px;padding:10px 28px !important;border-radius:12px !important;background:#f1f5f9 !important;border:1px solid #e2e8f0 !important}
.vjr-mode-popup-ok h5{color:#1e293b !important}
.vjr-cards-footer .vjr-cards-start-btn{padding:10px 28px !important;border-radius:12px !important;min-width:160px;background:#f1f5f9 !important;border:1px solid #e2e8f0 !important}
.vjr-cards-footer .vjr-cards-start-btn h5{color:#1e293b !important}
/* Dark mode: popup card + cards page */
[theme="dark"] .vjr-mode-popup-card{background:#1e293b;box-shadow:0 20px 60px rgba(0,0,0,.6)}
[theme="dark"] .vjr-mode-popup-title,[theme="dark"] .vjr-mode-popup-ceiling-label{color:#f1f5f9}
[theme="dark"] .vjr-mode-popup-subtitle,[theme="dark"] .vjr-mode-popup-note{color:#94a3b8}
[theme="dark"] .vjr-mode-popup-ceiling{background:#0f172a;border-color:#334155}
[theme="dark"] .vjr-mode-popup-ok{background:#475569 !important;border-color:#475569 !important}
[theme="dark"] .vjr-mode-popup-ok h5{color:#f8fafc !important}
[theme="dark"] .vjr-cards-page{background:#0f172a}
[theme="dark"] .vjr-cards-header{border-bottom-color:#1e293b}
[theme="dark"] .vjr-cards-title{color:#f1f5f9}
[theme="dark"] .vjr-card{background:#1e293b}
[theme="dark"] .vjr-card-name{color:#f1f5f9}
[theme="dark"] .vjr-cards-footer{background:#0f172a;border-top-color:#1e293b}
[theme="dark"] .vjr-cards-footer .vjr-cards-start-btn{background:#475569 !important;border-color:#475569 !important}
[theme="dark"] .vjr-cards-footer .vjr-cards-start-btn h5{color:#f8fafc !important}
/* Round-start preview overlay (select mode) */
.vjr-preview{position:absolute;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:18px;pointer-events:none}
.vjr-preview.hide{display:none}
.vjr-preview-card{background:rgba(15,23,42,0.92);border:1px solid #1e293b;border-radius:14px;padding:14px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:240px;max-width:90vw;pointer-events:auto}
.vjr-preview-name{color:#f8fafc;font-size:18px;font-weight:700;text-align:center;font-family:var(--main-font,Outfit,sans-serif)}
.vjr-preview-next{position:relative;overflow:hidden;min-width:160px;padding:10px 28px !important;border-radius:12px !important;background:#f1f5f9 !important;border:1px solid #e2e8f0 !important;cursor:pointer}
.vjr-preview-next h5{color:#1e293b !important;position:relative;z-index:2}
.vjr-preview-progress{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(56,189,248,0.45);z-index:1;pointer-events:none;transform-origin:left center;transform:scaleX(0);will-change:transform}
.vjr-preview-progress.run{animation:vjr-preview-fill 3s linear forwards}
@keyframes vjr-preview-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[theme="dark"] .vjr-preview-next{background:#475569 !important;border-color:#475569 !important}
[theme="dark"] .vjr-preview-next h5{color:#f8fafc !important}
/* End screen: switch .main grid track to auto so content height drives scroll */
.main:has([game-page="end"]:not(.hide)){grid-template-rows:auto}
/* End screen mobile: stack buttons vertically on narrow screens */
@media screen and (max-width:480px){[game-page="end"] .button-container{grid-auto-flow:row;justify-items:center}}