/* ============================================================================
   PIP'S PINGIG — the theme layer
   ============================================================================

   Loaded LAST, on purpose, and it is mostly twelve lines of colour.

   The site was built on a rusted-metal palette held in a dozen custom
   properties in style.css: --charcoal, --gunmetal, --steel, --hot-orange and
   the rest. Every panel, button, border and glow on 175 KB of stylesheet reads
   from those. So the whole site changes theme by REDEFINING THEM, once, here --
   not by rewriting the stylesheet, which would be a week of work and a week of
   regressions for the same result.

   What follows the palette is only what colour alone cannot do: the type, the
   texture, and PIP himself.

   ── THE ONE RULE THAT OVERRIDES THE FUN ────────────────────────────────────
   Anything you type into stays legible. Bangers is a display face -- gorgeous
   at 40px on a button, unreadable as a venue address at 14px. So it is used
   for headings, buttons and labels, and NEVER for inputs, textareas, tables or
   running text. Those keep Poppins, and the section at the bottom of this file
   defends that deliberately.
*/

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Permanent+Marker&display=swap');

:root {
    /* ── PIP's palette ──────────────────────────────────────────────────────
       Taken from his own artwork rather than invented: he is a purple bat on a
       near-black stage, lit magenta, with gold stars in his eyes. */
    --void:        #07060c;
    --ink:         #0c0a14;
    --panel:       #15101f;
    --panel-2:     #1c1430;
    --violet:      #a855f7;
    --violet-deep: #7b3fe4;
    --magenta:     #e83fd6;
    --gold:        #ffc24a;
    --yellow:      #ffd93d;
    --mint:        #4ade80;
    --sky:         #38bdf8;
    --line:        rgba(168, 85, 247, .22);

    /* ── the old names, pointed somewhere new ───────────────────────────────
       This is the whole trick. Nothing else in the site needs to know. */
    --charcoal:       #07060c;
    --dark-gunmetal:  #0c0a14;
    --gunmetal:       #1c1430;
    --silver:         #ece8f5;
    --steel:          #9a92b0;

    --flame-red:      #e83fd6;   /* the hot accent is now his magenta        */
    --hot-orange:     #ff9a2a;   /* the fire from the tour bus               */
    --electric-blue:  #38bdf8;
    --neon-purple:    #a855f7;
    --success-green:  #4ade80;
    --warning-yellow: #ffd93d;

    /* pip.html is a standalone page with its OWN token names -- it loads
       neither style.css nor script.js, deliberately, so that nothing there can
       break the working app. Same trick, second set of names. */
    --pip-bg:        #07060c;
    --pip-surface:   #15101f;
    --pip-surface-2: #1c1430;
    --pip-line:      rgba(168, 85, 247, .22);
    --pip-text:      #ece8f5;
    --pip-muted:     #9a92b0;
    --pip-orange:    #e83fd6;
    --pip-gold:      #ffc24a;

    --glow-red:    0 0 22px rgba(232, 63, 214, .45);
    --glow-blue:   0 0 22px rgba(56, 189, 248, .32);
    --glow-cyan:   0 0 32px rgba(168, 85, 247, .55);
    --shadow-soft:   0 4px 14px rgba(0, 0, 0, .45);
    --shadow-medium: 0 10px 28px rgba(0, 0, 0, .55);
    --shadow-strong: 0 16px 46px rgba(0, 0, 0, .7);

    --pip-glow: 0 0 0 2px rgba(168,85,247,.25), 0 8px 30px rgba(123,63,228,.35);
}

/* ── the stage he stands on ─────────────────────────────────────────────────
   Two soft lights and a grain. The grain matters more than it sounds: flat
   dark purple reads as "unfinished dark theme", and a little noise reads as
   printed. It is an inline SVG so it costs no request. */
