button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.card { max-height:calc(100% - 24px); overflow:auto; overscroll-behavior:contain; }
.mobile { user-select:none;-webkit-user-select:none; }
.mobile .directions { display:flex;gap:12px; }
.mobile button.pressed { background:#b96b50;transform:translateY(3px);box-shadow:0 2px #101329; }
.coins-hud { color:#f9df88;white-space:nowrap; }
.pickup-toast { position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(420px,92%);padding:9px 13px;background:#2c2442f5;color:#fff3dd;border:2px solid #dfaad5;box-shadow:3px 4px #21192c;text-align:center;line-height:1.3;font-size:clamp(12px,2.5vw,14px); }
.pickup-toast[hidden] { display:none; }
.pickup-toast strong { display:block;color:#ffe29c;margin-bottom:3px;font:900 clamp(13px,3vw,17px) monospace; }
.pickup-toast.meme-toast { left:var(--pickup-x,50%);top:var(--pickup-y,50%);bottom:auto;transform:translate(-50%,-100%);width:max-content;max-width:min(300px,78%);padding:7px 10px;text-align:left;font-size:12px; }
.pickup-toast.meme-toast strong { color:#f8c7ed;font-size:13px; }
.wrap:fullscreen { width:100vw;max-width:none;height:100dvh;padding:8px;display:flex;flex-direction:column;background:#171a38; }
.wrap:fullscreen .frame { flex:1;min-height:0;aspect-ratio:auto;width:100%; }
.wrap:fullscreen .bottom { flex:none;margin:8px 0 0; }
.wrap:fullscreen .mobile { display:flex;flex:1;justify-content:space-between; }
@media (pointer:coarse), (max-width:900px) {
  html,body { width:100%;height:100%;overflow:hidden;overscroll-behavior:none; }
  .wrap { display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .frame { flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;border-width:3px;box-shadow:0 0 0 2px #574d56; }
  .hud { padding:9px 8px;gap:48px;font-size:11px;line-height:1.4; }
  .hud>div { padding:6px 7px;max-width:46%;border-width:1px; }
  .hud-right { max-width:55%;font-size:10px; }
  .hud .count,#lives { font-size:14px;font-weight:bold;white-space:nowrap; }
  .bottom { flex:none;display:flex;flex-wrap:nowrap;gap:10px;height:96px;margin:10px 0 0;position:relative; }
  .mobile { display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;width:100%; }
  .mobile button { width:72px;height:72px;border:2px solid #8489a3;border-bottom:5px solid #151a32;border-radius:17px;font-size:28px;background:#353c5d;box-shadow:0 4px #101329;touch-action:none; }
  .mobile #jump { width:86px;height:80px;background:#b8664c;border-color:#f8b27b;color:#fff0c9;font-size:32px; }
  .mobile .jump-label { display:block;font-size:10px;letter-spacing:.8px; }
  .card { width:min(510px,92%);max-height:calc(100% - 18px);padding:20px 16px;border-width:4px;box-shadow:5px 5px #202139; }
  .card h2 { font-size:clamp(22px,6vw,30px);margin:12px 0; }.card p,.letter-open #message { font-size:16px;line-height:1.5; }.card .small{font-size:10px;letter-spacing:1px;}
  .btn,.letter-open .btn { font-size:14px;min-height:48px;padding:13px 18px; }
  .finale-controls button { min-height:44px;font-size:14px;background:#171a38eb; }
  .credits-roll { left:8%;width:84%;font-size:22px; }
}
@media (pointer:coarse) and (orientation:landscape), (max-width:900px) and (orientation:landscape) {
  .bottom{height:78px;margin-top:6px;}.mobile button{height:64px;width:76px;border-radius:14px;}.mobile #jump{height:68px;width:92px;}
  .card { padding:12px 22px;max-width:540px; }.card h2{font-size:24px;margin:6px 0;}.card p{margin:6px 0 12px;}.hud{font-size:10px;}
}

@media (max-width:420px) { .mobile button{width:54px;height:64px;}.mobile #jump{width:70px;height:72px;}.mobile .directions{gap:7px;} }

canvas { touch-action:none; }
.overlay,.card { touch-action:pan-y; }


/* iPhone: долгое удержание кнопок не вызывает лупу, выделение текста и меню. */
@media (pointer:coarse) {
  body { -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%; }
  .card,.card * { -webkit-user-select:text;user-select:text; }
  .mobile button,.game-ui button { -webkit-touch-callout:none; }
}

/* Длинные письма: текст по левому краю, кнопка «Продолжить» всегда видна внизу карточки. */
.letter-open #message { text-align:left; }
.letter-open .card { padding-bottom:0; }
.letter-open .card .btn { position:sticky;bottom:0;margin-bottom:14px;box-shadow:0 4px #6d2940,0 -14px 14px #fff6df; }
@media (pointer:coarse), (max-width:900px) {
  .letter-open #message { font-size:15px;line-height:1.45;margin:4px auto 12px; }
  .letter-open .card h2 { font-size:22px;margin:6px 0; }
}

/* Пиксельная почтовая марка в правом верхнем углу письма. */
.card { position:relative; }
.letter-stamp { position:absolute;top:12px;right:12px;width:86px;padding:9px 7px 5px;background:#fffaf0;
  transform:rotate(7deg);box-shadow:2px 3px 0 #59403f55;text-align:center;pointer-events:none;z-index:1;
  /* Зубчатый край марки из пиксельных квадратиков. */
  -webkit-mask:conic-gradient(from 90deg at 3px 3px,#0000 25%,#000 0) -1.5px -1.5px/6px 6px,linear-gradient(#000 0 0) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat;
  mask:conic-gradient(from 90deg at 3px 3px,#0000 25%,#000 0) -1.5px -1.5px/6px 6px,linear-gradient(#000 0 0) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat; }
.letter-stamp[hidden] { display:none; }
.letter-stamp:before { content:'';position:absolute;inset:6px;border:2px solid #ff4911; }
.letter-stamp canvas { display:block;width:66px;height:33px;margin:2px auto 1px;image-rendering:pixelated;image-rendering:crisp-edges; }
.letter-stamp span { display:block;font:900 9px/1.2 'Courier New',monospace;letter-spacing:1px;color:#ff4911; }
.letter-open .card:has(.letter-stamp:not([hidden])) .small,.letter-open .card:has(.letter-stamp:not([hidden])) h2 { padding-right:84px;padding-left:84px; }
@media (pointer:coarse), (max-width:900px) {
  .letter-stamp { width:66px;top:8px;right:8px;padding:7px 5px 4px; }
  .letter-stamp canvas { width:50px;height:25px; }
  .letter-open .card:has(.letter-stamp:not([hidden])) .small,.letter-open .card:has(.letter-stamp:not([hidden])) h2 { padding-left:0;padding-right:62px;text-align:left; }
}

/* Счётчик писем открывает почтовый ящик с найденными письмами. */
#letters-hud { pointer-events:auto;cursor:pointer; }
#letters-hud:active { transform:translateY(2px); }
.mailbox { display:grid;gap:7px;max-height:min(46vh,330px);overflow:auto;margin:0 0 16px;padding:2px;text-align:left; }
.mailbox[hidden] { display:none; }
.mailbox button { border:2px solid #593e45;background:#fff8e6;color:#31273d;padding:10px 12px;font:800 13px 'Courier New',monospace;text-align:left;cursor:pointer;box-shadow:2px 2px 0 #d8b98a; }
.mailbox button:active { transform:translate(2px,2px);box-shadow:none; }
.restart { display:block;margin:14px auto 0;border:0;background:none;color:#8a6a62;font:800 12px system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:8px; }
.restart[hidden] { display:none; }

/* Карточки и письма появляются с лёгким подпрыгиванием. */
.finale-end { white-space:pre-line;line-height:1.7; }
@keyframes card-pop { from { transform:translateY(26px) scale(.86) rotate(-2deg);opacity:0; } 70% { transform:translateY(-4px) scale(1.03) rotate(.4deg);opacity:1; } to { transform:none; } }
@media (prefers-reduced-motion: no-preference) { .overlay:not(.hidden) .card { animation:card-pop .26s ease-out; } }

/* Плашка не закрывает мини-карту внизу экрана. */
.pickup-toast:not(.meme-toast) { bottom:30px; }


/* Кнопка под письмом и под списком писем закреплена внизу и не просвечивает текстом. */
.letter-open .card .btn,.mailbox-open .card .btn { position:sticky;bottom:0;display:block;width:100%;margin-bottom:14px;
  box-shadow:0 4px #6d2940,0 18px 0 #fff6df,0 -10px 8px #fff6df; }
.mailbox-open .card { background:#fff6df;padding-bottom:0; }
.mailbox-open .card .btn { box-shadow:0 5px #a3443c,0 19px 0 #fff6df,0 -10px 8px #fff6df; }
/* Телефон: письмо и почтовый ящик занимают весь экран, а не только игровое поле. */
@media (pointer:coarse), (max-width:900px) {
  .overlay.letter-open,.overlay.mailbox-open { position:fixed;inset:0;z-index:30;background:rgba(15,20,42,.78);
    padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .letter-open .card,.mailbox-open .card { width:100%;max-width:560px;max-height:100%; }
  .mailbox-open .mailbox { max-height:none;overflow:visible; }
}

/* Телефон горизонтально: игра занимает весь экран, кнопки лежат поверх игрового поля. */
@media (pointer:coarse) and (orientation:landscape), (max-width:900px) and (orientation:landscape) {
  .wrap { position:relative;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); }
  .bottom { position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));
    height:auto;margin:0;pointer-events:none;z-index:5; }
  .mobile button { pointer-events:auto;opacity:.8; }
  /* Пока открыто письмо, пауза или титры, кнопки не закрывают окно. */
  .frame:has(.overlay:not(.hidden)) ~ .bottom,.frame:has(.finale:not([hidden])) ~ .bottom { visibility:hidden; }
}

/* Кружочки и голосовые в письмах. */
.letter-media { margin:8px auto 12px;max-width:320px;text-align:center; }
.letter-media[hidden] { display:none; }
.media-round { position:relative;width:min(240px,62vw);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;
  border:4px solid #593e45;box-shadow:0 0 0 4px #f1b64f;background:#2a2238; }
.media-round video { display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04);cursor:pointer; }
.media-round .media-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); }
.letter-media.playing .media-round .media-play { opacity:0;pointer-events:none; }
.media-play { width:64px;height:64px;border:3px solid #fff3d2;border-radius:50%;background:#9f394df0;color:#fff3d2;
  font:900 24px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px #6d2940;transition:opacity .2s; }
.media-voice { display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff8e6;border:3px solid #593e45;box-shadow:4px 4px 0 #d8b98a; }
.media-voice .media-play { flex:none;width:52px;height:52px;font-size:20px; }
.media-wave { flex:1;display:flex;align-items:center;gap:3px;height:42px; }
.media-wave b { flex:1;background:#c08a9d;min-width:3px; }
.letter-media.playing .media-wave b { background:#9f394d;animation:wave-bounce .8s ease-in-out infinite alternate; }
.letter-media.playing .media-wave b:nth-child(3n) { animation-delay:.2s; } .letter-media.playing .media-wave b:nth-child(3n+1) { animation-delay:.45s; }
@keyframes wave-bounce { to { transform:scaleY(.45); } }
.media-bar { display:block;height:8px;margin:12px 4px 4px;background:#e7d3b4;border:2px solid #593e45;cursor:pointer; }
.media-bar i { display:block;height:100%;width:0;background:#f1b64f; }
.media-time { display:block;font:800 12px 'Courier New',monospace;color:#7b5a55;min-height:15px; }
.letter-open #message:has(+ *) { margin-bottom:12px; }


/* Без шапки и подвала: игра сразу занимает экран, всё управление внутри окна. */
html,body { height:100%; }
body { overflow:hidden; }
.wrap { max-width:none;height:100vh;height:100dvh;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.frame { width:min(100%,calc((100vh - 36px)*1000/600));width:min(100%,calc((100dvh - 36px)*1000/600));flex:none; }
.bottom { display:none; }

/* Иконки в правом верхнем углу: пауза, звук, правила, весь экран. */
.hud-side { display:flex;flex-direction:column;align-items:flex-end;gap:8px;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important; }
.hud-side .hud-right { background:#202338d4;border:2px solid #e0c792;padding:7px 12px;box-shadow:3px 3px #16192f; }
.toolbar { display:flex;gap:6px;pointer-events:auto;position:relative;z-index:20; }
.tool { width:40px;height:40px;padding:0;display:grid;place-items:center;background:#24253ce6;color:#fff0c7;border:2px solid #e0c792;border-radius:0;box-shadow:3px 3px #16192f;cursor:pointer; }
.tool:hover { background:#353c5d; }
.tool:active { transform:translate(2px,2px);box-shadow:1px 1px #16192f; }
.tool[hidden] { display:none; }
#sound .off,#sound.muted .on { display:none; }
#sound.muted .off { display:block; }
.info-open #message { white-space:pre-line;text-align:left;font-size:15px;line-height:1.55; }
@media (pointer:coarse), (max-width:900px) {
  .wrap { align-items:stretch;justify-content:flex-start; }
  .frame { width:100%;flex:1; }
  .bottom { display:flex; }
  .tool { width:36px;height:36px; }
  .tool svg { width:18px;height:18px; }
  .toolbar { gap:5px; }
  .hud-side { gap:6px; }
  .hud-side .hud-right { padding:5px 7px;border-width:1px; }
  #world { overflow-wrap:anywhere; }
}
@media (max-width:360px) {
  .hud { padding:8px 6px;font-size:10px;gap:0; }
  .hud>div { padding:5px 6px; }
  .hud .hud-right { font-size:9px; }
  .hud .count,#lives { font-size:13px; }
  .tool { width:32px;height:32px; }
  .tool svg { width:16px;height:16px; }
  .toolbar { gap:4px; }
}

/* Телефон: плашки промокодов и мемов вдвое компактнее. */
@media (pointer:coarse), (max-width:900px) {
  .pickup-toast.meme-toast { max-width:min(170px,52%);padding:4px 6px;font-size:10px;line-height:1.25;border-width:1px;box-shadow:2px 2px #21192c; }
  .pickup-toast.meme-toast strong { font-size:10px;margin-bottom:1px; }
}

/* Во время титров кнопки управления не нужны. */
.frame:has(.finale:not([hidden])) ~ .bottom { visibility:hidden; }

/* Телефон: плашка области ровно под иконками, название в одну строку по центру. */
@media (pointer:coarse), (max-width:900px) {
  .hud .hud-side { max-width:none;align-items:stretch; }
  .hud-side .hud-right { max-width:none;text-align:center;font-size:10px;line-height:1.5;letter-spacing:0; }
  .hud-side .hud-right br { display:none; }
  #world { display:block;white-space:nowrap;overflow-wrap:normal; }
  .hud-side #lives { display:block;font-size:13px;letter-spacing:2px; }
}
@media (max-width:360px) { .hud-side .hud-right { font-size:9px; } }

/* Финальный автомат удачи. */
.final-slots { position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:rgba(15,20,42,.55);pointer-events:auto;padding:10px; }
.final-slots[hidden] { display:none; }
.slots-card { width:min(440px,100%);max-height:100%;overflow:auto;background:#fff0ca;color:#29263c;text-align:center;padding:18px 20px;border:5px solid #593e45;box-shadow:inset 0 0 0 3px #f4c984,8px 8px 0 #202139;animation:card-pop .26s ease-out; }
.slots-card .small { font-size:10px;font-weight:900;letter-spacing:2px;color:#b66652; }
.slots-card h2 { font-family:'Courier New',monospace;font-size:clamp(20px,4vw,30px);margin:8px 0 12px; }
.slots-machine { position:relative;margin:0 auto;width:min(300px,100%);padding:12px 14px 16px;background:#9f394d;border:4px solid #3b2333;box-shadow:inset 0 -6px 0 #6d2940; }
.slots-sign { font:900 13px 'Courier New',monospace;letter-spacing:2px;color:#ffe3a0;background:#3b2333;padding:6px;margin-bottom:10px; }
.slots-window { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;background:#3b2333; }
.slots-reel { display:block;height:64px;line-height:64px;background:#fff8e6;border:3px solid #241d38;font:900 40px 'Courier New',monospace;color:#7b5a55;box-shadow:inset 0 6px 0 #e7d3b4,inset 0 -6px 0 #e7d3b4; }
.slots-reel.stopped,.final-slots.jackpot .slots-reel { color:#d6402f; }
.final-slots.jackpot .slots-reel { background:#fff3b0; }
.final-slots.jackpot .slots-machine { animation:slot-blink .3s steps(2) infinite; }
@keyframes slot-blink { 50% { box-shadow:inset 0 -6px 0 #6d2940,0 0 0 4px #ffe382; } }
.slots-prize { margin:14px 0 2px;font:900 clamp(30px,8vw,46px)/1.1 'Courier New',monospace;color:#d6402f;text-shadow:3px 3px 0 #f1b64f; }
.slots-prize[hidden] { display:none; }
.final-slots.jackpot .slots-prize { animation:prize-pop .6s ease-out; }
@keyframes prize-pop { from { transform:scale(.3);opacity:0; } 70% { transform:scale(1.15); } to { transform:none; } }
.slots-hint { min-height:22px;margin:12px 0 4px;font-size:15px;line-height:1.4; }
.slots-coins { font:800 12px 'Courier New',monospace;color:#8a6a62;margin-bottom:14px;min-height:15px; }
.slots-insert { min-width:220px;font-size:13px; }
.slots-insert:disabled { opacity:.6;cursor:default;transform:none; }
.final-slots.jackpot .slots-insert { background:#d6402f;box-shadow:0 5px #8c2a20;font-size:14px; }
.slots-bet { display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:center;max-width:300px;margin:6px auto 4px; }
.slots-bet[hidden] { display:none; }
.bet-step { height:52px;border:3px solid #593e45;background:#fff8e6;color:#593e45;font:900 28px/1 'Courier New',monospace;cursor:pointer;box-shadow:3px 3px 0 #d8b98a;touch-action:manipulation; }
.bet-step:active { transform:translate(2px,2px);box-shadow:1px 1px 0 #d8b98a; }
.bet-box { background:#3b2333;color:#ffe3a0;padding:6px 4px;border:3px solid #241d38; }
.bet-value { display:block;font:900 32px/1 'Courier New',monospace; }
.bet-label { display:block;font:800 10px 'Courier New',monospace;letter-spacing:2px;color:#f1b64f; }
#bet-range { grid-column:1/-1;width:100%;accent-color:#9f394d;height:28px; }
@media (prefers-reduced-motion: reduce) { .final-slots.jackpot .slots-machine,.final-slots.jackpot .slots-prize { animation:none; } }
@media (max-height:620px) { .slots-reel { height:48px;line-height:48px;font-size:30px; } .slots-card { padding:12px 14px; } .slots-card h2 { margin:4px 0 8px; } }

/* Марка: подпись «ПОЧТА» стоит внутри рамки и не срезается зубчатым краем; марка не вылезает за край письма. */
.letter-stamp { padding:10px 7px 13px; }
.letter-stamp:before { inset:5px; }
.letter-stamp span { line-height:1;margin-top:1px; }
@media (pointer:coarse), (max-width:900px) {
  .letter-stamp { width:70px;top:14px;right:14px;padding:9px 6px 12px;transform:rotate(5deg); }
  .letter-stamp canvas { width:52px;height:26px;margin:1px auto 2px; }
  .letter-stamp span { font-size:8px;letter-spacing:.5px; }
  .letter-open .card:has(.letter-stamp:not([hidden])) .small,.letter-open .card:has(.letter-stamp:not([hidden])) h2 { padding-right:78px; }
}

/* Барабаны-ленты: символы едут сверху вниз, по краям окна затемнение как у цилиндра. */
.slots-reel { --reel-h:58px;position:relative;overflow:hidden;padding:0;line-height:normal; }
.reel-strip { position:absolute;left:0;right:0;top:0;transform:translateY(calc(var(--reel-y,0) * var(--reel-h)));will-change:transform; }
.reel-strip span { display:flex;align-items:center;justify-content:center;height:var(--reel-h);padding-top:.31em;box-sizing:border-box;line-height:1; }
.slots-reel::after { content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#3b233366,transparent 26%,transparent 74%,#3b233366); }
.final-slots.suspense .slots-reel.stopped { animation:seven-pulse .7s ease-in-out infinite alternate; }
@keyframes seven-pulse { to { background:#fff3b0; } }
.final-slots.suspense .slots-machine { animation:machine-hum .9s ease-in-out infinite alternate; }
@keyframes machine-hum { to { box-shadow:inset 0 -6px 0 #6d2940,0 0 0 3px #ffe38288; } }
@media (max-height:620px) { .slots-reel { --reel-h:42px; } }
@media (prefers-reduced-motion: reduce) { .final-slots.suspense .slots-reel.stopped,.final-slots.suspense .slots-machine { animation:none; } }