:root {
    --swamp-green: #4CAF50;
    --accent: #ff9800;
    --bg: #111;
}
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: var(--bg);
    font-family: 'Press Start 2P', monospace; color: white;
    user-select: none;
}
#game-wrapper { position: relative; width: 100vw; height: 100vh; }
canvas { display: block; width: 100%; height: 100%; }
/* 🌀 Triángulo de Pondgea — colores invertidos, como el gag de
   Poltergoose donde SwaySway y Buhdeuce chocan los puños y sus
   colores se invierten. Solo afecta el canvas del juego, no el
   HUD ni los modales, para que siga siendo legible. */
#game-wrapper.cursed-triangle canvas { filter: invert(0.9) hue-rotate(180deg); }

#hud {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; justify-content: space-between; align-items: flex-start;
    pointer-events: none;
    background: rgba(0,0,0,0.7);
    padding: 8px 14px; border-radius: 6px;
    border: 1px solid var(--swamp-green);
    font-size: 11px;
    z-index: 5;
}
#profile-hud { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
#pfp-hud-img {
    width: 32px; height: 32px; border: 2px solid white;
    background: var(--swamp-green); object-fit: cover; border-radius: 50%;
    flex-shrink: 0;
}
#hud-identity { min-width: 0; max-width: 260px; }
#hud-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#hud-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-level-badge {
    font-size: 8px; white-space: nowrap; flex-shrink: 0;
    background: rgba(255, 213, 79, 0.15); color: #FFD54F;
    border: 1px solid #FFD54F; border-radius: 8px; padding: 1px 6px;
}
#hud-floor-label { font-size: 9px; color: var(--accent); margin-top: 2px; line-height: 1.3; overflow-wrap: break-word; }
#bread-hotbar {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 50; pointer-events: none;
}
#item-hotbar {
    position: absolute; right: 14px; bottom: 14px;
    display: flex; gap: 6px; z-index: 50; pointer-events: none;
}
.hotbar-slot {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(20,20,30,0.75); border: 2px solid #546E7A;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; position: relative; pointer-events: auto; cursor: pointer;
}
.hotbar-slot.hotbar-empty { color: #546E7A; font-size: 11px; border-style: dashed; cursor: default; }
.hotbar-key {
    position: absolute; top: -6px; left: -6px; background: #263238; color: #FFD54F;
    font-size: 8px; border-radius: 4px; padding: 1px 3px; font-family: 'Courier New', monospace;
}
.hotbar-charges {
    position: absolute; bottom: -6px; right: -4px; background: #1B1B1B; color: #90CAF9;
    font-size: 7px; border-radius: 4px; padding: 0 2px;
}

.modal {
    display: none; position: absolute;
    top: 10%; left: 50%; transform: translateX(-50%);
    width: min(500px, 80vw); max-height: 80vh; overflow-y: auto;
    background: rgba(20,30,25,0.97);
    border: 4px solid var(--accent);
    padding: 20px; box-sizing: border-box;
    z-index: 20; border-radius: 10px;
    font-size: 11px;
}
.modal.active { display: block; }
.close-btn { float: right; cursor: pointer; color: #f44336; font-size: 16px; }

#places-fullscreen {
    display: none; position: fixed; inset: 0; z-index: 40;
    background: linear-gradient(180deg, #2a5a9a 0%, #4a7ab5 30%, #8ec9f0 65%, #cdeaff 100%);
    flex-direction: column; align-items: center; justify-content: center;
    font-family: inherit;
}
#places-fullscreen.active { display: flex; }
.places-fs-title {
    color: #fff; font-size: 16px; margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.places-row {
    display: flex; flex-direction: row; align-items: flex-end;
    gap: 6vw; overflow-x: auto; max-width: 96vw; padding: 20px 4vw 10px;
}
.place-island {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
    flex-shrink: 0; width: min(26vw, 220px);
    transition: transform 0.15s ease;
}
.place-island:hover { transform: translateY(-8px) scale(1.06); }
.place-island svg, .place-island img { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.35)); border-radius: 10px; }
.place-island-label {
    color: #fff; font-size: 10px; text-align: center; margin-top: 10px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
.places-fs-desc {
    color: #eef; font-size: 9px; text-align: center; max-width: 70vw;
    min-height: 30px; margin-top: 20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Compu de Buhdeuce: abierta como notebook común — pantalla con
   bisagra arriba y una base/teclado angosta abajo, carcasa gris
   oscuro, con la placa del logo (la "T") en la bisagra, como en la
   serie. */
.modal-pc {
    width: min(600px, 92vw); max-height: 90vh; padding: 14px 14px 10px; overflow: hidden;
    background: linear-gradient(180deg, #6b6f73, #4a4e52);
    border: none; border-radius: 20px; position: absolute;
    box-shadow: 0 10px 0 #33363a, 0 14px 24px rgba(0,0,0,0.5);
}
.pc-hinge {
    display: flex; align-items: center; justify-content: center;
    height: 20px; margin-bottom: -4px;
}
.pc-hinge-logo {
    width: 34px; height: 16px; border-radius: 4px; background: #3a3d40;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
}
.pc-hinge-logo span {
    color: #cfd3d6; font-family: 'Press Start 2P', monospace; font-size: 10px; font-weight: bold;
}
.pc-frame {
    display: flex; gap: 10px; height: min(510px, 68vh);
    background: linear-gradient(180deg, #4E9B94, #357670);
    border-radius: 14px 14px 6px 6px; padding: 10px; box-shadow: inset 0 0 0 3px #2c5b56;
}
.pc-keyboard-deck {
    height: 26px; margin-top: 6px; border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #5c6064, #454850);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.3);
}
.pc-keyboard-deck span {
    width: 5px; height: 5px; border-radius: 50%; background: #2c2f32;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}
.pc-buttons-strip {
    width: 26px; flex-shrink: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
}
.pc-buttons-strip span {
    width: 14px; height: 14px; border-radius: 50%; display: block;
    box-shadow: inset 0 -2px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(255,255,255,0.4);
}
.pc-buttons-strip span:nth-child(1) { background: #EF5350; }
.pc-buttons-strip span:nth-child(2) { background: #FFCA28; }
.pc-buttons-strip span:nth-child(3) { background: #66BB6A; }
.pc-buttons-strip span:nth-child(4) { background: #42A5F5; }
#pc-screen {
    display: flex; flex-direction: column; flex: 1; min-width: 0; position: relative;
    background: #0b1f14; border-radius: 8px; overflow: hidden;
    box-shadow: inset 0 0 0 3px #0a1710, inset 0 0 26px 6px rgba(0,0,0,0.6);
}
#pc-screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,255,140,0.03) 3px);
    mix-blend-mode: overlay;
}
@keyframes pcBootFlicker {
    0% { filter: brightness(3) saturate(0); opacity: 0.2; }
    8% { filter: brightness(0.3) saturate(0); opacity: 1; }
    16% { filter: brightness(2.4) saturate(0.4); }
    24% { filter: brightness(0.4); }
    40% { filter: brightness(1.6); }
    100% { filter: brightness(1) saturate(1); }
}
#pc-screen.pc-booting { animation: pcBootFlicker 0.6s steps(2, jump-end); }
#pc-desktop.wallpaper-green { background: radial-gradient(circle at top left, #1b3a2a, #0b1f14 70%); }
#pc-desktop.wallpaper-purple { background: radial-gradient(circle at top left, #3a1b45, #170b1f 70%); }
#pc-desktop.wallpaper-blue { background: radial-gradient(circle at top left, #123a4a, #0b1420 70%); }
#pc-desktop.wallpaper-orange { background: radial-gradient(circle at top left, #4a2a10, #1f120b 70%); }
.wallpaper-swatch {
    width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: inline-block;
    margin-right: 8px; border: 2px solid transparent;
}
.wallpaper-swatch.selected { border-color: #fff; }
.pc-topbar {
    background: linear-gradient(180deg, #2E6DA4, #1B4F7A); color: #fff;
    padding: 7px 10px; display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; border-bottom: 2px solid #17395a; flex-shrink: 0;
    font-family: 'Press Start 2P', monospace; letter-spacing: 0.5px;
}
.pc-chrome-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 18px; margin-left: 5px; cursor: pointer;
    background: linear-gradient(180deg, #B0BAC0, #7C868C);
    border: 1px solid #545c61; border-radius: 3px; color: #263238; font-size: 9px;
    box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset;
}
.pc-chrome-btn:hover { background: linear-gradient(180deg, #C6CED2, #8F979C); }
.pc-chrome-btn.close { background: linear-gradient(180deg, #E57373, #C62828); color: #fff; }
.pc-topbar .close-btn { float: none; }
#pc-desktop {
    flex: 1; padding: 18px; display: grid;
    grid-template-columns: repeat(auto-fill, 74px); gap: 12px; align-content: start;
    overflow-y: auto; background: radial-gradient(circle at top left, #1b3a2a, #0b1f14 70%);
}
.pc-icon { width: 74px; text-align: center; cursor: pointer; padding: 8px 4px; border-radius: 6px; }
.pc-icon:hover { background: rgba(255,255,255,0.1); }
.pc-icon-img { font-size: 28px; }
.pc-icon-label { font-size: 8px; margin-top: 6px; color: #fff; text-shadow: 1px 1px #000; }
.pc-window { position: absolute; inset: 0; display: flex; flex-direction: column; background: #101d16; }
.pc-window-titlebar {
    background: linear-gradient(180deg, #2E6DA4, #1B4F7A); color: #fff;
    padding: 7px 10px; display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; flex-shrink: 0; font-family: 'Press Start 2P', monospace;
}
.pc-window-close {
    cursor: pointer; padding: 2px 7px; border-radius: 3px; font-size: 9px;
    background: linear-gradient(180deg, #E57373, #C62828); color: #fff;
    border: 1px solid #545c61; box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset;
}
.pc-window-content { flex: 1; overflow-y: auto; padding: 14px; font-size: 10px; }
.pc-window-content::-webkit-scrollbar, #pc-desktop::-webkit-scrollbar { width: 14px; }
.pc-window-content::-webkit-scrollbar-track, #pc-desktop::-webkit-scrollbar-track { background: #37474F; }
.pc-window-content::-webkit-scrollbar-thumb, #pc-desktop::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B0BAC0, #7C868C); border: 1px solid #263238; border-radius: 2px;
}
.pc-taskbar {
    background: #1c1c1c; border-top: 2px solid #444; padding: 6px 12px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 8px; color: #ccc; flex-shrink: 0;
}
.pandex-grid { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 8px; margin-top: 10px; }
.pandex-tile {
    width: 52px; height: 52px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; background: #17251c; border: 2px solid #3a4a3e;
}
.pandex-tile.filled { border-color: var(--tile-color, var(--accent)); background: #1e2f22; }
.pandex-tile.filled.rainbow {
    border: 2px solid #1e2f22;
    background: #1e2f22;
}
.pandex-tile.filled.rainbow::before {
    content: ""; position: absolute; inset: -2px; border-radius: 8px; padding: 2px;
    background: conic-gradient(from 0deg, #ff3b30, #ff9500, #ffe600, #34c759, #00c7d6, #0a84ff, #bf5af2, #ff3b30);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: pandexRainbowSpin 3s linear infinite;
    pointer-events: none;
}
@keyframes pandexRainbowSpin { to { filter: hue-rotate(360deg); } }
.pandex-tile.selected { box-shadow: 0 0 0 2px #fff inset; }
.pandex-tile img { width: 32px; height: 32px; object-fit: contain; border-radius: 3px; }
.pandex-tile .tile-emoji { font-size: 24px; }
.pandex-tile .tile-count {
    position: absolute; bottom: 1px; right: 2px; font-size: 7px;
    background: rgba(0,0,0,0.8); padding: 1px 3px; border-radius: 3px;
}
.pandex-tile.locked { opacity: 0.35; filter: grayscale(1); cursor: default; }
.achv-badge {
    position: absolute; top: -4px; right: 6px;
    background: #FFC107; color: #1b3a2a; font-weight: bold;
    font-size: 9px; min-width: 15px; height: 15px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 1px solid #1b3a2a;
}
.achv-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; margin-bottom: 6px; border: 2px solid #37473c; border-radius: 4px;
}
.achv-row.done { border-color: var(--tile-color, var(--accent)); background: #1e2f22; }
.achv-row.locked { opacity: 0.5; filter: grayscale(0.6); }
.achv-row .achv-icon { font-size: 22px; }
.achv-row .achv-name { font-weight: bold; color: var(--accent); font-size: 10px; }
.achv-row .achv-desc { font-size: 9px; color: #aaa; margin-top: 2px; }

input {
    font-family: 'Press Start 2P', monospace; padding: 8px; font-size: 10px;
    width: 90%; margin-bottom: 10px; background: #000; color: #fff;
    border: 2px solid var(--swamp-green);
}
button {
    font-family: 'Press Start 2P', monospace; background: var(--swamp-green); color: white;
    border: 2px solid white; padding: 8px 10px; cursor: pointer; font-size: 10px;
    margin: 4px; transition: 0.15s; border-radius: 4px;
}
button:hover { background: var(--accent); transform: scale(1.04); }
button:disabled { background: #555; cursor: not-allowed; transform: none; }

/* --- Ketta's Auto-Tune-Up: rediseño visual de la tienda --- */
#modal-shop { width: min(440px, 88vw); }
#modal-shop h2 {
    display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
    padding-bottom: 10px; border-bottom: 2px solid rgba(38,198,218,0.35);
}
.shop-section {
    margin-bottom: 14px; padding: 10px 10px 4px;
    background: rgba(0,0,0,0.28); border: 2px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
.shop-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 9px; color: #B0BEC5; margin: 0 0 8px;
    letter-spacing: 0.5px; text-transform: uppercase;
}
#modal-shop button {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    text-align: left; background: linear-gradient(135deg, #1b2e22, #213326);
    border: 2px solid #37474F; color: #eee; padding: 10px 12px 10px 42px;
    margin: 0 0 8px; border-radius: 8px; font-size: 9px; line-height: 1.5;
    position: relative; transition: 0.15s;
}
#modal-shop button:hover:not(:disabled) {
    border-color: var(--accent); transform: translateX(3px);
    background: linear-gradient(135deg, #26392b, #2c4030);
}
#modal-shop button::before {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 17px;
}
#modal-shop button:disabled {
    opacity: 0.55; background: #2a2a2a; border-color: #444; color: #9ccf9e;
}
#btn-pickaxe::before { content: "⛏️"; }
#modal-shop .shop-floor-btn::before { content: "🛗"; }
#btn-toaster::before { content: "🍞"; }
#btn-helmet::before { content: "⛑️"; }
#btn-gloves::before { content: "🧤"; }
#btn-vanturbo::before { content: "🚀"; }
#btn-vancargo::before { content: "📦"; }
#modal-shop .shop-codes-row { display: flex; gap: 6px; align-items: center; }
#modal-shop .shop-codes-row input { width: auto; flex: 1; margin-bottom: 0; }
#modal-shop #btn-redeem { width: auto; display: inline-flex; padding: 8px 12px; margin: 0; }
#modal-shop #btn-redeem::before { content: "🔑"; position: static; transform: none; margin-right: 4px; font-size: 12px; }

#notification {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--accent); padding: 10px 16px; display: none; z-index: 100;
    border: 2px solid white; border-radius: 5px; font-size: 11px; white-space: nowrap;
}

#touch-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: none; justify-content: space-between; padding: 20px;
    box-sizing: border-box; z-index: 15;
}
.touch-btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(76,175,80,0.5); border: 2px solid white;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; touch-action: none;
}
@media (max-width: 900px), (pointer: coarse) {
    #touch-controls { display: flex; }
}

/* 🥊 Food Fight Club — pantalla estilo arcade/juego de pelea retro */
#modal-foodfight.ff-arcade {
    background: radial-gradient(ellipse at center, #1a2f6b 0%, #0a1230 70%, #050814 100%);
    border: 6px solid #0d1533;
    box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,152,0,0.35);
    border-radius: 4px;
    overflow: hidden;
}
#modal-foodfight.ff-arcade::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
}
#modal-foodfight.ff-arcade > * { position: relative; z-index: 1; }
.ff-arcade-title {
    font-size: 20px; line-height: 1.35; text-align: center; margin: 6px 0 12px;
    color: #FFD180; -webkit-text-stroke: 1.5px #7a2e00;
    text-shadow: 3px 3px 0 #7a2e00, 5px 5px 0 rgba(0,0,0,0.5), 0 0 14px rgba(255,152,0,0.6);
    letter-spacing: 1px;
}
.ff-arcade-sub { font-size: 8px; color: #90CAF9; text-align: center; margin-bottom: 12px; line-height: 1.6; letter-spacing: 0.5px; }
.ff-arcade-label { font-size: 8px; color: #90CAF9; margin: 12px 0 5px; text-align: left; letter-spacing: 0.5px; }
.ff-arcade-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ff-arcade-btn {
    display: block; width: 100%; box-sizing: border-box;
    background: linear-gradient(180deg, #1c2b5e, #0e1638);
    border: 2px solid var(--accent); color: #FFE0B2;
    padding: 12px 14px; font-family: 'Press Start 2P', monospace; font-size: 10px;
    text-align: left; cursor: pointer; letter-spacing: 0.5px;
    box-shadow: 0 3px 0 #7a2e00, inset 0 0 8px rgba(255,152,0,0.08);
    transition: transform 0.08s ease;
}
.ff-arcade-btn:hover { background: linear-gradient(180deg, #28407f, #16204a); }
.ff-arcade-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #7a2e00; }
.ff-arcade-cartel {
    border: 2px dashed #EF5350; padding: 8px; margin: 10px 0; color: #ddd;
    font-size: 8px; text-align: left; line-height: 1.6; background: rgba(239,83,80,0.08);
}
.ff-arcade-select {
    font-family: 'Press Start 2P', monospace; font-size: 8px;
    background: #0e1638; color: #FFE0B2; border: 2px solid var(--accent);
    padding: 5px; width: 100%; box-sizing: border-box;
}

/* 🎮 Breadwinner Battle — menú estilo Street Fighter II (referencia
   real del episodio "Fowl Feud") */
#modal-bwbattle.bwb-arcade {
    background: radial-gradient(ellipse at center, #0d1b4d 0%, #060b26 75%, #030614 100%);
    border: 6px solid #08102e;
    box-shadow: inset 0 0 0 3px #FF6D00, inset 0 0 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,109,0,0.35);
    border-radius: 4px;
    overflow: hidden;
}
#modal-bwbattle.bwb-arcade::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
}
#modal-bwbattle.bwb-arcade > * { position: relative; z-index: 1; }
.bwb-title {
    font-size: 15px; line-height: 1.35; text-align: center; margin: 6px 0 12px;
    color: #FFB300; -webkit-text-stroke: 1.5px #7a1a00;
    text-shadow: 3px 3px 0 #7a1a00, 5px 5px 0 rgba(0,0,0,0.5), 0 0 14px rgba(255,109,0,0.6);
    letter-spacing: 1px;
}
.bwb-sub { font-size: 8px; color: #90CAF9; text-align: center; margin-bottom: 12px; line-height: 1.6; letter-spacing: 0.5px; }
.bwb-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bwb-btn {
    display: block; width: 100%; box-sizing: border-box;
    background: linear-gradient(180deg, #1c1140, #0e0a24);
    border: 2px solid #FF6D00; color: #FFE0B2;
    padding: 12px 14px; font-family: 'Press Start 2P', monospace; font-size: 10px;
    text-align: left; cursor: pointer; letter-spacing: 0.5px;
    box-shadow: 0 3px 0 #7a1a00, inset 0 0 8px rgba(255,109,0,0.08);
}
.bwb-btn:hover { background: linear-gradient(180deg, #2a1a5e, #150c33); }
.bwb-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #7a1a00; }
.bwb-btn:disabled, .bwb-btn.bwb-disabled {
    opacity: 0.4; cursor: not-allowed; border-color: #555;
}

/* 🍽️ Turbo Washer 2000 — arcade de la cocina (episodio "BroCrastination") */
#modal-turbowasher.tw-arcade {
    background: radial-gradient(ellipse at center, #0d3b4d 0%, #062026 75%, #030f13 100%);
    border: 6px solid #062229;
    box-shadow: inset 0 0 0 3px #26C6DA, inset 0 0 30px rgba(0,0,0,0.6), 0 0 20px rgba(38,198,218,0.35);
    border-radius: 4px;
    overflow: hidden;
}
#modal-turbowasher.tw-arcade::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
}
#modal-turbowasher.tw-arcade > * { position: relative; z-index: 1; }
.tw-title {
    font-size: 15px; line-height: 1.35; text-align: center; margin: 6px 0 12px;
    color: #80DEEA; -webkit-text-stroke: 1.5px #01444f;
    text-shadow: 3px 3px 0 #01444f, 5px 5px 0 rgba(0,0,0,0.5), 0 0 14px rgba(38,198,218,0.6);
    letter-spacing: 1px;
}
.tw-sub { font-size: 8px; color: #B2EBF2; text-align: center; margin-bottom: 12px; line-height: 1.6; letter-spacing: 0.5px; }
.tw-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tw-btn {
    display: block; width: 100%; box-sizing: border-box;
    background: linear-gradient(180deg, #0e3a44, #082026);
    border: 2px solid #26C6DA; color: #E0F7FA;
    padding: 12px 14px; font-family: 'Press Start 2P', monospace; font-size: 10px;
    text-align: left; cursor: pointer; letter-spacing: 0.5px;
    box-shadow: 0 3px 0 #01444f, inset 0 0 8px rgba(38,198,218,0.08);
}
.tw-btn:hover { background: linear-gradient(180deg, #145868, #0c333c); }
.tw-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #01444f; }