:root { --text: #f4f1ea; --muted: #b9c6d6; --gold: #ffc85c; --card: rgba(6, 18, 34, .74); --line: rgba(255,255,255,.14); --cardW: clamp(300px, 25vw, 370px); }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #c4ece6; color: var(--text); font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  canvas#sea { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; }
  canvas#sea.pointing { cursor: pointer; }
  .hud { position: fixed; left: clamp(14px, 2.2vw, 30px); top: clamp(12px, 2vh, 24px); pointer-events: none; background: rgba(6,18,34,.55); border-radius: 18px; padding: 12px 18px; }
  .leg { font-size: 13px; letter-spacing: .08em; color: #ffd9a0; font-weight: 700; }
  .q { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; margin-top: 4px; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
  .you { margin-top: 6px; font-size: 15px; color: #e8eef5; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
  .you b { color: var(--gold); }
  .score { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; }
  .score b { font-size: clamp(30px, 3.8vw, 46px); font-weight: 900; color: var(--gold); text-shadow: 0 0 24px rgba(255,200,92,.45); font-variant-numeric: tabular-nums; }
  .score .tier { font-size: 14px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.25); border: 1px solid currentColor; }
  .score .tier.pop { animation: pop .5s ease-out; }
  @keyframes pop { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
  .total { margin-top: 2px; font-size: 13px; color: var(--muted); }
  .total b { color: var(--text); font-size: 15px; }


  .relay { position: fixed; left: clamp(14px, 2.2vw, 30px); right: calc(var(--cardW) + 32px); bottom: 16px; display: flex; gap: 4px; }
  .relay div { flex: 1; height: 34px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid var(--line); position: relative; overflow: hidden; font-size: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
  .relay div i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,200,92,.15), rgba(255,200,92,.45)); transition: width 1s; }
  .relay div span { position: relative; } .relay div.now { border-color: var(--gold); color: var(--text); }

  .demo { position: fixed; right: calc(var(--cardW) + 28px); top: 14px; display: flex; gap: 6px; align-items: center; background: rgba(0,0,0,.28); border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; padding: 6px 8px; font-size: 12px; color: var(--muted); }
  .demo button { font: inherit; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; cursor: pointer; }
  .hint { position: fixed; left: calc((100vw - var(--cardW) - 16px) / 2); transform: translateX(-50%); bottom: 62px; font-size: 13px; color: #f5f7fb; background: rgba(9,22,40,.67); padding: 6px 14px; border-radius: 99px; pointer-events: none; transition: opacity .5s; }

  .card { position: fixed; right: 16px; top: 16px; bottom: 16px; width: var(--cardW); background: #0b192a; border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .card[hidden] { display: none; }
  .panel-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 17px 16px; }
  .scroll-thumb { opacity: 0; position: absolute; right: 4px; width: 3px; border-radius: 4px; background: #87a1bb; pointer-events: none; transition: opacity .2s; }
  .card.scrolling .scroll-thumb { opacity: .8; }
  .card section { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .card h2 { margin: 0 0 7px; font-size: 15px; color: #f4f1ea; }
  .panel-heading { padding: 12px 17px 8px; font-weight: 800; color: #ffe0a3; }
  .drawer-toggle { display: none; }
  .mine-summary { display: flex; align-items: center; gap: 10px; }
  .portrait { flex: 0 0 54px; width: 54px; height: 54px; }
  .portrait canvas { width: 100%; height: 100%; display: block; }
  .name { font-size: 22px; line-height: 1.2; }
  .facts, .same { font-size: 13px; color: var(--muted); margin-top: 3px; }
  .facts .t { font-weight: 800; margin-right: 8px; }
  #mineSummary { padding-top: 0; }
  .story { font-size: 13px; line-height: 1.5; margin: 5px 0 0; color: #e3e9f0; }
  .band-wrap { position: relative; margin-top: 16px; }
  .band { display: block; width: 100%; height: 14px; border-radius: 4px; cursor: crosshair; }
  .mine-marker { position: absolute; top: -10px; transform: translateX(-50%); color: #ffe0a3; font-size: 12px; line-height: 1; pointer-events: none; text-shadow: 0 0 4px #081323; }
  .band-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
  .band-tooltip { position: absolute; bottom: 22px; width: max-content; max-width: 100%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #09192b; color: #fff; font-size: 12px; pointer-events: none; }
  .rank-row { display: grid; grid-template-columns: 6.3em 1fr 3.5em; gap: 8px; align-items: center; min-height: 22px; font-size: 13px; }
  .rank-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
  .rank-bar { display: block; height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); }
  .rank-bar i { display: block; height: 100%; border-radius: inherit; }
  .discovery { font-size: 13px; line-height: 1.4; margin: 4px 0; color: #d9e4ef; }
  .discovery b { color: #e4ceff; }
  #allAnswers { margin-top: 26px; }
  #answerSearch { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #142438; font: inherit; font-size: 14px; }
  #answerList button, #answerPages button { font: inherit; color: var(--text); background: #142438; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; padding: 6px 8px; }
  #answerList button { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin-top: 5px; text-align: left; }
  #answerList button[aria-pressed="true"] { border-color: var(--gold); }
  #answerList button span:last-child { white-space: nowrap; color: var(--muted); }
  #answerPages { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; font-size: 12px; }
  #answerPages button:disabled { opacity: .4; cursor: default; }
  .panel-footer { padding: 10px 17px 13px; border-top: 1px solid var(--line); }
  .panel-footer .next { width: 100%; padding: 9px 13px; }
  .callout { position: fixed; z-index: 3; width: max-content; max-width: calc(100vw - 24px); transform: translate(-50%, -100%); text-align: center; pointer-events: none; padding: 7px 14px; color: #fff; background: rgba(6,18,34,.92); border: 1px solid rgba(255,255,255,.38); border-radius: 15px; box-shadow: 0 8px 28px #0006; }
  .callout strong { display: block; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.25; }
  .callout span { display: block; font-size: 12px; margin-top: 3px; opacity: .85; }
  .callout b { display: inline-block; font-size: 12px; margin-top: 4px; padding: 1px 9px; border: 1px solid currentColor; border-radius: 99px; }
  .callout[hidden], .demo button[hidden] { display: none; }
  #stress[aria-pressed="true"] { background: #ffe0a3; color: #2a1606; }
  .next { font: inherit; font-size: 16px; font-weight: 900; color: #2a1606; border: 0; border-radius: 99px; padding: 13px; background: linear-gradient(180deg, #ffe0a3, #f3a868); cursor: pointer; box-shadow: 0 8px 26px rgba(243,168,104,.35); }
  .next:disabled { opacity: .45; cursor: default; }
  .gate-btn { position: fixed; transform: translate(-50%, -50%); transition: opacity .5s; font: inherit; font-size: 20px; font-weight: 900; color: #2a1606; border: 0; border-radius: 99px; padding: 16px 34px; background: linear-gradient(180deg, #ffe7b8, #f3a868); box-shadow: 0 0 40px 12px rgba(255,220,150,.45), 0 10px 30px rgba(0,0,0,.3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .gate-btn.on { pointer-events: auto; }
  body.overview .gate-btn { display: none; }
  .ask { position: fixed; left: calc((100vw - var(--cardW) - 16px) / 2); top: 50%; transform: translate(-50%, -50%); width: min(640px, 64vw); opacity: 0; pointer-events: none; transition: opacity .4s; }
  .ask.on { opacity: 1; pointer-events: auto; }
  .ask .row { display: flex; gap: 8px; background: rgba(6,18,34,.62); backdrop-filter: blur(10px); border: 1px solid rgba(255,220,150,.55); border-radius: 99px; padding: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .ask input { flex: 1; font: inherit; font-size: 20px; color: #fff; background: transparent; border: 0; outline: 0; padding: 8px 16px; }
  .ask input::placeholder { color: rgba(255,255,255,.5); }
  .ask .go { font: inherit; font-size: 16px; font-weight: 900; color: #2a1606; border: 0; border-radius: 99px; padding: 0 22px; background: linear-gradient(180deg, #ffe0a3, #f3a868); cursor: pointer; }
  .ask .bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); margin: 10px 24px 0; overflow: hidden; } .ask .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd27a, #ff9a6a); width: 100%; }
  .ask .msg { text-align: center; font-size: 14px; color: #fff; margin: 8px auto 0; width: fit-content; padding: 0 12px; border-radius: 99px; background: rgba(150,40,30,.75); }
  .ask .msg:empty { display: none; }
  .ask.shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translate(calc(-50% - 10px), -50%); } 40%, 80% { transform: translate(calc(-50% + 10px), -50%); } }
  .ask .qn { text-align: center; font-size: 15px; letter-spacing: .2em; font-weight: 800; color: #6a4a1a; } .ask .qt { text-align: center; font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; color: #0d2a3a; margin: 8px 0 22px; }
  .hud { transition: opacity .5s; } body.asking .hud { opacity: 0 !important; }
  .ask.sent .row { border-color: #9ff0c0; box-shadow: 0 0 30px rgba(160,255,200,.5); }
  body.overview .ask { display: none; }
  body.overview .card, body.overview .relay, body.overview .hud, body.overview .hint { display: none; }
  .again { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: none; }
  body.overview .again { display: block; }
  .ask { left: 50%; }
  .ask:not(.on) { visibility: hidden; }
  .ask input { min-width: 0; }
  .ask .qt { text-wrap: balance; }
  body.asking .relay { visibility: hidden; }
  body.changing .hud { opacity: 0 !important; }
  body.asking .demo { right: 14px; }
  @media (max-width: 760px) {
    .demo { right: 10px; top: 8px; max-width: calc(100% - 20px); flex-wrap: wrap; font-size: 11px; z-index: 1; }
    body.asking .demo { right: 10px; }
    .demo button { padding: 4px 6px; }
    .ask { width: calc(100% - 32px); }
    .ask .qt { margin-bottom: 16px; }
    .ask input { padding: 8px 10px; font-size: 17px; }
    .ask .go { padding: 0 14px; }
    .hud { top: 84px; }
    .relay { right: 14px; bottom: 62px; }
    .relay div { height: 22px; font-size: 10px; white-space: nowrap; }
    .hint { display: none; }
    .card { z-index: 2; inset: auto 0 0; width: 100%; height: 52px; border-radius: 20px 20px 0 0; }
    .card.expanded { height: min(76dvh, 660px); }
    .card:not(.expanded) :is(.panel-scroll, .panel-footer, .scroll-thumb) { display: none; }
    .panel-heading { display: none; }
    .drawer-toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; touch-action: none; flex: 0 0 50px; width: 100%; padding: 0 17px; border: 0; border-radius: inherit; background: transparent; color: #ffe0a3; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
    .drawer-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .drawer-toggle b { font-size: 14px; color: var(--muted); }
    .card.expanded .drawer-toggle b { transform: rotate(180deg); }
    .gate-btn { font-size: 15px; padding: 12px 20px; white-space: nowrap; }
  }
  .hud { left: calc((100vw - var(--cardW) - 16px) / 2) !important; top: 14px !important; transform: translateX(-50%); padding: 8px 20px !important; border-radius: 99px !important; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; background: rgba(6,18,34,.5) !important; }
  .hud .leg { font-size: 12px; } .hud .q { font-size: 18px !important; margin: 0 !important; } .hud .you { font-size: 14px; margin: 0 !important; }
  .hud .score { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); margin: 0 !important; opacity: 0; transition: opacity .4s; pointer-events: none; }
  .hud .total { display: none; }
  body.scoring .hud .score { opacity: 1; }
  .demo { top: auto !important; bottom: 62px; }
  #mm { position: fixed; left: 16px; top: 16px; width: 236px; height: 214px; cursor: pointer; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); transition: opacity .4s; }
  body.asking #mm, body.changing #mm, body.overview #mm { opacity: 0; pointer-events: none; }
  @media (max-width: 760px) { #mm { width: 150px; height: 136px; top: 70px; left: 8px; } .hud .you { display: none; } }
  .ptabs { display: flex; gap: 6px; padding: 12px 14px 6px; }
  .ptabs button { flex: 1; font: inherit; font-size: 13px; color: #c6d3e2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 7px 4px; cursor: pointer; }
  .ptabs button.on { color: #1a1206; background: #ffc85c; border-color: #ffc85c; font-weight: 800; }
  @media (max-width: 760px) { .ptabs { padding: 8px 10px 4px; } }
  .camh { position: fixed; left: 16px; top: 238px; width: 236px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(6,18,34,.5); border-radius: 99px; padding: 6px 14px; transition: opacity .4s; }
  .camh input { flex: 1; accent-color: #ffc85c; }
  body.asking .camh, body.changing .camh, body.overview .camh { opacity: 0; pointer-events: none; }
  @media (max-width: 760px) { .camh { top: 212px; width: 150px; left: 8px; font-size: 11px; padding: 4px 10px; } }
  .ask { background: rgba(255,255,255,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.75); border-radius: 30px; padding: 26px 30px 20px; box-shadow: 0 30px 90px rgba(20,70,90,.18); transition: opacity .45s, transform .6s cubic-bezier(.5,0,.2,1) !important; }
  .ask .qn { width: fit-content; margin: 0 auto; padding: 4px 14px; border-radius: 99px; background: rgba(43,95,122,.1); color: #2b5f7a !important; font-size: 13px !important; letter-spacing: .12em !important; }
  .ask .qt { margin: 14px 0 22px !important; }
  .ask .row { background: #ffffff !important; border: 1px solid rgba(13,42,58,.14) !important; box-shadow: 0 6px 20px rgba(13,42,58,.08) !important; }
  .ask input { color: #0d2a3a !important; } .ask input::placeholder { color: rgba(13,42,58,.38) !important; }
  .ask .bar { background: rgba(13,42,58,.1) !important; }
  .ask .tip { text-align: center; font-size: 13px; color: #4a6a78; margin-top: 10px; }
  .ask.leaving { opacity: 0 !important; transform: translate(-50%, -150%) scale(.8) !important; }
  .card { background: linear-gradient(180deg, #fdf6e1, #f3e3b6) !important; border: 4px solid #2b5f7a !important; border-radius: 26px !important; color: #173247; box-shadow: inset 0 0 0 2px #fff, 0 16px 40px rgba(20,60,80,.25) !important; }
  .card section { border-bottom: 1.5px dashed rgba(43,95,122,.25) !important; }
  .card h2 { color: #2b5f7a !important; }
  .card .name { color: #10202e; }
  .card .facts, .card .same, .band-labels { color: #5a7282 !important; }
  .card .story { color: #24404f !important; background: rgba(255,255,255,.55); border-radius: 12px; padding: 8px 10px; margin-top: 8px !important; }
  .ptabs button { color: #2b5f7a !important; background: rgba(255,255,255,.6) !important; border: 1.5px solid rgba(43,95,122,.3) !important; font-weight: 700; }
  .ptabs button.on { color: #fff !important; background: #2b5f7a !important; border-color: #2b5f7a !important; }
  .rank-row { color: #173247; } .rank-bar { background: rgba(43,95,122,.12) !important; }
  .discovery { color: #24404f !important; } .discovery b { color: #7a3fb0 !important; }
  #answerSearch { background: #fff !important; color: #173247 !important; border: 1.5px solid rgba(43,95,122,.25) !important; border-radius: 10px !important; }
  #answerList button { background: rgba(255,255,255,.65) !important; color: #173247 !important; border: 1px solid rgba(43,95,122,.18) !important; border-radius: 10px !important; }
  #answerList button span:last-child { color: #5a7282 !important; }
  #answerList button[aria-pressed="true"] { border-color: #e09a2c !important; box-shadow: 0 0 0 2px rgba(224,154,44,.35); }
  #answerPages { display: none !important; }
  .scroll-thumb { background: #2b5f7a !important; }
  .mine-marker { color: #c77d12 !important; text-shadow: none !important; }
  .panel-footer { border-top: 1.5px dashed rgba(43,95,122,.25) !important; }
  .drawer-toggle { color: #2b5f7a; }
  :root { --ui-bg: rgba(250,244,226,.62); --ui-ink: #173247; --ui-sub: #5a7282; --ui-line: rgba(43,95,122,.35); --ui-soft: rgba(255,255,255,.45); }
  .card { background: var(--ui-bg) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 2px solid var(--ui-line) !important; color: var(--ui-ink) !important; box-shadow: 0 12px 34px rgba(0,0,0,.18) !important; transition: background .8s, color .8s; }
  .card h2, .card .name, .rank-row, .discovery, #answerList button, #answerSearch, .drawer-toggle { color: var(--ui-ink) !important; }
  .card .facts, .card .same, .band-labels, #answerList button span:last-child { color: var(--ui-sub) !important; }
  .card .story { color: var(--ui-ink) !important; background: var(--ui-soft) !important; }
  .card section, .panel-footer { border-color: var(--ui-line) !important; }
  .ptabs button { color: var(--ui-ink) !important; background: var(--ui-soft) !important; border-color: var(--ui-line) !important; }
  .ptabs button.on { color: #fff !important; background: #2b5f7a !important; border-color: #2b5f7a !important; }
  #answerList button, #answerSearch { background: var(--ui-soft) !important; border-color: var(--ui-line) !important; }
  .discovery b { color: inherit !important; text-decoration: underline; text-decoration-color: #c9a6ff; text-underline-offset: 3px; }
  .card .portrait { flex: 0 0 96px !important; width: 96px !important; height: 96px !important; }
  .rankbox { flex: 0 0 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ui-soft); border: 2px solid var(--ui-line); }
  .rankbox b { font-size: 26px; line-height: 1; } .rankbox span { font-size: 11px; color: var(--ui-sub); margin-top: 4px; }
  .rankbox[hidden], .portrait[hidden] { display: none !important; }
  #mm { opacity: .92; }
  .hud { background: transparent !important; padding: 0 !important; }
  .hud .leg, .hud .q, .hud .you { display: none !important; }
  .hud .score { top: 0 !important; }
  .pq { padding: 14px 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; } .pq span { font-size: 12px; color: var(--ui-sub); } .pq b { font-size: 16px; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; }
  .fw { position: fixed; left: calc((100vw - var(--cardW) - 16px) / 2); top: calc(8vh + 40px); transform: translate(-50%, 0) scale(.9); text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s, transform .5s; color: #fff; text-shadow: 0 2px 12px rgba(10,30,50,.55), 0 0 2px rgba(10,30,50,.8); }
  .fw.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
  .fw strong { display: block; font-size: clamp(26px, 2.6vw, 40px); font-weight: 900; letter-spacing: .02em; }
  .fw span { display: block; font-size: 15px; margin-top: 4px; opacity: .95; }
  .fw b { display: inline-block; margin-top: 8px; font-size: 13px; padding: 2px 12px; border-radius: 99px; background: rgba(10,30,50,.35); border: 1.5px solid currentColor; }
  .fold { flex: none; font: inherit; font-size: 12px; color: var(--ui-ink); background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 99px; padding: 3px 10px; cursor: pointer; margin-left: 4px; }
  .pq span { margin-left: auto; }
  @media (min-width: 761px) {
    .card { transition: background .8s, color .8s, bottom .45s cubic-bezier(.4,0,.2,1) !important; }
    .card.folded { bottom: auto !important; }
    .card.folded .ptabs, .card.folded .panel-scroll > section:not(#mineSummary), .card.folded .story { display: none !important; }
    .card.folded .panel-scroll { flex: none !important; overflow: visible !important; padding-bottom: 4px !important; }
    .card.folded #mineSummary { border-bottom: 0 !important; padding-top: 10px !important; }
    .card.folded .portrait, .card.folded .rankbox { flex-basis: 56px !important; width: 56px !important; height: 56px !important; }
    .card.folded .rankbox b { font-size: 16px; } .card.folded .rankbox span { display: none; }
  }
  @media (max-width: 760px) { .fold { display: none; } }
  .card .story .hl { display: block; font-weight: 700; font-size: 14px; line-height: 1.55; }
  .kf { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
  .kf dt { color: var(--ui-sub); white-space: nowrap; } .kf dd { margin: 0; }
  .card.folded .kf { display: none; }