:root {
      --bg: #030303;
      --panel: #080808;
      --panel-2: #101010;
      --cell: #151515;
      --ink: #f3f1ea;
      --muted: #9d988d;
      --line: #38342e;
      --line-hot: #f0e6c8;
      --blood: #d5282c;
      --blood-2: #7e1115;
      --shield: #9ed7ff;
      --shield-dark: #19425b;
      --gold: #e5b84f;
      --green: #61d38d;
      --violet: #b18cff;
      --curse: #ca3bff;
      --shadow: 0 28px 70px rgba(0, 0, 0, .72);
      --radius: 6px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(circle at top, #1b1114 0, #050505 44%, #000 100%);
      background-size: 18px 18px, 18px 18px, 100% 100%;
      color: var(--ink);
      font-family: "Crimson Text", Georgia, serif;
      letter-spacing: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: stretch;
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
    }

    .phone {
      width: min(100vw, 440px);
      min-height: 100dvh;
      background: var(--bg);
      border-left: 1px solid #211d19;
      border-right: 1px solid #211d19;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      position: relative;
      overflow: hidden;
    }

    .phone:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.035), transparent 18%, transparent 82%, rgba(255,255,255,.03)),
        repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.018) 4px);
      mix-blend-mode: screen;
      opacity: .65;
      z-index: 10;
    }

    .topbar {
      position: relative;
      z-index: 1;
      padding: 12px 12px 8px;
      border-bottom: 1px solid var(--line);
      background: #060606;
    }

    .brand {
      display: grid;
      grid-template-columns: 1fr auto 38px;
      gap: 10px;
      align-items: end;
      margin-bottom: 8px;
    }

    .audio-toggle {
      width: 38px;
      height: 38px;
      align-self: stretch;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #0b0b0b;
      color: var(--muted);
      cursor: pointer;
      transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .audio-toggle.on {
      color: var(--gold);
      border-color: #775f24;
      background: #151005;
      box-shadow: inset 0 0 18px rgba(229, 184, 79, .08);
    }

    .audio-toggle:active {
      transform: translateY(1px);
    }

    h1,
    h2,
    h3,
    .label,
    .btn,
    .stat-name,
    .door-title,
    .skill-name,
    .loot-name {
      font-family: "Cinzel", Georgia, serif;
      letter-spacing: 0;
    }

    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
    }

    .subtitle {
      color: var(--muted);
      font-size: 13px;
      margin-top: 3px;
    }

    .floor-tag {
      border: 1px solid var(--line-hot);
      min-width: 78px;
      text-align: center;
      padding: 5px 7px;
      background: #0d0b08;
      color: var(--gold);
      font-family: "Cinzel", Georgia, serif;
      font-size: 12px;
      line-height: 1.1;
    }

    .floor-tag strong {
      display: block;
      font-size: 19px;
      color: var(--ink);
    }

    .hud-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .hud-cell {
      min-width: 0;
      padding: 6px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }

    .stat-name {
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .stat-value {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.05;
      white-space: nowrap;
    }

    .bar {
      height: 6px;
      margin-top: 5px;
      background: #1b1b1b;
      border: 1px solid #2d2824;
      overflow: hidden;
    }

    .bar span {
      display: block;
      height: 100%;
      width: 0;
      transition: width .22s ease;
    }

    .bar.hp span {
      background: linear-gradient(90deg, var(--blood-2), var(--blood));
    }

    .bar.enemy span {
      background: linear-gradient(90deg, #672023, #e34242);
    }

    .bar.shield span {
      background: linear-gradient(90deg, var(--shield-dark), var(--shield));
    }

    .bar.xp span {
      background: linear-gradient(90deg, #795b19, var(--gold));
    }

    .screen {
      position: relative;
      z-index: 1;
      overflow-y: auto;
      padding: 10px 12px 12px;
    }

    .mode-title {
      margin: 0 0 8px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: baseline;
      text-transform: uppercase;
      font-size: 14px;
      color: var(--ink);
    }

    .mode-title small {
      color: var(--muted);
      font-family: "Crimson Text", Georgia, serif;
      font-size: 13px;
      text-transform: none;
      text-align: right;
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .stack {
      display: grid;
      gap: 8px;
    }

    .panel,
    .choice,
    .skill,
    .loot-panel,
    .enemy-frame {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #111, #070707);
      border-radius: var(--radius);
    }

    .panel {
      padding: 9px;
    }

    .choice {
      display: grid;
      min-height: 140px;
      padding: 10px;
      text-align: left;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
      animation: cardIn .28s ease both;
    }

    .choice:nth-child(2) {
      animation-delay: .05s;
    }

    .choice:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .choice:not(:disabled):active {
      transform: translateY(1px);
    }

    .choice:not(:disabled):hover {
      border-color: var(--line-hot);
      background: linear-gradient(180deg, #18130f, #080808);
    }

    .choice .watermark,
    .enemy-frame .watermark {
      position: absolute;
      right: 8px;
      bottom: 2px;
      color: rgba(255,255,255,.06);
      font-size: 82px;
      line-height: 1;
      z-index: 0;
    }

    .choice-watermark-img {
      position: absolute;
      right: -18px;
      bottom: -18px;
      width: 120px;
      height: 120px;
      display: block;
      object-fit: contain;
      background-repeat: no-repeat;
      opacity: .58;
      filter: saturate(1.08) contrast(1.08);
      pointer-events: none;
      z-index: 0;
    }

    .class-card .choice-watermark-img {
      width: 144px;
      height: 144px;
      opacity: .2;
      right: -26px;
      bottom: -26px;
    }

    .choice > div:not(.choice-watermark-img) {
      position: relative;
      z-index: 1;
    }

    .door-title {
      font-size: 16px;
      text-transform: uppercase;
      color: var(--ink);
      position: relative;
      z-index: 1;
    }

    .hint {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.15;
      position: relative;
      z-index: 1;
    }

    .risk {
      align-self: end;
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .pill {
      border: 1px solid var(--line);
      background: #0a0a0a;
      color: var(--muted);
      padding: 2px 5px;
      font-size: 11px;
      line-height: 1.1;
      font-family: "Cinzel", Georgia, serif;
      white-space: nowrap;
    }

    .pill.red {
      color: #ff9b9b;
      border-color: #632225;
    }

    .pill.blue {
      color: var(--shield);
      border-color: #31596d;
    }

    .pill.gold {
      color: var(--gold);
      border-color: #735b21;
    }

    .btn-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .btn-row.three {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .btn {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #111;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px;
      text-transform: uppercase;
      font-size: 12px;
      cursor: pointer;
      transition: border-color .14s ease, background .14s ease, transform .14s ease;
    }

    .btn:not(:disabled):hover {
      border-color: var(--line-hot);
      background: #19130d;
    }

    .btn:not(:disabled):active {
      transform: translateY(1px);
    }

    .btn:disabled {
      opacity: .42;
      cursor: not-allowed;
    }

    .btn.danger {
      border-color: #5d1c20;
      background: #180809;
      color: #ffd1d1;
    }

    .btn.gold {
      border-color: #776121;
      background: #181307;
      color: var(--gold);
    }

    .btn.blue {
      border-color: #31596d;
      background: #081219;
      color: var(--shield);
    }

    .class-card {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 176px;
    }

    .class-icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      font-size: 38px;
      color: var(--gold);
      margin-bottom: 8px;
      text-shadow: 0 0 18px rgba(229, 184, 79, .18);
    }

    .class-art-img {
      width: 62px;
      height: 62px;
      display: block;
      object-fit: cover;
      background-repeat: no-repeat;
      border: 1px solid #574626;
      border-radius: 4px;
      background: #070707;
    }

    .class-card .hint {
      margin: 4px 0 8px;
    }

    .mini-table {
      display: grid;
      grid-template-columns: 1fr auto;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      margin-top: 8px;
    }

    .mini-table div {
      padding: 4px 5px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      background: rgba(255,255,255,.02);
    }

    .mini-table div:nth-child(2n) {
      color: var(--ink);
      text-align: right;
      font-weight: 700;
    }

    .enemy-frame {
      position: relative;
      overflow: hidden;
      padding: 10px;
      min-height: 128px;
      background:
        linear-gradient(180deg, rgba(213,40,44,.11), transparent),
        #090909;
    }

    .enemy-top {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .enemy-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid #5b2528;
      border-radius: 50%;
      background: #160709;
      color: #ffaaa7;
      font-size: 31px;
      box-shadow: inset 0 0 22px rgba(213,40,44,.16);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .enemy-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background-repeat: no-repeat;
      border-radius: 50%;
    }

    .enemy-watermark-img {
      position: absolute;
      right: -22px;
      bottom: -26px;
      width: 150px;
      height: 150px;
      display: block;
      object-fit: contain;
      background-repeat: no-repeat;
      opacity: .2;
      filter: saturate(1.08) contrast(1.08);
      pointer-events: none;
      z-index: 0;
    }

    .enemy-name {
      font-family: "Cinzel", Georgia, serif;
      text-transform: uppercase;
      font-size: 17px;
      line-height: 1.05;
    }

    .enemy-trait {
      color: var(--muted);
      font-size: 13px;
    }

    .combat-stats {
      margin-top: 9px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      position: relative;
      z-index: 1;
    }

    .combat-stats div {
      padding: 5px;
      text-align: center;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 12px;
    }

    .skills {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      margin-top: 9px;
    }

    .skill {
      width: 100%;
      min-height: 58px;
      display: grid;
      grid-template-columns: 44px 1fr auto;
      gap: 8px;
      align-items: center;
      text-align: left;
      padding: 7px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .skill.ready:before {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(97, 211, 141, .26);
      opacity: .8;
      pointer-events: none;
      animation: readyPulse 1.8s ease-in-out infinite;
    }

    .skill-used {
      animation: skillUsed .34s ease both;
    }

    .skill:not(:disabled):hover {
      border-color: var(--line-hot);
    }

    .skill:disabled {
      opacity: .48;
      cursor: not-allowed;
    }

    .skill-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid #3c342b;
      background: #0b0b0b;
      color: var(--gold);
      font-size: 21px;
    }

    .skill-name {
      font-size: 13px;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .skill-desc {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.1;
      margin-top: 2px;
    }

    .cd {
      min-width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-family: "Cinzel", Georgia, serif;
      font-size: 12px;
      background: #060606;
    }

    .skill.ready .cd {
      color: var(--green);
      border-color: #2c6941;
    }

    .loot-panel {
      padding: 10px;
      position: relative;
      overflow: hidden;
    }

    .loot-head {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 10px;
      align-items: center;
    }

    .loot-art {
      width: 78px;
      height: 78px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: #070707;
      border-radius: 4px;
      color: var(--gold);
      font-size: 30px;
      overflow: hidden;
    }

    .loot-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background-repeat: no-repeat;
    }

    .loot-name {
      color: var(--gold);
      text-transform: uppercase;
      font-size: 17px;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .rarity-common .loot-name { color: #d8d4c9; }
    .rarity-rare .loot-name { color: var(--shield); }
    .rarity-epic .loot-name { color: var(--violet); }
    .rarity-legendary .loot-name { color: var(--gold); text-shadow: 0 0 14px rgba(229,184,79,.22); }

    .compare {
      display: grid;
      grid-template-columns: 1fr auto auto;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      margin-top: 8px;
    }

    .compare div {
      padding: 5px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }

    .delta-pos { color: var(--green); }
    .delta-neg { color: #ff8b8b; }
    .delta-zero { color: var(--muted); }

    .log {
      position: relative;
      z-index: 1;
      height: 148px;
      overflow-y: auto;
      border-top: 1px solid var(--line);
      background: #050505;
      padding: 8px 10px;
      font-size: 13px;
      line-height: 1.22;
    }

    .log-entry {
      color: var(--muted);
      margin-bottom: 4px;
      animation: logIn .18s ease both;
    }

    .log-entry strong {
      color: var(--ink);
      font-weight: 700;
    }

    .log-entry.damage { color: #ffaaa7; }
    .log-entry.gain { color: #bfe8c8; }
    .log-entry.warn { color: var(--gold); }
    .log-entry.death { color: #ff5f64; }
    .log-entry.system { color: var(--shield); }

    .death-screen {
      min-height: 58dvh;
      display: grid;
      align-content: center;
      gap: 10px;
      text-align: center;
    }

    .death-screen .skull {
      font-size: 72px;
      color: var(--blood);
      text-shadow: 0 0 28px rgba(213, 40, 44, .28);
    }

    .score {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .score div {
      padding: 8px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }

    .run-record {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      margin-bottom: 8px;
      background: #080808;
    }

    .run-record div {
      padding: 6px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .run-record b {
      display: block;
      color: var(--muted);
      font-family: "Cinzel", Georgia, serif;
      font-size: 10px;
      text-transform: uppercase;
      font-weight: 700;
    }

    .run-record strong {
      color: var(--gold);
      font-size: 15px;
    }

    .record-banner {
      border: 1px solid #765f22;
      background: #151005;
      color: var(--gold);
      font-family: "Cinzel", Georgia, serif;
      text-transform: uppercase;
      padding: 8px;
      animation: lootReveal .7s ease both;
    }

    .equipment-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-top: 8px;
    }

    .equip-cell {
      border: 1px solid var(--line);
      background: #080808;
      padding: 5px;
      min-width: 0;
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 5px;
      align-items: center;
    }

    .equip-thumb {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid #2c2721;
      background: #050505;
      color: var(--gold);
      overflow: hidden;
    }

    .equip-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background-repeat: no-repeat;
    }

    .equip-cell b {
      display: block;
      font-family: "Cinzel", Georgia, serif;
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
    }

    .equip-cell span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: var(--ink);
    }

    .flash {
      animation: flash .24s linear;
    }

    .fx-layer {
      position: absolute;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      overflow: hidden;
    }

    .float-text {
      position: absolute;
      transform: translate(-50%, -50%);
      font-family: "Cinzel", Georgia, serif;
      font-size: 17px;
      font-weight: 900;
      text-shadow: 0 2px 0 #000, 0 0 18px currentColor;
      animation: floatRise .82s ease-out forwards;
      white-space: nowrap;
    }

    .float-text.damage { color: #ff656a; }
    .float-text.crit { color: var(--gold); font-size: 21px; }
    .float-text.heal { color: var(--green); }
    .float-text.shield { color: var(--shield); }

    .particle {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--blood);
      box-shadow: 0 0 10px currentColor;
      animation: particleOut .78s ease-out forwards;
    }

    .particle.red { color: var(--blood); background: var(--blood); }
    .particle.blue { color: var(--shield); background: var(--shield); }
    .particle.gold { color: var(--gold); background: var(--gold); }
    .particle.violet { color: var(--violet); background: var(--violet); }

    .screen-pop {
      animation: screenPop .2s ease both;
    }

    .phone.door-slam {
      animation: doorSlam .42s cubic-bezier(.2, .9, .2, 1);
    }

    .phone.player-hit {
      animation: playerHit .44s cubic-bezier(.2, .9, .2, 1);
    }

    .phone.shield-flare {
      animation: shieldFlare .48s ease;
    }

    .phone.ritual-start {
      animation: ritualStart .65s ease;
    }

    .phone.enemy-arrival {
      animation: enemyArrival .42s ease;
    }

    .phone.boss-arrival,
    .phone.boss-pressure {
      box-shadow: var(--shadow), 0 0 34px rgba(213, 40, 44, .16);
    }

    .phone.boss-arrival {
      animation: bossArrival .82s ease;
    }

    .phone.low-hp .topbar {
      animation: lowHpPulse 1.4s ease-in-out infinite;
    }

    .phone.death-throb {
      animation: deathThrob 1.1s ease both;
    }

    .enemy-frame.enemy-hit {
      animation: enemyHit .32s ease;
    }

    .enemy-frame.enemy-crit {
      animation: enemyCrit .5s ease;
    }

    .enemy-frame.enemy-block {
      animation: enemyBlock .38s ease;
    }

    .loot-reveal {
      animation: lootReveal .54s ease both;
    }

    @keyframes flash {
      0% { filter: brightness(1); }
      45% { filter: brightness(2.1); }
      100% { filter: brightness(1); }
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes screenPop {
      from { opacity: .72; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes logIn {
      from { opacity: 0; transform: translateX(-6px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes readyPulse {
      0%, 100% { opacity: .22; }
      50% { opacity: .72; }
    }

    @keyframes skillUsed {
      0% { transform: translateX(0); filter: brightness(1); }
      35% { transform: translateX(4px); filter: brightness(1.8); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    @keyframes doorSlam {
      0% { transform: translateX(0); }
      18% { transform: translateX(-4px); }
      36% { transform: translateX(5px); }
      60% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

    @keyframes playerHit {
      0% { transform: translateX(0); filter: brightness(1); }
      18% { transform: translateX(6px); filter: brightness(1.8) saturate(1.35); }
      36% { transform: translateX(-7px); }
      62% { transform: translateX(3px); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    @keyframes shieldFlare {
      0% { box-shadow: var(--shadow); }
      45% { box-shadow: var(--shadow), inset 0 0 48px rgba(158, 215, 255, .2), 0 0 20px rgba(158, 215, 255, .12); }
      100% { box-shadow: var(--shadow); }
    }

    @keyframes ritualStart {
      0% { filter: brightness(.7); }
      42% { filter: brightness(1.7) saturate(1.2); }
      100% { filter: brightness(1); }
    }

    @keyframes enemyArrival {
      from { filter: brightness(.55) saturate(.85); }
      to { filter: brightness(1); }
    }

    @keyframes bossArrival {
      0% { transform: scale(.985); filter: brightness(.52) saturate(1.4); }
      40% { transform: scale(1.008); filter: brightness(1.7) saturate(1.6); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes lowHpPulse {
      0%, 100% { box-shadow: inset 0 0 0 rgba(213, 40, 44, 0); }
      50% { box-shadow: inset 0 0 26px rgba(213, 40, 44, .18); }
    }

    @keyframes deathThrob {
      0% { filter: grayscale(0) brightness(1); }
      35% { filter: grayscale(.35) brightness(1.8) saturate(1.6); }
      100% { filter: grayscale(.75) brightness(.72); }
    }

    @keyframes enemyHit {
      0% { transform: translateX(0); filter: brightness(1); }
      38% { transform: translateX(-6px); filter: brightness(1.8) saturate(1.35); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    @keyframes enemyCrit {
      0% { transform: scale(1); filter: brightness(1); }
      28% { transform: scale(1.018) rotate(-.35deg); filter: brightness(2.15) saturate(1.45); }
      58% { transform: scale(.995) rotate(.25deg); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes enemyBlock {
      0% { box-shadow: inset 0 0 0 rgba(158, 215, 255, 0); }
      46% { box-shadow: inset 0 0 44px rgba(158, 215, 255, .22); }
      100% { box-shadow: inset 0 0 0 rgba(158, 215, 255, 0); }
    }

    @keyframes lootReveal {
      0% { opacity: 0; transform: translateY(10px) scale(.985); filter: brightness(.8); }
      60% { opacity: 1; transform: translateY(0) scale(1.01); filter: brightness(1.45); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
    }

    @keyframes floatRise {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -54px) scale(1.08); }
    }

    @keyframes particleOut {
      0% { opacity: 0; transform: translate(0, 0) scale(.6); }
      20% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.15); }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *:before,
      *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }

    @media (min-width: 700px) {
      body {
        padding: 18px 0;
      }

      .phone {
        min-height: calc(100dvh - 36px);
        max-height: 920px;
        border: 1px solid #29231d;
      }
    }

    @media (max-width: 360px) {
      .hud-grid {
        grid-template-columns: 1fr 1fr;
      }

      .choice {
        min-height: 128px;
      }

      .skill {
        grid-template-columns: 38px 1fr 36px;
      }

      .skill-icon,
      .cd {
        width: 36px;
        height: 36px;
      }
    }