/* top of the file, outside any media query */
@property --vw100 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}


:root {

    /*  Color palette  */
    --color-bg:         #0a0014;
    --color-panel:      #1a0a2e;
    --color-panel-alt:  #2a1545;
    --color-text:       #d8b8ff;
    --color-text-dim:   #8866aa;
    --color-accent:     #bb259d;
    --color-accent-2:   #7e32d0;
    --color-link:       #ff66cc;
    --color-link-hover: #ffaaff;
    --color-border:     #663399;
    --color-error:      #ff3366;
    --color-success:    #66ff99;

    --vw100: 100vw;
    

    /* Spacing scale — fluid, scales with viewport like the text scale */
    --space-xxs: clamp(1px,   0.05rem + 0.1vw,  3px);
    --space-xs:  clamp(2px,   0.1rem  + 0.2vw,  6px);
    --space-sm:  clamp(4px,   0.2rem  + 0.4vw, 10px);
    --space-md:  clamp(8px,   0.4rem  + 0.8vw, 20px);
    --space-lg:  clamp(16px,  0.8rem  + 1.2vw, 32px);
    --space-xl:  clamp(24px,  1.2rem  + 1.6vw, 48px);

    /* Spacing scale, use the small_size_font_research for references
    and the Utopia site https://utopia.fyi/type/calculator/ */
    --text-3xs:  clamp(0.512rem, 0.555rem + -0.0555vw, 0.5425rem);
    --text-2xs:  clamp(0.64rem,  0.655rem + -0.0201vw, 0.651rem);
    --text-xs:   clamp(0.694rem, 0.661rem + 0.149vw,   0.844rem);
    --text-sm:   clamp(0.833rem, 0.781rem + 0.227vw,   1rem    );
    --text-base: clamp(1rem,     0.909rem + 0.455vw,   1.25rem);
    --text-lg:   clamp(1.2rem,   1.045rem + 0.773vw,   1.777rem);
    --text-xl:   clamp(1.44rem,  1.182rem + 1.288vw,   2.369rem);
    --text-2xl:  clamp(1.728rem, 1.296rem + 2.159vw,   3.157rem);
    --text-3xl:  clamp(2.074rem, 1.371rem + 3.514vw,   4.209rem);

    /* Typography  */
    --font-body: 'VT323', 'Courier New', monospace;
    --font-display: 'Press Start 2P', 'Courier New', monospace;
    --font-cursive: "Neonderthaw", cursive;
    --font-retro: "Hardman", sans-serif;

    --main-row-min: 440px
}


