:root {
      color-scheme: dark;
      font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
      --yellow: #ffd84d;
      --red: #ff4d45;
      --ink: #151922;
      --panel: rgba(21, 25, 34, .86);
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #b9a46c;
      touch-action: none;
      user-select: none;
    }

    body { position: fixed; inset: 0; }

    #game {
      display: block;
      width: 100%;
      height: 100%;
      cursor: crosshair;
    }

    #bossDirectionOverlay {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .hud {
      position: fixed;
      inset: 0;
      pointer-events: none;
      padding: clamp(12px, 2.4vw, 24px);
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

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

    .brand, .stats, .hint, .mission {
      border: 2px solid rgba(255, 255, 255, .14);
      background: var(--panel);
      box-shadow: 0 12px 35px rgba(18, 18, 20, .22);
      backdrop-filter: blur(9px);
    }

    .brand, .stats, .mission {
      background: rgba(21, 25, 34, .70);
    }

    .brand {
      padding: 10px 14px 11px;
      border-radius: 16px;
      transform: rotate(-1deg);
    }

    .brand strong {
      display: block;
      color: var(--yellow);
      font-size: clamp(17px, 2.6vw, 27px);
      font-weight: 950;
      letter-spacing: -.05em;
      line-height: .95;
    }

    .brand span {
      display: block;
      margin-top: 5px;
      color: #f6f0dc;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .16em;
    }

    .stats {
      display: flex;
      gap: clamp(12px, 3vw, 28px);
      padding: 10px 14px;
      border-radius: 16px;
      text-align: right;
    }

    .stat small {
      display: block;
      color: #aab2c1;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .stat b {
      display: block;
      margin-top: 2px;
      color: white;
      font-size: clamp(17px, 2.5vw, 24px);
      line-height: 1;
    }

    .stat.combo b { color: var(--yellow); }

    .health-stat { min-width: 78px; }

    .health-stat b { color: #ff756f; }

    .health-track {
      width: 100%;
      height: 5px;
      margin-top: 5px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(255, 255, 255, .12);
    }

    .health-fill {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ff4d45, #ff8f72);
      box-shadow: 0 0 9px rgba(255, 77, 69, .65);
      transition: width .18s ease-out;
    }

    .center-message {
      place-self: start center;
      margin-top: clamp(72px, 15vh, 150px);
      color: white;
      font-size: clamp(22px, 5vw, 50px);
      font-weight: 1000;
      letter-spacing: -.05em;
      text-align: center;
      text-shadow: 0 5px 0 rgba(0, 0, 0, .2), 0 12px 28px rgba(0, 0, 0, .25);
      opacity: 0;
      transform: translateY(14px) scale(.92);
      transition: .22s ease;
    }

    .center-message.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .bottom {
      display: flex;
      align-items: end;
      padding-right: 142px;
    }

    .mission {
      width: min(520px, 100%);
      max-width: 520px;
      justify-self: center;
      padding: 11px 14px 13px;
      border-radius: 16px;
    }

    .mission-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #f5f6f8;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .mission-head b { color: var(--yellow); }

    .track {
      height: 10px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(255, 255, 255, .12);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
    }

    .fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ff564f, #ffbf43, #ffe969);
      box-shadow: 0 0 16px rgba(255, 216, 77, .75);
      transition: width .18s ease-out;
    }

    .performance-hud { justify-self: end; margin-top: 2px; padding: 6px 8px; border: 1px solid rgba(117,243,255,.26); border-radius: 8px; background: rgba(15,20,28,.82); color: #75f3ff; font-size: 8px; font-weight: 900; letter-spacing: .03em; line-height: 1.35; text-align: right; white-space: pre-line; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

    .hint {
      align-self: end;
      padding: 12px 16px;
      border-radius: 999px;
      color: #fff;
      font-size: clamp(11px, 1.8vw, 14px);
      font-weight: 850;
      white-space: nowrap;
      animation: bob 1.4s ease-in-out infinite;
      transition: opacity .25s ease, transform .25s ease;
    }

    .hint.hide { opacity: 0; transform: translateY(12px); }

    .joystick {
      position: fixed;
      left: 0;
      right: auto;
      top: 0;
      bottom: auto;
      z-index: 4;
      display: grid;
      justify-items: center;
      gap: 5px;
      opacity: 0;
      pointer-events: none;
      touch-action: none;
      transform: translate(-50%, -50%);
      transition: opacity .1s ease;
    }

    .joystick.active { opacity: 1; }

    .joystick-base {
      position: relative;
      width: 112px;
      height: 112px;
      border: 3px solid rgba(255,255,255,.27);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,216,77,.13), rgba(21,25,34,.7));
      box-shadow: inset 0 0 0 10px rgba(0,0,0,.1), 0 12px 30px rgba(0,0,0,.24);
    }

    .joystick-knob {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 52px;
      height: 52px;
      border: 3px solid rgba(255,255,255,.55);
      border-radius: 50%;
      background: linear-gradient(145deg, #ffe978, #e3a923);
      box-shadow: 0 7px 16px rgba(0,0,0,.34);
      transform: translate(-50%, -50%);
    }

    .joystick span {
      color: rgba(255,255,255,.8);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .18em;
      text-shadow: 0 2px 5px rgba(0,0,0,.5);
    }

    .game-actions {
      position: fixed;
      left: 14px;
      top: 150px;
      z-index: 8;
      display: grid;
      gap: 8px;
      width: 58px;
    }

    .pause-toggle,
    .play-exit {
      position: static;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 2px solid rgba(255,255,255,.22);
      border-radius: 14px;
      background: rgba(21,25,34,.9);
      color: var(--yellow);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

    .play-exit {
      width: 58px;
      height: 32px;
      border-radius: 10px;
      color: #ffaaa6;
      font-size: 10px;
      letter-spacing: .08em;
    }

    .reward-exit {
      position: fixed;
      top: clamp(86px, 13vh, 150px);
      right: 14px;
      z-index: 8;
      width: auto;
      min-width: 110px;
      padding: 11px 15px;
      border: 2px solid rgba(117,243,255,.72);
      border-radius: 14px;
      background: linear-gradient(145deg,#75f3ff,#39b9d0);
      color: #092128;
      font-size: 13px;
      font-weight: 950;
      box-shadow: 0 6px 0 #14788a, 0 13px 28px rgba(0,0,0,.28);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity .16s ease, transform .16s ease;
    }
    .reward-exit.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

    #magnetGoogleSignin { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; }

    .pause-toggle.hide { opacity: 0; pointer-events: none; }

    .pause-menu {
      position: fixed;
      inset: 0;
      z-index: 13;
      display: grid;
      place-items: center;
      padding: 16px;
      background: rgba(8,11,16,.82);
      backdrop-filter: blur(7px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }

    .pause-menu.show { opacity: 1; pointer-events: auto; }

    .pause-card {
      width: min(760px, 96vw);
      max-height: 92vh;
      overflow: auto;
      padding: 20px;
      border: 3px solid rgba(255,255,255,.16);
      border-radius: 24px;
      background: rgba(20,24,32,.98);
      color: white;
      box-shadow: 0 28px 90px rgba(0,0,0,.48);
    }

    .pause-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .pause-heading small { color: #9ba6b5; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
    .pause-heading h1 { margin: 1px 0 0; color: var(--yellow); font-size: 34px; letter-spacing: -.05em; }
    .pause-close { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
    .pause-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0 20px; }
    .pause-actions button { padding: 11px; font-size: 13px; box-shadow: 0 5px 0 #bf8d18; }
    .pause-actions button.danger { background: #ff756f; color: #2b1010; box-shadow: 0 5px 0 #a8332f; }
    .pause-section + .pause-section { margin-top: 18px; }
    .pause-section h2 { margin: 0 0 8px; color: #dce3eb; font-size: 12px; letter-spacing: .08em; }
    .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 8px; }
    .status-item { min-height: 67px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.06); }
    .status-item.locked { opacity: .5; }
    .status-item b { display: block; color: var(--yellow); font-size: 11px; }
    .status-item span { display: block; margin-top: 4px; color: #b9c3cf; font-size: 10px; line-height: 1.35; }
    .status-item em { display: block; margin-top: 4px; color: #75f3ff; font-size: 9px; font-style: normal; font-weight: 900; }
    .pause-meta-balance { margin-bottom: 8px; color: #75f3ff; font-size: 11px; font-weight: 900; }
    .meta-trade-help { margin: -2px 0 10px; color: #9da9b8; font-size: 9px; font-weight: 800; line-height: 1.3; }
    .pause-tab-panel[data-pause-panel="permanent"] .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .meta-upgrade-card { position: relative; min-width: 0; padding: 12px; border: 1px solid rgba(255,216,77,.18); border-radius: 14px; background: linear-gradient(145deg, rgba(255,216,77,.075), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); text-align: left; }
    .meta-upgrade-card.is-sale { border-color: rgba(111,213,176,.28); background: linear-gradient(145deg, rgba(111,213,176,.08), rgba(255,255,255,.035)); }
    .meta-upgrade-card.is-empty { border-color: rgba(255,255,255,.1); }
    .meta-upgrade-copy { min-height: 54px; padding-right: 66px; }
    .meta-upgrade-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .meta-upgrade-heading b { min-width: 0; overflow: hidden; color: var(--yellow); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .meta-upgrade-level { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.07); color: #dce3eb; font-size: 8px; font-weight: 900; }
    .meta-upgrade-effect { margin: 7px 0 0; color: #75f3ff; font-size: 9px; font-weight: 900; line-height: 1.3; }
    .meta-transaction-controls { margin-top: 9px; }
    .meta-quantity-stepper { position: absolute; top: 10px; right: 10px; display: grid; grid-template-columns: 26px 32px; grid-template-areas: 'selected increase' 'selected decrease'; align-items: stretch; gap: 3px; }
    .meta-quantity-step { min-width: 0; min-height: 23px; padding: 3px 2px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; background: rgba(255,216,77,.16); color: var(--yellow); font-size: 9px; line-height: 1; box-shadow: none; }
    .meta-quantity-step:nth-child(1) { grid-area: increase; }
    .meta-quantity-step:nth-child(2) { grid-area: decrease; }
    .meta-quantity-step.is-sale { background: rgba(111,213,176,.25); border-color: #6fd5b0; color: #9af0d0; }
    .meta-quantity-selected { grid-area: selected; display: grid; place-items: center; padding: 2px; border: 1px solid rgba(255,216,77,.25); border-radius: 8px; background: rgba(255,216,77,.1); color: var(--yellow); font-size: 11px; font-weight: 900; line-height: 1; text-align: center; }
    .meta-quantity-selected.is-sale { background: rgba(111,213,176,.16); color: #9af0d0; }
    .meta-quantity-selected.is-empty { background: rgba(255,255,255,.1); color: #b9c3cf; }
    .meta-transaction-footer { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 7px; align-items: stretch; }
    .meta-transaction-summary { display: flex; align-items: center; min-height: 38px; padding: 7px 9px; border: 1px solid rgba(255,216,77,.1); border-radius: 9px; background: rgba(255,216,77,.1); color: var(--yellow); font-size: 9px; font-weight: 900; line-height: 1.25; text-align: left; }
    .meta-transaction-summary.is-sale { background: rgba(111,213,176,.13); color: #9af0d0; }
    .meta-transaction-execute { width: 100%; margin: 0; padding: 7px 5px; border-radius: 9px; font-size: 10px; box-shadow: 0 3px 0 #bf8d18; }
    .meta-transaction-execute.is-sale { background: #6fd5b0; color: #0f3428; box-shadow: 0 3px 0 #39906f; }
    .meta-transaction-execute:active { transform: translateY(2px); box-shadow: 0 1px 0 #bf8d18; }
    .meta-transaction-execute.is-sale:active { box-shadow: 0 1px 0 #39906f; }
    .quick-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
    .pause-setting { min-width: 0; }
    .pause-setting h2 { margin: 0 0 7px; }
    .language-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
    .language-picker button { padding: 9px 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #aeb8c5; box-shadow: none; }
    .language-picker button.active { border-color: var(--yellow); background: rgba(255,216,77,.18); color: var(--yellow); }
    .setting-toggle { width: 100%; padding: 9px 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #aeb8c5; box-shadow: none; }
    .setting-toggle.active { border-color: #75f3ff; background: rgba(117,243,255,.14); color: #75f3ff; }
    .pause-tabs,
    .end-tabs { gap: 7px; margin: 16px 0 14px; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.045); }
    .pause-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; touch-action: pan-x; }
    .end-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; touch-action: pan-x; }
    .pause-tab,
    .end-tab { min-width: 0; padding: 10px 7px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #9faaba; font-size: 11px; letter-spacing: .06em; box-shadow: none; white-space: nowrap; }
    .pause-tab { flex: 0 0 min(118px, 31vw); scroll-snap-align: start; }
    .end-tab { flex: 0 0 clamp(88px, 27vw, 112px); scroll-snap-align: start; }
    .pause-tab.active,
    .end-tab.active { border-color: rgba(255,216,77,.48); background: rgba(255,216,77,.16); color: var(--yellow); }
    .pause-tab:active,
    .end-tab:active { transform: none; box-shadow: none; }
    .pause-tab-panels { min-height: 265px; }
    .end-tab-panels { min-height: 135px; }
    .pause-tab-panel[hidden],
    .end-tab-panel[hidden] { display: none; }
    .pause-tab-panel.active,
    .end-tab-panel.active { animation: tab-panel-in .16s ease-out; }
    .pause-stage-grid { margin-bottom: 18px; }
    .character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .character-card { min-height: 172px; padding: 14px 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); color: white; text-align: left; box-shadow: none; }
    .character-card.selected { border-color: var(--yellow); background: rgba(255,216,77,.13); }
    .character-card.active { box-shadow: inset 0 0 0 1px rgba(117,243,255,.55); }
    .character-card:disabled { opacity: .45; }
    .character-card .character-card-icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 11px; border-radius: 12px; background: rgba(117,243,255,.12); color: #75f3ff; font-size: 40px; line-height: 1; }
    .character-card strong,.character-card span,.character-card em { display: block; }
    .character-card strong { color: var(--yellow); font-size: 13px; }
    .character-card span { margin-top: 7px; color: #b9c3cf; font-size: 10px; line-height: 1.4; }
    .character-card em { margin-top: 9px; color: #75f3ff; font-size: 9px; font-style: normal; font-weight: 900; }
    .pause-tab-panel .pause-section:first-child,
    .end-tab-panel > :first-child { margin-top: 0; }
    .account-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.05); }
    .account-copy { min-width: 0; }
    .account-copy strong,.account-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-copy strong { color: var(--yellow); font-size: 12px; }
    .account-copy span,.account-status { margin-top: 4px; color: #9da9b8; font-size: 9px; }
    .account-status { grid-column: 1 / -1; }
    #magnetGoogleDisconnect { padding: 9px 11px; border: 1px solid rgba(255,117,111,.42); background: rgba(255,117,111,.12); color: #ffaaa6; box-shadow: none; }
    #magnetGoogleDisconnect[hidden],#magnetGoogleSignin[hidden] { display: none; }
    .ranking-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ranking-head h2,.ranking-head b { margin: 0; color: #dce3eb; font-size: 11px; letter-spacing: .07em; }
    .ranking-head span { color: #75f3ff; font-size: 9px; font-weight: 900; }
    .ranking-list { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
    .ranking-list li { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.055); color: #aeb8c5; font-size: 10px; }
    .ranking-list li.current { outline: 1px solid var(--yellow); background: rgba(255,216,77,.1); }
    .ranking-list .ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef2f6; }
    .ranking-list strong { color: var(--yellow); }
    .ranking-list .ranking-locked { grid-template-columns: 1fr; color: #9da9b8; text-align: center; }

    @keyframes bob { 50% { transform: translateY(-5px); } }
    @keyframes tab-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    .end-card {
      position: fixed;
      inset: 50% auto auto 50%;
      z-index: 5;
      width: min(88vw, 390px);
      max-height: 92vh;
      overflow: auto;
      padding: 24px;
      border: 3px solid rgba(255, 255, 255, .16);
      border-radius: 24px;
      background: rgba(20, 24, 32, .95);
      color: white;
      text-align: center;
      box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
      transform: translate(-50%, -50%) scale(.9);
      opacity: 0;
      pointer-events: none;
      transition: .25s ease;
    }

    .end-card.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }

    .end-card h1 {
      margin: 0;
      color: var(--yellow);
      font-size: 38px;
      letter-spacing: -.06em;
    }

    .end-card p { color: #bbc2ce; }

    .reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 12px; }
    .reward-card { display: flex; align-items: center; gap: 9px; padding: 11px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.07); text-align: left; }
    .reward-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: rgba(255,216,77,.14); font-size: 21px; }
    .reward-card small { display: block; color: #aeb8c8; font-size: 8px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
    .reward-card b { display: block; margin-top: 3px; color: white; font-size: 20px; line-height: 1; }
    .reward-card:last-child b { color: #7fe6ff; }
    .reward-card em { display: block; margin-top: 4px; color: #b7c4d2; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .05em; }

    .stage-select { margin: 13px 0; padding: 11px; border: 1px solid rgba(127,230,255,.2); border-radius: 15px; background: rgba(127,230,255,.06); }
    .end-character-select { margin: 12px 0; padding: 11px; border: 1px solid rgba(255,216,77,.18); border-radius: 15px; background: rgba(255,216,77,.055); text-align: left; }
    .end-character-select > b { display: block; margin-bottom: 9px; color: var(--yellow); font-size: 11px; letter-spacing: .08em; }
    .end-ranking { margin: 12px 0; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.055); text-align: left; }
    .stage-select-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; text-align: left; }
    .stage-select-head b { color: #7fe6ff; font-size: 11px; letter-spacing: .09em; }
    .stage-select-head span { color: var(--yellow); font-size: 8px; font-weight: 900; text-align: right; }
    .stage-buttons { display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 9px; scroll-snap-type: x mandatory; scrollbar-width: thin; touch-action: pan-x; }
    .stage-button { flex: 0 0 clamp(124px, 27vw, 166px); width: clamp(124px, 27vw, 166px); min-height: 82px; padding: 8px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: #303947; color: white; box-shadow: 0 4px 0 #171c24; scroll-snap-align: start; }
    .stage-button small, .stage-button strong, .stage-button span { display: block; }
    .stage-button small { color: #9da9b8; font-size: 8px; letter-spacing: .08em; }
    .stage-button strong { margin-top: 5px; color: var(--yellow); font-size: 11px; line-height: 1.05; }
    .stage-button span { margin-top: 6px; color: #c7d0db; font-size: 7px; line-height: 1.25; }
    .stage-button.current { border-color: rgba(255,216,77,.7); background: rgba(255,216,77,.12); }
    .stage-button.new { border-color: #7fe6ff; box-shadow: 0 0 0 2px rgba(127,230,255,.16), 0 4px 0 #234d5a; }
    .stage-button:disabled { background: #232831; color: #7f8791; }

    button {
      width: 100%;
      border: 0;
      border-radius: 15px;
      padding: 14px 18px;
      background: var(--yellow);
      color: #28210b;
      font: inherit;
      font-size: 16px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 7px 0 #bf8d18;
    }

    button:active { transform: translateY(4px); box-shadow: 0 3px 0 #bf8d18; }
    button:disabled { opacity: .42; cursor: not-allowed; }

    .dev-toggle {
      position: fixed;
      right: 14px;
      top: 150px;
      z-index: 19;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 2px solid rgba(255,255,255,.22);
      border-radius: 14px;
      background: rgba(21,25,34,.9);
      color: var(--yellow);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

    .dev-panel {
      position: fixed;
      top: 200px;
      right: 14px;
      z-index: 18;
      width: min(330px, calc(100vw - 28px));
      max-height: calc(100vh - 214px);
      overflow: auto;
      padding: 14px;
      border: 2px solid rgba(255,255,255,.16);
      border-radius: 18px;
      background: rgba(17,21,28,.96);
      color: #fff;
      box-shadow: 0 20px 60px rgba(0,0,0,.42);
      transform: translateX(calc(100% + 24px));
      transition: transform .2s ease;
    }

    .dev-panel.show { transform: translateX(0); }
    .dev-panel h2 { margin: 0 0 3px; font-size: 17px; color: var(--yellow); }
    .dev-panel > p { margin: 0 0 12px; color: #aeb6c3; font-size: 11px; }
    .dev-setting { display: grid; grid-template-columns: 1fr 64px; gap: 5px 10px; margin: 11px 0; }
    .dev-setting label { font-size: 12px; font-weight: 800; }
    .dev-setting output { text-align: right; color: var(--yellow); font-size: 12px; font-weight: 900; }
    .dev-setting input { grid-column: 1 / -1; width: 100%; accent-color: var(--yellow); }
    .dev-temp-status { margin: 10px 0 0; color: #7fe6ff; font-size: 10px; font-weight: 800; }
    .dev-measurement { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); }
    .dev-measurement-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .dev-measurement h3 { margin: 0; color: #fff; font-size: 12px; letter-spacing: .1em; }
    .dev-measurement-head output { color: var(--yellow); font-size: 10px; font-weight: 900; }
    .dev-measurement-help { margin: 5px 0 10px; color: #9da9b8; font-size: 10px; line-height: 1.35; }
    .measurement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .measurement-card { padding: 9px; border: 1px solid rgba(127,230,255,.18); border-radius: 11px; background: rgba(127,230,255,.06); }
    .measurement-card b { display: block; color: #7fe6ff; font-size: 9px; letter-spacing: .12em; }
    .measurement-card strong { display: block; margin-top: 5px; color: #fff; font-size: 17px; line-height: 1; }
    .measurement-card span { display: block; margin-top: 5px; color: #b7c4d2; font-size: 9px; font-weight: 800; }
    .measurement-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .measurement-actions button { padding: 9px 7px; font-size: 10px; border-radius: 10px; box-shadow: 0 4px 0 #bf8d18; }
    .measurement-actions button:last-child { background: #303945; color: #dfe6ed; box-shadow: 0 4px 0 #161b22; }
    .dev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .dev-actions button { padding: 10px; font-size: 12px; border-radius: 11px; box-shadow: 0 4px 0 #bf8d18; }

    .level-up {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(9,12,17,.78);
      backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }

    .level-up.show { opacity: 1; pointer-events: auto; }
    .level-box { width: min(880px, 100%); text-align: center; color: white; }
    .level-box h2 { margin: 0; color: var(--yellow); font-size: clamp(30px, 7vw, 56px); letter-spacing: -.05em; }
    .level-box > p { margin: 5px 0 18px; color: #c9d0da; }
    .upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .upgrade-card { display: flex; flex-direction: column; min-height: 245px; padding: 18px 16px; text-align: center; color: white; background: #252c37; box-shadow: 0 7px 0 #11161d; }
    .upgrade-card small { color: #aeb9c9; font-size: 12px; letter-spacing: .08em; }
    .upgrade-card strong { display: block; margin: 11px 0 12px; color: var(--yellow); font-size: 23px; line-height: 1.1; }
    .upgrade-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 12px auto 0; border-radius: 16px; background: rgba(255,216,77,.13); font-size: 42px; line-height: 1; }
    .upgrade-card > span { display: block; color: #e1e6ed; font-size: 15px; line-height: 1.42; }
    .upgrade-card em { display: block; margin-top: auto; padding-top: 14px; color: #7fe6ff; font-size: 13px; line-height: 1.2; font-style: normal; }

    .currency-guide { display: grid; gap: 7px; margin: 12px 0; text-align: left; }
    .currency-guide div { padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.07); }
    .currency-guide b { display: block; color: var(--yellow); font-size: 11px; }
    .currency-guide span { display: block; margin-top: 3px; color: #bdc6d2; font-size: 10px; line-height: 1.35; }
    .meta-summary { margin: 12px 0; padding: 10px; border: 1px solid rgba(117,243,255,.16); border-radius: 12px; background: rgba(117,243,255,.07); color: #d7dde5; font-size: 12px; font-weight: 900; }
    .meta-actions { display: grid; grid-template-columns: 1fr; align-items: start; gap: 8px; margin-bottom: 12px; }

    @media (max-width: 620px) {
      .hud { padding: 10px; }
      .topbar { gap: 8px; }
      .brand { padding: 8px 10px; }
      .brand span { display: none; }
      .stats { gap: 8px; padding: 8px 9px; }
      .stat small { font-size: 8px; }
      .stat b { font-size: 15px; }
      .health-stat { min-width: 54px; }
      .bottom { padding-right: 118px; }
      .hint { margin-bottom: 110px; padding: 10px 12px; white-space: normal; }
      .mission { width: 100%; }
      .joystick-base { width: 96px; height: 96px; }
      .joystick-knob { width: 46px; height: 46px; }
      .game-actions { left: 10px; top: 140px; }
      .reward-exit { top: 118px; right: 10px; min-width: 96px; padding: 10px 12px; }
      .pause-card { padding: 15px; }
      .pause-actions { grid-template-columns: 1fr 1fr; }
      .pause-actions .danger { grid-column: 1 / -1; }
      .quick-settings { gap: 8px; }
      .account-card { grid-template-columns: 1fr; }
      .account-status { grid-column: auto; }
      .status-grid { grid-template-columns: repeat(2, 1fr); }
      .meta-actions { grid-template-columns: 1fr; }
      .meta-upgrade-card { padding: 11px; border-radius: 13px; }
      .meta-upgrade-copy { min-height: 50px; padding-right: 64px; }
      .meta-transaction-footer { grid-template-columns: minmax(0, 1fr) 82px; }
      .dev-toggle { top: 140px; right: 10px; }
      .dev-panel { top: 190px; right: 10px; max-height: calc(100vh - 200px); }
      .upgrade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: none; overflow: visible; padding: 2px; }
      .upgrade-card { min-height: 260px; padding: 12px 8px; box-shadow: 0 4px 0 #11161d; }
      .upgrade-card small { font-size: 9px; letter-spacing: .03em; }
      .upgrade-card strong { margin: 9px 0 10px; font-size: 15px; line-height: 1.12; }
      .upgrade-icon { width: 48px; height: 48px; margin-top: 10px; border-radius: 12px; font-size: 31px; }
      .upgrade-card > span { font-size: 11px; line-height: 1.3; }
      .upgrade-card em { padding-top: 10px; font-size: 9px; line-height: 1.15; }
      .reward-grid { gap: 7px; }
      .reward-card { gap: 6px; padding: 9px 7px; }
      .reward-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: 18px; }
      .reward-card small { font-size: 7px; letter-spacing: .04em; }
      .reward-card b { font-size: 17px; }
      .stage-select { padding: 9px 7px; }
      .stage-select-head { display: block; }
      .stage-select-head span { display: block; margin-top: 4px; text-align: left; }
      .stage-buttons { gap: 5px; }
      .stage-button { min-height: 76px; padding: 7px 4px; }
      .stage-button strong { font-size: 10px; }
      .stage-button span { font-size: 6px; }
      .character-card { min-height: 178px; padding: 13px 11px; }
      .character-card .character-card-icon { width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; font-size: 40px; }
    }

    @media (max-width: 460px) {
      .pause-tab-panel[data-pause-panel="permanent"] .status-grid { grid-template-columns: 1fr; }
    }