/* Gothic theme: overrides on top of style.css while <body> has class skin-gothic (generated from the
   feature/gothic-vampire-theme branch, then hand-tidied). */
body.skin-gothic { --panel: rgba(16, 12, 16, 0.92); --teal: #d8324a; }
body.skin-gothic { background: #07060a; }
body.skin-gothic button { background: linear-gradient(#3a2a32, #1e141a); }
body.skin-gothic button.primary { background: linear-gradient(#6a1020, #3a0a12); }
body.skin-gothic #topbar { background: linear-gradient(rgba(12, 9, 13, 0.96), rgba(12, 9, 13, 0.78)); }
body.skin-gothic .alert { background: rgba(16, 12, 16, 0.9); }
body.skin-gothic #bottombar { background: linear-gradient(rgba(12, 9, 13, 0.82), rgba(12, 9, 13, 0.97)); }
body.skin-gothic #hHp { background: linear-gradient(90deg, #3fb7a8, #d8324a); }
body.skin-gothic .bcard.on { box-shadow: 0 0 10px rgba(214, 40, 60, 0.45); }
body.skin-gothic #runeModal { background: radial-gradient(ellipse at 50% 45%, rgba(28, 20, 26, 0.55), rgba(6, 3, 6, 0.86)); }
body.skin-gothic #screen { background: rgba(8, 5, 9, 0.72); }
body.skin-gothic #screen.menu-bg { background: radial-gradient(ellipse at center, rgba(8, 5, 9, 0.15), rgba(8, 5, 9, 0.75)); }
body.skin-gothic .panel.glass { background: rgba(16, 12, 16, 0.82); }
body.skin-gothic .card .glyph { text-shadow: 0 0 14px rgba(214, 40, 60, 0.6); }
body.skin-gothic #holdTag { background: rgba(26, 16, 22, 0.94); color: #ffd0d4; box-shadow: 0 0 18px rgba(214, 40, 60, 0.35); }
body.skin-gothic #historyPanel { background: rgba(16, 12, 16, 0.95); }
body.skin-gothic .fstatus.slow { color: #c8a8ff; border-color: #c8a8ff; }
body.skin-gothic .confirm { background: rgba(8, 5, 9, 0.55); }
body.skin-gothic .rune-card .stone { background: var(--noise), radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, 0.22), 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) 14%, #4e4858), #1c1820 70%); }
body.skin-gothic { --slate: linear-gradient(180deg, rgba(32, 26, 32, 0.94), rgba(12, 8, 12, 0.96)); }
body.skin-gothic .frame { border: 1px solid rgba(200, 160, 90, 0.45); }
body.skin-gothic #topframe { border: 1px solid rgba(200, 160, 90, 0.45); }
body.skin-gothic #topframe::before, body.skin-gothic #topframe::after { border: 1px solid rgba(200, 160, 90, 0.5); }
body.skin-gothic .emblem { background: radial-gradient(circle at 50% 35%, #5a1e2a, #140a0e 70%); border: 2px solid #c8a050; box-shadow: 0 0 0 4px rgba(12, 8, 12, 0.9), 0 0 0 5px rgba(200, 160, 90, 0.5), 0 6px 18px rgba(0, 0, 0, 0.7); color: #fff0e0; }
body.skin-gothic #hWave { color: #e8d8c8; }
body.skin-gothic .lifebar { border: 1px solid rgba(200, 160, 90, 0.4); }
body.skin-gothic #lifeFill { background: repeating-linear-gradient(90deg, #d8324a 0 9px, #8a1424 9px 11px); box-shadow: 0 0 8px rgba(214, 40, 60, 0.6); }
body.skin-gothic #statLives b { color: #f0c8cc; }
body.skin-gothic #speedctl, body.skin-gothic #btnPause { border: 1px solid rgba(200, 160, 90, 0.45); }
body.skin-gothic .tbtn svg { stroke: #e8dcc8; }
body.skin-gothic .tbtn svg .f { fill: #e8dcc8; }
body.skin-gothic .tbtn.sel { background: rgba(214, 40, 60, 0.18); border-color: rgba(214, 40, 60, 0.6); }
body.skin-gothic #btnPause svg { stroke: #e8dcc8; }
body.skin-gothic #heroPanel { border: 1px solid rgba(200, 160, 90, 0.45); }
body.skin-gothic #buildBar { border: 1px solid rgba(200, 160, 90, 0.45); background: var(--noise), linear-gradient(180deg, rgba(38, 28, 34, 0.92), rgba(14, 10, 14, 0.95)); }
body.skin-gothic .bcard { background: radial-gradient(circle at 50% 30%, rgba(110, 50, 62, 0.35), rgba(12, 8, 12, 0.6)); border: 1px solid rgba(200, 160, 90, 0.3); }
body.skin-gothic .bcard:hover { border-color: #ffe0a0; box-shadow: 0 0 12px rgba(240, 200, 120, 0.35); }
body.skin-gothic .bcard.on { border-color: #ffe0a0; box-shadow: 0 0 14px rgba(240, 200, 120, 0.6); }
body.skin-gothic #buildTabs { border: 1px solid rgba(200, 160, 90, 0.45); background: rgba(12, 8, 12, 0.92); }
body.skin-gothic .btab { color: #c8b8a8; }
body.skin-gothic .btab + .btab { border-left: 1px solid rgba(200, 160, 90, 0.3); }
body.skin-gothic .btab.sel { background: linear-gradient(180deg, rgba(214, 40, 60, 0.25), rgba(214, 40, 60, 0.05)); }
body.skin-gothic .infocard { border: 1px solid rgba(200, 160, 90, 0.5); }
body.skin-gothic .infocard::before { border: 1px solid rgba(200, 160, 90, 0.18); }
body.skin-gothic .cardimg { background: radial-gradient(ellipse at 50% 60%, rgba(214, 40, 60, 0.22), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(90, 36, 48, 0.5), rgba(12, 8, 12, 0.2)); border-bottom: 1px solid rgba(200, 160, 90, 0.3); }
body.skin-gothic .stances { border-top: 1px solid rgba(200, 160, 90, 0.25); }
body.skin-gothic .stance { border: 1px solid rgba(200, 160, 90, 0.25); }
body.skin-gothic .stance svg { stroke: #e8dcc8; }
body.skin-gothic .stance.sel { border-color: #d8324a; background: rgba(214, 40, 60, 0.18); }
body.skin-gothic .stance.sel svg { stroke: #ff8a96; }
body.skin-gothic #buildBar { scrollbar-color: rgba(200, 160, 90, 0.4) transparent; }
@keyframes holdPulseGothic { 50% { box-shadow: 0 0 6px rgba(214, 40, 60, 0.15); } }
@keyframes histPulseGothic { 0% { box-shadow: 0 0 0 0 rgba(214, 40, 60, 0.9); transform: scale(1.25); } to { box-shadow: 0 0 0 14px rgba(214, 40, 60, 0); transform: none; } }
@keyframes emblemReadyGothic { 50% { box-shadow: 0 0 0 4px rgba(12, 8, 12, 0.9), 0 0 0 5px rgba(200, 160, 90, 0.5), 0 0 22px 6px rgba(214, 40, 60, 0.65); } }
body.skin-gothic .ri.food { background-image: url(gothic/food.svg); }
body.skin-gothic #holdTag { animation-name: holdPulseGothic; }
body.skin-gothic #holdTag.shake { animation-name: holdShake; }
body.skin-gothic #btnHistory.pulse { animation-name: histPulseGothic; }
body.skin-gothic .emblem.ready { animation-name: emblemReadyGothic; }