@font-face {
    font-family: 'Hardman';
    src: url('../fonts/quantum.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'VT323';
    src: url('../fonts/vt323-v18-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('../fonts/press-start-2p-v16-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neonderthaw';
    src: url('../fonts/neonderthaw-v8-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Reset: MAX wipe browser defaults. before and 
after the tag, for example <span class="tag">speedrun</span> 
will show [speedrun] because it has object class=tag to show
before content: "["; and after content: "]"; --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* --- removes the bullets and numbers from lists ---*/
ul, ol {
    list-style: none;
}

/* --- emoves the default blue + underline from links --- */
/* the super default value, then "a" will set agint, but here 
 the reason for it is to make a "plan b" if somehow somthing brakes*/
a {
    color: inherit;  
    text-decoration: none;
}


/*--- removes the default button chrome ---*/
button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

/*--- images can never be wider than their container (prevents layout breakage) ---*/
img {
    max-width: 100%;
    display: block;
}


html {  
    height: 100% 
}

/* --- Base body styles --- */
/* BUGFIX: removed .site-shell { min-width: 1200px; } — it forced horizontal
   scrolling on every screen narrower than 1200px and made responsive
   breakpoints impossible. The desktop grid is now the default and
   media queries below restack it for tablet/phone. */


body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.1;              /* box-sizing: border-box, 1 unit = 1% of the height */
    letter-spacing: 0.02em;         /* slight horizontal breathing */
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.site-header {                  
    background-color: var(--color-border);
}


/* BUGFIX: removed duplicate temporary a / a:hover block — the full link
   rules further down already define these and the duplicate only
   caused confusion about which rule wins. */




/*---------------------------------------------------------------------------- */


/* --- Headings --- */
/* --- all the titels and small heading above windows --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-accent);
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);         /* breathing room below each heading */
}

/*h1 {
    font-size: var(--text-3xl);
    color: var(--color-accent-2);
}*/

h2 {
    font-size: var(--text-xl);
}

h3 {
    font-size: var(--text-xl);
    color: var(--color-text);
}

h4, h5, h6 {
    font-size: var(--text-lg);
    color: var(--color-text);
}

/* Links */

a {
    color: var(--color-link);
    text-decoration: underline dotted;          /*instead of the browser default solid underline, a dotted line*/
    text-decoration-color: var(--color-link);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;             /* we can use border-bottom: 1px dotted var(--color-link) */
    transition: color 0.15s ease, border-color 0.15s ease;  
}

a:hover {
    color: var(--color-link-hover);
    text-decoration-color: var(--color-link-hover);  /* BUGFIX: was border-bottom-color,
                                    but links have no border — the dotted underline
                                    is a text-decoration, so hover never recolored it */
}


/* scrollbar */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;             /* for horizontal scrollbars too */
}

::-webkit-scrollbar-track {   /*empty channel where the thumb slides.*/
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

::-webkit-scrollbar-thumb {   /*the draggable part*/
    background: var(--color-accent);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-2);
}

/* Firefox */
* {
    scrollbar-width: thin;     /*slim or normal.*/
    scrollbar-color: var(--color-accent) var(--color-bg);
}

.confirm-modal {
    display: none;                    /* hidden until JS adds .open */
    position: fixed;
    inset: 0;                         /* cover the whole viewport */
    background: var(--color-bg);      
    z-index: 1000;
    align-items: center;              /* these two center the box... */
    justify-content: center;
}
.confirm-modal.open { display: flex; }   /* ...once it's shown */

.confirm-box {
    background: var(--color-border);              
    border: 1px solid var(--color-border);        /* neon pink — your accent */
    box-shadow: 0 0 18px #ff4fd8;
    padding: var(--space-xxs);
    max-width: 320px;
}
.confirm-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

/* the >> menu cursor — retro terminal style */
.confirm-btn {
    position: relative;
    padding-left: 2.2rem;          /* reserve room so nothing shifts */
}
.confirm-btn::before {
    content: ">>";
    position: absolute;
    left: 0.8rem;
    opacity: 0;                    /* hidden until this option is "selected" */
    transition: opacity 0.08s ease;
}
.confirm-btn:hover::before,
.confirm-btn:focus::before {
    opacity: 1;                    /* cursor appears on the hovered/focused option */
}

/*Make it blink like a real cursor*/
@keyframes cursor-blink { 50% { opacity: 0; } }
.confirm-btn:hover::before,
.confirm-btn:focus::before {
    opacity: 1;
    animation: cursor-blink 1.5s steps(1) infinite;
}
.confirm-modal:focus { outline: none; }

/*error 429*/
.toast {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%) translateY(200%);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-panel);
    border: 1px solid var(--color-accent-2);
    color: var(--color-text);
    font-size: var(--text-xs);
    z-index: 1000;
    max-width: 90vw;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.toast.open {
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   General site shell grid for homepage
   ============================================================ */

.site-shell {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 200px 1fr 200px; /* nav stay stay the same but the logo changes bc of fr */
    grid-template-rows: auto auto minmax(var(--main-row-min), 1fr) auto;  /* auto tall as it need to be 
                                                        minmax(0, 1fr)-> doesent grow above 1fr*/
    grid-template-areas:
        "header header header"
        "aside  banner banner"
        "aside  main   misc"
        "footer footer footer";
    gap: var(--space-xxs);
    padding: var(--space-xxs);
    padding-top: 0;
    height: 100dvh;             /* 100% of the site */
    flex: 1 1 auto;                 /* restore the one number that got reset; grid
                                        layout inside is completely unaffected */
}

.site-banner { grid-area: banner;}
.site-aside  { grid-area: aside; }
.site-main   { grid-area: main; }
.site-misc   { grid-area: misc; }
.site-header { grid-area: header; }   
.site-footer { grid-area: footer; }

/* ------------------------------------------------------------- */
/*------------------ GRID PARENT STYLE --------------------------*/


/* one line header  */
.site-header {
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-sm);     /* BUGFIX: --text-md doesn't exist in :root */
    color: var(--color-text-dim);
    line-height: 1.1;               /* BUGFIX: 0.7 clipped descenders (y, g, p) */
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}

.site-header .header-center {
    color: var(--color-accent);
    text-align: center;
    flex: 1;
}

.site-banner {
    display: grid;
    grid-template-columns: 1fr 250px;    /* BUGFIX: was 200px but .banner-avatar is 250px wide, so it overflowed its column */
    grid-template-rows: 1fr;
    align-items: center;
    /*background: var(--color-panel);*/
    background-image: url('../images/logo2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--color-border);
    padding: 0;
    min-height: 220px;                    /* enough room for the avatar */
    gap: var(--space-md);
    margin: 0;
}

/* --- Title column --- */
.banner-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 50px;
}

.banner-retro {
    font-family: var(--font-retro);
    font-size: var(--text-3xl) !important;
    font-optical-sizing: auto;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(180deg,
        rgba(0, 40, 201, 1) 0%,
        rgba(107, 243, 255, 1) 25%,
        rgba(27, 49, 158, 1) 45%,
        rgba(181, 93, 232, 1) 60%,
        rgba(72, 32, 99, 1) 80%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: brightness(1);
    -webkit-text-stroke: 4px var(--color-accent-2);   /* BUGFIX: removed duplicate
                                    -webkit-text-stroke above — last one always won */
    transition: filter 0.4s ease-in;
}  /* css dont have transition between 2 gtadients
                                        so the walkaround is to change brightness */


.banner-neon {
    font-size: var(--text-3xl) !important;
    font-family: var(--font-cursive);
    color: #fff;
    text-decoration: none;
    animation: neon-pulse 3s ease-in-out infinite;
    font-size: 5rem;
    margin: -10px;
    transform: rotate(-5deg);
    display: inline-block;
    filter: drop-shadow(0 0 10px #ff66cc);
    padding-left: 150px;

}


.banner-neon a::after {
    content: '';
    display: block;
    width: 70%;
    height: 3px;
    margin: -5px auto 0;
    background: #ff66cc;
    box-shadow: 0 0 5px #ff66cc, 0 0 15px #ff66cc;
    transform: rotate(-3deg);
    border-radius: 5px;
}


@keyframes neon-pulse {
    0%, 100% {
        text-shadow:
            0 0 5px #fff,
            0 0 10px #ff66cc,
            0 0 20px #ff66cc,
            0 0 40px #c266ff;
    }
    50% {
        text-shadow:
            0 0 3px #fff,
            0 0 7px #ff66cc,
            0 0 15px #ff66cc,
            0 0 30px #c266ff;
    }
}
    

.site-banner h1:hover {
    filter: brightness(1.25);
}

header a {
    text-decoration: none;          /* BUGFIX: was 'None' */
}




/* Avatar — bottom-right inside its grid cell */
.banner-avatar {
    align-self: end;       /* bottom of the grid cell */
    justify-self: end;     /* right of the grid cell */
    width: 250px;
    height: 199px;         /* 250 × (382/480) = 199, preserves aspect ratio */
    position: relative;
}


.banner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;       /* preserves aspect ratio inside the box */
}

.banner-onset,
.banner-loop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* or 'fill' since the box now matches the ratio */
}

.banner-loop {
    opacity: 0;         /* hidden initially */
}

.banner-avatar.onset-done .banner-onset {
    opacity: 0;         /* hide onset after it's done */
}

.banner-avatar.onset-done .banner-loop {
    opacity: 1;         /* show loop */
}




.site-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    /*background: var(--color-panel-alt);*/
    border: 1px solid var(--color-border);    
    padding: var(--space-md);


}

.site-aside > h3:first-child {
    min-width: fit-content;
    align-self: center;
    /* BUGFIX: removed grid-column — .site-aside is flex, not grid, so it did nothing */
}
.aside-nav {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    overflow-wrap: anywhere;            /* for log users name */
    text-align: center;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    /* BUGFIX: removed max-height: 100vw — it capped the nav's HEIGHT by the
       viewport WIDTH, which is tiny on phones and huge on monitors */
}
.aside-nav  > h3:first-child {
        align-self: center;
        min-width: 100%;
}


