/* self-hosted material symbols (subset with only the icons this site uses) —
   no more google fonts dependency, no more raw "volume_up" text when the CDN is slow.

   IT IS A SUBSET: an icon that is not in it renders as its own name in
   giant letters, which is how "auto_fix_high" ended up shouting from the
   start menu. Adding a new icon means rebuilding the file — the browser
   check has a test that fails if any icon on the site is missing from it.
   Rebuild with the icon list from that test:
     curl "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=<comma,separated,list>&display=block"
   then download the woff2 it points at and bump the ?v= below. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('/src/fonts/material-symbols-subset.woff2?v=8') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon points="0,0 0,12 3,9 6,14 8,13 5,8 9,8" fill="white" stroke="black"/></svg>'), auto;
}

.draggable-header {
    cursor: grab;
}

.draggable-header:active {
    cursor: grabbing;
}

.dragging {
    opacity: 0.9;
    box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar {
    width: 16px;
    background: #c0c0c0;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #000;
}

::-webkit-scrollbar-track {
    background: #e0e0e0;
    background-image: linear-gradient(45deg, #c0c0c0 25%, transparent 25%, transparent 75%, #c0c0c0 75%, #c0c0c0),
        linear-gradient(45deg, #c0c0c0 25%, transparent 25%, transparent 75%, #c0c0c0 75%, #c0c0c0);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

.crt-overlay {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.bevel-out {
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 1px 1px 0 #000;
}

.bevel-in {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: inset 1px 1px 0 #000;
}

@keyframes equalizer {
    0% {
        height: 10%;
    }

    50% {
        height: 100%;
    }

    100% {
        height: 10%;
    }
}

.eq-bar {
    animation: equalizer 0.5s infinite ease-in-out alternate;
}

.eq-bar:nth-child(odd) {
    animation-duration: 0.4s;
}

.eq-bar:nth-child(2n) {
    animation-duration: 0.6s;
}

.eq-bar:nth-child(3n) {
    animation-duration: 0.3s;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 15s linear infinite;
}

.bg-space {
    background-color: #1a0b2e;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(76, 29, 149, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(219, 39, 119, 0.2) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
}

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
}

.sparkle {
    position: absolute;
    pointer-events: none;
    background: white;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 4px #fff, 0 0 8px #0df259;
    animation: sparkle-fade 1s linear forwards;
    z-index: 9999;
}

.dither-effect {
    filter: sepia(100%) hue-rotate(180deg) saturate(300%) contrast(1.5) brightness(0.8) grayscale(20%);
    image-rendering: pixelated;
    mix-blend-mode: hard-light;
}

.star-overlay {
    background-image:
        radial-gradient(1px 1px at 10% 10%, white 100%, transparent),
        radial-gradient(1px 1px at 20% 20%, white 100%, transparent),
        radial-gradient(2px 2px at 30% 30%, white 100%, transparent),
        radial-gradient(1px 1px at 40% 40%, white 100%, transparent),
        radial-gradient(1px 1px at 50% 50%, white 100%, transparent),
        radial-gradient(2px 2px at 60% 60%, white 100%, transparent),
        radial-gradient(1px 1px at 70% 70%, white 100%, transparent),
        radial-gradient(1px 1px at 80% 80%, white 100%, transparent),
        radial-gradient(1px 1px at 90% 90%, white 100%, transparent);
    background-size: 200px 200px;
    animation: stars-blink 3s infinite alternate;
}

@keyframes stars-blink {
    0% {
        opacity: 0.3;
        transform: translateY(0);
    }

    100% {
        opacity: 0.8;
        transform: translateY(-10px);
    }
}

/* proper responsive layout: let the page scroll on small screens instead of zoom-scaling */
@media screen and (max-width: 767px) {
    html {
        height: auto;
    }

    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    .container {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 56px !important;
        /* keep content clear of the fixed taskbar */
    }

    #winamp-window {
        width: 100% !important;
    }
}

:root {
    --primary-color: #0df259;
    --accent-color: #000000;
    --font-main: "Comic Sans MS", "Comic Sans", cursive;
}

/* Effect: Matrix Digital Rain */
.effect-matrix {
    background: black;
}

.effect-matrix::before {
    content: "ﾘ ｸ ｸ ﾑ ﾈ ﾏ ｧ ｱ ｳ ｴ ｵ ｶ ｷ ｸ ｹ ｺ ｻ ｼ ｽ ｾ ｿ ﾀ ﾁ ﾂ ﾃ ﾄ ﾅ ﾆ ﾇ ﾈ 0 1 0 1 1 0 0 1 ﾘ ｸ ｸ ﾑ ﾈ ﾏ ｧ ｱ ｳ ｴ ｵ ｶ ｷ ｸ ｹ ｺ ｻ ｼ ｽ ｾ ｿ ﾀ ﾁ ﾂ ﾃ ﾄ ﾅ ﾆ ﾇ ﾈ 0 1 0 1 1 0 0 1 ﾘ ｸ ｸ ﾑ ﾈ ﾏ ｧ ｱ ｳ ｴ ｵ ｶ ｷ ｸ ｹ ｺ ｻ ｼ ｽ ｾ ｿ ﾀ ﾁ ﾂ ﾃ ﾄ ﾅ ﾆ ﾇ ﾈ";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    color: #00FF00;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    line-height: 20px;
    white-space: break-spaces;
    text-shadow: 0 0 5px #00FF00;
    animation: matrix-rain 2s linear infinite;
    opacity: 0.8;
}

.effect-matrix::after {
    content: "ﾅ ﾆ ﾇ ﾈ 0 1 0 1 1 0 0 1 ﾘ ｸ ｸ ﾑ ﾈ ﾏ ｧ ｱ ｳ ｴ ｵ ｶ ｷ ｸ ｹ ｺ ｻ ｼ ｽ ｾ ｿ ﾀ ﾁ ﾂ ﾃ ﾄ ﾅ ﾆ ﾇ ﾈ 0 1 0 1 1 0 0 1 ﾘ ｸ ｸ ﾑ ﾈ ﾏ ｧ ｱ ｳ ｴ ｵ ｶ ｷ ｸ ｹ ｺ ｻ ｼ ｽ ｾ ｿ ﾀ ﾁ ﾂ ﾃ ﾄ";
    position: absolute;
    top: -150px;
    left: 10px;
    width: 100%;
    height: 100%;
    color: #003300;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 20px;
    white-space: break-spaces;
    text-shadow: 0 0 2px #00FF00;
    animation: matrix-rain 3s linear infinite reverse;
    opacity: 0.6;
}

@keyframes matrix-rain {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

/* Effect: Falling Rain Dark */
.effect-rain {
    background: linear-gradient(to bottom, #000020, #000040);
}

.effect-rain::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 1px 20px;
    animation: rain-fall 0.5s linear infinite;
}

@keyframes rain-fall {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100vh;
    }
}

/* Effect: Strobe */
.effect-strobe {
    animation: strobe-flash 0.5s steps(2, start) infinite;
}

@keyframes strobe-flash {
    0% {
        background-color: rgba(255, 0, 255, 0.2);
    }

    100% {
        background-color: rgba(255, 255, 0, 0.2);
    }
}

/* Effect: Notepad Typing */
.effect-notepad::after {
    content: "Writing...";
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    animation: blink-cursor 1s steps(2, start) infinite;
}

/* Effect: Glitch */
.effect-glitch {
    position: relative;
}

.effect-glitch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(255, 0, 0, 0.1) 3px);
    pointer-events: none;
    animation: glitch-anim 0.2s infinite;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Effect: Comic Dots */
.effect-comic {
    background-image: radial-gradient(#000 20%, transparent 20%);
    background-color: #fff;
    background-size: 10px 10px;
    opacity: 0.1;
}

/* Effect: Pulse */
.effect-pulse {
    animation: screen-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes screen-pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.02);
    }
}

/* Effect: Hypercam */
.hypercam-watermark {
    position: fixed;
    top: 10px;
    left: 10px;
    background: white;
    color: black;
    padding: 2px 5px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    border: 1px solid black;
    z-index: 9999;
    opacity: 0.8;
}

/* Helper Class used by JS */
.theme-transition {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ===== boot screen ===== */
#boot-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    color: #c0c0c0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: opacity 0.5s ease;
}

#boot-screen.booted {
    opacity: 0;
    pointer-events: none;
}

#boot-log {
    white-space: pre-wrap;
}

#boot-log .ok {
    color: #0df259;
}

#boot-prompt {
    text-align: center;
    color: #0df259;
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0;
    animation: blink-prompt 1s steps(2, start) infinite;
}

#boot-prompt.visible {
    opacity: 1;
}

@keyframes blink-prompt {
    50% {
        opacity: 0.2;
    }
}

/* ===== taskbar & start menu ===== */
.taskbar-btn {
    height: 32px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.taskbar-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(1px);
}

.start-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    color: #000;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 13px;
    font-weight: bold;
}

.start-item:hover {
    background: #000080;
    color: #fff;
}

.start-item:hover .material-symbols-outlined {
    color: #fff !important;
}

/* ===== winamp volume slider ===== */
.winamp-volume {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #111;
    border: 1px solid #555;
    border-radius: 2px;
    outline: none;
}

.winamp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 14px;
    background: #c0c0c0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    cursor: pointer;
}

.winamp-volume::-moz-range-thumb {
    width: 10px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid #404040;
    border-radius: 0;
    cursor: pointer;
}

/* ===== retro toast (win98 balloon) ===== */
.retro-toast {
    position: fixed;
    right: 8px;
    bottom: 48px;
    z-index: 90;
    max-width: 260px;
    background: #ffffe1;
    color: #000;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 8px 10px;
    animation: toast-in 0.2s ease-out;
}

