/* ==========================================================================
   TH3L30 · THE RADIO DEMON THEME  —  core system
   --------------------------------------------------------------------------
   Alastor radio-demon mood: 1920s-30s broadcast, art-deco linework,
   deep oxblood crimson, bone/cream ink, warm amber radio-tube glow.
   One shared backbone every page imports. Load AFTER hb-fonts.css.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* ---- Palette: Crimson · Bone · Amber ------------------------------- */
    --bg-0:        #0a0304;   /* pit black, warm red undertone  */
    --bg-1:        #120508;   /* raised surface                 */
    --bg-2:        #1b070b;   /* panel floor                    */
    --bg-3:        #250a10;   /* hover / lifted                 */

    --ink:         #efe4d0;   /* bone / aged paper text         */
    --ink-soft:    #d6c6ac;
    --muted:       #9c8a74;   /* faded sepia                    */
    --muted-dim:   #6f6052;

    --crimson:     #c8142b;   /* the radio-demon red            */
    --crimson-br:  #e23a48;   /* bright edge / hover            */
    --crimson-deep:#6e0c18;   /* oxblood shadow                 */
    --oxblood:     #3a0710;

    --amber:       #e4a63f;   /* warm tube glow / highlight     */
    --amber-br:    #f6c76b;
    --amber-deep:  #9a6a1c;

    --onair:       #ff3b2e;   /* ON AIR lamp                    */
    --dial:        #f0d9a0;   /* dial face / ivory              */

    /* ---- Semantic ------------------------------------------------------ */
    --line:        rgba(228,166,63,0.22);   /* amber deco hairline */
    --line-red:    rgba(200,20,43,0.30);
    --line-soft:   rgba(239,228,208,0.10);
    --ok:          #8fbf6e;
    --warn:        var(--amber);
    --danger:      var(--crimson-br);

    --panel:       linear-gradient(180deg, rgba(27,7,11,0.92), rgba(12,5,8,0.92));
    --panel-lift:  linear-gradient(180deg, rgba(37,10,16,0.95), rgba(18,6,10,0.95));
    --glow-red:    0 0 22px rgba(200,20,43,0.35);
    --glow-amber:  0 0 20px rgba(228,166,63,0.30);
    --radius:      3px;

    /* exposed for pages that key off generic names */
    --red: var(--crimson);
    --gold: var(--amber);
    --accent: var(--crimson);
}

/* ---- Reset-ish ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    color: var(--ink);
    font-family: var(--font-mono);
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(110,12,24,0.35) 0%, transparent 55%),
        radial-gradient(circle at 50% 120%, rgba(228,166,63,0.08) 0%, transparent 45%),
        linear-gradient(180deg, #0c0406 0%, var(--bg-0) 60%, #050102 100%);
    background-attachment: fixed;
}

/* ---- Selection / scrollbars / focus ------------------------------------ */
::selection { background: rgba(200,20,43,0.45); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--crimson-deep) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
    border: 2px solid var(--bg-0); border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--crimson-br); }

:focus-visible {
    outline: 1px solid var(--amber);
    outline-offset: 2px;
    box-shadow: var(--glow-amber);
}

/* ---- Deco type ---------------------------------------------------------- */
.hb-deco   { font-family: var(--font-deco); letter-spacing: 0.04em; }
.hb-serif  { font-family: var(--font-serif); letter-spacing: 0.06em; }
.hb-radio  { font-family: var(--font-radio); letter-spacing: 0.05em; }

/* Signature wordmark: bone→amber→crimson radio-tube gradient */
.hb-wordmark {
    font-family: var(--font-deco);
    font-weight: 900;
    background: linear-gradient(180deg, #fff6e6 0%, var(--dial) 30%, var(--amber) 58%, var(--crimson) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 34px rgba(200,20,43,0.25);
}

/* Links */
a { color: var(--amber); text-decoration: none; transition: color .18s, text-shadow .18s; }
a:hover { color: var(--amber-br); text-shadow: var(--glow-amber); }

/* ==========================================================================
   DECO PANEL  — the signature framed surface, with corner ticks + notch
   Usage: <div class="hb-panel"><span class="hb-corners"></span> ... </div>
   ========================================================================== */
.hb-panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow:
        0 26px 70px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(239,228,208,0.05),
        inset 0 0 50px rgba(110,12,24,0.12);
    /* clipped art-deco corners */
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px,
                       100% calc(100% - 14px), calc(100% - 14px) 100%,
                       14px 100%, 0 calc(100% - 14px));
    backdrop-filter: blur(5px);
}
/* amber corner brackets (inner tick marks) */
.hb-corners { position: absolute; inset: 7px; pointer-events: none; z-index: 2; }
.hb-corners::before, .hb-corners::after {
    content: ""; position: absolute; width: 16px; height: 16px;
    border: 0 solid var(--amber); opacity: 0.8;
}
.hb-corners::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hb-corners::after  { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* thin deco divider with a traveling dot (radio signal) */
.hb-stream {
    height: 1px; margin: 16px 0;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line-red) 50%, var(--line) 80%, transparent);
    position: relative; overflow: hidden;
}
.hb-stream::after {
    content: ""; position: absolute; top: -1px; left: -40px; width: 40px; height: 3px;
    background: var(--amber); box-shadow: 0 0 10px var(--amber);
    animation: hb-stream-run 2.8s linear infinite;
}
@keyframes hb-stream-run { to { left: 100%; } }