.aside-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 100%;
    /* BUGFIX: removed grid-column — parent is flex, not grid */
}


.name{
    font-size: var(--text-xs) !important;
}


.aside-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;       /* turn off the underline on nav links */
    outline: 1px dashed var(--color-accent-2);
    
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;

}

.aside-nav .nav-text {
    font-size: var(--text-sm);

}

.aside-nav .nav-text::before {
    content: ":: ";
    color: var(--color-accent-2);
    flex-shrink: 0;
}

.aside-nav .nav-text::after {
    content: " ::";
    color: var(--color-accent-2);
    flex-shrink: 0;
    margin-left: auto;           /* push trailing :: to the far right */
}



/*.aside-panel {}*/

.aside-panel h3 {
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.site-main {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    min-height: 0;

}

.site-main h2{
    margin-bottom: var(--space-xxs);
}

.searching {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.admin-vod-list { table-layout: fixed; width: 100%; }

.admin-vod-list th:nth-child(1) { width: auto; }  /* Title — give it the most */
.vod-list-list  th:nth-child(1) { width: 30%; }   /* Title on user  */
.admin-vod-list th:nth-child(2) { width: 10%; }  /* Category */
.admin-vod-list th:nth-child(3) { width: 16%; }  /* Game */
.admin-vod-list th:nth-child(4) { width: 14%; }  /* Stream date */
.admin-vod-list th:nth-child(5) { width: 10%; }  /* Added */
.admin-vod-list th:nth-child(6) { width: 8%;  }  /* Hidden? */
.admin-vod-list th:nth-child(7) { width: 14%; }  /* Actions */

.admin-vod-list td:nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-vod-list td:nth-child(3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box .search-htmx-indicator{
  color: #888;

}

.htmx-indicator{
    animation: spin 0.3s linear infinite;
}

@keyframes spin{
    from   { transform: rotate(0deg);   }
    to     { transform: rotate(360deg); }
}

.site-misc {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    min-height: 0;
    padding-left: var(--space-sm);
}

.misc-panel {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    flex: 1;                                /* elements didtributed at normal rate */
    min-height: 0;

}

.misc-panel h3 {
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.site-footer {
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
    padding: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-dim);
}


/* ============================================================
                homepage main grid (2 rows)
   ============================================================ */


.home-grid {
    display: grid;
    background-image: url('../images/wall.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
        "feature feature feature chat   chat   clip"
        "patreon patreon events  events games clip";
    gap: var(--space-sm);
    height: 100%;

}

.home-feature { grid-area: feature; }   /* that element gets placed in the "feature" cells. */
.home-chat    { grid-area: chat; }
.home-patreon { grid-area: patreon; }
.home-games   { grid-area: games; }
.home-events  { grid-area: events; }
.home-clip    { grid-area: clip; }

/* Shared style for each panel inside the home grid */
.home-grid > section {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    padding: var(--space-xxs);
    min-height: 0;
    overflow: auto;
}

.home-grid > section h3 {
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.panel-body{
    background-color: var(--color-accent-2);
}

/* ============================================================
                shared panel class (win95)
   ============================================================ */


.panel {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    padding: 0;                          /* padding now lives in body, not panel */
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}


.panel:hover {
    border-color: var(--color-accent);
    transition: border-color 0.2s ease;
}



/* The title bar — first h3 child becomes the panel's title strip */
.panel > h3:first-child {
    background: var(--color-panel-alt);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-xxs) var(--space-xxs);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    text-align: center;
    letter-spacing: 0.075em;
    flex-shrink: 0;
    position: relative;
    line-height: 0.75;
}
.panel::before,
.panel::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-accent-2);
    pointer-events: none;   
}

.panel::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.panel::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Decorative brackets around the title text 
called pseudo-elements notin HTML because its for decorations*/
.panel > h3:first-child::before {
    content: ":: ";
    color: var(--color-accent-2);
}

.panel > h3:first-child::after {
    content: " ::";
    color: var(--color-accent-2);
}

/* Everything inside .panel that's NOT the title gets padding */
.panel > *:not(h3:first-child) {
    padding: var(--space-xxs);
    min-height: 0;
}


.aside-filler {
    /* .panel already makes this a flex column — do NOT override to block,
       the flex column is what lets the image shrink instead of overflow */
    text-decoration: none;
    color: inherit;
    overflow: hidden;            /* hard guarantee: nothing ever spills out */
    min-height: 0;               /* the panel itself may shrink in the aside column */
    transition: filter 0.2s, transform 0.2s;   /* on base state → animates both ways */
}
.merch-image {
    display: block;
    width: 100%;
    flex: 0 1 100px;             /* WANTS 100px tall, but MAY shrink when the
                                    column runs out of room (short windows) */
    min-height: 0;               /* without this, flex refuses to shrink it */
    object-fit: contain;           /* when shrunk, crop the image — never distort,
                                    never overflow */
    object-position: center;
}

.aside-filler:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}
/* ============================================================
             video panel
   ============================================================ */

   .home-feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.home-feature h3 {
    font-size: var(--text-sm);      /* BUGFIX: was var(--space-md) — a spacing
                                       variable used as a font size */
}

.home-feature iframe {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    border: none;
}
#home-player {
    display: contents;
}

/*home-player h3*/

.home-panel-tabs{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    text-decoration:  underline dashed 1px;
    background: var(--color-panel-alt);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-xxs) var(--space-xxs);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    line-height: 0.75;
 
}

.home-panel-tabs button::before {
    content: ":: ";
    color: var(--color-accent-2);
}

.home-panel-tabs button::after {
    content: " ::";
    color: var(--color-accent-2);
}

.home-panel-tabs button:hover {
    color: var(--color-link);
}
/* ============================================================
             patreon panel
   ============================================================ */

.patreon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    font-size: var(--text-sm)
}

.patreon-post {
    line-height: 1;
}

.patreon-title {
    color: var(--color-link);
    font-weight: bold;
    margin-right: var(--space-xxs);  /* BUGFIX: --space-2xs doesn't exist */
}

.patreon-title:hover {
    color: var(--color-link-hover);
}

.patreon-date {
    font-size: var(--text-2xs);
    color: var(--color-text-dim);
    margin-right: var(--space-xxs);
}

.patreon-tier {
    font-size: var(--text-3xs);
    color: var(--color-accent);
    font-weight: bold;
}