body {
    background-color: var(--void) !important;
    background-image:
        radial-gradient(900px 600px at 12% -10%, rgba(123, 63, 228, .22), transparent 60%),
        radial-gradient(760px 520px at 88% 110%, rgba(232, 63, 214, .16), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
}

/* ── his voice ──────────────────────────────────────────────────────────────
   Bangers is the comic-book shout PIP talks in. It is set with real letter
   spacing because Bangers is tight by default and looks cramped in caps. */
h1, h2, h3,
.pip-display,
.section-title,
.modal-title,
.screen-title {
    font-family: 'Bangers', 'Poppins', cursive !important;
    letter-spacing: .055em;
    font-weight: 400 !important;
    color: var(--silver);
}
h1, .pip-display { text-shadow: 0 3px 0 rgba(123, 63, 228, .35); }

/* Buttons shout too -- but only the ones that are actions, and only where the
   label is short. A button carrying a sentence keeps Poppins. */
.game-btn,
.menu-btn .menu-label,
.pip-btn,
.office-tab,
button.primary-game-btn,
button.secondary-game-btn {
    font-family: 'Bangers', 'Poppins', cursive !important;
    letter-spacing: .08em !important;
    font-weight: 400 !important;
}

/* ── PIP HIMSELF, ON THE DOOR ───────────────────────────────────────────────
   He hangs off the top of the login card rather than sitting inside it: a
   character who overlaps his frame reads as a character, and one boxed neatly
   inside it reads as a logo. */
/* Room above the card for him to hang into. Without this he is clipped by the
   top of the overlay, which looks like a bug rather than a bat. */
#gatekeeper {
    padding-top: 78px !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
}
#gatekeeper .glass-card {
    position: relative;
    overflow: visible;
    margin-top: 0 !important;
    background:
        linear-gradient(180deg, rgba(28, 20, 48, .96), rgba(12, 10, 20, .98)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--pip-glow), var(--shadow-strong) !important;
    border-radius: 22px !important;
}
.pip-greeter {
    display: block;
    width: 148px;
    height: auto;
    margin: -74px auto 2px;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6));
    animation: pip-bob 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pip-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-9px) rotate(1.5deg); }
}
.pip-hello {
    font-family: 'Bangers', cursive;
    font-size: 2.1rem;
    letter-spacing: .05em;
    text-align: center;
    margin: 2px 0 0;
    background: linear-gradient(92deg, var(--gold), var(--magenta) 60%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pip-sub {
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: var(--violet);
    font-size: .92rem;
    margin: 2px 0 14px;
    opacity: .9;
}
/* The wordmark stays -- it is the brand -- but small, under him, because the
   character is the greeting now and the logo is the signature.
   The old tagline goes: "Chase the Riff" was already said, in his handwriting,
   two lines above. Saying it twice is not emphasis, it is clutter. */
#gatekeeper .logo-icon-img { width: 74px !important; height: auto !important; opacity: .9; }
#gatekeeper .logo-container { margin: 6px 0 2px !important; }
#gatekeeper .tagline { display: none !important; }
#gatekeeper .payment-msg {
    font-family: 'Bangers', cursive !important;
    letter-spacing: .06em;
    font-size: 1.35rem !important;
    color: var(--gold) !important;
}

/* Nobody minds a slower entrance for the person who is already tired. */
@media (prefers-reduced-motion: reduce) {
    .pip-greeter { animation: none; }
}

/* ── LEGIBILITY IS NOT NEGOTIABLE ───────────────────────────────────────────
   Everything above is decoration. This is the part that has to survive a
   badly-lit dressing room at eleven at night, so it is stated last and stated
   loudly: fields are Poppins, high contrast, and obviously focused.

   A tour manager typing a load-in time is the actual job. The bat is a mood. */
input, textarea, select,
.game-input,
.office-section input,
.office-section select,
.office-section textarea,
table, td, th,
.data-value, .hint-text {
    font-family: 'Poppins', system-ui, sans-serif !important;
    letter-spacing: normal !important;
}
input, textarea, select,
.game-input,
.office-section input,
.office-section select,
.office-section textarea {
    background: rgba(7, 6, 12, .72) !important;
    border: 1px solid rgba(168, 85, 247, .28) !important;
    color: #f6f3ff !important;
    border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #8f88a6 !important; opacity: 1; }
input:focus, textarea:focus, select:focus,
.game-input:focus,
.office-section input:focus,
.office-section select:focus,
.office-section textarea:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 194, 74, .22) !important;
}
/* Keyboard users get a visible ring everywhere, not just in fields. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}


/* ── THE TWO ROOMS THAT ARE HIS ─────────────────────────────────────────────
   The login is the front door; these are the two places you go to actually do
   something with PIP, and the brief was to let him properly into both. What
   they share: a Bangers heading, a violet-to-magenta rule under it, and PIP
   watching from the corner of the header rather than being pasted in the
   middle of the work.
*/

/* PIP's own page (pip.html) */
.pip-top {
    background: linear-gradient(180deg, rgba(28,20,48,.96), rgba(7,6,12,.92)) !important;
    border-bottom: 1px solid var(--line) !important;
    position: relative;
}
.pip-brand {
    font-family: 'Bangers', cursive !important;
    letter-spacing: .1em;
    font-size: 1.6rem !important;
    background: linear-gradient(92deg, var(--gold), var(--magenta));
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.pip-mark { color: var(--violet) !important; -webkit-text-fill-color: var(--violet); }
.pip-back { color: var(--violet) !important; font-weight: 600; }

/* He leans in from the right of his own masthead. Fixed and behind the
   content, so he can never sit on top of something you are typing into. */
.pip-page-mascot {
    position: fixed;
    right: -18px;
    bottom: -10px;
    width: 190px;
    opacity: .16;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
@media (max-width: 700px) { .pip-page-mascot { width: 130px; opacity: .1; } }

/* The tour manager's office (inside index.html) */
.manager-section.office-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(28,20,48,.55), rgba(12,10,20,.75)) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
}
.manager-section.office-section .manager-section-title {
    font-family: 'Bangers', cursive !important;
    letter-spacing: .06em;
    font-size: 1.9rem !important;
    background: linear-gradient(92deg, var(--gold), var(--magenta) 70%, var(--violet));
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.manager-section.office-section .manager-section-header { position: relative; z-index: 1; }
.manager-section.office-section .manager-section-header::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--magenta), var(--violet), transparent);
}
/* Watching over the desk, faint enough to read a load-in time through. */
.office-mascot {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 108px;
    opacity: .22;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 700px) { .office-mascot { width: 74px; opacity: .16; } }

