/* ---------- Темы: сцена вокруг карты (стена, маскот, предметы) и кнопки каждой темы ---------- */
#app { position: relative; background: var(--wall, var(--frame)); --deco-top: max(8px, calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 4px), env(safe-area-inset-top)); }
.deco { position: absolute; pointer-events: none; }
.deco svg { display: block; width: 100%; height: auto; overflow: visible; }
#app > .hud, #app > .frame, #app > .dock, #app > .actas { position: relative; z-index: 2; }
.deco-foot .foot-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; padding: 0 10px 6px; }
.deco-foot .foot-row svg:first-child { width: 52%; } .deco-foot .foot-row svg:last-child { width: 34%; }
.deco-mascot { left: calc(50% - 10px); top: calc(var(--deco-top) - 6px); width: 96px; margin-left: -48px; z-index: 4; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .35)); animation: mascot-bob 3.4s ease-in-out infinite; }
@keyframes mascot-bob { 50% { transform: translateY(-3px) rotate(-1deg); } }
.deco-foot { left: 0; right: 0; bottom: 0; height: 92px; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.deco-foot > svg:first-child { width: 100%; }
.deco-foot .foot-text { position: absolute; right: 4px; bottom: 14px; width: 58%; }
.deco-bl { left: -6px; bottom: -8px; width: 74px; z-index: 3; display: flex; align-items: flex-end; }
.deco-bl svg { width: auto; max-height: 112px; max-width: 74px; }
.deco-side { right: 0; top: 232px; bottom: 0; width: 40px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px; overflow: hidden; }
.deco-side .side-item { width: 100%; min-height: 0; flex: 0 1 auto; display: flex; justify-content: center; }
.deco-side .side-item svg { width: 38px; max-height: 62px; }
.deco-tag { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; line-height: 1; text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }
.deco-corner { top: 0; width: 168px; z-index: 1; opacity: .95; }
.deco-corner.c-tl { left: 0; } .deco-corner.c-tr { right: 0; }
.deco-corner.c-tr svg { transform: none; }
.deco svg.glow { filter: drop-shadow(0 0 5px #3be3ff); }
.deco svg.spin { animation: deco-spin 14s linear infinite; }
@keyframes deco-spin { to { transform: rotate(360deg); } }
.bulb { animation: bulb 1s steps(2) infinite; } .bulb.b1 { animation-delay: .5s; }
@keyframes bulb { 50% { fill: #7a5a10; } }
.sheet-bar span { font-family: var(--title-font, var(--pix)); }
@media (prefers-reduced-motion: reduce) { .deco-mascot, .bulb, .deco svg.spin { animation: none; } }

/* Общий вид плиток-кнопок в темах: блик сверху и подпись крупнее */
:root[data-theme]:not([data-theme="default"]) .pbtn { background-image: linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 52%); }
:root[data-theme]:not([data-theme="default"]) .pbtn.ghost { background-image: none; }

/* ---------- Гетто ---------- */
:root[data-theme="ghetto"] { --bg: #111; --frame: #2b2b2b; --frame-dark: #0e0e0e; --frame-light: #ffe600; --orange: #ff2bd6; --orange-dark: #8f137a; --green: #39ff14; --green-dark: #1c8a08; --red: #ff3b2f; --yellow: #ffe600; --panel: #1c1c1c; --muted: #b9b4ae; --paper: #f4f1ea; --title-font: "Permanent Marker", var(--pix); }
:root[data-theme="ghetto"] .screen { box-shadow: 0 0 0 3px #ffe600, 6px 6px 0 3px #000; }
:root[data-theme="ghetto"] .hud-logo .tag { font-family: "Permanent Marker", cursive; color: #ffe600; font-size: 17px; text-shadow: 2px 2px 0 #000, -1px 0 #ff2bd6; }
:root[data-theme="ghetto"] .pbtn { border-radius: 5px; border-color: #000; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35), 3px 3px 0 #000; }
:root[data-theme="ghetto"] .pbtn::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 10px; pointer-events: none; background: linear-gradient(currentColor, currentColor) 10% 0 / 3px 8px no-repeat, linear-gradient(currentColor, currentColor) 45% 0 / 3px 5px no-repeat, linear-gradient(currentColor, currentColor) 80% 0 / 3px 10px no-repeat; color: var(--green); }
:root[data-theme="ghetto"] .pbtn.orange::after { color: var(--orange); } :root[data-theme="ghetto"] .pbtn.red::after { color: var(--red); }
:root[data-theme="ghetto"] .card, :root[data-theme="ghetto"] .tile { background: #181818; box-shadow: inset 0 0 0 2px #333; }
:root[data-theme="ghetto"] .tab-btn { border-color: #000; }

/* ---------- Хэллоуин ---------- */
:root[data-theme="halloween"] { --bg: #140a1f; --frame: #3a1f60; --frame-dark: #1a0d2c; --frame-light: #ff8a1e; --orange: #ff7a1a; --orange-dark: #a8400a; --green: #a6e05a; --green-dark: #5e8a24; --yellow: #ffb21e; --panel: #24123a; --muted: #c2a6dd; --paper: #fff1dc; --title-font: Creepster, var(--pix); }
:root[data-theme="halloween"] .screen { box-shadow: 0 0 0 3px #ff8a1e, 6px 6px 0 3px #1a0d2c, 0 0 26px 4px rgba(255, 122, 26, .4); }
:root[data-theme="halloween"] .card, :root[data-theme="halloween"] .tile { background: #1b0d2b; box-shadow: inset 0 0 0 2px #4a2370; }
:root[data-theme="halloween"] .pbtn { border-color: #120820; border-radius: 12px; }
:root[data-theme="halloween"] .pbtn::before { content: ''; position: absolute; inset: 3px; border: 2px dashed rgba(18, 8, 32, .5); border-radius: 8px; pointer-events: none; }
:root[data-theme="halloween"] .hud-logo { text-shadow: 2px 2px 0 #140b0b, 0 0 10px #ff7a1a; }
:root[data-theme="halloween"] .deco-corner svg { opacity: .8; }
:root[data-theme="halloween"] .deco-corner.c-tr svg { transform: scaleX(-1); }

/* ---------- Новый год ---------- */
:root[data-theme="newyear"] { --bg: #0a1830; --frame: #b8222b; --frame-dark: #6f1016; --frame-light: #ffffff; --orange: #e8b23a; --orange-dark: #9a6d12; --green: #2fae62; --green-dark: #17693a; --red: #e0262f; --yellow: #ffe07a; --panel: #12304f; --title-font: "Mountains of Christmas", var(--pix); }
:root[data-theme="newyear"] .screen { box-shadow: 0 0 0 3px #fff, 6px 6px 0 3px #6f1016; }
:root[data-theme="newyear"] .pbtn { color: var(--ink); border-radius: 10px; }
:root[data-theme="newyear"] .pbtn.red { color: #fff; }
:root[data-theme="newyear"] .pbtn::before { content: ''; position: absolute; left: 50%; top: -9px; width: 20px; height: 10px; margin-left: -10px; background: radial-gradient(circle at 5px 6px, #ffd23f 0 4px, transparent 5px), radial-gradient(circle at 15px 6px, #ffd23f 0 4px, transparent 5px); pointer-events: none; }
:root[data-theme="newyear"] .pbtn::after { content: ''; position: absolute; left: 4px; right: 4px; top: -4px; height: 6px; border-radius: 6px 6px 2px 2px; background: #fff; box-shadow: 0 1px 0 #c3cddb; pointer-events: none; }
:root[data-theme="newyear"] .frame::before { content: ''; position: absolute; left: 0; right: 46px; top: -9px; height: 12px; z-index: 5; pointer-events: none; background: radial-gradient(circle at 8px 6px, #ff3b2f 0 3px, transparent 4px) 0 0 / 48px 12px repeat-x, radial-gradient(circle at 20px 6px, #ffe07a 0 3px, transparent 4px) 0 0 / 48px 12px repeat-x, radial-gradient(circle at 32px 6px, #2fd37a 0 3px, transparent 4px) 0 0 / 48px 12px repeat-x, radial-gradient(circle at 44px 6px, #6cc4ea 0 3px, transparent 4px) 0 0 / 48px 12px repeat-x; animation: garland 1.2s steps(2) infinite; }
@keyframes garland { 50% { filter: hue-rotate(140deg) brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="newyear"] .frame::before { animation: none; } }

/* ---------- Сакура: японский вайб ---------- */
:root[data-theme="sakura"] { --bg: #221a3d; --frame: #2d2250; --frame-dark: #170f2e; --frame-light: #e7c76a; --orange: #e8452c; --orange-dark: #8f2412; --green: #9ccf8a; --green-dark: #5f8f52; --red: #c8202e; --red-dark: #7a1019; --yellow: #f6d77a; --panel: #2d2250; --muted: #d8c3e8; --paper: #fff3e6; --title-font: "Kaisei Tokumin", serif; }
:root[data-theme="sakura"] .screen { box-shadow: 0 0 0 3px #e7c76a, 0 0 0 6px #170f2e, 6px 6px 0 6px rgba(0, 0, 0, .35); }
:root[data-theme="sakura"] .pbtn { border-radius: 8px; border-color: #170f2e; box-shadow: inset 0 0 0 2px rgba(231, 199, 106, .85), inset -3px -3px 0 rgba(0, 0, 0, .2); }
:root[data-theme="sakura"] .pbtn::before { content: ''; position: absolute; left: 5px; top: 5px; width: 9px; height: 9px; border-radius: 80% 0 80% 0; background: #ffd0de; opacity: .95; pointer-events: none; }
:root[data-theme="sakura"] .card, :root[data-theme="sakura"] .tile { background: #261c47; box-shadow: inset 0 0 0 2px #4b3c7a; }
:root[data-theme="sakura"] .hud-logo { font-family: "Kaisei Tokumin", serif; font-size: 14px; color: #ffd0de; text-shadow: 2px 2px 0 #170f2e; }

/* ---------- Лето ---------- */
:root[data-theme="summer"] { --bg: #0b5f88; --frame: #0e78a6; --frame-dark: #06425f; --frame-light: #ffe58a; --orange: #ff7a3c; --orange-dark: #c2480f; --green: #3fd37a; --green-dark: #1f8f4a; --red: #ff5d73; --red-dark: #b5283d; --yellow: #ffe58a; --panel: #0f5f8a; --paper: #fff; --muted: #bfeaff; --title-font: Pacifico, cursive; }
:root[data-theme="summer"] .screen { box-shadow: 0 0 0 3px #ffe58a, 6px 6px 0 3px #06425f; }
:root[data-theme="summer"] .pbtn { border-radius: 999px; border-color: #06425f; }
:root[data-theme="summer"] .hud-logo { font-family: Pacifico, cursive; font-size: 15px; text-shadow: 2px 2px 0 #06425f; }

/* ---------- Киберпанк ---------- */
:root[data-theme="cyber"] { --bg: #0b0b1e; --frame: #12123a; --frame-dark: #06061a; --frame-light: #3be3ff; --orange: #ff2e9a; --orange-dark: #8a1857; --green: #3be3ff; --green-dark: #1b8aa0; --red: #ff2e9a; --red-dark: #8a1857; --yellow: #f6ee5a; --panel: #14143a; --muted: #8f93d8; --paper: #e8ecff; --title-font: Orbitron, var(--pix); }
:root[data-theme="cyber"] .screen { box-shadow: 0 0 0 3px #3be3ff, 0 0 16px 3px rgba(59, 227, 255, .5), 6px 6px 0 3px #06061a; }
:root[data-theme="cyber"] .pbtn { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); border-color: #06061a; color: #06061a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
:root[data-theme="cyber"] .pbtn.ghost, :root[data-theme="cyber"] .pbtn.red { color: #fff; }
:root[data-theme="cyber"] .card, :root[data-theme="cyber"] .tile { background: #12123a; box-shadow: inset 0 0 0 2px #2a2a6a; }
:root[data-theme="cyber"] .hud-logo { font-family: Orbitron, var(--pix); font-size: 12px; color: #e8ecff; text-shadow: 0 0 8px #3be3ff, 2px 2px 0 #ff2e9a; }

/* ---------- Game Boy ---------- */
:root[data-theme="gameboy"] { --bg: #4d533c; --ink: #2a2e20; --frame: #8f9b6a; --frame-dark: #5a6147; --frame-light: #c4cfa1; --orange: #a7b385; --orange-dark: #6b7356; --green: #c4cfa1; --green-dark: #8b956d; --red: #6b7356; --red-dark: #4d533c; --yellow: #dfe6c4; --panel: #c4cfa1; --muted: #4d533c; --paper: #2a2e20; }
:root[data-theme="gameboy"] body, :root[data-theme="gameboy"] .pbtn, :root[data-theme="gameboy"] .tab-btn, :root[data-theme="gameboy"] .sheet { color: #2a2e20; }
:root[data-theme="gameboy"] .pbtn { border-radius: 0; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .22), 3px 3px 0 #2a2e20; }
:root[data-theme="gameboy"] .pbtn.red, :root[data-theme="gameboy"] .tab-btn:not(.on) { color: #e7edcf; }
:root[data-theme="gameboy"] .hud-timer, :root[data-theme="gameboy"] .hud-lang { background: #d2dbb3; color: #2a2e20; border-color: #2a2e20; box-shadow: 2px 2px 0 #2a2e20; }
:root[data-theme="gameboy"] .card, :root[data-theme="gameboy"] .tile, :root[data-theme="gameboy"] .pick { background: #d2dbb3; color: #2a2e20; box-shadow: inset 0 0 0 2px #a7b385; }
:root[data-theme="gameboy"] .sheet-bar, :root[data-theme="gameboy"] .hud-logo { color: #2a2e20; text-shadow: none; }
:root[data-theme="gameboy"] .note, :root[data-theme="gameboy"] .pay-box { background: #b6c091; color: #2a2e20; }
:root[data-theme="gameboy"] .msg { background: #d2dbb3; color: #2a2e20; }
:root[data-theme="gameboy"] .msg.me { background: #a7b385; }
:root[data-theme="gameboy"] .tile b, :root[data-theme="gameboy"] .price { color: #4d533c; }
:root[data-theme="gameboy"] #app::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .06) 2px 3px); }

/* ---------- Космос ---------- */
:root[data-theme="space"] { --bg: #0a0820; --frame: #1a1450; --frame-dark: #0a0820; --frame-light: #7a6af0; --orange: #ff9f5a; --orange-dark: #b5571a; --green: #5fe0c8; --green-dark: #2a9a86; --red: #ff5d73; --red-dark: #a01a35; --yellow: #ffd23f; --panel: #17123f; --muted: #a8a8e8; --paper: #eef0ff; --title-font: Orbitron, var(--pix); }
:root[data-theme="space"] .screen { box-shadow: 0 0 0 3px #7a6af0, 0 0 22px 4px rgba(122, 106, 240, .45), 6px 6px 0 3px #0a0820; }
:root[data-theme="space"] .pbtn { border-radius: 999px; border-color: #0a0820; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 10px rgba(122, 106, 240, .5); }
:root[data-theme="space"] .hud-logo { font-family: Orbitron, var(--pix); font-size: 12px; letter-spacing: 2px; text-shadow: 0 0 8px #7a6af0; }
:root[data-theme="space"] .card, :root[data-theme="space"] .tile { background: #130e38; box-shadow: inset 0 0 0 2px #3a2f9a; }

/* ---------- Пираты ---------- */
:root[data-theme="pirate"] { --bg: #2a1608; --frame: #5a3418; --frame-dark: #2a1608; --frame-light: #c9a23a; --orange: #d9893a; --orange-dark: #8f4f12; --green: #4f9a5c; --green-dark: #2a5f36; --red: #b8322a; --red-dark: #701810; --yellow: #e8c25a; --panel: #3a210e; --muted: #d4b88a; --paper: #f7ecd0; --title-font: "Pirata One", serif; }
:root[data-theme="pirate"] .screen { box-shadow: 0 0 0 3px #c9a23a, 0 0 0 6px #2a1608, 6px 6px 0 6px rgba(0, 0, 0, .4); }
:root[data-theme="pirate"] .pbtn { border-radius: 4px; border-color: #2a1608; box-shadow: inset 0 0 0 2px #c9a23a, inset -3px -3px 0 rgba(0, 0, 0, .25); }
:root[data-theme="pirate"] .pbtn::before { content: ''; position: absolute; inset: 5px; background: radial-gradient(circle, #c9a23a 0 2px, transparent 3px) 0 0 / 100% 100% no-repeat; pointer-events: none; opacity: 0; }
:root[data-theme="pirate"] .hud-logo { font-family: "Pirata One", serif; font-size: 17px; color: #f7ecd0; text-shadow: 2px 2px 0 #2a1608; letter-spacing: 1px; }
:root[data-theme="pirate"] .card, :root[data-theme="pirate"] .tile { background: #2e1a0a; box-shadow: inset 0 0 0 2px #7a4a22; }

/* ---------- Вестерн ---------- */
:root[data-theme="western"] { --bg: #4a2410; --frame: #b4772f; --frame-dark: #6e4216; --frame-light: #ffd98a; --orange: #d9622a; --orange-dark: #8f3a12; --green: #8aa83a; --green-dark: #52701a; --red: #b8322a; --red-dark: #701810; --yellow: #ffd98a; --panel: #5a3418; --muted: #e0c48a; --paper: #fff3d6; --title-font: Rye, serif; }
:root[data-theme="western"] .screen { box-shadow: 0 0 0 3px #ffd98a, 0 0 0 6px #6e4216, 6px 6px 0 6px rgba(0, 0, 0, .35); }
:root[data-theme="western"] .pbtn { border-radius: 6px; border-color: #3a1c08; }
:root[data-theme="western"] .pbtn::before { content: ''; position: absolute; inset: 3px; border: 2px dashed rgba(58, 28, 8, .55); border-radius: 4px; pointer-events: none; }
:root[data-theme="western"] .hud-logo { font-family: Rye, serif; font-size: 12px; color: #fff3d6; text-shadow: 2px 2px 0 #3a1c08; }
:root[data-theme="western"] .card, :root[data-theme="western"] .tile { background: #4a2a12; box-shadow: inset 0 0 0 2px #8f5a22; }

/* ---------- Сладости ---------- */
:root[data-theme="candy"] { --bg: #ff8fc0; --ink: #6b2350; --frame: #ff8fc0; --frame-dark: #c94a8a; --frame-light: #ffffff; --orange: #ff6fa8; --orange-dark: #c93a78; --green: #6fe0c0; --green-dark: #2fa088; --red: #ff5d73; --red-dark: #b82a48; --yellow: #fff08a; --panel: #b2437f; --muted: #ffd0e6; --paper: #fff6fb; --title-font: Chewy, cursive; }
:root[data-theme="candy"] .screen { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #c94a8a, 6px 6px 0 7px rgba(107, 35, 80, .3); border-radius: 6px; }
:root[data-theme="candy"] .pbtn { border-radius: 20px; border-color: #6b2350; color: #5a1f45; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 0 3px 0 #c94a8a; }
:root[data-theme="candy"] .pbtn.red, :root[data-theme="candy"] .pbtn.ghost { color: #fff; }
:root[data-theme="candy"] .pbtn::before { content: ''; position: absolute; left: 9px; top: 5px; width: 16px; height: 7px; border-radius: 8px; background: rgba(255, 255, 255, .65); pointer-events: none; }
:root[data-theme="candy"] .hud-logo { font-family: Chewy, cursive; font-size: 18px; color: #fff; text-shadow: 2px 2px 0 #c94a8a; }
:root[data-theme="candy"] .card, :root[data-theme="candy"] .tile { background: #9c3a70; box-shadow: inset 0 0 0 2px #ff8fc0; }

/* ---------- Казино ---------- */
:root[data-theme="casino"] { --bg: #06301a; --frame: #0c4a2a; --frame-dark: #04200f; --frame-light: #c9a23a; --orange: #e8b23a; --orange-dark: #8f6a12; --green: #1f9a52; --green-dark: #0f5f30; --red: #c8202e; --red-dark: #7a1019; --yellow: #ffd23f; --panel: #0a3a20; --muted: #9fd4b0; --paper: #fff6d8; --title-font: Bungee, var(--pix); }
:root[data-theme="casino"] .screen { box-shadow: 0 0 0 3px #c9a23a, 0 0 0 6px #7a1010, 6px 6px 0 6px rgba(0, 0, 0, .4); }
:root[data-theme="casino"] .pbtn { border-radius: 14px; border-color: #04200f; box-shadow: inset 0 0 0 2px #c9a23a, inset 0 0 0 4px rgba(0, 0, 0, .25); }
:root[data-theme="casino"] .pbtn.orange { color: #3a2400; }
:root[data-theme="casino"] .hud-logo { font-family: Bungee, var(--pix); font-size: 12px; color: #ffd23f; text-shadow: 2px 2px 0 #7a1010; }
:root[data-theme="casino"] .card, :root[data-theme="casino"] .tile { background: #0a3a20; box-shadow: inset 0 0 0 2px #7a6a1a; }