.patreon-summary {
    font-size: var(--text-xs)
}

.game-list{
    font-size: var(--text-sm);
}
.game-title{
    color: var(--color-text);
    font-weight: bold;
}
.game-status{
    font-size: var(--text-2xs);
    color: var(--color-text-dim);
    margin-right: var(--space-xxs);;
}
.game-rate{
    font-size: var(--text-sm);
}
.game-summary{
    font-size: var(--text-sm);
}

.home-games,
.home-events,
.home-patreon {
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
                        watch page
   ============================================================ */


/*----The main grid proportions------*/
.watch-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--space-md);
    height: 100%;
    min-height: 0;
}

.watch-player-panel {
    min-height: 0;
}

.watch-info-panel {
    min-height: 0;
    overflow: auto;
}

/*----- style of the left box:-----*/
/*media player box*/
.watch-player {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    aspect-ratio: 16 / 9;       /* modern CSS. literally ratio */
    width: 100%;
}

.watch-player iframe {
    position: relative;
    width: 100%;
    height: 100%;                   /* BUGFIX: was min-height — height is what
                                       fills the aspect-ratio box predictably */
    border: 0;
    display: block;  /* removes a tiny default whitespace gap below the iframe */

} 

/* BUGFIX: removed duplicate .home-embed block — the absolute-positioned
   version below already sets width/height/border and always won. */

/* chat box if active zoomed out
in special flex box so it will know the heigh */
.embed-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.home-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-chat .home-embed {
    width: 133%;
    height: 133%;
    transform: scale(0.75);
    transform-origin: top left;
}

/* all the pagination stuff on home player */
.home-chat { display: flex; flex-direction: column; }   /* probably already is */
#home-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.home-vod-list { flex: 1; min-height: 0; overflow: hidden; }
.home-vod-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* long titles become "Assassins Creed Sh…" */
}
.home-vod-list li a {
    display: inline-block;
    max-width: calc(100% - 90px);   /* reserve room for "— category" */
    vertical-align: bottom;   /* keeps baseline aligned with the "— category" text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;   /* for the ::after tooltip */
}
.home-vod-list li a:hover::after {
    content: attr(title);
    position: fixed;
    left: 0;
    top: 100%;
    background: var(--color-panel-alt);
    border: 1px solid var(--color-accent-2);
    color: var(--color-text);
    padding: var(--space-xxs) var(--space-xs);
    font-size: var(--text-xs);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}
.home-pagination { flex: none; }

/* tooltip appearance in site style */
.site-tooltip {
    position: fixed;
    background: var(--color-panel-alt);
    border: 1px solid var(--color-accent-2);
    color: var(--color-text);
    padding: var(--space-xxs) var(--space-xs);
    font-size: var(--text-base);
    white-space: nowrap;
    z-index: 10000; /*puts it above anything else*/
    pointer-events: none; /*means the tooltip can never be moused-over itself (it just floats visually above things).*/
    opacity: 0;
    transition: opacity 0.15s ease;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-tooltip.visible {
    opacity: 1;
}





/* ---- info column ---- */
/*admin box*/
.admin-table-wrapper {
    height: 100%;
    overflow: auto;
}

.admin-table-wrapper table {
    width: 100%;
}

.watch-admin-links {
    font-size: var(--text-sm);
}

.watch-admin-links a {
    color: var(--color-text-dim);
    margin-right: var(--space-xs);
}

.watch-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
}