.office-tab.on, .office-tabs .on {
    background: linear-gradient(92deg, rgba(232,63,214,.22), rgba(168,85,247,.18)) !important;
    border-color: var(--magenta) !important;
    color: var(--silver) !important;
}
.office-h {
    color: var(--gold) !important;
    font-family: 'Bangers', cursive !important;
    letter-spacing: .1em !important;
    font-size: .95rem !important;
}

/* ── THE MENU TILES ─────────────────────────────────────────────────────────
   The last of the rust, and the most visible of it.
   
   Every tile was a photograph of a rusted metal plate with its icon baked in,
   so the menu was the one part of the site a palette could not reach -- it
   stayed a scrapyard no matter what the CSS said. They are replaced here with
   PIP's own icon art on a violet tile: same size, same labels, same clicks,
   nothing structural touched.

   The icons are the pip-icons set, which is PIP holding the thing rather than
   a symbol for it -- he is holding the map, wearing the star, carrying the
   wrench. That is the difference between a character on a website and a
   website with a mascot on it.

   Overridden here rather than edited in menu-styles.css so the originals are
   one deleted stylesheet away if any of this is wrong. */
.menu-btn,
.floating-donate-btn,
.floating-location-btn,
.floating-share-btn {
    background-color: transparent !important;
    /* The radial is not decoration: PIP is a BLACK BAT, and a black bat on a
       dark violet tile is a smudge. It lifts the patch he stands on just
       enough for his outline to read, without turning the tile into a lamp. */
    background-image:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(160deg, rgba(168, 85, 247, .30), rgba(232, 63, 214, .12) 55%, rgba(12, 10, 20, .92)) !important;
    background-size: auto !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    overflow: hidden;
    /* NO position here. It said `position: relative` so the icon below would
       have something to anchor to -- and knocked the three floating buttons
       off the screen, because SHARE, LOCATE and DONATE are position:fixed and
       that is how they get to their corner. .menu-btn is already relative in
       menu-styles.css, and a fixed element anchors absolute children anyway,
       so it was never needed for either. */
}
/* The icon rides above the label, drawn as a second background layer so the
   markup keeps its single <span> and nothing in script.js has to change. */
.menu-btn::before,
.floating-donate-btn::before,
.floating-location-btn::before,
.floating-share-btn::before {
    content: '';
    position: absolute;
    /* opacity AND right/bottom are both undoing menu-styles.css, which used
       this same pseudo-element as an invisible hover layer:
           .menu-btn::before { inset:0; background:transparent; opacity:0 }
       Inheriting that opacity is why the icons loaded, sized and positioned
       correctly and still could not be seen. */
    opacity: 1 !important;
    right: auto;
    bottom: auto;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    /* Relative, because these tiles are 90px on a desktop and 65px on a phone,
       and a fixed 54px icon was taller than the space left above the label. */
    width: 64%;
    height: 62%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
    transition: transform .18s ease;
}
.menu-btn:hover::before,
.floating-donate-btn:hover::before,
.floating-location-btn:hover::before,
.floating-share-btn:hover::before { transform: translateX(-50%) scale(1.09) rotate(-3deg); }

.menu-btn:hover,
.floating-donate-btn:hover,
.floating-location-btn:hover,
.floating-share-btn:hover {
    border-color: var(--magenta) !important;
    box-shadow: 0 8px 26px rgba(232, 63, 214, .3) !important;
}
.menu-btn.active {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(255, 194, 74, .35), 0 8px 26px rgba(255, 194, 74, .25) !important;
}
.menu-btn .menu-label,
.donate-label,
.location-icon,
.share-label {
    position: relative;
    z-index: 1;
    color: var(--silver) !important;
    text-shadow: 0 1px 3px #07060c, 0 2px 6px rgba(0, 0, 0, .9);
    font-size: .70rem !important;
    line-height: 1.05;
    padding-bottom: 1px;
}

/* He is holding the thing the button does. */
.menu-btn-pingig::before   { background-image: url('assets/pip-icons/map.png'); }
.menu-btn-profile::before  { background-image: url('assets/pip-icons/hug.png'); }
.menu-btn-ranks::before    { background-image: url('assets/pip-icons/star.png'); }
.menu-btn-stats::before    { background-image: url('assets/pip-icons/stats.png'); }
.menu-btn-vest::before     { background-image: url('assets/pip-icons/pack.png'); }
.menu-btn-backline::before { background-image: url('assets/pip-icons/gear.png'); }
.menu-btn-tools::before    { background-image: url('assets/pip-icons/wrench.png'); }
.floating-location-btn::before { background-image: url('assets/pip-icons/find.png'); }
.floating-donate-btn::before   { background-image: url('assets/pip-icons/heart.png'); }
.floating-share-btn::before    { background-image: url('assets/pip-icons/camera.png'); }
/* The icon IS the button now, so the emoji that used to sit beside the label
   is a second, worse copy of it. */
.floating-share-btn .share-icon,
.floating-location-btn .location-icon > img { display: none !important; }