/* Шрифты лежат рядом с приложением — никаких запросов к сторонним сайтам */
  @font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
  @font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
  @font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
  @font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family: Lora; font-weight: 500; font-display: swap; src: url(fonts/lora-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
  @font-face { font-family: Lora; font-weight: 500; font-display: swap; src: url(fonts/lora-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family: Lora; font-weight: 700; font-display: swap; src: url(fonts/lora-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
  @font-face { font-family: Lora; font-weight: 700; font-display: swap; src: url(fonts/lora-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

  :root {
    --bg: #1E1B2E; --card: #2A263D; --card2: #332E49; --line: #3A3550; --ink: #F3EEE3;
    --muted: #B9B1A2; --accent: #E9A23B; --good: #7FD1A8; --bad: #E26D5C; --night: #0F1A33; --moon: #8EA8FF;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
  body { min-height: 100vh; transition: background .4s; }
  body.is-night { background: var(--night); }
  main { padding: 16px 16px 104px; max-width: 560px; margin: 0 auto; }
  h1 { margin: 0 0 14px; font-family: Lora, serif; font-size: 26px; font-weight: 700; }
  h2 { margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--accent); text-transform: uppercase; }
  p { margin: 0; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .chip { padding: 6px 10px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
  .card { background: var(--card); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .card.hero { background: var(--accent); color: var(--bg); }
  .card.hero .sub { color: #3a2a12; }
  .title { font-family: Lora, serif; font-size: 18px; font-weight: 700; }
  .sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
  .meta { font-size: 12px; color: var(--muted); }
  .tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--bg); white-space: nowrap; }
  .tag.soon { background: transparent; border: 1px solid var(--muted); color: var(--ink); }
  .tag.done { background: transparent; border: 1px solid var(--good); color: var(--good); }
  .story { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
  .btn { min-height: 48px; border: none; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; width: 100%; cursor: pointer; padding: 0 14px; }
  .btn.primary { background: var(--accent); color: var(--bg); }
  .btn.light { background: var(--ink); color: var(--bg); }
  .btn.ghost { background: var(--card); color: var(--ink); }
  .btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
  .btn:disabled { opacity: .45; }
  .btns { display: flex; gap: 8px; margin-top: 10px; }
  .btns.roomexit { flex-direction: column; margin-top: 18px; }
  .btns .btn { flex: 1; }
  .head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .head h1 { margin: 0 0 2px; }
  .avatar { width: 60px; height: 60px; border-radius: 50%; background: #7C6BB0; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }
  .bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
  .bar > div { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { background: var(--card); border-radius: 12px; padding: 10px; }
  .stat b { display: block; font-size: 20px; }
  .stat span { font-size: 11px; color: var(--muted); }
  .badges { display: flex; flex-wrap: wrap; gap: 6px; }
  .badge { padding: 6px 10px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 600; }
  .badge.off { opacity: .45; }
  .card.ending { border-left: 3px solid var(--accent); }
  .card.ending.locked { border-left-color: var(--line); opacity: .7; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--card); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
  .tabs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tabs button { min-height: 40px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .tabs button[aria-selected="true"] { background: var(--accent); color: var(--bg); font-weight: 700; }
  .rank { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-bottom: 1px solid var(--line); }
  .rank .n { width: 26px; font-weight: 700; color: var(--muted); }
  .rank .n.top { color: var(--accent); }
  .rank .who { flex: 1; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank .pts { font-size: 14px; color: var(--muted); }
  .rank.me { background: var(--accent); color: var(--bg); border-radius: 10px; border: none; margin: 4px 0; }
  .rank.me .n, .rank.me .pts { color: var(--bg); font-weight: 700; }
  .empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }

  /* --- игра --- */
  .gamehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
  .gamehead .where { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gamehead .story-name { font-family: Lora, serif; font-size: 17px; font-weight: 700; }
  .rescue { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
  .rescue .cells { display: flex; gap: 4px; }
  .rescue .cell { width: 22px; height: 8px; border-radius: 3px; background: var(--line); }
  .rescue .cell.on { background: var(--good); }
  .role { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; font-weight: 600; border: none; color: var(--ink); width: 100%; font-family: inherit; cursor: pointer; text-align: left; }
  .role.traitor { background: #4A1F25; }
  .role .hint { font-size: 12px; color: var(--muted); font-weight: 500; }
  .chapter { background: var(--card); border-radius: 18px; overflow: hidden; margin-bottom: 12px; }
  .chapter .cover { background: linear-gradient(135deg, #2F2946, #1E1B2E); padding: 18px 16px 14px; border-bottom: 3px solid var(--accent); }
  .chapter .label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }
  .chapter .ctitle { font-family: Lora, serif; font-size: 26px; font-weight: 700; margin-top: 4px; }
  .chapter .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
  .chapter .intro { font-family: Lora, serif; font-size: 16px; line-height: 1.55; font-weight: 500; }
  .chapter .event { font-size: 14px; color: var(--muted); font-style: italic; border-left: 3px solid var(--line); padding-left: 10px; line-height: 1.45; }
  .question { font-size: 17px; font-weight: 700; }
  .opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; background: var(--card2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; margin-bottom: 8px; }
  .opt .fill { position: absolute; inset: 0 auto 0 0; background: rgba(233, 162, 59, .14); transition: width .3s; }
  .opt .num { position: relative; width: 28px; height: 28px; border-radius: 8px; background: var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
  .opt .lbl { position: relative; flex: 1; }
  .opt .cnt { position: relative; font-weight: 700; color: var(--muted); }
  .opt.mine { border-color: var(--accent); }
  .opt.mine .num { background: var(--accent); color: var(--bg); }
  .opt:disabled { cursor: default; }
  .status { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); margin: 4px 2px 10px; }
  .timer { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  .banner { border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45; margin-bottom: 12px; background: var(--card); }
  .banner.warn { background: #4A3A1A; }
  .night { text-align: center; padding: 26px 16px; background: linear-gradient(180deg, #16244A, #0F1A33); border-radius: 18px; margin-bottom: 12px; }
  .night .moon { font-size: 44px; }
  .night .ttl { font-family: Lora, serif; font-size: 28px; font-weight: 700; color: #DCE4FF; margin-top: 6px; }
  .night .sub { color: #A9B6DD; margin-top: 6px; }
  .night .decided { margin-top: 14px; display: inline-block; background: rgba(142, 168, 255, .15); color: #DCE4FF; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; }
  .nbtn { display: block; width: 100%; min-height: 56px; border-radius: 14px; border: none; font: inherit; font-weight: 700; font-size: 15px; margin-bottom: 8px; cursor: pointer; color: #fff; }
  .nbtn.sab { background: #B4433A; }
  .nbtn.frame { background: #6B3FA0; }
  .nbtn.sleep { background: #2A3A66; }
  .nbtn small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
  .result { border-radius: 18px; padding: 16px; margin-bottom: 12px; }
  .result.ok { background: #1F3A2E; }
  .result.sab { background: #4A1F25; }
  .result .rt { font-family: Lora, serif; font-size: 22px; font-weight: 700; }
  .result .rtext { font-family: Lora, serif; font-size: 15px; line-height: 1.5; margin-top: 8px; }
  .clue { margin-top: 12px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
  .clue b { color: var(--accent); }
  .counts { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.6; }
  .person { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 2px solid transparent; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; margin-bottom: 8px; }
  .person .pa { width: 36px; height: 36px; border-radius: 50%; background: #7C6BB0; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
  .person .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .person .cnt { font-weight: 700; color: var(--muted); }
  .person.mine { border-color: var(--bad); }
  .person:disabled { opacity: .5; cursor: default; }
  .players { display: flex; flex-wrap: wrap; gap: 6px; }
  .final { border-radius: 18px; padding: 22px 16px; text-align: center; margin-bottom: 12px; }
  .final.caught { background: linear-gradient(180deg, #24523D, #1F3A2E); }
  .final.escaped { background: linear-gradient(180deg, #4A2630, #2E1B21); }
  .card.whocard.picked { border-color: #FFD27A; box-shadow: 0 0 0 1px #FFD27A inset; }
  button.card.whocard { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; border: 1px solid var(--line); }
  button.card.whocard.picked { border-color: #FFD27A; box-shadow: 0 0 0 1px #FFD27A inset; background: rgba(255,210,122,.08); }
  .final.escape { background: linear-gradient(180deg, #1F4466, #18304A); }
  .final.stranded { background: linear-gradient(180deg, #5A2128, #3A1A20); }
  .final .big { font-size: 44px; }
  .final .ft { font-family: Lora, serif; font-size: 28px; font-weight: 700; margin-top: 6px; }
  .final .ftext { font-family: Lora, serif; font-size: 15px; line-height: 1.5; margin-top: 10px; opacity: .9; }
  .hist { font-size: 13px; line-height: 1.5; color: var(--muted); }
  .hist b { color: var(--ink); }
  .controls { display: flex; gap: 8px; margin-top: 6px; }
  .controls .btn { flex: 1; min-height: 44px; font-size: 14px; }
  .toast { position: fixed; left: 16px; right: 16px; bottom: 96px; max-width: 528px; margin: 0 auto; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: all .25s; pointer-events: none; z-index: 20; }
  .toast.show { opacity: 1; transform: none; }
  nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 4px calc(12px + env(safe-area-inset-bottom)); z-index: 10; }
  body.is-night nav { background: var(--night); }
  nav button { position: relative; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
  nav button[aria-current="page"] { color: var(--accent); }
  nav svg { width: 22px; height: 22px; }
  nav .dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad); display: none; }
  nav .dot.on { display: block; }

  /* --- одиночные истории --- */
  .wallet { display: flex; gap: 6px; }
  .wchip { padding: 6px 10px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .wchip.dark { background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); }
  .daily { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 0 16px; margin-bottom: 12px; border: 1px dashed var(--accent); border-radius: 14px; background: rgba(233,162,59,.08); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .daily b { color: #FF8FB4; }
  .scard { background: var(--card); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
  /* кинокарточка истории */
  .poster { position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 16px; background: #0b0a12; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
  .poster .reel { position: relative; height: 430px; overflow: hidden; }
  .poster .shot { position: absolute; inset: -6%; opacity: 0; transition: opacity 1.4s ease; background-size: cover; background-position: center; }
  .poster .shot svg { width: 100%; height: 100%; display: block; }
  .poster .shot.photo svg { display: none; }
  .poster .shot.on { opacity: 1; animation: kenburns 9s ease-out forwards; }
  .poster .shot:nth-child(even).on { animation-name: kenburns2; }
  @keyframes kenburns { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1) translate(0, 0); } }
  @keyframes kenburns2 { from { transform: scale(1) translate(-2%, 0); } to { transform: scale(1.12) translate(1%, -1%); } }
  .poster .hero-sprite { position: absolute; right: -6%; bottom: 0; height: 88%; pointer-events: none; filter: drop-shadow(0 0 24px rgba(0,0,0,.6)); animation: rise .9s ease both; }
  .poster .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,18,.15) 0%, rgba(11,10,18,0) 30%, rgba(11,10,18,.75) 62%, #0b0a12 96%); }
  .poster .ptop { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
  .poster .ptag { padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
  .poster .ptag.new { background: var(--accent); color: #1E1B2E; }
  .poster .pinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 8px; }
  .poster .ptitle { font-family: Lora, serif; font-size: 32px; line-height: 1.05; font-weight: 700; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
  .poster .pline { font-family: Lora, serif; font-style: italic; color: #F3D9A8; font-size: 15px; }
  .poster .pmeta { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; }
  .poster .pteaser { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
  .poster .pbody { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
  .castrow { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .castrow::-webkit-scrollbar { display: none; }
  .castm { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; flex: none; text-align: center; }
  .castm .ava { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-family: Lora, serif; font-weight: 700; font-size: 22px; color: #1E1B2E; border: 2px solid rgba(255,255,255,.15); background-size: 180%; background-position: 50% 8%; }
  .castm b { color: #fff; font-size: 12px; }
  .castm span { color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.2; }
  .castm .ava.unknown { color: rgba(255,255,255,.55); border-style: dashed; font-size: 24px; }
  .castm.unknown b { color: rgba(255,255,255,.55); letter-spacing: 2px; }
  .castnote { color: rgba(255,255,255,.45); font-size: 11px; margin-top: -2px; }
  .pprog { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; }
  .pprog .bar { flex: 1; }
  /* читалка: персонажи, погода, звук, прогресс */
  .fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #dfe9ff; opacity: 0; }
  .cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
  .sprite { position: absolute; bottom: 0; left: 50%; height: min(74vh, 760px); max-width: 120vw; opacity: 0; transform: translateX(-30%) translateY(24px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease; filter: drop-shadow(0 0 30px rgba(0,0,0,.55)); }
  .sprite.on { opacity: 1; transform: translateX(-42%) translateY(0); }
  .sprite.left.on { transform: translateX(-62%) translateY(0); }
  .sprite.dim { filter: brightness(.55) drop-shadow(0 0 30px rgba(0,0,0,.55)); }
  .sprite { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .sprite.on.front { transform: translateX(-24%) translateY(0); z-index: 2; }
  .sprite.on.back { transform: translateX(-80%) translateY(3%) scale(.9); transform-origin: 50% 100%; z-index: 1; }
  .sprite.front.breath, .sprite.back.breath { animation: none; }
  .blackout { position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; transition: opacity .55s ease;
              display: grid; place-items: center; }
  .blackout.on { opacity: 1; pointer-events: auto; }
  .blackout span { font-family: Lora, serif; font-style: italic; font-size: 26px; color: rgba(243,238,227,.85); letter-spacing: 1px;
                   opacity: 0; transform: translateY(6px); transition: opacity .6s ease .25s, transform .6s ease .25s; }
  .blackout.on span { opacity: 1; transform: none; }
  .sprite.breath { animation: breath 5s ease-in-out infinite; }
  @keyframes breath { 50% { transform: translateX(-42%) translateY(-4px) scale(1.006); } }
  .nametag .mini { display: inline-block; width: 22px; height: 22px; margin: -4px 8px -6px -6px; border-radius: 50%; vertical-align: middle; background: rgba(0,0,0,.18); text-align: center; line-height: 22px; font-size: 12px; }
  .rprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
  .rprog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #FF8FB4); border-radius: 0 3px 3px 0; transition: width .6s ease; }
  .rpct { color: #fff; opacity: .8; font-size: 12px; font-weight: 700; flex-shrink: 0; }
  /* сердца отношений, тряска, прыжки, шёпот */
  .relpop { position: absolute; left: 50%; top: 22%; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; color: #1E1B2E; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; animation: relpop 2.6s cubic-bezier(.2,.8,.2,1) forwards; }
  .relpop .h { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.55); font-size: 15px; background-size: 180%; background-position: 50% 8%; }
  .relpop.neg { filter: saturate(.4); }
  @keyframes relpop { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.85); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, -10px); } 100% { opacity: 0; transform: translate(-50%, -40px); } }
  .reader.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
  @keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }
  .sprite.jump { animation: hop .45s ease; }
  @keyframes hop { 0%, 100% { transform: translateX(-42%) translateY(0); } 35% { transform: translateX(-42%) translateY(-22px); } 60% { transform: translateX(-42%) translateY(3px); } }
  .speech.whisper .txt { font-style: italic; opacity: .82; letter-spacing: .2px; }
  .speech.shout .txt { font-weight: 700; }
  .bonds { display: flex; flex-direction: column; gap: 8px; }
  .bond { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .bond .ava { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #1E1B2E; font-weight: 700; background-size: 180%; background-position: 50% 8%; }
  .bond .nm { flex: 1; }
  .bond .hearts { color: #FF6F91; letter-spacing: 2px; font-size: 15px; }
  .bond .hearts i { color: rgba(255,255,255,.18); font-style: normal; }
  /* загадки и выбор на время */
  .puzzle { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding: 16px; border-radius: 18px; background: rgba(20,17,32,.94); border: 1px solid rgba(233,162,59,.35); animation: rise .35s ease; }
  .puzzle .ptitle2 { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--accent); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
  .puzzle .tries { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: 0; text-transform: none; }
  .puzzle .phint { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
  .puzzle .pfb { min-height: 18px; font-size: 13px; font-weight: 700; color: #FFB86B; text-align: center; }
  .puzzle.bad { animation: shake .45s; }
  .slots { display: flex; justify-content: center; gap: 10px; }
  .slot { width: 46px; height: 56px; border-radius: 12px; display: grid; place-items: center; font: 700 28px/1 "Courier New", monospace; color: #7CFFB2; background: #0c1410; border: 1px solid rgba(124,255,178,.25); text-shadow: 0 0 10px rgba(124,255,178,.6); }
  .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .key { min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: #fff; font: 600 20px/1 Inter, sans-serif; cursor: pointer; }
  .key.worn { background: rgba(124,255,178,.14); border-color: rgba(124,255,178,.4); }
  .key:active { transform: scale(.95); }
  .pbtns { display: flex; gap: 8px; }
  .pbtns .btn { flex: 1; }
  .dial { text-align: center; font: 700 34px/1 "Courier New", monospace; color: #FFD27A; text-shadow: 0 0 12px rgba(255,210,122,.5); }
  .dial small { font-size: 14px; color: rgba(255,255,255,.5); margin-left: 4px; }
  .meter { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 26px; }
  .meter i { width: 8px; border-radius: 2px; background: rgba(255,255,255,.12); }
  .meter i.on { background: #7CFFB2; box-shadow: 0 0 8px rgba(124,255,178,.6); }
  .tuner { width: 100%; accent-color: var(--accent); height: 34px; }
  .lampbtn { display: block; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); background: radial-gradient(circle at 50% 40%, #3a3346, #15121f); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .08s, background .08s; }
  .lampbtn.lit { background: radial-gradient(circle at 50% 40%, #fff8d6, #ffc94d); color: #1E1B2E; box-shadow: 0 0 60px 20px rgba(255,214,110,.55); }
  .morse { min-height: 30px; text-align: center; font: 700 26px/1 "Courier New", monospace; color: #FFD27A; letter-spacing: 6px; }
  .tbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 2px; }
  .tbar i { display: block; height: 100%; background: linear-gradient(90deg, #FF6F91, #E9A23B); transform-origin: left; }
  .tlabel { display: flex; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 700; opacity: .85; }
  /* подписка, колесо, меню читалки */
  .keepcard { flex-shrink: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #3b2a12, #1e1b2e 60%); border: 1px solid rgba(233,162,59,.5); }
  .keepcard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,120,.45), transparent 70%); }
  .keepcard .kt { font-family: Lora, serif; font-size: 20px; font-weight: 700; }
  .keepcard ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); }
  .keepcard .kp { color: #FFD27A; font-weight: 700; }
  .kbadge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(90deg, #E9A23B, #FFD27A); color: #1E1B2E; font-size: 11px; font-weight: 800; vertical-align: middle; }
  .card.wheelcard { display: flex; flex-direction: row; align-items: center; gap: 12px; }
  .wheelcard .wi { width: 44px; height: 44px; flex-shrink: 0; display: block; }
  .wheelcard .wi .disc { transform-origin: 22px 20px; animation: spin 6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .pacebox { margin-top: 10px; }
  .hello .panel { text-align: center; }
  .hello .hbig { font-size: 56px; margin: 6px 0 2px; }
  .hello .sub { text-align: left; line-height: 1.5; }
  .hdots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 12px; }
  .hdots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
  .hdots span.on { background: #FFD27A; width: 18px; border-radius: 4px; }
  .proflinks { display: flex; justify-content: center; gap: 18px; margin: 18px 0 6px; }
  .linkbtn { background: none; border: none; color: rgba(255,255,255,.55); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; }
  .codehand .clue { font-family: Lora, serif; font-size: 16px; line-height: 1.45; padding: 4px 0; }
  input.pinput.codein { font-size: 28px; letter-spacing: 12px; text-align: center; font-weight: 700; min-height: 60px; }
  .weekhero { background: linear-gradient(160deg, #3a2a52, #241d36); border: 1px solid rgba(255,210,122,.25); }
  .wkme { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; }
  .wkme b { display: block; font-family: Lora, serif; font-size: 26px; }
  .wkme span { color: rgba(255,255,255,.7); font-size: 14px; }
  .wkprize { font-weight: 800; font-size: 18px; color: #FFD27A; background: rgba(255,210,122,.14); padding: 8px 12px; border-radius: 12px; }
  .wkprizes { display: flex; flex-wrap: wrap; gap: 6px; }
  .wkprizes .badge.on { background: #FFD27A; color: #1E1B2E; }
  .wkhow { padding: 4px 0; font-size: 14px; }
  .wkhow b { color: #FFD27A; }
  input.pinput { width: 100%; min-height: 48px; margin: 8px 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
  .factrow input.pinput { margin: 0; }
  .pacebox .waiting { font-size: 13px; color: var(--muted, #9aa); margin: 0 0 6px; }
  .pacebox .controls { display: flex; flex-wrap: wrap; gap: 8px; }
  .pacebox .controls .btn { flex: 1 1 40%; }
  .gpick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; margin-top: 8px; border-radius: 14px;
           border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; }
  .gpick:active { transform: scale(.985); }
  .gpick .ge { font-size: 28px; width: 36px; text-align: center; flex-shrink: 0; }
  .gpick .gb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gpick .gb b { font-size: 15px; }
  .gpick .gb span { font-size: 12.5px; opacity: .72; line-height: 1.35; }
  .gpick .gn { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(255,210,122,.16); color: #FFD27A; flex-shrink: 0; }
  .ghead { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 14px 0 0; }
  .dossier .kick { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #E9C27A; }
  .dossier .dt { font-family: Lora, serif; font-size: 22px; margin: 4px 0 10px; }
  .dossier .pg { margin: 0 0 12px; }
  .dossier .pg b { display: block; font-size: 13px; color: #E9C27A; margin-bottom: 3px; }
  .dossier .pg p { margin: 0; font-family: Lora, serif; font-size: 15px; line-height: 1.5; }
  .dossier .facts { border-left: 3px solid #E9C27A; padding: 6px 0 6px 12px; margin: 6px 0 14px; font-size: 14px; line-height: 1.55; }
  .dossier .panel { max-height: 82vh; overflow-y: auto; background: linear-gradient(180deg, #2a2219, #1d1813); }
  .mates { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; text-align: left; }
  .mate { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
  .mate .dot { width: 9px; height: 9px; border-radius: 50%; background: #666; flex-shrink: 0; }
  .mate .dot.on { background: #5fd38a; box-shadow: 0 0 6px #5fd38a; }
  .mate .mn { flex: 1; font-size: 14px; }
  .mate .btn { padding: 6px 12px; font-size: 13px; width: auto; margin: 0; }
  .pgroup { padding: 12px; }
  .pgroup .gt { font-family: Lora, serif; font-size: 17px; }
  .pgroup .gnames { font-size: 13px; opacity: .75; margin-top: 3px; }
  .pgroup.hit { border-color: rgba(95,211,138,.45); background: rgba(95,211,138,.08); }
  .factrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .factrow input { flex: 1; }
  .liebtn { flex-shrink: 0; width: auto !important; padding: 8px 10px !important; margin: 0 !important; font-size: 13px !important; }
  .liebtn.on { background: #E8697A !important; color: #fff !important; border-color: #E8697A !important; }
  .factpick { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
              background: rgba(255,255,255,.03); color: inherit; font: 15px/1.4 Lora, serif; cursor: pointer; }
  .factpick.on { border-color: #E8697A; background: rgba(232,105,122,.14); }
  .factpick.lie { border-color: #E8697A; background: rgba(232,105,122,.12); }
  .factpick.truth { opacity: .75; }
  div.factpick { display: flex; align-items: center; gap: 8px; }
  div.factpick .ft { flex: 1; }
  div.factpick .fl { flex-shrink: 0; font: 600 11px/1.2 Inter, sans-serif; padding: 3px 7px; border-radius: 99px; background: rgba(232,105,122,.25); color: #ffb3bd; }
  div.factpick .fl.you { background: rgba(255,210,122,.2); color: #FFD27A; }
  div.factpick.right { border-color: #5fd38a; background: rgba(95,211,138,.14); opacity: 1; }
  div.factpick.right .fl.you { background: rgba(95,211,138,.25); color: #8ff0b2; }
  div.factpick.wrong { border: 2px dashed #FFD27A; opacity: 1; }
  .verdict { font-weight: 600; font-size: 14px; margin-top: 8px; }
  .verdict.ok { color: #8ff0b2; }
  .verdict.bad { color: #ffb3bd; }
  .spyrole { text-align: center; padding: 16px; }
  .spyrole .big { font-size: 34px; }
  .spyrole .pl { font-family: Lora, serif; font-size: 22px; margin-top: 4px; }
  .optchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .optchips .pick { font-size: 13px; }
  .wheelwrap { position: relative; width: 280px; height: 280px; margin: 6px auto 0; }
  .wheelwrap svg { width: 100%; height: 100%; transition: transform 4.2s cubic-bezier(.12,.75,.08,1); }
  .wheelwrap .pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #FFD27A; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
  .rmenu { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; }
  .logline { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
  .logline b { display: block; font-size: 12px; margin-bottom: 2px; }
  .speedrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .speech.auto::after { content: "авто"; position: absolute; left: 16px; bottom: 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); opacity: .7; }
  /* альбом, характер, лестница, «спросить друга» */
  .album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .polaroid { background: #f3eee3; padding: 5px 5px 8px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 6px 14px rgba(0,0,0,.35); color: #1E1B2E; }
  .polaroid:nth-child(even) { transform: rotate(1.8deg); }
  .polaroid .ph { aspect-ratio: 3 / 4; background-size: cover; background-position: center; border-radius: 2px; background-color: #2a2540; }
  .polaroid.locked .ph { filter: grayscale(1) blur(6px) brightness(.45); }
  .polaroid span { display: block; margin-top: 5px; font-family: Lora, serif; font-size: 11px; line-height: 1.2; text-align: center; min-height: 26px; }
  .fatecard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #2b2147, #1E1B2E); border: 1px solid rgba(180,140,255,.35); }
  .fatecard .fe { font-size: 34px; }
  .fatecard .ft { font-family: Lora, serif; font-size: 22px; font-weight: 700; }
  .ladder { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .lstep { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .lstep .qbody { flex: 1; }
  .ladder .qbody { gap: 5px; }
  .ladder .bar { width: 100%; height: 6px; background: rgba(30,27,46,.18); }
  .ladder .bar div { background: #1E1B2E; }
  .ladder .qreward { color: #1E1B2E; opacity: .85; }
  .ladder .claim { background: #1E1B2E; color: #FFD27A; }
  .askfriend { align-self: center; margin-top: 4px; border: none; background: rgba(0,0,0,.4); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
  /* отзывы, поддержка, ивенты */
  .fbkinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stars { display: flex; gap: 6px; justify-content: center; font-size: 30px; }
  .stars button { border: none; background: none; cursor: pointer; filter: grayscale(1) opacity(.35); font-size: 30px; padding: 0 2px; }
  .stars button.on { filter: none; }
  .fbtext { width: 100%; min-height: 110px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
  .supportgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .supportgrid .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72px; gap: 2px; }
  .supportgrid .btn b { font-size: 18px; }
  .supportgrid .btn small { font-size: 11px; opacity: .8; font-weight: 500; }
  .sbadge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: #FFD27A; color: #1E1B2E; font-size: 11px; font-weight: 800; vertical-align: middle; }
  .eventbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(180,140,255,.25), rgba(233,162,59,.22)); border: 1px solid rgba(255,210,122,.35); font-size: 14px; }
  .eventbar b { display: block; }
  .eventbar .left { margin-left: auto; font-size: 12px; font-weight: 700; color: #FFD27A; white-space: nowrap; }
  .rsound { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0; }
  .scard .cover { height: 190px; position: relative; overflow: hidden; }
  .scard .cover svg { width: 100%; height: 100%; display: block; }
  .scard .sbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
  .sgenre { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
  .stitle { font-family: Lora, serif; font-size: 24px; font-weight: 700; }
  body.reading { overflow: hidden; }
  body.reading nav { display: none; }
  .reader { position: fixed; inset: 0; z-index: 30; background: #000; display: none; overflow: hidden; }
  .reader.on { display: block; }
  .scene { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; background-size: cover; background-position: center; }
  .scene.cur { opacity: 1; }
  .scene svg { width: 100%; height: 100%; display: block; }
  .scene.photo svg { display: none; }
  .rtop { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
  .rclose { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; }
  .rtitle { flex: 1; color: #fff; font-size: 13px; font-weight: 600; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rbox { position: absolute; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 3; max-width: 560px; margin: 0 auto; max-height: 78vh; overflow-y: auto; }
  .speech { position: relative; background: rgba(20,17,32,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px 18px 22px; min-height: 120px; cursor: pointer; animation: rise .35s ease; }
  .speech .txt { margin: 0; font-family: Lora, serif; font-size: 17px; line-height: 1.6; font-weight: 500; }
  .speech.narr .txt { color: #E8E1D3; }
  .speech.me .txt { font-style: italic; color: #D9D2C4; }
  .nametag { display: inline-block; margin: -32px 0 10px; padding: 6px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #1E1B2E; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  .more { position: absolute; right: 16px; bottom: 8px; color: var(--accent); font-size: 12px; animation: bob 1s ease-in-out infinite; }
  .choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 54px; padding: 12px 16px; border: none; border-radius: 16px; background: rgba(243,238,227,.96); color: #1E1B2E; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; animation: rise .35s ease both; }
  .choice:nth-child(2) { animation-delay: .06s; } .choice:nth-child(3) { animation-delay: .12s; }
  .choice.paid { background: linear-gradient(135deg, #FFD9E6, #F7A8C4); padding-right: 92px; }
  .choice.paid .price { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: #1E1B2E; color: #FFC2D6; border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
  .choice.armed .price { position: static; transform: none; margin-top: 4px; }
  .choice.armed { padding-right: 16px; }
  .chint { font-size: 12px; font-weight: 500; opacity: .75; }
  .setup .nameinput { width: 100%; min-height: 48px; margin: 12px 0 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
  .gender { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .gender button { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .gender button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .setup, .endcard { cursor: default; display: flex; flex-direction: column; gap: 8px; }
  .endcard .label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }
  .endcard .sumhead { margin-top: 6px; }
  .sumrow { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
  .sumrow b { color: var(--accent); }
  .wait { background: rgba(233,162,59,.12); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.45; }

  /* --- магазин --- */
  .sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; animation: fadein .2s ease; }
  .sheet .panel { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; animation: rise .25s ease; }
  .rclose.light { background: var(--card); color: var(--ink); }
  .balance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bal { background: var(--card); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
  .bal b, .bal .b { font-size: 18px; font-weight: 700; }
  .bal span { font-size: 12px; color: var(--muted); }
  .adbtn { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 16px; border: none; border-radius: 14px; background: linear-gradient(135deg, #3a2f6b, #2a2650); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  .adbtn b { color: var(--accent); }
  .adbtn:disabled { opacity: .5; }
  .pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 60px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
  .pname { display: block; }
  .pbadge { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: 999px; padding: 2px 8px; }
  .pprice { flex-shrink: 0; background: #F7D27A; color: #1E1B2E; border-radius: 999px; padding: 7px 12px; font-weight: 700; }
  @keyframes fadein { from { opacity: 0; } }

  /* --- комнаты и чат --- */
  .joinrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
  .joinrow .nameinput { margin: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; }
  .card .btn + .btn { margin-top: 0; }
  .roomcard { align-items: center; text-align: center; }
  .roomcard .code { font-family: Lora, serif; font-size: 36px; font-weight: 700; letter-spacing: 6px; color: var(--accent); }
  .badge .kick { margin-left: 6px; border: none; background: transparent; color: var(--bad); font: inherit; font-weight: 700; cursor: pointer; padding: 0 2px; }
  body.has-fab main { padding-bottom: 170px; }
  .chatfab { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); font-size: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.4); cursor: pointer; z-index: 15; }
  .chatbadge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
  .chatpanel { height: 80vh; }
  .chatlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
  .bubble { max-width: 80%; align-self: flex-start; background: var(--card); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 15px; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; cursor: pointer; word-break: break-word; }
  .bubble b { font-size: 12px; color: var(--accent); }
  .bubble.mine { align-self: flex-end; background: #3a3168; border-radius: 14px 14px 4px 14px; cursor: default; }
  .sysmsg { align-self: center; font-size: 12px; color: var(--muted); text-align: center; padding: 2px 8px; }
  .quick { display: flex; gap: 6px; overflow-x: auto; }
  .quick .q { min-width: 44px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 18px; cursor: pointer; }
  .chatsend { display: grid; grid-template-columns: 1fr 52px; gap: 8px; }
  .chatinput { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; padding: 0 12px; }
  .sendbtn { padding: 0; font-size: 20px; }

  /* --- «Кто это написал?» --- */
  textarea.answer { width: 100%; min-height: 110px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; padding: 12px 14px; resize: vertical; margin-bottom: 6px; }
  .whocard .whotext { margin: 0; font-family: Lora, serif; font-size: 16px; line-height: 1.45; flex: 1; }
  .whocard.mine { opacity: .75; }
  .chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .pick { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .pick.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .heart { border: none; background: transparent; font-size: 24px; cursor: pointer; padding: 4px; }

  .streak { gap: 10px; border: 1px dashed var(--accent); background: rgba(233,162,59,.08); }
  .sdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .sday { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 10px; background: var(--card); font-size: 11px; color: var(--muted); }
  .sday b { font-size: 13px; color: var(--ink); }
  .sday.got { opacity: .55; }
  .sday.got b::after { content: " ✓"; color: var(--good, #6BCB8B); }
  .sday.now { background: var(--accent); color: var(--bg); animation: bob 1.6s ease-in-out infinite; }
  .sday.now b { color: var(--bg); }
  .sday.big { box-shadow: inset 0 0 0 1px #FF8FB4; }
  .firstbuy { padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,143,180,.18), rgba(233,162,59,.18)); font-size: 14px; font-weight: 600; }
  .pold { text-decoration: line-through; opacity: .55; font-size: 12px; margin-left: 6px; }
  .ach { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .ach:first-of-type { border-top: none; }
  .ach .ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); font-size: 16px; }
  .ach.ok .ico { background: var(--accent); }
  .ach.done { opacity: .6; }
  .ach .qbody span.sub { font-size: 12px; }
  .promo { display: flex; gap: 8px; }
  .promo .nameinput { margin: 0; flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
  .promo .btn { width: auto; flex: none; padding: 0 16px; }
  .dotn { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #FF5C7A; color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: middle; }
  .quests { gap: 10px; }
  .quest { display: flex; align-items: center; gap: 12px; }
  .qbody { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
  .qreward { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .claim { min-height: 36px; padding: 0 12px; border: none; border-radius: 999px; background: var(--accent); color: var(--bg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes bob { 50% { transform: translateY(3px); } }
  /* анимации сцен */
  .wave { animation: wave 9s linear infinite; } .wave.slow { animation-duration: 16s; }
  @keyframes wave { to { transform: translateX(200px); } }
  .rain { animation: rain .5s linear infinite; }
  @keyframes rain { from { transform: translate(0, -60px); } to { transform: translate(-12px, 0); } }
  .flash { opacity: 0; animation: flash 7s infinite; }
  @keyframes flash { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .55; } 92% { opacity: 0; } 93.5% { opacity: .4; } 95% { opacity: 0; } }
  .beam { animation: beam 6s linear infinite; }
  @keyframes beam { to { transform: rotate(360deg); } }
  .glow { animation: glow 2s ease-in-out infinite; }
  @keyframes glow { 50% { opacity: .2; } }
  .tw { animation: tw 3s ease-in-out infinite; }
  @keyframes tw { 50% { opacity: .2; } }
  .fire { transform-box: fill-box; transform-origin: 50% 100%; animation: fire .25s ease-in-out infinite alternate; }
  @keyframes fire { to { transform: scale(1.06, .94); } }
  .fireglow { animation: glow 1.6s ease-in-out infinite; }
  .spark { animation: spark 2.4s linear infinite; }
  @keyframes spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-160px); opacity: 0; } }
  .fog { animation: fog 22s ease-in-out infinite alternate; }
  @keyframes fog { to { transform: translateX(-160px); } }
  .blink { animation: tw 1.2s steps(2) infinite; }
  .scope { animation: wave 1.5s linear infinite; }
  .drip { animation: drip 2.2s ease-in infinite; }
  @keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(420px); opacity: 0; } }
  .ship { animation: tw 1.4s ease-in-out infinite; }
  .bird { animation: fog 14s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .wave, .rain, .flash, .beam, .glow, .tw, .fire, .spark, .fog, .blink, .scope, .drip, .ship, .bird { animation: none !important; } }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }