/* Osshi Jump — UI system.
   Layout: one 9:16 stage; HUD bar on top (stats left, controls right); overlays are
   single cards on a 6-column spacing grid. All sizes are in cqw (1% of stage width),
   so the whole UI scales with the stage. Palette is the brand palette — do not add colours. */
:root {
  /* palette (fixed) */
  --night: #070f2b;
  --deep: #10215a;
  --sky: #58c6ff;
  --ice: #eaf6ff;
  --mist: #a9c3ea;
  --gold: #ffd36e;
  --blush: #ff8fab;
  --navy: #16225c;
  /* the same palette at the alphas the brand already uses */
  --deep-62: rgba(16, 33, 90, .62);
  --deep-74: rgba(16, 33, 90, .74);
  --night-45: rgba(7, 15, 43, .45);
  --sky-25: rgba(88, 198, 255, .25);
  --sky-35: rgba(88, 198, 255, .35);
  --sky-45: rgba(88, 198, 255, .45);
  --mist-25: rgba(169, 195, 234, .25);
  --mist-50: rgba(169, 195, 234, .5);

  --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "M PLUS Rounded 1c", "Hiragino Sans", system-ui, sans-serif;

  /* spacing scale: 1.2cqw steps (≈5px on a 405px stage) */
  --s1: 1.2cqw;
  --s2: 2.4cqw;
  --s3: 3.6cqw;
  --s4: 4.8cqw;
  /* type scale */
  --fs-xs: 2.7cqw;
  --fs-s: 3.3cqw;
  --fs-m: 4cqw;
  --fs-l: 5.2cqw;
  --fs-xl: 8.6cqw;
  --fs-num: 7.6cqw;
  --fs-hero: 14cqw;
  /* shape */
  --r-s: 2.4cqw;
  --r-m: 3.6cqw;
  --r-pill: 999px;
  --h-chip: 6.6cqw;
  --h-btn: 11.6cqw;
  color-scheme: dark;
}

html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #142a6e 0%, var(--night) 60%) fixed, var(--night);
  color: var(--ice);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
