@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Reenie+Beanie&family=VT323&display=swap');

body {
    font-family: 'Gochi Hand','Comic Sans MS',cursive;
    font-size: 15px;
    margin: 0;
    padding: 20px 0;
    background: #000;
    background-image: repeating-linear-gradient(0deg, #0a0a0a 0 1px, #000 1px 3px);
    color: #c8c8c8;
}
a { color: #b48cff; }
a:hover { color: #00ff9c; }
.wrapper {
    width: 760px;
    margin: 0 auto;
    border: 1px dashed #444;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0,0,0,.6);
}
.topbar {
    margin: 0 0 6px;
    font-family: 'Courier New',monospace;
    font-size: 11px;
}
.topbar a { text-decoration: none; }
header h1 {
    font-family: 'Reenie Beanie',cursive;
    font-size: 44px;
    letter-spacing: 3px;
    color: #b48cff;
    text-shadow: 0 0 6px #b48cff;
    text-align: center;
    margin: 0;
}
.tagline {
    text-align: center;
    color: #00ff9c;
    font-size: 13px;
    margin: 4px 0 8px;
}
marquee {
    display: block;
    color: #00ff9c;
    font-family: 'Courier New',monospace;
    font-size: 11px;
    border-top: 1px dashed #444;
    border-bottom: 1px dashed #444;
    padding: 3px 0;
    margin-bottom: 14px;
}
.container {
    display: flex;
    gap: 20px;
}
.sidebar {
    width: 160px;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
    min-width: 0;
}
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-list li { padding: 1px 0; }
.nav-list li a {
    color: #b48cff;
    text-decoration: none;
    display: block;
}
.nav-list li a:hover { color: #00ff9c; }
.nav-list li.current { color: #00ff9c; }
.box {
    border: 1px dashed #444;
    background: #0d0d0d;
    padding: 8px;
    margin-bottom: 14px;
}
.box h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 6px;
    color: #00ff9c;
    border-bottom: 1px dotted #333;
}
.box p { margin: 4px 0 8px; }
.center { text-align: center; }
.mono {
    font-family: 'Courier New',monospace;
    font-size: 11px;
}
.dim { color: #888; }


.log {
    list-style: none;
    margin: 0;
    padding: 0;
}
.log li {
    padding: 4px 0;
    border-bottom: 1px dotted #222;
}
.log li:last-child { border-bottom: 0; }
.log .date {
    font-family: 'Courier New',monospace;
    font-size: 11px;
    color: #00ff9c;
    margin-right: 6px;
}


.stamp-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.stamp {
    width: 99px;
    height: 56px;
    box-sizing: border-box;
    border: 2px dotted rgba(255,255,255,.35);
    outline: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Verdana,sans-serif;
    font-size: 9px;
    font-weight: bold;
    padding: 3px;
    overflow: hidden;
    background: #2b0040;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}
.st-lain    { background: linear-gradient(#2b0040,#b48cff); }
.st-green   { background: #00ff9c; color: #002b1a; text-shadow: none; }
.st-pink    { background: repeating-linear-gradient(45deg,#cc3366 0 6px,#99224d 6px 12px); }
.st-gold    { background: #f3e3a0; color: #3a2a00; text-shadow: none; }
.st-magenta { background: linear-gradient(to right,#6a006a,#e0559a); }
.st-plum    { background: #800080; }
.st-grey    { background: linear-gradient(#000,#4d4d4d); }
.st-red     { background: #c00000; }
.st-blue    { background: repeating-linear-gradient(135deg,#1a3a6b 0 6px,#244d8a 6px 12px); }
.st-ice     { background: #c9f0ff; color: #002033; text-shadow: none; }
.st-violet  { background: linear-gradient(to right,#40006b,#9b6bd6); }
.st-lav     { background: #e6e6fa; color: #2b0040; text-shadow: none; }


.btn-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.btn88 {
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    border: 1px solid #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Verdana,sans-serif;
    font-size: 8px;
    margin: 1px;
    vertical-align: middle;
    background: #111;
    color: #b48cff;
    text-decoration: none;
}
a.btn88:hover { color: #00ff9c; border-color: #00ff9c; }
.b-green { background: #002b1a; color: #00ff9c; border-color: #00ff9c; }
.b-white { background: #c8c8c8; color: #000; border-color: #fff; }
.b-red   { background: #300; color: #ff6666; border-color: #ff6666; }
img { image-rendering: pixelated; }

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.new {
    background: red;
    color: #fff;
    font-family: Verdana,sans-serif;
    font-size: 8px;
    padding: 0 3px;
    animation: blink 1s step-end infinite;
}


.note {
    background: #fff7a8;
    color: #333;
    padding: 8px;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,.4);
    margin: 10px 4px 16px;
}
.note.pink { background: #ffd1dc; transform: rotate(1deg); }
.note.blue { background: #c9f0ff; transform: rotate(-1deg); }
.note a { color: #6a006a; }


.construction {
    height: 10px;
    background: repeating-linear-gradient(45deg, #ffcc00 0 10px, #000 10px 20px);
    margin: 8px 0 4px;
}
.uc { color: #ffcc00; margin: 0 0 8px; }
.hit-counter {
    background: #000;
    color: #0f0;
    font-family: 'Courier New',monospace;
    border: 1px solid #444;
    padding: 2px 6px;
    letter-spacing: 2px;
}
footer {
    margin-top: 20px;
    border-top: 1px dashed #444;
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
}
footer p { margin: 6px 0; }


.linklist {
    margin: 0 0 8px;
    padding-left: 16px;
}
.linklist li { padding: 2px 0; }
.linklist .desc { color: #888; font-size: 13px; }


.gb-entry {
    border: 1px dashed #333;
    background: #080808;
    padding: 6px;
    margin-bottom: 8px;
}
.gb-entry .who { color: #b48cff; }
.gb-entry .date {
    float: right;
    font-family: 'Courier New',monospace;
    font-size: 11px;
    color: #00ff9c;
}
label { display: block; font-size: 13px; margin-top: 4px; }
input[type=text] {
    width: 95%;
    background: #0a0a0a;
    color: #00ff9c;
    border: 1px dashed #b48cff;
    font-family: 'Courier New',monospace;
    font-size: 11px;
    padding: 2px;
}
.submit {
    margin-top: 6px;
    background: #111;
    color: #b48cff;
    border: 2px outset #666;
    font-family: Verdana,sans-serif;
    font-size: 10px;
    padding: 2px 8px;
}
textarea {
    width: 95%;
    height: 60px;
    background: #0a0a0a;
    color: #00ff9c;
    border: 1px dashed #b48cff;
    font-family: 'Courier New',monospace;
    font-size: 10px;
    resize: none;
}


html { scrollbar-color: #b48cff #000; }
::selection { background: #b48cff; color: #000; }
body { cursor: crosshair; }
a { cursor: pointer; }


.blinkie-wall { display:flex; flex-wrap:wrap; gap:3px; }
.blinkie { display:inline-block; width:150px; height:20px; box-sizing:border-box; border:1px solid #000; font-family:Verdana,sans-serif; font-size:9px; font-weight:bold; line-height:18px; text-align:center; white-space:nowrap; overflow:hidden; background:#2b0040; color:#ff9cf0; animation: blinkie .8s step-end infinite; }
@keyframes blinkie { 50% { filter: invert(1) hue-rotate(180deg); } }
.bl-green { background:#002b1a; color:#00ff9c; }
.bl-red { background:#300; color:#ff6666; }
.bl-ice { background:#c9f0ff; color:#002033; }
.bl-slow { animation-duration: 2s; }

.st-teal    { background: linear-gradient(#003333,#008080); }
.st-orange  { background:#ff9933; color:#331a00; text-shadow:none; }
.st-cyber   { background: repeating-linear-gradient(0deg,#001a10 0 2px,#003322 2px 4px); color:#00ff9c; }
.st-black   { background:#000; color:#b48cff; border-color:#b48cff; }


.award { display:inline-block; border:3px double #b48cff; background:#0a0a0a; padding:4px 8px; margin:3px; font-size:13px; color:#ffcc00; text-align:center; }



body { cursor: url("img/cursor.svg") 2 2, crosshair; }
a, a *, .btn88, .submit, label { cursor: url("img/cursor-link.svg") 2 2, pointer; }
textarea, input[type=text] { cursor: text; }


body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.7; background-image: radial-gradient(1px 1px at 20px 30px,#fff,transparent), radial-gradient(1px 1px at 130px 80px,#b48cff,transparent), radial-gradient(1.5px 1.5px at 210px 150px,#00ff9c,transparent), radial-gradient(1px 1px at 300px 40px,#fff,transparent), radial-gradient(1px 1px at 60px 190px,#b48cff,transparent); background-size:340px 220px; animation: drift 40s linear infinite; }
@keyframes drift { to { background-position: 0 220px; } }
.wrapper { position:relative; z-index:1; }


header h1 { animation: glitch 5s infinite; }
@keyframes glitch { 0%,90%,100% { text-shadow:0 0 6px #b48cff; transform:none; } 92% { text-shadow:-2px 0 #00ff9c, 2px 0 #ff3cac; transform:translateX(2px); } 94% { text-shadow:2px 0 #00ff9c, -2px 0 #ff3cac; transform:translateX(-2px) skewX(-6deg); } 96% { text-shadow:0 0 6px #b48cff; transform:none; } }


.tagline::after { content:"_"; animation: blink 1s step-end infinite; }


.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.spin-slow { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rainbow { animation: hue 3s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.divider { display:block; margin:6px auto 0; }

.stamp, .btn88, .blinkie, .award { transition: transform .15s; }
.stamp:hover, .btn88:hover, .award:hover { transform: rotate(-3deg) scale(1.08); position:relative; z-index:2; }


.eq { display:flex; justify-content:center; align-items:flex-end; gap:2px; height:22px; margin:4px 0; }
.eq span { width:5px; background:#00ff9c; animation: eq .9s ease-in-out infinite alternate; }
.eq span:nth-child(2) { animation-duration:.6s; background:#b48cff; }
.eq span:nth-child(3) { animation-duration:1.1s; }
.eq span:nth-child(4) { animation-duration:.7s; background:#b48cff; }
.eq span:nth-child(5) { animation-duration:1s; }
@keyframes eq { from { height:3px; } to { height:22px; } }


.polaroid-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:6px 0; }
.polaroid { background:#f4f1e8; color:#333; padding:6px 6px 4px; box-shadow:3px 3px 0 rgba(0,0,0,.5); transform:rotate(-3deg); text-align:center; font-size:14px; transition:transform .2s; }
.polaroid:nth-child(2) { transform:rotate(2deg); }
.polaroid:nth-child(3) { transform:rotate(-1deg); }
.polaroid:hover { transform:rotate(0) scale(1.06); }
.polaroid img { display:block; margin:0 auto 4px; background:#000; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }


.stamp-img { display:block; width:99px; height:56px; image-rendering:auto; transition:transform .15s; }
.btn-img { display:block; width:88px; height:31px; image-rendering:pixelated; transition:transform .15s; }
.stamp-img:hover, .btn-img:hover { transform:rotate(-3deg) scale(1.1); position:relative; z-index:2; }
.polaroid:nth-child(4n+1) { transform:rotate(-3deg); }
.polaroid:nth-child(4n+2) { transform:rotate(2deg); }
.polaroid:nth-child(4n+3) { transform:rotate(-1deg); }
.polaroid:nth-child(4n) { transform:rotate(3deg); }
.polaroid:hover { transform:rotate(0) scale(1.06); position:relative; z-index:2; }
.polaroid a { color:#333; text-decoration:none; }


* { box-sizing:border-box; }
body {
    margin:0; padding:20px 0 0; color:#d8d0e6; min-height:100vh;
    font:15px/1.5 'Gochi Hand','Comic Sans MS',cursive;
    background:#05010d;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, #b48cff, transparent),
        radial-gradient(1.5px 1.5px at 210px 150px, #00ff9c, transparent),
        radial-gradient(1px 1px at 300px 40px, #fff, transparent);
    background-size:340px 220px;
    cursor:url("img/cursor.svg") 2 2, crosshair;
}
a { color:#b48cff; cursor:url("img/cursor-link.svg") 2 2, pointer; }
a:hover { color:#00ff9c; }
.mono { font:11px 'Courier New',monospace; }
.vt { font-family:'VT323','Courier New',monospace; }

/* the skyline: six dark drawings side by side, fixed behind everything */
.skyline { position:fixed; left:0; right:0; bottom:0; height:58vh; display:flex; z-index:0; pointer-events:none; }
.skyline img { flex:1; min-width:0; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.4) brightness(.55); }
.skyline::before { content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:color; background:#7a3fd1; }
.skyline::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(#05010d, rgba(5,1,13,.2) 45%, rgba(5,1,13,.85)); }

.city { position:relative; z-index:1; width:820px; margin:0 auto; padding-bottom:30px; }
.topbar { margin:0 0 8px; }
.topbar a { text-decoration:none; }

/* neon sign header */
.sign { text-align:center; padding:18px 0 6px; }
h1 { margin:0; font:64px/1 'Reenie Beanie',cursive; color:#f3e9ff; letter-spacing:4px;
     text-shadow:0 0 4px #fff, 0 0 10px #b48cff, 0 0 22px #b48cff, 0 0 40px #7a3fd1; animation:neon 6s infinite; }
.open { display:inline-block; margin-top:8px; padding:0 10px; border:2px solid #ff3cac; border-radius:6px; color:#ff3cac; font-size:22px;
        text-shadow:0 0 6px #ff3cac; box-shadow:0 0 8px #ff3cac, inset 0 0 8px #ff3cac; animation:blink 2.5s step-end infinite; }

/* the train: 88x31 buttons riding a track */
.train { margin:16px 0 22px; border-bottom:3px double #444; }
.train marquee { display:block; }
.train img { display:inline-block; margin:0 3px; vertical-align:bottom; image-rendering:pixelated; border:2px solid #222; border-bottom:0; border-radius:4px 4px 0 0; }

.layout { display:flex; gap:20px; align-items:flex-start; }
.main { flex:1; min-width:0; }
.side { width:200px; flex-shrink:0; }

/* content sits in lit windows */
.window { position:relative; margin-bottom:20px; padding:12px 14px; background:rgba(12,6,24,.88);
          border:1px solid #b48cff; box-shadow:0 0 10px rgba(180,140,255,.35), inset 0 0 20px rgba(180,140,255,.08); }
.window h2 { margin:0 0 8px; font:26px 'VT323','Courier New',monospace; font-weight:normal; color:#00ff9c; text-shadow:0 0 5px #00ff9c; }
p { margin:0 0 10px; }

/* a drawing seen through a window frame, next to the text */
.pane { float:right; width:190px; margin:2px 0 8px 16px; padding:6px; background:#1a1030; border:1px solid #444;
        display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.pane img { width:100%; height:120px; object-fit:cover; filter:sepia(.6) hue-rotate(220deg) saturate(1.6) brightness(.95); }
.pane img:nth-child(1) { object-position:left top; } .pane img:nth-child(2) { object-position:right top; }
.pane img:nth-child(3) { object-position:left bottom; } .pane img:nth-child(4) { object-position:right bottom; }
.pane span { grid-column:1 / 3; font:10px 'Courier New',monospace; color:#888; text-align:center; }
.clear { clear:both; }

/* departures board updates */
.board { background:#000; border:2px solid #333; padding:6px 8px; font:20px/1.2 'VT323','Courier New',monospace; color:#ffcc00; }
.board .row { display:flex; gap:10px; border-bottom:1px dashed #222; padding:2px 0; }
.board .row:last-child { border-bottom:0; }
.board .t { color:#00ff9c; width:56px; flex-shrink:0; }
.board .s { margin-left:auto; color:#ff3cac; }
.board .hd { color:#888; font-size:16px; }

/* billboard: three real stamps cycling */
.billboard { position:relative; padding:10px; background:#111; border:2px solid #333; margin-bottom:6px; }
.billboard::before { content:""; position:absolute; top:-6px; left:8px; right:8px; height:4px;
                     background:repeating-linear-gradient(90deg, #fff6c0 0 4px, transparent 4px 12px); filter:drop-shadow(0 0 4px #fff6c0); }
.ads { position:relative; width:178px; height:100px; }
.ads img { position:absolute; inset:0; width:178px; height:100px; image-rendering:pixelated; opacity:0; animation:ad 9s infinite; }
.ads img:nth-child(2) { animation-delay:3s; } .ads img:nth-child(3) { animation-delay:6s; }
.pole { width:10px; height:40px; margin:0 auto 18px; background:#222; }

/* street sign nav */
.street { list-style:none; margin:0 0 20px; padding:0; }
.street li { margin-bottom:6px; }
.street a { display:block; padding:2px 10px; background:#0d5c36; color:#fff; border:2px solid #fff; border-radius:4px;
            text-decoration:none; font:18px 'VT323','Courier New',monospace; box-shadow:0 0 0 2px #0d5c36; }
.street a:hover { background:#7a3fd1; box-shadow:0 0 0 2px #7a3fd1; color:#fff; }
.street .here a { background:#7a3fd1; box-shadow:0 0 0 2px #7a3fd1; }
.lamp { text-align:center; }
.lamp p { margin:4px 0 0; }
textarea { width:100%; height:54px; resize:none; background:#000; color:#00ff9c; border:1px dashed #444; font:11px 'Courier New',monospace; padding:6px; }
footer { text-align:center; padding:10px 0 20px; }
footer img { vertical-align:middle; }
.counter { background:#000; color:#00ff9c; padding:1px 5px; border:1px solid #444; }

@keyframes neon { 0%,18%,22%,60%,100% { opacity:1; } 20% { opacity:.4; } 61% { opacity:.7; } 62% { opacity:1; } }
@keyframes blink { 50% { opacity:.25; } }
@keyframes ad { 0% { opacity:0; } 5%,33% { opacity:1; } 38%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .ads img:first-child { opacity:1; } }

/* ===== map old site classes to night city ===== */
body::before { display:none; }
.wrapper { width:820px; max-width:96vw; margin:0 auto; padding:0 0 30px; border:0; background:none; position:relative; z-index:1; }
header { text-align:center; padding:18px 0 6px; }
header h1 { font:64px/1 'Reenie Beanie',cursive; color:#f3e9ff; letter-spacing:4px; text-shadow:0 0 4px #fff,0 0 10px #b48cff,0 0 22px #b48cff,0 0 40px #7a3fd1; animation:neon 6s infinite; transform:none; }
.tagline { display:inline-block; margin-top:8px; padding:0 10px; border:2px solid #ff3cac; border-radius:6px; color:#ff3cac; font:22px 'VT323','Courier New',monospace; text-shadow:0 0 6px #ff3cac; box-shadow:0 0 8px #ff3cac, inset 0 0 8px #ff3cac; }
.divider { display:none; }
.wrapper > marquee { background:#000; color:#ffcc00; font:20px 'VT323','Courier New',monospace; border:2px solid #333; padding:2px 6px; margin:10px 0 0; }
.container { flex-direction:row-reverse; align-items:flex-start; gap:20px; }
.sidebar { width:200px; }
.box { position:relative; margin-bottom:20px; padding:12px 14px; background:rgba(12,6,24,.88); border:1px solid #b48cff; box-shadow:0 0 10px rgba(180,140,255,.35), inset 0 0 20px rgba(180,140,255,.08); }
.box::after { content:""; display:block; clear:both; }
.box h3 { margin:0 0 8px; font:26px 'VT323','Courier New',monospace; color:#00ff9c; text-shadow:0 0 5px #00ff9c; border-bottom:0; }
.sidebar .box h3 { font-size:22px; }
.nav-list li { margin-bottom:6px; padding:0; }
.nav-list li a, .nav-list li.current { display:block; padding:2px 10px; background:#0d5c36; color:#fff; border:2px solid #fff; border-radius:4px; text-decoration:none; font:18px 'VT323','Courier New',monospace; box-shadow:0 0 0 2px #0d5c36; }
.nav-list li a:hover, .nav-list li.current { background:#7a3fd1; box-shadow:0 0 0 2px #7a3fd1; color:#fff; }
.log { background:#000; border:2px solid #333; padding:6px 8px; font:20px/1.2 'VT323','Courier New',monospace; color:#ffcc00; }
.log li { border-bottom:1px dashed #222; padding:2px 0; }
.log .date { font:inherit; color:#00ff9c; margin-right:10px; }
.note { background:rgba(255,60,172,.1); color:#ffd1ec; border:1px dashed #ff3cac; box-shadow:0 0 8px rgba(255,60,172,.3); }
.note.pink { background:rgba(255,60,172,.16); }
.note.blue { background:rgba(0,255,156,.08); color:#c9ffe9; border-color:#00ff9c; }
.note a { color:#00ff9c; }
.gb-entry { background:#000; border:1px solid #333; }
.hit-counter { background:#000; color:#00ff9c; border:1px solid #444; }
footer { border-top:3px double #444; }
.train { margin:12px 0 22px; }
/* ===== night city leftovers ===== */
.skyline img, .pane img { image-rendering:auto; }
.train marquee { border:0; padding:0; margin:0; font-size:inherit; }
.box h3 { font-weight:normal; }

/* ===== woven images ===== */
.construction, .uc { display:none; }
.rooftops { display:flex; gap:2px; height:44px; margin:10px 0 0; overflow:hidden; border-bottom:2px solid #b48cff; box-shadow:0 8px 14px -8px #b48cff; }
.rooftops img { flex:1; min-width:0; height:44px; object-fit:cover; object-position:center top; image-rendering:auto; filter:grayscale(1) contrast(1.5) brightness(.6) sepia(.5) hue-rotate(220deg) saturate(1.8); }
.pane.left { float:left; margin:2px 16px 8px 0; }
.postage { position:absolute; top:-12px; right:-10px; width:66px; height:38px; padding:3px; background:#f3e9ff; border:2px dashed #b48cff; transform:rotate(6deg); box-shadow:2px 2px 0 rgba(0,0,0,.6); z-index:2; image-rendering:auto; }
.main .box:nth-of-type(even) > .postage { transform:rotate(-5deg); }
.box:has(> .postage) > h3 { padding-right:62px; }
.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:8px 0; }
.badges img { display:block; width:88px; height:31px; }

/* ===== music player + prod ===== */
#player .eq span { animation-play-state:paused; height:3px; }
#player.playing .eq span { animation-play-state:running; }
#player .track { color:#ffcc00; font:18px 'VT323','Courier New',monospace; margin:4px 0; min-height:1.2em; overflow-wrap:anywhere; }
.pl-controls { display:flex; justify-content:center; gap:6px; margin:6px 0; }
.pl-controls button { font:18px 'VT323','Courier New',monospace; min-width:38px; padding:1px 6px; background:#0d5c36; color:#fff; border:2px solid #fff; border-radius:4px; box-shadow:0 0 0 2px #0d5c36; cursor:pointer; }
.pl-controls button:hover:not(:disabled) { background:#7a3fd1; box-shadow:0 0 0 2px #7a3fd1; }
.pl-controls button:disabled { opacity:.4; cursor:default; }
#player input[type=range] { width:100%; accent-color:#00ff9c; margin:2px 0; }
#player label { display:block; font:16px 'VT323','Courier New',monospace; color:#b48cff; text-align:left; }
.pl-list { list-style:none; margin:6px 0 0; padding:0; max-height:120px; overflow-y:auto; text-align:left; font:16px 'VT323','Courier New',monospace; }
.pl-list li { padding:1px 4px; cursor:pointer; color:#c9ffe9; border-bottom:1px dashed #222; }
.pl-list li:hover, .pl-list li.on { background:#7a3fd1; color:#fff; }
@media (max-width:700px) { .container { flex-direction:column; } .sidebar { width:auto; } .skyline { display:none; } }

/* ===== scenes + no tilt ===== */
.note, .note.pink, .note.blue, .polaroid, .polaroid:nth-child(n), .postage, .main .box:nth-of-type(even) > .postage { transform:none; }
.stamp:hover, .btn88:hover, .award:hover, .stamp-img:hover, .btn-img:hover { transform:none; }
@keyframes glitch { 0%,90%,100% { text-shadow:0 0 6px #b48cff; } 92% { text-shadow:-2px 0 #00ff9c, 2px 0 #ff3cac; } 94% { text-shadow:2px 0 #00ff9c, -2px 0 #ff3cac; } 96% { text-shadow:0 0 6px #b48cff; } }
.box.scene { overflow:hidden; min-height:170px; }
.scene-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; z-index:0; pointer-events:none; image-rendering:auto; filter:grayscale(1) contrast(1.3) sepia(.5) hue-rotate(220deg) saturate(1.8); -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%); mask-image:linear-gradient(90deg, transparent, #000 45%); }
.box.scene > :not(.scene-img) { position:relative; z-index:1; }