.retro-toast .toast-title {
    font-weight: bold;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.retro-toast.fading {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes toast-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== win98 dialog (used for the github PR flow) ===== */
.retro-dialog-overlay {
    position: fixed;
    inset: 0;
    /* above the app windows, which start at 100 and climb — index.js raises
       this further at open time to clear whatever is actually on top */
    z-index: 9000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.retro-dialog {
    background: #c0c0c0;
    width: 100%;
    max-width: 380px;
    padding: 2px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}

.retro-dialog-title {
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 13px;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.retro-dialog-close {
    width: 18px;
    height: 18px;
    background: #c0c0c0;
    color: #000;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.retro-dialog-body {
    padding: 12px 14px;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.retro-dialog-body p {
    margin-bottom: 6px;
}

/* the guestbook shows the comment it is about to put on your clipboard,
   so you can read it (and select it by hand) before it goes anywhere */
.retro-dialog-pre {
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    padding: 6px 8px;
    margin: 8px 0 2px;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

.retro-dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 14px 14px;
}

.retro-dialog-btn {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 16px;
    min-width: 90px;
}

.retro-dialog-btn:active {
    transform: translateY(1px);
}

/* ===== bsod easter egg ===== */
#bsod-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0000aa;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 24px;
}

.bsod-inner {
    max-width: 640px;
    line-height: 1.5;
}

.bsod-title {
    background: #aaaaaa;
    color: #0000aa;
    display: inline-block;
    padding: 0 8px;
    font-weight: bold;
}

.bsod-center {
    display: block;
    text-align: center;
}

/* ===== party mode ===== */
@keyframes party-hue {
    to {
        filter: hue-rotate(360deg);
    }
}

.party-mode {
    animation: party-hue 1.2s linear infinite;
}

/* ===== rainbow text (konami egg) ===== */
@keyframes rainbow-cycle {
    0% { color: #ff0000; }
    20% { color: #ffff00; }
    40% { color: #00ff00; }
    60% { color: #00ffff; }
    80% { color: #ff00ff; }
    100% { color: #ff0000; }
}

.rainbow-text {
    animation: rainbow-cycle 1s linear infinite;
}

/* ===== crt power-on flicker (after boot) ===== */
@keyframes crt-power-on {
    0% {
        transform: scaleY(0.005) scaleX(0.6);
        opacity: 0.2;
        filter: brightness(6);
    }

    45% {
        transform: scaleY(0.005) scaleX(1);
        opacity: 1;
        filter: brightness(6);
    }

    65% {
        transform: scaleY(1.1) scaleX(1);
        filter: brightness(2);
    }

    100% {
        transform: scaleY(1) scaleX(1);
        filter: brightness(1);
    }
}

.crt-on {
    animation: crt-power-on 0.6s ease-out;
    transform-origin: center center;
}

/* ===== live demo badge ===== */
.live-badge {
    background: #300;
    color: #f44;
    border: 1px solid #f44;
    padding: 1px 4px;
    letter-spacing: 1px;
}

@keyframes blink-live {
    50% {
        opacity: 0.2;
    }
}

.blink-live {
    color: #f44;
    animation: blink-live 1s steps(2, start) infinite;
}

/* ===== in-site internet explorer windows ===== */
.ie-window {
    position: fixed;
    width: min(720px, 94vw);
    height: min(540px, 74vh);
    background: #c0c0c0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 2px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
}

.ie-window-header {
    background: linear-gradient(to right, #000080, #1084d0);
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.ie-window-header:active {
    cursor: grabbing;
}

.ie-window-title {
    color: #fff;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ie-titlebar-btn {
    width: 18px;
    height: 18px;
    background: #c0c0c0;
    color: #000;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ie-address-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid #808080;
    flex-shrink: 0;
}

.ie-address-input {
    flex: 1;
    min-width: 0;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 2px 4px;
}

.ie-frame-wrap {
    flex: 1;
    background: #fff;
    margin: 4px;
    overflow: hidden;
}

.ie-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.ie-status-bar {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.taskbar-window-btn {
    height: 32px;
    max-width: 140px;
    min-width: 0;
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.taskbar-window-btn:active {
    transform: translateY(1px);
}

/* ===== run dialog input ===== */
.run-input {
    width: 100%;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 4px 6px;
    margin: 8px 0 4px;
    outline: none;
}

/* ===== screensaver ===== */
#screensaver {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #000;
    overflow: hidden;
    cursor: none;
}

#screensaver canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== generic app window ===== */
.app-window {
    position: fixed;
    background: #c0c0c0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 2px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
    max-width: 96vw;
}

.app-window-header {
    background: linear-gradient(to right, #000080, #1084d0);
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.app-window-header:active {
    cursor: grabbing;
}

.app-window-title {
    color: #fff;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-window-body {
    background: #c0c0c0;
    padding: 6px;
    overflow: auto;
}

.bevel-in-light {
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* ===== minesweeper ===== */
.ms-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 6px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.ms-counter {
    background: #000;
    color: #f00;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 20px;
    padding: 1px 4px;
    letter-spacing: 2px;
}

.ms-face {
    width: 30px;
    height: 30px;
    background: #c0c0c0;
    font-size: 16px;
    line-height: 1;
}

.ms-grid {
    display: grid;
    gap: 0;
    background: #808080;
    padding: 2px;
    width: max-content;
    margin: 0 auto;
}

.ms-cell {
    width: 22px;
    height: 22px;
    background: #c0c0c0;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 13px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-cell.ms-open {
    background: #bdbdbd;
}

.ms-cell.ms-boom {
    background: #f00;
}

/* ===== paint ===== */
.paint-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.paint-colors {
    display: grid;
    grid-template-columns: repeat(7, 16px);
    gap: 2px;
}

.paint-swatch {
    width: 16px;
    height: 16px;
    border: 1px solid #808080;
    padding: 0;
}

.paint-swatch.selected {
    outline: 2px solid #000;
    outline-offset: -1px;
    border-color: #fff;
}

.paint-size {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 3px;
}

.paint-size input {
    width: 64px;
}

.paint-btn {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 8px;
}

#paint-canvas {
    display: block;
    background: #fff;
    width: 100%;
    max-width: 320px;
    touch-action: none;
    cursor: crosshair;
}

/* ===== task manager ===== */
.tm-tabs {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    border-bottom: 1px solid #808080;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

/* the tabs are real buttons now that performance does something */
.tm-tab {
    font-family: inherit;
    font-size: inherit;
    color: #000080;
    text-decoration: underline;
    cursor: pointer;
}

.tm-tab.is-on {
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

/* ---------- performance tab (charts.js draws into these) ---------- */
.tm-perf {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-perf-cap {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    margin-bottom: 2px;
}

.tm-canvas {
    display: block;
    width: 100%;
    height: 62px;
    background: #000;
}

.tm-perf-cell--split {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.tm-perf-grow {
    flex: 1;
    min-width: 0;
}

.tm-canvas--ring {
    width: 74px;
    height: 74px;
}

.tm-header,
.tm-row {
    display: grid;
    grid-template-columns: 1fr 48px 72px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 2px 4px;
}

.tm-header {
    font-weight: bold;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
}

.tm-list {
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    max-height: 180px;
    overflow-y: auto;
}

.tm-row {
    cursor: pointer;
}

.tm-row:nth-child(even) {
    background: #f0f0f0;
}

.tm-row.selected {
    background: #000080;
    color: #fff;
}

.tm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
}

.tm-endbtn {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 10px;
}

/* ===== winamp toggle buttons ===== */
.winamp-toggle-on {
    color: #0df259 !important;
    text-shadow: 0 0 6px #0df259;
}

/* ===== troll assistant ===== */
#troll-assistant {
    position: fixed;
    right: 10px;
    bottom: 52px;
    z-index: 88;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    animation: toast-in 0.25s ease-out;
}

.assistant-bubble {
    background: #ffffe1;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    max-width: 220px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
    border-radius: 8px;
    position: relative;
}

.assistant-bubble::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 14px;
    border: 8px solid transparent;
    border-left-color: #ffffe1;
}

.assistant-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.assistant-actions button {
    font-family: "Comic Sans MS", cursive;
    font-size: 10px;
    font-weight: bold;
    color: #000;
    background: #c0c0c0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    padding: 2px 6px;
}

.assistant-troll {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    cursor: pointer;
}

.assistant-troll.spin {
    animation: assistant-spin 0.6s linear;
}

@keyframes assistant-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== windows error remix ("this is sparta") ===== */
@keyframes sparta-hue {
    to {
        filter: hue-rotate(360deg);
    }
}

.sparta-mode {
    animation: sparta-hue 0.6s linear infinite;
}

.sparta-mode.sparta-kick {
    transform: scale(1.015);
}

.sparta-error {
    position: fixed;
    width: 240px;
    background: #c0c0c0;
    padding: 2px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
    animation: toast-in 0.12s ease-out;
}

.sparta-error-title {
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 12px;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sparta-error-x {
    width: 16px;
    height: 16px;
    background: #c0c0c0;
    color: #000;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    cursor: pointer;
}

.sparta-error-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
}

.sparta-error-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d40000;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sparta-error-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 10px 10px;
}

.sparta-error-buttons button {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 14px;
    cursor: pointer;
}

.sparta-error-buttons button:active {
    transform: translateY(1px);
}

/* ===== shutdown screen ===== */
#shutdown-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#shutdown-screen span {
    color: #ffa500;
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}
/* ===================================================================
   BONUS FEATURES — apps, effects, toys
   =================================================================== */

/* ---- start menu flyouts ---- */
.start-sub {
    position: relative;
}

.start-item.has-sub {
    justify-content: flex-start;
}

.sub-arrow {
    margin-left: auto;
    font-size: 10px;
}

.start-flyout {
    display: none;
    position: absolute;
    left: 100%;
    top: -4px;
    width: 190px;
    background: #c0c0c0;
    padding: 3px 0;
    z-index: 70;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    max-height: 70vh;
    overflow-y: auto;
}

.start-sub:hover>.start-flyout,
.start-sub.open>.start-flyout {
    display: block;
}

@media (max-width: 767px) {
    .start-flyout {
        left: 0;
        top: 100%;
        width: 100%;
    }
    .start-sub:hover>.start-flyout { display: none; }
    .start-sub.open>.start-flyout { display: block; }
}

.app-window.maximized {
    height: calc(100vh - 82px);
}

/* ---- notepad ---- */
.np-menu {
    display: flex;
    gap: 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    border-bottom: 1px solid #808080;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.np-menu span {
    cursor: pointer;
    padding: 0 3px;
}

.np-menu span:hover {
    background: #000080;
    color: #fff;
}

.np-text {
    width: 100%;
    height: 190px;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px;
    resize: vertical;
    outline: none;
}

.np-status {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    margin-top: 3px;
}

/* ---- calculator ---- */
.calc-display {
    background: #d4e5c8;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 22px;
    text-align: right;
    padding: 5px 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.calc-key {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 0;
}

.calc-key:active {
    transform: translateY(1px);
}

.calc-op {
    color: #a00;
}

.calc-fn {
    color: #00a;
}

.calc-wide {
    grid-column: span 2;
}

/* ---- games ---- */
.game-hud {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
    margin-bottom: 4px;
}

.game-canvas {
    display: block;
    background: #000;
    margin: 0 auto;
    max-width: 100%;
    image-rendering: pixelated;
}

.game-hint {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #333;
    text-align: center;
    margin-top: 4px;
}

/* ---- terminal ---- */
.term-body {
    background: #000 !important;
    padding: 6px !important;
}

.term-out {
    height: 230px;
    overflow-y: auto;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.term-out.term-amber {
    color: #ffb000;
}

.term-echo {
    color: #fff;
}

.term-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.term-prompt {
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    flex-shrink: 0;
}

.term-in {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ---- clock ---- */
.clock-canvas {
    display: block;
    margin: 0 auto;
}

.clock-digital {
    background: #000;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-align: center;
    padding: 3px;
    margin-top: 6px;
}

/* ---- character map ---- */
.charmap-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: #808080;
    border: 1px solid #808080;
    max-height: 190px;
    overflow-y: auto;
}

.charmap-cell {
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 3px 0;
    line-height: 1;
}

.charmap-cell:hover {
    background: #000080;
    color: #fff;
}

.charmap-buf {
    width: 100%;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 4px;
    margin-top: 6px;
}

.charmap-copy {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 14px;
    margin-top: 5px;
}

/* ---- my computer / recycle bin ---- */
.mc-list {
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    max-height: 230px;
    overflow-y: auto;
}

.mc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    text-align: left;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.mc-item:hover {
    background: #e8e8f8;
}

.mc-item.sel {
    background: #000080;
    color: #fff;
}

.mc-icon {
    font-size: 20px !important;
    flex-shrink: 0;
}

.mc-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-info {
    font-size: 10px;
    opacity: 0.65;
    flex-shrink: 0;
}

.mc-status {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 2px 6px;
    margin-top: 4px;
}

.rb-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

.rb-btn {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 12px;
}

.rb-empty-msg {
    padding: 20px 10px;
    text-align: center;
    color: #666;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ---- system properties ---- */
.sysprop {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.sysprop-logo {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
}

.sysprop-info {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
}

.sysprop-specs {
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 6px 8px;
    line-height: 1.6;
}

/* ---- control panel ---- */
.cp-label {
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 12px;
    color: #000;
    margin: 4px 0;
}

.cp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.cp-wp {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    border: 1px solid transparent;
    text-align: left;
}

.cp-wp.sel {
    background: #000080;
    color: #fff;
}

.cp-swatch {
    width: 22px;
    height: 16px;
    border: 1px solid #000;
    flex-shrink: 0;
}

.wp-swatch-space { background: linear-gradient(#1a0b2e, #4c1d95); }
.wp-swatch-bliss { background: linear-gradient(#3a8ee6 55%, #4a9d3a 55%); }
.wp-swatch-maze { background: repeating-linear-gradient(45deg, #888 0 4px, #444 4px 8px); }
.wp-swatch-clouds { background: linear-gradient(#7ab8f5, #dff0ff); }
.wp-swatch-teal { background: #008080; }
.wp-swatch-vapor { background: linear-gradient(#ff71ce, #01cdfe); }
.wp-swatch-matrix { background: #000; box-shadow: inset 0 0 0 2px #00ff41; }

.cp-toggles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
}

.cp-toggles label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.cp-toggles input {
    width: 13px;
    height: 13px;
    border-radius: 0;
}

/* ---- wallpapers ---- */
body.wp-bliss {
    background-color: #4a9d3a !important;
    background-image: radial-gradient(ellipse at 50% 120%, #6cc04a 0%, transparent 60%),
        linear-gradient(#2f7fd4 0%, #7cc0f0 45%, #4a9d3a 46%, #2f7a28 100%) !important;
    background-size: 100% 100% !important;
}

body.wp-maze {
    background-color: #222 !important;
    background-image: repeating-linear-gradient(45deg, #4a4a4a 0 12px, #2a2a2a 12px 24px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px) !important;
    background-size: auto !important;
}

body.wp-clouds {
    background-color: #7ab8f5 !important;
    background-image: radial-gradient(circle at 20% 30%, #fff 0 60px, transparent 61px),
        radial-gradient(circle at 70% 20%, #fff 0 80px, transparent 81px),
        radial-gradient(circle at 45% 70%, #eaf6ff 0 70px, transparent 71px),
        linear-gradient(#5aa7ee, #cfe9ff) !important;
    background-size: 100% 100% !important;
}

body.wp-teal {
    background-color: #008080 !important;
    background-image: none !important;
}

body.wp-vapor {
    background-color: #2b1055 !important;
    background-image: linear-gradient(#ff71ce22, transparent 40%),
        repeating-linear-gradient(0deg, rgba(1, 205, 254, .25) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255, 113, 206, .25) 0 1px, transparent 1px 40px),
        linear-gradient(#2b1055, #7597de) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

body.wp-matrix {
    background-color: #000 !important;
    background-image: repeating-linear-gradient(0deg, rgba(0, 255, 65, .08) 0 1px, transparent 1px 3px) !important;
    background-size: auto !important;
}

/* ---- dial-up ---- */
.dialup {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
}

.dialup-icon {
    width: 40px;
    image-rendering: pixelated;
}

.dialup-status {
    margin: 8px 0;
    min-height: 18px;
}

.dialup-bar {
    background: #fff;
    height: 16px;
    overflow: hidden;
}

.dialup-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 12px);
    transition: width 0.4s;
}

.dialup-log {
    margin-top: 8px;
    font-size: 10px;
    color: #444;
    min-height: 26px;
}

/* ---- achievements ---- */
.achv-toast {
    position: fixed;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    z-index: 9600;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #c0c0c0;
    padding: 8px 14px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    animation: achv-pop 0.35s ease-out;
    max-width: 92vw;
}

@keyframes achv-pop {
    from { transform: translateX(-50%) translateY(-24px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.achv-toast.fading {
    opacity: 0;
    transition: opacity 0.55s ease;
}

.achv-icon {
    font-size: 30px;
}

.achv-head {
    font-family: "Comic Sans MS", cursive;
    font-size: 10px;
    font-weight: bold;
    color: #a06000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.achv-name {
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

.achv-desc {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #333;
}

.achv-progress {
    position: relative;
    background: #fff;
    height: 20px;
    margin-bottom: 6px;
    overflow: hidden;
}

.achv-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(#0df259, #068c33);
}

.achv-progress span {
    position: relative;
    display: block;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    line-height: 20px;
}

.achv-list {
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
}

.achv-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 7px;
    border-bottom: 1px dashed #ddd;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.achv-row.locked {
    opacity: 0.45;
}

.achv-row-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* ---- fx canvases ---- */
.fx-canvas {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

.confetti-bit {
    position: fixed;
    top: -12px;
    width: 8px;
    height: 14px;
    z-index: 9400;
    pointer-events: none;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    to {
        transform: translateY(105vh) rotate(720deg);
        opacity: 0.2;
    }
}

.fw-spark {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index: 9400;
    pointer-events: none;
    animation: fw-burst 0.85s ease-out forwards;
}

@keyframes fw-burst {
    to {
        transform: translate(var(--dx), var(--dy)) scale(0.2);
        opacity: 0;
    }
}

.bubble {
    position: fixed;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), rgba(140, 200, 255, .25));
    border: 1px solid rgba(255, 255, 255, .5);
    z-index: 75;
    cursor: pointer;
    animation: bubble-rise linear forwards;
}

@keyframes bubble-rise {
    to {
        transform: translateY(-110vh) translateX(40px);
        opacity: 0;
    }
}

/* ---- screen modes ---- */
@keyframes drunk-sway {
    0% { transform: rotate(-1.4deg) skewX(1deg) scale(1.01); }
    50% { transform: rotate(1.4deg) skewX(-1.5deg) scale(1.02); }
    100% { transform: rotate(-1.4deg) skewX(1deg) scale(1.01); }
}

body.drunk-mode {
    animation: drunk-sway 4s ease-in-out infinite;
    filter: blur(0.6px);
}

body.upside-down {
    transform: rotate(180deg);
}

body.pixelate-mode {
    image-rendering: pixelated;
    filter: contrast(1.4) saturate(1.6);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}

body.invert-mode {
    filter: invert(1) hue-rotate(180deg);
}

body.rainbow-mode .font-header,
body.rainbow-mode h1,
body.rainbow-mode h2,
body.rainbow-mode h3 {
    animation: rainbow-cycle 1.4s linear infinite;
}

body.disco-floor::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        repeating-conic-gradient(from 0deg, #f0f 0deg 90deg, #0ff 90deg 180deg);
    background-size: 90px 90px;
    opacity: 0.22;
    animation: disco-shift 0.7s steps(4) infinite;
}

@keyframes disco-shift {
    to { background-position: 90px 90px; }
}

/* ---- context menu ---- */
#ctx-menu {
    display: none;
    position: fixed;
    z-index: 9200;
    width: 180px;
    background: #c0c0c0;
    padding: 3px 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}

#ctx-menu.open {
    display: block;
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 10px;
    text-align: left;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-size: 12px;
}

.ctx-item .material-symbols-outlined {
    font-size: 16px !important;
}

.ctx-item:hover {
    background: #000080;
    color: #fff;
}

/* ---- calendar popup ---- */
#cal-popup {
    display: none;
    position: fixed;
    right: 6px;
    bottom: 46px;
    z-index: 9100;
    width: 186px;
    background: #c0c0c0;
    padding: 6px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}

#cal-popup.open {
    display: block;
}

.cal-head {
    text-align: center;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 12px;
    color: #000;
    background: #000080;
    color: #fff;
    padding: 2px;
    margin-bottom: 4px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    text-align: center;
}

.cal-grid span {
    padding: 2px 0;
}

.cal-dow span {
    font-weight: bold;
    background: #a8a8a8;
}

.cal-today {
    background: #000080;
    color: #fff;
    font-weight: bold;
}

.cal-foot {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    margin-top: 4px;
    border-top: 1px solid #808080;
    padding-top: 3px;
}

/* ---- magic 8-ball ---- */
.ball-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

.magic-ball {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #555, #000 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .8);
}

.magic-ball span {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #14189c;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 1.2;
}

.magic-ball.shaking {
    animation: ball-shake 0.85s ease-in-out;
}

@keyframes ball-shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-8px, 4px) rotate(-8deg); }
    40% { transform: translate(8px, -5px) rotate(8deg); }
    60% { transform: translate(-6px, -3px) rotate(-5deg); }
    80% { transform: translate(6px, 4px) rotate(5deg); }
}

.ball-input {
    width: 100%;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px;
    margin-top: 6px;
}

.ball-btn {
    width: 100%;
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 12px;
    padding: 4px;
    margin-top: 5px;
}

/* ---- poll ---- */
.poll-q {
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    margin-bottom: 8px;
}

.poll-row {
    margin-bottom: 6px;
}

.poll-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 3px 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.poll-opt:disabled {
    opacity: 0.75;
}

.poll-opt.voted {
    background: #000080;
    color: #fff;
}

.poll-bar {
    position: relative;
    background: #fff;
    height: 15px;
    margin-top: 2px;
    overflow: hidden;
}

.poll-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(#0df259, #068c33);
}

.poll-bar span {
    position: relative;
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    text-align: center;
    line-height: 15px;
}

.poll-total {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #444;
    text-align: center;
    margin-top: 6px;
}

/* ---- site stats ---- */
.stats-list {
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
}

.stats-list>div {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    border-bottom: 1px dashed #e0e0e0;
}

.stats-vibe {
    color: #0a8c3a;
}

/* ---- web ring ---- */
.webring {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
}

.webring-badge {
    height: 31px;
    margin: 0 auto 8px;
}

.webring-nav {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 10px 0;
}

.webring-nav a {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 10px;
    text-decoration: none;
}

.webring-small {
    font-size: 10px;
    color: #555;
}

/* ---- shortcuts ---- */
.shortcut-list {
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    max-height: 280px;
    overflow-y: auto;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-bottom: 1px dashed #e5e5e5;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
}

.shortcut-row kbd {
    background: #c0c0c0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    padding: 1px 6px;
    min-width: 110px;
    text-align: center;
    flex-shrink: 0;
}

/* ---- equalizer / scope ---- */
.eq-rack {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    background: #111;
    padding: 8px 4px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 9px;
}

.eq-slider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 18px;
    height: 84px;
    accent-color: #0df259;
}

.eq-presets {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 7px;
}

.eq-preset {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 10px;
    padding: 3px 9px;
}

.eq-note {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #444;
    text-align: center;
    margin-top: 5px;
}

.scope-canvas {
    display: block;
    background: #000;
    width: 100%;
}

.pl-search {
    width: calc(100% - 16px);
    margin: 0 8px 4px;
    background: #000;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 2px 4px;
    border: 1px solid #505060;
    outline: none;
}

/* ===================================================================
   PERSONAL WEB PAGES — /now /uses /colophon, buttons, shrine, quiz
   =================================================================== */

.doc-body {
    max-height: min(430px, 62vh);
    overflow-y: auto;
    background: #fff !important;
    color: #000;
    font-family: 'Courier New', monospace;
    /* the A- / A+ buttons in the document toolbar move this, and it sticks.
       12px courier is period-correct and hard on the eyes. */
    font-size: var(--doc-font-size, 12px);
    line-height: 1.55;
    padding: 10px 12px !important;
}

.doc-loading {
    text-align: center;
    color: #777;
    padding: 24px 0;
}

.doc-h1 {
    font-family: "Comic Sans MS", cursive;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #000;
    padding-bottom: 3px;
    margin-bottom: 6px;
}

.doc-h2 {
    font-family: "Comic Sans MS", cursive;
    font-size: 13px;
    font-weight: bold;
    color: #000080;
    margin: 12px 0 4px;
    border-bottom: 1px dashed #aaa;
}

.doc-meta {
    font-size: 10px;
    color: #777;
    margin-bottom: 6px;
}

.doc-intro {
    background: #ffffe1;
    border: 1px solid #d0d090;
    padding: 5px 7px;
    margin-bottom: 8px;
}

.doc-list {
    list-style: none;
    padding-left: 4px;
}

.doc-list li {
    padding: 2px 0 2px 16px;
    position: relative;
}

.doc-list li::before {
    content: '►';
    position: absolute;
    left: 0;
    color: #0a8c3a;
    font-size: 9px;
    top: 4px;
}

.doc-foot {
    margin-top: 12px;
    padding-top: 6px;
    border-top: 1px dashed #bbb;
    font-size: 10px;
    color: #666;
}

.doc-btn {
    display: inline-block;
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 12px;
    margin-top: 6px;
    text-decoration: none;
}

.doc-btn:active {
    transform: translateY(1px);
}

/* ---- changelog ---- */
.cl-entry {
    border-left: 3px solid #0df259;
    padding-left: 8px;
    margin: 10px 0;
}

.cl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 2px;
}

.cl-head span {
    color: #777;
    font-size: 10px;
}

.cl-latest {
    background: #0df259;
    color: #000 !important;
    font-weight: bold;
    padding: 0 5px;
    font-size: 9px !important;
}

/* ---- 88x31 button wall ---- */
.btn-mine {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f0f0f0;
    border: 1px solid #999;
    padding: 8px;
}

.btn-badge {
    image-rendering: pixelated;
    border: 1px solid #000;
    flex-shrink: 0;
}

.btn-mine-txt {
    flex: 1;
    min-width: 0;
}

.btn-code {
    width: 100%;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 4px;
    resize: none;
    margin-top: 4px;
}

.btn-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    background: #e8e8e8;
    border: 1px inset #999;
    padding: 8px;
}

.btn-wall img {
    image-rendering: pixelated;
    border: 1px solid #888;
}

.btn-wall a:hover img {
    border-color: #0df259;
    filter: brightness(1.15);
}

/* ---- blogroll ---- */
.friend-list {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    background: #fff;
}

.friend-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 7px;
    border-bottom: 1px dashed #ddd;
    color: #000;
    text-decoration: none;
}

.friend-row:hover {
    background: #000080;
    color: #fff;
}

.friend-name {
    font-weight: bold;
    color: #0000cc;
    text-decoration: underline;
    flex-shrink: 0;
}

.friend-row:hover .friend-name {
    color: #fff;
}

.friend-note {
    font-size: 10px;
    opacity: 0.75;
    text-align: right;
}

/* ---- shrine ---- */
.shrine-cat {
    margin-bottom: 8px;
}

.shrine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.shrine-tag {
    background: linear-gradient(#fff, #dfdfdf);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    padding: 2px 7px;
    font-size: 11px;
}

/* ---- timeline ---- */
.timeline {
    position: relative;
    padding-left: 4px;
}

.tl-row {
    display: grid;
    grid-template-columns: 44px 14px 1fr;
    align-items: start;
    gap: 4px;
    padding: 4px 0;
}

.tl-year {
    font-weight: bold;
    color: #000080;
    font-size: 11px;
}

.tl-dot {
    position: relative;
    height: 100%;
}

.tl-dot::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 4px;
    width: 8px;
    height: 8px;
    background: #0df259;
    border: 1px solid #000;
    border-radius: 50%;
}

.tl-dot::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    bottom: -8px;
    width: 2px;
    background: #ccc;
}

.tl-row:last-child .tl-dot::after {
    display: none;
}

.tl-text {
    font-size: 11px;
}

/* ---- site map ---- */
.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 3px;
}

.map-link {
    text-align: left;
    background: #f4f4f4;
    border: 1px solid #ccc;
    color: #0000cc;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 3px 6px;
    text-decoration: underline;
}

.map-link:hover {
    background: #000080;
    color: #fff;
    border-color: #000;
}

/* ---- quiz ---- */
.quiz-progress {
    position: relative;
    background: #fff;
    height: 18px;
    margin-bottom: 10px;
    overflow: hidden;
}

.quiz-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(#0df259, #068c33);
    transition: width 0.3s;
}

.quiz-progress span {
    position: relative;
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    color: #000;
}

.quiz-q {
    font-family: "Comic Sans MS", cursive;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quiz-a {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 6px 9px;
    text-align: left;
}

.quiz-a:hover {
    background: #d8d8d8;
}

.quiz-a:active {
    transform: translateY(1px);
}

.quiz-result {
    text-align: center;
    padding: 6px 0;
}

.quiz-emoji {
    font-size: 46px;
    line-height: 1;
}

.quiz-label {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

.quiz-title {
    font-family: "Comic Sans MS", cursive;
    font-size: 20px;
    font-weight: bold;
    color: #000080;
}

.quiz-artist {
    font-size: 12px;
    color: #444;
    margin-bottom: 8px;
}

.quiz-desc {
    background: #ffffe1;
    border: 1px solid #d0d090;
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
}

.quiz-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ---- tray status widget ---- */
.tray-status {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 230px;
    height: 32px;
    padding: 0 8px;
    margin-right: 4px;
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.tray-status-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .tray-status {
        display: none;
    }
}

/* =================================================================== */
/* the overhaul pack: devlog, solitaire, defrag, find files            */
/* =================================================================== */

/* ---------- control panel: screen saver row ---------- */
.cp-saver-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 4px 0 2px;
}

.cp-select {
    flex: 1;
    font-family: inherit;
    font-size: 11px;
    padding: 2px 4px;
    background: #fff;
    color: #000;
    border: none;
}

.cp-preview {
    font-family: inherit;
    font-size: 11px;
    padding: 3px 10px;
    background: #c0c0c0;
    color: #000;
    cursor: pointer;
}

.cp-preview:active {
    transform: translateY(1px);
}

.cp-hint {
    font-size: 10px;
    color: #555;
    margin: 0 0 6px;
}

/* ---------- devlog posts (sit inside .doc-body) ---------- */
.post {
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    padding: 6px 0 2px;
}

.post-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: #000080;
}

.post-head:hover .post-title {
    text-decoration: underline;
}

.post-caret {
    font-size: 10px;
    color: #444;
}

.post-title {
    font-weight: bold;
    font-size: 13px;
}

.post-meta {
    font-size: 10px;
    color: #666;
    margin: 2px 0 0 16px;
}

.post-tag {
    color: #800080;
}

.post-body {
    display: none;
    margin: 6px 0 8px 16px;
}

.post.open .post-body {
    display: block;
}

.post-body p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.55;
}

/* ---------- solitaire ---------- */
.sol-body {
    background: #008080;
    padding: 4px;
}

.sol-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 6px;
}

.sol-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 3px 9px;
    background: #c0c0c0;
    color: #000;
    cursor: pointer;
}

.sol-btn:active {
    transform: translateY(1px);
}

.sol-status {
    margin-left: auto;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.sol-table {
    user-select: none;
    /* seven columns is a hard minimum, so scroll rather than squash on tiny screens */
    overflow-x: auto;
}

.sol-top {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.sol-gap {
    flex: 1;
    min-width: 6px;
}

.sol-slot {
    width: 60px;
    height: 84px;
    flex-shrink: 0;
    cursor: pointer;
}

.sol-cols {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.sol-col {
    /* the column has to reserve room for its absolutely-positioned pile,
       so its height is derived from the card count in --n */
    --card-h: 84px;
    --stack-base: 18px;
    --stack: var(--stack-base);
    position: relative;
    width: 60px;
    height: calc(var(--card-h) + (var(--n, 1) - 1) * var(--stack));
    flex-shrink: 0;
    cursor: pointer;
}

/* long piles overlap tighter so a full column still fits on screen */
.sol-col.dense {
    --stack: calc(var(--stack-base) * 0.62);
}

.sol-stackitem {
    position: absolute;
    left: 0;
}

.sol-card {
    width: 60px;
    height: 84px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
    color: #000;
    position: relative;
    overflow: hidden;
}

.sol-card.red {
    color: #d40000;
}

.sol-card.back {
    /* the classic blue diamond deck back */
    background:
        repeating-linear-gradient(45deg, #2a4fb8 0 5px, #1b3a92 5px 10px),
        #1b3a92;
    border-color: #fff;
    box-shadow: inset 0 0 0 2px #fff, 1px 1px 0 rgba(0, 0, 0, .4);
}

.sol-card.sel {
    outline: 2px solid #ffe000;
    outline-offset: -2px;
    filter: brightness(1.1);
}

.sol-corner {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.sol-pip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.sol-empty {
    width: 60px;
    height: 84px;
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    font-size: 22px;
}

.sol-cascade {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    overflow: hidden;
}

.sol-fall {
    position: absolute;
    animation: sol-fall 3s cubic-bezier(.3, .1, .7, 1) forwards;
}

@keyframes sol-fall {
    to {
        transform: translate(var(--dx), 110vh) rotate(var(--rot));
    }
}

@media (max-width: 640px) {

    .sol-slot,
    .sol-col,
    .sol-card,
    .sol-empty {
        width: 40px;
    }

    .sol-card,
    .sol-slot,
    .sol-empty {
        height: 58px;
    }

    .sol-col {
        --card-h: 58px;
        --stack-base: 13px;
    }

    .sol-pip {
        font-size: 18px;
    }

    .sol-corner {
        font-size: 10px;
    }
}

/* ---------- find: files ---------- */
.find-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.find-bar label {
    font-size: 11px;
    color: #000;
}

.find-input {
    flex: 1;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 5px;
    background: #fff;
    color: #000;
    border: none;
}

.find-results {
    background: #fff;
    height: 210px;
    overflow-y: auto;
    padding: 2px;
}

.find-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 3px 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: #000;
}

.find-row:hover {
    background: #000080;
    color: #fff;
}

.find-kind {
    font-size: 10px;
    opacity: .7;
    flex-shrink: 0;
}

.find-empty {
    padding: 10px;
    font-size: 11px;
    color: #666;
}

.find-foot {
    font-size: 10px;
    color: #333;
    margin-top: 4px;
}

/* =================================================================== */
/* jokerz 98 — the poker roguelike                                     */
/* =================================================================== */
.bj-loading {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: #000;
}

.bj-body {
    background: #17402f;
    color: #eee;
    padding: 6px;
    font-size: 11px;
    max-height: 78vh;
    /* floating numbers are positioned against this */
    position: relative;
}

.bj-body h2,
.bj-body h3 {
    margin: 0 0 6px;
    color: #fff;
}

.bj-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    text-align: center;
    color: #ffd400;
    text-shadow: 2px 2px 0 #c0392b;
    margin: 10px 0 6px;
}

.bj-lose {
    color: #ff5a5a;
    text-shadow: 2px 2px 0 #000;
}

.bj-win {
    color: #0df259;
    text-shadow: 2px 2px 0 #000;
}

.bj-sub {
    text-align: center;
    color: #b9d5c8;
    margin: 0 0 10px;
    font-size: 11px;
}

.bj-label {
    color: #8fd6b4;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 8px 0 4px;
}

.bj-hint {
    color: #8fd6b4;
    font-size: 10px;
    margin: 6px 0 0;
}

.bj-empty {
    color: #6e9683;
    font-size: 10px;
    padding: 8px;
}

/* ---------- buttons ---------- */
.bj-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 10px;
    background: #c0c0c0;
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    cursor: pointer;
}

.bj-btn:active {
    transform: translateY(1px);
    border-top-color: #404040;
    border-left-color: #404040;
    border-right-color: #fff;
    border-bottom-color: #fff;
}

.bj-btn.bj-go {
    background: #ffd400;
    font-weight: bold;
}

.bj-btn.bj-ghost {
    background: #6e8f7f;
    color: #fff;
}

.bj-btn.bj-small {
    font-size: 10px;
    padding: 2px 7px;
}

.bj-btn.bj-wide {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 7px;
    font-weight: bold;
}

.bj-btn.bj-play {
    background: #2f7fd4;
    color: #fff;
    font-weight: bold;
}

.bj-btn.bj-disc {
    background: #c0392b;
    color: #fff;
    font-weight: bold;
}

.bj-btn.bj-buy {
    width: 100%;
    margin-top: 3px;
    font-size: 10px;
}

/* ---------- top bar ---------- */
.bj-top {
    display: flex;
    gap: 5px;
    align-items: center;
    background: #0f2d21;
    padding: 4px 6px;
    border: 1px solid #2f6b50;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.bj-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 48px;
}

.bj-stat b {
    color: #8fd6b4;
    font-size: 9px;
    text-transform: uppercase;
}

.bj-stat span {
    color: #fff;
    font-size: 12px;
}

.bj-money span {
    color: #ffd400;
    font-weight: bold;
}

.bj-top .bj-btn {
    margin-left: auto;
}

/* ---------- blind select ---------- */
.bj-blinds {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.bj-blind {
    flex: 1;
    background: #0f2d21;
    border: 2px solid #2f6b50;
    padding: 8px 6px;
    text-align: center;
    opacity: .65;
}

.bj-blind.now {
    opacity: 1;
    border-color: #ffd400;
    background: #14503a;
}

.bj-blind.boss {
    border-color: #7d2b3a;
}

.bj-blind.boss.now {
    border-color: #ff5a5a;
    background: #4a1520;
}

.bj-blind.done {
    opacity: .4;
}

.bj-blind-name {
    font-weight: bold;
    color: #fff;
    font-size: 12px;
}

.bj-blind-req {
    font-size: 20px;
    color: #ff5a5a;
    font-weight: bold;
    margin: 4px 0 0;
}

.bj-blind-sub,
.bj-blind-reward,
.bj-blind-done {
    font-size: 9px;
    color: #8fd6b4;
}

.bj-blind-text {
    font-size: 10px;
    color: #ffd400;
    margin: 5px 0;
    min-height: 26px;
}

.bj-blind-reward {
    margin: 5px 0;
    color: #ffd400;
}

.bj-blind .bj-btn {
    width: 100%;
    margin-top: 3px;
}

.bj-tags {
    margin-top: 6px;
    font-size: 10px;
    color: #ffd400;
}

/* ---------- blind bar & progress ---------- */
.bj-blindbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #14503a;
    border: 1px solid #2f6b50;
    padding: 3px 6px;
    flex-wrap: wrap;
}

.bj-blindbar.boss {
    background: #4a1520;
    border-color: #7d2b3a;
}

.bj-blindbar-name {
    font-weight: bold;
    color: #fff;
}

.bj-blindbar-text {
    color: #ffd400;
    font-size: 10px;
}

.bj-blindbar-score {
    margin-left: auto;
    color: #fff;
    font-weight: bold;
}

.bj-progress {
    height: 8px;
    background: #0a1c14;
    margin: 3px 0 6px;
    padding: 1px;
}

.bj-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c0392b, #ffd400, #0df259);
    transition: width .25s;
}

/* ---------- joker & consumable slots ---------- */
.bj-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.bj-slotlabel {
    display: block;
    font-size: 9px;
    color: #8fd6b4;
    text-transform: uppercase;
}

.bj-jokers,
.bj-cons {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    min-height: 62px;
}

.bj-joker {
    position: relative;
    flex: 0 0 118px;
    background: #1d1d28;
    border: 2px solid var(--rar, #4a90d9);
    border-radius: 3px;
    padding: 3px 4px;
    cursor: pointer;
    font-size: 9px;
    line-height: 1.25;
}

.bj-joker:hover {
    background: #2b2b3c;
}

.bj-joker.confirm {
    border-color: #ff5a5a;
    background: #3a1520;
}

.bj-joker.confirm::after {
    content: attr(data-hint);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    background: #ff5a5a;
    color: #fff;
    font-size: 9px;
    padding: 2px;
    text-align: center;
    z-index: 2;
}

.bj-joker.debuffed {
    filter: grayscale(1);
    opacity: .5;
}

.bj-joker.bj-extra {
    box-shadow: inset 0 0 0 1px #ffd400;
}

.bj-joker-name {
    font-weight: bold;
    color: #fff;
    font-size: 10px;
}

.bj-joker-text {
    color: #c9c9d8;
}

.bj-joker-dyn {
    color: #ffd400;
    font-weight: bold;
}

.bj-joker-tags {
    color: #ff9ec4;
}

.bj-joker-foot {
    display: flex;
    justify-content: space-between;
    color: var(--rar, #4a90d9);
    margin-top: 2px;
    font-size: 8px;
    text-transform: uppercase;
}

.bj-con {
    flex: 0 0 108px;
    background: #2a1d3a;
    border: 2px solid #9b5de5;
    border-radius: 3px;
    padding: 3px 4px;
    cursor: pointer;
    font-size: 9px;
    line-height: 1.25;
}

.bj-con:hover {
    background: #3a2a50;
}

.bj-con-planet {
    border-color: #4a90d9;
    background: #16273a;
}

.bj-con-spectral {
    border-color: #3aa7a7;
    background: #113030;
}

.bj-con-name {
    font-weight: bold;
    color: #fff;
    font-size: 10px;
}

.bj-con-text {
    color: #c9c9d8;
}

.bj-con-foot {
    color: #8fd6b4;
    font-size: 8px;
    text-transform: uppercase;
}

/* editions */
.ed-foil {
    box-shadow: inset 0 0 10px rgba(140, 200, 255, .8);
}

.ed-holo {
    box-shadow: inset 0 0 10px rgba(255, 120, 220, .8);
}

.ed-poly {
    box-shadow: inset 0 0 12px rgba(255, 210, 60, .9);
}

.ed-negative {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- the score readout ---------- */
.bj-readout {
    text-align: center;
    background: #0f2d21;
    border: 1px solid #2f6b50;
    padding: 4px;
    margin-bottom: 6px;
}

.bj-hand-name {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.bj-hand-name small {
    color: #8fd6b4;
    font-weight: normal;
}

.bj-calc {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.bj-chips {
    background: #2f7fd4;
    color: #fff;
    font-weight: bold;
    padding: 2px 12px;
    min-width: 66px;
    font-size: 14px;
}

.bj-mult {
    background: #c0392b;
    color: #fff;
    font-weight: bold;
    padding: 2px 12px;
    min-width: 66px;
    font-size: 14px;
}

.bj-x {
    color: #ffd400;
    font-weight: bold;
}

.bj-last {
    color: #ffd400;
    font-size: 10px;
    margin-top: 2px;
}

/* ---------- cards ---------- */
.bj-hand {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 74px;
    margin-bottom: 6px;
}

.bj-hand.small .bj-card {
    width: 34px;
    height: 48px;
}

.bj-card {
    position: relative;
    width: 44px;
    height: 62px;
    background: #fff;
    color: #111;
    border: 1px solid #000;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    /* the lift is the same transform the js animates, so a hover that
       lands mid-animation continues from where the card actually is
       rather than snapping */
    transition: transform .12s cubic-bezier(.22, 1.1, .36, 1), box-shadow .12s;
    will-change: transform;
}

.bj-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 6px 10px rgba(0, 0, 0, .45);
    z-index: 3;
}

.bj-card.sel {
    transform: translateY(-10px);
    outline: 2px solid #ffd400;
    box-shadow: 0 4px 0 rgba(255, 212, 0, .35);
}

.bj-card.sel:hover {
    transform: translateY(-15px) scale(1.04);
}

/* fx.js puts .no-motion on <html> when the visitor (or their system)
   asked for less of it. javascript animation stops at the source; these
   are the css transitions that would otherwise carry on regardless. */
.no-motion .bj-card,
.no-motion .bj-progress-fill,
.no-motion .retro-toast,
.no-motion .app-window {
    transition: none !important;
}

.no-motion .bj-card:hover {
    transform: translateY(-8px);
    box-shadow: none;
}

/* ---------- who you are playing against ---------- */
/* every ante has a face, hue-shifted per blind so the three blinds of
   one ante are three opponents rather than one picture three times */
.bj-face {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: auto;
    flex-shrink: 0;
    vertical-align: middle;
    transform-origin: 50% 100%;
}

.bj-face-big {
    width: 54px;
    height: 54px;
    display: block;
    margin: 0 auto 4px;
}

.bj-face.beaten {
    filter: grayscale(1) brightness(.6) !important;
}

.bj-victim {
    text-align: center;
    margin-bottom: 2px;
    /* headroom for the thing that is about to land on them */
    padding-top: 42px;
}

.bj-victim .bj-face {
    width: 72px;
    height: 72px;
}

/* the head that lands on them */
.bj-bonk {
    position: absolute;
    z-index: 70;
    pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
}

/* the whole table flinches on impact */
.bj-shook {
    animation: bj-shook .2s steps(4, end);
}

@keyframes bj-shook {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -1px); }
    75% { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
}

.no-motion .bj-shook {
    animation: none;
}

/* a number lifting off the thing that caused it — damage on the blind,
   a joker's payout, money changing hands */
.bj-float {
    position: absolute;
    z-index: 60;
    pointer-events: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
}

.bj-card.red {
    color: #d40000;
}

.bj-card.debuffed {
    filter: grayscale(1) brightness(.65);
}

.bj-card.bj-back {
    background: repeating-linear-gradient(45deg, #2a4fb8 0 5px, #1b3a92 5px 10px);
    box-shadow: inset 0 0 0 2px #fff;
}

.bj-rank {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.bj-suit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bj-seal {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .5);
}

.seal-red {
    background: #e33;
}

.seal-blue {
    background: #39c;
}

.seal-gold {
    background: #dc3;
}

.seal-purple {
    background: #93c;
}

/* enhancements read as a card tint */
.enh-bonus {
    background: #cfe4ff;
}

.enh-mult {
    background: #ffd0cc;
}

.enh-wild {
    background: #e2ffd6;
}

.enh-glass {
    background: #eaf7ff;
    opacity: .85;
}

.enh-steel {
    background: #d8d8e2;
}

.enh-stone {
    background: #a9a9a9;
    color: #333;
}

.enh-gold {
    background: #ffe9a8;
}

.enh-lucky {
    background: #d9ffe6;
}

/* ---------- actions ---------- */
.bj-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.bj-actions2 {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    margin-top: 5px;
    flex-wrap: wrap;
}

.bj-counts {
    display: flex;
    gap: 6px;
}

.bj-count {
    background: #0f2d21;
    border: 1px solid #2f6b50;
    padding: 2px 8px;
    font-size: 9px;
    color: #8fd6b4;
    text-align: center;
}

.bj-count b {
    display: block;
    font-size: 14px;
}

.bj-hands b {
    color: #4aa3ff;
}

.bj-discards b {
    color: #ff7b6b;
}

.bj-deckcount {
    color: #8fd6b4;
    font-size: 10px;
}

/* ---------- scoring log ---------- */
.bj-log {
    margin-top: 6px;
    font-size: 10px;
    color: #8fd6b4;
}

.bj-log summary {
    cursor: pointer;
}

.bj-logrows {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    max-height: 90px;
    overflow-y: auto;
}

.bj-logrows span {
    background: #0f2d21;
    border: 1px solid #2f6b50;
    padding: 1px 4px;
    color: #fff;
}

.bj-logrows b {
    color: #8fd6b4;
    margin-right: 4px;
    font-weight: normal;
}

/* ---------- shop & packs ---------- */
.bj-shophead {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.bj-shophead h3 {
    margin: 0;
    flex: 1;
}

.bj-shoprow {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 3px;
    align-items: flex-start;
}

.bj-shopitem {
    flex: 0 0 124px;
}

.bj-shopitem.taken {
    opacity: .35;
}

.bj-shopcard-card {
    display: flex;
    justify-content: center;
    background: #0f2d21;
    border: 1px solid #2f6b50;
    padding: 6px;
    min-height: 62px;
}

.bj-pack,
.bj-voucher {
    background: #3a2a12;
    border: 2px solid #ffd400;
    padding: 5px;
    font-size: 9px;
    line-height: 1.3;
    min-height: 52px;
}

.bj-voucher {
    background: #12303a;
    border-color: #3aa7a7;
}

.bj-pack b,
.bj-voucher b {
    display: block;
    color: #fff;
    font-size: 10px;
}

.bj-pack span,
.bj-voucher span {
    color: #c9c9d8;
}

/* ---------- cash out ---------- */
.bj-cashout {
    background: #0f2d21;
    border: 2px solid #ffd400;
    padding: 10px;
    text-align: center;
}

.bj-paylist {
    margin: 8px 0;
}

.bj-payrow {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #2f6b50;
    padding: 2px 0;
}

.bj-payrow b {
    color: #ffd400;
}

.bj-paytotal {
    font-size: 13px;
    margin: 6px 0;
}

.bj-paytotal b {
    color: #ffd400;
}

/* ---------- menu / choices ---------- */
.bj-menu {
    padding: 4px;
}

.bj-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.bj-field label {
    color: #8fd6b4;
    font-size: 10px;
    text-transform: uppercase;
}

.bj-input {
    flex: 1;
    font-family: inherit;
    font-size: 11px;
    padding: 3px 5px;
    background: #fff;
    color: #000;
    border: none;
}

.bj-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
}

.bj-choice {
    text-align: left;
    background: #0f2d21;
    border: 2px solid #2f6b50;
    color: #c9c9d8;
    padding: 4px 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    line-height: 1.3;
}

.bj-choice b {
    display: block;
    color: #fff;
    font-size: 10px;
}

.bj-choice.sel {
    border-color: #ffd400;
    background: #14503a;
}

.bj-stakes .bj-choice {
    border-left: 5px solid var(--rar, #e8e8e8);
}

.bj-choice.bj-extra b::after {
    content: ' ★';
    color: #ffd400;
}

/* ---------- run info ---------- */
.bj-info {
    padding: 4px;
}

.bj-inforow {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #2f6b50;
    padding: 2px 0;
}

.bj-inforow b {
    color: #ffd400;
}

.bj-inforow2 {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bj-vlist {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.bj-vlist span {
    background: #12303a;
    border: 1px solid #3aa7a7;
    padding: 1px 5px;
    font-size: 9px;
}

/* ---------- hand level table ---------- */
.bj-side {
    margin-top: 6px;
    font-size: 10px;
    color: #8fd6b4;
}

.bj-side summary {
    cursor: pointer;
}

.bj-levels {
    margin-top: 4px;
}

.bj-level {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    border-bottom: 1px dotted #2f6b50;
    padding: 1px 0;
}

.bj-lvlname {
    color: #fff;
}

.bj-lvlnum {
    color: #ffd400;
}

.bj-lvlval {
    color: #8fd6b4;
}

.bj-lvlplays {
    color: #6e9683;
    min-width: 18px;
    text-align: right;
}

.bj-end {
    padding: 16px 10px;
    text-align: center;
}

@media (max-width: 640px) {
    .bj-card {
        width: 34px;
        height: 48px;
    }

    .bj-suit {
        font-size: 15px;
    }

    .bj-rank {
        font-size: 10px;
    }

    .bj-joker {
        flex-basis: 100px;
    }

    .bj-blinds {
        flex-direction: column;
    }
}

/* ---------- scoring animation (jokerz 98) ---------- */
.bj-animating {
    pointer-events: none;
}

.bj-menutop {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.bj-card.bj-scoring-pulse {
    outline: 2px solid #ffd400;
    transform: translateY(-14px) scale(1.06);
    box-shadow: 0 0 14px 2px rgba(255, 212, 0, .8);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
    z-index: 2;
}

.bj-joker.bj-trigger-pulse {
    outline: 2px solid #ffd400;
    box-shadow: 0 0 12px 2px rgba(255, 212, 0, .7);
    transform: translateY(-3px) scale(1.04);
    transition: transform .1s ease-out, box-shadow .1s ease-out;
}

.bj-chips.tick,
.bj-mult.tick {
    animation: bj-tick .18s ease-out;
}

@keyframes bj-tick {
    0% {
        transform: scale(1.3);
        filter: brightness(1.6);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.bj-readout.bj-finale {
    animation: bj-finale-flash .28s ease-out;
}

@keyframes bj-finale-flash {
    0% {
        background: #2a4a20;
        box-shadow: 0 0 0 rgba(13, 242, 89, 0);
    }

    40% {
        background: #1f6b3a;
        box-shadow: 0 0 24px 4px rgba(13, 242, 89, .6);
    }

    100% {
        background: #0f2d21;
        box-shadow: 0 0 0 rgba(13, 242, 89, 0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .bj-card.bj-scoring-pulse,
    .bj-joker.bj-trigger-pulse,
    .bj-chips.tick,
    .bj-mult.tick,
    .bj-readout.bj-finale {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ---------- hit counter badge ---------- */
/* the count comes from komarev as an svg image, so it cannot be restyled —
   a green glow is enough to seat it on the black LED panel */
.visitor-badge {
    display: block;
    height: 20px;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 0 6px rgba(13, 242, 89, 0.55));
}


/* =================================================================== */
/* sir, we have a troll problem — tower defense                         */
/* =================================================================== */
.tg-body {
    background: #16211a;
    color: #eee;
    padding: 6px;
    font-size: 11px;
}

.tg-body h2,
.tg-body h3 {
    margin: 0 0 6px;
    color: #fff;
}

.tg-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    color: #8fd66a;
    text-shadow: 2px 2px 0 #16301a;
    margin: 8px 0 6px;
}

.tg-lose {
    color: #ff5a5a;
}

.tg-win {
    color: #ffd400;
}

.tg-sub {
    text-align: center;
    color: #a9c99a;
    margin: 0 0 8px;
}

.tg-label {
    color: #8fd66a;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 8px 0 4px;
}

.tg-hint {
    color: #7fa870;
    font-size: 10px;
    text-align: center;
    margin-top: 6px;
}

.tg-cleared {
    text-align: center;
    color: #ffd400;
    margin: 4px 0;
}

.tg-crystals {
    text-align: center;
    color: #7fe0ff;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0;
}

/* ---------- buttons ---------- */
.tg-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 10px;
    background: #c0c0c0;
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    cursor: pointer;
}

.tg-btn:active {
    transform: translateY(1px);
}

.tg-btn.tg-go {
    background: #7abf4a;
    font-weight: bold;
}

.tg-btn.tg-small {
    font-size: 10px;
    padding: 2px 7px;
}

.tg-btn.tg-wide {
    display: block;
    width: 100%;
    margin: 6px 0;
    padding: 7px;
    font-weight: bold;
}

.tg-btn.tg-buy {
    font-size: 10px;
    padding: 3px 8px;
    flex-shrink: 0;
}

.tg-btn.tg-poor {
    opacity: .45;
}

.tg-maxed {
    color: #ffd400;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

/* ---------- menu ---------- */
.tg-menu {
    padding: 4px;
}

.tg-statsgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin: 8px 0;
    text-align: center;
}

.tg-statsgrid div {
    background: #0f1f14;
    border: 1px solid #2f5f3a;
    padding: 6px 2px;
}

.tg-statsgrid b {
    display: block;
    font-size: 15px;
    color: #ffd400;
}

.tg-statsgrid span {
    font-size: 8px;
    color: #8fd66a;
    text-transform: uppercase;
}

.tg-armory {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tg-armory-item {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1f14;
    border: 1px solid #2f5f3a;
    font-size: 14px;
    opacity: .4;
    border-radius: 3px;
}

.tg-armory-item.got {
    opacity: 1;
    border-color: #7abf4a;
    background: #1a3a20;
}

/* ---------- map picker ---------- */
.tg-maplist {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tg-mapcard {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: #0f1f14;
    border: 2px solid #2f5f3a;
    padding: 7px 9px;
    cursor: pointer;
    font-family: inherit;
}

.tg-mapcard:hover {
    background: #16301d;
}

.tg-mapcard.locked {
    opacity: .45;
    cursor: not-allowed;
}

.tg-mapname {
    font-weight: bold;
    font-size: 12px;
}

.tg-mapblurb {
    color: #a9c99a;
    font-size: 10px;
}

.tg-mapmeta {
    color: #7fa870;
    font-size: 9px;
}

/* ---------- in-game top bar ---------- */
.tg-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0f1f14;
    border: 1px solid #2f5f3a;
    padding: 3px 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.tg-stat {
    color: #cdd;
    font-size: 11px;
}

.tg-stat b {
    color: #fff;
}

.tg-lives b {
    color: #ff8a8a;
}

.tg-goldstat b,
.tg-goldstat {
    color: #ffd400;
}

.tg-speeds {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.tg-sbtn {
    font-family: inherit;
    font-size: 10px;
    padding: 2px 6px;
    background: #24382b;
    color: #cdd;
    border: 1px solid #3f6b4a;
    cursor: pointer;
}

.tg-sbtn.on {
    background: #7abf4a;
    color: #000;
    font-weight: bold;
}

.tg-waveinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #a9c99a;
    margin-bottom: 4px;
}

.tg-waveinfo .tg-btn {
    margin-left: auto;
}

.tg-bosstag {
    color: #ff5a5a;
}

/* ---------- arena ---------- */
.tg-canvas {
    display: block;
    margin: 0 auto;
    background: #0a1a0f;
    cursor: crosshair;
    max-width: 100%;
    touch-action: manipulation;
}

/* ---------- build bar ---------- */
.tg-buildbar {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 5px 0 4px;
}

.tg-tbtn {
    width: 46px;
    padding: 3px 0;
    background: #0f1f14;
    border: 2px solid #2f5f3a;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: inherit;
}

.tg-tbtn:hover {
    background: #1a3a20;
}

.tg-tbtn.sel {
    border-color: #ffd400;
    background: #2a3a18;
}

.tg-ticon {
    font-size: 17px;
    line-height: 1;
}

.tg-tcost {
    font-size: 9px;
    color: #ffd400;
}

/* ---------- inspector / offers ---------- */
.tg-inspect,
.tg-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0f1f14;
    border: 1px solid #2f5f3a;
    padding: 5px 7px;
    border-radius: 3px;
}

.tg-inspect-empty {
    color: #7fa870;
    font-size: 10px;
    justify-content: center;
}

.tg-offers {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-offer-icon {
    font-size: 19px;
    flex-shrink: 0;
}

.tg-offer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.tg-offer-info b {
    font-size: 11px;
    color: #fff;
}

.tg-offer-info span {
    font-size: 9px;
    color: #a9c99a;
}

.tg-lvl {
    color: #ffd400;
    font-weight: normal;
}

.tg-select {
    font-family: inherit;
    font-size: 10px;
    background: #24382b;
    color: #cdd;
    border: 1px solid #3f6b4a;
    padding: 2px;
    flex-shrink: 0;
}

.tg-shophead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tg-shophead h3 {
    margin: 0;
    flex: 1;
}

/* ---------- end screens ---------- */
.tg-end {
    padding: 14px 10px;
    text-align: center;
}

@media (max-width: 640px) {
    .tg-statsgrid b {
        font-size: 12px;
    }

    .tg-tbtn {
        width: 40px;
    }

    .tg-topbar {
        font-size: 10px;
    }
}

/* ===================================================================
   theme maker
   =================================================================== */
.tm-window {
    max-height: 88vh;
}

.tm-window .app-window-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 78vh;
}

.tm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px;
    background: #c0c0c0;
}

.tm-meta label,
.tm-track label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
    flex: 1 1 180px;
}

.tm-meta label.tm-wide,
.tm-track label.tm-wide {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.tm-input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px inset #c0c0c0;
    padding: 2px 4px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

.tm-input-sm {
    flex: 0 1 120px;
}

.tm-input-xs {
    flex: 0 0 62px;
}

.tm-area {
    resize: vertical;
    font-family: "Courier New", monospace;
}

.tm-color {
    width: 34px;
    height: 22px;
    padding: 0;
    border: 2px inset #c0c0c0;
    background: #fff;
    flex: 0 0 auto;
    cursor: pointer;
}

.tm-range {
    flex: 1 1 90px;
    min-width: 60px;
}

/* ---- tabs ---- */
.tm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.tm-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #c0c0c0;
    padding: 4px 8px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

.tm-tab .material-symbols-outlined {
    font-size: 15px;
}

.tm-tab.sel {
    background: #dfdfdf;
    box-shadow: inset 0 -2px 0 #000080;
}

.tm-live {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

.tm-panel {
    flex: 1;
    overflow: auto;
    background: #c0c0c0;
    padding: 2px;
    min-height: 260px;
}

.tm-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tm-btn {
    background: #c0c0c0;
    padding: 4px 10px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tm-btn:active:not([disabled]) {
    transform: translateY(1px);
}

.tm-btn[disabled] {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    cursor: not-allowed;
}

.tm-mini {
    background: #c0c0c0;
    padding: 1px 6px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
    color: #000;
}

.tm-danger {
    color: #7a0000;
}

/* ---- design tab ---- */
.tm-split {
    display: flex;
    gap: 6px;
    align-items: stretch;
    min-height: 300px;
}

.tm-tree {
    flex: 0 0 150px;
    background: #fff;
    overflow: auto;
    max-height: 46vh;
    padding: 2px;
}

.tm-tree-group {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #808080;
    padding: 5px 4px 2px;
    letter-spacing: 0.5px;
}

.tm-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 3px 5px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

.tm-node:hover {
    background: #e6e6e6;
}

.tm-node.sel {
    background: #000080;
    color: #fff;
}

.tm-badge {
    background: #008000;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.tm-props {
    flex: 1;
    min-width: 0;
    overflow: auto;
    max-height: 46vh;
    padding: 0 2px;
}

.tm-props-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
    color: #000;
    padding: 2px 0;
}

.tm-sel {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: #505050;
    word-break: break-all;
    margin-bottom: 4px;
}

.tm-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 3px;
    border-left: 3px solid transparent;
}

.tm-row.set {
    border-left-color: #008000;
    background: rgba(0, 128, 0, 0.07);
}

.tm-row-label {
    flex: 0 0 106px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

.tm-row-ctl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.tm-unset {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    line-height: 1;
    background: #c0c0c0;
    border: 1px solid #808080;
    font-size: 11px;
    color: #000;
}

.tm-hint {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #202020;
    padding: 4px 5px;
    line-height: 1.45;
}

.tm-label {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    padding: 7px 4px 3px;
}

.tm-empty {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #505050;
    padding: 6px;
}

/* ---- colours tab ---- */
.tm-gen {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    flex-wrap: wrap;
}

/* ---- events tab ---- */
.tm-events {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tm-event {
    background: #d4d4d4;
    padding: 5px;
}

.tm-event-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.tm-event-head .tm-input {
    flex: 1;
}

.tm-event-trig,
.tm-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 0;
}

.tm-action {
    border-top: 1px dotted #909090;
}

.tm-when,
.tm-then {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000080;
    flex: 0 0 34px;
}

.tm-then {
    color: #7a0000;
}

.tm-fl {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
    color: #404040;
}

.tm-actions {
    padding-left: 6px;
}

/* ---- music tab ---- */
.tm-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 18px 10px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #202020;
}

.tm-drop.over {
    background: #e0ffe0;
}

.tm-drop .material-symbols-outlined {
    font-size: 30px;
    color: #000080;
}

.tm-drop-sub {
    font-size: 10px;
    color: #606060;
}

.tm-track {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding: 6px;
    background: #c0c0c0;
    margin-top: 5px;
}

.tm-track-btns {
    display: flex;
    gap: 4px;
    flex: 1 1 100%;
}

.tm-legal {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
    color: #606060;
    padding: 6px 5px;
    line-height: 1.4;
}

/* ---- scan report ---- */
.tm-scan {
    background: #fff;
    padding: 5px;
    margin-top: 5px;
    max-height: 260px;
    overflow: auto;
}

.tm-scan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #202020;
    margin-bottom: 4px;
}

.tm-verdict {
    font-weight: bold;
    padding: 1px 7px;
    color: #fff;
    background: #808080;
    letter-spacing: 1px;
}

.tm-scan-clean .tm-verdict {
    background: #007000;
}

.tm-scan-suspicious .tm-verdict {
    background: #b06000;
}

.tm-scan-blocked .tm-verdict {
    background: #a00000;
}

.tm-scan-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 10px;
}

.tm-scan-table td {
    padding: 2px 4px;
    vertical-align: top;
    border-bottom: 1px solid #e8e8e8;
}

.tm-c-icon {
    width: 14px;
    font-weight: bold;
    text-align: center;
}

.tm-c-name {
    width: 128px;
    color: #000;
}

.tm-c-detail {
    color: #404040;
}

.tm-c-pass .tm-c-icon {
    color: #007000;
}

.tm-c-warn .tm-c-icon {
    color: #b06000;
}

.tm-c-warn {
    background: #fff8e8;
}

.tm-c-fail .tm-c-icon {
    color: #a00000;
}

.tm-c-fail {
    background: #ffecec;
}

.tm-scan-hash {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: #606060;
    word-break: break-all;
    padding-top: 3px;
}

/* ---- gallery ---- */
.tm-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px;
}

.tm-card {
    width: 122px;
    background: #c0c0c0;
    padding: 3px;
}

.tm-card-prev {
    height: 44px;
    position: relative;
    border: 1px solid #000;
    overflow: hidden;
}

.tm-card-bar {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 10px;
    height: 9px;
    border: 1px solid rgba(0, 0, 0, .5);
}

.tm-card-dot {
    position: absolute;
    right: 5px;
    bottom: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .5);
}

.tm-card-name {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-card-by {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 9px;
    color: #505050;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-card-btns {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

/* ---- publish ---- */
.tm-summary,
.tm-blockers,
.tm-ready {
    background: #fff;
    padding: 6px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
    margin: 4px 0;
    line-height: 1.5;
}

.tm-summary code {
    font-family: "Courier New", monospace;
    font-size: 10px;
    background: #eee;
}

.tm-blockers {
    background: #ffecec;
    color: #700;
}

.tm-blockers ul {
    margin: 3px 0 0 16px;
    list-style: square;
}

.tm-ready {
    background: #e8ffe8;
    color: #060;
    font-weight: bold;
}

.tm-publish {
    width: 100%;
    justify-content: center;
    padding: 7px;
    font-size: 12px;
}

.tm-json summary {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    color: #000080;
    cursor: pointer;
    padding: 4px;
}

.tm-json pre {
    background: #fff;
    border: 2px inset #c0c0c0;
    padding: 5px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 767px) {
    .tm-split {
        flex-direction: column;
    }

    .tm-tree {
        flex: 0 0 auto;
        max-height: 150px;
    }

    .tm-props {
        max-height: none;
    }

    .tm-row-label {
        flex: 0 0 84px;
        font-size: 10px;
    }

    .tm-card {
        width: calc(50% - 4px);
    }
}

/* ---- editor armour ----
   live preview paints the real desktop, which includes the theme maker's own
   window. that is the point — but the controls you are editing with have to
   stay readable no matter how hostile the theme is. these rules carry higher
   specificity than any node selector the compiler can emit (which are all
   single class or element selectors), so they win even against its
   !important declarations. */
.tm-window .tm-panel,
.tm-window .tm-meta,
.tm-window .tm-foot,
.tm-window .tm-tabs {
    background: #c0c0c0 !important;
    color: #000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    filter: none !important;
}

.tm-window .tm-tab,
.tm-window .tm-btn,
.tm-window .tm-mini {
    background: #c0c0c0 !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

.tm-window .tm-tab.sel {
    background: #dfdfdf !important;
}

.tm-window .tm-btn.tm-danger,
.tm-window .tm-mini.tm-danger {
    color: #7a0000 !important;
}

.tm-window .tm-tab .material-symbols-outlined,
.tm-window .tm-btn .material-symbols-outlined {
    color: #000080 !important;
    filter: none !important;
    font-size: 15px !important;
}

.tm-window .tm-input,
.tm-window .tm-area,
.tm-window select.tm-input {
    background: #fff !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    font-size: 11px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

.tm-window .tm-tree,
.tm-window .tm-drop,
.tm-window .tm-scan,
.tm-window .tm-summary,
.tm-window .tm-json pre {
    background: #fff !important;
    color: #000 !important;
}

.tm-window .tm-node {
    color: #000 !important;
    background: transparent !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    text-transform: none !important;
}

.tm-window .tm-node.sel {
    background: #000080 !important;
    color: #fff !important;
}

.tm-window .tm-blockers {
    background: #ffecec !important;
    color: #700 !important;
}

.tm-window .tm-ready {
    background: #e8ffe8 !important;
    color: #060 !important;
}

.tm-window .tm-hint,
.tm-window .tm-label,
.tm-window .tm-row-label,
.tm-window .tm-props-head,
.tm-window .tm-card-name {
    color: #000 !important;
    text-shadow: none !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    text-transform: none !important;
}

.tm-window .tm-sel,
.tm-window .tm-legal,
.tm-window .tm-empty,
.tm-window .tm-card-by,
.tm-window .tm-tree-group {
    color: #505050 !important;
    text-shadow: none !important;
}

.tm-window .tm-scan-table td {
    color: #303030 !important;
}

.tm-window .tm-c-name {
    color: #000 !important;
}

/* ===================================================================
   fullscreen windows
   =================================================================== */
.fs-btn .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

/* :fullscreen paints its own black backdrop and ignores the window's
   position, so the frame has to be rebuilt as a plain full-viewport column */
.app-window.fs-active {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column;
    z-index: 2147483647;
}

.app-window.fs-active .app-window-header {
    flex: 0 0 auto;
    cursor: default;
}

.app-window.fs-active .app-window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* the canvas is sized in js so it keeps its aspect ratio; these just stop the
   inherited max-width from fighting the computed size */
.app-window.fs-active canvas {
    max-width: none;
    margin: 0 auto;
    flex: 0 0 auto;
}

/* dom-based games (jokerz 98, solitaire) just get the extra room, but capped
   and centred so they do not stretch into something unrecognisable on a wide
   monitor. the games tag their own window body with these classes. */
.app-window.fs-active .app-window-body.bj-body,
.app-window.fs-active .app-window-body.sol-body,
.app-window.fs-active .app-window-body.tg-body,
.app-window.fs-active .app-window-body.bu-body {
    align-items: center;
}

.app-window.fs-active .bj-body>*,
.app-window.fs-active .sol-body>*,
.app-window.fs-active .tg-body>*,
.app-window.fs-active .bu-body>* {
    width: 100%;
    max-width: 1500px;
    flex-shrink: 0;
}

.app-window.fs-active .tg-body>* {
    max-width: 1150px;
}

@media (max-width: 767px) {
    .app-window.fs-active {
        width: 100vw !important;
    }
}

/* ===================================================================
   become user — interactive drama
   =================================================================== */
.bu-body {
    background: #0d0d14;
    color: #d8dde6;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    padding: 6px;
}

.bu-canvas {
    display: block;
    margin: 0 auto;
    background: #000;
    max-width: 100%;
    cursor: pointer;
}

/* ---- hud ---- */
.bu-hud {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 3px 4px 5px;
    font-size: 10px;
    color: #9aa4b2;
}

.bu-ch {
    font-weight: bold;
    color: #d8dde6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bu-date {
    font-family: "Courier New", monospace;
    color: #7c8798;
}

.bu-pov {
    font-weight: bold;
    margin-left: auto;
}

.bu-stats {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.bu-stat {
    display: flex;
    align-items: center;
    gap: 3px;
}

.bu-stat-label {
    font-size: 8px;
    color: #7c8798;
    letter-spacing: 0.4px;
}

.bu-stat-bar {
    display: inline-block;
    width: 42px;
    height: 6px;
    background: #23283a;
    border: 1px solid #3a4157;
}

.bu-stat-bar>span {
    display: block;
    height: 100%;
    transition: width .35s;
}

/* ---- dialogue ---- */
.bu-stage {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bu-box {
    background: #14161f;
    border-color: #2a3042;
    padding: 8px 10px;
    min-height: 62px;
    cursor: pointer;
}

.bu-speaker {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.bu-text,
.bu-prompt {
    font-size: 12px;
    line-height: 1.55;
    color: #e2e7f0;
}

.bu-prompt {
    color: #ffd76a;
}

.bu-text.typing::after,
.bu-prompt.typing::after {
    content: '▌';
    opacity: .7;
}

.bu-next {
    text-align: right;
    font-size: 9px;
    color: #6c7688;
    margin-top: 4px;
}

/* ---- choices ---- */
.bu-choices {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bu-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: #1b1f2c;
    color: #dfe5ef;
    padding: 6px 8px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11.5px;
    border-top: 2px solid #3d4459;
    border-left: 2px solid #3d4459;
    border-right: 2px solid #0a0c12;
    border-bottom: 2px solid #0a0c12;
    box-shadow: none;
}

.bu-choice:hover {
    background: #262c3d;
}

.bu-choice:active {
    transform: translateY(1px);
}

.bu-key {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    line-height: 15px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #0d0d14;
    background: #ffd76a;
}

.bu-ctext {
    flex: 1;
}

.bu-tag {
    flex: 0 0 auto;
    font-size: 9px;
    color: #7c8798;
    font-style: italic;
}

/* ---- qte ---- */
.bu-qte {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 4px;
}

.bu-qkey {
    min-width: 34px;
    padding: 6px 8px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    background: #1b1f2c;
    border: 2px solid #3d4459;
    color: #7c8798;
}

.bu-qkey.now {
    background: #ffd76a;
    color: #0d0d14;
    border-color: #fff;
    transform: scale(1.14);
}

.bu-qkey.hit {
    background: #2b5c33;
    color: #9df0b0;
    border-color: #4c8f57;
}

.bu-qte-hint {
    text-align: center;
    font-size: 9px;
    color: #6c7688;
}

.bu-qte-touch {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.bu-qbtn {
    background: #1b1f2c;
    color: #dfe5ef;
    padding: 6px 12px;
    font-size: 14px;
    border-top: 2px solid #3d4459;
    border-left: 2px solid #3d4459;
    border-right: 2px solid #0a0c12;
    border-bottom: 2px solid #0a0c12;
}

/* ---- inspect ---- */
.bu-found {
    margin-top: 6px;
    padding: 6px 8px;
    background: #101a14;
    border-left: 3px solid #4c8f57;
    font-size: 11.5px;
    line-height: 1.5;
    color: #cfe6d6;
}

.bu-inspect-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: #9aa4b2;
}

/* ---- buttons ---- */
.bu-btn {
    background: #1b1f2c;
    color: #dfe5ef;
    padding: 6px 12px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    border-top: 2px solid #3d4459;
    border-left: 2px solid #3d4459;
    border-right: 2px solid #0a0c12;
    border-bottom: 2px solid #0a0c12;
}

.bu-btn:hover:not([disabled]) {
    background: #262c3d;
}

.bu-btn[disabled] {
    color: #5a6172;
}

.bu-btn.bu-primary {
    background: #ffd76a;
    color: #14161f;
}

.bu-btn.bu-primary:hover {
    background: #ffe490;
}

.bu-mini {
    background: #1b1f2c;
    color: #dfe5ef;
    font-size: 9px;
    padding: 2px 7px;
    border-top: 1px solid #3d4459;
    border-left: 1px solid #3d4459;
    border-right: 1px solid #0a0c12;
    border-bottom: 1px solid #0a0c12;
}

/* ---- menu ---- */
.bu-menu {
    padding: 10px 8px;
    text-align: center;
}

.bu-title {
    font-family: "Courier New", monospace;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    color: #ffd76a;
    text-shadow: 0 0 18px rgba(255, 215, 106, .35);
}

.bu-sub {
    font-size: 10px;
    color: #7c8798;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bu-pitch {
    font-size: 11.5px;
    line-height: 1.6;
    color: #b9c2d0;
    max-width: 520px;
    margin: 0 auto 12px;
}

.bu-cast {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bu-cast-card {
    flex: 1 1 170px;
    max-width: 200px;
    background: #14161f;
    border: 1px solid #2a3042;
    border-top: 3px solid var(--c);
    padding: 7px;
    text-align: left;
}

.bu-cast-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--c);
    font-family: "Courier New", monospace;
}

.bu-cast-role {
    font-size: 9.5px;
    color: #8b95a6;
    margin-bottom: 4px;
}

.bu-cast-blurb {
    font-size: 10px;
    line-height: 1.45;
    color: #aab4c4;
}

.bu-menu-btns {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.bu-legal {
    font-size: 9px;
    color: #5f6879;
    margin-top: 12px;
}

/* ---- pages ---- */
.bu-page {
    padding: 8px;
}

.bu-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #e2e7f0;
    margin-bottom: 5px;
}

.bu-hint {
    font-size: 10.5px;
    color: #8b95a6;
    line-height: 1.5;
    margin-bottom: 8px;
}

.bu-chlist {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bu-chcard {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #171a26;
    color: #dfe5ef;
    padding: 6px 9px;
    font-size: 11px;
    border-top: 2px solid #3d4459;
    border-left: 2px solid #3d4459;
    border-right: 2px solid #0a0c12;
    border-bottom: 2px solid #0a0c12;
}

.bu-chcard.locked {
    color: #5a6172;
}

.bu-chn {
    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: bold;
    color: var(--c);
    width: 20px;
}

.bu-chcard.locked .bu-chn {
    color: #3d4459;
}

.bu-chtitle {
    flex: 1;
    font-weight: bold;
}

.bu-chwho {
    font-size: 9.5px;
    color: #8b95a6;
    font-family: "Courier New", monospace;
}

.bu-chdate {
    font-size: 9px;
    color: #6c7688;
    font-family: "Courier New", monospace;
}

/* ---- chapter end + flowchart ---- */
.bu-chend {
    text-align: center;
}

.bu-chend-title {
    font-size: 10px;
    letter-spacing: 3px;
    color: #7c8798;
}

.bu-chend-name {
    font-family: "Courier New", monospace;
    font-size: 21px;
    color: #ffd76a;
    margin-bottom: 6px;
}

.bu-chend-text {
    font-size: 11.5px;
    line-height: 1.6;
    color: #b9c2d0;
    max-width: 520px;
    margin: 0 auto 12px;
}

.bu-flow-head {
    font-size: 9px;
    letter-spacing: 2px;
    color: #6c7688;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.bu-flow {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    max-height: 250px;
    overflow: auto;
    margin-bottom: 10px;
}

.bu-flownode {
    background: #14161f;
    border-left: 3px solid #3d4459;
    padding: 5px 8px;
}

.bu-flowq {
    font-size: 10px;
    color: #9aa4b2;
    margin-bottom: 3px;
}

.bu-flowopts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bu-flowopt {
    font-size: 10.5px;
    padding: 2px 6px;
    border-left: 2px solid transparent;
}

.bu-flowopt.took {
    color: #ffd76a;
    border-left-color: #ffd76a;
    background: rgba(255, 215, 106, .07);
    font-weight: bold;
}

.bu-flowopt.known {
    color: #8b95a6;
    border-left-color: #3d4459;
}

.bu-flowopt.missed {
    color: #4a5162;
    border-left-color: #262c3d;
    font-family: "Courier New", monospace;
    letter-spacing: 2px;
}

.bu-chend-btns {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- endings ---- */
.bu-endlist {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bu-endcard {
    background: #14161f;
    border-color: #2a3042;
    padding: 6px 9px;
}

.bu-endcard.locked .bu-endname {
    color: #4a5162;
}

.bu-endname {
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;
    color: #ffd76a;
    letter-spacing: 1px;
}

.bu-endcard.tone-good .bu-endname {
    color: #9df0b0;
}

.bu-endcard.tone-bad .bu-endname {
    color: #ff8a8a;
}

.bu-endcard.tone-bittersweet .bu-endname {
    color: #c08aff;
}

.bu-endtext {
    font-size: 10.5px;
    color: #8b95a6;
    line-height: 1.45;
}

.bu-endpage {
    text-align: center;
}

.bu-endlabel {
    font-size: 9px;
    letter-spacing: 4px;
    color: #6c7688;
}

.bu-endtitle {
    font-family: "Courier New", monospace;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #ffd76a;
    margin-bottom: 10px;
}

.bu-endpage.tone-good .bu-endtitle {
    color: #9df0b0;
    text-shadow: 0 0 18px rgba(157, 240, 176, .3);
}

.bu-endpage.tone-bad .bu-endtitle {
    color: #ff8a8a;
    text-shadow: 0 0 18px rgba(255, 138, 138, .3);
}

.bu-endpage.tone-bittersweet .bu-endtitle {
    color: #c08aff;
    text-shadow: 0 0 18px rgba(192, 138, 255, .3);
}

.bu-endbody {
    font-size: 12px;
    line-height: 1.7;
    color: #c6cede;
    max-width: 540px;
    margin: 0 auto 12px;
    text-align: left;
}

.bu-endstats {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 9.5px;
    color: #8b95a6;
    margin-bottom: 6px;
}

.bu-endstats b {
    color: #6c7688;
    letter-spacing: 0.5px;
}

.bu-survivors {
    font-size: 10.5px;
    color: #9aa4b2;
    margin-bottom: 12px;
    font-family: "Courier New", monospace;
}

@media (max-width: 767px) {
    .bu-title {
        font-size: 22px;
        letter-spacing: 3px;
    }

    .bu-endtitle {
        font-size: 20px;
    }

    .bu-hud {
        font-size: 9px;
    }

    .bu-pov {
        margin-left: 0;
    }

    .bu-choice {
        font-size: 11px;
    }

    .bu-tag {
        display: none;
    }

    .bu-cast-card {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ===================================================================
   NETPLAY LOBBY  (.np-)
   invite codes, rosters and a chat box, in the same grey plastic as
   every other window on this desktop.
   =================================================================== */
.np-body {
    background: #c0c0c0;
    color: #000;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 8px;
    max-height: 70vh;
    overflow-y: auto;
}

.np-head {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #000080;
    color: #fff;
    padding: 4px 6px;
    margin-bottom: 8px;
}

.np-head .material-symbols-outlined {
    font-size: 16px;
}

.np-chip {
    margin-left: auto;
    background: #c0c0c0;
    color: #000;
    padding: 1px 6px;
    font-size: 10px;
}

.np-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.np-label {
    width: 54px;
    flex-shrink: 0;
    font-weight: bold;
}

.np-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 5px;
    background: #fff;
    color: #000;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.np-note {
    font-size: 10.5px;
    color: #333;
    margin: 0 0 8px 60px;
}

.np-hidden {
    display: none;
}

.np-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 10px;
    background: #c0c0c0;
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    cursor: pointer;
}

.np-btn:active {
    transform: translateY(1px);
}

.np-btn:disabled {
    opacity: .5;
    cursor: default;
}

.np-btn.np-go {
    background: #7abf4a;
    font-weight: bold;
}

.np-btn.np-small {
    font-size: 10px;
    padding: 2px 7px;
}

.np-split {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.np-card {
    flex: 1 1 200px;
    background: #c0c0c0;
    padding: 8px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.np-card-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.np-p {
    font-size: 10.5px;
    color: #333;
    margin-bottom: 6px;
}

.np-join {
    display: flex;
    gap: 4px;
}

.np-code-input {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    text-align: center;
}

.np-solo {
    text-align: center;
    margin: 4px 0;
}

.np-status {
    margin-top: 8px;
    padding: 3px 6px;
    background: #000;
    color: #0df259;
    font-size: 10.5px;
    min-height: 18px;
}

.np-codebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #000;
    padding: 6px 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.np-code-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
}

.np-code {
    color: #0df259;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 8px;
}

.np-code-actions {
    display: flex;
    gap: 4px;
}

.np-players {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.np-player {
    flex: 1 1 120px;
    text-align: center;
    background: #b0b0b0;
    padding: 6px;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.np-player.np-ok {
    background: #a8c89a;
}

.np-avatar {
    background: #1b1030;
    display: block;
    margin: 0 auto 4px;
}

.np-pname {
    font-weight: bold;
    font-size: 11px;
    word-break: break-all;
}

.np-pstate {
    font-size: 10px;
    color: #333;
}

.np-tag {
    background: #000080;
    color: #fff;
    font-size: 9px;
    padding: 0 3px;
}

.np-tag.np-you {
    background: #0a6b28;
}

.np-empty {
    opacity: .6;
}

.np-slot {
    height: 64px;
    line-height: 64px;
    color: #444;
}

.np-chat {
    height: 90px;
    overflow-y: auto;
    background: #fff;
    padding: 4px;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    font-size: 11px;
}

.np-line {
    line-height: 1.35;
    word-break: break-word;
}

.np-line.np-dim {
    color: #888;
}

.np-chatrow {
    display: flex;
    gap: 4px;
    margin: 6px 0;
}

.np-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===================================================================
   WIZARDZ 98  (.wz-)
   =================================================================== */
.wz-body {
    background: #0d0620;
    color: #e8e2ff;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 6px;
    max-height: 80vh;
    overflow-y: auto;
}

.wz-arena-wrap {
    display: flex;
    justify-content: center;
    background: #000;
    border: 2px solid #4b2d7a;
}

.wz-canvas {
    display: block;
    max-width: 100%;
    touch-action: none;
    cursor: crosshair;
    image-rendering: pixelated;
}

.wz-strip {
    display: flex;
    gap: 4px;
    margin: 6px 0;
    overflow-x: auto;
}

.wz-card {
    flex: 1 1 0;
    min-width: 62px;
    background: #1b1030;
    border: 1px solid #4b2d7a;
    padding: 3px;
    text-align: center;
    color: inherit;
    font-family: inherit;
    cursor: default;
}

.wz-card canvas {
    display: block;
    margin: 0 auto;
}

.wz-card.wz-cool {
    opacity: .45;
}

.wz-card.wz-poor {
    filter: grayscale(.7);
}

.wz-card.on {
    border-color: #0df259;
    box-shadow: 0 0 0 1px #0df259 inset;
}

.wz-card-name {
    font-size: 9.5px;
    line-height: 1.1;
    word-break: break-word;
}

.wz-card-cost {
    font-size: 9px;
    color: #9a8ec4;
}

.wz-foot {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.wz-wait {
    font-size: 11px;
    color: #ffe14d;
}

.wz-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 9px;
    background: #2a1a48;
    color: #e8e2ff;
    border-top: 2px solid #6a4aa0;
    border-left: 2px solid #6a4aa0;
    border-right: 2px solid #150a2a;
    border-bottom: 2px solid #150a2a;
    cursor: pointer;
}

.wz-btn:active {
    transform: translateY(1px);
}

.wz-btn.wz-go {
    background: #0a6b28;
    color: #d8ffd8;
    font-weight: bold;
}

.wz-btn.wz-wide {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 7px;
    font-weight: bold;
}

.wz-btn.wz-tiny {
    font-size: 10px;
    padding: 1px 6px;
}

.wz-input {
    font-family: inherit;
    font-size: 12px;
    padding: 3px 5px;
    background: #1b1030;
    color: #e8e2ff;
    border: 1px solid #6a4aa0;
}

.wz-menu {
    padding: 4px;
}

.wz-title {
    font-size: 26px;
    font-weight: bold;
    color: #b04dff;
    text-shadow: 2px 2px 0 #2a1a48;
    letter-spacing: 2px;
}

.wz-sub {
    font-size: 11.5px;
    color: #9a8ec4;
    margin-bottom: 10px;
}

.wz-menu-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.wz-menu-side {
    flex: 0 0 160px;
    text-align: center;
}

.wz-menu-side canvas {
    background: #160a2b;
    border: 1px solid #4b2d7a;
}

.wz-me-name {
    font-size: 11px;
    color: #ffe14d;
    margin: 4px 0;
}

.wz-menu-main {
    flex: 1 1 260px;
}

.wz-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0;
}

.wz-hint {
    font-size: 10.5px;
    color: #9a8ec4;
    line-height: 1.45;
    margin-top: 8px;
    border-left: 2px solid #4b2d7a;
    padding-left: 6px;
}

/* ---------- grimoire ---------- */
.wz-book {
    background: #0d0620;
    color: #e8e2ff;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 6px;
    max-height: 74vh;
    overflow-y: auto;
}

.wz-book-tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.wz-tab {
    font-family: inherit;
    font-size: 10px;
    padding: 2px 6px;
    background: #1b1030;
    color: #cfc4ee;
    border: 1px solid #4b2d7a;
    cursor: pointer;
}

.wz-tab.on {
    background: #4b2d7a;
    color: #fff;
}

.wz-book-body {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wz-book-list {
    flex: 1 1 220px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wz-book-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #160a2b;
    border: 1px solid #2a1a48;
    padding: 2px 4px;
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
}

.wz-book-item.on {
    border-color: #0df259;
}

.wz-book-detail {
    flex: 1 1 190px;
    text-align: center;
}

.wz-book-detail canvas {
    background: #160a2b;
    border: 1px solid #4b2d7a;
}

.wz-book-name {
    font-size: 16px;
    font-weight: bold;
    margin-top: 4px;
}

.wz-book-meta {
    font-size: 10.5px;
    color: #9a8ec4;
}

.wz-book-blurb {
    font-size: 11px;
    margin: 6px 0;
    line-height: 1.4;
}

.wz-load-top {
    font-size: 11px;
    color: #9a8ec4;
    margin-bottom: 6px;
    line-height: 1.4;
}

.wz-load-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.wz-load-all {
    max-height: 240px;
}

/* ---------- trainer ---------- */
.wz-train {
    background: #0d0620;
    color: #e8e2ff;
    font-family: "Courier New", monospace;
    padding: 8px;
    text-align: center;
}

.wz-train-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.wz-train canvas {
    background: #160a2b;
    border: 1px solid #4b2d7a;
}

.wz-pad {
    cursor: crosshair;
    touch-action: none;
}

.wz-score {
    margin: 8px 0;
    font-size: 12px;
    min-height: 18px;
}

/* ---------- dressing room ---------- */
.wz-dress {
    background: #0d0620;
    color: #e8e2ff;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 8px;
    max-height: 74vh;
    overflow-y: auto;
}

.wz-dress-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wz-dress-view {
    flex: 0 0 190px;
    text-align: center;
}

.wz-dress-view canvas {
    background: #160a2b;
    border: 1px solid #4b2d7a;
}

.wz-dress-parts {
    flex: 1 1 200px;
}

.wz-part {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.wz-part-label {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    background: #160a2b;
    border: 1px solid #2a1a48;
    padding: 2px 6px;
    font-size: 11px;
}

.wz-part-label b {
    color: #ffe14d;
}

@media (max-width: 767px) {
    .wz-title {
        font-size: 20px;
    }

    .wz-card {
        min-width: 54px;
    }

    .np-code {
        font-size: 22px;
        letter-spacing: 4px;
    }
}

/* ---------- 1 v bot roster ---------- */
.wz-bots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.wz-bot {
    flex: 1 1 150px;
    max-width: 190px;
    background: #160a2b;
    border: 1px solid #4b2d7a;
    padding: 6px 5px;
    color: #e8e2ff;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}

.wz-bot:hover {
    border-color: #0df259;
    background: #1b1030;
}

.wz-bot:active {
    transform: translateY(1px);
}

.wz-bot canvas {
    display: block;
    margin: 0 auto;
}

.wz-bot-name {
    font-weight: bold;
    font-size: 13px;
    color: #fff;
}

.wz-bot-title {
    font-size: 10px;
    color: #9a8ec4;
}

.wz-bot-tier {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 2px 0;
}

.wz-bot-blurb {
    font-size: 10px;
    line-height: 1.35;
    color: #cfc4ee;
    min-height: 40px;
}

.wz-bot-els {
    font-size: 10px;
    margin-top: 3px;
}

/* =================================================================== */
/* disk defragmenter                                                    */
/* the palette is the one from the original: dark blue needs to move,   */
/* light blue is home, white is free, and the two hot colours are the   */
/* head reading and writing                                             */
/* =================================================================== */
.dfg-body {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.dfg-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.dfg-frag {
    font-weight: bold;
    color: #7a1616;
}

.dfg-cluster {
    margin-left: auto;
    color: #444;
    font-size: 10px;
}

.dfg-map {
    display: block;
    width: 100%;
    background: #c8c8c8;
    image-rendering: pixelated;
    cursor: crosshair;
}

.dfg-bar {
    height: 12px;
    background: #fff;
    margin: 6px 0 3px;
    padding: 1px;
}

.dfg-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, #000080 0 6px, #1084d0 6px 8px);
    transition: width .12s linear;
}

.no-motion .dfg-fill {
    transition: none;
}

.dfg-status {
    min-height: 15px;
    margin-bottom: 5px;
    color: #202020;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dfg-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.dfg-btn {
    background: #c0c0c0;
    color: #000;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 10px;
}

.dfg-btn:disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    cursor: default;
}

.dfg-speed {
    margin-left: auto;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dfg-select {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background: #fff;
    border: 1px solid #808080;
    color: #000;
}

.dfg-legend {
    margin-top: 6px;
    font-size: 10px;
}

.dfg-legend summary {
    cursor: pointer;
}

.dfg-legend-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px 10px;
    margin-top: 4px;
}

.dfg-legend-rows span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dfg-legend-rows i {
    width: 11px;
    height: 11px;
    border: 1px solid #666;
    flex-shrink: 0;
}

/* =================================================================== */
/* echoes of the tide: leviathan's wake                                 */
/* rust, verdigris, bone and abyss — a rig lit by whale-oil lamps       */
/* =================================================================== */
.et-body {
    background: #17201c;
    color: #d8d2c2;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    max-height: 80vh;
    padding: 6px;
}

.et-two {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.et-side {
    width: 176px;
    flex-shrink: 0;
}

.et-main {
    flex: 1;
    min-width: 0;
}

.et-scroll {
    max-height: 66vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ---------- the menu ---------- */
.et-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    color: #c9a227;
    text-align: center;
    margin: 6px 0 2px;
}

.et-sub {
    text-align: center;
    color: #8fa38f;
    margin-bottom: 10px;
}

.et-intro {
    white-space: pre-wrap;
    line-height: 1.5;
    color: #c8c2b2;
    background: #121a16;
    border-left: 3px solid #3c5145;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.et-field {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.et-field label {
    /* 46px lines "name" up with "seed", which is the whole reason for a
       fixed width. The seed label also carries a sentence explaining what
       a seed is, and at 46px that sentence came out one word per line —
       on the desk as well as on a phone. A minimum keeps the alignment; a
       maximum keeps the sentence from eating the input. */
    min-width: 46px;
    max-width: 45%;
    flex-shrink: 0;
    color: #8fa38f;
}

.et-field input {
    flex: 1;
    background: #0e1512;
    border: 1px solid #3c5145;
    color: #d8d2c2;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 5px;
}

.et-row {
    display: flex;
    gap: 6px;
}

/* ---------- character strip ---------- */
.et-sheet {
    background: #121a16;
    border: 1px solid #3c5145;
    padding: 6px;
}

.et-name {
    font-weight: bold;
    color: #e8e0cc;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 8px;
}

.et-name span {
    color: #c9a227;
    font-weight: normal;
}

.et-bar {
    position: relative;
    height: 13px;
    background: #0b120f;
    margin-bottom: 3px;
}

.et-bar-fill {
    height: 100%;
    background: #4a6f52;
    transition: width .25s;
}

.no-motion .et-bar-fill {
    transition: none;
}

.et-bar-fill.hp { background: linear-gradient(90deg, #7a2f2f, #b8514a); }
.et-bar-fill.stam { background: linear-gradient(90deg, #3f5f7a, #5a8fb8); }
.et-bar-fill.xp { background: linear-gradient(90deg, #6b5a1f, #c9a227); }
.et-bar-fill.foe { background: linear-gradient(90deg, #5a2c3a, #a2617d); }

.et-bar span {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 9px;
    line-height: 13px;
    color: #e8e0cc;
    text-shadow: 1px 1px 0 #000;
}

.et-stats,
.et-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 6px;
    font-size: 10px;
    color: #9fb09f;
    margin-top: 4px;
}

.et-stats b,
.et-skills b {
    color: #e8e0cc;
}

.et-coin {
    margin-top: 5px;
    font-size: 10px;
    color: #c9a227;
    border-top: 1px dotted #3c5145;
    padding-top: 4px;
}

/* ---------- who is looking for you ---------- */
.et-nem {
    margin-top: 6px;
    background: #1b1218;
    border: 1px solid #5a2c3a;
    padding: 5px;
}

.et-nem-head {
    font-size: 10px;
    color: #a2617d;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.et-nem-row {
    font-size: 10px;
    line-height: 1.35;
    border-top: 1px dotted #3a2630;
    padding-top: 2px;
    margin-top: 2px;
}

.et-nem-row b { color: #e0b8c8; display: block; }
.et-nem-row span { color: #8f7080; }
.et-nem-row i { float: right; color: #6f5a62; font-style: normal; }

/* ---------- place & actions ---------- */
.et-place {
    border-left: 4px solid #4a6f52;
    background: #121a16;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.et-place-name {
    font-weight: bold;
    color: #e8e0cc;
}

.et-place-weather {
    font-size: 10px;
    color: #7f9080;
    font-style: italic;
}

.et-place-blurb {
    margin-top: 3px;
    color: #b8b2a2;
}

.et-acts {
    display: block;
    margin-bottom: 6px;
    border-left: 3px solid #6b5a1f;
    padding-left: 7px;
}

.et-btn {
    background: #24312a;
    border: 1px solid #4a6f52;
    color: #d8d2c2;
    font-family: inherit;
    font-size: 11px;
    padding: 5px 7px;
    cursor: pointer;
    text-align: left;
}

.et-btn:hover:not(:disabled) {
    background: #2f4136;
    border-color: #6fae7a;
}

.et-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.et-btn:disabled {
    opacity: .4;
    cursor: default;
}

.et-wide {
    grid-column: 1 / -1;
    text-align: center;
}

.et-end {
    border-color: #c9a227;
    color: #f0d98a;
}

/* ---------- log ---------- */
.et-log {
    background: #0e1512;
    border: 1px solid #2a3a30;
    padding: 5px 6px;
    max-height: 108px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.45;
}

.et-log div {
    border-bottom: 1px dotted #1f2b24;
    padding: 1px 0;
}

/* ---------- travel ---------- */
.et-realms {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
}

.et-realm {
    background: #121a16;
    border-left: 4px solid #4a6f52;
    border-top: 1px solid #2a3a30;
    border-right: 1px solid #2a3a30;
    border-bottom: 1px solid #2a3a30;
    color: #d8d2c2;
    font-family: inherit;
    text-align: left;
    padding: 5px 8px;
    cursor: pointer;
}

.et-realm b { display: block; color: #e8e0cc; }
.et-realm span { display: block; font-size: 10px; color: #8fa38f; margin-top: 3px; }
.et-realm span:first-of-type { margin-top: 2px; }
.et-realm i { float: right; font-size: 10px; color: #c9a227; font-style: normal; }
.et-realm.here { background: #1b2721; }
.et-realm.locked { opacity: .45; cursor: default; }
.et-realm:not([data-a]) { cursor: default; }
.et-realm[data-a] { border-left-color: #c9a227; }

/* ---------- a fight ---------- */
.et-foe {
    background: #1b1218;
    border: 1px solid #5a2c3a;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.et-foe-name {
    font-weight: bold;
    color: #e0b8c8;
    margin-bottom: 3px;
}

.et-foe-text {
    font-size: 11px;
    color: #a89aa2;
    margin: 3px 0;
}

.et-traits {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.et-trait {
    font-size: 10px;
    background: #2a1a22;
    border: 1px solid #5a2c3a;
    padding: 1px 5px;
    color: #8f7080;
}

.et-trait.known {
    color: #e0b8c8;
    border-color: #a2617d;
}

.et-abils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}

.et-abil i {
    float: right;
    color: #5a8fb8;
    font-style: normal;
}

.et-fightlog {
    background: #0e1512;
    border: 1px solid #2a3a30;
    padding: 5px 6px;
    min-height: 96px;
    max-height: 140px;
    overflow-y: auto;
    line-height: 1.5;
}

.et-fightlog div {
    padding: 1px 0;
}

/* ---------- pack, guild, codex ---------- */
.et-h {
    color: #c9a227;
    font-size: 14px;
    margin: 0 0 6px;
}

.et-h4 {
    color: #8fa38f;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 8px 0 3px;
}

.et-dim { color: #7f9080; font-size: 11px; }

.et-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px;
}

.et-item {
    background: #121a16;
    border: 1px solid #2a3a30;
    padding: 2px 6px;
    font-size: 11px;
}

.et-item i { float: right; color: #c9a227; font-style: normal; }

.et-gears { display: grid; gap: 3px; }

.et-gear {
    background: #121a16;
    border-left: 3px solid #c9a227;
    padding: 3px 7px;
}

.et-gear span {
    font-size: 10px;
    color: #7f9080;
    text-transform: uppercase;
    margin-right: 6px;
}

.et-gear b { color: #e8e0cc; }
.et-gear i { display: block; font-size: 10px; color: #8fa38f; font-style: normal; }
.et-empty { color: #55645a; }

.et-guild {
    background: #121a16;
    border-left: 4px solid #4a6f52;
    padding: 7px 9px;
    margin-bottom: 6px;
}

.et-guild b { font-size: 13px; }
.et-guild em { display: block; color: #c9a227; margin: 2px 0 4px; }
.et-guild p { color: #b8b2a2; margin-bottom: 4px; }
.et-guild i { display: block; color: #8fa38f; font-style: normal; margin-bottom: 4px; }
.et-guild u { display: block; color: #a2617d; text-decoration: none; font-size: 10px; margin-bottom: 5px; }

.et-rank {
    background: #121a16;
    border: 1px solid #3c5145;
    padding: 4px 8px;
    margin-bottom: 6px;
}

.et-rank span { float: right; color: #8fa38f; font-size: 10px; }

.et-lore {
    color: #b8b2a2;
    line-height: 1.55;
    margin-bottom: 6px;
}

.et-contract {
    background: #1c1a10;
    border-left: 4px solid #c9a227;
    padding: 5px 8px;
    margin-bottom: 6px;
}

.et-contract b { display: block; color: #f0d98a; }
.et-contract span { font-size: 11px; color: #b8b2a2; }
.et-contract i { display: block; font-style: normal; color: #8fa38f; font-size: 10px; margin: 3px 0; }

.et-entry {
    background: #121a16;
    border-left: 3px solid #3c5145;
    margin-bottom: 4px;
}

.et-entry summary {
    padding: 4px 8px;
    cursor: pointer;
    color: #e8e0cc;
}

.et-entry pre {
    white-space: pre-wrap;
    padding: 4px 10px 8px;
    color: #b8b2a2;
    line-height: 1.6;
    margin: 0;
}

.et-nem-full {
    background: #1b1218;
    border-left: 3px solid #a2617d;
    padding: 4px 8px;
    margin-bottom: 3px;
}

.et-nem-full.dead { opacity: .5; border-left-color: #55454c; }
.et-nem-full b { display: block; color: #e0b8c8; }
.et-nem-full > span { display: block; color: #8f7080; font-size: 11px; margin-bottom: 2px; }
.et-nem-traits span { display: inline; }
.et-nem-full i { display: block; font-style: normal; font-size: 10px; color: #7f6570; }

.et-nem-traits {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin: 2px 0;
}

.et-nem-traits span {
    font-size: 9px;
    background: #2a1a22;
    border: 1px solid #5a2c3a;
    padding: 0 4px;
    color: #c8a0b0;
}

/* ---------- stations ---------- */
.et-station {
    background: #121a16;
    border: 1px solid #3c5145;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.et-station-head {
    font-weight: bold;
    color: #e8e0cc;
    margin-bottom: 4px;
}

.et-station-head span { float: right; color: #8fa38f; font-weight: normal; font-size: 10px; }

.et-room {
    color: #b8b2a2;
    line-height: 1.55;
}

/* ---------- minigames ---------- */
.et-canvas {
    display: block;
    width: 100%;
    background: #0a1218;
    margin: 6px 0;
    cursor: pointer;
}

.et-patterns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}

.et-pattern {
    background: #121a16;
    border: 1px solid #3c5145;
    color: #d8d2c2;
    font-family: inherit;
    text-align: left;
    padding: 4px 7px;
    cursor: pointer;
}

.et-pattern b { display: block; color: #e8e0cc; }
.et-pattern span { font-size: 10px; color: #c9a227; }
.et-pattern i { display: block; font-size: 10px; color: #7f9080; font-style: normal; }
.et-pattern.locked { opacity: .45; cursor: default; }

.et-endscreen { max-width: 640px; margin: 0 auto; }

.et-endtext {
    white-space: pre-wrap;
    line-height: 1.65;
    color: #d8d2c2;
    background: #121a16;
    border-left: 3px solid #c9a227;
    padding: 10px 12px;
    margin-bottom: 8px;
}

@media (max-width: 700px) {
    .et-two { flex-direction: column; }
    .et-side { width: 100%; }
    .et-acts { grid-template-columns: 1fr; }

    /* the character sheet stacked above the game, which put the map and the
       pad below the fold — a game you have to scroll to play is not one you
       can play. the board comes first on a phone and the sheet reads under
       it, which is the order a handheld puts them in anyway. */
    .et-two { flex-direction: column-reverse; }

    /* and the map shrinks to fit the width rather than setting it */
    .et-world,
    .et-battle { width: 100%; }
}

/* the pad has to be reachable with the board still on screen, so the panel
   scrolls and the pad does not go with it */
.is-narrow .et-main > .et-scroll {
    max-height: none;
}

.is-narrow .et-padhost {
    position: sticky;
    bottom: 0;
    background: #0d1114;
    padding-top: 4px;
    z-index: 4;
}

/* ---------- echoes: the pieces the tide brought in ---------- */
.et-bar-fill.san { background: linear-gradient(90deg, #3b2a55, #7a5fa8); }
.et-bar-fill.marrow { background: linear-gradient(90deg, #4a3a1f, #c98a2a); }

/* the foe you are actually swinging at, when there is more than one */
.et-foe.here { border-left-color: #c9a227; background: #1d1418; }
.et-foe { cursor: pointer; }

/* log tone. the deep gets its own colour so a war-cry does not read as
   damage, and a phase change does not read as flavour */
.et-log div.good,
.et-fightlog div.good { color: #86b884; }

.et-log div.bad,
.et-fightlog div.bad { color: #c0625a; }

.et-log div.warn,
.et-fightlog div.warn { color: #c9a227; }

.et-log div.lore,
.et-fightlog div.lore { color: #8fa0c8; font-style: italic; }

.et-fightlog div.cry {
    color: #d4a0b8;
    font-style: italic;
    border-left: 2px solid #5a2c3a;
    padding-left: 5px;
}

.et-fightlog div.phase {
    color: #f0d98a;
    border-top: 1px solid #3a3020;
    border-bottom: 1px solid #3a3020;
    margin: 3px 0;
    padding: 3px 0;
}

/* rarity reads at a glance in a full pack */
.et-item.masterwork { border-color: #6b5a1f; box-shadow: inset 0 0 0 1px #2a2410; }
.et-item.masterwork b { color: #f0d98a; }
.et-item.cursed { border-color: #4a2436; }
.et-item.cursed b { color: #d4a0b8; }

.et-item select {
    width: 100%;
    margin: 3px 0;
    background: #0b120f;
    color: #c8c2b2;
    border: 1px solid #2a3a30;
    font-family: inherit;
    font-size: 10px;
    padding: 2px;
}

.et-trait[title] { cursor: help; }

.et-canvas {
    image-rendering: pixelated;
    touch-action: none;
}

/* the overworld and the battle screen want to be as wide as they can get
   and never taller than the window they are in */
.et-world,
.et-battle {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    border: 1px solid #2a3a30;
    background: #04090d;
}

/* the reel is a hold, so it must not look like a click that fired */
.et-btn[data-a="reel"] { user-select: none; }

/* ===================================================================
   MY DOCUMENTS (.docs-)
   every game's save in one folder, because localStorage is per browser
   and nobody's Jokerz run should end when they change laptop

   The prefix is .docs- and not .doc-, which is what it used to be: the
   slash pages had already taken .doc-body, .doc-list, .doc-btn, and this
   file loads after them, so every /now, /uses and colophon window has
   been quietly rendering in MS Sans Serif instead of the courier the rule
   two thousand lines up asks for. check-web.mjs keeps the two apart now.
   =================================================================== */
.docs-body {
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 12px;
    color: #000;
    padding: 6px;
}

.docs-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: bold;
    padding: 2px 2px 4px;
}

.docs-total { font-weight: normal; color: #555; font-size: 11px; }

.docs-note {
    background: #ffffe1;
    border: 1px solid #808080;
    padding: 4px 6px;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.35;
}

.docs-list {
    background: #fff;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px;
}

.docs-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border-bottom: 1px dotted #c0c0c0;
}

.docs-row:last-child { border-bottom: 0; }
.docs-row.empty { opacity: .5; }
.docs-icon { font-size: 15px; line-height: 1; }

.docs-name {
    display: block;
    font-weight: bold;
    min-width: 0;
}

.docs-name i {
    display: block;
    font-style: normal;
    font-weight: normal;
    color: #555;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-size { color: #555; font-size: 11px; white-space: nowrap; }
.docs-acts { display: flex; gap: 3px; }

.docs-btn {
    background: #c0c0c0;
    padding: 1px 7px;
    font-family: inherit;
    font-size: 11px;
    color: #000;
    cursor: pointer;
}

.docs-btn:active { transform: translateY(1px); }
.docs-btn.danger { color: #8b0000; }
.docs-btn.wide { flex: 1; padding: 3px 8px; font-weight: bold; }

.docs-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* an image with no size on it renders at its intrinsic width, and one
   oversized image is enough to push a phone's layout viewport wider than
   the screen — which is what put app windows off the side of the display.
   the sizing normally comes from tailwind, off a cdn; this is the floor
   under it for when that cdn is slow, blocked, or having a bad day. */
img,
video,
canvas {
    max-width: 100%;
}

/* the game canvases keep their own aspect ratio while they shrink */
.game-canvas,
.et-canvas {
    height: auto;
}

/* ===================================================================
   THE ON-SCREEN PAD (.tp-)
   half these games are walked with the arrow keys, which a phone does
   not have. keys are 52px because a fingertip is about 45.
   =================================================================== */
.tp-pad {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 6px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* it only exists where there is a finger to use it */
.is-touch .tp-pad { display: flex; }

.tp-dpad {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
    flex-shrink: 0;
}

.tp-key,
.tp-btn {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    color: #000;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.tp-key.down,
.tp-btn.down {
    border-color: #808080 #fff #fff #808080;
    background: #b0b0b0;
}

.tp-up { grid-area: 1 / 2; }
.tp-left { grid-area: 2 / 1; }
.tp-right { grid-area: 2 / 3; }
.tp-down { grid-area: 3 / 2; }

.tp-acts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tp-btn {
    min-width: 58px;
    min-height: 52px;
    padding: 0 12px;
    font-weight: bold;
    font-size: 15px;
}

/* a narrow phone cannot spare the width for a roomy pad */
@media (max-width: 420px) {
    .tp-dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
    .tp-btn { min-width: 50px; min-height: 46px; padding: 0 8px; }
    .tp-pad { gap: 6px; }
}

/* in fullscreen the pad is the only way back out of the game, so it stays
   pinned to the bottom rather than scrolling away with the board */
.fs-active .tp-pad {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* ===================================================================
   the reading layer — js/web.js
   Everything that turns a window into a document you can skim, quote,
   link to and print. Kept in one block because it is one feature.
   =================================================================== */

/* ---------- the toolbar on top of every document ---------- */
.doc-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 3px 0 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid #d0d0d0;
    position: sticky;
    top: -10px;
    background: #fff;
    z-index: 3;
}

.doc-tool {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 1px 6px;
    background: #c0c0c0;
    color: #000;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    line-height: 1.5;
}

.doc-tool:hover { background: #d4d4d4; }

.doc-tool:active,
.doc-tool.on {
    border-color: #808080 #fff #fff #808080;
    background: #b0b0b0;
}

.doc-count {
    margin-left: auto;
    font-size: 10px;
    color: #777;
    white-space: nowrap;
}

/* ---------- table of contents ---------- */
/* only built when a document has three or more sections — below that it
   is a list of everything you can already see */
.doc-toc {
    background: #f4f4f4;
    border: 1px solid #b0b0b0;
    padding: 3px 7px;
    margin-bottom: 9px;
    font-size: 11px;
}

.doc-toc summary {
    cursor: pointer;
    font-weight: bold;
    color: #000080;
    padding: 2px 0;
    list-style: none;
}

.doc-toc summary::before { content: '▸ '; }
.doc-toc[open] summary::before { content: '▾ '; }
.doc-toc summary::-webkit-details-marker { display: none; }

.doc-toc ul {
    margin: 4px 0 3px;
    padding-left: 14px;
    list-style: none;
}

.doc-toc li { padding: 1px 0; }

.doc-toc a {
    color: #0000cc;
    text-decoration: none;
    border-bottom: 1px dotted #8888cc;
}

.doc-toc a:hover { background: #000080; color: #fff; }

/* ---------- headings you can point at ---------- */
.doc-h2 { position: relative; }

.h-anchor {
    background: none;
    border: 0;
    color: #a0a0a0;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 0 4px;
    visibility: hidden;
}

.doc-h2:hover .h-anchor,
.h-anchor:focus { visibility: visible; }

.h-anchor:hover { color: #000080; }

/* a finger cannot hover, so on touch the anchor is simply always there */
@media (pointer: coarse), (any-hover: none) {
    .h-anchor { visibility: visible; opacity: 0.45; }
}

/* jumped-to headings say so for a moment, or you lose your place */
.anchor-hit {
    animation: anchor-flash 1.5s ease-out;
}

@keyframes anchor-flash {
    0%, 40% { background: #ffff88; }
    100% { background: transparent; }
}

/* ---------- how far through you are ---------- */
/* the window scrolls, not the page, so the page scrollbar is no help */
.doc-progress {
    height: 3px;
    background: #808080;
    border-bottom: 1px solid #404040;
    flex-shrink: 0;
}

.doc-progress.idle { display: none; }

.doc-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #000080, #1084d0);
}

/* ---------- links that say where they go ---------- */
.link-mark {
    font-size: 9px;
    vertical-align: super;
    margin-left: 2px;
    padding: 0 2px;
    color: #555;
    letter-spacing: 0;
}

.link-mark-github { color: #24292e; }
.link-mark-wikipedia { color: #3366cc; }
.link-mark-youtube { color: #c00; }
.link-mark-archive { color: #666; }
.link-mark-neocities { color: #ff7f00; }
.link-mark-steam { color: #16202d; }
.link-mark-reddit { color: #ff4500; }

/* ---------- sidenotes ---------- */
/* [[note: ...]] anywhere in data/ becomes one of these */
.sn { position: relative; }

.sn-ref {
    background: #ffff88;
    border: 1px solid #999;
    color: #000;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    line-height: 1;
    padding: 0 3px;
    vertical-align: super;
}

.sn-ref:hover { background: #ffea00; }

.sn-note {
    display: none;
    background: #ffffe1;
    border: 1px solid #d0d090;
    padding: 4px 7px;
    margin: 4px 0;
    font-size: 11px;
    color: #333;
}

.sn.open .sn-note { display: block; }

/* a window wide enough gets the real thing: the note in the margin,
   always open, next to the sentence that earned it */
.doc-body { container-type: inline-size; }

@container (min-width: 620px) {
    .doc-body { padding-right: 236px !important; }

    .sn-note {
        display: block;
        position: absolute;
        top: -4px;
        left: calc(100% + 16px);
        width: 206px;
        margin: 0;
    }

    .sn-ref { cursor: default; }
}

/* ---------- plain text ---------- */
.doc-plain-wrap {
    border: 1px solid #808080;
    background: #f8f8f8;
    margin-bottom: 10px;
}

.doc-plain-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
}

.doc-plain {
    margin: 0;
    padding: 8px 10px;
    max-height: 300px;
    overflow: auto;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: #000;
    background: #fff;
}

/* ---------- devlog: the next post, and this post's address ---------- */
.post-cost { color: #888; }

.post-link {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 10px;
    padding: 0 3px;
    opacity: 0.5;
}

.post-link:hover { opacity: 1; }

.post-nav {
    display: flex;
    gap: 6px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

.post-nav-btn {
    flex: 1 1 45%;
    min-width: 130px;
    text-align: left;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 4px 7px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
}

.post-nav-btn:hover { background: #d4d4d4; }
.post-nav-btn:active { border-color: #808080 #fff #fff #808080; }
.post-nav-btn b { display: block; color: #000080; }

.post-nav-btn span {
    display: block;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-nav-end {
    flex: 1 1 45%;
    min-width: 130px;
    font-size: 10px;
    color: #999;
    padding: 6px 7px;
    border: 1px dashed #ccc;
}

/* ---------- find: the text half ---------- */
.find-group {
    background: #000080;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.find-row-text { align-items: flex-start; }

.find-snip {
    display: block;
    flex-basis: 100%;
    font-size: 10px;
    color: #555;
    line-height: 1.45;
    padding-top: 2px;
    white-space: normal;
}

.find-snip mark {
    background: #ffff00;
    color: #000;
    font-weight: bold;
}

/* ---------- getting to the content with a keyboard ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: #000080;
    color: #fff;
    padding: 8px 14px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 2px solid #fff;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
}

/* the desktop had no visible focus at all, which made it unusable without
   a mouse. :focus-visible only shows it for people actually tabbing. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px dotted #0df259;
    outline-offset: 1px;
}

.doc-body button:focus-visible,
.doc-body a:focus-visible {
    outline-color: #000080;
}

/* ===================================================================
   printing
   The desktop is chrome. Printing a window should put the document on
   paper and nothing else — no taskbar, no marquee, no CRT overlay.
   js/web.js marks the window you asked for as .print-target.
   =================================================================== */
@media print {
    @page { margin: 18mm 16mm; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
        overflow: visible !important;
        font-family: Georgia, 'Times New Roman', serif !important;
    }

    /* every bit of desk furniture */
    #taskbar,
    #start-menu,
    #boot-screen,
    #winamp-window,
    #shoutbox-window,
    #visitor-box,
    #effects-container,
    .crt-overlay,
    .star-overlay,
    .animate-marquee,
    .doc-tools,
    .doc-progress,
    .app-window-header,
    .h-anchor,
    .post-head .post-caret,
    .post-link,
    .post-nav,
    .taskbar-window-btn,
    .screensaver,
    .ie-titlebar-btn {
        display: none !important;
    }

    /* printing one window: it is the only thing on the paper */
    body.printing > *:not(.print-target) { display: none !important; }

    body.printing .print-target,
    .app-window.print-target {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .print-target .app-window-body,
    .doc-body {
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
        border: 0 !important;
        padding: 0 !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }

    /* collapsed posts are collapsed on paper too — you printed what you
       were reading, not the whole archive */
    .post:not(.open) .post-body { display: none !important; }
    .post.open .post-body { display: block !important; }
    .doc-toc[open] { break-after: avoid; }

    .doc-h1, .doc-h2 {
        font-family: Georgia, 'Times New Roman', serif !important;
        color: #000 !important;
        break-after: avoid;
    }

    .doc-intro {
        background: #f2f2f2 !important;
        border: 1px solid #bbb !important;
    }

    /* paper cannot be clicked, so the address goes on the page */
    .doc-body a[href^="http"]::after {
        content: " <" attr(href) ">";
        font-size: 9pt;
        color: #444;
        word-break: break-all;
    }

    /* a sidenote on paper is a footnote under the paragraph */
    .sn-note {
        display: block !important;
        position: static !important;
        width: auto !important;
        left: auto !important;
        background: #f7f7f7 !important;
        font-size: 9.5pt !important;
    }

    .doc-body { padding-right: 0 !important; }

    .post, article, .doc-list li { break-inside: avoid; }
}

/* ===================================================================
   the address bar, favorites, and quoting — js/web.js
   The internet explorer costume, wired to the real thing.
   =================================================================== */

.ie-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #fff;
}

.ie-nav {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1;
    min-width: 22px;
    height: 21px;
    padding: 0 5px;
    cursor: pointer;
    flex-shrink: 0;
}

.ie-nav:hover { background: #d4d4d4; }

.ie-nav:active {
    border-color: #808080 #fff #fff #808080;
    background: #b0b0b0;
}

/* a starred page keeps the star lit, so the button says what it will do */
#ie-fav.on {
    color: #d48806;
    background: #ffef9f;
}

.ie-go {
    font-size: 11px;
    font-weight: bold;
}

.ie-addr-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 0 3px 0 6px;
    flex-shrink: 0;
}

.ie-address {
    flex: 1 1 auto;
    min-width: 60px;
    height: 21px;
    padding: 0 5px;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.ie-address:focus {
    outline: 1px solid #000080;
    outline-offset: -1px;
}

/* a phone has no room for the word "address" or the whole url */
@media (max-width: 640px) {
    .ie-addr-label { display: none; }
    .ie-toolbar { flex-wrap: wrap; }
    .ie-address { font-size: 10px; }
}

/* ---------- favorites ---------- */
.ie-favs {
    position: absolute;
    z-index: 46;
    margin-top: -4px;
    margin-left: 6px;
    min-width: 220px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #c0c0c0;
    padding: 3px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

.ie-favs-head {
    background: #000080;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    margin-bottom: 2px;
}

.ie-favs-empty {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #444;
    padding: 6px;
    line-height: 1.5;
}

.ie-fav-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.ie-fav-go {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ie-fav-go::before {
    content: '★ ';
    color: #d48806;
}

.ie-fav-go:hover {
    background: #000080;
    color: #fff;
}

.ie-fav-del {
    background: none;
    border: 0;
    cursor: pointer;
    color: #666;
    font-size: 10px;
    padding: 0 6px;
}

.ie-fav-del:hover { color: #c00; }

/* ---------- quoting ---------- */
/* appears in the document you are selecting in, not over the whole page */
.quote-bubble {
    position: sticky;
    bottom: 6px;
    left: 0;
    z-index: 6;
    display: block;
    margin: 6px 0 0 auto;
    background: #ffffe1;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 3px 9px;
    cursor: pointer;
}

.quote-bubble:hover { background: #ffef9f; }

/* ---------- text size ---------- */
.doc-size {
    display: inline-flex;
    gap: 2px;
}

.doc-size .doc-tool {
    min-width: 24px;
    font-weight: bold;
}

@media print {
    .ie-toolbar,
    .ie-favs,
    .quote-bubble,
    .doc-size {
        display: none !important;
    }

    /* whatever size it is on screen, paper gets a readable one */
    .doc-body { font-size: 11pt !important; }
}

/* ===================================================================
   history, the address bar's suggestions, the status bar, and finding
   your way around inside one document — js/web.js
   =================================================================== */

/* ---------- what the address bar thinks you meant ---------- */
.ie-suggest {
    position: absolute;
    z-index: 47;
    margin-top: -3px;
    min-width: 240px;
    max-width: 420px;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    padding: 2px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

.ie-sug {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 3px 6px;
}

.ie-sug:hover,
.ie-sug.on {
    background: #000080;
    color: #fff;
}

.ie-sug-name { flex: 1 1 auto; }

.ie-sug-why {
    font-size: 9px;
    color: #777;
    flex-shrink: 0;
}

.ie-sug:hover .ie-sug-why,
.ie-sug.on .ie-sug-why { color: #cfd8ff; }

/* ---------- history ---------- */
.ie-hist-go::before {
    content: '⌚ ';
    color: #555;
}

.ie-hist-when {
    font-size: 9px;
    color: #777;
    padding: 3px 6px 0 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.ie-favs-clear {
    display: block;
    width: 100%;
    margin-top: 3px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
    padding: 3px;
}

.ie-favs-clear:active { border-color: #808080 #fff #fff #808080; }

/* ---------- the status bar ---------- */
.ie-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 3px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
}

.ie-status-text,
.ie-zone {
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 1px 6px;
    background: #c0c0c0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ie-status-text { flex: 1 1 auto; }

/* a link off the site says so before you commit to it */
.ie-status-external { color: #0000cc; }

.ie-zone { flex-shrink: 0; }
.ie-zone.off { color: #a00; font-weight: bold; }

/* ---------- find in this document ---------- */
.find-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #d0d0d0;
    position: sticky;
    top: 22px;
    background: #fff;
    z-index: 4;
}

.find-in {
    flex: 1 1 auto;
    min-width: 60px;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 2px 5px;
}

.find-n {
    font-size: 10px;
    color: #777;
    white-space: nowrap;
    padding: 0 4px;
}

mark.find-hit {
    background: #ffff88;
    color: #000;
}

/* the one you are on, as opposed to the ones you could be on */
mark.find-hit.on {
    background: #ff8c00;
    color: #000;
    outline: 1px solid #000;
}

@media print {
    .ie-status,
    .ie-suggest,
    .find-bar {
        display: none !important;
    }

    mark.find-hit {
        background: none !important;
        font-weight: bold;
    }
}

/* ===================================================================
   the site on a small screen, part two
   ===================================================================
   The first pass made the games playable with a finger. This one is
   about the desktop around them: what you see first, and whether a
   fingertip can hit it.
   =================================================================== */

/* ---------- what you see first ---------- */
/* The sidebar is the avatar, the nav, a hit counter and a github card:
   742px of it, measured on a 412px phone, before the window holding the
   actual content began. Nobody scrolls past four screens of furniture to
   find out what a site is. On a phone the content goes first and the
   furniture follows it; on a desk, where they sit side by side and
   nothing is below anything, the order is unchanged. */
@media (max-width: 767px) {
    /* three columns, and the one holding the content was the middle one.
       On a phone they stack in source order, which put winamp, the
       shoutbox and a wall of 88x31 badges above it as well. */
    #main-window { order: 1; }
    #desk-sidebar { order: 2; }
    #desk-extras { order: 3; }

    /* and the furniture takes less room while it is down there */
    #desk-sidebar .dither-effect {
        width: 64px;
        height: 64px;
    }

    #desk-sidebar .dither-effect img {
        width: 52px;
        height: 52px;
    }

    /* the nav is five stacked bars a screen tall; two columns is one
       thumb's worth */
    #desk-sidebar nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #desk-sidebar nav button:first-child { grid-column: 1 / -1; }
}

/* ---------- what a fingertip can hit ---------- */
/* Measured on three phones: 36 controls under 40px, including the window
   buttons at 18x18 and the menu bar at 27x20. This is a 1998 desktop and
   it should look like one, so nothing here changes on a mouse — the
   query is the pointer, not the width, and a tablet with a stylus keeps
   the small ones too. */
@media (pointer: coarse) {

    /* the window buttons: minimise, maximise, fullscreen, close, link.
       44px is apple's number and android's is 48; this is a 1998 pastiche
       and 44 square buttons would stop looking like one, so the chrome
       gets 44 in the direction it is scarce and keeps its proportions. */
    .ie-titlebar-btn,
    .app-window-header .ie-titlebar-btn {
        min-width: 40px;
        min-height: 40px;
        font-size: 14px;
    }

    /* the fake title bar on the main window, which was hard-coded 18x18 */
    #main-window .draggable-header button[onclick] {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px;
    }

    .app-window-header {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    /* the menu bar — file, edit, view, favorites, tools, help */
    #main-window .font-header > span[onclick] {
        padding: 12px 8px;
        display: inline-block;
    }

    /* the address bar and its buttons */
    .ie-nav {
        min-width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .ie-address {
        height: 44px;
        font-size: 14px;
    }

    /* eight 44px buttons and an input do not fit across a phone, so the
       address gets its own line under them */
    .ie-toolbar { flex-wrap: wrap; }

    .ie-address { flex: 1 0 100%; order: 2; }

    /* the document toolbar */
    .doc-tool {
        min-height: 40px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .doc-tools { gap: 5px; }

    /* the panels you pick things out of */
    .ie-fav-go,
    .ie-sug,
    .ie-favs-clear {
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 12px;
    }

    .ie-fav-del {
        min-width: 36px;
        font-size: 14px;
    }

    /* the anchors beside headings are already always-visible on touch;
       they also need to be hittable */
    .h-anchor {
        padding: 0 10px;
        font-size: 15px;
    }

    /* the start menu and the taskbar */
    .start-item {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .taskbar-window-btn { min-height: 34px; }

    /* the sound toggle was a 27px strip, and winamp's volume slider was
       four pixels tall — a control a fingertip cannot land on at all */
    #sound-toggle {
        min-height: 42px;
        font-size: 12px;
    }

    #winamp-volume,
    #winamp-seek,
    input[type="range"] {
        height: 34px;
        background: transparent;
    }

    #winamp-volume::-webkit-slider-thumb,
    #winamp-seek::-webkit-slider-thumb,
    input[type="range"]::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    #winamp-volume::-moz-range-thumb,
    #winamp-seek::-moz-range-thumb,
    input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    /* winamp's transport buttons were 18x28 */
    #winamp-window button,
    #winamp-window .material-symbols-outlined {
        min-width: 36px;
        min-height: 36px;
    }

    /* the small +/- steppers inside the games. Echoes hands out ten of
       these on the character sheet, and they were 28px. */
    .et-stats .et-btn,
    .et-body .et-btn.sm,
    .bal-btn.sm {
        min-width: 38px;
        min-height: 38px;
        padding: 0 8px;
    }
}

/* ---------- a toast must not sit on the window's buttons ---------- */
/* The achievement toast is pinned 60px from the top and centred, which on
   a desk is above everything and out of the way. On a phone a window
   opens at 54px, so the toast landed square across its title bar —
   which is where the close button is, and the fullscreen button, and
   every other way out of what just opened. It goes to the bottom on a
   phone, above the taskbar, where the other toasts already live. */
@media (max-width: 767px) {
    .achv-toast {
        top: auto;
        bottom: 52px;
        left: 6px;
        right: 6px;
        transform: none;
        max-width: none;
    }

    /* it slid down from the top; from the bottom it should slide up */
    .achv-toast { animation: achv-pop-up 0.35s ease-out; }
}

@keyframes achv-pop-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* reduced motion means reduced motion, here too */
.no-motion .achv-toast { animation: none; }

/* ===================================================================
   the fullscreen that does not need permission
   ===================================================================
   .fs-active already pins a window over the viewport, which is most of
   what the Fullscreen API was being asked for. These are the parts the
   browser was doing on our behalf and now has to be done by hand:
   nothing behind it scrolls, nothing is drawn over it, and 100vh means
   the screen rather than the screen plus whatever the url bar is
   currently covering.
   =================================================================== */

/* the api hands over the whole compositor; this one has to out-rank the
   taskbar (55), the dialogs (95) and the achievement toast (9600) */
.app-window.fs-faux {
    z-index: 9700 !important;
    background: #c0c0c0;
}

/* 100vh on a phone is the viewport with the url bar counted in, so a
   fullscreen game hung a bar's worth of itself below the fold and the
   controls at the bottom went with it. dvh is the one that shrinks and
   grows with the browser chrome; vh stays as the fallback for anything
   that has not got it. */
.app-window.fs-active {
    height: 100vh !important;
}

@supports (height: 100dvh) {
    .app-window.fs-active {
        height: 100dvh !important;
    }
}

/* nothing behind it moves */
html.fs-locked,
html.fs-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

/* the way out has to be obvious when there is no escape key to press */
@media (pointer: coarse) {
    .app-window.fs-active .fs-btn {
        min-width: 44px;
        min-height: 36px;
    }

    .app-window.fs-active .app-window-header {
        position: sticky;
        top: 0;
        z-index: 6;
    }
}

/* a game in fullscreen should use the room it just took: the pad stays
   pinned to the bottom, and the board gets everything above it */
.app-window.fs-active .app-window-body {
    padding: 4px !important;
}

.app-window.fs-active .tp-pad,
.app-window.fs-active .et-pad {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: inherit;
}

/* ===================================================================
   a device that cannot keep up
   ===================================================================
   js/fx.js measures the real frame rate once, a second after load, and
   puts .slow-device on <html> if the answer is under about 40fps. This
   is not the reduced-motion setting — that is somebody asking, and it
   turns everything off. This is the decorative layer standing down on a
   phone that is already busy drawing a game, and keeping the motion
   that carries meaning: a window still opens, a toast still arrives.
   =================================================================== */

.slow-device .star-overlay,
.slow-device .crt-overlay::after,
.slow-device #effects-container {
    display: none;
}

.slow-device .animate-marquee {
    animation-duration: 40s;
}

/* the expensive ones, which are per-pixel rather than per-element */
.slow-device .dither-effect,
.slow-device .glow,
.slow-device .text-glow {
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.slow-device .app-window {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

/* a backdrop-filter on a scrolling list is the single most expensive
   thing this site can ask a phone for */
.slow-device * {
    backdrop-filter: none !important;
}

/* ---------- echoes: the character sheet on a phone ---------- */
/* .et-field is a label beside an input. The seed label carries a sentence
   of explanation, and with nothing stopping it shrinking it collapsed to
   one word per line — six lines of "seed / — / the / same / seed" beside
   a box. Below the width where both fit, the label goes above. */
@media (max-width: 620px) {
    .et-field {
        display: block;
    }

    .et-field label {
        display: block;
        max-width: none;
        margin-bottom: 3px;
    }

    .et-field input {
        width: 100%;
        box-sizing: border-box;
    }

    /* the attribute rows are name, value, −, +, and a sentence about what
       it governs — five things on one line inside 375px */
    .et-stats > div {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-areas:
            "name value minus plus"
            "govern govern govern govern";
        align-items: center;
        justify-content: start;
        gap: 4px 6px;
        padding: 4px 0;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.12);
    }

    .et-stats > div > i {
        grid-area: govern;
        margin: 0;
    }
}

/* ---------- typing on a phone ---------- */
/* Safari on iOS zooms the whole page in when you focus an input whose
   font is under 16px, and it does not zoom back out afterwards — you are
   left on a page that no longer fits, having done nothing but tap a text
   box. Every input on this site is 10-12px, because that is what a 1998
   dialog looks like. 16px on touch only: the look is kept where it is
   looked at, and the trap is gone where it is fallen into. */
@media (pointer: coarse) {

    input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="number"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px;
        min-height: 40px;
    }

    /* the ones that are laid out to a fixed width need the room */
    .gb-input,
    .shout-input,
    #pl-search,
    .find-in,
    .find-input {
        min-height: 42px;
        padding: 6px 8px;
    }

    /* a textarea at 16px in a 1998 dialog needs a little more line */
    textarea { line-height: 1.45; }
}

/* ===================================================================
   the arcade — js/arcade.js
   =================================================================== */

.arc-body {
    background: #c0c0c0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    max-height: min(560px, 74vh);
    overflow-y: auto;
}

.arc-msg {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000080;
    min-height: 15px;
    text-align: center;
}

.arc-btn {
    background: #c0c0c0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
}

.arc-btn:active { border-color: #808080 #fff #fff #808080; }
.arc-btn:disabled { color: #808080; cursor: default; }

/* ---------- tic tac toe ---------- */
.ttt-grid {
    display: grid;
    grid-template-columns: repeat(3, 54px);
    grid-template-rows: repeat(3, 54px);
    gap: 3px;
}

.ttt-cell {
    background: #c0c0c0;
    font-family: "Comic Sans MS", cursive;
    font-size: 26px;
    font-weight: bold;
    color: #000080;
    cursor: pointer;
    line-height: 1;
}

.ttt-cell.filled { color: #c40000; }
.ttt-cell:disabled { cursor: default; }

/* ---------- rock paper scissors ---------- */
.rps-throws {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rps-face {
    font-size: 38px;
    width: 60px;
    text-align: center;
}

.rps-v {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666;
}

.rps-buttons { display: flex; gap: 6px; }

.rps-btn {
    background: #c0c0c0;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 22px;
}

.rps-btn span {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #000;
}

/* ---------- hangman ---------- */
.hang-canvas { background: #fff; }

.hang-word {
    font-family: 'Courier New', monospace;
    font-size: 19px;
    letter-spacing: 3px;
    font-weight: bold;
}

.hang-keys {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    width: 100%;
}

.hang-key {
    background: #c0c0c0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
}

.hang-key:disabled { color: #909090; background: #b0b0b0; cursor: default; }

/* ---------- simon ---------- */
.simon-pad {
    display: grid;
    grid-template-columns: repeat(2, 82px);
    grid-template-rows: repeat(2, 82px);
    gap: 5px;
    padding: 5px;
    background: #333;
}

.simon-btn {
    border: 2px solid #111;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.09s;
}

.no-motion .simon-btn { transition: none; }

.simon-btn.lit { opacity: 1; }
.simon-btn.s0 { background: #0a8c3a; border-radius: 80px 8px 8px 8px; }
.simon-btn.s1 { background: #c40000; border-radius: 8px 80px 8px 8px; }
.simon-btn.s2 { background: #ffcc00; border-radius: 8px 8px 8px 80px; }
.simon-btn.s3 { background: #0060c4; border-radius: 8px 8px 80px 8px; }

/* ---------- 2048 ---------- */
.g2048 {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: repeat(4, 60px);
    gap: 5px;
    padding: 5px;
    background: #8b7d6f;
}

.g2048-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #bdaea0;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 20px;
    color: #4a4038;
}

.g2048-cell.v0 { color: transparent; }
.g2048-cell.v2 { background: #eee4da; }
.g2048-cell.v4 { background: #ede0c8; }
.g2048-cell.v8 { background: #f2b179; color: #fff; }
.g2048-cell.v16 { background: #f59563; color: #fff; }
.g2048-cell.v32 { background: #f67c5f; color: #fff; }
.g2048-cell.v64 { background: #f65e3b; color: #fff; }
.g2048-cell.v128 { background: #edcf72; color: #fff; font-size: 17px; }
.g2048-cell.v256 { background: #edcc61; color: #fff; font-size: 17px; }
.g2048-cell.v512 { background: #edc850; color: #fff; font-size: 17px; }
.g2048-cell.v1024 { background: #edc53f; color: #fff; font-size: 14px; }
.g2048-cell.v2048 { background: #edc22e; color: #fff; font-size: 14px; }

/* ---------- whack a troll ---------- */
.whack-grid {
    display: grid;
    grid-template-columns: repeat(3, 66px);
    grid-template-rows: repeat(3, 66px);
    gap: 6px;
}

.whack-hole {
    background: #6b5b45;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.whack-hole::after {
    content: '👹';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -70px;
    font-size: 34px;
    transition: bottom 0.09s ease-out;
}

.no-motion .whack-hole::after { transition: none; }
.whack-hole.up::after { bottom: 4px; }

/* ===================================================================
   the toys and the old-web furniture — js/toys.js
   =================================================================== */

.toy-body {
    background: #c0c0c0 !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: min(560px, 74vh);
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
}

.toy-h {
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 14px;
    color: #000080;
}

.toy-p { margin: 0; line-height: 1.45; }
.toy-dim { color: #555; font-size: 11px; }

.toy-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.toy-field input,
.toy-field select {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 3px 5px;
}

.toy-acts {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- the pet ---------- */
.pet-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pet-choice {
    background: #c0c0c0;
    cursor: pointer;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.pet-face { font-size: 15px; }

.pet-stage {
    background: #dff0df;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 18px 8px;
    text-align: center;
}

.pet-stage.dead { background: #ddd; filter: grayscale(1); }

.pet-big { font-size: 26px; }

.pet-name {
    font-weight: bold;
    margin-top: 6px;
    font-size: 13px;
}

.pet-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.pet-bar {
    height: 12px;
    background: #808080;
    padding: 1px;
}

.pet-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0a8c3a, #7ede7e);
}

.pet-acts { display: flex; gap: 6px; }
.pet-acts .arc-btn { flex: 1 1 auto; }

/* ---------- oneko ---------- */
.neko {
    position: fixed;
    z-index: 9500;
    font-size: 26px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.neko.asleep { opacity: 0.75; }

/* ---------- the cursor trail ---------- */
.trail-dot {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9400;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

/* ---------- blinkies and stamps ---------- */
.blink-preview {
    background: #808080;
    padding: 6px;
    display: flex;
    justify-content: center;
}

.blink-preview canvas { image-rendering: pixelated; }

.stamp-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 6px 0;
}

.stamp {
    background: #fff;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.dir-note { color: #666; font-size: 11px; }

/* ---------- scandisk, setup, ram, antivirus ---------- */
.sd-grid {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 1px;
    background: #808080;
    padding: 2px;
}

.sd-cell { display: block; height: 8px; }
.sd-unscanned { background: #b0b0b0; }
.sd-ok { background: #0a8c3a; }
.sd-bad { background: #c40000; }

.sd-legend {
    display: flex;
    gap: 10px;
    font-size: 10px;
    align-items: center;
}

.sd-sw {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    vertical-align: -1px;
}

.sd-status {
    font-size: 11px;
    min-height: 28px;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 3px 5px;
    line-height: 1.35;
}

.sd-bar {
    height: 16px;
    background: #fff;
    padding: 1px;
}

.sd-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, #000080 0 8px, #c0c0c0 8px 10px);
    transition: width 0.12s linear;
}

.no-motion .sd-bar i { transition: none; }

.sd-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.sd-eta { color: #444; }

.setup-tip {
    background: #ffffe1;
    padding: 6px 8px;
    font-size: 11px;
    min-height: 34px;
    line-height: 1.4;
}

.ram-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.av-file {
    background: #000;
    color: #0df259;
    font-size: 10px;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-found {
    background: #fff;
    min-height: 70px;
    max-height: 120px;
    overflow-y: auto;
    padding: 3px;
}

.av-hit {
    display: flex;
    gap: 6px;
    font-size: 10px;
    padding: 2px 3px;
    border-bottom: 1px dotted #ccc;
}

.av-hit b { color: #c40000; flex-shrink: 0; }
.av-hit span { color: #555; }

/* ---------- the sound board ---------- */
.snd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.snd-btn {
    background: #c0c0c0;
    cursor: pointer;
    padding: 10px 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* ---------- moon, clock, biorhythm, love, dice ---------- */
.moon-face {
    font-size: 62px;
    text-align: center;
    line-height: 1.1;
}

.wc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wc-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 6px;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    font-size: 12px;
}

.bio-canvas { background: #fff; align-self: center; }

.bio-key {
    display: flex;
    gap: 8px;
    font-size: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.bio-p { color: #c40000; }
.bio-e { color: #0080c4; }
.bio-i { color: #0a8c3a; }

.bio-now {
    font-size: 11px;
    text-align: center;
    background: #ffffe1;
    border: 1px solid #d0d090;
    padding: 3px;
}

.love-out {
    text-align: center;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 10px;
    min-height: 44px;
}

.love-pct {
    font-family: "Comic Sans MS", cursive;
    font-size: 30px;
    font-weight: bold;
    color: #ff1493;
}

.cow-out {
    background: #000;
    color: #0df259;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.15;
    padding: 8px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

.dice-out {
    font-family: "Comic Sans MS", cursive;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 8px;
}

.dice-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.dice-n { width: 46px; text-align: center; }

.dice-log {
    font-size: 10px;
    color: #444;
    max-height: 84px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 3px 5px;
}

/* ---------- rate this site ---------- */
.rate-stars {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.rate-star {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 30px;
    color: #b0b0b0;
    line-height: 1;
    padding: 0 3px;
}

.rate-star.on { color: #ffcc00; }
.rate-star:hover { color: #ffdd55; }

/* ---------- all of it, under a fingertip ---------- */
@media (pointer: coarse) {

    .arc-btn,
    .rps-btn,
    .snd-btn,
    .pet-choice {
        min-height: 42px;
    }

    .hang-key { min-height: 34px; font-size: 14px; }
    .ttt-grid { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); }
    .whack-grid { grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 72px); }
    .rate-star { font-size: 38px; padding: 0 6px; }
    .dice-row { grid-template-columns: repeat(3, 1fr); }
}

/* a narrow phone cannot spare 4x60 for a 2048 board */
@media (max-width: 420px) {
    .g2048 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 62px); width: 100%; }
    .simon-pad { grid-template-columns: repeat(2, 74px); grid-template-rows: repeat(2, 74px); }
    .hang-keys { grid-template-columns: repeat(7, 1fr); }
}

@media print {

    .neko,
    .trail-dot {
        display: none !important;
    }
}