@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P.ttf") format("truetype");
  font-display: swap;
}
:root {
  --navy: #1B1F4B; --lavender: #8E7CC3; --mint: #9EE7C8; --pink: #FF9EC7; --pink-dark: #C2568F;
  --cream: #FFF6E5; --yellow: #FFD447; --gold: #B8860B; --grass: #5DBB63; --grass-dark: #2E7A36;
  --black: #000; --white: #fff; --px: 4px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* иначе display:flex у .focus перебивает hidden */
html, body { margin: 0; }
body {
  font-family: "Press Start 2P", "Courier New", monospace;
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: none;
}
img { image-rendering: pixelated; }

/* Коробка в стиле RPG-диалога: толстая обводка + жёсткая тень без размытия */
.px-box {
  background: var(--white);
  border: var(--px) solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
}

.px-btn {
  display: block; width: 100%; min-height: 64px; margin-top: 16px;
  font: inherit; font-size: 14px; line-height: 1.4;
  border: var(--px) solid var(--black); border-radius: 0;
  color: var(--white); text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.px-btn:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--black) !important; }
.px-btn:disabled { opacity: .6; cursor: default; transform: none; }
.px-btn-pink { background: var(--pink); box-shadow: 6px 6px 0 var(--pink-dark); }
.px-btn-mint { background: var(--grass); box-shadow: 6px 6px 0 var(--grass-dark); }

/* Бабл с пиксельным хвостом вниз-влево. Хвост нарисован box-shadow по 8px «пикселям». */
.bubble { position: relative; }
.bubble::after {
  content: ""; position: absolute; left: 40px; bottom: -8px; width: 8px; height: 8px; background: var(--black);
  box-shadow:
    8px 0 0 var(--white), 16px 0 0 var(--white), 24px 0 0 var(--white), 32px 0 0 var(--black),
    0 8px 0 var(--black), 8px 8px 0 var(--white), 16px 8px 0 var(--white), 24px 8px 0 var(--black),
    0 16px 0 var(--black), 8px 16px 0 var(--white), 16px 16px 0 var(--black),
    0 24px 0 var(--black), 8px 24px 0 var(--black);
}
.bubble-name { color: var(--gold); }
.bubble-text { color: var(--black); word-wrap: break-word; overflow-wrap: anywhere; }
.sticker-emoji { display: inline-block; line-height: 1; }