/* =====================================================================
   Hall of Bans — an animated, atmospheric graveyard of banned accounts.
   Self-contained dark "graveyard" panel; renders on any skin inside the
   main layout. Companion JS: hall-of-bans.js (bats, spirits, lightning,
   coffin rattles). Created by ESAGAMES HOSTING SHIELD SRL
   ===================================================================== */
.hob {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(72px, 9vw, 120px);
    margin: 4px 0 28px;
    color: #dfe6e2;
    background: radial-gradient(130% 100% at 50% -12%, #16241d 0%, #0c1512 38%, #05080a 100%);
    border: 1px solid #1e2f27;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.5);
    isolation: isolate;
}

/* ── Atmosphere layers (all decorative, behind content) ─────────────── */
.hob-sky, .hob-fog, .hob-fog2, .hob-moon, .hob-stars, .hob-ground { position: absolute; pointer-events: none; }

.hob-stars {
    inset: 0; z-index: -3; opacity: .8;
    background:
        radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
        radial-gradient(1px 1px at 28% 8%, #dfeee6, transparent 60%),
        radial-gradient(1.4px 1.4px at 44% 22%, #fff, transparent 60%),
        radial-gradient(1px 1px at 62% 12%, #cfe3d8, transparent 60%),
        radial-gradient(1.2px 1.2px at 74% 26%, #fff, transparent 60%),
        radial-gradient(1px 1px at 90% 16%, #eafff4, transparent 60%),
        radial-gradient(1px 1px at 6% 34%, #fff, transparent 60%),
        radial-gradient(1.3px 1.3px at 52% 6%, #fff, transparent 60%);
    animation: hob-twinkle 4.5s ease-in-out infinite;
}
.hob-moon {
    top: 42px; right: 8%; width: 108px; height: 108px; border-radius: 50%; z-index: -3;
    background: radial-gradient(circle at 38% 34%, #f3f8f0 0%, #d7e6da 46%, #a9c2b0 100%);
    box-shadow: 0 0 0 8px rgba(210,235,220,.05), 0 0 60px 20px rgba(190,225,200,.28), 0 0 140px 40px rgba(120,180,140,.14);
    animation: hob-moonpulse 7s ease-in-out infinite;
}
.hob-moon::before { /* craters */
    content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .5;
    background: radial-gradient(9px 9px at 62% 40%, rgba(120,150,130,.5), transparent 70%),
                radial-gradient(6px 6px at 40% 62%, rgba(120,150,130,.45), transparent 70%),
                radial-gradient(5px 5px at 70% 70%, rgba(120,150,130,.4), transparent 70%);
}
.hob-moon::after { /* a wisp of cloud drifting across the moon */
    content: ""; position: absolute; top: 34%; left: -60%; width: 220%; height: 26%; border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(20,30,26,.55) 40%, rgba(20,30,26,.55) 60%, transparent);
    filter: blur(5px); animation: hob-cloud 16s linear infinite;
}
.hob-sky { inset: 0; z-index: -3; background: radial-gradient(60% 40% at 50% 100%, rgba(64,150,96,.10), transparent 70%); }
.hob-fog  { left: -20%; right: -20%; bottom: 8%;  height: 46%; z-index: -2; background: radial-gradient(60% 100% at 30% 100%, rgba(90,150,110,.10), transparent 70%); filter: blur(22px); animation: hob-fog-drift 26s ease-in-out infinite; }
.hob-fog2 { left: -20%; right: -20%; bottom: 0;   height: 40%; z-index: -2; background: radial-gradient(50% 100% at 70% 100%, rgba(70,130,95,.09), transparent 70%);  filter: blur(26px); animation: hob-fog-drift 34s ease-in-out infinite reverse; }
/* Tombstone + bare-tree + fence horizon */
.hob-ground {
    left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; opacity: .9;
    background: bottom center / cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23070d0a'%3E%3Cpath d='M0 120 L0 96 Q40 84 90 92 T200 90 Q320 80 460 90 T760 88 Q980 80 1160 90 T1440 92 L1440 120 Z'/%3E%3Crect x='120' y='72' width='34' height='30' rx='16'/%3E%3Crect x='250' y='66' width='16' height='40'/%3E%3Crect x='240' y='72' width='36' height='10'/%3E%3Crect x='1040' y='70' width='30' height='34' rx='14'/%3E%3Crect x='1180' y='64' width='16' height='42'/%3E%3Crect x='1170' y='70' width='36' height='10'/%3E%3Cpath d='M600 104 V56 M600 74 l-16 -12 M600 82 l18 -14 M600 66 l-12 -16 M600 70 l14 -18' stroke='%23070d0a' stroke-width='4' fill='none'/%3E%3Cg stroke='%23070d0a' stroke-width='4'%3E%3Cline x1='820' y1='104' x2='820' y2='84'/%3E%3Cline x1='838' y1='104' x2='838' y2='84'/%3E%3Cline x1='856' y1='104' x2='856' y2='84'/%3E%3Cline x1='874' y1='104' x2='874' y2='84'/%3E%3Cline x1='812' y1='90' x2='882' y2='90'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* JS-spawned transient creatures (bats, spirits) + lightning flash */
.hob-bat { position: absolute; z-index: 0; font-size: 20px; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.hob-spirit { position: absolute; z-index: 0; font-size: 26px; pointer-events: none; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 0 10px rgba(190,235,210,.7)); }
.hob-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(80% 60% at 70% 8%, rgba(220,245,255,.5), rgba(180,220,235,.12) 40%, transparent 70%); opacity: 0; }
.hob-flash.on { animation: hob-flash-kf .5s ease-out; }

/* ── Header ─────────────────────────────────────────────────────────── */
.hob-head { text-align: center; max-width: 680px; margin: 0 auto clamp(28px, 4vw, 48px); position: relative; z-index: 1; }
.hob-kicker {
    display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: #6ec592; padding: 5px 12px; border: 1px solid rgba(110,197,146,.32);
    border-radius: 999px; background: rgba(110,197,146,.08); margin-bottom: 16px;
}
.hob-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(34px, 6vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: -.01em;
    color: #f2f5f1; margin: 0 0 12px;
    text-shadow: 0 2px 0 #0a0f0c, 0 0 26px rgba(150,220,180,.3);
    animation: hob-flicker 6s infinite;
}
.hob-sub { color: #9fb2a8; font-size: 15px; line-height: 1.6; margin: 0 auto 18px; }
.hob-count {
    display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
    color: #c7d3cc; padding: 7px 16px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
}
.hob-count b { color: #ff6b6b; font-size: 15px; }

/* ── The yard ───────────────────────────────────────────────────────── */
.hob-yard {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: clamp(20px, 2.6vw, 36px) clamp(12px, 1.6vw, 22px); align-items: start;
}
.hob-grave { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Coffin — wood hexagon, brass nameplate. Rises in (staggered) + gently sways. */
.hob-coffin {
    position: relative; width: 100%; max-width: 154px; aspect-ratio: 3 / 4.2;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 80% 100%, 20% 100%, 0 30%);
    background:
        linear-gradient(120deg, rgba(255,255,255,.06), transparent 40%),
        repeating-linear-gradient(180deg, #4a3220 0 7px, #3c2818 7px 14px),
        linear-gradient(180deg, #4a3220, #2c1d12);
    border: 1px solid #24160c;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14% 12% 16%;
    box-shadow: 0 12px 22px -8px rgba(0,0,0,.7);
    will-change: transform;
    transform-origin: 50% 100%;
    animation:
        hob-rise .7s cubic-bezier(.2,.8,.3,1) backwards calc(var(--i, 0) * 45ms),
        hob-sway 6.5s ease-in-out infinite calc(700ms + var(--i, 0) * 60ms);
    transition: transform .28s cubic-bezier(.2,.7,.3,1), filter .28s ease, box-shadow .28s ease;
}
/* a ghostly green "soul light" that spills out on hover */
.hob-coffin::before {
    content: ""; position: absolute; left: 50%; top: 14%; width: 66%; height: 40%; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(120,235,170,.55), rgba(120,235,170,0) 70%);
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.hob-rip { font-family: 'Georgia', serif; font-weight: 700; font-size: 12px; letter-spacing: .18em; color: #e7ddc6; opacity: .85; margin-bottom: 2px; }
.hob-cross { color: #cdbfa0; font-size: 15px; line-height: 1; margin-bottom: 8px; opacity: .8; }
.hob-plate {
    position: relative; overflow: hidden; display: block; width: 100%; padding: 5px 6px; border-radius: 4px;
    background: linear-gradient(180deg, #e6c976, #c9a24b 55%, #a9822f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.5);
    border: 1px solid #86651f;
}
.hob-plate::after { /* brass gleam sweep */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg);
    animation: hob-shimmer 5.5s ease-in-out infinite calc(var(--i, 0) * 130ms);
}
.hob-name { display: block; text-align: center; color: #2a1e08; font-weight: 800; font-size: 12.5px; line-height: 1.15; letter-spacing: -.01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.hob-skull { font-size: 16px; line-height: 1; margin-top: 9px; filter: grayscale(.2) drop-shadow(0 0 4px rgba(0,0,0,.6)); }
/* Ghost lives on the (unclipped) grave, not inside the clip-path'd coffin, so it
   can float UP and OUT on hover instead of being clipped away. */
.hob-ghost { position: absolute; top: 2px; left: 50%; z-index: 3; transform: translate(-50%, 8px) scale(.8); font-size: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 10px rgba(190,235,210,.7)); transition: transform .55s ease, opacity .55s ease; }

/* Hover — the coffin lifts, glows green, the ghost escapes */
.hob-grave:hover .hob-coffin { transform: translateY(-9px) rotate(-1.4deg); filter: brightness(1.12); box-shadow: 0 20px 34px -10px rgba(0,0,0,.8), 0 0 26px -4px rgba(120,235,170,.4); }
.hob-grave:hover .hob-coffin::before { opacity: 1; }
.hob-grave:hover .hob-ghost { opacity: .95; transform: translate(-50%, -32px) scale(1.05); }

/* Random "trapped soul" rattle (toggled by JS) */
.hob-coffin.rattle { animation: hob-rattle .55s ease-in-out; }

/* Epitaph caption */
.hob-epitaph { text-align: center; max-width: 160px; }
.hob-cause { display: block; font-family: 'Georgia', serif; font-style: italic; font-size: 12.5px; color: #b9c7bf; line-height: 1.35; }
.hob-status { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #7f8f87; margin-top: 4px; }
.hob-status.is-perma { color: #ff6b6b; }
.hob-empty { text-align: center; color: #9fb2a8; font-size: 16px; padding: 40px 0; position: relative; z-index: 1; }

/* Admins-only "resurrect" (unban) button under a coffin */
.hob-unban-form { margin-top: 2px; }
.hob-unban {
    cursor: pointer; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #0c1512; padding: 5px 12px; border-radius: 999px; border: 1px solid #3ea06a;
    background: linear-gradient(180deg, #8ee9b1, #4cc272);
    box-shadow: 0 2px 8px -2px rgba(76,194,114,.6), inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hob-unban:hover { transform: translateY(-1px); box-shadow: 0 7px 16px -4px rgba(76,194,114,.85); filter: brightness(1.07); }
.hob-unban:active { transform: translateY(0); }

/* ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes hob-rise      { from { opacity: 0; transform: translateY(46px) scale(.9) rotate(2deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes hob-sway      { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes hob-fog-drift { 0%,100% { transform: translateX(-6%); } 50% { transform: translateX(6%); } }
@keyframes hob-moonpulse { 0%,100% { box-shadow: 0 0 0 8px rgba(210,235,220,.05), 0 0 60px 20px rgba(190,225,200,.26), 0 0 140px 40px rgba(120,180,140,.12); } 50% { box-shadow: 0 0 0 10px rgba(210,235,220,.07), 0 0 74px 26px rgba(190,225,200,.34), 0 0 160px 48px rgba(120,180,140,.18); } }
@keyframes hob-cloud     { 0% { left: -80%; } 100% { left: 60%; } }
@keyframes hob-twinkle   { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes hob-flicker   { 0%,100% { text-shadow: 0 2px 0 #0a0f0c, 0 0 26px rgba(150,220,180,.3); } 47% { text-shadow: 0 2px 0 #0a0f0c, 0 0 26px rgba(150,220,180,.3); } 48% { text-shadow: 0 2px 0 #0a0f0c, 0 0 8px rgba(150,220,180,.12); } 49% { text-shadow: 0 2px 0 #0a0f0c, 0 0 30px rgba(150,220,180,.42); } 50% { text-shadow: 0 2px 0 #0a0f0c, 0 0 10px rgba(150,220,180,.14); } }
@keyframes hob-shimmer   { 0%, 72% { left: -60%; } 86%, 100% { left: 130%; } }
@keyframes hob-flash-kf  { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .2; } 24% { opacity: .9; } 100% { opacity: 0; } }
@keyframes hob-rattle    { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-2deg); } 40% { transform: translateX(3px) rotate(2deg); } 60% { transform: translateX(-2px) rotate(-1.4deg); } 80% { transform: translateX(2px) rotate(1.4deg); } }
@keyframes hob-bat-fly   { from { transform: translate(0,0) rotate(0); } to { transform: translate(var(--bx, 120vw), var(--by, -40px)) rotate(8deg); } }
@keyframes hob-spirit    { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(-120px) scale(1.15); } }

@media (max-width: 560px) { .hob-yard { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
    .hob-coffin, .hob-ghost, .hob-plate::after, .hob-stars, .hob-moon, .hob-moon::after, .hob-fog, .hob-fog2, .hob-title { animation: none !important; }
    .hob-coffin { transition: none; }
    .hob-grave:hover .hob-coffin { transform: none; }
    .hob-grave:hover .hob-ghost { opacity: 0; }
}