:root {
        --bg: #070a14;
        --ink: #eef2ff;
        --dim: #7c87a8;
        --cyan: #38f0e0;
        --gold: #ffcf4d;
        --mag: #ff4d8d;
        --haz: #ff3b5c;
        --panel: rgba(12, 16, 30, 0.72);
        --line: rgba(120, 140, 200, 0.18);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        background: var(--bg);
        overflow: hidden;
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
        touch-action: auto;
        user-select: none;
        -webkit-user-select: none;
      }
      #stage {
        position: fixed;
        inset: 0;
      }
      canvas {
        touch-action: none;
        display: block;
        width: 100%;
        height: 100%;
      }

      /* ---------- HUD ---------- */
      #hud {
        position: fixed;
        inset: 0;
        pointer-events: none;
        padding: calc(18px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 18px calc(22px + env(safe-area-inset-left));
        padding-right: calc(122px + env(safe-area-inset-right));
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .hud-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
      }
      .stat {
        font-variant-numeric: tabular-nums;
        line-height: 1;
      }
      .stat .k {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: var(--dim);
        text-transform: uppercase;
      }
      .stat .v {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-top: 3px;
      }
      .stat .v small {
        font-size: 14px;
        color: var(--dim);
        font-weight: 600;
      }
      .right {
        text-align: right;
      }

      #flowwrap {
        position: fixed;
        left: 22px;
        bottom: 22px;
        width: min(46vw, 360px);
        pointer-events: none;
      }
      #flowlabel {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--dim);
        margin-bottom: 6px;
      }
      #flowtier {
        color: var(--cyan);
        font-weight: 800;
        transition: color 0.25s;
      }
      #flowbar {
        height: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.04);
      }
      #flowfill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--cyan), var(--gold));
        transition:
          width 0.08s linear,
          background 0.3s;
      }

      #combo {
        position: fixed;
        right: 22px;
        bottom: 22px;
        text-align: right;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
      }
      #combo .n {
        font-size: 46px;
        font-weight: 900;
        letter-spacing: -0.03em;
        color: var(--gold);
        text-shadow: 0 0 24px rgba(255, 207, 77, 0.5);
      }
      #combo .l {
        font-size: 11px;
        letter-spacing: 0.22em;
        color: var(--dim);
        text-transform: uppercase;
      }

      /* ---------- overlays ---------- */
      .screen {
        touch-action: pan-y;
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 24px 0;
        background:
          radial-gradient(
            120% 120% at 50% 0%,
            rgba(56, 240, 224, 0.07),
            transparent 55%
          ),
          rgba(7, 10, 20, 0.86);
        backdrop-filter: blur(3px);
        z-index: 20;
      }
      .hidden {
        display: none !important;
      }
      .card {
        width: min(560px, 92vw);
        text-align: center;
        padding: 8px 6px;
        margin: auto;
      }
      .eyebrow {
        font-size: 12px;
        letter-spacing: 0.4em;
        color: var(--cyan);
        text-transform: uppercase;
        margin-bottom: 14px;
      }
      .brand-logo {
        display: block;
        width: clamp(76px, 12vh, 116px);
        height: auto;
        margin: 0 auto 18px;
        border-radius: 18px;
      }
      #paused .brand-logo { width: 64px; margin-bottom: 16px; }
      #paused .title { font-size: clamp(46px, 10vw, 92px); }
      @media (max-height: 600px) {
        #menu .brand-logo { width: 64px; margin-bottom: 12px; }
      }
      .title {
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-weight: 900;
        font-size: clamp(64px, 16vw, 150px);
        line-height: 0.82;
        letter-spacing: -0.04em;
        background: linear-gradient(
          180deg,
          #fff 0%,
          var(--cyan) 60%,
          var(--mag) 130%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 8px 40px rgba(56, 240, 224, 0.25));
      }
      .tag {
        color: var(--dim);
        font-size: 15px;
        margin: 18px auto 0;
        max-width: 420px;
        line-height: 1.6;
      }
      /* Keep the initial actions visible; longer guidance has its own dialog. */
      #menu { padding: 16px 0; }
      #menu .card { width: min(820px, 92vw); padding: 0; }
      .menu-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
      .menu-identity { display: flex; justify-content: center; align-items: center; gap: 14px; }
      #menu .brand-logo { width: 64px; margin: 0; border-radius: 14px; flex: 0 0 auto; }
      #menu .title { font-size: clamp(48px, 6.8vw, 76px); }
      #menu .eyebrow { font-size: 10px; letter-spacing: .24em; margin: 0 0 10px; }
      #menu .tag { margin-top: 18px; font-size: 14px; line-height: 1.5; max-width: 340px; }
      .menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
      #menu .btn { margin: 0; min-height: 44px; }
      #menu #touch-toggle { font-size: 12px; padding: 10px 14px; }
      #menu .keys { margin: 20px auto 16px; gap: 12px 16px; }
      #menu .keys div { font-size: 12px; align-items: center; gap: 6px; }
      #menu kbd { white-space: nowrap; padding: 2px 5px; }
      #menu #help-open { font-size: 12px; padding: 10px 16px; }
      dialog { margin: auto; width: min(520px, 92vw); max-height: 90dvh; overflow-y: auto; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #101829; color: var(--ink); }
      dialog::backdrop { background: #030711d9; backdrop-filter: blur(5px); }
      dialog h2 { color: var(--cyan); font-size: 24px; }
      dialog p { margin-top: 16px; color: var(--ink); font-size: 14px; line-height: 1.6; }
      dialog .btn { margin-top: 22px; min-height: 44px; }
      @media (max-width: 620px) {
        .menu-layout { grid-template-columns: 1fr; gap: 22px; }
        #menu .tag { margin-top: 14px; }
        #menu .keys { max-width: 340px; margin-top: 18px; }
      }
      @media (max-height: 480px) and (min-width: 621px) {
        #menu .card { width: min(820px, 94vw); }
        .menu-layout { gap: 24px; }
        #menu .brand-logo { width: 56px; }
        #menu .title { font-size: 58px; }
        #menu .keys { margin: 14px auto 12px; }
      }
      .keys {
        margin: 26px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 26px;
        max-width: 430px;
        text-align: left;
      }
      .keys div {
        font-size: 13px;
        color: var(--dim);
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px dashed var(--line);
        padding-bottom: 7px;
      }
      .keys b {
        color: var(--ink);
        font-weight: 700;
      }
      kbd {
        font: inherit;
        font-size: 11px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid var(--line);
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 2px 7px;
        color: var(--ink);
      }
      .btn {
        margin-top: 30px;
        pointer-events: auto;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font: inherit;
        font-weight: 800;
        letter-spacing: 0.05em;
        font-size: 16px;
        color: #04121a;
        background: linear-gradient(120deg, var(--cyan), #8df7c8);
        border: none;
        border-radius: 12px;
        padding: 15px 30px;
        box-shadow: 0 10px 40px rgba(56, 240, 224, 0.3);
        transition:
          transform 0.12s,
          box-shadow 0.12s;
      }
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 50px rgba(56, 240, 224, 0.45);
      }
      .btn:active {
        transform: translateY(0);
      }
      .ghost {
        background: transparent;
        color: var(--dim);
        box-shadow: none;
        border: 1px solid var(--line);
        margin-left: 10px;
      }
      .ghost:hover {
        color: var(--ink);
        box-shadow: none;
      }

      .results {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin: 24px auto 6px;
        max-width: 420px;
      }
      .res {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 16px;
        text-align: left;
        background: rgba(255, 255, 255, 0.02);
      }
      .res .k {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: var(--dim);
        text-transform: uppercase;
      }
      .res .v {
        font-size: 30px;
        font-weight: 900;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
      }
      .res .v.big {
        color: var(--gold);
      }
      .newbest {
        color: var(--gold);
        font-weight: 800;
        letter-spacing: 0.2em;
        font-size: 12px;
        margin-top: 16px;
        text-transform: uppercase;
        display: none;
      }

      /* ---------- touch controls ---------- */
      #touch {
        position: fixed;
        inset: 0;
        z-index: 15;
        display: none;
        pointer-events: none;
      }
      .tbtn {
        position: absolute;
        pointer-events: auto;
        border: 1px solid var(--line);
        background: rgba(20, 26, 46, 0.55);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.1em;
        backdrop-filter: blur(4px);
      }
      .tbtn { touch-action: none; -webkit-touch-callout: none; }
      .tbtn:active {
        background: rgba(56, 240, 224, 0.25);
      }
      #t-left, #t-right { bottom: calc(22px + env(safe-area-inset-bottom)); width: 60px; height: 60px; }
      #t-left { left: calc(12px + env(safe-area-inset-left)); }
      #t-right { left: calc(80px + env(safe-area-inset-left)); }
      #t-jump { right: calc(12px + env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); width: 66px; height: 66px; border-radius: 50%; }
      #t-carve { right: calc(12px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); width: 82px; height: 82px; border-radius: 50%; border-color: var(--cyan); color: var(--cyan); }
      #t-surge { right: calc(90px + env(safe-area-inset-right)); bottom: calc(124px + env(safe-area-inset-bottom)); width: 62px; height: 62px; border-radius: 50%; font-size: 11px; }
      .istouch #flowwrap { bottom: 216px; width: 140px; left: 12px; }
      .istouch #combo { bottom: 216px; right: 12px; }
      .toolbar { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 16; }
      .toolbar .pausebtn { position: static; }
      .pausebtn:focus-visible, .tbtn:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
      @media (min-width: 700px) and (min-height: 600px) {
        .istouch .tbtn { transform: scale(1.15); transform-origin: bottom right; }
        .istouch #t-left, .istouch #t-right { transform-origin: bottom left; }
        .istouch #t-right { left: calc(90px + env(safe-area-inset-left)); }
        .istouch #t-jump { bottom: calc(138px + env(safe-area-inset-bottom)); }
        .istouch #t-surge { right: calc(106px + env(safe-area-inset-right)); bottom: calc(140px + env(safe-area-inset-bottom)); }
      }
      @media (max-height: 480px) {
        #coach { top: calc(72px + env(safe-area-inset-top)) !important; max-width: 52vw; font-size: 11px !important; }

        .istouch #flowwrap, .istouch #combo { bottom: auto; top: 76px; }
      }
      .istouch #touch {
        display: block;
      }
      @media (pointer: coarse) {
        #touch {
          display: block;
        }
      }

      .pausebtn {
        position: fixed;
        top: 16px;
        right: 18px;
        z-index: 16;
        pointer-events: auto;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--panel);
        color: var(--dim);
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pausebtn:hover {
        color: var(--ink);
      }
      @media (max-width: 620px) {
        .hud-top { gap: 8px; }
        .stat .v {
          font-size: clamp(14px, 4.5vw, 22px);
        }
        .keys {
          grid-template-columns: 1fr;
        }
      }

      /* Expedition interface. */
      #expedition-status, #contractline { position:fixed; left:18px; right:18px; text-align:center; z-index:7; pointer-events:none; font-size:11px; line-height:1.5; }
      #expedition-status { top:calc(72px + env(safe-area-inset-top)); color:#d2bcff; letter-spacing:.04em; }
      #contractline { top:calc(96px + env(safe-area-inset-top)); color:var(--gold); }
      #coach { top:calc(135px + env(safe-area-inset-top)) !important; font-size:12px !important; }
      #ability { position:fixed; left:calc(12px + env(safe-area-inset-left)); bottom:calc(112px + env(safe-area-inset-bottom)); z-index:16; max-width:154px; min-height:60px; padding:12px; margin:0; font-size:12px; border:1px solid #ffcf4d; background:#201b35e8; color:#ffe7a0; box-shadow:none; touch-action:manipulation; }
      #portal-enter { position:fixed; left:50%; transform:translateX(-50%); top:calc(198px + env(safe-area-inset-top)); z-index:16; white-space:nowrap; padding:13px 18px; margin:0; background:#cfb0ff; font-size:12px; box-shadow:0 0 28px #a776ff44; }
      .btn:disabled { opacity:.45; cursor:default; transform:none; }
      .name-label { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--dim); font-size:12px; grid-column:1/-1; }
      #climber-name { width:150px; border:1px solid var(--line); border-radius:9px; padding:9px 10px; background:#111b30; color:var(--ink); font:inherit; user-select:text; }
      .menu-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
      .menu-actions .btn { margin:0; }
      .menu-options { display:flex; justify-content:center; gap:8px; width:100%; }
      #mode-open, #touch-toggle { font-size:12px; padding:10px 12px; }
      #run-mode-status { position:fixed; left:calc(12px + env(safe-area-inset-left)); bottom:calc(184px + env(safe-area-inset-bottom)); width:154px; padding:6px; z-index:16; border:1px solid #66543b; border-radius:8px; background:#101829ed; color:var(--gold); font-size:12px; text-align:center; pointer-events:none; }
      #mode-dialog .btn { display:block; width:100%; margin-right:0; }
      #mode-dialog p { font-size:13px; }
      #challenge-result[open], #mode-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; }
      #challenge-result h2 { font-size:28px; }
      #challenge-result .result-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; font-size:12px; color:var(--dim); }
      #challenge-result .result-stats strong { display:block; color:var(--ink); font-size:24px; margin-top:5px; }
      .record-tabs { display:flex; gap:8px; }
      .record-tabs .btn { flex:1; min-width:0; padding:10px; font-size:12px; }
      .record-tabs [aria-pressed="true"] { border-color:var(--gold); color:var(--gold); }
      @media(max-height:480px) { #run-mode-status { bottom:164px; } }
      .expedition-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
      .expedition-links .btn { margin:12px 0 0; padding:10px 14px; min-height:42px; font-size:12px; }
      #menu-progress { color:var(--gold); font-size:11px; line-height:1.6; margin-top:12px; }
      .skill-grid article { border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:14px; }
      .skill-grid h3 { color:#ffe7a0; font-size:16px; }
      dialog { max-height:84dvh; }
      #record-rows { margin-top:18px; list-style:none; }
      #record-rows li { padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.6; }
      #rift-dialog[open],#relic-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; }
      #relic-dialog .eyebrow { margin:0 0 6px; }
      #relic-dialog h2 { margin:6px 0; font-size:22px; }
      #relic-dialog p { margin-top:10px; font-size:13px; line-height:1.45; }
      #relic-choices { display:grid; gap:8px; margin:12px 0; }
      #relic-choices .btn { width:100%; margin:0; padding:10px; text-align:left; font-size:13px; white-space:pre-line; line-height:1.4; }
      #relic-inventory { white-space:pre-line; font-size:13px; }
      @media(max-width:480px) {
        #relic-dialog { max-height:94dvh; }
        #relic-dialog .eyebrow { font-size:10px; letter-spacing:2px; }
        #relic-dialog h2 { font-size:20px; }
        #relic-dialog p { font-size:12px; margin-top:8px; }
        #relic-choices .btn { font-size:12px; line-height:1.35; padding:9px; min-height:48px; }
      }
      @media(max-height:480px) and (min-width:560px) {
        #relic-dialog { width:min(760px,94vw); max-height:94dvh; }
        #relic-dialog .rift-body { padding:14px 18px 0; }
        #relic-dialog .rift-actions { padding:10px 18px; }
        #relic-dialog h2 { font-size:20px; }
        #relic-dialog p { margin-top:6px; font-size:12px; }
        #relic-dialog .eyebrow { font-size:10px; letter-spacing:2px; }
        #relic-choices { grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0; }
        #relic-choices .btn { font-size:12px; padding:9px; }
      }
      .rift-body { overflow-y:auto; min-height:0; padding:26px 26px 0; overscroll-behavior:contain; }
      .rift-actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; padding:18px 26px 22px; background:#101829; border-top:1px solid var(--line); }
      .rift-actions > .btn { flex:1 1 180px; min-width:0; margin:0; padding:12px; font-size:14px; }
      .rift-actions #memory-trial { width:100%; }
      .rift-actions .glyph { margin:0; }
      @media(max-width:480px) { .rift-body { padding:18px 18px 0; } .rift-actions { padding:14px 18px 18px; } #rift-dialog h2 { font-size:22px; } }
      .rift-track { position:relative; height:44px; margin-top:24px; background:#080d20; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
      .gold-band { position:absolute; top:0; bottom:0; left:34%; width:32%; background:#ffcf4d55; border-inline:2px solid #ffcf4d; }
      #rift-cursor { position:absolute; width:6px; height:100%; top:0; background:#eef2ff; transform:translateX(-50%); box-shadow:0 0 16px #fff; }
      #memory-trial { display:flex; gap:8px; }
      @media(max-width:380px) { #expedition-status { font-size:10px; letter-spacing:0; } }
      @media(max-height:480px) and (min-width:560px) { #expedition-status { left:160px; right:120px; font-size:10px; } }
      .glyph { flex:1; min-width:0; justify-content:center; font-size:28px; padding:14px 8px; margin-right:0; }
      @media(max-width:620px) { .menu-layout { padding-top:14px; padding-bottom:16px; } .menu-layout .keys { display:none; } .menu-layout .title { font-size:60px; } .menu-layout .brand-logo { width:66px; height:66px; } #menu-progress { font-size:10px; } }
      @media(max-height:480px) { #expedition-status { top:58px; } #contractline { display:none; } #coach { top:85px !important; max-width:44vw; font-size:10px !important; } #portal-enter { top:auto; bottom:22px; } #ability { bottom:104px; max-width:130px; min-height:48px; } .istouch #flowwrap,.istouch #combo { top:62px; } }

      /* Keep optional portal actions beside touch controls, clear of the climbing view. */
      .istouch:not(.one-thumb) #portal-enter { top:auto; bottom:calc(26px + env(safe-area-inset-bottom)); left:calc(148px + env(safe-area-inset-left)); transform:none; width:74px; min-height:58px; padding:7px; white-space:normal; font-size:11px; }
      @media(min-width:700px) and (min-height:600px) { .istouch:not(.one-thumb) #portal-enter { left:calc(172px + env(safe-area-inset-left)); width:100px; } }

      /* One owned contact combines proportional steering and manual CARVE. */
      #one-pad { display:none; width:min(260px,calc(100vw - 32px)); height:132px; right:calc(16px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); flex-direction:column; gap:8px; border-color:var(--cyan); border-radius:28px; font-size:14px; }
      #one-feedback { font-size:11px; font-weight:400; letter-spacing:0; color:var(--gold); }
      #one-timing { position:relative; display:block; width:84%; height:12px; flex-shrink:0; overflow:hidden; border:1px solid #63728b; border-radius:6px; background:#142033; opacity:.45; }
      #one-timing > span { position:absolute; top:0; bottom:0; pointer-events:none; }
      #one-good { background:#38f0e044; }
      #one-perfect { background:#ffcf4d99; }
      #one-marker { width:3px; background:#fff; transform:translateX(-50%); }
      #one-pad[data-charging="true"] #one-timing { opacity:1; }
      #one-pad[data-quality="perfect"] { border-color:var(--gold); }
      #one-pad[data-quality="late"] { border-color:#ff8a5a; }
      .one-thumb #one-pad { display:flex; transform:none; }
      .one-thumb #t-left,.one-thumb #t-right,.one-thumb #t-jump,.one-thumb #t-carve { display:none; }
      .one-thumb #t-surge { right:calc(156px + env(safe-area-inset-right)); bottom:calc(164px + env(safe-area-inset-bottom)); width:120px; height:48px; border-radius:12px; transform:none; }
      .one-thumb #ability { left:auto; right:calc(16px + env(safe-area-inset-right)); bottom:calc(164px + env(safe-area-inset-bottom)); width:132px; max-width:132px; min-height:48px; padding:8px; }
      .one-thumb #run-mode-status { bottom:calc(224px + env(safe-area-inset-bottom)); }
      .one-thumb #flowwrap { bottom:calc(264px + env(safe-area-inset-bottom)); }
      .one-thumb #combo { bottom:264px; }
      .one-thumb #portal-enter { top:auto; bottom:calc(224px + env(safe-area-inset-bottom)); left:auto; right:calc(16px + env(safe-area-inset-right)); transform:none; width:132px; white-space:normal; padding:8px; min-height:44px; }
      .one-thumb.left-hand #one-pad,.one-thumb.left-hand #ability,.one-thumb.left-hand #portal-enter { right:auto; left:calc(16px + env(safe-area-inset-left)); }
      .one-thumb.left-hand #t-surge { right:auto; left:calc(156px + env(safe-area-inset-left)); }
      .one-thumb.left-hand #run-mode-status { left:auto; right:calc(12px + env(safe-area-inset-right)); }
      #controls-dialog[open], #previous-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; }
      #previous-records { padding-left:20px; font-size:13px; line-height:1.6; }
      #previous-records li { margin:8px 0; }
      #controls-dialog .control-options { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
      #controls-dialog .control-options .btn { flex:1; min-width:110px; margin:0; padding:12px; font-size:12px; }
      #controls-dialog [aria-pressed="true"] { border-color:var(--gold); color:var(--gold); }
      @media(max-height:480px) {
        .one-thumb #one-pad { height:94px; bottom:12px; }
        .one-thumb #one-pad { gap:4px; font-size:12px; }
        #one-timing { height:10px; }
        .one-thumb #t-surge,.one-thumb #ability { bottom:116px; }
        .one-thumb #run-mode-status { bottom:172px; }
        .one-thumb #portal-enter { bottom:172px; }
        .one-thumb #flowwrap,.one-thumb #combo { top:62px; bottom:auto; }
      }
      @media(max-height:600px) {
        #paused { padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
        #paused .card { width:min(640px,94vw); padding:4px 6px; }
        #paused .brand-logo { width:40px; margin-bottom:6px; }
        #paused .eyebrow { margin-bottom:6px; }
        #paused .title { font-size:46px; }
        #paused .tag { margin-top:10px; max-width:52ch; font-size:13px; line-height:1.4; }
        #paused .btn { margin-top:14px; min-height:44px; padding:12px 20px; }
        #paused .expedition-links .btn { margin:8px 0 0; padding:10px 14px; }
      }
          #return-layer { position:fixed; inset:0; z-index:45; display:grid; place-items:center; text-align:center; background:#070a1470; pointer-events:auto; }
      #return-layer>div { width:min(460px,88vw); padding:24px; background:#070a14eb; border:1px solid var(--line); border-radius:18px; }
      #return-layer h2 { font-size:30px; color:var(--cyan); margin:14px 0; }
      #return-layer p { font-size:15px; line-height:1.6; }
      .return-progress { height:3px; background:var(--cyan); margin-top:24px; transform-origin:left; transform:scaleX(var(--progress,0)); }
      #journal-dialog[open],#skill-dialog[open],#camp-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; }
      #journal-dialog summary { min-height:44px; box-sizing:border-box; padding:12px 0; color:var(--cyan); font-size:13px; cursor:pointer; }
      #journal-entries { padding:0 20px; font-size:13px; line-height:1.7; }
      #camp-options { display:grid; gap:12px; margin-top:18px; }
      #camp-options button:disabled { opacity:1; color:var(--ink); border-style:dashed; cursor:default; }
      #camp-options button { font-weight:400; margin:0; min-height:52px; padding:14px; text-align:left; white-space:normal; font-size:13px; line-height:1.5; }