/* double art-deco rule (two lines + center diamond) */
.hb-rule {
    display: flex; align-items: center; gap: 10px; margin: 18px 0;
    color: var(--amber); opacity: .85;
}
.hb-rule::before, .hb-rule::after {
    content: ""; flex: 1; height: 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 3px 0 -2px var(--line);
}
.hb-rule .dot { width: 7px; height: 7px; transform: rotate(45deg); background: var(--amber); box-shadow: var(--glow-amber); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hb-btn, button.hb-btn {
    font-family: var(--font-radio);
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink);
    padding: 12px 22px; border-radius: var(--radius); cursor: pointer;
    border: 1px solid var(--line-red);
    background: linear-gradient(180deg, rgba(200,20,43,0.14), rgba(110,12,24,0.10));
    transition: background .18s, box-shadow .18s, transform .08s, border-color .18s;
    position: relative;
}
.hb-btn:hover {
    background: linear-gradient(180deg, rgba(200,20,43,0.28), rgba(110,12,24,0.18));
    border-color: var(--crimson-br);
    box-shadow: var(--glow-red);
    color: #fff;
}
.hb-btn:active { transform: translateY(1px); }
.hb-btn:disabled { opacity: .5; cursor: not-allowed; }
.hb-btn.amber { border-color: var(--line); background: linear-gradient(180deg, rgba(228,166,63,0.18), rgba(154,106,28,0.10)); }
.hb-btn.amber:hover { border-color: var(--amber); box-shadow: var(--glow-amber); }
.hb-btn.ghost { background: transparent; border-color: var(--line-soft); color: var(--muted); }
.hb-btn.ghost:hover { color: var(--ink); border-color: var(--amber); box-shadow: none; }

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.hb-field, input.hb-field, textarea.hb-field, select.hb-field {
    width: 100%;
    background: rgba(6,2,3,0.75);
    border: 1px solid var(--line-soft);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.86rem;
    padding: 12px 14px;
    border-radius: 2px;
    outline: none;
    letter-spacing: 0.03em;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.hb-field::placeholder { color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.hb-field:focus {
    border-color: var(--crimson);
    background: rgba(27,7,11,0.8);
    box-shadow: 0 0 0 1px var(--line-red), var(--glow-red);
}

/* ==========================================================================
   SMALL PARTS — tags, kickers, radio dial loader, ON-AIR lamp
   ========================================================================== */
.hb-kicker {
    font-family: var(--font-radio);
    font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--amber); opacity: .9;
}
.hb-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-radio); font-size: 0.6rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 3px 9px; border: 1px solid var(--line); border-radius: 2px;
    color: var(--amber); background: rgba(228,166,63,0.06);
}

/* ON AIR lamp */
.hb-onair {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-radio); font-size: 0.62rem;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink);
}
.hb-onair .lamp {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--onair); box-shadow: 0 0 10px 2px var(--onair);
    animation: hb-pulse 1.8s ease-in-out infinite;
}
@keyframes hb-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 10px 2px var(--onair);} 50% { opacity: .45; box-shadow: 0 0 4px 1px var(--onair);} }

/* radio-dial spinner — a tuning needle sweeping a dial */
.hb-dial { width: 42px; height: 42px; position: relative; }
.hb-dial::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid var(--line); box-shadow: inset 0 0 10px rgba(228,166,63,0.2);
}
.hb-dial::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 42%;
    background: linear-gradient(var(--amber), transparent);
    transform-origin: bottom center; transform: translate(-50%, -100%);
    animation: hb-tune 1.4s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes hb-tune { 0%{transform:translate(-50%,-100%) rotate(-130deg);} 50%{transform:translate(-50%,-100%) rotate(130deg);} 100%{transform:translate(-50%,-100%) rotate(-130deg);} }

/* equalizer bars (signal) */
.hb-bars { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; }
.hb-bars span { width: 3px; background: var(--crimson); opacity: .75; animation: hb-bar 1.1s ease-in-out infinite; }
.hb-bars span:nth-child(2){animation-delay:.12s;background:var(--amber);}
.hb-bars span:nth-child(3){animation-delay:.24s;}
.hb-bars span:nth-child(4){animation-delay:.36s;background:var(--amber);}
@keyframes hb-bar { 0%,100%{height:25%;} 50%{height:100%;} }

/* error / notice */
.hb-error {
    color: var(--crimson-br); font-family: var(--font-mono);
    font-size: 0.74rem; letter-spacing: 0.06em; text-align: center;
    padding: 10px; border: 1px solid var(--line-red);
    background: rgba(200,20,43,0.08); border-radius: 2px;
}
.hb-error.shake { animation: hb-shake .32s ease; }
@keyframes hb-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   RESPONSIVE / CROSS-DEVICE  (added for resize + mobile robustness)
   ========================================================================== */
/* stop iOS from inflating text on rotate, and keep layout from spilling sideways */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* iOS Safari zooms the whole page when you focus an input whose text < 16px.
   Bump form controls to 16px on touch / small screens so focus never zooms. */
@media (max-width: 760px), (pointer: coarse) {
    .hb-field, input.hb-field, textarea.hb-field, select.hb-field,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], textarea, select {
        font-size: 16px;
    }
}

/* give taps a comfortable target and kill the grey tap flash on touch devices */
@media (pointer: coarse) {
    button, a, .hb-btn, [role="button"] { -webkit-tap-highlight-color: transparent; }
    .hb-btn, button.hb-btn, a.hb-btn { min-height: 44px; }
}