.watch-controls a {
    padding: var(--space-xxs) var(--space-sm);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    color: var(--color-link);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.watch-controls a:hover {
    border-color: var(--color-accent);
    color: var(--color-link-hover);
}

.watch-position {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.watch-details {
    line-height: 1.6;
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}

.watch-details li {
    padding: var(--space-xxs) 0;
}


/* ---- add to playlist pannel ---- */

.watch-playlist-add {
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
    padding: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}

.watch-playlist-add strong {
    margin-right: var(--space-xs);
    color: var(--color-text-dim);
    width: 100%;
}

.watch-playlist-add .add-form {
    display: inline;
}

.watch-playlist-add button {
    padding: var(--space-xxs) var(--space-xs);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    color: var(--color-link);
    font-size: var(--text-xs);
    cursor: pointer;
}

.watch-playlist-add button:hover {
    border-color: var(--color-accent);
    color: var(--color-link-hover);
}


/* ---- playlist entries section (inside info column) ---- */

.watch-playlist-section h4 {
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-align: center;
    margin: var(--space-md) 0 var(--space-xs);
    padding-bottom: var(--space-xxs);
    border-bottom: 1px solid var(--color-border);
}

.watch-playlist {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    font-size: var(--text-sm);
}

.watch-playlist li {
    padding: var(--space-xxs) var(--space-xs);
    border-left: 2px solid transparent;
}

.watch-playlist li:hover {
    background: var(--color-panel-alt);
}

.watch-playlist li.is-current {
    background: var(--color-panel-alt);
    border-left-color: var(--color-accent);
    color: var(--color-accent);
}

.watch-playlist a {
    text-decoration: none;
    color: inherit;
}

.watch-current-marker {
    color: var(--color-accent);
}

/* CLIPS */
.home-clip {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.home-clip.panel h3{
    font-size: var(--text-xs) 
}
.home-clip iframe {
    position: relative;
    flex: 1; 
    width: 100%;
    height: 100%;
    border: none;

}

/* ============================================================
                 forms and inputs
   ============================================================ */

input[type="text"],     /* overwriting the default inputs forms */
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: var(--space-xxs) var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-base);
    width: 100%;
}


textarea {
    min-height: calc(3*var(--space-md));
    resize: vertical;       /* user can resize imput area if he want to*/
}

input:focus,
textarea:focus,
select:focus {
    outline: none;          /* removes the focus ring. it will be raplaced */
    border-color: var(--color-accent);
}

input::placeholder,     /*  the gray "Enter your username" text inside empty inputs */
textarea::placeholder {
    color: var(--color-text-dim);
}


/* submit button (interactive) */

button[type="submit"],
input[type="submit"],
.btn {                      /* .btn class for links that should look like buttons  */
    background: var(--color-panel-alt);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, color 0.15s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

button[type="submit"]:disabled,
input[type="submit"]:disabled,
.btn:disabled {
    border-color: var(--color-text-dim);
    color: var(--color-text-dim);
    cursor: not-allowed;
}

.btn-danger {           /* .btn-danger modifier — for delete/destructive actions.  */
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-danger:hover {
    background: var(--color-error);
    color: var(--color-bg);
}


/* Field labels and form layout */

form label {
    display: block;             /* display: block on labels */
    font-size: var(--text-sm);
    color: var(--color-text-dim);
    margin-bottom: var(--space-xxs);
    letter-spacing: 0.05em;
    height: 20px;

}

form .form-field {              /* wrap each label + input pair in */
    margin-bottom: var(--space-sm);
}

form .form-field .field-error {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: var(--space-xxs);
}

form .form-field .field-help {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    margin-top: var(--space-xxs);
}

.form-page {
    max-width: 32em;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-panel {
    padding: var(--space-md);
}

.form-page h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}

/* Admin dashboards*/

/* ---- tables ---- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

th, td {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

thead th {
    background: var(--color-panel-alt);
    color: var(--color-accent);
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--color-accent);
}

tbody tr:hover {
    background: var(--color-panel-alt);
}

tbody td .row-actions {
    display: flex;
    gap: var(--space-sm);
}

tbody td .row-actions a {
    font-size: var(--text-xs);
}


/* fixing the flash messeges */

.flash-messages {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.flash {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
    border-left: 4px solid var(--color-border);
    background: var(--color-panel-alt);
    font-size: var(--text-sm);
}

.flash-success {
    border-left-color: var(--color-success);
}

.flash-error {
    border-left-color: var(--color-error);
    color: var(--color-error);
}

.flash-info {
    border-left-color: var(--color-accent-2);
}

.flash-warning {
    border-left-color: var(--color-accent);
}


/* ============================================================
                multi-column form for upload/edit
   ============================================================ */

.vod-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xxs);
    padding: 0;
    justify-content: space-evenly;
    
    
}

.form-page-wide {
    max-width: 100%;            /* override the 32em from form-page */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.vod-form > h3:first-child {        /*titel whole row*/
    grid-column: 1 / -1;
}

.vod-form .form-field {
    margin-bottom: 0;
    padding: 0;
    grid-column: span 2;        /* default: 1/3 width */
}

.vod-form .field-half {
    grid-column: span 3;        /* half row */
}

.form-page-wide .vod-form {
    flex: 1;
    min-height: 0;
}

.vod-form .field-wide input[type="submit"], 
.vod-form button[type="submit"]{
    grid-column: 1 / -1;        /* full row */
}

.form-field small {
    font-size: var(--text-xs);      /* BUGFIX: 'size' is not a CSS property */
}

.vod-form input[type="submit"],
.vod-form button[type="submit"] {
    max-width: 16em;
    margin: 0 auto;
    display: block;
    justify-content: center;


}
.vod-form .field-half textarea{

    resize: none;
  
}

.vod-form .form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

/*checkbox*/
.vod-form .form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.vod-form .form-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.vod-form .form-checkbox label {
    display: inline;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-dim);
    cursor: pointer;
}

.field-hint {                   /*hint box on tags*/
    display: inline-block;
    color: var(--color-accent-2);
    cursor: help;
    font-size: var(--text-sm);
    margin-left: var(--space-xs);
}

.tag-suggestions ul{           /*hint box on tags*/
    display: flex;           /* Aligns items side-by-side */
    flex-direction: row;     /* Forces them into a row layout */
    flex-wrap: wrap;         /* Allows items to move to a new line if needed */    
    list-style-type: none;   /* Removes default bullet points */
    padding: 0;              /* Removes default browser indentation */
    margin: 0;
}


.tag-chip{
    display: inline-flex;      /* so the label + ✕ sit on one line, vertically centered */
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.7rem;    /* more horizontal than vertical → capsule proportions */
    margin-bottom: 0.25rem;
    margin-right: 0.1rem;
    border-radius: 999px;      /* the capsule */
    background: var(--color-accent-2);
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1;
}

.tag-suggestions li{
    display: inline-flex;      /* so the label + ✕ sit on one line, vertically centered */
    align-items: center ;
    align-self: center !important;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;    /* more horizontal than vertical → capsule proportions */
    margin: 0.25rem;
    border-radius: 999px;      /* the capsule */
    background: var(--color-accent-2);
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1;
}
.tag-suggestions li:hover { color: #fff; }

.tag-chip-x {
    border: none;
    background: none;
    color: #e9d5ff;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}
.tag-chip-x:hover { color: #fff; }   /* subtle "you can click me" */

/* typo pop out */

.typo-dialog {
    background: var(--color-panel);
    color: var(--color-text);
    border: 1px solid var(--color-error);
    padding: var(--space-md);
    max-width: 36em;
    width: 90%;
    font-family: var(--font-body);
}

.typo-dialog::backdrop {            /*::backdrop is the pseudo-element for the dimmed area behind the dialog.*/
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);     /*backdrop-filter: blur(4px) is a modern CSS treat — 
                                    blurs the content behind the backdrop.*/
}

.typo-dialog h3 {
    color: var(--color-error);
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.typo-dialog h3::before,
.typo-dialog h3::after {
    content: none;
}

.typo-hint {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.typo-dialog fieldset {
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-sm);
    background: var(--color-panel-alt);
}

.typo-dialog legend {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    padding: 0 var(--space-xs);
}

.typo-dialog label {
    display: block;
    margin: var(--space-xxs) 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    height: auto;
    cursor: pointer;
}

.typo-dialog input[type="radio"] {
    margin-right: var(--space-xs);
    width: auto;
}

.typo-dialog-actions {
    margin-top: var(--space-md);
    text-align: center;
}




                    /* ============================================================
                        ----------------  SIDE PANELS-------
                    ============================================================ */


/* ============================================================
                        STATUS panel
   ============================================================ */

.status-body {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
    flex: 1; 
    min-height: 0;
    margin-bottom: var(--space-xs);
}

.status-pic {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.status-line {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    font-size: var(--text-2xs);
    letter-spacing: -0.5px;
}

.status-line {
    line-height: 1.2;
    word-break: break-word;
}

.status-word {
    color: var(--color-accent);
    font-family: var(--font-display);
    letter-spacing: 0.1em;
}
.status-line.status-word{
    font-size: 0.5rem !important;
    margin-top: var(--space-xxs);
}

/* --- Progress bar --- */

.status-bar {
    height: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;               /* BUGFIX: was visible — a fill over 100%
                                       spilled past the border */
    position: relative;
}

.status-bar-fill {
    height: 100%;
    background: var(--color-accent);
    transition: width 0.4s ease;
    max-width: none;
}

/* --- Per-state coloring --- */

.status-live .status-word {
    color: var(--color-success);
}

.status-live .status-bar-fill,
.status-off-schedule .status-bar-fill {
    background: var(--color-success);
}

.status-late .status-word {
    color: var(--color-error);
}

.status-late .status-bar-fill {
    background: var(--color-error);
}




/* ============================================================
            music player (Spotify custom UI)
   ============================================================ */

.music-player {
    display: flex;
    flex-direction: column;
}

.spotify-embed-hidden {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* --- top: cover + track info --- */

.player-info {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xxs);
    border-bottom: 1px solid var(--color-border);
}

.player-cover {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
}

.player-cover img {
    width: 100%;                    /* BUGFIX: was auto/auto — a tall image
                                       overflowed the 64px box */
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.player-track {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.player-title {
    color: var(--color-accent-2);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-artist {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
}

/* --- bottom: controls --- */

.player-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.player-btn {
    background: var(--color-panel-alt);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    padding: var(--space-xxs) var(--space-xxs);
    font-size: var(--text-sm);
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-body);
    line-height: 1;
}

.player-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

.player-progress {
    flex: 1;
    height: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;               /* BUGFIX: same as .status-bar */
    position: relative;
}

.player-progress-fill {
    height: 100%;
    background: var(--color-accent);
    transition: width 0.2s linear;
}

.player-character {
    width: 24px;
    height: 24px;
    flex-shrink: 0;

}

.player-character img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}



/*Visitor*/

.visitor-body {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
    align-self: center;

}


.visitor-character {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
}

.character-still,
.character-jump {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.character-jump {
    opacity: 0;
}


.visitor-character img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.visitor-digits {
    flex: 1;
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    color: var(--color-accent);
    letter-spacing: 0.1em;
    background: var(--color-bg);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    /* Optional: a glow */
    text-shadow: 0 0 4px var(--color-accent);
}

/* --- Jump animation for new visitors --- */

/* When jumping, swap visibility in sync with the hop */
.visitor-character.jumping .character-still {
    animation: still-frame 0.6s ease-out 3;
}

.visitor-character.jumping .character-jump {
    animation: jump-frame 0.6s ease-out 3;
}

.visitor-character.jumping {
    animation: visitor-jump 0.6s ease-out 3;
}

@keyframes visitor-jump {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes still-frame {
    0%, 100% { opacity: 1; }
    20%, 80% { opacity: 0; }
}

@keyframes jump-frame {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

/* --- Speech bubble --- */

.visitor-bubble {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-panel-alt);
    border: 1px solid var(--color-accent);
    padding: 2px var(--space-xs);
    font-size: var(--text-xs);
    white-space: nowrap;
    color: var(--color-accent);
    animation: bubble-fade 3s ease-out forwards;
    z-index: 1;
}

@keyframes bubble-fade {
    0%   { opacity: 0; transform: translate(-50%, 4px); }
    20%  { opacity: 1; transform: translate(-50%, 0); }
    80%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}
.banners{
    max-height: 75px !important;
}

.banners-body{
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    /* BUGFIX: removed 'size: 30px' — not a CSS property; icon size is
       set on .ban-icon below */
}
.banners-body .ban-icon{
    width: 24px;
    height:24px;
}

/*best use*/

.misc-panel.panel.better {          /* BUGFIX: was '.misc-panel .panel .better'
                                       (descendant selectors) but all three classes
                                       are on the SAME element, so it never matched */
    gap: var(--space-xxs);
    max-height: fit-content;
}
.better-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2px;

}
.better h3{
    font-size: var(--text-xs) !important;
}

.better-body .ie4{
    width: 24px;
    height:42px;
    flex-shrink: 0;
}

.better-body .using .microsoft{
    font-size: var(--text-xs) !important;
    color: var(--color-text);
}

.better-body .character_ie4{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    align-self: flex-end
;
}

.better-body .using{
    color: var(--color-accent-2);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    white-space: nowrap;
}


/* ============================================================
                        NEWS panel
   ============================================================ */
.vibes-body {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
}

.vibes-text {
    flex: 1;
    min-width: 0;
    min-height: 5em;
    position: relative;
    overflow: hidden;
}

.vibes-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.4s ease;
    line-height: 1.3;
    font-size: var(--text-xs);
}

.vibes-slide.active {
    transform: translateY(0);
    opacity: 1;
}

.vibes-slide.outgoing {
    transform: translateY(-100%);
    opacity: 0;
}

.vibes-source {
    color: var(--color-accent-2);
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 0.4em;
    font-weight: bold;
}

.vibes-line {
    color: var(--color-text);
}

/* image of vibes*/
.vibes-img-btn{
    display: flex;
    flex-direction: column;
}

.vibes-pic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.vibes-spinner.htmx-request {
    display: block;
}

.vibes-pic img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.vibes-refresh-btn {
    width: 32px;
    height: 32px;
    /* whatever styling matches your aesthetic */
    background: var(--color-bg) ;
    border: none;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    margin: 4px auto 0;  /* centered under image */
}

.vibes-refresh-btn:disabled {
    display: none;
}

.vibes-refresh-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}
/* ----------------shoutbox------------------*/

.shoutbox-panel {
    display: flex;
    flex-direction: column;
}

.shoutbox-body {
    padding: var(--space-xxs);
    flex: 0 1 auto;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-height: 120px;

}

.shoutbox-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 4em;
    max-height: 5em;
    display: flex;
    flex-direction: column;
    padding-right: var(--space-xxs);   /* space for scrollbar */
}

.shout {
    display: flex;
    align-items: baseline;
    gap: 1px !important;
    font-size: var(--text-xs);
    line-height: 1.15;              /* BUGFIX: removed max-height (it clipped any
                                       shout that wrapped to a second line) and
                                       eased line-height so wrapped lines don't touch */
}

.shout-user {
    color: var(--color-accent);
    font-weight: bold;
    flex-shrink: 0;
}

.shout-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    
}

.shout-admin-actions {
    display: inline-flex;
    gap: 0.01em;
    flex-shrink: 0;
}

.shout-admin-actions form {
    margin: 0;
    padding: 0;
    display: inline;
}

.shout-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: var(--text-2xs);
    line-height: 1;
    font-family: inherit;
}

.shout-btn:hover {
    color: #ff5555;
}

.shout-btn-delete:hover {
    color: #ff5555;     /* red on hover */
}

.shout-btn-ban:hover {
    color: #ff5555;
}

.shout-empty {
    color: var(--color-text-dim);
    font-style: italic;
    font-size: var(--text-xs);
}


/* text shoutout */
.shoutbox-form-area {
    margin-top: var(--space-xxs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
}

.shout-form {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.shout-form input[type="text"] {
    flex: 1;
    min-width: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: var(--space-xxs) var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
}

.shout-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-accent);
}

.shout-submit {
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 700;
    letter-spacing: 2px !important;
    border: 1px solid var(--color-accent);
    padding: var(--space-xs) var(--space-xs) !important;
    font-family: var(--font-display);
    font-size: var(--text-xs) !important;
    cursor: pointer;
    text-transform: uppercase;
}

.shout-submit:hover {
    background: var(--color-accent-2);
    border-color: var(--color-accent-2);
}

.shout-disabled {
    color: var(--color-text-dim);
    font-style: italic;
    font-weight: 700;
    font-size: var(--text-xs);
    text-align: center;
    padding:  0;
}

.shout-disabled a {
    color: var(--color-accent);
}


.shout-status h1{
    font-size: var(--text-2xs);
}

.shout-status p{
    font-size: var(--text-sm);
}


/* ============================================================
                  RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------
   Desktop / monitor  : default styles above (>= 1200px)
   Tablet             : <= 1199px  — everything stacks top-down
                        (header, banner, aside, main, misc, footer),
                        aside/misc panels flow as wrapping rows,
                        home grid becomes 2 columns
   Phone              : <= 640px   — pure single column everywhere
   ------------------------------------------------------------
   The old desktop layout assumed min-width: 1200px, so 1199px is
   the natural point where it stops fitting and we restack.
   ============================================================ */


/* ------------------------- TABLET ------------------------- */
@media (max-width: 1199px) {

    body {
        overflow-x: hidden;         /* nothing should scroll sideways once stacked */
    }

    
    /* --- the shell: one column, natural height, page scrolls --- */
    .site-shell {
        flex: none; 
        
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "banner"
            "aside"
            "main"
            "misc"
            "footer";
        height: auto;               /* desktop locks to 100vh; stacked layout
                                       must grow with content and scroll */
        max-height: none;
    }

    /* stacked pages scroll the normal way — the desktop internal
       column scrollbars would just be annoying here */
    .site-aside,
    .site-misc {
        overflow-y: auto;
    }

    /* --- banner: scale the huge fixed paddings down --- */
    .banner-titles {
        padding-left: var(--space-md);
    }

    .banner-neon {
        padding-left: var(--space-lg);
        font-size: 3.5rem;
    }

    .site-banner {
        min-height: 180px;
    }

    /* --- left aside: panels flow as a wrapping row instead of a
           tall column, so visitors don't scroll forever to reach
           the main content --- */
    .site-aside {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto minmax(100px, auto);  /* row can grow if the fluid
                                                        h3 gets taller — no spill */
        grid-template-areas:
            "nav status spotify"
            "nav merch  visitors";
        gap: var(--space-sm);
    }

    .site-aside > * {
        min-width: 0;   /* min-width: 0 on children — this prevents grid children from forcing the columns to grow past their 1fr share. */
        flex: none;
    }

    .site-aside .aside-nav      { grid-area: nav; }
    .site-aside .status-panel   { grid-area: status; }
    .site-aside .music-player   { grid-area: spotify; }
    .site-aside .aside-filler   { grid-area: merch; }
    .site-aside .visitor-panel  { grid-area: visitors; }

    /* --- right misc column: same wrapping-row treatment --- */
    .site-misc {
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 0;
        gap: var(--space-sm);
    }

    .site-misc > * {
        flex: 1 1 260px;
        min-width: 240px;
    }

    .banners {
        max-height: none !important;  /* the 75px cap looks wrong once the
                                         panel sits in a flowing row */
    }

    .visitor-panel {
    display: flex;
    flex-direction: column;
    }

    .visitor-body {
        flex: 1;
        justify-content: center;
    }

    .visitor-digits {
    font-size: var(--text-xl);
    }

    .visitor-character {
        width: 36px;
        height: 36px;
    }

    .status-body{
        flex: 1;
        justify-content: center;
        align-self: center;
    }
    
    .aside-filler {
    display: flex;
    flex-direction: column;

    }
    .aside-filler h3 {
        flex-shrink: 0;   /* title stays its natural size */
        margin: 0;         /* if you have unwanted spacing */
    }   

    .merch-image {

    height: 120px; 
    object-fit: contain !important;

    }


    .aside-filler:hover {
        filter: brightness(1.1);
        transform: scale(1.02);
        transition: filter 0.2s, transform 0.2s;
    }   

    

    /* --- home grid: 2 columns, rows grow with content --- */
    .home-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "feature feature feature feature feature    chat    chat    chat"
        "clip    clip    patreon patreon patreon patreon patreon patreon"
        "clip    clip    events  events  events  games   games   games";
    gap: var(--space-sm);
    }

    .home-grid > * {
        min-width: 0;
        
    }
    
    .home-feature { grid-area: feature; }
    .home-chat    { grid-area: chat; }
    .home-clip    { grid-area: clip; }
    .home-patreon { grid-area: patreon; }
    .home-events  { grid-area: events; }
    .home-games   { grid-area: games; }

    /* iframes were flex: 1 (fill leftover height) — with auto-height
       rows there IS no leftover height, so they'd collapse to 0.
       Give them a real aspect ratio instead. */
    
    .home-feature iframe {
        flex: 1;
        position: relative;
        aspect-ratio: 16 / 9;
        height: auto;
        
    }

    .home-clip iframe{
        aspect-ratio: 9 / 16;
    }

    /* the live-chat wrapper has the same collapse problem */
    .embed-wrapper {
        flex: none;
        min-height: 380px;
    }

    /* don't let list panels grow into skyscrapers — keep their own scroll */
    .home-feature,
    .home-chat,
    .home-patreon {
        max-height: 50vh;
    }

    
    .home-patreon > h3,
    .home-events > h3,
    .home-games > h3 {
        font-size: var(--text-lg) !important;
    }

    .home-clip  > h3{
        font-size: var(--text-base) !important;
    }


    .home-events,
    .home-games{
        font-size: var(--text-base);
    }
    .patreon-post{
         font-size: var(--text-base);
    }
    .patreon-date{
        font-size: var(--text-sm);
    }
    .patreon-summary{
        font-size: var(--text-base);
    }
    .patreon-tier{
        font-size: var(--text-sm);
    }

    /* --- watch page: player above info, not side by side --- */
    .watch-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* --- wide VOD form: 2 fields per row instead of 3 --- */
    .vod-form .form-field {
        grid-column: span 3;
    }

    .vod-form .field-half {
        grid-column: 1 / -1;
    }

    .site-misc {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "vibes shouts links best";
        gap: var(--space-sm);
    }
    
    .site-misc > * {
        min-width: 0;
    }
    
    .site-misc .better-panel   { grid-area: best; }
    .site-misc .shoutbox-panel { grid-area: shouts; }
    .site-misc .banners-panel  { grid-area: links; }
    .site-misc .visitor-panel  { grid-area: visitors; }

    .better h3{
        font-size: var(--text-base) !important;
    }

}




/* ------------------------- PHONE ------------------------- */
@media (max-width: 640px) {


    /* --- top header line: stack the three spans --- */
    .site-header {
        flex-direction: column;
        gap: var(--space-xxs);
        text-align: center;
        padding: var(--space-xs);
    }

    /* --- banner: smaller titles, smaller avatar --- */
    .site-banner {
        grid-template-columns: 1fr 150px;
        min-height: 130px;
    }

    .banner-titles {
        padding-left: var(--space-sm);
    }

    .banner-neon {
        padding-left: var(--space-sm);
        font-size: 2.4rem;
    }

    .banner-avatar {
        width: 150px;
        height: 119px;              /* 150 × (382/480), same ratio as desktop */
    }

    /* --- asides: back to single column (screen is too narrow to row) --- */
    .site-aside,
    .site-misc {
        flex-direction: column;
    }

    .site-aside > *,
    .site-misc > * {
        min-width: 0;               /* release the tablet min-widths */
        flex: none;
    }

    /* nav: horizontal chips save a lot of vertical space on a phone */
    .merch-image {
    width: 100%;
    height: 120px;         /* or whatever looks right */
    object-fit: cover;
    }   

    .aside-nav ul li {
        flex: 0 1 auto;
    }

    .aside-nav .nav-text::after {
        margin-left: 0;             /* no far edge to push toward in a chip */
    }

    /* --- home grid: everything in one column --- */
    .home-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "feature"
            "chat"
            "clip"
            "patreon"
            "events"
            "games";
    }

    .embed-wrapper {
        min-height: 300px;
    }

    /* --- forms: one field per row --- */
    .vod-form {
        grid-template-columns: 1fr;
    }

    .vod-form .form-field,
    .vod-form .field-half {
        grid-column: 1 / -1;
    }

    /* tables (admin) scroll inside their wrapper rather than
       stretching the page */
    .admin-table-wrapper {
        overflow-x: auto;
    }

    .panel h3,
    .aside-panel h3,
    .home-grid > * > h3 {
        font-size: var(--text-xl) !important;
    }

    /* Body text in panels */
    .home-patreon,
    .home-events,
    .home-games,
    .status-panel,
    .visitor-panel,
    .shoutbox-panel,
    .vibes-panel {
    font-size: var(--text-lg);
    }

    /* Nav links */
    .aside-nav .nav-text {
        font-size: var(--text-base);
    }

    /* Shoutbox messages */
    .shout {
        font-size: var(--text-sm);
    }

    /* Visitor counter — prominent */
    .visitor-digits {
        font-size: var(--text-2xl);
    }

    .aside-nav a {
        padding: var(--space-sm);
        min-height: 44px;
        align-items: center;
    }
    .site-aside,
    .site-misc {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }
    .vibes-text{
        min-height: 0;
        height: 3em !important;
    }
    .vibes-slide{
        font-size: var(--text-sm);
    }

}




@media (min-width: 1500px) {

        :root {
        --big-zoom: min(tan(atan2(var(--vw100), 1440px)), 2.5);

                /* Freeze each Utopia font at the value its clamp resolves to
           at 1440px — which is almost always the clamp's MAX term.
           Read each MAX straight off your clamp definitions. */
        --text-3xs:  0.64rem;
        --text-2xs:  0.8rem;
        --text-sm:   1rem;
        --text-base: 1.15rem;
        --text-lg:   1.5rem;
        --text-xl:   2rem;
        --text-2xl:  2.5rem;
        /* ^ use YOUR actual clamp MAX values, not these guesses 
            --text-3xs:  clamp(0.512rem, 0.555rem + -0.0555vw, 0.5425rem);
        --text-2xs:  clamp(0.64rem,  0.655rem + -0.0201vw, 0.651rem);
        --text-xs:   clamp(0.694rem, 0.661rem + 0.149vw,   0.844rem);
        --text-sm:   clamp(0.833rem, 0.781rem + 0.227vw,   1rem    );
        --text-base: clamp(1rem,     0.909rem + 0.455vw,   1.25rem);
        --text-lg:   clamp(1.2rem,   1.045rem + 0.773vw,   1.777rem);
        --text-xl:   clamp(1.44rem,  1.182rem + 1.288vw,   2.369rem);
        --text-2xl:  clamp(1.728rem, 1.296rem + 2.159vw,   3.157rem);
        --text-3xl:  clamp(2.074rem, 1.371rem + 3.514vw,   4.209rem);
        */
    }

    .site-shell {
        /* tan(atan2(A, B)) = A/B as a unitless NUMBER — the typecast
           calc() refuses to do. At 2560px viewport → zoom 1.78:
           the shell lays out at exactly 1440px of canvas, then the
           whole thing scales up like an image. */
        zoom: var(--big-zoom);
        /* dvh inside a zoomed element gets multiplied by the zoom —
           divide it first so (100dvh / Z) × Z = exactly one viewport */
        height: calc(100dvh / var(--big-zoom));
        
    }

    body {
        overflow-x: clip;   /* 100vw includes the scrollbar strip on
                               Windows — this eats the ~15px sideways
                               jiggle that would otherwise appear */
    }

}