/* =============================================================
   HORROR PAGE ONLY — film generators
   Loaded after style.css:
       <link rel="stylesheet" href="/style.css">
       <link rel="stylesheet" href="/horror.css">
   ============================================================= */

/* a red wash over the shared cityscape banner */
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(90,0,0,.10), rgba(160,10,10,.38));
    pointer-events: none;
}

.generator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 18px 0 24px 0;
}

.gen-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 18px 12px;
    font-size: 1.35rem;
    letter-spacing: 1px;
    cursor: pointer;
    background: #000;
    color: #fff;
    transition: transform .12s ease;
}
.gen-btn:hover  { transform: translateY(-2px); }
.gen-btn:active { transform: translateY(1px); }


/* ---- SLIME: drippy face, oozing green edge ---------------- */
.gen-btn.slime {
    font-family: "Creepster", "Comic Sans MS", cursive;
    color: #b6ff3c;
    background: radial-gradient(ellipse at 50% 0%, #143d0c 0%, #050a03 70%);
    border: 5px solid #4fa021;
    border-radius: 45% 55% 48% 52% / 30% 28% 38% 36%;
    text-shadow: 0 2px 0 #1f5c0a, 0 0 12px #7cfc00;
    box-shadow: inset 0 -10px 22px rgba(124,252,0,.25), 0 0 14px rgba(124,252,0,.35);
}
.gen-btn.slime:hover {
    color: #d9ff8a;
    box-shadow: inset 0 -14px 26px rgba(124,252,0,.40), 0 0 22px rgba(124,252,0,.60);
}


/* ---- CREATURE FEATURE: scratched face, claw slashes ------- */
.gen-btn.creature {
    font-family: "Metal Mania", Impact, fantasy;
    color: #ffb347;
    background: repeating-linear-gradient(135deg, #180d05 0 7px, #241408 7px 14px);
    border: 6px double #8b5a2b;
    text-shadow: 2px 2px 0 #3b1d05;
    box-shadow: inset 0 0 20px rgba(0,0,0,.9);
}
.gen-btn.creature::after {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 30%, rgba(255,120,60,.75) 30.6%, transparent 31.4%),
        linear-gradient(105deg, transparent 44%, rgba(255,120,60,.75) 44.6%, transparent 45.4%),
        linear-gradient(105deg, transparent 58%, rgba(255,120,60,.75) 58.6%, transparent 59.4%);
    opacity: .45;
    transition: opacity .15s ease;
}
.gen-btn.creature:hover::after { opacity: 1; }


/* ---- CLASSIC MONSTERS: blackletter, silver film frame ----- */
.gen-btn.classic {
    font-family: "UnifrakturMaguntia", "Times New Roman", serif;
    font-size: 1.55rem;
    color: #e8e8e8;
    background: linear-gradient(#1a1a1a, #000);
    border: 8px ridge #b9b9b9;
    padding: 18px 12px 26px 12px;
    text-shadow: 0 0 10px rgba(255,255,255,.45);
    filter: grayscale(100%);
}
.gen-btn.classic::before,
.gen-btn.classic::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 8px;
    background-image: radial-gradient(circle at 7px 4px, #c0c0c0 3px, transparent 4px);
    background-size: 18px 8px;
    background-repeat: repeat-x;
    opacity: .8;
}
.gen-btn.classic::before { top: 3px; }
.gen-btn.classic::after  { bottom: 3px; }
.gen-btn.classic:hover   { filter: grayscale(100%) brightness(1.35); }


/* ---- FOLK HORROR: sun-bleached straw and woven wicker ----- */
.gen-btn.folk {
    font-family: "Uncial Antiqua", "Times New Roman", serif;
    color: #3d2f14;
    background:
        repeating-linear-gradient(88deg, rgba(140,115,60,.10) 0 2px, transparent 2px 7px),
        linear-gradient(#e8d9a8, #cdb67b);
    border: 9px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #b07d35 0 5px,
        #8a5f24 5px 10px,
        #d7b170 10px 15px) 9;
    border-radius: 0;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,250,230,.6);
    box-shadow: inset 0 0 26px rgba(120,95,40,.30);
}
.gen-btn.folk:hover {
    color: #241a08;
    background:
        repeating-linear-gradient(88deg, rgba(140,115,60,.10) 0 2px, transparent 2px 7px),
        linear-gradient(#f3e7bf, #dcc68d);
    box-shadow: inset 0 0 26px rgba(120,95,40,.30), 0 0 20px rgba(230,200,120,.35);
}


/* ---- FAMILY FRIENDLY: round, bright, wobbly --------------- */
.gen-btn.family {
    font-family: "Bubblegum Sans", "Comic Sans MS", cursive;
    color: #2b0a3d;
    background: linear-gradient(#ffb547, #ff8c1a);
    border: 6px dotted #6a2ea0;
    border-radius: 26px;
    text-shadow: 0 1px 0 #ffe1b0;
    box-shadow: 0 4px 0 #6a2ea0;
}
.gen-btn.family:hover {
    background: linear-gradient(#ffc76b, #ff9c33);
    animation: wobble .45s ease-in-out;
}
@keyframes wobble {
    0%, 100% { transform: rotate(0deg)     translateY(-2px); }
    25%      { transform: rotate(-2.5deg)  translateY(-2px); }
    75%      { transform: rotate(2.5deg)   translateY(-2px); }
}


/* ---- ALIEN: cold sci-fi type, corner brackets, scan ------- */
.gen-btn.alien {
    font-family: "Orbitron", "Courier New", monospace;
    font-weight: 800;
    color: #79ffd6;
    background: #01130f;
    border: 1px solid #14d3a1;
    letter-spacing: 4px;
    overflow: hidden;
    text-shadow: 0 0 8px #14d3a1;
    box-shadow: inset 0 0 30px rgba(20,211,161,.18);
}
.gen-btn.alien::before {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    background:
        linear-gradient(#14d3a1, #14d3a1) left  top    / 16px 2px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) left  top    / 2px 16px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) right top    / 16px 2px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) right top    / 2px 16px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) left  bottom / 16px 2px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) left  bottom / 2px 16px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) right bottom / 16px 2px no-repeat,
        linear-gradient(#14d3a1, #14d3a1) right bottom / 2px 16px no-repeat;
}
.gen-btn.alien::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -40%;
    height: 40%;
    background: linear-gradient(rgba(20,211,161,0), rgba(20,211,161,.22));
    animation: sweep 3.6s linear infinite;
    pointer-events: none;
}
@keyframes sweep { to { top: 100%; } }
.gen-btn.alien:hover { color: #c8fff0; box-shadow: inset 0 0 44px rgba(20,211,161,.35); }

/* ---- ZOMBIE: chewed lettering, bitten edges --------------- */
.gen-btn.zombie {
    font-family: "Eater", "Creepster", cursive;
    color: #9fbf5a;
    background:
        radial-gradient(ellipse at 28% 20%, rgba(94,26,26,.55) 0%, transparent 55%),
        radial-gradient(ellipse at 76% 82%, rgba(61,79,35,.60) 0%, transparent 60%),
        #0d1207;
    border: 7px ridge #5f7333;
    border-radius: 6px 16px 8px 14px;
    text-shadow: 1px 2px 0 #232c0e, 0 0 14px rgba(159,191,90,.45);
    box-shadow: inset 0 0 26px rgba(0,0,0,.85);
}
/* chunks bitten out of the top and bottom edges */
.gen-btn.zombie::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -3px; bottom: -3px;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20px 0,    var(--panel) 7px, transparent 8px),
        radial-gradient(circle at 38px 100%, var(--panel) 9px, transparent 10px);
    background-size: 82px 100%, 104px 100%;
    background-repeat: repeat-x;
}
.gen-btn.zombie:hover {
    color: #c6e084;
    border-color: #7d9840;
    box-shadow: inset 0 0 26px rgba(0,0,0,.85), 0 0 18px rgba(120,160,60,.45);
}

/* ---- HALLOWEEN: candlelit pumpkin with a carved grin ------ */
.gen-btn.halloween {
    font-family: "Griffy", "Creepster", cursive;
    color: #ffa227;
    background: radial-gradient(ellipse at 50% 115%, #a13d02 0%, #3a1400 45%, #0d0500 80%);
    border: 5px solid #ff7b00;
    border-radius: 10px;
    letter-spacing: 1px;
    text-shadow: 0 0 12px #ff7b00, 0 2px 0 #451700;
    box-shadow: inset 0 -14px 30px rgba(255,123,0,.28), 0 0 14px rgba(255,123,0,.30);
    padding-bottom: 26px;
}
/* the grin along the bottom edge */
.gen-btn.halloween::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    pointer-events: none;
    background:
        linear-gradient(-45deg, transparent 50%, #ff7b00 50%) 0 0 / 22px 14px repeat-x,
        linear-gradient(45deg,  transparent 50%, #ff7b00 50%) 0 0 / 22px 14px repeat-x;
    opacity: .85;
    filter: drop-shadow(0 0 6px rgba(255,123,0,.7));
}
.gen-btn.halloween:hover {
    color: #ffc46b;
    box-shadow: inset 0 -18px 34px rgba(255,123,0,.45), 0 0 24px rgba(255,123,0,.55);
}
.gen-btn.halloween:hover::after { opacity: 1; }

/* ---- RESULT PANEL ----------------------------------------- */

.result-panel {
    margin: 0 0 10px 0;
    padding: 18px;
    min-height: 130px;
    background: #0a0506;
    border: var(--border-w) solid var(--edge);
}

.result-empty { color: var(--muted); font-style: italic; margin: 0; }

.result-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--neon-2);
    margin-bottom: 8px;
}

.result-title { margin: 0 0 4px 0; font-size: 1.9rem; line-height: 1.2; color: #fff; }

.result-meta {
    margin: 0 0 12px 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--glow);
}

.result-synopsis { margin: 0 0 16px 0; max-width: 62ch; }

.again-btn {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    letter-spacing: 1px;
    padding: 7px 16px;
    color: var(--text);
    background: #000;
    border: 2px solid var(--edge);
    cursor: pointer;
}
.again-btn:hover { color: #fff; border-color: var(--neon); }

/* the panel borrows the look of whichever generator was used */
.result-panel.slime    { border: 5px solid #4fa021; border-radius: 20px 30px 22px 28px / 14px 12px 18px 16px; box-shadow: inset 0 -12px 26px rgba(124,252,0,.18); }
.result-panel.slime    .result-title { font-family: "Creepster", cursive; color: #b6ff3c; text-shadow: 0 0 12px #7cfc00; }
.result-panel.creature { border: 6px double #8b5a2b; }
.result-panel.creature .result-title { font-family: "Metal Mania", fantasy; color: #ffb347; }
.result-panel.classic  { border: 8px ridge #b9b9b9; }
.result-panel.classic  .result-title { font-family: "UnifrakturMaguntia", serif; color: #e8e8e8; }
.result-panel.folk { border: 9px solid transparent; border-image: repeating-linear-gradient(45deg, #b07d35 0 5px, #8a5f24 5px 10px, #d7b170 10px 15px) 9; background: #17140c; }
.result-panel.folk .result-title { font-family: "Uncial Antiqua", serif; color: #e8d9a8; letter-spacing: 1px; }
.result-panel.family   { border: 6px dotted #6a2ea0; background: #150626; }
.result-panel.family   .result-title { font-family: "Bubblegum Sans", cursive; color: #ffb547; }
.result-panel.alien    { border: 1px solid #14d3a1; box-shadow: inset 0 0 40px rgba(20,211,161,.15); }
.result-panel.alien    .result-title { font-family: "Orbitron", monospace; color: #79ffd6; letter-spacing: 1px; font-size: 1.5rem; }
.result-panel.zombie { border: 7px ridge #5f7333; background: #0b0f06; }
.result-panel.zombie .result-title { font-family: "Eater", cursive; color: #9fbf5a; }
.result-panel.halloween { border: 5px solid #ff7b00; background: #120700; box-shadow: inset 0 -16px 36px rgba(255,123,0,.16); }
.result-panel.halloween .result-title { font-family: "Griffy", cursive; color: #ffa227; text-shadow: 0 0 12px #ff7b00; }