:root {
  --ink:#0c2b3b;
  --sea:#087f8c;
  --sky:#dff5f4;
  --sun:#f5b942;
  --coral:#e95f52;
  --paper:#f7fbf8;
  --line:#b9dcda;
  --generic-modal-background:linear-gradient(135deg,#5ED5CB 0%,#30A5CE 100%);
  --generic-modal-outer-border-color:#009BC7;
  --generic-modal-inner-border-color:#3FD4FF;
  --generic-modal-radius:24px;
  --generic-modal-close-image:url("assets/gameplay-guide/close.webp");
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; min-height:100%; overflow:hidden; background:#0b3546; color:var(--ink); font-family:"Microsoft YaHei", Arial, sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:100%; max-width:750px; min-height:100vh; min-height:100dvh; margin:auto; position:relative; overflow:hidden; background:var(--paper); }
.screen { min-height:100vh; min-height:100dvh; padding:calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
.screen:not(.battle-screen) { max-height:100vh; max-height:100dvh; overflow-y:auto; }
.hidden { display:none !important; }
.generic-modal-inactive { pointer-events:none !important; user-select:none; }
.lobby-screen { position:relative; display:flex; flex-direction:column; background:linear-gradient(160deg,#f1fff8 0%,#d2f1ee 65%,#c1dfec 100%); }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:104px; height:38px; color:white; background:var(--sea); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--sun); font-weight:800; }
.eyebrow { margin:30px 0 8px; color:#137174; font-size:13px; font-weight:700; letter-spacing:0; }
h1 { max-width:320px; margin:0; font-size:42px; line-height:1.14; letter-spacing:0; }
h2 { margin:3px 0 0; font-size:26px; letter-spacing:0; }
.lobby-copy { max-width:300px; margin:18px 0 auto; font-size:16px; line-height:1.65; color:#35606b; }
.profile-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:28px 0 20px; }
.run-recovery-panel { margin:0 0 14px; padding:12px; border:2px solid #c9982f; border-radius:6px; background:#fff6d6; }.run-recovery-panel p { margin:0; color:#6e5112; font-size:13px; font-weight:700; line-height:1.5; }.run-recovery-panel .secondary-button { width:100%; min-height:42px; margin-top:10px; font-weight:800; }.run-recovery-panel .secondary-button:disabled,.activity-retry-button:disabled { opacity:.55; cursor:not-allowed; }
.profile-strip > div,.profile-strip > .skill-build-toggle { min-width:0; padding:13px 9px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.7); }
.profile-strip span, .hud span { display:block; color:#47757a; font-size:11px; }
.profile-strip strong { display:block; overflow:hidden; margin-top:5px; font-size:15px; white-space:nowrap; text-overflow:ellipsis; }
#inventoryDisplay { font-size:11px; }
.skill-build-toggle { position:relative; width:100%; color:var(--ink); font:inherit; text-align:left; }.skill-build-toggle::after { position:absolute; top:20px; right:11px; width:7px; height:7px; border-right:2px solid var(--sea); border-bottom:2px solid var(--sea); content:""; transform:rotate(-45deg); }.skill-build-toggle:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }
.modal.skill-build-modal {
  --skill-build-close-size:clamp(44px,11.0667vw,83px);
  --skill-build-gap:clamp(8px,2.4vw,18px);
  z-index:42;
  display:flex;
  width:100%;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--skill-build-gap);
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:rgba(0,0,0,.6);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.generic-modal-stage.skill-build-stage {
  --generic-modal-max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--skill-build-close-size) - var(--skill-build-gap));
  --generic-modal-max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--skill-build-close-size) - var(--skill-build-gap));
  display:flex;
  width:min(88vw,660px);
  height:auto;
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  flex-direction:column;
  align-items:center;
  gap:var(--skill-build-gap);
  padding-bottom:0;
}
.generic-modal-panel.skill-build-panel {
  height:auto;
  min-height:min(var(--generic-modal-min-height),var(--generic-modal-max-height));
  max-height:var(--generic-modal-max-height);
  flex:0 1 auto;
}
.generic-modal-content.skill-build-list {
  display:grid;
  width:100%;
  max-width:none;
  max-height:none;
  min-height:0;
  margin:0;
  padding:clamp(8px,2.4vw,18px) clamp(4px,1.3333vw,10px) clamp(10px,2.6667vw,20px);
  gap:0;
  overflow:visible;
  overflow-anchor:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  container-type:inline-size;
}
.skill-build-list .profile-panel-block:first-child { margin-top:0; }
.skill-build-list .profile-panel-block + .profile-panel-block { margin-top:6cqw; }
.skill-build-list .profile-panel-title {
  gap:5cqw;
  margin-bottom:3.6cqw;
  color:#fff;
  font-size:clamp(17px,4.5333vw,34px);
  text-shadow:0 2px 2px rgba(0,77,92,.45);
}
.skill-build-list .profile-panel-title img { width:3.4cqw; height:6.2cqw; }
.skill-build-list .profile-item-list { gap:2.2cqw; }
.skill-build-list .profile-item-row {
  grid-template-columns:12cqw minmax(0,1fr) auto;
  min-height:14cqw;
  padding:1.8cqw 3.2cqw 1.8cqw 2.2cqw;
  border-radius:3.6cqw;
}
.skill-build-list .profile-item-row img { width:10cqw; height:10cqw; }
.skill-build-list .profile-item-row.profile-skill-row {
  padding:2.8cqw 3.2cqw 2.8cqw 2.2cqw;
  border-radius:3.6cqw;
}
.skill-build-list .profile-item-row.profile-skill-row img { margin-top:.6cqw; }
.skill-build-list .profile-item-copy { gap:1.2cqw; }
.skill-build-list .profile-item-heading { gap:2cqw; }
.skill-build-list .profile-item-row strong { font-size:clamp(15px,4vw,30px); line-height:1.3; }
.skill-build-list .profile-item-row .profile-item-level { font-size:clamp(13px,3.4667vw,26px); line-height:1.3; }
.skill-build-list .profile-item-description { font-size:clamp(13px,3.4667vw,26px); line-height:1.5; }
.skill-build-list .profile-item-row > span { font-size:clamp(14px,3.7333vw,28px); }
.skill-build-list .profile-empty-state {
  border-color:rgba(255,255,255,.55);
  color:#fff;
  font-size:clamp(15px,4vw,30px);
}
.skill-build-close {
  display:grid;
  width:var(--skill-build-close-size);
  height:var(--skill-build-close-size);
  flex:none;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent var(--generic-modal-close-image) center / contain no-repeat;
  touch-action:manipulation;
}
.skill-build-close img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.skill-build-close:active { transform:scale(.94); }
.skill-build-close:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (orientation:landscape) and (max-height:500px) {
  .modal.skill-build-modal { --skill-build-close-size:44px; --skill-build-gap:8px; }
}
.help-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:2px solid var(--ink); border-radius:50%; background:#fff; color:var(--sea); font-size:18px; font-weight:900; line-height:1; }.help-button:focus-visible,.score-help-button:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }.lobby-help-button { position:absolute; top:calc(28px + env(safe-area-inset-top)); right:24px; z-index:1; }

/* 游戏大厅按 750 x 1526 设计稿定位；纵向坐标以容器宽度为基准。 */
.lobby-screen {
  container-type:inline-size;
  padding:0;
  overflow-x:hidden;
  background:linear-gradient(to right,#43a89e,#1b7a99);
  scrollbar-width:none;
}
.lobby-screen::-webkit-scrollbar { display:none; }
.lobby-stage {
  --lobby-lower-shift:clamp(0px, calc(203.4667cqw - 100dvh), 15.4667cqw);
  position:relative;
  width:100%;
  min-height:max(100dvh, 203.4667cqw);
  overflow:hidden;
  background:transparent url("assets/lobby/lobby-bg.webp") top center / 100% auto no-repeat;
  user-select:none;
}
.lobby-stage img { display:block; }
.lobby-image-button,
.lobby-name-card {
  position:absolute;
  z-index:7;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  color:inherit;
  touch-action:manipulation;
}
.lobby-image-button > img,
.lobby-name-card > img { width:100%; height:100%; object-fit:fill; pointer-events:none; }
.lobby-image-button:focus-visible,
.lobby-name-card:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.lobby-image-button:disabled { cursor:not-allowed; opacity:.42; }
.lobby-image-button:not(:disabled):active,
.lobby-name-card:active { filter:brightness(.94); }

.lobby-status-bar { position:absolute; top:-3.2cqw; left:0; z-index:8; width:100cqw; height:14.5333cqw; pointer-events:none; }
.lobby-status-bar > img { position:absolute; inset:0; width:100%; height:100%; }
.lobby-status-item {
  position:absolute;
  top:7.4667cqw;
  height:2.9333cqw;
  margin:0;
  color:#008284;
  font-family:"Source Han Sans SC Medium","Source Han Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  font-size:2.9333cqw;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.lobby-status-item strong { font:inherit; }
.lobby-season-status { left:8.4cqw; }
.lobby-level-status { left:39.3333cqw; }
.lobby-score-status { left:71.3333cqw; }
.lobby-title-image { position:absolute; top:14.8cqw; left:21.2cqw; z-index:7; width:58.4cqw; height:16.5333cqw; object-fit:fill; }

.lobby-back-button { top:15.2cqw; left:86.4cqw; width:11.4cqw; height:11.4cqw; }
.lobby-tools-button { top:29.8cqw; left:87cqw; width:11.2cqw; height:11.2cqw; }
.lobby-ranking-button { top:41.6cqw; left:87cqw; width:11.2cqw; height:11.2cqw; }
.lobby-profile-button { top:53.4cqw; left:87cqw; width:11.2cqw; height:11.2cqw; }

.lobby-map-selector { position:absolute; inset:0; z-index:2; pointer-events:none; }
.lobby-map-viewport {
  position:absolute;
  top:38.6667cqw;
  left:16.4cqw;
  z-index:2;
  width:67.4667cqw;
  height:89.8667cqw;
  overflow:hidden;
  background:#15383e;
  touch-action:pan-y;
  pointer-events:auto;
}
.lobby-level-map { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:fill; will-change:opacity; }
.lobby-level-map-outgoing { z-index:1; pointer-events:none; }
.lobby-level-shade { position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.5); pointer-events:none; }
.lobby-map-frame { position:absolute; top:33.7333cqw; left:3.8667cqw; z-index:4; width:96.1333cqw; height:109.7333cqw; object-fit:fill; pointer-events:none; }
.lobby-level-lock { position:absolute; top:63.0667cqw; left:32.8cqw; z-index:5; width:37.2cqw; height:37.2cqw; object-fit:fill; pointer-events:none; }
.lobby-map-arrow { top:79.7333cqw; width:13.3333cqw; height:12.2667cqw; pointer-events:auto; }
.lobby-map-arrow-left { left:1.7333cqw; }
.lobby-map-arrow-right { left:86.5333cqw; }

.lobby-lower-control { transform:translateY(calc(-1 * var(--lobby-lower-shift))); }
.lobby-name-selector { position:absolute; inset:0; z-index:8; touch-action:pan-y; pointer-events:none; }
.lobby-name-card { pointer-events:auto; transition:opacity .2s ease, filter .2s ease; }
.lobby-name-card.is-locked { opacity:.3; }
.lobby-name-card-previous { top:154.8cqw; left:11.8667cqw; width:20cqw; height:20cqw; }
.lobby-name-card-current { top:153.6cqw; left:38.4cqw; width:23.8667cqw; height:23.8667cqw; }
.lobby-name-card-next { top:154.8cqw; left:68.6667cqw; width:20cqw; height:20cqw; }
.lobby-name-arrow { top:163.3333cqw; width:3.0667cqw; height:4.8cqw; pointer-events:auto; }
.lobby-name-arrow-left { left:6.1333cqw; }
.lobby-name-arrow-right { left:92cqw; }
.lobby-confirm-button { top:182.4cqw; left:32cqw; width:36.1333cqw; height:13.2cqw; }

.lobby-map-viewport.is-crossfading { isolation:isolate; }
.lobby-map-viewport.is-crossfading .lobby-level-map { mix-blend-mode:plus-lighter; }
.lobby-map-viewport.is-crossfading #lobbyLevelMap { animation:lobby-map-crossfade-in .6s ease-in-out both; }
.lobby-map-viewport.is-crossfading .lobby-level-map-outgoing { animation:lobby-map-crossfade-out .6s ease-in-out both; }
.lobby-map-selector.is-moving-next .lobby-level-lock:not(.hidden) { animation:lobby-lock-next-in .36s cubic-bezier(.2,.75,.2,1); }
.lobby-map-selector.is-moving-previous .lobby-level-lock:not(.hidden) { animation:lobby-lock-previous-in .36s cubic-bezier(.2,.75,.2,1); }
.lobby-name-selector.is-moving-next .lobby-name-card { animation:lobby-name-next-in .42s cubic-bezier(.22,.72,.2,1); }
.lobby-name-selector.is-moving-previous .lobby-name-card { animation:lobby-name-previous-in .42s cubic-bezier(.22,.72,.2,1); }
.lobby-name-selector.is-moving-next .lobby-name-card-current,
.lobby-name-selector.is-moving-previous .lobby-name-card-current { animation-duration:.36s; }

@keyframes lobby-map-crossfade-in {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes lobby-map-crossfade-out {
  from { opacity:1; }
  to { opacity:0; }
}
@keyframes lobby-lock-next-in {
  from { opacity:0; transform:translateX(8cqw) scale(.82); }
  to { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes lobby-lock-previous-in {
  from { opacity:0; transform:translateX(-8cqw) scale(.82); }
  to { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes lobby-name-next-in {
  from { transform:translateX(12cqw) scale(.94); }
  to { transform:translateX(0) scale(1); }
}
@keyframes lobby-name-previous-in {
  from { transform:translateX(-12cqw) scale(.94); }
  to { transform:translateX(0) scale(1); }
}

.lobby-recovery-panel {
  position:absolute;
  top:13.2cqw;
  left:19cqw;
  z-index:20;
  width:62cqw;
  margin:0;
  box-shadow:0 4px 12px rgba(0,74,79,.28);
}
.lobby-compatibility-state { display:none; }
.lobby-debug-controls { position:absolute; right:2cqw; bottom:2cqw; z-index:30; width:min(180px,36cqw); }
.lobby-debug-controls .test-entry-button { min-height:34px; margin:0; padding:5px; font-size:11px; }
.lobby-debug-controls .reset-button { width:100%; padding:7px; background:rgba(255,255,255,.82); }

@media (prefers-reduced-motion:reduce) {
  .lobby-name-card { transition:none; }
  .lobby-map-viewport .lobby-level-map,
  .lobby-map-selector .lobby-level-lock,
  .lobby-name-selector .lobby-name-card { animation:none !important; }
}
.primary-button,.secondary-button,.text-button,.reset-button { border-radius:5px; font-weight:800; }
.primary-button { min-height:54px; border:3px solid var(--ink); background:var(--sun); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.primary-button:disabled { opacity:.55; box-shadow:none; cursor:not-allowed; }
.primary-button:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.text-button,.reset-button { border:0; background:transparent; color:#165d69; padding:15px; }
.reset-button { color:#7b4e40; font-size:12px; }
.test-entry-button { width:100%; min-height:46px; margin-top:10px; border:2px solid var(--ink); background:#fff; color:var(--ink); }
.page-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; }.page-header span { color:#527277; font-size:13px; }
.icon-button { width:42px; height:42px; border:2px solid var(--ink); border-radius:5px; color:var(--ink); background:#fff; font-weight:900; font-size:20px; }.back-button { flex:none; }
.level-list { display:grid; gap:10px; }
.level-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:2px solid var(--line); border-radius:6px; background:white; text-align:left; }.level-card.unlocked { border-color:var(--sea); }.level-card:disabled { opacity:.5; }.level-card > span:not(.level-badge) { display:grid; min-width:0; gap:4px; }.level-card b { display:block; overflow:hidden; overflow-wrap:anywhere; font-size:18px; white-space:normal; }.level-card span { color:#5a7376; font-size:13px; }.level-card > span:not(.level-badge) > span { display:block; overflow:hidden; overflow-wrap:anywhere; white-space:normal; }.level-badge { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#d7eeee; font-weight:800; }.level-state { font-size:12px; color:var(--sea); font-weight:700; }.endless-card { border-color:#596fbd; background:#f4f4ff; }.endless-card.unlocked { border-color:#394f9e; }.endless-card .level-badge { background:#dce2ff; color:#263f86; }
.ready-screen { display:flex; flex-direction:column; }.ready-theme { margin:20px 0 24px; color:#41656d; line-height:1.6; }.ready-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.ready-stats div { padding:18px 14px; border-bottom:2px solid var(--line); }.ready-stats span,.ready-stats strong { display:block; }.ready-stats span { color:#527277; font-size:12px; }.ready-stats strong { margin-top:5px; overflow-wrap:anywhere; font-size:20px; }.ready-screen>.primary-button { width:100%; margin-top:auto; }

/* 玩法说明按 750 x 1526 PSD 定位；PSD 的大厅背景图层不参与渲染。 */
.gameplay-guide-modal {
  position:fixed;
  z-index:35;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  width:100%;
  max-width:750px;
  height:100vh;
  height:100dvh;
  padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));
  overflow:hidden;
  container-type:inline-size;
  background:rgba(0,0,0,.6);
  transform:none;
  touch-action:manipulation;
}
.gameplay-guide-stage {
  position:relative;
  /* Keep the PSD aspect ratio without CSS multiplication, which is rejected by
     older iOS Safari and several embedded WebViews. The safe-area subtraction
     is intentionally conservative so the close control remains visible. */
  width:min(90cqw,max(44px,calc(69.8dvh - 11.433cqw - max(5.6px,env(safe-area-inset-top)) - max(5.6px,env(safe-area-inset-bottom)))));
  aspect-ratio:675 / 967;
  margin-top:max(0px,calc(33.3333cqw - max(8px,env(safe-area-inset-top))));
  animation:modal-fade-in-down .6s ease-out both;
}
.gameplay-guide-panel,
.gameplay-guide-target,
.gameplay-guide-close img {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.gameplay-guide-panel {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:85.5222%;
}
.gameplay-guide-target {
  position:absolute;
  z-index:2;
  top:61.0134%;
  left:39.8519%;
  width:12.1481%;
  height:8.4798%;
  animation:gameplay-guide-target-blink 1.1s ease-in-out infinite;
  will-change:opacity;
}
.gameplay-guide-close {
  position:absolute;
  z-index:3;
  top:88.8314%;
  left:47.8519%;
  width:max(16%,44px);
  min-width:44px;
  aspect-ratio:1;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  outline:0;
  background:transparent;
  transform:translateX(-50%);
  touch-action:manipulation;
}
.gameplay-guide-close:focus-visible { outline:3px solid #fff7ab; outline-offset:2px; }
.gameplay-guide-close:not(:disabled):active { filter:brightness(.9); transform:translateX(-50%) scale(.96); }
.gameplay-guide-close:disabled { cursor:wait; filter:saturate(.55); }
.gameplay-guide-modal.is-starting .gameplay-guide-stage { opacity:.88; }
@keyframes gameplay-guide-target-blink {
  0%,100% { opacity:1; }
  50% { opacity:.18; }
}
@media (max-height:600px), (min-width:600px) and (max-height:900px) {
  .gameplay-guide-stage {
    width:min(90cqw,max(44px,calc(69.8dvh - max(5.6px,env(safe-area-inset-top)) - max(5.6px,env(safe-area-inset-bottom)))));
    margin-top:0;
  }
}
.test-screen { background:#eef7f5; }.test-form { display:grid; gap:0; padding-bottom:12px; }.test-section { padding:18px 0 20px; border-top:2px solid var(--line); }.test-section:first-child { border-top:0; padding-top:0; }.test-section h3 { margin:0 0 13px; font-size:16px; }.test-field-grid,.test-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.test-inline-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:-3px 0 12px; }.test-inline-actions .secondary-button { min-height:38px; border:2px solid var(--ink); background:#fff; color:var(--ink); font-size:12px; font-weight:800; }.test-inline-actions .test-random-build-button { grid-column:1/-1; background:#fff1bc; }.test-field,.test-skill-field { display:grid; min-width:0; align-content:start; gap:6px; }.test-field span,.test-skill-field span { min-height:30px; color:#41656d; font-size:11px; font-weight:700; line-height:1.35; }.test-field input,.test-field select,.test-skill-field select { width:100%; min-width:0; height:42px; padding:8px 9px; border:2px solid #8ebdba; border-radius:4px; outline:0; background:#fff; color:var(--ink); font:inherit; font-size:14px; }.test-field input:focus,.test-field select:focus,.test-skill-field select:focus { border-color:var(--sea); box-shadow:0 0 0 2px rgba(8,127,140,.16); }.test-skill-field small { display:block; min-height:34px; color:#537278; font-size:10px; line-height:1.4; }.test-skill-field.is-hidden-skill span::after { margin-left:5px; padding:1px 4px; border:1px solid #7c689a; border-radius:3px; color:#66517e; content:"隐藏"; font-size:9px; }.test-reset-button { width:100%; min-height:42px; margin-top:12px; border:2px solid var(--ink); background:#fff; color:var(--ink); }.test-start-button { width:100%; min-height:54px; margin-top:14px; }
.test-pressure-tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 10px; margin:0 0 14px; padding:12px; border:2px solid #8ebdba; border-radius:4px; background:#dff1ed; }.test-pressure-tool .test-field span { min-height:0; }.test-pressure-tool .secondary-button { align-self:end; min-height:42px; border:2px solid var(--ink); background:#fff1bc; color:var(--ink); font-size:12px; font-weight:800; }.test-pressure-summary { grid-column:1/-1; margin:0; color:#41656d; font-size:11px; font-weight:700; line-height:1.5; }
.battle-screen { position:relative; height:100vh; height:100dvh; padding:0; background:#bfe7e8; }.game-canvas-container { width:100%; height:100%; }.game-canvas-container canvas { width:100%; height:100%; display:block; touch-action:none; }
.battle-overlay { position:absolute; inset:0; pointer-events:none; padding:calc(10px + env(safe-area-inset-top)) 12px 16px; }.hud { display:grid; grid-template-columns:minmax(70px,1fr) minmax(70px,1fr) minmax(116px,1.4fr) 42px; align-items:center; gap:6px; }.hud>div { min-width:0; height:44px; min-height:44px; padding:4px 6px; border:2px solid rgba(12,43,59,.85); border-radius:5px; background:rgba(255,255,255,.87); }.hud span { font-size:10px; }.hud strong { display:block; overflow:hidden; font-size:14px; line-height:18px; white-space:nowrap; text-overflow:ellipsis; }.hud .icon-button { pointer-events:auto; background:#f7bc42; }.hud-stage { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:10px 16px 10px; align-content:center; }.hud-stage span { grid-column:1; grid-row:1; overflow:hidden; font-size:9px; line-height:10px; white-space:nowrap; text-overflow:ellipsis; }.hud-stage strong { grid-column:1; grid-row:2; font-size:11px; line-height:16px; }.hud-stage em { grid-column:1; grid-row:3; display:block; overflow:hidden; min-width:0; color:#16707b; font-size:9px; line-height:10px; font-style:normal; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.boss-hud { position:absolute; top:calc(60px + env(safe-area-inset-top)); left:12px; right:60px; display:grid; grid-template-columns:minmax(0,auto) minmax(70px,1fr) 38px; align-items:center; gap:8px; min-height:34px; padding:6px 9px; border:2px solid rgba(255,244,218,.94); border-radius:5px; background:rgba(35,12,28,.88); box-shadow:0 4px 0 rgba(28,7,21,.34),0 0 12px rgba(255,76,94,.18); }.boss-hud span { overflow:hidden; color:#fff8e7; font-size:11px; font-weight:900; white-space:nowrap; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.72); }.boss-hud>div { position:relative; height:12px; overflow:hidden; border:2px solid rgba(255,244,218,.92); border-radius:4px; background:#42152b; box-shadow:inset 0 2px 3px rgba(0,0,0,.48); }.boss-hud>div::after { position:absolute; z-index:2; top:1px; right:2px; left:2px; height:2px; background:rgba(255,255,255,.34); content:""; pointer-events:none; }.boss-hud i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ffd45b 0%,#ff7b43 45%,#ff365e 100%); box-shadow:inset 0 -2px 2px rgba(113,13,39,.34); transform-origin:left center; transition:width .18s ease-out; }.boss-hud strong { color:#fff8e7; font-size:11px; text-align:right; text-shadow:0 1px 2px rgba(0,0,0,.72); }
.health-row { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; min-height:22px; margin-top:24px; font-weight:800; color:#123d4b; }.boss-hud:not(.hidden) ~ .health-row { margin-top:48px; }.health-row span { font-size:12px; }.health-row strong { color:var(--coral); letter-spacing:2px; }.health-row .temporary-health { color:#879396; font-size:16px; line-height:1; letter-spacing:0; text-shadow:0 1px 0 #fff; }
.item-controls { position:absolute; right:14px; bottom:calc(clamp(168px, 44.8vw, 336px) + env(safe-area-inset-bottom)); display:grid; gap:10px; pointer-events:auto; }.item-button { width:58px; height:56px; border:3px solid var(--ink); border-radius:7px; background:#fff6cc; color:#154d56; font-size:20px; font-weight:900; box-shadow:3px 3px 0 rgba(12,43,59,.8); }.item-button:disabled { opacity:.45; box-shadow:none; }.item-button b { display:inline-grid; place-items:center; min-width:16px; height:16px; border-radius:50%; background:var(--coral); color:white; font-size:11px; vertical-align:top; }
.battle-notice { position:absolute; top:24%; left:50%; transform:translateX(-50%); width:max-content; max-width:85%; padding:8px 14px; border-radius:5px; color:white; background:rgba(12,43,59,.85); font-weight:800; opacity:0; transition:opacity .2s; pointer-events:none; }.battle-notice.show { opacity:1; }
.battle-notice.special { border:2px solid #8a5a00; color:#5b3900; background:#fff1bc; box-shadow:0 4px 0 rgba(91,57,0,.22); text-align:center; animation:reward-notice-in .32s ease-out; }
.settlement-retry { position:absolute; top:calc(128px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); min-height:38px; padding:7px 16px; border:2px solid var(--ink); border-radius:5px; background:var(--sun); color:var(--ink); font-weight:800; pointer-events:auto; }
.modal.pause-modal {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  max-width:750px;
  height:100vh;
  height:100dvh;
  margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));
  overflow:hidden;
  container-type:inline-size;
  background:rgba(0,0,0,.65);
  touch-action:manipulation;
}
.pause-stage {
  position:relative;
  width:min(88.6667cqw,74dvh);
  aspect-ratio:665 / 806;
  margin:0;
  animation:modal-fade-in-down .6s ease-out both;
}
.pause-panel-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.pause-action {
  position:absolute;
  left:12.0301%;
  width:76.2406%;
  height:15.7568%;
  margin:0;
  padding:0;
  border:0;
  border-radius:8cqw;
  outline-offset:.8cqw;
  background:transparent;
  touch-action:manipulation;
}
.pause-stage.pause-art-failed {
  padding:16% 7% 7%;
  border:3px solid #61f5f0;
  border-radius:8%;
  background:linear-gradient(160deg,#49dbca,#178cbd);
}
.pause-stage.pause-art-failed::before {
  display:block;
  margin-bottom:4%;
  color:#fff;
  font-size:clamp(22px,6.4cqw,48px);
  font-weight:900;
  line-height:1.2;
  text-align:center;
  content:"当前游戏已暂停";
}
.pause-stage.pause-art-failed .pause-panel-art { display:none; }
.pause-stage.pause-art-failed .pause-action {
  position:relative;
  top:auto;
  left:auto;
  display:grid;
  width:100%;
  height:16%;
  min-height:44px;
  margin:2.5% 0 0;
  place-items:center;
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#0689aa;
  font-size:clamp(16px,4.5333cqw,34px);
  font-weight:900;
}
.pause-stage.pause-art-failed .pause-action .visually-hidden {
  position:static !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:nowrap !important;
}
@media (max-height:311px) and (orientation:landscape) {
  .pause-stage {
    width:min(88.6667cqw,calc(100vh - 16px));
    width:min(88.6667cqw,calc(100dvh - 16px));
  }
  .pause-action {
    height:max(15.7568%,44px);
    border-radius:999px;
  }
}
.pause-resume-action { top:23.8213%; }
.pause-build-action { top:40.3226%; }
.pause-help-action { top:56.6998%; }
.pause-quit-action { top:73.2009%; }
.pause-action:active { background:rgba(255,255,255,.16); transform:scale(.985); }
.pause-action:focus-visible { outline:3px solid #fff; }
.battle-screen {
  container-type:inline-size;
  overflow:hidden;
  background:#25394b;
}
.battle-screen .game-canvas-container {
  position:absolute;
  inset:0;
}
.battle-overlay {
  container-type:inline-size;
  padding:0;
}
.battle-overlay .hud {
  position:absolute;
  z-index:4;
  inset:0;
  display:block;
}
.battle-overlay .hud .hud-chip {
  position:absolute;
  display:block;
  height:6.6667cqw;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:3.3333cqw;
  background:#fff;
  box-shadow:inset 0 0 0 .5333cqw #18d4d4,inset 0 0 0 .8cqw rgba(0,164,180,.2),0 .2667cqw .4cqw rgba(0,55,80,.2);
  color:#00b6b9;
  white-space:nowrap;
}
.hud-level-chip {
  top:5.0667cqw;
  left:3.6cqw;
  width:29.3333cqw;
}
.hud-score-chip {
  top:12.9333cqw;
  left:3.4667cqw;
  width:32cqw;
}
.hud-progress-chip {
  top:20.9333cqw;
  left:3.4667cqw;
  width:38.4cqw;
  background:#13ced2;
  box-shadow:inset 0 0 0 .5333cqw #fff,0 0 0 .4cqw #18d4d4,0 .2667cqw .4cqw rgba(0,55,80,.22);
}
.hud-chip > img {
  position:absolute;
  z-index:3;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.hud-level-chip > img {
  top:.8cqw;
  left:.9333cqw;
  width:4.9333cqw;
  height:4.9333cqw;
}
.hud-score-chip > img {
  top:.6667cqw;
  left:.8cqw;
  width:5.2cqw;
  height:5.2cqw;
}
.hud-progress-chip > img {
  top:.6667cqw;
  left:.6667cqw;
  width:5.3333cqw;
  height:5.3333cqw;
}
.battle-overlay .hud .hud-chip-copy {
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:6.2667cqw;
  display:flex;
  align-items:center;
  min-width:0;
  color:inherit;
  font-size:2.9333cqw;
  font-weight:800;
  line-height:1;
}
.battle-overlay .hud .hud-score-chip .hud-chip-copy {
  left:6cqw;
}
.battle-overlay .hud .hud-progress-chip .hud-chip-copy {
  left:7.0667cqw;
  right:1.0667cqw;
  overflow:hidden;
  color:#fff;
  font-size:2.9333cqw;
  text-shadow:0 .1333cqw .2667cqw rgba(0,91,113,.7);
}
.battle-overlay .hud .hud-progress-chip .hud-chip-label { flex:0 0 auto; }
.battle-overlay .hud .hud-progress-chip .hud-chip-copy strong { flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:clip; }
.hud .hud-chip-label,
.hud .hud-chip-copy strong {
  display:inline;
  min-width:0;
  color:inherit;
  font:inherit;
  line-height:1;
}
.hud-progress-rail {
  position:absolute;
  z-index:1;
  inset:.9333cqw 1.0667cqw .8cqw .9333cqw;
  overflow:hidden;
  border-radius:2.4667cqw;
  background:#168db2;
}
.hud-progress-track {
  display:block;
  width:0;
  height:100%;
  background:repeating-linear-gradient(112deg,#168db2 0,#168db2 1.7333cqw,#36ddc9 1.7333cqw,#36ddc9 3.4667cqw);
  transition:width .2s ease-out;
}
.hud #pauseButton {
  position:absolute;
  top:5.6cqw;
  left:82.9333cqw;
  display:block;
  width:14cqw;
  height:14cqw;
  min-height:0;
  padding:0;
  border:0;
  border-radius:50%;
  outline-offset:.4cqw;
  background:transparent url("assets/battle/pause.webp") center / contain no-repeat;
  box-shadow:none;
  color:transparent;
  pointer-events:auto;
}
.boss-hud {
  z-index:4;
  top:28.8cqw;
  left:3.4667cqw;
  right:3.4667cqw;
}
.health-row,
.boss-hud:not(.hidden) ~ .health-row {
  position:absolute;
  z-index:2;
  left:4.1333cqw;
  bottom:3.4667cqw;
  display:flex;
  flex-wrap:nowrap;
  align-items:start;
  gap:.6667cqw;
  width:37.0667cqw;
  min-height:8.1333cqw;
  margin:0;
  color:transparent;
}
.health-display {
  position:relative;
  display:flex;
  flex:none;
  gap:0;
  width:27.6cqw;
  height:8.1333cqw;
  margin:0;
  color:transparent;
  font-size:0;
  letter-spacing:0;
}
.battle-heart,
.health-row .temporary-health {
  display:block;
  flex:none;
  width:8.8cqw;
  height:8.1333cqw;
  background:center / contain no-repeat;
}
.battle-heart {
  position:absolute;
  top:0;
  background-image:url("assets/battle/heart.webp");
}
.battle-heart.heart-1 { left:0; }
.battle-heart.heart-2 { left:9.4667cqw; }
.battle-heart.heart-3 { left:18.8cqw; }
.health-display.hp-0 .battle-heart,
.health-display.hp-1 .heart-2,
.health-display.hp-1 .heart-3,
.health-display.hp-2 .heart-3 {
  visibility:hidden;
}
.health-row .temporary-health {
  margin:0;
  background-image:url("assets/battle/emergency-heart.webp");
  color:transparent;
  font-size:0;
  line-height:0;
  letter-spacing:0;
  text-shadow:none;
}
.item-controls {
  position:absolute;
  z-index:3;
  inset:0;
  display:block;
  pointer-events:none;
}
.item-controls .item-button {
  position:absolute;
  display:block;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-position:top center;
  background-repeat:no-repeat;
  box-shadow:none;
  color:transparent;
  font-size:0;
  pointer-events:auto;
}
.item-controls .shield-item-button {
  left:82.2667cqw;
  bottom:72.4cqw;
  width:17.2cqw;
  height:17.8667cqw;
  background-image:url("assets/battle/item-shield.webp");
  background-size:17.2cqw 16cqw;
}
.item-controls .clear-item-button {
  left:82.5333cqw;
  bottom:52.5333cqw;
  width:15.2cqw;
  height:17.2cqw;
  background-image:url("assets/battle/item-clear.webp");
  background-size:15.2cqw 15.8667cqw;
}
.item-controls .item-button b {
  position:absolute;
  display:block;
  width:3.7333cqw;
  min-width:3.7333cqw;
  height:2.1333cqw;
  padding:0;
  border-radius:0;
  background:none;
  color:#fff;
  font-size:3.1467cqw;
  font-weight:900;
  line-height:2.1333cqw;
  text-align:center;
  text-shadow:none;
}
.shield-item-button b {
  top:15.7333cqw;
  left:6.6667cqw;
}
.clear-item-button b {
  top:15.0667cqw;
  left:6.4cqw;
}
.item-controls .item-button:active {
  transform:scale(.96);
}
.item-controls .item-button:disabled {
  opacity:.45;
}
.modal { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:22px; background:rgba(4,31,43,.62); }.modal-panel { width:min(100%,400px); max-height:90vh; max-height:90dvh; overflow:auto; padding:26px; border:3px solid var(--ink); border-radius:7px; background:#f7fbf8; box-shadow:7px 7px 0 var(--sun); text-align:center; }.modal-panel .eyebrow { margin:0 0 6px; }.modal-panel .primary-button,.modal-panel .secondary-button { width:100%; margin-top:14px; min-height:48px; }.secondary-button { border:2px solid var(--ink); background:white; color:var(--ink); }.result-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:22px 0 2px; }.result-stats div { padding:12px; background:#ddf0ed; border-radius:5px; }.result-stats span { display:block; font-size:12px; color:#537278; }.result-stats strong { font-size:20px; }.result-panel { display:flex; flex-direction:column; overflow:hidden; }.result-panel .result-stats { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:3px; }.result-actions { display:grid; flex:none; gap:10px; padding-top:12px; background:#f7fbf8; }.result-panel .result-actions .primary-button,.result-panel .result-actions .secondary-button { width:100%; min-height:48px; margin-top:0; }.skill-hint { margin:10px 0 0; color:#4a6970; font-size:13px; line-height:1.5; }.skill-choices { display:grid; gap:10px; margin-top:20px; }.skill-choice { padding:15px; border:2px solid var(--ink); border-radius:6px; background:#fff; text-align:left; }.skill-choice:hover { background:#fff1bc; }.skill-choice strong,.skill-choice span { display:block; }.skill-choice span { margin-top:5px; color:#4a6970; font-size:13px; line-height:1.45; }
.item-pickup-modal { z-index:80; background:rgba(0,0,0,.62); }
.item-pickup-panel { position:relative; display:grid; justify-items:center; width:min(94vw,712px); }
.item-pickup-panel > img:first-child { display:block; width:100%; height:auto; aspect-ratio:712 / 278; object-fit:contain; }
.item-pickup-close { display:grid; place-items:center; width:12cqw; height:12cqw; margin-top:2.4cqw; padding:0; border:0; background:transparent; touch-action:manipulation; }
.item-pickup-close img { display:block; width:100%; height:100%; object-fit:contain; }
.item-pickup-close:active { transform:scale(.94); }

/* The generic .modal rule appears after the PSD-specific block. Keep the
   gameplay guide full-bleed and layered above other dialogs on every viewport. */
.modal.gameplay-guide-modal {
  z-index:35;
  inset:0;
  display:block;
  padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.6);
}
.modal.gameplay-guide-modal .gameplay-guide-stage {
  margin-right:auto;
  margin-left:auto;
}
.result-failure-title { display:none; }
.result-modal.is-failure {
  container-type:inline-size;
  place-items:start center;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,.6);
}
.result-modal.is-failure .result-panel {
  position:relative;
  width:100cqw;
  max-width:none;
  height:100%;
  min-height:114.8cqw;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.result-modal.is-failure .result-failure-title {
  position:absolute;
  top:63.4667cqw;
  left:5.4667cqw;
  display:block;
  width:85.4667cqw;
  height:auto;
  pointer-events:none;
  user-select:none;
}
.result-modal.is-failure .eyebrow,
.result-modal.is-failure #resultTitle,
.result-modal.is-failure .result-stats {
  display:none;
}
.result-modal.is-failure .result-actions {
  position:static;
  display:block;
  padding:0;
  background:transparent;
}
.result-modal.is-failure .result-actions #againButton,
.result-modal.is-failure .result-actions #homeButton {
  position:absolute;
  top:103.3333cqw;
  width:34.2667cqw;
  height:11.4667cqw;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  box-shadow:none;
  color:transparent;
  font-size:0;
}
.result-modal.is-failure .result-actions #homeButton {
  left:12.9333cqw;
  background-image:url("assets/result/failure-home.webp");
}
.result-modal.is-failure .result-actions #againButton {
  left:53.4667cqw;
  background-image:url("assets/result/failure-retry.webp");
}
.result-modal.is-failure .result-actions #againButton:active,
.result-modal.is-failure .result-actions #homeButton:active {
  transform:scale(.97);
}
.result-modal.is-failure .result-actions #againButton:focus-visible,
.result-modal.is-failure .result-actions #homeButton:focus-visible {
  outline:3px solid #fff;
  outline-offset:2px;
}
.modal-panel,
.psd-modal-panel {
  animation:modal-fade-in-down .6s ease-out both;
}
.modal.help-modal { z-index:43; }.modal.score-help-modal { z-index:44; }
.generic-modal-stage.help-guide-stage { width:min(92vw,648px,calc(122dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.generic-modal-panel.help-guide-panel {
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:min(var(--generic-modal-min-height),var(--generic-modal-max-height));
  max-height:var(--generic-modal-max-height);
}
.generic-modal-content.help-guide-content {
  width:100%;
  min-height:0;
  max-height:none;
  padding:0;
  overflow:visible;
}
.help-guide-image { display:block; width:95%; max-width:95%; height:auto; margin:0 auto; border:0; object-fit:contain; }
.score-help-copy { margin:18px 0 0; color:#fff; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.result-stats .result-stat-label { display:block; min-height:20px; }
.score-help-button {
  position:absolute;
  right:0;
  bottom:0;
  display:grid;
  width:clamp(24px,6.7901cqw,32px);
  height:clamp(24px,6.7901cqw,32px);
  min-width:0;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
  font-size:0;
  line-height:1;
  touch-action:manipulation;
}
.score-help-button::before {
  display:grid;
  width:clamp(12px,3.3951cqw,16px);
  height:clamp(12px,3.3951cqw,16px);
  place-items:center;
  border:1px solid #47757a;
  border-radius:50%;
  background:#fff;
  color:#165d69;
  content:"?";
  font-size:clamp(8px,2.1605cqw,10px);
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.modal.score-help-modal {
  position:fixed;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:rgba(0,0,0,.6);
}
.generic-modal-stage {
  --generic-modal-min-height:clamp(210px,68cqw,510px);
  --generic-modal-max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - max(52px,13.0667cqw));
  position:relative;
  width:min(86.4vw,648px,calc(122dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding-bottom:max(52px,13.0667cqw);
  container-type:inline-size;
  animation:modal-fade-in-down .6s ease-out both;
}
.generic-modal-panel {
  position:relative;
  display:flex;
  width:100%;
  height:auto;
  min-height:min(var(--generic-modal-min-height),var(--generic-modal-max-height));
  max-height:var(--generic-modal-max-height);
  margin:0;
  padding:0;
  flex-direction:column;
  overflow:hidden;
  border:4px solid var(--generic-modal-outer-border-color);
  border-radius:var(--generic-modal-radius);
  background:var(--generic-modal-background);
  box-shadow:none;
  color:#fff;
  text-align:left;
}
.generic-modal-inner {
  width:100%;
  height:auto;
  max-height:100%;
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  padding:8px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:8px solid var(--generic-modal-inner-border-color);
  border-radius:calc(var(--generic-modal-radius) - 4px);
  background:transparent;
  -webkit-overflow-scrolling:touch;
}
.generic-modal-content {
  width:100%;
  min-height:0;
  padding:clamp(22px,6.6667cqw,50px) clamp(18px,5.3333cqw,40px);
  overflow:visible;
}
.generic-modal-content .eyebrow {
  margin:0 0 6px;
  color:#eaffff;
}
.generic-modal-content h2 { color:#fff; }
.generic-modal-close {
  position:absolute;
  bottom:0;
  left:50%;
  display:grid;
  place-items:center;
  width:max(44px,11.0667cqw);
  height:max(44px,11.0667cqw);
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent var(--generic-modal-close-image) center / contain no-repeat;
  touch-action:manipulation;
  transform:translateX(-50%);
}
.generic-modal-close img {
  display:block;
  width:min(100%,11.0667cqw);
  height:min(100%,11.0667cqw);
  object-fit:contain;
  pointer-events:none;
}
.generic-modal-close:active { transform:translateX(-50%) scale(.94); }
.generic-modal-close:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.score-help-modal-panel { animation:none; }
.modal.result-modal {
  place-items:center;
  padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:rgba(0,0,0,.6);
}
.result-modal-stage {
  --result-actions-height:calc(max(88px,26.5432cqw) + 10.3395cqw);
  --generic-modal-max-height:calc(100vh - max(8px,env(safe-area-inset-top)) - max(8px,min(22cqw,12vh)) - env(safe-area-inset-bottom) - var(--result-actions-height));
  --generic-modal-max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,min(22cqw,12dvh)) - env(safe-area-inset-bottom) - var(--result-actions-height));
  display:grid;
  width:min(94vw,705px,calc(76vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  width:min(94vw,705px,calc(76dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height:none;
  padding-bottom:0;
}
.result-modal:not(.is-failure) .result-panel {
  width:100%;
  height:auto;
}
.result-modal-content {
  display:flex;
  height:100%;
  max-height:none;
  flex-direction:column;
  padding:7.4074cqw 1.5556cqw 6.1728cqw;
  overflow:hidden;
  text-align:center;
}
.result-modal-content .eyebrow {
  flex:none;
  margin-bottom:1.2346cqw;
  font-size:clamp(11px,3.3951cqw,22px);
}
.result-modal-content h2 {
  flex:none;
  margin:0;
  font-size:clamp(20px,6.1728cqw,40px);
  line-height:1.25;
}
.result-modal .result-stats {
  display:grid;
  min-height:0;
  margin:4.321cqw 0 0;
  padding-right:.6173cqw;
  flex:1 1 auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:2.4691cqw 1.8519cqw;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.7) transparent;
  -webkit-overflow-scrolling:touch;
}
.result-modal .result-stats::-webkit-scrollbar { width:3px; }
.result-modal .result-stats::-webkit-scrollbar-thumb { border-radius:3px; background:rgba(255,255,255,.7); }
.result-modal .result-stats > div {
  position:relative;
  display:grid;
  min-width:0;
  min-height:15.4321cqw;
  align-content:center;
  padding:2.4691cqw .6173cqw;
  border:0;
  border-radius:4.321cqw;
  background:#aff9e8;
}
.result-modal .result-stats > .result-stat-wide { grid-column:1/-1; }
.result-modal .result-stats span {
  color:#27a9dd;
  font-size:clamp(10px,3.0864cqw,20px);
  font-weight:800;
  line-height:1.25;
}
.result-modal .result-stats strong {
  margin-top:1.2346cqw;
  color:#27a9dd;
  font-size:clamp(15px,4.6296cqw,30px);
  line-height:1.15;
}
.result-actions {
  display:grid;
  padding-top:5.0926cqw;
  grid-template-columns:repeat(2,39.6605cqw);
  justify-content:center;
  gap:5.2469cqw 7.2531cqw;
  background:transparent;
}
.result-image-button {
  width:39.6605cqw;
  aspect-ratio:257 / 86;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  box-shadow:none;
  color:transparent;
  font-size:0;
  touch-action:manipulation;
}
.result-home-button {
  order:1;
  background-image:url("assets/result/result-home.png");
}
.result-again-button {
  order:2;
  background-image:url("assets/result/result-retry.png");
}
.result-next-button {
  order:3;
  grid-column:1/-1;
  justify-self:center;
  background-image:url("assets/result/result-next.png");
}
.result-modal.is-home-next .result-home-button,
.result-actions.is-home-next .result-home-button {
  grid-column:1;
  justify-self:stretch;
}
.result-modal.is-home-next .result-next-button,
.result-actions.is-home-next .result-next-button { grid-column:2; grid-row:1; }
.result-image-button:active { transform:scale(.96); }
.result-image-button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.result-modal.is-failure .result-modal-stage {
  display:block;
  width:100cqw;
  height:100%;
  max-height:none;
  padding:0;
}
.modal.result-modal.is-failure {
  place-items:start center;
  padding:0;
}
.result-modal.is-failure .result-panel > .generic-modal-inner {
  width:100%;
  height:100%;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
}
.result-modal.is-failure .result-modal-content {
  position:static;
  display:block;
  height:auto;
  max-height:none;
  padding:0;
  overflow:visible;
}
@media (orientation:landscape) and (max-height:500px) {
  .modal.result-modal {
    place-items:center;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .result-modal:not(.is-failure) .result-modal-stage {
    --result-actions-height:52px;
    --generic-modal-max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--result-actions-height));
    --generic-modal-max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--result-actions-height));
    width:min(92vw,648px);
    height:auto;
    max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows:auto auto;
  }
  .result-modal:not(.is-failure) .result-modal-content {
    padding:12px 16px;
  }
  .result-modal:not(.is-failure) .result-modal-content .eyebrow {
    margin-bottom:2px;
    font-size:12px;
  }
  .result-modal:not(.is-failure) .result-modal-content h2 {
    font-size:24px;
    line-height:1.2;
  }
  .result-modal:not(.is-failure) .result-stats {
    margin-top:8px;
    gap:6px;
  }
  .result-modal:not(.is-failure) .result-stats > div {
    min-height:52px;
    padding:6px 4px;
    border-radius:8px;
  }
  .result-modal:not(.is-failure) .result-stats span { font-size:11px; }
  .result-modal:not(.is-failure) .result-stats strong {
    margin-top:2px;
    font-size:16px;
  }
  .result-modal:not(.is-failure) .result-actions {
    padding-top:8px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .result-modal:not(.is-failure) .result-image-button {
    width:100%;
    height:44px;
    min-height:44px;
    aspect-ratio:auto;
  }
  .result-modal:not(.is-failure) .result-next-button { grid-column:auto; }
  .result-modal:not(.is-failure) .result-actions.is-home-next {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .result-modal:not(.is-failure) .result-actions.is-home-next .result-home-button {
    grid-column:1;
    grid-row:1;
  }
  .result-modal:not(.is-failure) .result-actions.is-home-next .result-next-button {
    grid-column:2;
    grid-row:1;
  }
}
.modal.confirm-modal,
.modal.session-revoked-modal {
  z-index:41;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:rgba(0,0,0,.6);
}
.pause-modal.is-quit-confirm-open .pause-stage { visibility:hidden; }
.quit-confirm-stage {
  --quit-confirm-gap:clamp(6px,2.4667cqw,16px);
  --quit-confirm-actions-height:16.7316cqw;
  --generic-modal-max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--quit-confirm-actions-height) - var(--quit-confirm-gap));
  --generic-modal-max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--quit-confirm-actions-height) - var(--quit-confirm-gap));
  display:grid;
  gap:var(--quit-confirm-gap);
  padding-bottom:0;
}
.quit-confirm-panel { min-height:min(clamp(190px,62cqw,402px),var(--generic-modal-max-height)); }
.quit-confirm-content {
  display:flex;
  min-height:calc(clamp(190px,62cqw,402px) - 40px);
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px, 10cqw, 65px) clamp(8px, 2.3333cqw, 54px);
  text-align:center;
}
.quit-confirm-content .eyebrow,
.session-revoked-content .eyebrow { font-size:clamp(11px,3.7037cqw,20px); }
.quit-confirm-content h2,
.session-revoked-content h2 {
  margin:0;
  font-size:clamp(20px,6.1728cqw,34px);
  line-height:1.32;
}
.confirm-copy {
  margin:clamp(10px,3.3951cqw,22px) 0 0;
  color:#eaffff;
  font-size:clamp(12px,4.0123cqw,22px);
  line-height:1.65;
}
.quit-confirm-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(6px,2.4667cqw,16px);
  align-items:center;
}
.generic-image-action {
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:257 / 86;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  touch-action:manipulation;
  transition:filter .16s ease,transform .16s ease;
}
.generic-image-action img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.generic-image-action:active { transform:scale(.96); }
.generic-image-action:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.modal.temporary-boost-modal {
  --temporary-boost-action-height:52px;
  --temporary-boost-gap:clamp(8px,2.4vw,18px);
  z-index:45;
  width:100%;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow:hidden;
  background:rgba(0,0,0,.64);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.generic-modal-stage.temporary-boost-stage {
  --generic-modal-max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--temporary-boost-action-height) - var(--temporary-boost-gap));
  --generic-modal-max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--temporary-boost-action-height) - var(--temporary-boost-gap));
  display:flex;
  width:min(92vw,690px);
  height:auto;
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  flex-direction:column;
  align-items:center;
  gap:var(--temporary-boost-gap);
  padding-bottom:0;
}
.generic-modal-panel.temporary-boost-panel {
  height:auto;
  min-height:min(clamp(300px,92cqw,620px),var(--generic-modal-max-height));
  max-height:var(--generic-modal-max-height);
  flex:0 1 auto;
}
.generic-modal-content.temporary-boost-content {
  display:flex;
  width:100%;
  min-height:0;
  padding:clamp(18px,5.3333cqw,36px) clamp(12px,4cqw,28px) clamp(16px,4.8cqw,34px);
  flex-direction:column;
  overflow:visible;
  text-align:left;
}
.temporary-boost-content .eyebrow {
  margin:0 0 clamp(4px,1.3333cqw,9px);
  color:#eaffff;
  font-size:clamp(13px,3.4667cqw,26px);
  font-weight:800;
  line-height:1.35;
}
.temporary-boost-content h2 {
  margin:0;
  color:#fff;
  font-size:clamp(22px,5.8667cqw,44px);
  line-height:1.25;
}
.temporary-boost-description,
.temporary-boost-score-warning {
  margin:clamp(9px,2.9333cqw,20px) 0 0;
  color:#f5ffff;
  font-size:clamp(14px,3.7333cqw,28px);
  font-weight:600;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.temporary-boost-score-warning strong { color:#b42318; font-weight:900; }
.temporary-boost-choices {
  display:grid;
  min-width:0;
  margin-top:clamp(12px,4cqw,28px);
  gap:0;
}
.temporary-boost-choices .skill-choice {
  width:100%;
  min-width:0;
  min-height:44px;
  margin:0;
  touch-action:manipulation;
}
.temporary-boost-choices .skill-choice.has-art {
  display:block;
  aspect-ratio:665 / 231;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:6px;
  outline:0;
  background:transparent;
}
.temporary-boost-choices .skill-choice.has-art + .skill-choice.has-art {
  margin-top:clamp(-71px, -5.2cqw, -13px);
}
.temporary-boost-choices .skill-choice.has-art > strong,
.temporary-boost-choices .skill-choice.has-art > small,
.temporary-boost-choices .skill-choice.has-art > span { display:none; }
.temporary-boost-choices .skill-choice-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.temporary-boost-choices .skill-choice:not(.has-art) {
  padding:clamp(12px,3.7333cqw,26px);
  border:2px solid #087f8c;
  border-radius:6px;
  background:#fff;
  color:#0c2b3b;
  text-align:left;
}
.temporary-boost-choices .skill-choice:not(.has-art) strong {
  display:block;
  font-size:clamp(16px,4.2667cqw,32px);
  line-height:1.35;
}
.temporary-boost-choices .skill-choice:not(.has-art) small,
.temporary-boost-choices .skill-choice:not(.has-art) span {
  display:block;
  margin-top:clamp(4px,1.3333cqw,9px);
  color:#35606b;
  font-size:clamp(13px,3.4667cqw,26px);
  line-height:1.45;
}
.temporary-boost-choices .skill-choice:active { transform:scale(.985); filter:brightness(.94); }
.temporary-boost-choices .skill-choice:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.temporary-boost-choices .skill-choice:disabled { cursor:not-allowed; opacity:.55; filter:grayscale(.25); }
.temporary-boost-actions {
  display:grid;
  width:153px;
  max-width:100%;
  flex:none;
  place-items:center;
}
.temporary-boost-skip-button {
  width:100%;
  min-width:0;
  aspect-ratio:257 / 86;
}
@media (orientation:landscape) and (max-height:500px) {
  .modal.temporary-boost-modal {
    --temporary-boost-action-height:52px;
    --temporary-boost-gap:6px;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .generic-modal-stage.temporary-boost-stage {
    --generic-modal-max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--temporary-boost-action-height) - var(--temporary-boost-gap));
    --generic-modal-max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--temporary-boost-action-height) - var(--temporary-boost-gap));
    width:min(92vw,648px);
  }
  .generic-modal-content.temporary-boost-content { padding:12px 16px; }
  .temporary-boost-content .eyebrow { margin-bottom:2px; font-size:12px; }
  .temporary-boost-content h2 { font-size:22px; }
  .temporary-boost-description,
  .temporary-boost-score-warning { margin-top:7px; font-size:12px; line-height:1.45; }
  .temporary-boost-choices { margin-top:8px; gap:0; }
  .temporary-boost-choices .skill-choice.has-art + .skill-choice.has-art { margin-top:-34px; }
  .temporary-boost-actions { width:153px; }
}
.session-revoked-stage { padding-bottom:0; }
.session-revoked-panel { min-height:min(clamp(245px,76cqw,492px),var(--generic-modal-max-height)); }
.session-revoked-content {
  display:flex;
  min-height:calc(clamp(245px,76cqw,492px) - 40px);
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,10.4938cqw,68px) clamp(28px,8.642cqw,56px);
  text-align:center;
}
.session-revoked-content .activity-form-copy {
  margin:clamp(10px,3.3951cqw,22px) 0 0;
  color:#eaffff;
  font-size:clamp(12px,4.0123cqw,22px);
  line-height:1.65;
}
.session-relogin-button {
  width:100%;
  min-height:48px;
  margin-top:clamp(16px,5.2469cqw,34px);
  border:2px solid #087f8c;
  border-radius:5px;
  background:#fff;
  color:#087f8c;
  box-shadow:0 4px 0 rgba(4,86,106,.45);
  font-size:clamp(14px,4.6296cqw,25px);
}
.session-relogin-button:active {
  box-shadow:0 1px 0 rgba(4,86,106,.45);
  transform:translateY(3px);
}
.result-stats strong { display:block; overflow-wrap:anywhere; }.skill-choice small { display:block; margin-top:4px; color:#16707b; font-size:12px; font-weight:800; }.skill-choice span { margin-top:7px; }
.skill-success-modal {
  z-index:16;
  container-type:inline-size;
  place-items:start center;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,.62);
}
.skill-success-modal .skill-panel {
  position:relative;
  width:100cqw;
  max-width:none;
  height:100%;
  min-height:153.4667cqw;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  animation:none;
}
.skill-success-art {
  position:absolute;
  top:10cqw;
  left:5.2cqw;
  z-index:1;
  width:90.2667cqw;
  height:70.8cqw;
  object-fit:fill;
  pointer-events:none;
  animation:skill-success-center-pop .6s cubic-bezier(.2,.82,.25,1.18) both;
  transform-origin:center center;
}
.skill-success-hint-art {
  position:absolute;
  top:70.6667cqw;
  left:28.1333cqw;
  z-index:3;
  width:42.1333cqw;
  height:3.3333cqw;
  object-fit:fill;
  pointer-events:none;
  animation:skill-success-hint-in .36s .3s ease-out both;
}
.skill-success-modal .skill-choices {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  margin:0;
}
.skill-success-modal .skill-choice {
  position:absolute;
  left:6cqw;
  width:88.6667cqw;
  height:30.8cqw;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  text-align:left;
  animation:skill-choice-rise .5s cubic-bezier(.2,.72,.22,1) both;
  will-change:transform,opacity;
}
.skill-success-modal .skill-choice:nth-child(1) { top:73.3333cqw; animation-delay:.38s; }
.skill-success-modal .skill-choice:nth-child(2) { top:97.4667cqw; animation-delay:.52s; }
.skill-success-modal .skill-choice:nth-child(3) { top:122.6667cqw; animation-delay:.66s; }
.skill-success-modal .skill-choice.has-art:hover { background:transparent; filter:brightness(1.06); }
.skill-success-modal .skill-choice:active { transform:scale(.985); filter:brightness(.94); }
.skill-success-modal .skill-choice:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
.skill-success-modal .skill-choice:disabled { cursor:not-allowed; opacity:.55; filter:grayscale(.25); }
.skill-success-modal .skill-choice.has-art > strong,
.skill-success-modal .skill-choice.has-art > small,
.skill-success-modal .skill-choice.has-art > span { display:none; }
.skill-choice-art { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.skill-success-modal .skill-choice:not(.has-art) {
  height:auto;
  min-height:24cqw;
  padding:4.5cqw 7cqw 4cqw 25cqw;
  border:.4cqw solid #fff;
  border-radius:4cqw;
  background:linear-gradient(100deg,#3bc9c0,#32a9d3);
  box-shadow:0 0 2.4cqw rgba(255,255,255,.72);
  color:#fff;
}
.skill-success-modal .skill-choice:not(.has-art) strong { color:#fff; font-size:4.8cqw; }
.skill-success-modal .skill-choice:not(.has-art) small,
.skill-success-modal .skill-choice:not(.has-art) span { color:#fff; font-size:3.2cqw; line-height:1.35; }
@keyframes skill-success-center-pop {
  0% { opacity:0; transform:scale(.55); }
  68% { opacity:1; transform:scale(1.07); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes skill-success-hint-in {
  from { opacity:0; transform:translateY(2cqw); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes skill-choice-rise {
  from { opacity:0; transform:translateY(8cqw); }
  to { opacity:1; transform:translateY(0); }
}
@media (min-width:600px) { .test-field-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.test-skill-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@keyframes reward-notice-in { from { opacity:0; transform:translateX(-50%) scale(.92); } to { opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes modal-fade-in-down { from { opacity:0; transform:translateY(-100px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .modal-panel,.psd-modal-panel,.generic-modal-stage,.pause-stage,.gameplay-guide-stage,.gameplay-guide-target,.battle-notice.special,.skill-success-art,.skill-success-hint-art,.skill-success-modal .skill-choice { animation:none; } }
@media (max-width:360px) { h1 { font-size:36px; }.profile-strip { gap:5px; }.profile-strip div { padding:10px 5px; }.hud { gap:4px; }.hud>div { padding:4px 5px; }.test-field-grid,.test-skill-grid { grid-template-columns:1fr; }.test-field span,.test-skill-field span { min-height:0; } }
.demo-qr { display:grid; place-items:stretch; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr); gap:0; padding:9px; border:8px solid #fff; background:#fff; }.demo-qr i { position:static; display:block; width:100%; height:100%; min-width:0; min-height:0; background:#fff; }.demo-qr i.on { background:#112d3a; }
.activity-modal .consent-field { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; }.activity-modal .consent-field input { width:16px; height:16px; }
.activity-screen { min-height:100vh; min-height:100dvh; padding:calc(26px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); background:#d9f0ed; }
.identity-simulator { margin-top:14px; padding:12px; border:2px dashed #6f7768; border-radius:5px; background:#f8f4dd; }.identity-simulator h2 { margin:0; font-size:16px; }.identity-simulator p { margin:7px 0 0; color:#59685e; font-size:12px; line-height:1.5; }.identity-simulator-controls { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }.identity-simulator-controls label { display:grid; gap:5px; color:#455a47; font-size:12px; font-weight:800; }.identity-simulator input { width:100%; min-width:0; height:40px; padding:8px; border:2px solid #8c9b83; border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }.identity-simulator .secondary-button { min-height:40px; margin:0; }.identity-simulator-status { min-height:18px; color:#38646b !important; font-weight:700; }
.activity-hero { display:flex; min-height:calc(100dvh - 126px); flex-direction:column; padding:18px 20px 24px; border:3px solid var(--ink); border-radius:7px; background:linear-gradient(160deg,#f8ffdc 0%,#d9f5e5 58%,#b5dceb 100%); box-shadow:6px 6px 0 var(--ink); }.activity-badge { align-self:flex-start; padding:5px 9px; border:2px solid var(--ink); border-radius:4px; background:var(--coral); color:#fff; font-size:11px; font-weight:800; }.activity-hero .brand-mark { margin-top:28px; }.activity-hero h1 { max-width:100%; margin-top:8px; white-space:pre-line; }.activity-lead { max-width:280px; margin:17px 0 auto; color:#35606b; line-height:1.65; }.activity-start { width:100%; margin-top:30px; }.activity-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }.activity-nav button { display:grid; justify-items:center; gap:5px; min-height:64px; padding:7px 3px; border:2px solid var(--ink); border-radius:5px; background:#fff; color:var(--ink); font-size:12px; font-weight:800; }.activity-nav b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#d8efec; color:var(--sea); }.activity-status { min-height:18px; margin:12px 3px 0; color:#35606b; font-size:12px; text-align:center; }.activity-retry-button { display:block; width:100%; min-height:42px; margin:8px 0 0; border:2px solid var(--ink); font-size:13px; font-weight:800; }.activity-detail { overflow-y:auto; background:#eef8f5; }.activity-header { display:flex; align-items:center; gap:12px; margin-bottom:22px; }.activity-header span { color:#527277; font-size:12px; }.activity-panel { margin:0 0 14px; padding:17px; border:2px solid var(--line); border-radius:6px; background:#fff; }.activity-panel h3 { margin:0 0 12px; font-size:17px; }.rule-list { display:grid; gap:11px; margin:0; padding-left:21px; color:#42676e; font-size:14px; line-height:1.6; }.loading-state,.empty-state { margin:30px 0; color:#527277; line-height:1.6; text-align:center; }.rank-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:12px; }.rank-tabs button { min-height:38px; border:2px solid var(--line); border-radius:4px; background:#fff; color:#41656d; font-size:13px; font-weight:800; }.rank-tabs button.active { border-color:var(--ink); background:#fff1bc; color:var(--ink); }.rank-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }.rank-list li { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:47px; border-bottom:1px solid var(--line); }.rank-list li:last-child { border-bottom:0; }.rank-list b { color:var(--sea); }.rank-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.rank-list strong { font-size:14px; }.my-rank { margin:12px 0; padding:12px; border-radius:5px; background:#d5eeeb; color:#315d65; font-size:13px; text-align:center; }.profile-card p { display:flex; justify-content:space-between; gap:16px; margin:12px 0 0; color:#527277; font-size:14px; }.profile-card b { color:var(--ink); }.prize-list { display:grid; gap:8px; }.prize-list button { display:grid; gap:4px; padding:12px; border:2px solid #e3be65; border-radius:5px; background:#fff8d8; text-align:left; }.prize-list span { font-weight:800; }.prize-list small { color:#755d23; }.activity-modal { z-index:30; }.activity-modal-panel { position:relative; text-align:left; }.activity-modal-panel .activity-close { position:absolute; top:12px; right:12px; }.activity-modal-panel h2,.activity-modal-panel .eyebrow { margin-right:42px; }.activity-form-copy { color:#527277; font-size:13px; line-height:1.55; }.activity-modal form { display:grid; gap:13px; margin-top:20px; }.activity-modal label { display:grid; gap:6px; color:#315d65; font-size:13px; font-weight:800; }.activity-modal input { width:100%; height:44px; padding:9px 10px; border:2px solid #8ebdba; border-radius:4px; color:var(--ink); font:inherit; }.activity-modal input:focus { outline:0; border-color:var(--sea); box-shadow:0 0 0 2px rgba(8,127,140,.15); }.activity-modal .primary-button { margin-top:3px; }.form-error { min-height:18px; margin:0; color:#bd4137; font-size:12px; font-weight:800; }.redeem-qr { display:block; width:min(100%,220px); aspect-ratio:1; margin:17px auto; border:8px solid #fff; image-rendering:auto; }.qr-placeholder { display:grid; place-items:center; width:190px; height:190px; margin:17px auto; border:2px dashed var(--sea); color:#527277; font-size:13px; text-align:center; }.qr-meta { color:#527277; font-size:13px; line-height:1.65; text-align:center; }.activity-modal-panel #qrContent h3 { text-align:center; }

.prize-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border:2px solid #e3be65; border-radius:5px; background:#fff8d8; text-align:left; }
.prize-card span { display:block; font-weight:800; }
.prize-card small { display:block; margin-top:4px; color:#755d23; line-height:1.35; }
.prize-card button { min-width:88px; min-height:38px; padding:8px 10px; border:2px solid var(--ink); border-radius:5px; background:#fff; color:var(--ink); font-size:12px; font-weight:900; text-align:center; }
.prize-card button:disabled { opacity:.52; }
.prize-card.redeemed { border-color:#8ebdba; background:#edf7f5; }
.redeemed-state { margin:18px auto 8px; padding:20px 16px; border:2px solid #8ebdba; border-radius:7px; background:#edf7f5; color:#315d65; text-align:center; }
.redeemed-state strong { display:block; color:#087f8c; font-size:24px; }
.redeemed-state p { margin:10px 0 6px; line-height:1.6; }
.redeemed-state small { color:#527277; }
.prize-snapshot-modal {
  position:fixed;
  z-index:82;
  place-items:start center;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,.6);
}
.prize-snapshot-stage {
  position:relative;
  width:min(100%,750px,calc(67.45dvh - 12px));
  height:100%;
  min-height:0;
  container-type:inline-size;
}
#prizeNoticeContent { position:absolute; inset:0; pointer-events:none; }
.prize-snapshot-card {
  position:absolute;
  top:50cqw;
  left:17.4667cqw;
  width:65.2cqw;
  aspect-ratio:489 / 612;
  color:#fff;
  font-family:"Source Han Sans CN Medium","Source Han Sans SC Medium","Microsoft YaHei",sans-serif;
  font-size:clamp(12.84px,3.424cqw,25.68px);
  font-weight:500;
  line-height:1.42;
  text-shadow:0 1px 2px rgba(0,78,120,.35);
  animation:modal-fade-in-down .6s ease-out both;
}
.prize-snapshot-card.prize-snapshot-season { top:49.7333cqw; aspect-ratio:489 / 614; }
.prize-snapshot-card.prize-snapshot-final { top:48.1333cqw; aspect-ratio:489 / 626; }
.prize-snapshot-frame { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; }
.prize-snapshot-intro,
.prize-snapshot-rank,
.prize-snapshot-prize {
  position:absolute;
  z-index:1;
  margin:0;
  overflow-wrap:anywhere;
  letter-spacing:0;
}
.prize-snapshot-intro {
  top:33.9869%;
  left:15.7464%;
  width:68.5072%;
  min-height:4.2484%;
  text-align:center;
  white-space:nowrap;
}
.prize-snapshot-season .prize-snapshot-intro { top:34.202%; left:12.4744%; width:75.0511%; }
.prize-snapshot-final .prize-snapshot-intro { top:35.4633%; }
.prize-snapshot-rank {
  top:46.0784%;
  left:20.2454%;
  width:57.6687%;
  min-height:4.085%;
  text-align:left;
  white-space:nowrap;
}
.prize-snapshot-season .prize-snapshot-rank { top:46.2541%; }
.prize-snapshot-final .prize-snapshot-rank { top:47.2843%; }
.prize-snapshot-prize {
  top:61.1111%;
  left:20.2454%;
  display:block;
  width:57.6687%;
  min-height:18.6275%;
  text-align:left;
}
.prize-snapshot-season .prize-snapshot-prize { top:61.2378%; }
.prize-snapshot-final .prize-snapshot-prize { top:61.9808%; }
.prize-snapshot-prize span { white-space:nowrap; }
.prize-snapshot-prize strong { font:inherit; overflow-wrap:anywhere; }
.prize-snapshot-close {
  position:absolute;
  z-index:3;
  top:137.2cqw;
  left:50%;
  display:grid;
  place-items:center;
  width:max(44px,11.0667cqw);
  height:max(44px,11.0667cqw);
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  touch-action:manipulation;
  transform:translateX(-50%);
}
.prize-snapshot-close img { display:block; width:min(100%,11.0667cqw); height:min(100%,11.0667cqw); object-fit:contain; pointer-events:none; }
.prize-snapshot-close:active { transform:translateX(-50%) scale(.94); }
.prize-snapshot-close:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (max-width:360px) {
  .prize-snapshot-intro { left:3%; width:94%; }
  .prize-snapshot-season .prize-snapshot-intro { left:3%; width:94%; }
  .prize-snapshot-rank,
  .prize-snapshot-prize { left:15%; width:70%; }
}
@media (prefers-reduced-motion:reduce) { .prize-snapshot-card { animation:none; } }

/* 首页按 750 x 1526 PSD 画板等比布局。 */
#activityHome.activity-home-screen {
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  background:#073b5d url("assets/home/background.webp") center top / cover no-repeat;
}
#activityHome .activity-home-animated-bg { display:none; }
#activityHome.use-animated-home-bg .activity-home-animated-bg {
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:max(100dvh,203.5556cqw);
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
#activityHome.use-animated-home-bg .activity-home-title {
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
#activityHome .activity-hero {
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:750 / 1526;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#activityHome .activity-home-logo,
#activityHome .activity-home-title,
#activityHome .activity-start,
#activityHome .activity-nav {
  position:absolute;
  z-index:2;
}
#activityHome .activity-home-logo {
  top:3.6697%;
  left:4.6667%;
  width:25.2%;
  height:5.8978%;
  object-fit:fill;
  user-select:none;
  animation:activity-home-fade-down .6s ease-out backwards;
}
#activityHome .activity-home-title {
  top:12.582%;
  left:7.2%;
  width:87.0667%;
  height:14.0236%;
  max-width:none;
  margin:0;
  animation:activity-home-title-in 1s ease-out .2s backwards;
}
#activityHome .activity-home-title img,
#activityHome .activity-start img,
#activityHome .activity-nav img {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
#activityHome .activity-start img {
  transform-origin:center;
  animation:activity-start-heartbeat 1.2s ease-out 1.7s infinite both;
}
#activityHome .activity-start {
  top:78.0472%;
  left:24.2667%;
  width:51.4667%;
  height:9.2398%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  transition:filter .16s ease, transform .16s ease;
  animation:activity-home-bounce-in .7s ease-out 1s backwards;
}
#activityHome .activity-start:hover {
  filter:brightness(1.05) saturate(1.06);
}
#activityHome .activity-start:active {
  transform:scale(.97);
  box-shadow:none;
}
#activityHome .activity-start:focus-visible,
#activityHome .activity-nav button:focus-visible {
  outline:3px solid #fff7ab;
  outline-offset:2px;
}
#activityHome .activity-nav {
  top:1.5727%;
  left:80.6667%;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  width:22.6667%;
  margin:0;
}
#activityHome .activity-nav button {
  width:100%;
  height:auto;
  aspect-ratio:170 / 70;
  min-height:0;
  margin:0 0 -1px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  transition:filter .16s ease, transform .16s ease;
  animation:activity-home-nav-in .6s ease-out backwards;
}
#activityHome .activity-nav button:nth-child(1) {
  animation-delay:.4s;
}
#activityHome .activity-nav button:nth-child(2) {
  animation-delay:.6s;
}
#activityHome .activity-nav button:nth-child(3) {
  animation-delay:.8s;
}
#activityHome .activity-nav button:hover {
  filter:brightness(1.08);
}
#activityHome .activity-nav button:active {
  transform:translateX(-3px);
}
#activityHome .activity-status {
  position:absolute;
  z-index:4;
  right:18%;
  bottom:max(18px, calc(16px + env(safe-area-inset-bottom)));
  left:18%;
  min-height:0;
  margin:0;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(1,43,58,.72);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
}
#activityHome .activity-status.form-error {
  border-color:#fff0bd;
  background:rgba(151,48,28,.88);
  color:#fff;
  opacity:1;
}
#activityHome .activity-retry-button {
  position:absolute;
  z-index:5;
  right:28%;
  bottom:max(54px, calc(52px + env(safe-area-inset-bottom)));
  left:28%;
  width:44%;
  min-height:38px;
  margin:0;
  border:2px solid #fff;
  border-radius:6px;
  background:#f7782f;
  color:#fff;
  box-shadow:0 3px 0 rgba(72,29,10,.38);
}
#activityHome .identity-simulator {
  position:absolute;
  z-index:8;
  top:28%;
  right:6%;
  left:6%;
  max-height:66%;
  margin:0;
  overflow-y:auto;
  border:2px solid #087c79;
  border-radius:7px;
  background:rgba(248,252,241,.96);
  box-shadow:0 8px 24px rgba(0,36,52,.32);
}
.activity-detail {
  height:100vh;
  height:100dvh;
}
@keyframes activity-home-fade-down {
  from { opacity:0; transform:translateY(-100px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes activity-home-title-in {
  from { opacity:0; transform:scale(0); }
  to { opacity:1; transform:scale(1); }
}
@keyframes activity-home-bounce-in {
  0% { opacity:0; transform:scale(.3); }
  50% { transform:scale(1.05); }
  70% { transform:scale(.9); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes activity-home-nav-in {
  from { opacity:0; transform:translateX(100px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes activity-start-heartbeat {
  0% { transform:scale(.9); }
  50% { transform:scale(1); }
  100% { transform:scale(.9); }
}
@media (prefers-reduced-motion:reduce) {
  #activityHome .activity-home-logo,
  #activityHome .activity-home-title,
  #activityHome .activity-start,
  #activityHome .activity-start img,
  #activityHome .activity-nav button { animation:none; }
  #activityHome .activity-start,
  #activityHome .activity-nav button { transition:none; }
}

/* 表单与隐私弹窗按 750 x 1526 PSD 比例布局，设计稿 bg 不参与渲染。 */
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.psd-modal {
  position:fixed;
  z-index:40;
  padding:0;
  background:rgba(0,0,0,.6);
}
.privacy-modal {
  z-index:41;
}
.psd-modal .psd-modal-panel {
  position:relative;
  width:min(86.1333%,646px,calc(61.7dvh - 15px));
  aspect-ratio:646 / 1047;
  overflow:visible;
  container-type:inline-size;
}
.psd-modal-frame {
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.psd-modal-content {
  position:absolute;
  z-index:2;
  top:9.7421%;
  left:6.6563%;
  width:84.5201%;
  height:86.2464%;
  overflow:hidden;
  border-radius:5.4945% / 3.3223%;
  background:#fff;
}
.psd-modal-close {
  position:absolute;
  z-index:5;
  top:0;
  right:0;
  width:15.4799%;
  aspect-ratio:1;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
}
.psd-modal-close:focus-visible,
.psd-image-button:focus-visible,
.privacy-link:focus-visible {
  outline:3px solid #fff7ab;
  outline-offset:2px;
}
.psd-modal .psd-form {
  position:absolute;
  inset:0;
  display:block;
  margin:0;
}
.psd-modal .psd-form-field {
  position:absolute;
  left:8.0586%;
  display:block;
  width:83.5165%;
  color:#aaa;
  font-size:clamp(14px,4.644cqw,30px);
  font-weight:700;
  line-height:1.1;
}
.psd-modal .psd-name-field { top:8.0842%; }
.psd-modal .psd-phone-field { top:25.4707%; }
.psd-modal .psd-account-field { top:43.1894%; }
.psd-modal .psd-form-field span {
  display:block;
}
.psd-modal .psd-form-field input {
  display:block;
  width:100%;
  height:clamp(36px,12.2291cqw,79px);
  min-height:0;
  margin-top:3.7281%;
  padding:0 5.2632%;
  border:0;
  border-radius:clamp(6px,1.8576cqw,12px);
  outline:0;
  background:#e6e6e6;
  color:#444;
  box-shadow:none;
  font:inherit;
  font-size:clamp(14px,4.3344cqw,28px);
  font-weight:400;
}
.psd-modal .psd-form-field input:focus {
  border:0;
  box-shadow:0 0 0 3px rgba(0,174,161,.35);
}
.psd-image-button {
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  color:transparent;
  font-size:0;
  transition:filter .16s ease, transform .16s ease;
}
.psd-image-button:hover { filter:brightness(1.05); }
.psd-image-button:active { transform:scale(.97); }
.psd-image-button:disabled { opacity:.58; filter:saturate(.65); }
.form-submit-button {
  top:64.8948%;
  left:26.5568%;
  width:49.6337%;
  aspect-ratio:271 / 99;
  background-image:url("assets/modal/form-submit.webp");
}
.psd-consent-field {
  position:absolute;
  top:80.8416%;
  left:15.7509%;
  display:flex;
  align-items:center;
  width:71.7949%;
  min-width:0;
  color:#555;
  font-size:clamp(10px,3.7152cqw,24px);
  line-height:1.2;
  white-space:nowrap;
}
.psd-modal .psd-consent-field input {
  flex:none;
  width:clamp(13px,4.0248cqw,26px);
  height:clamp(13px,4.0248cqw,26px);
  min-height:0;
  margin:0 clamp(6px,2.0124cqw,13px) 0 0;
  padding:0;
  appearance:none;
  border:1px solid #d4d4d4;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
}
.psd-modal .psd-consent-field input:checked {
  border-color:#0fb6a4;
  background:#0fb6a4;
  box-shadow:inset 0 0 0 clamp(3px,.9288cqw,6px) #fff;
}
.psd-consent-field label {
  display:block;
  flex:none;
  color:#555;
  font:inherit;
  font-weight:400;
}
.privacy-link {
  flex:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#ff4339;
  font:inherit;
}
.psd-form-error {
  position:absolute;
  top:86.9%;
  right:7%;
  left:7%;
  min-height:0;
  margin:0;
  color:#d92820;
  font-size:clamp(10px,3.096cqw,20px);
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
.privacy-scroll {
  position:absolute;
  top:5.4264%;
  right:1.8315%;
  bottom:17.8295%;
  left:3.6630%;
  overflow-y:auto;
  padding-right:2%;
  color:#111;
  font-size:clamp(12px,3.87cqw,25px);
  line-height:1.68;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#12aa9c transparent;
}
.privacy-scroll p,
.privacy-scroll h3,
.privacy-scroll ol {
  margin:0;
}
.privacy-scroll h3 {
  font:inherit;
  font-weight:400;
}
.privacy-scroll ol {
  padding-left:1.5em;
}
.privacy-scroll li {
  padding-left:.1em;
}
.privacy-ack-button {
  bottom:2.7685%;
  left:25.2747%;
  width:49.6337%;
  aspect-ratio:271 / 99;
  background-image:url("assets/modal/privacy-ack.webp");
}
.profile-basic-info {
  padding:4.5404% 8.0586% 0;
}
.profile-info-field + .profile-info-field {
  margin-top:clamp(24px,4.644cqw,30px);
}
.profile-info-field span {
  display:block;
  color:#aaa;
  font-size:clamp(14px,4.644cqw,30px);
  font-weight:700;
  line-height:1.1;
}
.profile-info-field strong {
  display:flex;
  align-items:center;
  width:100%;
  height:clamp(36px,12.2291cqw,79px);
  margin-top:3.7281%;
  padding:0 5.2632%;
  overflow:hidden;
  border-radius:clamp(6px,1.8576cqw,12px);
  background:#e6e6e6;
  color:#444;
  font-size:clamp(14px,4.3344cqw,28px);
  font-weight:400;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-prize-section {
  min-height:47.0588cqw;
  margin-top:clamp(54px,17.4923cqw,113px);
  padding:clamp(12px,3.4056cqw,22px) clamp(8px,2.4768cqw,16px) clamp(14px,3.7152cqw,24px);
  border-radius:clamp(14px,4.644cqw,30px);
  background:#c8ece9;
}
.profile-prize-section h3 {
  margin:0 0 clamp(10px,3.096cqw,20px);
  color:#006e72;
  font-size:clamp(20px,5.8824cqw,38px);
  line-height:1.2;
  text-align:center;
}
.profile-prize-list {
  display:grid;
  gap:clamp(7px,1.2384cqw,8px);
}
.profile-prize-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(8px,2.4768cqw,16px);
  min-height:clamp(56px,15.4799cqw,100px);
  padding:clamp(8px,2.4768cqw,16px) clamp(10px,3.096cqw,20px);
  border-radius:clamp(9px,2.7864cqw,18px);
  background:#eef6ff;
}
.profile-prize-copy {
  min-width:0;
}
.profile-prize-copy strong,
.profile-prize-copy small {
  display:block;
}
.profile-prize-copy strong {
  color:#006e72;
  font-size:clamp(14px,4.0248cqw,26px);
  line-height:1.25;
  overflow-wrap:anywhere;
  white-space:normal;
}
.profile-prize-copy small {
  margin-top:clamp(3px,.9288cqw,6px);
  color:#457275;
  font-size:clamp(10px,2.7864cqw,18px);
  line-height:1.35;
  white-space:normal;
}
.profile-redeem-button,
.profile-prize-status {
  display:grid;
  flex:none;
  place-items:center;
  min-width:clamp(62px,17.9567cqw,116px);
  min-height:clamp(32px,7.4303cqw,48px);
  padding:clamp(5px,1.2384cqw,8px) clamp(8px,2.4768cqw,16px);
  border:0;
  border-radius:clamp(5px,1.5479cqw,10px);
  color:#fff;
  font-size:clamp(12px,3.7152cqw,24px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
}
.profile-redeem-button {
  background:#d98332;
}
.profile-redeem-button:hover {
  filter:brightness(1.06);
}
.profile-redeem-button:active {
  transform:scale(.97);
}
.profile-prize-status {
  background:#17877f;
}
.profile-prize-status:active {
  transform:scale(.97);
}
.profile-redeem-button:focus-visible,
.profile-prize-status:focus-visible {
  outline:3px solid #006e72;
  outline-offset:2px;
}
.profile-prize-status.expired {
  background:#8b9797;
}
.profile-empty-prize,
.profile-loading-state,
.profile-error-state {
  margin:0;
  padding:clamp(24px,7.7399cqw,50px) 12px;
  color:#477275;
  font-size:clamp(13px,3.7152cqw,24px);
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.profile-error-state {
  color:#c9362e;
}
#qrModal { z-index:83; }
.modal.qr-modal {
  position:fixed;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:rgba(0,0,0,.6);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.qr-modal-stage {
  width:min(90vw,675px,calc(95dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
.qr-modal-content {
  height:auto;
  padding:clamp(22px,7.1111cqw,48px) clamp(20px,6.2222cqw,42px) clamp(24px,7.1111cqw,48px);
  text-align:center;
}
.qr-modal-content .eyebrow {
  margin-bottom:clamp(3px,.8889cqw,6px);
  font-size:clamp(12px,3.5556cqw,24px);
  font-weight:700;
}
.qr-modal-content h2 {
  margin:0;
  font-size:clamp(22px,6.5185cqw,44px);
  line-height:1.25;
}
#qrContent {
  width:100%;
  min-width:0;
}
.qr-prize-view {
  display:grid;
  justify-items:center;
  min-width:0;
  margin-top:clamp(12px,3.5556cqw,24px);
}
.qr-prize-view .redeem-qr,
.qr-prize-view .qr-placeholder {
  display:block;
  width:min(56.8889cqw,256px);
  height:auto;
  aspect-ratio:1;
  margin:0 auto;
  border:clamp(6px,1.7778cqw,12px) solid #fff;
  border-radius:clamp(4px,1.1852cqw,8px);
  background:#fff;
  box-shadow:0 clamp(5px,1.4815cqw,10px) clamp(12px,3.5556cqw,24px) rgba(4,60,78,.3);
  image-rendering:auto;
  object-fit:contain;
}
.qr-prize-view .qr-placeholder {
  display:grid;
  place-items:center;
  padding:clamp(16px,4.7407cqw,32px);
  color:#35737a;
  font-size:clamp(12px,3.5556cqw,24px);
  font-weight:700;
  line-height:1.5;
}
.qr-prize-info {
  width:100%;
  min-width:0;
  margin:clamp(14px,4.1481cqw,28px) 0 0;
  color:#fff;
  text-align:left;
}
.qr-prize-info > div {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:clamp(8px,2.3704cqw,16px);
  align-items:start;
  padding:clamp(7px,2.0741cqw,14px) 0;
  border-bottom:1px solid rgba(255,255,255,.34);
}
.qr-prize-info dt,
.qr-prize-info dd {
  margin:0;
  font-size:clamp(12px,3.5556cqw,24px);
  line-height:1.5;
}
.qr-prize-info dt {
  color:#d9ffff;
  font-weight:700;
  white-space:nowrap;
}
.qr-prize-info dd {
  min-width:0;
  color:#fff;
  font-weight:800;
  overflow-wrap:anywhere;
  white-space:normal;
}
.qr-prize-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1.7778cqw,12px);
  min-width:clamp(108px,32cqw,216px);
  min-height:clamp(34px,10.0741cqw,68px);
  margin:clamp(14px,4.1481cqw,28px) 0 0;
  padding:clamp(6px,1.7778cqw,12px) clamp(14px,4.1481cqw,28px);
  border:2px solid rgba(255,255,255,.75);
  border-radius:clamp(5px,1.4815cqw,10px);
  color:#4b3b00;
  background:#ffe172;
  font-size:clamp(14px,4.1481cqw,28px);
  font-weight:900;
  line-height:1;
}
.qr-prize-status span {
  width:clamp(9px,2.6667cqw,18px);
  height:clamp(9px,2.6667cqw,18px);
  border:2px solid currentColor;
  border-radius:50%;
}
.qr-prize-status[data-status="REDEEMED"] {
  color:#075f55;
  background:#8af5dd;
}
.qr-prize-status[data-status="EXPIRED"] {
  color:#3e4d51;
  background:#c7d0d3;
}
.qr-state-visual {
  display:grid;
  place-items:center;
  width:min(37.9259cqw,160px);
  aspect-ratio:1;
  border:clamp(4px,1.1852cqw,8px) solid rgba(255,255,255,.92);
  border-radius:50%;
  color:#075f55;
  background:#8af5dd;
  box-shadow:0 clamp(5px,1.4815cqw,10px) clamp(12px,3.5556cqw,24px) rgba(4,60,78,.3);
}
.qr-state-visual span::before {
  content:"✓";
  font-size:clamp(48px,14.2222cqw,96px);
  font-weight:900;
  line-height:1;
}
.qr-state-expired {
  color:#3e4d51;
  background:#c7d0d3;
}
.qr-state-expired span::before { content:"×"; }
.qr-redeemed-at {
  margin:clamp(8px,2.3704cqw,16px) 0 0;
  color:#d9ffff;
  font-size:clamp(11px,3.2593cqw,22px);
  line-height:1.5;
}
.qr-loading-state,
.qr-error-state {
  margin:clamp(44px,13.037cqw,88px) 0;
  color:#fff;
  font-size:clamp(14px,4.1481cqw,28px);
  font-weight:700;
  line-height:1.6;
  text-align:center;
}
.qr-error-state { color:#fff0cf; }
@media (orientation:landscape) and (max-height:500px) {
  .qr-modal-stage { width:min(92vw,648px); }
}

/* 排行榜按 750 x 1595 PSD 构图，背景与控件直接使用 PSD 图层资源。 */
#activityDetail.ranking-screen {
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#9dfddd;
}
#activityDetail.ranking-screen > .activity-header {
  display:none;
}
#activityDetail.ranking-screen #activityDetailContent {
  width:100%;
  height:100%;
  container-type:inline-size;
}
.ranking-page {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
  padding:calc(8.5333cqw + env(safe-area-inset-top)) clamp(18px,4.8vw,36px) calc(12px + env(safe-area-inset-bottom));
  overflow:hidden;
  isolation:isolate;
  background:#9dfddd;
}
.ranking-page::before {
  position:absolute;
  z-index:-1;
  inset:0;
  background:url("assets/ranking/ranking-bg.webp") top center / 100% auto no-repeat;
  content:"";
  pointer-events:none;
}
.ranking-back-button {
  position:absolute;
  z-index:8;
  top:calc(min(3.6vw,27px) + env(safe-area-inset-top));
  left:4.4%;
  display:block;
  width:min(9.8667%,74px);
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
}
.ranking-back-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ranking-title {
  position:relative;
  z-index:2;
  display:grid;
  flex:none;
  place-items:center;
  width:min(58.4cqw,438px);
  min-height:clamp(52px,13.8667vw,104px);
  margin:0 auto;
  padding:0 6%;
  border:clamp(2px,.5333vw,4px) solid #fff;
  border-radius:clamp(12px,3.2vw,24px);
  outline:clamp(3px,.8vw,6px) solid #2ce6c9;
  background:linear-gradient(180deg,#39f1d0 0%,#20d8bd 100%);
  box-shadow:0 clamp(3px,.8vw,6px) 0 #0aa8a8;
  color:#00869b;
  font-size:clamp(26px,7.2vw,54px);
  font-weight:900;
  line-height:1;
  text-align:center;
  text-shadow:0 2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff,0 -2px 0 #fff;
}
.ranking-title::before,
.ranking-title::after {
  position:absolute;
  z-index:-1;
  top:29%;
  width:13%;
  height:42%;
  background:repeating-linear-gradient(180deg,#fff 0 18%,#52ead2 18% 36%);
  content:"";
  transform:skewX(24deg);
}
.ranking-title::before { right:100%; }
.ranking-title::after { left:100%; transform:skewX(-24deg); }
.ranking-title-image {
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:none;
  box-shadow:none;
  text-shadow:none;
}
.ranking-title-image::before,
.ranking-title-image::after {
  display:none;
}
.ranking-title-image img {
  display:block;
  width:100%;
  height:auto;
}
.ranking-podium {
  display:grid;
  flex:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(4px,1.6vw,12px);
  width:88%;
  height:min(39.4667cqw,296px);
  margin:min(.5333cqw,4px) auto 0;
}
.ranking-podium-card {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  color:#007274;
  text-align:center;
}
.ranking-podium-card-1 { order:2; }
.ranking-podium-card-2 { order:1; }
.ranking-podium-card-3 { order:3; }
.ranking-medal {
  position:relative;
  width:100%;
  aspect-ratio:1;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.ranking-podium-card-1 .ranking-medal {
  aspect-ratio:231 / 248;
  background-image:url("assets/ranking/rank-first-frame.webp");
}
.ranking-podium-card-2 .ranking-medal {
  aspect-ratio:177 / 167;
  background-image:url("assets/ranking/rank-second-frame.webp");
}
.ranking-podium-card-3 .ranking-medal {
  width:92%;
  aspect-ratio:159 / 160;
  background-image:url("assets/ranking/rank-third-frame.webp");
}
.ranking-podium-card-1.empty .ranking-medal {
  background-image:url("assets/ranking/rank-first-empty.webp");
}
.ranking-podium-card-2.empty .ranking-medal {
  background-image:url("assets/ranking/rank-second-empty.webp");
}
.ranking-podium-card-3.empty .ranking-medal {
  background-image:url("assets/ranking/rank-third-empty.webp");
}
.ranking-medal-score {
  position:absolute;
  top:39%;
  left:20%;
  display:grid;
  place-items:center;
  width:60%;
  height:30%;
  overflow-wrap:anywhere;
  background:transparent;
  color:#df531d;
  font-size:clamp(13px,calc(4cqw + 1px),31px);
  font-weight:900;
  line-height:1.05;
}
.ranking-podium-card-2 .ranking-medal-score {
  color:#487bb4;
}
.ranking-podium-card-3 .ranking-medal-score {
  color:#af2c11;
}
.ranking-podium-card-2 .ranking-medal-score,
.ranking-podium-card-3 .ranking-medal-score {
  font-size:clamp(8px,calc(3.4667cqw - 2px),26px);
}
.ranking-podium-card > strong,
.ranking-podium-card > small {
  display:block;
  width:130%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-podium-card > strong {
  margin-top:clamp(1px,.4dvh,5px);
  font-size:clamp(11px,3.2vw,24px);
}
.ranking-podium-card > small {
  margin-top:2px;
  font-size:clamp(9px,2.6667vw,20px);
  font-weight:700;
}
.ranking-table {
  display:flex;
  flex:1 1 auto;
  min-height:124px;
  flex-direction:column;
  margin-top:min(4.1333cqw,31px);
  overflow:hidden;
  border-radius:clamp(13px,3.7333vw,28px);
  background:#fff;
  box-shadow:0 clamp(6px,1.3333vw,10px) 0 #57eccb;
}
.ranking-table-head,
.ranking-list li {
  display:grid;
  grid-template-columns:14% 27% 35% 24%;
  align-items:center;
  text-align:center;
}
.ranking-table-head {
  flex:none;
  min-height:clamp(38px,8.4vw,63px);
  padding:0 2%;
  background:#a7f7e8;
  color:#31b8a6;
  font-size:clamp(13px,3.7333vw,28px);
  font-style:italic;
  font-weight:900;
}
.ranking-list {
  flex:1 1 auto;
  min-height:0;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  list-style:none;
  scrollbar-width:thin;
  scrollbar-color:#31b8a6 transparent;
}
.ranking-list li {
  min-height:clamp(42px,10.9333vw,82px);
  padding:4px 2%;
  color:#606060;
  font-size:clamp(12px,3.4667vw,26px);
}
.ranking-list li:nth-child(odd) { background:#e8fffa; }
.ranking-list li:nth-child(even) { background:#fff; }
.ranking-list li b,
.ranking-list li strong {
  font:inherit;
  font-weight:700;
}
.ranking-list li span,
.ranking-list li em {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-list li em {
  font-style:normal;
}
.ranking-list .ranking-empty-row {
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  min-height:100%;
  color:#388b84;
}
.ranking-footer {
  display:grid;
  flex:none;
  justify-items:center;
  padding-top:clamp(10px,1.8dvh,24px);
}
.ranking-footer p {
  margin:0;
  color:#666;
  font-size:clamp(16px,4.2667vw,32px);
  font-weight:700;
}
.ranking-footer p strong { font:inherit; }
.ranking-other-button {
  width:min(44.2667%,332px);
  aspect-ratio:332 / 82;
  margin-top:clamp(7px,1dvh,16px);
  padding:0;
  border:0;
  background:transparent;
}
.ranking-footer.unpublished .ranking-other-button {
  margin-top:0;
}
.ranking-other-button img {
  display:block;
  width:100%;
  height:100%;
}
.ranking-other-button:focus-visible,
.ranking-back-button:focus-visible {
  outline:3px solid #fff;
  outline-offset:2px;
}

/* 榜单名称列表按 750 x 1526 PSD 定位，设计稿 bg 不参与渲染。 */
.ranking-catalog-modal {
  z-index:43;
  background:rgba(0,0,0,.6);
}
.psd-modal .ranking-catalog-panel {
  position:relative;
  width:min(88.6667%,665px,calc(58.8496dvh));
  aspect-ratio:665 / 1017;
  overflow:visible;
  container-type:inline-size;
}
.ranking-catalog-frame {
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:93.9036%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.ranking-catalog-list {
  position:absolute;
  z-index:2;
  top:8.1613%;
  left:11.8797%;
  display:grid;
  width:75.4887%;
  height:78%;
  grid-template-rows:repeat(10,minmax(0,1fr));
  gap:1.2cqw;
}
.ranking-catalog-list button {
  width:100%;
  height:100%;
  padding:0 17% 0 9.8%;
  overflow:hidden;
  border:0;
  background:transparent url("assets/ranking/catalog-item.webp") center / 100% 100% no-repeat;
  color:#fff;
  font-size:clamp(15px,4.2105cqw,28px);
  font-weight:700;
  line-height:1;
  text-align:left;
  white-space:nowrap;
}
.ranking-catalog-list button.active {
  filter:brightness(1.14) saturate(1.08);
}
.ranking-catalog-list button:focus-visible {
  outline:3px solid #fff6a9;
  outline-offset:-4px;
}
.ranking-catalog-close {
  position:absolute;
  z-index:4;
  top:91.8387%;
  left:42.4060%;
  width:12.4812%;
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent url("assets/ranking/catalog-close.webp") center / contain no-repeat;
}
.ranking-catalog-close:focus-visible {
  outline:3px solid #fff6a9;
  outline-offset:2px;
}
@media (max-height:700px) {
  .ranking-footer { padding-top:7px; }
  .ranking-other-button { margin-top:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .psd-image-button { transition:none; }
}

/* Stitch 活动说明与个人中心：青白技术型信息面板。 */
:root {
  --stitch-surface:#f5fafa;
  --stitch-surface-strong:#ffffff;
  --stitch-primary:#08a6a6;
  --stitch-primary-dark:#006a6a;
  --stitch-ink:#031f27;
  --stitch-muted:#536b70;
  --stitch-divider:#b8d8d8;
  --stitch-water:#ddf4f1;
  --stitch-danger:#e85d5d;
  --stitch-gold:#f2b84b;
}

/* The detail view owns scrolling. Its chapter grid replaces the title at the top. */
#activityDetail.rules-screen {
  --activity-rules-header-height:clamp(60px,16vw,120px);
  --activity-rules-compact-menu-height:142px;
  position:relative;
  display:block;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--stitch-surface);
  color:var(--stitch-ink);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
#activityDetail.rules-screen::before {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  content:"";
  opacity:.16;
  background-image:linear-gradient(to right,var(--stitch-divider) 1px,transparent 1px),linear-gradient(to bottom,var(--stitch-divider) 1px,transparent 1px);
  background-size:40px 40px;
  background-position:center center;
}
#activityDetail.rules-screen > .activity-topbar,
#activityDetail.rules-screen > .activity-header {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:var(--activity-rules-header-height);
  margin:0;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  border-bottom:1px solid var(--stitch-divider);
  background:rgba(245,250,250,.96);
  color:var(--stitch-primary-dark);
  box-shadow:0 2px 12px rgba(0,106,106,.05);
}
#activityDetail.rules-screen .activity-header-title {
  display:grid;
  min-width:0;
  justify-items:center;
  text-align:center;
}
#activityDetail.rules-screen .activity-header-title > span {
  display:none;
}
#activityDetail.rules-screen .activity-header-title h2 {
  margin:0;
  color:var(--stitch-primary-dark);
  font-size:clamp(20px,5.3333vw,40px);
  font-weight:800;
  line-height:1.4;
}
#activityDetail.rules-screen .activity-header-action {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--stitch-primary-dark);
  font-size:26px;
  line-height:1;
}
#activityDetail.rules-screen .activity-header-action:active { background:var(--stitch-water); transform:scale(.96); }
#activityDetail.rules-screen .activity-header-action:focus-visible { outline:2px solid var(--stitch-primary); outline-offset:2px; }
#activityDetail.rules-screen .activity-detail-content {
  position:relative;
  z-index:1;
  height:auto;
  min-height:calc(100vh - var(--activity-rules-header-height));
  min-height:calc(100dvh - var(--activity-rules-header-height));
  overflow:visible;
  padding:16px 20px calc(clamp(86px,22.9333vw,172px) + env(safe-area-inset-bottom));
  scrollbar-width:thin;
  scrollbar-color:var(--stitch-primary) transparent;
}
#activityDetail.rules-screen .activity-detail-content::-webkit-scrollbar { width:5px; }
#activityDetail.rules-screen .activity-detail-content::-webkit-scrollbar-thumb { background:var(--stitch-primary); border-radius:3px; }
.activity-rules-page {
  width:min(100%,750px);
  margin:0 auto;
}
.activity-chapter-menu-sentinel {
  display:block;
  width:1px;
  height:1px;
  margin-bottom:-1px;
  pointer-events:none;
}
.activity-chapter-menu {
  position:sticky;
  z-index:6;
  top:env(safe-area-inset-top);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 28px;
  transition:margin .2s ease,padding .2s ease,gap .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.activity-chapter-menu.is-compact {
  gap:2px;
  margin:0 -20px 14px;
  padding:4px 6px;
  border-bottom:1px solid var(--stitch-divider);
  background:rgba(245,250,250,.96);
  box-shadow:0 4px 12px rgba(0,106,106,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.activity-chapter-menu.is-compact::before {
  position:absolute;
  right:0;
  bottom:100%;
  left:0;
  height:env(safe-area-inset-top);
  background:rgba(245,250,250,.96);
  content:"";
}
.activity-chapter-menu.is-measuring,
.activity-chapter-menu.is-measuring .activity-chapter-link {
  transition:none !important;
}
.activity-chapter-link {
  display:flex;
  min-height:clamp(58px,15.4667vw,116px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 4px;
  border:1px solid var(--stitch-divider);
  border-radius:4px;
  background:var(--stitch-surface-strong);
  color:var(--stitch-ink);
  font-size:clamp(13px,3.4667vw,26px);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  transition:min-height .2s ease,padding .2s ease,gap .2s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.activity-chapter-link span { color:var(--stitch-primary); font-family:ui-monospace,Consolas,monospace; font-size:clamp(12px,3.2vw,24px); }
.activity-chapter-menu.is-compact .activity-chapter-link {
  min-height:44px;
  flex-direction:row;
  gap:3px;
  padding:4px 2px;
  white-space:nowrap;
}
.activity-chapter-menu.is-compact .activity-chapter-link,
.activity-chapter-menu.is-compact .activity-chapter-link span {
  font-size:clamp(13px,2.9333vw,22px);
}
.activity-chapter-link.active,
.activity-chapter-link[aria-current="true"] {
  border-color:var(--stitch-primary);
  background:var(--stitch-primary);
  color:#fff;
  box-shadow:0 0 10px rgba(8,166,166,.28);
}
.activity-chapter-link.active span,
.activity-chapter-link[aria-current="true"] span { color:#fff; }
.activity-chapter-link:active { transform:translateY(1px); }
.activity-chapter-link:focus-visible { outline:2px solid var(--stitch-primary-dark); outline-offset:2px; }
.activity-rule-section {
  scroll-margin-top:calc(var(--activity-rules-compact-menu-height) + env(safe-area-inset-top) + 8px);
  margin:0 0 28px;
}
.activity-rule-heading {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:0 0 8px;
  border-bottom:1px solid var(--stitch-divider);
  color:var(--stitch-primary-dark);
  font-size:clamp(20px,5.3333vw,40px);
  font-weight:700;
  line-height:1.4;
}
.activity-rule-heading small {
  display:inline-block;
  margin-right:clamp(6px,1.6vw,12px);
  color:var(--stitch-primary);
  font-family:ui-monospace,Consolas,monospace;
  font-size:clamp(13px,3.4667vw,26px);
  font-weight:700;
  vertical-align:middle;
}
.activity-rule-body {
  padding:16px;
  border:1px solid var(--stitch-divider);
  border-radius:4px;
  background:rgba(255,255,255,.94);
  box-shadow:0 3px 10px rgba(0,106,106,.045);
  color:var(--stitch-muted);
  font-size:clamp(14px,3.7333vw,28px);
  line-height:1.62;
}
.activity-rule-body > h4 {
  margin:0 0 8px;
  color:var(--stitch-primary-dark);
  font-size:clamp(12px,3.2vw,24px);
  font-weight:800;
  letter-spacing:.04em;
}
.activity-rule-body > h4:not(:first-child) { margin-top:18px; }
.activity-rule-body p { margin:0 0 10px; }
.activity-rule-body p:last-child { margin-bottom:0; }
.activity-rule-body strong,
.activity-rule-body b { color:var(--stitch-ink); }
.activity-rule-list {
  display:grid;
  gap:6px;
  margin:0 0 12px;
  padding-left:20px;
  color:var(--stitch-muted);
}
.activity-rule-list li { padding-left:2px; overflow-wrap:anywhere; }
.activity-rule-list li::marker { color:var(--stitch-primary); font-weight:700; }
.activity-rule-data-strip {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--stitch-divider);
}
.activity-rule-data-strip span { display:grid; gap:3px; min-width:0; }
.activity-rule-data-strip b { color:var(--stitch-primary); font-size:clamp(11px,2.9333vw,22px); }
.activity-rule-data-strip strong { font-size:clamp(13px,3.4667vw,26px); line-height:1.35; overflow-wrap:anywhere; }
.activity-rule-period strong { white-space:nowrap; }
.activity-timeline { position:relative; display:grid; gap:18px; padding-left:18px; }
.activity-timeline::before { position:absolute; top:4px; bottom:4px; left:4px; width:1px; background:var(--stitch-divider); content:""; }
.activity-timeline article { position:relative; }
.activity-timeline article::before { position:absolute; top:4px; left:-18px; width:8px; height:8px; border:2px solid var(--stitch-primary); border-radius:50%; background:var(--stitch-surface); content:""; box-shadow:0 0 0 3px var(--stitch-water); }
.activity-timeline article b { display:block; margin-bottom:4px; color:var(--stitch-primary); font-size:clamp(12px,3.2vw,24px); }
.activity-timeline article p { margin:0; }
.activity-formula { margin-bottom:14px; padding:10px 12px; border-left:3px solid var(--stitch-primary); background:var(--stitch-water); color:var(--stitch-primary-dark); }
.activity-formula p { margin:0 0 6px; }
.activity-formula p:last-child { margin-bottom:0; }
.activity-skill-reference { display:grid; gap:10px; }
.activity-skill-reference article { padding:10px 12px; border:1px solid var(--stitch-divider); border-radius:4px; background:var(--stitch-surface); }
.activity-skill-reference h4 { margin:0 0 6px; color:var(--stitch-primary-dark); font-size:clamp(13px,3.4667vw,26px); }
.activity-skill-reference p { margin:3px 0 0; font-size:clamp(12px,3.2vw,24px); line-height:1.45; }
.activity-skill-reference p b {
  display:inline-block;
  width:auto;
  min-width:clamp(36px,9.6vw,72px);
  margin-right:clamp(6px,1.6vw,12px);
  color:var(--stitch-primary);
  white-space:nowrap;
}
.activity-muted { color:var(--stitch-muted); }
.activity-rules-actions {
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
  margin:0;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--stitch-divider);
  background:rgba(245,250,250,.96);
  backdrop-filter:blur(8px);
}
.activity-rules-actions button {
  min-height:clamp(44px,11.7333vw,88px);
  padding:9px 12px;
  border-radius:4px;
  font-size:clamp(14px,3.7333vw,28px);
  font-weight:800;
}
.activity-rules-secondary { border:1px solid var(--stitch-primary); background:var(--stitch-surface-strong); color:var(--stitch-primary-dark); }
.activity-rules-primary { border:1px solid var(--stitch-primary-dark); background:var(--stitch-primary-dark); color:#fff; box-shadow:0 3px 8px rgba(0,106,106,.2); }
.activity-rules-actions button:focus-visible { outline:2px solid var(--stitch-primary); outline-offset:2px; }

/* 个人中心使用独立滚动页面；坐标和比例以 750 x 1770 PSD 为基准。 */
.profile-page-screen {
  container-type:inline-size;
  position:relative;
  display:block;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  background:#adf8f0;
  color:#303030;
  -webkit-overflow-scrolling:touch;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-width:none;
}
.profile-page-screen::-webkit-scrollbar { width:0; height:0; }
.profile-page-stage {
  position:relative;
  width:100%;
  min-height:max(100vh,236cqw);
  min-height:max(100dvh,236cqw);
  overflow:hidden;
  background:#adf8f0 url("assets/profile/profile-bg.jpg") top center / 100% auto no-repeat;
}
.profile-page-title {
  position:absolute;
  z-index:2;
  top:calc(4.8cqw + env(safe-area-inset-top));
  left:26.4cqw;
  display:block;
  width:48.1333cqw;
  height:11.4667cqw;
  object-fit:fill;
  pointer-events:none;
}
.profile-page-content { position:relative; z-index:1; width:100%; min-height:inherit; }
.profile-page-view {
  position:relative;
  width:100%;
  min-height:inherit;
  padding:calc(23.3333cqw + env(safe-area-inset-top)) 5.6cqw calc(6cqw + env(safe-area-inset-bottom));
}
.profile-state-view { display:flex; flex-direction:column; }
.profile-state-view .profile-loading-state,
.profile-state-view .profile-error-state { margin-top:28cqw; }
.profile-state-view .profile-actions { margin-top:auto; }
.profile-identity { min-width:0; min-height:17.2cqw; padding:0 4.9333cqw; }
.profile-identity strong {
  display:block;
  margin:0 0 1.7333cqw;
  color:#292929;
  font-size:clamp(15px,4cqw,30px);
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.profile-identity p {
  margin:.6667cqw 0 0;
  color:#303030;
  font-size:clamp(12px,3.2cqw,24px);
  font-weight:500;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.profile-tabs {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  height:19.7333cqw;
  margin:3.6cqw 0 1.8667cqw;
  overflow:hidden;
  border-radius:3.7333cqw;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,249,222,.94));
  box-shadow:0 2px 8px rgba(0,147,140,.08);
}
.profile-tab {
  position:relative;
  display:grid;
  min-width:0;
  grid-template-rows:10.4cqw auto;
  place-items:center;
  padding:2cqw 1cqw 1.7333cqw;
  border:0;
  border-radius:0;
  background:transparent;
  color:#ad8634;
  opacity:.3;
  font:inherit;
  touch-action:manipulation;
}
.profile-tab + .profile-tab::before {
  position:absolute;
  top:3.0667cqw;
  bottom:2.6667cqw;
  left:0;
  width:1px;
  background:#cfa541;
  content:"";
}
.profile-tab img { display:block; width:auto; max-width:12.4cqw; height:9.3333cqw; object-fit:contain; }
.profile-tab span {
  display:block;
  min-width:0;
  color:inherit;
  font-size:clamp(13px,3.4667cqw,26px);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.profile-tab b { margin-left:.4cqw; font:inherit; }
.profile-tab.active { opacity:1; }
.profile-tab.active img { filter:saturate(1.08); }
.profile-tab:active { background:rgba(246,225,161,.25); }
.profile-tab:focus-visible { z-index:2; outline:3px solid #00aaa7; outline-offset:-3px; }
.profile-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  width:100%;
  min-height:25.0667cqw;
  margin:0 0 2.1333cqw;
  overflow:hidden;
  border-radius:3.7333cqw;
  background:rgba(255,255,255,.83);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}
.profile-stat-grid > div { position:relative; display:grid; min-width:0; place-items:center; gap:3.4667cqw; padding:3.2cqw 1cqw 2.4cqw; }
.profile-stat-grid > div + div::before { position:absolute; top:0; bottom:0; left:0; width:1px; background:rgba(0,176,177,.18); content:""; }
.profile-stat-grid strong { color:#02adae; font-size:clamp(24px,5.6667cqw,50px); font-weight:900; line-height:1; overflow-wrap:anywhere; }
.profile-stat-grid .profile-stat-score-cell strong { font-size:clamp(18px,5.3333cqw,40px); line-height:1.08; white-space:nowrap; }
.profile-stat-grid .profile-stat-score-cell.is-extra-long strong { font-size:clamp(14px,4.2667cqw,32px); }
.profile-stat-grid .profile-stat-score-cell.is-ultra-long strong { font-size:clamp(12px,3.4667cqw,26px); }
.profile-stat-grid span { color:#929292; font-size:clamp(12px,3.2cqw,24px); font-weight:700; line-height:1; white-space:nowrap; }
.profile-content-panel {
  min-width:0;
  padding:4.4cqw 4.6667cqw 6.4cqw;
  border-radius:3.7333cqw;
  background:linear-gradient(180deg,rgba(190,255,245,.9),rgba(235,255,252,.91));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
}
.profile-game-panel { min-height:101.6cqw; }
.profile-panel-block { margin-top:3.2cqw; }
.profile-panel-block + .profile-panel-block { margin-top:4.9333cqw; }
.profile-panel-title {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7.3333cqw;
  margin:0 0 4.4cqw;
  color:#00aeae;
  font-size:clamp(15px,4cqw,30px);
  font-weight:900;
  line-height:1.2;
  text-align:center;
}
.profile-panel-title img { display:block; width:2.9333cqw; height:5.3333cqw; object-fit:contain; }
.profile-item-list { display:grid; gap:1.4667cqw; }
.profile-item-row {
  display:grid;
  grid-template-columns:8.9333cqw minmax(0,1fr) auto;
  align-items:center;
  min-height:10.2667cqw;
  padding:.8cqw 6.9333cqw .8cqw 2.6667cqw;
  border-radius:3.4667cqw;
  background:rgba(255,255,255,.94);
  color:#686868;
}
.profile-item-row img { display:block; width:7.3333cqw; height:7.7333cqw; object-fit:contain; }
.profile-item-row.profile-skill-row { align-items:start; min-height:0; padding:2.4cqw 6.9333cqw 2.4cqw 2.6667cqw; border-radius:3.4667cqw; }
.profile-item-row.profile-skill-row img { margin-top:.8cqw; }
.profile-item-copy { display:grid; min-width:0; gap:.8cqw; align-content:start; }
.profile-item-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2.1333cqw; min-width:0; }
.profile-item-row strong { min-width:0; font-size:clamp(13px,3.4667cqw,26px); font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.profile-item-row .profile-item-level { color:#02aeae; font-size:clamp(11px,2.9333cqw,22px); font-weight:800; line-height:1.2; white-space:nowrap; }
.profile-item-description { min-width:0; color:#697f80; font-size:clamp(11px,2.9333cqw,22px); font-style:normal; font-weight:500; line-height:1.4; overflow-wrap:anywhere; white-space:normal; }
.profile-item-row span { color:#676767; font-size:clamp(12px,3.2cqw,24px); font-weight:700; line-height:1; white-space:nowrap; }
.profile-empty-state,
.profile-empty-prize,
.profile-loading-state,
.profile-error-state {
  margin:0;
  padding:6.4cqw 3.2cqw;
  color:#567578;
  font-size:clamp(13px,3.4667cqw,26px);
  line-height:1.55;
  text-align:center;
}
.profile-empty-state { border:1px dashed rgba(0,174,174,.4); border-radius:2.1333cqw; }
.profile-error-state { color:#bd4137; }
.profile-error-state p { margin:0 0 3.2cqw; }
.profile-retry-button { min-width:32cqw; min-height:44px; padding:2cqw 4cqw; border:0; border-radius:2.1333cqw; background:#00aeae; color:#fff; font-size:clamp(13px,3.4667cqw,26px); font-weight:800; }
.profile-prize-section,
.profile-leaderboard-section { min-height:92cqw; margin-top:0; }
.profile-prize-list { display:grid; gap:2.6667cqw; }
.profile-prize-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:2cqw;
  min-width:0;
  padding:3.2cqw 3.0667cqw;
  overflow:hidden;
  border-radius:3.4667cqw;
  background:rgba(255,255,255,.94);
}
.profile-prize-copy { min-width:0; }
.profile-prize-copy strong { display:block; color:#3c3c3c; font-size:clamp(14px,3.7333cqw,28px); font-weight:800; line-height:1.35; overflow-wrap:anywhere; white-space:normal; }
.profile-prize-copy small { display:block; margin-top:1.7333cqw; color:#929292; font-size:clamp(11px,2.9333cqw,22px); line-height:1.35; overflow-wrap:anywhere; white-space:normal; }
.profile-redeem-button,
.profile-prize-status {
  display:grid;
  flex:none;
  place-items:center;
  min-width:11.8667cqw;
  min-height:max(28px,5.0667cqw);
  padding:1cqw 1.8667cqw;
  border-radius:999px;
  font-size:clamp(11px,2.9333cqw,22px);
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.profile-redeem-button { border:0; background:#ff9019; color:#fff; touch-action:manipulation; }
.profile-redeem-button:active { transform:scale(.97); }
.profile-redeem-button:focus-visible { outline:3px solid #008f91; outline-offset:2px; }
.profile-prize-status { border:0; background:#15b8c4; color:#fff; cursor:pointer; touch-action:manipulation; }
.profile-prize-status:active { transform:scale(.97); }
.profile-prize-status:focus-visible { outline:3px solid #008f91; outline-offset:2px; }
.profile-prize-status.expired { background:#aaa; color:#fff; }
.profile-rank-list { display:grid; margin:0; padding:0; list-style:none; }
.profile-rank-list li {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2cqw;
  min-height:10.4cqw;
  padding:1.6cqw 2cqw;
  border-bottom:1px solid rgba(0,174,174,.25);
}
.profile-rank-list li > div { display:grid; min-width:0; gap:.5333cqw; }
.profile-rank-list span { min-width:0; color:#02aeae; font-size:clamp(14px,3.7333cqw,28px); font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
.profile-rank-list small { color:#547c7d; font-size:clamp(11px,2.9333cqw,22px); line-height:1.25; overflow-wrap:anywhere; }
.profile-rank-list small { display:flex; min-width:0; align-items:center; gap:.8cqw; }
.profile-rank-list .profile-rank-time { flex:0 0 39.2cqw; width:39.2cqw; color:#547c7d; font-size:clamp(10px,2.6667cqw,20px); font-weight:500; line-height:1.25; white-space:nowrap; }
.profile-rank-status { flex:none; padding:.5333cqw 1.0667cqw; border:1px solid currentColor; border-radius:999px; font-size:clamp(10px,2.6667cqw,20px); font-style:normal; font-weight:700; line-height:1; white-space:nowrap; }
.profile-rank-status.is-published { border-color:#06b9b7; background:#06b9b7; color:#fff; }
.profile-rank-status.is-settled { border-color:#06b9b7; background:transparent; color:#009fa2; }
.profile-rank-status.is-unsettled { border-color:#ff9b49; background:#ff9b49; color:#fff; }
.profile-rank-list strong { color:#02aeae; font-size:clamp(15px,4cqw,30px); font-weight:900; line-height:1; white-space:nowrap; }
.profile-rank-list .profile-rank-realtime { min-height:7.8667cqw; margin:0 0 1.6cqw; border:0; border-radius:999px; background:linear-gradient(90deg,#32d1af,#02aeb6); }
.profile-rank-list .profile-rank-realtime span,
.profile-rank-list .profile-rank-realtime small,
.profile-rank-list .profile-rank-realtime strong { color:#fff; }
.profile-rank-list .profile-rank-realtime span { display:none; }
.profile-rank-list .profile-rank-realtime small { font-size:clamp(11px,2.9333cqw,22px); }
.profile-rank-list .is-published small { color:#008f91; }
.profile-actions { position:absolute; top:5.2cqw; right:5.6cqw; display:flex; justify-content:center; width:10.8cqw; margin:0; padding:0; }
.profile-actions button {
  display:grid;
  place-items:center;
  width:max(44px,10.8cqw);
  height:max(44px,10.8cqw);
  margin:0;
  padding:0;
  border:0;
  border-radius:2.4cqw;
  background:transparent;
  touch-action:manipulation;
}
.profile-actions img { display:block; width:10.8cqw; height:10.8cqw; object-fit:contain; }
.profile-actions span { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.profile-actions button:active { transform:scale(.96); }
.profile-actions button:focus-visible { outline:3px solid #fff; outline-offset:2px; }

@media (max-width:360px) {
  #activityDetail.rules-screen .activity-detail-content { padding-right:12px; padding-left:12px; }
  .activity-chapter-menu.is-compact { margin-right:-12px; margin-left:-12px; padding-right:6px; padding-left:6px; }
  .activity-rules-actions { margin:0; padding-right:12px; padding-left:12px; }
  .activity-chapter-menu { gap:5px; }
  .activity-chapter-menu.is-compact { gap:2px; }
  .activity-chapter-link { min-height:54px; }
  .activity-chapter-menu.is-compact .activity-chapter-link { min-height:44px; }
  .activity-rule-body { padding:12px; }
  .profile-tab { padding-right:.4cqw; padding-left:.4cqw; }
  .profile-prize-card { grid-template-columns:minmax(0,1fr); }
  .profile-redeem-button,
  .profile-prize-status { justify-self:start; }
}
@media (min-width:600px) {
  #activityDetail.rules-screen .activity-detail-content { padding-right:32px; padding-left:32px; }
  .activity-chapter-menu.is-compact { margin-right:-32px; margin-left:-32px; padding-right:10px; padding-left:10px; }
  .activity-rules-actions { margin:0; padding-right:32px; padding-left:32px; }
}
@media (max-height:700px) {
  #activityDetail.rules-screen .activity-detail-content { padding-top:10px; }
  .activity-chapter-menu { margin-bottom:20px; }
  .activity-rule-section { margin-bottom:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .activity-chapter-menu,
  .activity-chapter-link,
  .activity-rules-actions button,
  .profile-tab,
  .profile-redeem-button,
  .profile-actions button { transition:none; }
}