/* Cosmic horror theme: overrides on top of style.css while <body> has class skin-lovecraft.
   Deep-sea green/black panels, antique bronze frames, emerald and violet glows. */
body.skin-lovecraft { --panel: rgba(6, 18, 18, 0.93); --teal: #3affc0; --edge: #7a6230; background: #020a0a; }
body.skin-lovecraft { --slate: linear-gradient(180deg, rgba(14, 34, 32, 0.95), rgba(4, 12, 12, 0.97)); }
body.skin-lovecraft button { background: linear-gradient(#183230, #0a1a1a); }
body.skin-lovecraft button.primary { background: linear-gradient(#1a6a54, #0a3428); border-color: #3affc0; }
body.skin-lovecraft .alert { background: rgba(6, 18, 18, 0.92); }
body.skin-lovecraft #screen { background: rgba(2, 10, 10, 0.74); }
body.skin-lovecraft #screen.menu-bg { background: radial-gradient(ellipse at center, rgba(2, 12, 12, 0.15), rgba(2, 8, 8, 0.78)); }
body.skin-lovecraft .panel.glass { background: rgba(6, 18, 18, 0.84); }
body.skin-lovecraft .confirm { background: rgba(2, 8, 8, 0.6); }
body.skin-lovecraft #runeModal { background: radial-gradient(ellipse at 50% 45%, rgba(20, 40, 44, 0.55), rgba(2, 6, 8, 0.88)); }
body.skin-lovecraft .card .glyph { text-shadow: 0 0 14px rgba(58, 255, 192, 0.6), 0 0 26px rgba(176, 122, 255, 0.35); }
body.skin-lovecraft .rune-card .stone { background: var(--noise), radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, 0.2), transparent 45%), radial-gradient(ellipse at 60% 90%, rgba(0, 0, 0, 0.5), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--fam) 16%, #34484a), #0e1a1c 70%); }
body.skin-lovecraft .spec { background: linear-gradient(#1a3a34, #0a1c1a); }
body.skin-lovecraft #historyPanel { background: rgba(6, 18, 18, 0.95); }
body.skin-lovecraft #holdTag { background: rgba(8, 24, 24, 0.94); color: #d0fff0; box-shadow: 0 0 18px rgba(58, 255, 192, 0.3); }
body.skin-lovecraft .fstatus.slow { color: #8affe0; border-color: #8affe0; }

/* top bar: bronze-framed slate, an emerald life bar */
body.skin-lovecraft .frame, body.skin-lovecraft #topframe { border: 1px solid rgba(190, 150, 80, 0.55); }
body.skin-lovecraft #topframe { box-shadow: inset 0 1px 0 rgba(220, 190, 120, 0.12), 0 0 18px rgba(58, 255, 192, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6); }
body.skin-lovecraft #topframe::before, body.skin-lovecraft #topframe::after { border: 1px solid rgba(190, 150, 80, 0.6); }
body.skin-lovecraft .emblem { background: radial-gradient(circle at 50% 35%, #1e5a4c, #061614 70%); border: 2px solid #b8924a; box-shadow: 0 0 0 4px rgba(4, 12, 12, 0.92), 0 0 0 5px rgba(190, 150, 80, 0.55), 0 0 16px rgba(58, 255, 192, 0.25), 0 6px 18px rgba(0, 0, 0, 0.7); color: #eafff6; }
body.skin-lovecraft .emblem.waving { background: radial-gradient(circle at 50% 35%, #4a2a6a, #120a1e 70%); border-color: #c8a0ff; }
body.skin-lovecraft #hWave { color: #c8e8dc; }
body.skin-lovecraft .lifebar { border: 1px solid rgba(190, 150, 80, 0.45); }
body.skin-lovecraft #lifeFill { background: repeating-linear-gradient(90deg, #3affc0 0 9px, #12907a 9px 11px); box-shadow: 0 0 8px rgba(58, 255, 192, 0.6); }
body.skin-lovecraft #statLives b { color: #b8ffe4; }
body.skin-lovecraft #speedctl, body.skin-lovecraft #btnPause { border: 1px solid rgba(190, 150, 80, 0.5); }
body.skin-lovecraft .tbtn svg, body.skin-lovecraft #btnPause svg { stroke: #d8eee4; }
body.skin-lovecraft .tbtn svg .f { fill: #d8eee4; }
body.skin-lovecraft .tbtn.sel { background: rgba(58, 255, 192, 0.16); border-color: rgba(58, 255, 192, 0.6); }
body.skin-lovecraft #minimap { border: 1px solid rgba(190, 150, 80, 0.6); background: #061412; box-shadow: 0 0 14px rgba(58, 255, 192, 0.12), 0 6px 20px rgba(0, 0, 0, 0.6); }
body.skin-lovecraft #historyCount { background: #3affc0; color: #04140e; }

/* hero card, build dock and tabs */
body.skin-lovecraft #heroPanel { border: 1px solid rgba(190, 150, 80, 0.5); }
body.skin-lovecraft #hHp { background: linear-gradient(90deg, #12907a, #3affc0); }
body.skin-lovecraft #buildBar { border: 1px solid rgba(190, 150, 80, 0.5); border-bottom: none; background: var(--noise), linear-gradient(180deg, rgba(16, 40, 38, 0.93), rgba(4, 14, 14, 0.96)); scrollbar-color: rgba(190, 150, 80, 0.45) transparent; }
body.skin-lovecraft .bcard { background: radial-gradient(circle at 50% 30%, rgba(40, 110, 96, 0.32), rgba(4, 12, 12, 0.62)); border: 1px solid rgba(190, 150, 80, 0.3); }
body.skin-lovecraft .bcard:hover { border-color: #8affe0; box-shadow: 0 0 12px rgba(58, 255, 192, 0.35); }
body.skin-lovecraft .bcard.on { border-color: #8affe0; box-shadow: 0 0 14px rgba(58, 255, 192, 0.55), 0 0 22px rgba(176, 122, 255, 0.25); }
body.skin-lovecraft #buildTabs { border: 1px solid rgba(190, 150, 80, 0.5); background: rgba(4, 12, 12, 0.94); }
body.skin-lovecraft .btab { color: #b8d0c6; }
body.skin-lovecraft .btab + .btab { border-left: 1px solid rgba(190, 150, 80, 0.3); }
body.skin-lovecraft .btab.sel { background: linear-gradient(180deg, rgba(58, 255, 192, 0.22), rgba(176, 122, 255, 0.06)); }

/* info card (bottom right) */
body.skin-lovecraft .infocard { border: 1px solid rgba(190, 150, 80, 0.55); }
body.skin-lovecraft .infocard::before { border: 1px solid rgba(190, 150, 80, 0.2); }
body.skin-lovecraft .cardimg { background: radial-gradient(ellipse at 50% 60%, rgba(58, 255, 192, 0.2), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(40, 30, 70, 0.45), rgba(4, 12, 12, 0.2)); border-bottom: 1px solid rgba(190, 150, 80, 0.3); }
body.skin-lovecraft .cardbody .ititle { color: #e8dcb8; }
body.skin-lovecraft .stances { border-top: 1px solid rgba(190, 150, 80, 0.25); }
body.skin-lovecraft .stance { border: 1px solid rgba(190, 150, 80, 0.25); }
body.skin-lovecraft .stance svg { stroke: #d8eee4; }
body.skin-lovecraft .stance.sel { border-color: #3affc0; background: rgba(58, 255, 192, 0.16); }
body.skin-lovecraft .stance.sel svg { stroke: #8affe0; }

/* icons and themed pulses */
body.skin-lovecraft .ri.food { background-image: url(lovecraft/food.svg); }
@keyframes holdPulseLovecraft { 50% { box-shadow: 0 0 6px rgba(58, 255, 192, 0.15); } }
@keyframes histPulseLovecraft { 0% { box-shadow: 0 0 0 0 rgba(58, 255, 192, 0.9); transform: scale(1.25); } to { box-shadow: 0 0 0 14px rgba(58, 255, 192, 0); transform: none; } }
@keyframes emblemReadyLovecraft { 50% { box-shadow: 0 0 0 4px rgba(4, 12, 12, 0.92), 0 0 0 5px rgba(190, 150, 80, 0.55), 0 0 22px 6px rgba(58, 255, 192, 0.6); } }
body.skin-lovecraft #holdTag { animation-name: holdPulseLovecraft; }
body.skin-lovecraft #holdTag.shake { animation-name: holdShake; }
body.skin-lovecraft #btnHistory.pulse { animation-name: histPulseLovecraft; }
body.skin-lovecraft .emblem.ready { animation-name: emblemReadyLovecraft; }