/* Shotori v2 — base + shared components (from mockup_B/app.css). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream-50); }
body {
  font-family: var(--font); color: var(--ink-900); background: var(--cream-50);
  -webkit-font-smoothing: antialiased; letter-spacing: var(--track-tight); word-break: keep-all;
  font-size: var(--t-body); line-height: var(--lh-body); font-weight: 500;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
  position: fixed; inset: 0; height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 3px solid var(--sakura-600); outline-offset: 2px; }
img { display: block; -webkit-user-drag: none; }
input { font: inherit; color: inherit; letter-spacing: inherit; -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 18px; height: 18px; }
.ic.xs { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---------- type ---------- */
.t-cap   { font-size: var(--t-cap);   line-height: var(--lh-cap);   font-weight: 600; letter-spacing: 0; }
.t-body  { font-size: var(--t-body);  line-height: var(--lh-body); }
.t-title { font-size: var(--t-title); line-height: var(--lh-title); font-weight: 800; }
.t-disp  { font-size: var(--t-disp);  line-height: var(--lh-disp);  font-weight: 900; letter-spacing: -0.03em; }
.muted { color: var(--ink-700); }
.pink  { color: var(--sakura-700); }
.b { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; height: var(--btn-h); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 700 var(--t-body)/1 var(--font); letter-spacing: var(--track-tight); color: var(--ink-900); width: 100%;
  transition: transform var(--d-tap) var(--ease-out), box-shadow var(--d-tap); }
.btn:active { transform: translateY(3px) scale(.98); box-shadow: none !important; }
.btn > * { position: relative; }
.btn-primary { background: var(--sakura-400); box-shadow: var(--sh-sticker), var(--sh-1); }
.btn-secondary { background: var(--paper); box-shadow: inset 0 0 0 2px var(--cream-200), var(--sh-sticker-ink); }
.btn-ink { background: var(--ink-900); color: var(--paper); box-shadow: var(--sh-sticker-ink); }
.btn-ghost { background: transparent; height: var(--hit); color: var(--ink-700); }
/* ROUND 6 brand accents (mascot palette): deep-purple + crown-gold buttons */
.btn-grape { background: var(--grape-500); color: var(--paper); box-shadow: 0 3px 0 var(--grape-700), var(--sh-1); }
.btn-gold { background: var(--gold-grad); color: var(--ink-900); box-shadow: var(--sh-sticker-gold), var(--sh-1); }
.btn-sm { height: var(--hit); border-radius: var(--r-pill); padding: 0 var(--s-4); width: auto; }
.btn[disabled] { opacity: .5; pointer-events: none; }
/* progress fill inside a primary button (start screen loading) */
.btn .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.38); transition: width .25s var(--ease-out); pointer-events: none; }
.btn .fill::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sakura-600); }

.iconbtn { width: var(--hit); height: var(--hit); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1.5px var(--glass-line), var(--sh-1); color: var(--glass-ink);
  transition: transform var(--d-tap) var(--ease-out); }
.iconbtn:active { transform: scale(.92); }
.iconbtn.solid { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--cream-200); color: var(--ink-900); }
.iconbtn.on { background: var(--sakura-100); box-shadow: inset 0 0 0 2px var(--sakura-300), var(--sh-1); color: var(--sakura-700); }

/* ---------- glass, pills, stickers ---------- */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1.5px var(--glass-line), var(--sh-1); color: var(--glass-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: var(--hit); padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-pill); white-space: nowrap; }
.sticker { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--sakura-100); color: var(--sakura-700); font-size: var(--t-cap); line-height: 1; font-weight: 700; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--paper); }
.sticker.flat { box-shadow: none; }
.sticker.ink { background: var(--ink-900); color: var(--paper); }
.sticker.butter { background: var(--butter-200); color: var(--butter-700); }
.sticker.paper { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 2px var(--cream-200); }
.flame { color: var(--butter-500); }

/* segmented control */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--cream-100); gap: 4px; }
.seg.glassy { background: rgba(255,250,245,.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1.5px var(--glass-line), var(--sh-1); }
.seg > button { position: relative; height: 36px; min-width: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; color: var(--ink-700); white-space: nowrap; transition: background var(--d-tap), color var(--d-tap); }
.seg > button::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; } /* 44px hit */
.seg > button.on { background: var(--ink-900); color: var(--paper); box-shadow: var(--sh-1); }

/* ---------- cards ---------- */
.card { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.card.tint { background: var(--sakura-50); box-shadow: inset 0 0 0 2px var(--sakura-100); }
.sec-label { font-size: var(--t-cap); line-height: var(--lh-cap); font-weight: 700; color: var(--ink-700); letter-spacing: 0; display: flex; align-items: center; gap: 6px; }

/* switch */
.switch { width: 52px; height: 32px; border-radius: 16px; background: var(--ink-100); position: relative; flex: none; transition: background var(--d-tap); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); box-shadow: var(--sh-1); transition: transform var(--d-pop) var(--ease-bounce); }
.on > .switch, .switch.on { background: var(--sakura-400); }
.on > .switch::after, .switch.on::after { transform: translateX(20px); }

.chk { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--sakura-600); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper);
  animation: pop var(--d-pop) var(--ease-bounce); }

/* grade badge on photos */
.gbadge { position: absolute; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 3px; border-radius: 12px; background: var(--paper); box-shadow: var(--sh-1);
  font-size: var(--t-cap); font-weight: 800; letter-spacing: 0; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.gbadge b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sakura-600); color: #fff; font-size: 12px; line-height: 1; font-weight: 900; }
.gbadge.s b { background: var(--sakura-700); color: #fff; }
.gbadge.b b { background: var(--sakura-400); color: var(--ink-900); }
.gbadge.c b { background: var(--ink-700); }

/* grade stamp (ring text is decorative; aria-hidden) */
.stamp { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: var(--sakura-600);
  background: rgba(255,241,245,.94); box-shadow: inset 0 0 0 4px var(--sakura-600), inset 0 0 0 7px rgba(255,241,245,.94), inset 0 0 0 8.5px var(--sakura-600), var(--sh-2);
  transform: rotate(-12deg); }
.stamp svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stamp.svgr { box-shadow: var(--sh-2); }   /* rings live in the SVG (scale with the stamp) */
.stamp .rg { stroke: var(--stamp-ring, currentColor); }
.stamp .g { font-size: 52px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; margin-top: -2px; }

/* spinner */
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* motion off; opacity crossfades stay (sheets/ panels override their transforms below) */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .btn:active, .iconbtn:active { transform: none; }
  .spin { animation: spin 1.2s linear infinite !important; }
}