#wrap {
  height: 100%;
  box-sizing: border-box;
  padding-inline: 16px;
  padding-block: 12px;
  display: grid;
  place-items: center;
}
.embed #wrap { padding: 0; }
#stage {
  position: relative;
  container-type: inline-size;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sky-25), 0 20px 60px rgba(0, 0, 0, .45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--night);
}
.embed #stage { border-radius: 0; box-shadow: none; }
canvas { display: block; width: 100%; height: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- typography roles ---------- */
.cap { font: 800 var(--fs-xs)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.cap.accent { color: var(--sky); }
.num { font: 900 var(--fs-l)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.title-l { margin: 0; font: 900 var(--fs-l)/1.2 var(--font-display); text-wrap: balance; }
.body { font: 500 var(--fs-s)/1.45 var(--font-body); }
.meta { font: 500 var(--fs-xs)/1.45 var(--font-body); color: var(--mist); }

/* ---------- components ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: var(--h-chip); box-sizing: border-box; padding: 0 var(--s2);
  border-radius: var(--r-pill); border: 1px solid var(--sky-45);
  background: var(--deep-62); color: var(--ice);
  font: 800 var(--fs-xs)/1 var(--font-body); letter-spacing: .04em; white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed="false"] { color: var(--mist); border-color: var(--mist-25); text-decoration: line-through; }
.chip--gold { background: var(--gold); color: var(--navy); border-color: transparent; cursor: default; }
.chip--blush { background: var(--blush); color: var(--navy); border-color: transparent; cursor: default; }
.seg { padding: 0 2px; gap: 0; }
.seg > span, .seg > button {
  display: inline-flex; align-items: center; height: calc(var(--h-chip) - 6px); padding: 0 var(--s2);
  border: 0; border-radius: var(--r-pill); background: none; color: var(--mist); cursor: pointer;
  font: inherit; letter-spacing: inherit;
}
.seg > [aria-selected="true"], .seg > .on { background: var(--gold); color: var(--navy); }
.seg--full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.seg--full > button { justify-content: center; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--s1);
  width: 100%; height: var(--h-btn); padding: 0 var(--s4); box-sizing: border-box;
  border-radius: var(--r-pill);
  font: 900 var(--fs-m)/1 var(--font-display);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn--primary { color: var(--navy); background: linear-gradient(to bottom, #fffbe6, var(--gold)); box-shadow: 0 .8cqw 0 #c98a2e; }
.btn--primary:active { transform: translateY(.6cqw); box-shadow: 0 .2cqw 0 #c98a2e; }
.btn--ghost { color: var(--ice); background: transparent; box-shadow: inset 0 0 0 2px var(--mist-50); }
.btn--ghost:active { transform: translateY(.3cqw); }
.link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--sky); font: 800 var(--fs-xs)/1.45 var(--font-body);
  text-decoration: underline; text-underline-offset: .5cqw;
}

.tile { display: grid; gap: var(--s1); align-content: start; padding: var(--s2); border-radius: var(--r-s); background: var(--night-45); min-width: 0; }

.card {
  width: 100%; box-sizing: border-box; max-height: 100%; overflow: auto;
  display: grid; gap: var(--s3); padding: var(--s4);
  border-radius: var(--r-m); border: 1px solid var(--sky-35);
  background: var(--deep-74);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stack { display: grid; gap: var(--s2); }
.center { text-align: center; justify-items: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }

/* ---------- HUD ---------- */
.hud {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--s2);
  padding: var(--s3) var(--s3) 0 var(--s4);
  pointer-events: none;
}
.hud .stats { display: grid; gap: var(--s1); justify-items: start; text-shadow: 0 .3cqw 0 var(--navy), 0 0 .6cqw var(--navy); }
.hud .score { font: 900 var(--fs-num)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hud .sub { display: flex; align-items: center; gap: var(--s2); font: 800 var(--fs-s)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.hud .sub .cap { text-shadow: none; }
.hud .controls { display: flex; gap: var(--s1); pointer-events: auto; }
.hud .chip--gold { height: calc(var(--h-chip) - .8cqw); text-shadow: none; }
.is-idle .hud .stats { visibility: hidden; }

/* ---------- milestone banner ---------- */
.banner {
  position: absolute; left: var(--s4); right: var(--s4); top: 28cqw; z-index: 4;
  display: grid; justify-items: center; gap: var(--s2); text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(3cqw);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.banner.show { opacity: 1; transform: none; }
.banner .line { font: 900 var(--fs-l)/1.3 var(--font-display); color: #fff7dc; text-wrap: balance;
  text-shadow: 0 .4cqw 0 var(--navy), 0 0 .6cqw var(--navy); }

/* ---------- overlays ---------- */
.screen {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center;
  padding: calc(var(--h-chip) + var(--s3) * 2) var(--s4) var(--s4);
  background: linear-gradient(to bottom, rgba(7, 15, 43, .15), rgba(7, 15, 43, .55));
}
h1.logo { margin: 0; font: 900 var(--fs-xl)/1.05 var(--font-display); color: #fff; letter-spacing: -.01em; white-space: nowrap;
  text-shadow: 0 .6cqw 0 var(--navy); }
.tagline { font: 900 var(--fs-m)/1.2 var(--font-display); color: var(--gold); }
.steps .tile { justify-items: center; text-align: center; }
.steps .verb { font: 900 var(--fs-m)/1.1 var(--font-display); color: var(--gold); }
.steps .desc { font: 500 var(--fs-xs)/1.35 var(--font-body); color: var(--ice); }
.account { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s1) var(--s2); }
.avatar { width: 5cqw; height: 5cqw; border-radius: 50%; object-fit: cover; background: var(--night-45); }

/* result */
.hero { display: grid; justify-items: center; gap: var(--s1); }
.hero .label { display: flex; align-items: center; gap: var(--s2); }
.hero .value { font: 900 var(--fs-hero)/1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 .6cqw 0 var(--navy); }
.result .tile .num { font-size: var(--fs-l); }
.status { min-height: calc(var(--fs-xs) * 1.45); text-align: center; }
.share { width: 100%; box-sizing: border-box; font: 500 var(--fs-xs)/1.45 var(--font-body); color: var(--ice); background: var(--night-45);
  border: 1px solid var(--sky-35); border-radius: var(--r-s); padding: var(--s2); resize: none; }
.share-x{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:44px;width:100%;box-sizing:border-box}.share-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px}.share-tools:has(>[hidden]):has(>[hidden]+[hidden]){display:none}#shareStatus:empty{display:none}#overScreen .stack{gap:6px}

/* ranking */
.rk-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s2); }
.rk-head .title-l { display: flex; align-items: center; gap: var(--s2); }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; max-height: 92cqw; overflow: auto; border-radius: var(--r-s); background: var(--night-45); }
.rk-row {
  display: grid; grid-template-columns: 9cqw minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
  min-height: 9.6cqw; padding: 0 var(--s2); border-top: 1px solid var(--sky-25);
}
.rk-row:first-child { border-top: 0; }
.rk-row .rank { font: 900 var(--fs-m)/1 var(--font-display); color: var(--mist); text-align: center; font-variant-numeric: tabular-nums; }
.rk-row.top .rank { color: var(--gold); }
.rk-row .who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.rk-row .name { font: 800 var(--fs-s)/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .pts { text-align: right; display: grid; gap: .6cqw; justify-items: end; }
.rk-row .pts .num { font-size: var(--fs-m); }
.rk-row .pts .meta { line-height: 1; }
.rk-row.me { background: var(--sky-25); }
.rk-me { border-radius: var(--r-s); background: var(--sky-25); }
.rk-empty { padding: var(--s4) var(--s2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .banner { transition: opacity .2s linear; transform: none; }
  .btn { transition: none; }
}

.rk-row a.who{color:inherit;text-decoration:none}.rk-row a.who:hover .name{text-decoration:underline}.rk-row a.who:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}.rk-row .verified{width:18px;height:18px;flex:none;fill:#185f86;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-3px}.rk-row .verified path:last-child{fill:none}.rk-row .name{min-width:0}

/* Thumb controls use the existing game palette and remain clear of the character. */
.settings-toggle{display:none;pointer-events:auto;min-width:44px;min-height:44px}
.jump-pad{position:absolute;z-index:6;left:12px;right:12px;bottom:12px;min-height:64px;border:1px solid var(--sky-45);border-radius:16px;display:grid;align-content:center;justify-items:center;gap:4px;background:var(--deep-74);color:var(--ice);font:800 16px/1.2 var(--font-body);cursor:pointer;touch-action:none;-webkit-touch-callout:none;user-select:none;padding:8px 14px;box-sizing:border-box;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jump-pad-hint{font-size:12px;font-weight:500;color:var(--mist)}
.jump-meter{display:block;width:100%;height:5px;overflow:hidden;border-radius:999px;background:var(--night-45)}
.jump-meter>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--gold)}
.jump-pad.is-charging{border-color:var(--gold);color:var(--gold);background:var(--deep)}
.card,.rk-list{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
button,a{-webkit-touch-callout:none}
@media(max-width:600px){
 :root{--h-btn:48px;--fs-xs:12px;--fs-s:14px;--fs-m:16px;--fs-l:20px;--h-chip:44px}
 .hud{padding:10px 12px 0;grid-template-columns:minmax(0,1fr) 44px}
 .settings-toggle{display:inline-flex;padding:0}
 .hud .controls{display:none;position:absolute;right:12px;top:60px;z-index:8;gap:6px;max-width:calc(100% - 24px);box-sizing:border-box;flex-wrap:wrap;justify-content:flex-end;padding:8px;border:1px solid var(--sky-45);border-radius:14px;background:var(--deep)}
 .hud.settings-open .controls{display:flex}
 .hud .controls .chip{height:44px;min-width:44px;font-size:12px}
 .seg>span,.seg>button{min-height:38px}
 .seg--full{height:48px;padding:3px;box-sizing:border-box}
 .seg--full>button{height:40px;min-height:40px}
 .screen{padding:64px 12px 12px;box-sizing:border-box}
 .card{padding:16px;gap:12px;max-height:100%;overscroll-behavior:contain}
 .steps .desc{font-size:12px}.steps .verb{font-size:clamp(12px,4.4cqw,16px);white-space:nowrap}.steps .tile{padding:10px 4px;gap:6px}
 .avatar{width:24px;height:24px}.account{font-size:12px;line-height:1.5}
 .link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
 .rk-row{min-height:52px;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding-inline:8px}
 .rk-row .who{gap:8px;min-height:48px}.rk-row .name{font-size:14px}.rk-row .pts .num{font-size:16px}
 .rk-list{max-height:50vh}.rk-empty{font-size:14px;padding:18px 8px}
 .rk-head .chip{min-width:56px;height:44px}
}
@media(max-height:500px){.card{padding:12px;gap:8px}.screen{padding-top:60px}.jump-pad{min-height:56px;bottom:6px;left:8px;right:8px;font-size:14px;gap:2px}.jump-pad-hint{font-size:11px}}

@media(max-height:500px){#titleScreen .card{gap:8px;padding:12px}#titleScreen .steps .desc{display:none}#titleScreen .steps .tile{padding:8px 4px}#titleScreen .stack{gap:8px}#titleScreen .logo{font-size:clamp(16px,8.6cqw,30px)}#titleScreen .account{line-height:1.3}}

/* A personal rank stays above the paged list on narrow screens. */
.rk-own{display:grid;gap:6px}.rk-own h3,.rk-own p{margin:0}.rk-own .rk-list{max-height:none}.rk-pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.rk-pagination .chip{min-height:44px}.rk-pagination .chip:disabled{opacity:.5}.rk-pagination[hidden]{display:none}.rk-range:empty{display:none}