@font-face {
    font-family: "MedievalSharp";
    src: url("/assets/fonts/BreeSerif-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #121214;
    --bg-alt: #18181b;
    --surface: #1e1e22;
    --surface-alt: #26262b;
    --border: #333338;
    --text: #e6e6e9;
    --text-muted: #9a9aa2;
    --accent: #b1502f;
    --accent-hover: #c96038;
    --danger: #a83232;
    --success: #3f7d4f;
    --evento: #2f7fb1;
    --evento-hover: #3f96cc;
    --radius: 3px;

    /* Flame silhouettes reused from the bundled Font Awesome Free kit (fire-flame-curved / fire-flame-simple) */
    --flame-outer-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M153.6 29.9l16-21.3C173.6 3.2 180 0 186.7 0 198.4 0 208 9.6 208 21.3l0 22.1c0 13.1 5.4 25.7 14.9 34.7L307.6 159C356.4 205.6 384 270.2 384 337.7 384 434 306 512 209.7 512L192 512C86 512 0 426 0 320l0-3.8c0-48.8 19.4-95.6 53.9-130.1l3.5-3.5c4.2-4.2 10-6.6 16-6.6 12.5 0 22.6 10.1 22.6 22.6L96 288c0 35.3 28.7 64 64 64s64-28.7 64-64l0-3.9c0-18-7.2-35.3-19.9-48l-38.6-38.6c-24-24-37.5-56.7-37.5-90.7 0-27.7 9-54.8 25.6-76.9z'/%3E%3C/svg%3E");
    --flame-inner-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M372.5 256.5l-.7-1.9C337.8 160.8 282 76.5 209.1 8.5l-3.3-3C202.1 2 197.1 0 192 0s-10.1 2-13.8 5.5l-3.3 3C102 76.5 46.2 160.8 12.2 254.6l-.7 1.9C3.9 277.3 0 299.4 0 321.6 0 426.7 86.8 512 192 512s192-85.3 192-190.4c0-22.2-3.9-44.2-11.5-65.1zm-90.8 49.5c4.1 9.3 6.2 19.4 6.2 29.5 0 53-43 96.5-96 96.5s-96-43.5-96-96.5c0-10.1 2.1-20.3 6.2-29.5l1.9-4.3c15.8-35.4 37.9-67.7 65.3-95.1l8.9-8.9c3.6-3.6 8.5-5.6 13.6-5.6s10 2 13.6 5.6l8.9 8.9c27.4 27.4 49.6 59.7 65.3 95.1l1.9 4.3z'/%3E%3C/svg%3E");
}

* {
    box-sizing: border-box;
}

html, body {
    background: var(--bg);
    color: var(--text);
}

body {
    font-family: "MedievalSharp", "Segoe UI", Georgia, serif;
    font-size: 1.08rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

h1, h2, h3, h4, h5 {
    letter-spacing: .02em;
}

hr {
    border-top-width: 4px;
    opacity: 1;
    color: var(--border);
}

/* Navbar */
.navbar-slice {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1rem;
}

.navbar-slice .navbar-brand {
    padding: 0;
}

.navbar-slice .navbar-brand img {
    height: 64px;
    width: auto;
}

.navbar-slice .nav-link {
    color: var(--text-muted);
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: var(--radius);
}

.navbar-slice .nav-link:hover,
.navbar-slice .nav-link.active {
    color: var(--text);
    background: var(--surface-alt);
}

.navbar-slice .btn-entrar {
    border: none;
    background: var(--surface-alt);
    color: var(--text);
}

.navbar-slice .btn-entrar:hover {
    background: var(--accent);
    color: #fff;
}

.navbar-slice .navbar-toggler {
    border-color: var(--border);
}

.navbar-slice .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e6e6e9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-slice .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(230, 230, 233, .25);
}

.avatar-img {
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* Carousel */
.slice-carousel {
    background: #000;
    border-bottom: 1px solid var(--border);
}

.slice-carousel .carousel-item {
    height: 46vh;
    min-height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.slice-carousel .carousel-slide-empty {
    background: linear-gradient(160deg, #1b1b1e 0%, #0e0e10 100%);
}

.slice-carousel .carousel-caption-box {
    position: relative;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    padding: 2.5rem 1.5rem 1.5rem;
    text-align: left;
}

.slice-carousel .carousel-caption-box h2 {
    font-weight: 700;
    margin-bottom: .25rem;
}

.slice-carousel .carousel-caption-box p {
    color: var(--text-muted);
    margin: 0;
}

/* Sections */
.section-slice {
    padding: 3rem 0;
    border-bottom: 1px solid var(--border);
}

.section-slice h2 {
    margin-bottom: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-slice h2 i {
    color: var(--accent);
}

/* Cards */
.card-slice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    height: 100%;
}

.card-slice-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.card-slice small {
    color: var(--text-muted);
}

.member-card {
    text-align: center;
    padding: .5rem 0;
}

.member-card .avatar-placeholder,
.member-card .avatar-img {
    margin: 0 auto .6rem;
    display: flex;
}

/* Agenda calendar */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-grid .cal-head {
    text-align: center;
    color: var(--text-muted);
    font-size: .8rem;
    padding: .3rem 0;
    text-transform: uppercase;
}

.calendar-grid .cal-day {
    position: relative;
    background: var(--surface-alt);
    border: none;
    border-radius: var(--radius);
    min-height: 70px;
    padding: .35rem;
    font-size: .85rem;
    color: var(--text-muted);
    overflow: visible;
    isolation: isolate;
    transition: background .2s ease, color .2s ease;
}

.calendar-grid .cal-day.empty {
    background: transparent;
}

.calendar-grid .cal-day.has-event {
    background: var(--accent);
    color: #fff;
}

.calendar-grid .cal-day.has-event .cal-num {
    color: #fff;
}

.calendar-grid .cal-day:not(.empty):hover {
    background: #2a1d17;
    color: var(--text);
}

.calendar-grid .cal-day .cal-num {
    font-weight: 600;
    color: var(--text);
}

.calendar-grid .cal-day .cal-event {
    display: block;
    font-size: .72rem;
    color: var(--accent-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-grid .cal-day.has-event .cal-event {
    color: #ffe8d6;
}

.calendar-grid .cal-day.has-event.tipo-evento {
    background: var(--evento);
}

.calendar-grid .cal-day.has-event.tipo-evento .cal-event {
    color: #dff2ff;
}

/* Fire effect - real flame silhouettes (masked from the bundled FA fire icons), shared by
   calendar days, solid buttons and popovers, topped with a burst of rising embers */
@keyframes flame-outer {
    0%   { transform: translate(-50%, 0) scale(1, 1) rotate(0deg); }
    20%  { transform: translate(-56%, -4%) scale(.85, 1.18) rotate(-5deg); }
    45%  { transform: translate(-43%, 2%) scale(1.14, .88) rotate(4deg); }
    70%  { transform: translate(-52%, -3%) scale(.92, 1.16) rotate(-3deg); }
    100% { transform: translate(-50%, 0) scale(1, 1) rotate(0deg); }
}

@keyframes flame-inner {
    0%   { transform: translate(-50%, 0) scale(1, 1) rotate(0deg); opacity: 1; }
    30%  { transform: translate(-40%, -6%) scale(.78, 1.28) rotate(6deg); opacity: .8; }
    60%  { transform: translate(-58%, 3%) scale(1.2, .82) rotate(-6deg); opacity: 1; }
    100% { transform: translate(-50%, 0) scale(1, 1) rotate(0deg); opacity: 1; }
}

@keyframes ember-rise {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(0deg); }
    12%  { opacity: 1; }
    75%  { opacity: .7; }
    100% { opacity: 0; transform: translate(-50%, -220%) scale(.1) rotate(70deg); }
}

.calendar-grid .cal-day:not(.empty),
.btn-accent,
.btn-outline-slice,
.navbar-slice .btn-entrar,
.popover {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.calendar-grid .cal-day:not(.empty)::before,
.calendar-grid .cal-day:not(.empty)::after,
.btn-accent::before,
.btn-accent::after,
.btn-outline-slice::before,
.btn-outline-slice::after,
.navbar-slice .btn-entrar::before,
.navbar-slice .btn-entrar::after,
.popover::before,
.popover::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0) scale(1, 0);
    transform-origin: bottom center;
    transition: opacity .2s ease, transform .25s ease;
    z-index: -1;
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    -webkit-mask-size: contain;
}

.calendar-grid .cal-day:not(.empty)::before,
.btn-accent::before,
.btn-outline-slice::before,
.navbar-slice .btn-entrar::before,
.popover::before {
    width: 96%;
    height: 96%;
    mask-image: var(--flame-outer-svg);
    -webkit-mask-image: var(--flame-outer-svg);
    background: linear-gradient(0deg, #7a1408 0%, #d1350f 35%, #ff5b1a 65%, #ff9a1f 88%, #ffcf6b 100%);
    filter: blur(1px)
        drop-shadow(0 0 6px rgba(255, 122, 26, .85))
        drop-shadow(0 0 16px rgba(255, 61, 0, .65))
        drop-shadow(0 0 28px rgba(255, 30, 0, .4));
}

.calendar-grid .cal-day:not(.empty)::after,
.btn-accent::after,
.btn-outline-slice::after,
.navbar-slice .btn-entrar::after,
.popover::after {
    width: 58%;
    height: 72%;
    mask-image: var(--flame-inner-svg);
    -webkit-mask-image: var(--flame-inner-svg);
    background: linear-gradient(0deg, #ff7a1a 0%, #ff9224 30%, #ffce54 65%, #fff9e0 100%);
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px rgba(255, 220, 130, .8));
}

.calendar-grid .cal-day:not(.empty):hover::before,
.btn-accent:hover::before,
.btn-outline-slice:hover::before,
.navbar-slice .btn-entrar:hover::before {
    opacity: 1;
    transform: translate(-50%, 0) scale(1, 1);
    animation: flame-outer .8s ease-in-out infinite;
}

.calendar-grid .cal-day:not(.empty):hover::after,
.btn-accent:hover::after,
.btn-outline-slice:hover::after,
.navbar-slice .btn-entrar:hover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1, 1);
    animation: flame-inner .5s ease-in-out infinite;
}

/* Popovers keep the flame lit the whole time they're open, no hover needed */
.popover::before {
    opacity: 1;
    transform: translate(-50%, 0) scale(1, 1);
    animation: flame-outer .8s ease-in-out infinite;
}

.popover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1, 1);
    animation: flame-inner .5s ease-in-out infinite;
}

.btn-sm.btn-accent::before,
.btn-sm.btn-outline-slice::before,
.navbar-slice .btn-entrar::before {
    width: 74%;
    height: 74%;
}

.btn-sm.btn-accent::after,
.btn-sm.btn-outline-slice::after,
.navbar-slice .btn-entrar::after {
    width: 44%;
    height: 54%;
}

.popover::before,
.popover::after {
    width: 42%;
    height: 38%;
}

/* Embers - extra rising flame flecks injected by assets/js/fire.js, one burst per trigger */
.ember {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 16%;
    height: 22%;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    mask-image: var(--flame-inner-svg);
    -webkit-mask-image: var(--flame-inner-svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    background: linear-gradient(0deg, #ff7a1a 0%, #ffce54 55%, #fff9e0 100%);
    mix-blend-mode: screen;
}

.ember:nth-of-type(1) { left: 30%; animation-delay: 0s; animation-duration: 1.3s; }
.ember:nth-of-type(2) { left: 40%; animation-delay: .25s; animation-duration: 1.6s; }
.ember:nth-of-type(3) { left: 50%; animation-delay: .5s; animation-duration: 1.4s; }
.ember:nth-of-type(4) { left: 60%; animation-delay: .75s; animation-duration: 1.7s; }
.ember:nth-of-type(5) { left: 70%; animation-delay: 1s; animation-duration: 1.5s; }
.ember:nth-of-type(6) { left: 35%; animation-delay: 1.25s; animation-duration: 1.8s; }
.ember:nth-of-type(7) { left: 55%; animation-delay: 1.5s; animation-duration: 1.3s; }
.ember:nth-of-type(8) { left: 65%; animation-delay: 1.75s; animation-duration: 1.6s; }

.btn-accent:hover .ember,
.btn-outline-slice:hover .ember,
.navbar-slice .btn-entrar:hover .ember,
.calendar-grid .cal-day.has-event:hover .ember,
.popover .ember {
    animation-name: ember-rise;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.agenda-upcoming li {
    border-bottom: 1px solid var(--border);
    padding: .5rem 0;
}

.agenda-upcoming li:last-child {
    border-bottom: none;
}

/* Personagens - RPG selector (pills, no boxed panels, sleek like Membros) */
.rpg-pills {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.rpg-pills .nav-link {
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: 999px;
    padding: .4rem 1rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    font-size: .9rem;
}

.rpg-pills .nav-link:hover {
    color: var(--text);
}

.rpg-pills .nav-link.active {
    background: var(--accent);
    color: #fff;
}

/* Forms / generic surfaces */
.surface-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.form-control, .form-select {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
}

.form-control:focus, .form-select:focus {
    background: var(--bg-alt);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(177, 80, 47, .25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    color: var(--text-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.btn-accent,
.btn-outline-slice,
.navbar-slice .btn-entrar {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: none;
}

.btn-accent {
    background: var(--accent);
    color: #fff;
}

.btn-accent:hover {
    background: var(--accent-hover);
    color: #fff;
}

.btn-outline-slice {
    color: var(--text);
    background: var(--surface-alt);
}

.btn-outline-slice:hover {
    background: #3a2c26;
    color: var(--text);
}

table {
    color: var(--text);
}

.table-slice {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
}

.badge-admin {
    background: var(--accent);
}

.badge-online, .badge-offline {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
}

.badge-online {
    background: rgba(63, 125, 79, .18);
    color: #6fcf87;
}

.badge-offline {
    background: rgba(154, 154, 162, .12);
    color: var(--text-muted);
}

.badge-online .dot, .badge-offline .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.badge-online .dot {
    background: #6fcf87;
}

.badge-offline .dot {
    background: var(--text-muted);
}

/* Auth pages */
.auth-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
}

/* Forum */
.thread-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .75rem;
}

.comment-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem;
    margin-bottom: .6rem;
}

.comment-item img, .thread-item img.post-img, .thread-full img.post-img {
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-top: .5rem;
}

/* Popover (calendar session details) */
.popover {
    --bs-popover-max-width: 280px;
    --bs-popover-bg: var(--surface);
    --bs-popover-border-color: var(--border);
    --bs-popover-header-bg: var(--surface-alt);
    --bs-popover-header-color: var(--text);
    --bs-popover-body-color: var(--text);
    font-size: .9rem;
}

.popover-header {
    font-weight: 600;
}

.popover-evento p {
    color: var(--text-muted);
}

.popover-evento + hr {
    border-color: var(--border);
    opacity: 1;
    margin: .5rem 0;
}

.calendar-grid .cal-day.has-event {
    cursor: pointer;
}

/* Member carousel (forum page) */
.membros-carrossel {
    margin-bottom: 2rem;
}

.membros-carrossel .carousel-item {
    padding: .5rem 2.5rem 1.5rem;
}

.membros-carrossel .carousel-control-prev,
.membros-carrossel .carousel-control-next {
    width: 2rem;
    filter: invert(1);
    opacity: .6;
}

.membros-carrossel .member-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: .85rem .5rem;
}

.membros-carrossel .member-card .badge-online,
.membros-carrossel .member-card .badge-offline {
    margin-top: .35rem;
}

/* Footer */
.footer-slice {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    padding: 1.25rem 0;
    font-size: .85rem;
    text-align: center;
}

/* Admin */
.admin-nav .nav-link {
    color: var(--text-muted);
    border: 1px solid transparent;
}

.admin-nav .nav-link.active {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-alt);
}

.text-muted-slice {
    color: var(--text-muted) !important;
}