* { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: #0b090d;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
  }
  button, select { font: inherit; color: inherit; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
  }
  .stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 430px;
    background: #000;
    overflow: hidden;
  }
  @media (min-width: 480px) {
    body { align-items: center; }
    .stage { height: min(100dvh, 932px); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.85); }
  }
  video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
  .gate {
    position: absolute; inset: 0; z-index: 20;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    background-color: #100d11;
    background-image:
      linear-gradient(180deg, rgba(16,13,17,.05) 0%, rgba(16,13,17,.2) 42%, rgba(16,13,17,.88) 78%, rgba(16,13,17,.96) 100%),
      var(--cover);
    background-size: cover;
    background-position: center;
  }
  .gate[hidden], .panel[hidden], .ending[hidden], .map[hidden], .big[hidden], .skip[hidden], .hud[hidden], .error[hidden] { display: none !important; }
  .hint { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.72); text-align: center; }
  .primary, .ghost {
    width: 100%; border: 0; border-radius: 999px; padding: 14px 16px; cursor: pointer; font-weight: 700;
  }
  .primary { background: linear-gradient(135deg, #f19eb8, #e07297); color: #14080d; }
  .primary + .ghost, .ghost + .ghost, .actions .ghost { margin-top: 10px; }
  .ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
  .layer {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,.88) 100%);
    pointer-events: none;
  }
  .layer > * { pointer-events: auto; }
  .top, .top-right { display: flex; align-items: center; gap: 6px; }
  .top { justify-content: space-between; }
  .pill {
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.12);
    color: #fff; border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer;
    backdrop-filter: blur(12px);
  }
  .pill.on { background: rgba(241,158,184,.28); border-color: rgba(241,158,184,.7); }
  .act { font-size: 13px; color: rgba(255,255,255,.88); }
  .bottom { display: flex; flex-direction: column; gap: 10px; }
  .sub {
    align-self: center; max-width: 92%; text-align: center; font-size: 15px; font-weight: 650;
    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.9);
    background: rgba(0,0,0,.5); border-radius: 8px; padding: 6px 12px;
  }
  .question { font-size: 20px; font-weight: 750; line-height: 1.35; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
  .options { display: flex; flex-direction: column; gap: 10px; }
  .option {
    width: 100%; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    background: rgba(26,20,28,.72); border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(14px);
  }
  .option:active { transform: scale(.985); }
  .key {
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    background: #f19eb8; color: #120509; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .label { flex: 1; font-size: 15px; line-height: 1.35; }
  .tag { font-size: 12px; color: #f3d082; white-space: nowrap; }
  .hud { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.86); }
  .hud button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 14px; }
  .track { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); cursor: pointer; }
  .track i { display: block; height: 100%; width: 0; border-radius: inherit; background: #f19eb8; }
  .big, .skip {
    position: absolute; z-index: 6; border: 0; cursor: pointer; color: #fff;
  }
  .big {
    left: 50%; top: 46%; transform: translate(-50%, -50%);
    width: 74px; height: 74px; border-radius: 50%;
    background: rgba(0,0,0,.45); font-size: 28px;
  }
  .skip {
    right: 14px; bottom: 108px;
    border-radius: 999px; padding: 6px 12px; font-size: 13px;
    background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2);
  }
  .ending {
    position: absolute; inset: 0; z-index: 8;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 72px 20px calc(22px + env(safe-area-inset-bottom));
    background: rgba(12,10,15,.72); backdrop-filter: blur(6px);
  }
  .stamp { font-size: 34px; font-weight: 900; letter-spacing: .5px; line-height: 1; }
  .stamp span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #bbb; letter-spacing: 0; }
  .ending h2 { margin: 14px 0 10px; font-size: 24px; }
  .why { font-size: 14px; line-height: 1.6; color: #ddd; }
  .mistake {
    margin-top: 14px; padding: 12px; border-radius: 10px;
    background: rgba(60,20,25,.75); border: 1px solid rgba(229,77,66,.4);
    color: #f5a4a0; font-size: 13px; line-height: 1.45;
  }
  .dots { display: flex; gap: 4px; margin-top: 16px; }
  .dots b { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.2); }
  .dots b[data-got="yes"][data-kind="early"] { background: #e54d42; }
  .dots b[data-got="yes"][data-kind="normal"] { background: #d7c08a; }
  .dots b[data-got="yes"][data-kind="good"] { background: #f19eb8; }
  .dots b[data-got="yes"][data-kind="true"] { background: #f3d082; }
  .collected { margin: 8px 0 14px; font-size: 12px; color: #aaa; }
  .ending .primary, .ending .ghost { pointer-events: auto; }
  .ending .row { display: flex; gap: 10px; margin-top: 10px; }
  .row .ghost { margin-top: 0; }
  .map {
    position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.72);
    display: flex; align-items: flex-end;
  }
  .card {
    width: 100%; max-height: 80%; overflow: auto;
    background: #18141d; border-radius: 20px 20px 0 0; padding: 18px 18px 28px;
  }
  .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .card-head h2 { font-size: 17px; }
  .map-list { list-style: none; }
  .map-list li { position: relative; margin: 0 0 16px 8px; padding-left: 16px; border-left: 2px solid rgba(255,255,255,.12); }
  .map-list li::before {
    content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #f19eb8;
  }
  .map-list li[data-reached="no"]::before { background: #444; }
  .map-list strong { display: block; margin-bottom: 8px; }
  .branches { display: flex; flex-wrap: wrap; gap: 6px; }
  .branches span, .jump {
    font-size: 12px; border-radius: 999px; padding: 5px 10px; background: rgba(255,255,255,.08); color: #ccc;
  }
  .branches span[data-picked="yes"] { color: #fff; background: rgba(241,158,184,.2); }
  .jump { margin-top: 8px; border: 0; color: #fff; cursor: pointer; }
  .error {
    position: absolute; left: 16px; right: 16px; top: 46%; z-index: 7; text-align: center;
    background: rgba(0,0,0,.6); border-radius: 12px; padding: 12px; font-size: 14px;
  }

  .kicker { font-size: 13px; letter-spacing: .04em; color: #f3d082; margin-bottom: 8px; }
  .gate h1 { font-size: 26px; line-height: 1.25; margin-bottom: 10px; }
  .blurb { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); margin-bottom: 18px; }
  .options.grid { display: grid; grid-template-columns: 1fr 1fr; }
  .option:disabled { opacity: .45; cursor: default; }
  .warn { font-size: 13px; color: #f5a4a0; }