:root {
  color-scheme: light;
  --kawaii-bg: #fff0fa;
  --kawaii-bg-2: #ffd6ef;
  --kawaii-panel: rgba(255, 255, 255, 0.76);
  --kawaii-primary: #ff69c8;
  --kawaii-primary-dark: #e73fae;
  --kawaii-secondary: #b88cff;
  --kawaii-accent: #ffd166;
  --kawaii-text: #5c2a4d;
  --kawaii-muted: #9b5f8b;
  --kawaii-glow: 0 0 24px rgba(255, 105, 200, 0.58);
  --kawaii-glow-gold: 0 0 28px rgba(255, 209, 102, 0.72);
  --kawaii-shadow: 0 18px 60px rgba(255, 105, 200, .20), inset 0 0 0 1px rgba(255, 105, 200, .12);
  --wand-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-28 16 16)'%3E%3Crect x='14' y='11' width='4' height='15' rx='2' fill='%23ffb4de'/%3E%3Cpath d='M16 4l1.6 4.4L22 10l-4.4 1.6L16 16l-1.6-4.4L10 10l4.4-1.6L16 4z' fill='%23ffd166' stroke='%23ff69c8' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='10' r='1.3' fill='white'/%3E%3C/g%3E%3C/svg%3E") 6 2, auto;
  --heart-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 23s-8-4.8-8-10.4C6 9.4 8.1 7 10.9 7c1.6 0 3 .8 3.9 2 1-1.2 2.4-2 4-2 2.8 0 4.9 2.4 4.9 5.6C23.7 18.2 14 23 14 23z' fill='%23ff69c8' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 10 4, pointer;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  color: var(--kawaii-text);
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 209, 242, .94), transparent 22rem),
    radial-gradient(circle at 80% 10%, rgba(184, 140, 255, .38), transparent 20rem),
    radial-gradient(circle at 45% 78%, rgba(255, 209, 102, .22), transparent 20rem),
    linear-gradient(135deg, #fff0fa 0%, #ffe8f6 45%, #fff7fc 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  cursor: var(--wand-cursor);
}

button,
a,
input,
select,
textarea,
summary,
[role="button"] {
  cursor: var(--heart-cursor);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255, 105, 200, .34) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 2px);
  background-size: 72px 72px, 38px 38px;
  animation: sparkle-drift 24s linear infinite;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M18 25c0-4 3-7 7-7 3 0 5 1 6 3 1-2 4-3 6-3 4 0 7 3 7 7 0 7-13 13-13 13S18 32 18 25z' fill='%23ff94d4' fill-opacity='.55'/%3E%3Cpath d='M69 64c4 0 6 3 6 6 0 2-1 3-2 4l-9 9-9-9c-1-1-2-2-2-4 0-3 2-6 6-6 2 0 4 1 5 3 1-2 3-3 5-3z' fill='%23ffd166' fill-opacity='.5'/%3E%3Cpath d='M71 19l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z' fill='%23b88cff' fill-opacity='.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: drift-slow 50s linear infinite;
  z-index: 0;
}

#kawaii-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#kawaii-decor span {
  position: absolute;
  font-size: clamp(1.4rem, 1.8vw, 2.6rem);
  opacity: .22;
  filter: drop-shadow(0 6px 12px rgba(255, 105, 200, .18));
  animation: floaty-sticker 7s ease-in-out infinite;
}

#kawaii-decor span:nth-child(1) { left: 3%; top: 7%; animation-delay: 0s; }
#kawaii-decor span:nth-child(2) { left: 14%; top: 76%; animation-delay: .8s; }
#kawaii-decor span:nth-child(3) { left: 25%; top: 16%; animation-delay: 1.2s; }
#kawaii-decor span:nth-child(4) { right: 10%; top: 18%; animation-delay: 2.2s; }
#kawaii-decor span:nth-child(5) { right: 6%; top: 60%; animation-delay: 2.9s; }
#kawaii-decor span:nth-child(6) { left: 8%; top: 48%; animation-delay: 3.5s; }
#kawaii-decor span:nth-child(7) { right: 25%; top: 7%; animation-delay: 4.3s; }
#kawaii-decor span:nth-child(8) { right: 32%; top: 74%; animation-delay: 1.8s; }
#kawaii-decor span:nth-child(9) { left: 42%; top: 84%; animation-delay: 5s; }
#kawaii-decor span:nth-child(10) { left: 58%; top: 12%; animation-delay: 1.4s; }
#kawaii-decor span:nth-child(11) { right: 18%; top: 42%; animation-delay: 4.6s; }
#kawaii-decor span:nth-child(12) { left: 48%; top: 56%; animation-delay: 3s; }

#app,
#toast-stack {
  position: relative;
  z-index: 1;
}

@keyframes sparkle-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 160px 220px, -120px 90px; }
}

@keyframes drift-slow {
  from { background-position: 0 0; }
  to { background-position: 180px 220px; }
}

@keyframes floaty-sticker {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) rotate(8deg) scale(1.08); }
}

.kawaii-card {
  background: var(--kawaii-panel);
  border: 2px solid rgba(255, 255, 255, .86);
  box-shadow: var(--kawaii-shadow);
  backdrop-filter: blur(18px);
}

.kawaii-title {
  letter-spacing: -0.04em;
  text-shadow: 0 3px 0 rgba(255,255,255,.8), 0 0 24px rgba(255,105,200,.42);
}

.kawaii-btn {
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--kawaii-primary), #ff93da 42%, var(--kawaii-secondary));
  box-shadow: 0 12px 28px rgba(255, 105, 200, .36);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.kawaii-btn:hover {
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.12);
  box-shadow: var(--kawaii-glow);
}

.kawaii-btn:active {
  transform: translateY(1px) scale(.98);
}

.currency-pill {
  border: 1px solid rgba(255, 105, 200, .18);
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

.nav-btn {
  border: 0;
  background: rgba(255,255,255,.62);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.nav-btn:hover {
  transform: translateY(-2px);
}

.nav-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 10px 24px rgba(255,105,200,.26);
}

.pack-image {
  filter: drop-shadow(0 20px 32px rgba(255, 105, 200, .38));
  transform-origin: center;
}

.pack-stage {
  position: relative;
  min-height: 35rem;
}

.polish-pad {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  cursor: var(--heart-cursor);
  user-select: none;
  touch-action: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.86), transparent 11rem),
    linear-gradient(135deg, rgba(255,235,248,.82), rgba(255,255,255,.58), rgba(240,229,255,.65));
}

.polish-pad::before,
.polish-pad::after {
  position: absolute;
  pointer-events: none;
  text-shadow: var(--kawaii-glow);
}

.polish-pad::before {
  content: "✦";
  left: 10%;
  top: 12%;
  font-size: 3rem;
  color: rgba(255,255,255,.9);
  animation: floaty 2.4s ease-in-out infinite;
}

.polish-pad::after {
  content: "♡";
  right: 12%;
  bottom: 11%;
  font-size: 3.4rem;
  color: rgba(255,105,200,.45);
  animation: floaty 2.9s ease-in-out infinite reverse;
}

.polish-pad.charging {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 0 4px rgba(255,105,200,.15), 0 0 34px rgba(255,105,200,.25);
}

.polish-preview-shell {
  position: relative;
  width: min(240px, 64vw);
  aspect-ratio: 512 / 720;
  margin-inline: auto;
  border-radius: 1.6rem;
  padding: .5rem;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,238,251,.92), rgba(242,233,255,.95));
  box-shadow: 0 22px 38px rgba(255, 105, 200, .18), inset 0 0 0 2px rgba(255,255,255,.85);
}

.polish-preview-art {
  width: 100%;
  height: 100%;
  border-radius: 1.3rem;
  object-fit: cover;
  filter: saturate(.82) brightness(.88) contrast(1.02) blur(.1px);
  transition: transform .24s ease, filter .24s ease;
}

.polish-pad.charging .polish-preview-art {
  transform: scale(1.02);
  filter: saturate(1.06) brightness(1.04);
}

.polish-veil {
  position: absolute;
  inset: .5rem;
  border-radius: 1.3rem;
  background: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.12), rgba(255,105,200,.08));
  mix-blend-mode: screen;
}

.polish-frame-label {
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .9rem;
  padding: .55rem .8rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(255,105,200,.12);
  backdrop-filter: blur(10px);
}

.charge-bar {
  position: relative;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 2px solid rgba(255,105,200,.18);
}

.charge-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff69c8, #ffd166, #b88cff);
  box-shadow: var(--kawaii-glow);
}

.sweet-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: rgba(255, 209, 102, .7);
  border: 2px dashed rgba(255, 255, 255, .95);
  box-shadow: 0 0 18px rgba(255,209,102,.78);
  pointer-events: none;
}

.card-art {
  width: 100%;
  aspect-ratio: 632 / 744;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 16px 34px rgba(255, 105, 200, .18);
}

.album-card {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.album-card:hover {
  transform: translateY(-4px);
  filter: saturate(1.08);
  box-shadow: 0 18px 34px rgba(255, 105, 200, .14);
}

.locked-card {
  filter: grayscale(.45) blur(.25px);
  opacity: .48;
}

.rarity-common { --rarity: #ff9ddc; border-color: rgba(255,157,220,.8); }
.rarity-rare { --rarity: #9b5cff; border-color: rgba(155,92,255,.8); }
.rarity-super_rare {
  --rarity: #e5a600;
  border-color: rgba(229,166,0,.9);
  box-shadow: var(--kawaii-glow-gold);
}

.rarity-ultra_rare {
  --rarity: #00c2ff;
  border-color: rgba(255,105,200,.9);
  box-shadow: 0 0 30px rgba(0,194,255,.35), 0 0 30px rgba(255,105,200,.35);
}

.rarity-secret_rare {
  --rarity: #fff2a8;
  border-color: rgba(255,242,168,.95);
  color: #fff;
  background: linear-gradient(135deg, #1e153e, #ff69c8, #3b1b7a);
  box-shadow: 0 0 38px rgba(255,242,168,.45), 0 0 32px rgba(255,105,200,.38);
}

.rarity-badge {
  background: var(--rarity, #ff69c8);
  color: white;
}

.reveal-card {
  opacity: 0;
  transform: translateY(24px) scale(.96);
}

.holo-shine {
  position: relative;
  overflow: hidden;
}

.holo-shine::before {
  content: "";
  position: absolute;
  inset: -80% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.6), transparent 65%);
  transform: translateX(-80%) rotate(14deg);
  animation: shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%, 45% { transform: translateX(-80%) rotate(14deg); }
  100% { transform: translateX(80%) rotate(14deg); }
}

.stat-bar {
  height: .5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.65);
}

.stat-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff69c8, #b88cff);
}

.auth-panel input {
  background: rgba(255,255,255,.82);
}

.opening-cinematic {
  position: relative;
  overflow: hidden;
  min-height: 35rem;
  border-radius: 1.8rem;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.8), transparent 13rem),
    linear-gradient(180deg, rgba(255,246,252,.9), rgba(255,231,245,.72) 52%, rgba(246,239,255,.92));
  border: 2px solid rgba(255,255,255,.88);
}

.opening-pack-shell {
  position: relative;
  width: min(260px, 78vw);
  margin: 0 auto;
  transition: transform .35s ease, opacity .35s ease;
}

.opening-pack-shell.opened {
  transform: scale(1.08);
}

.screen-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,255,255,.65) 16%, rgba(255,255,255,0) 58%);
}

.opening-stage-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 25rem;
  perspective: 1400px;
}

.opening-card-wrap {
  width: min(320px, 88vw);
  aspect-ratio: 632 / 744;
  perspective: 1400px;
}

.opening-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

.opening-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 1.6rem;
  overflow: hidden;
}

.opening-card-back {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #ff69c8, #ffb4de 35%, #b88cff 100%);
  border: 4px solid rgba(255,255,255,.82);
  box-shadow: 0 22px 40px rgba(255, 105, 200, .28);
}

.opening-card-back-inner {
  width: calc(100% - 1.2rem);
  height: calc(100% - 1.2rem);
  border: 2px dashed rgba(255,255,255,.62);
  border-radius: 1.2rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  text-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.opening-card-front {
  transform: rotateY(180deg);
  background: rgba(255,255,255,.82);
  box-shadow: 0 25px 48px rgba(255, 105, 200, .24);
}

.opening-card-front .card-art {
  height: 78%;
  aspect-ratio: auto;
  border-radius: 1.2rem 1.2rem 0 0;
}

.opening-card-front-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.opening-card-meta {
  padding: .8rem .95rem .95rem;
}

.opening-card-title {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
}

.opening-rarity-banner {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  color: white;
  font-weight: 800;
  margin-bottom: .55rem;
}

.opening-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.82);
}

.reveal-grid-card {
  opacity: 0;
  transform: translateY(12px) scale(.95);
}

.rare-pulse {
  animation: rarePulse 1.25s ease-in-out 2;
}

@keyframes rarePulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.035); filter: saturate(1.2); }
}

.app-enter {
  animation: pagePop .35s ease;
}

@keyframes pagePop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .7; }
  50% { transform: translateY(-16px) rotate(14deg); opacity: 1; }
}

@media (max-width: 640px) {
  #kawaii-decor span { opacity: .16; }
  .opening-cinematic { min-height: 30rem; }
  .polish-pad { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Update 0.3 — mobile-safe opening + trading card chrome */
.pack-stage,
.opening-cinematic,
.opening-stage-card,
#opening-results,
#view {
  max-width: 100%;
  overflow-x: clip;
}

.opening-cinematic {
  min-height: 36rem;
}

.opening-stage-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 27rem;
  padding: .25rem 0 .8rem;
}

.opening-card-wrap {
  width: min(300px, calc(100vw - 5rem));
  max-width: 100%;
  aspect-ratio: 632 / 744;
  perspective: 1400px;
}

.reveal-grid-card {
  min-width: 0;
}

.tc-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,251,.96));
  box-shadow: 0 14px 32px rgba(255, 105, 200, .16), inset 0 0 0 1px rgba(255,255,255,.82);
}

.tc-card::before {
  content: "";
  position: absolute;
  inset: .35rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.85);
  pointer-events: none;
}

.tc-card-focus {
  padding: .9rem !important;
}

.tc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .2rem .1rem 0;
}

.tc-name {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.tc-setline {
  margin-top: .18rem;
  font-size: .72rem;
  color: var(--kawaii-muted);
}

.tc-id {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .72rem;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 6px 14px rgba(255,105,200,.22);
}

.tc-artframe {
  position: relative;
  border-radius: 1.25rem;
  padding: .38rem;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,221,244,.95), rgba(235,226,255,.95));
  box-shadow: 0 14px 24px rgba(255,105,200,.12), inset 0 0 0 1px rgba(255,255,255,.88);
}

.tc-artframe .card-art {
  display: block;
  box-shadow: 0 10px 20px rgba(255, 105, 200, .13);
}

.tc-corner-gem {
  position: absolute;
  right: .85rem;
  bottom: .8rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255,105,200,.9), rgba(184,140,255,.95));
  box-shadow: 0 8px 18px rgba(255,105,200,.24);
}

.tc-bottom {
  padding-top: .8rem;
}

.tc-desc {
  margin: 0;
  font-size: .83rem;
  line-height: 1.4;
  color: rgba(92,42,77,.82);
}

.tc-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: .8rem;
}

.tc-stat {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .38rem .55rem;
  border-radius: .8rem;
  font-size: .72rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,105,200,.12);
}

.tc-stat strong {
  font-weight: 900;
}

.judgement-pop {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  padding: .75rem 1rem;
  border-radius: 999px;
  color: white;
  font-weight: 900;
  font-size: 1rem;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 18px 30px rgba(255, 105, 200, .24);
  white-space: nowrap;
  z-index: 7;
}

.judgement-pop.great {
  background: linear-gradient(135deg, #ff69c8, #ffd166);
}

.judgement-pop.perfect {
  background: linear-gradient(135deg, #ff69c8, #ffd166, #b88cff);
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 24px 42px rgba(255, 209, 102, .28);
}

@media (max-width: 768px) {
  .opening-cinematic {
    min-height: 31rem;
    padding: .9rem;
  }

  .opening-stage-card {
    min-height: 23rem;
  }

  .opening-card-wrap {
    width: min(260px, calc(100vw - 4.5rem));
  }

  .tc-card-focus {
    padding: .72rem !important;
  }

  .tc-name {
    font-size: .98rem;
  }

  .tc-mini-stats {
    gap: .35rem;
  }

  .tc-stat {
    font-size: .68rem;
    padding: .33rem .45rem;
  }

  .judgement-pop {
    top: 8%;
    font-size: .9rem;
    max-width: calc(100% - 2rem);
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .pack-stage {
    padding: .9rem;
  }

  .opening-card-wrap {
    width: min(240px, calc(100vw - 4rem));
  }

  .tc-name {
    font-size: .92rem;
  }

  .tc-desc {
    font-size: .78rem;
  }

  .tc-id {
    padding: .28rem .52rem;
    font-size: .66rem;
  }
}

.opening-card-front.tc-card {
  height: 100%;
}

.opening-card-front .tc-artframe .card-art {
  height: auto;
  aspect-ratio: 632 / 744;
  border-radius: 1.25rem;
}

/* Update 0.4 — app shell, mobile nav, modal opening, auto import UI */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

.app-shell {
  padding-bottom: env(safe-area-inset-bottom);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: 80rem;
  margin: 0 auto;
  padding: .75rem .85rem .6rem;
  background: rgba(255, 240, 250, .78);
  border-bottom: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
}

.app-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.app-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.app-logo {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  font-size: 1.35rem;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 10px 24px rgba(255,105,200,.28);
}

.app-name {
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-view-title {
  margin-top: .12rem;
  font-size: .78rem;
  color: var(--kawaii-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.app-currency-row {
  display: flex;
  gap: .45rem;
  padding: .65rem .05rem .15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.app-currency-row::-webkit-scrollbar {
  display: none;
}

.app-nav-top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .6rem;
}

.app-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: .85rem .85rem 6.4rem;
}

.app-bottom-nav {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  padding: .45rem;
  border-radius: 1.45rem;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(255,105,200,.25), inset 0 0 0 1px rgba(255,105,200,.09);
  backdrop-filter: blur(18px);
}

.app-tab {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: .1rem;
  border: 0;
  border-radius: 1rem;
  padding: .55rem .25rem;
  background: transparent;
  color: var(--kawaii-muted);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.app-tab span {
  font-size: 1.15rem;
  line-height: 1;
}

.app-tab strong {
  font-size: .7rem;
  line-height: 1;
}

.app-tab.active {
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 10px 20px rgba(255,105,200,.18);
}

.app-tab:active {
  transform: scale(.96);
}

.opening-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
  overflow: hidden;
}

.opening-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.34), transparent 18rem),
    rgba(71, 29, 68, .42);
  backdrop-filter: blur(14px);
}

.opening-modal-panel {
  position: relative;
  width: min(42rem, 100%);
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
  border-radius: 2rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.95), transparent 11rem),
    linear-gradient(180deg, rgba(255,246,252,.96), rgba(255,229,245,.94));
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 0 30px 85px rgba(81, 22, 72, .35), inset 0 0 0 1px rgba(255,105,200,.12);
}

.opening-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}

.opening-modal-stage {
  position: relative;
  min-height: min(64vh, 34rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.88), transparent 11rem),
    linear-gradient(135deg, rgba(255,255,255,.56), rgba(255,218,243,.68), rgba(236,229,255,.65));
  border: 1px solid rgba(255,255,255,.88);
}

.opening-modal-stage .opening-card-wrap {
  width: min(300px, calc(100vw - 4rem));
}

.opening-modal-caption {
  margin: .75rem 0 0;
  text-align: center;
  font-weight: 900;
  color: var(--kawaii-text);
}

.opening-modal-summary {
  display: flex;
  justify-content: center;
  margin-top: .8rem;
}

.opening-complete-card {
  text-align: center;
  padding: 1rem;
}

.opening-results-shell {
  max-width: 100%;
  overflow: hidden;
}

.import-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,232,247,.72));
  border: 1px solid rgba(255,105,200,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

.import-panel code {
  padding: .15rem .4rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.75);
  color: #c22d8e;
  font-weight: 800;
}

.album-set-section + .album-set-section {
  padding-top: 2rem;
  border-top: 1px dashed rgba(255,105,200,.22);
}

@media (min-width: 768px) {
  .app-topbar {
    margin-top: 1rem;
    border: 2px solid rgba(255,255,255,.84);
    border-radius: 2rem;
    box-shadow: var(--kawaii-shadow);
  }

  .app-main {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 520px) {
  .app-topbar {
    padding-inline: .65rem;
  }

  .app-name {
    font-size: 1rem;
  }

  .app-logo {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .85rem;
  }

  .app-actions .btn {
    min-height: 2rem;
    height: 2rem;
    padding-inline: .65rem;
    font-size: .72rem;
  }

  .opening-modal-panel {
    border-radius: 1.45rem;
    padding: .75rem;
  }

  .opening-modal-stage {
    min-height: min(62vh, 31rem);
  }

  .opening-modal-stage .opening-card-wrap {
    width: min(265px, calc(100vw - 3.25rem));
  }

  .opening-modal-header h3 {
    font-size: 1.35rem;
  }
}

/* Update 0.5 — Dream Card Restoration + manual mobile-safe pack opening */
.restoration-pad {
  min-height: 430px;
}

.restoration-card {
  --restore-progress: 0%;
  position: relative;
  width: min(255px, 72vw);
  aspect-ratio: 632 / 744;
  margin-inline: auto;
  border-radius: 1.65rem;
  padding: .55rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,226,246,.95), rgba(238,230,255,.95));
  box-shadow: 0 24px 42px rgba(255,105,200,.18), inset 0 0 0 2px rgba(255,255,255,.86);
}

.restoration-card-img {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
  filter: saturate(.95) brightness(.96);
  transition: filter .35s ease, transform .35s ease;
}

.restoration-cover {
  position: absolute;
  inset: .55rem;
  border-radius: 1.25rem;
  display: grid;
  place-items: center;
  color: white;
  text-shadow: 0 4px 18px rgba(92,42,77,.28);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 7rem),
    linear-gradient(135deg, rgba(255,105,200,.94), rgba(184,140,255,.92));
  opacity: .96;
  clip-path: inset(var(--restore-progress) 0 0 0 round 1.25rem);
  transition: clip-path .45s ease, opacity .45s ease;
}

.restoration-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.82) 0 2px, transparent 3px),
    linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%);
  background-size: 34px 34px, 28px 28px;
  opacity: .7;
  animation: sparkle-drift 18s linear infinite;
}

.restoration-cover-content {
  position: relative;
  z-index: 1;
}

.restoration-sparkle-veil {
  position: absolute;
  inset: .55rem;
  border-radius: 1.25rem;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.46), transparent 58%);
  transform: translateX(-35%) rotate(12deg);
  opacity: .7;
  transition: transform .45s ease;
}

.restoration-progress {
  height: 1.1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(255,105,200,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.68);
}

.restoration-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff69c8, #ffd166, #b88cff);
  box-shadow: var(--kawaii-glow);
  transition: width .45s ease;
}

.restoration-complete-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
}

.restoration-complete-panel {
  position: relative;
  width: min(24rem, 100%);
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border-radius: 2rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255,246,252,.97), rgba(255,229,245,.96));
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 0 30px 85px rgba(81,22,72,.35), inset 0 0 0 1px rgba(255,105,200,.12);
}

.restoration-complete-card {
  padding: .8rem;
}

.opening-card-inner {
  transform: rotateY(0deg);
}

.opening-modal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(40rem, 100%);
  max-height: calc(100dvh - 1.5rem);
}

.opening-modal-stage {
  min-height: 0;
  height: min(56dvh, 30rem);
  overflow: hidden;
}

.opening-modal-stage .opening-card-wrap {
  width: min(280px, calc(100vw - 3rem), calc((100dvh - 15.5rem) * .849));
  max-height: calc(100dvh - 15.5rem);
}

.tc-card-focus {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tc-card-focus .tc-topbar {
  flex: 0 0 auto;
  margin-bottom: .45rem;
}

.tc-card-focus .tc-artframe {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: .32rem;
}

.tc-card-focus .tc-artframe .card-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.tc-card-focus .tc-bottom {
  flex: 0 0 auto;
  padding-top: .55rem;
}

.tc-card-focus .tc-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.opening-modal-summary .btn {
  min-height: 3rem;
}

@media (max-width: 520px) {
  .restoration-pad {
    min-height: 390px;
  }

  .restoration-card {
    width: min(235px, 76vw);
  }

  .opening-modal-panel {
    border-radius: 1.35rem;
    padding: .62rem;
    max-height: calc(100dvh - 1rem);
  }

  .opening-modal-header {
    margin-bottom: .45rem;
  }

  .opening-modal-stage {
    height: min(54dvh, 27rem);
    border-radius: 1.1rem;
  }

  .opening-modal-stage .opening-card-wrap {
    width: min(232px, calc(100vw - 2.5rem), calc((100dvh - 13.4rem) * .849));
    max-height: calc(100dvh - 13.4rem);
  }

  .tc-card-focus {
    padding: .55rem !important;
  }

  .tc-card-focus .tc-name {
    font-size: .82rem;
  }

  .tc-card-focus .tc-setline,
  .tc-card-focus .tc-id {
    font-size: .58rem;
  }

  .tc-card-focus .tc-bottom {
    padding-top: .42rem;
  }

  .tc-card-focus .tc-desc {
    -webkit-line-clamp: 1;
    font-size: .68rem;
  }

  .tc-card-focus .tc-mini-stats {
    display: none;
  }

  .opening-modal-caption {
    font-size: .86rem;
    margin-top: .45rem;
  }

  .opening-modal-summary {
    margin-top: .55rem;
  }
}

/* Update 0.6 — set system, uniform cards, stronger rarity identity */
.set-filter-row,
.set-pack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.set-filter-row {
  margin-bottom: 1.2rem;
}

.set-filter-pill,
.set-pack-option {
  border: 0;
  border-radius: 1rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.74);
  color: var(--kawaii-text);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,105,200,.14);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.set-filter-pill.active,
.set-pack-option.active {
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 14px 26px rgba(255,105,200,.2);
}

.set-filter-pill:hover,
.set-pack-option:hover {
  transform: translateY(-2px);
}

.set-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.set-pack-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  text-align: left;
  min-height: 4.6rem;
}

.set-pack-name {
  font-size: .95rem;
  line-height: 1.1;
}

.set-pack-meta {
  font-size: .75rem;
  opacity: .78;
}

.selected-pack-card {
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,232,247,.78), rgba(238,231,255,.78));
  border: 1px solid rgba(255,105,200,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74);
}

.tc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.album-card .tc-bottom,
.reveal-grid-card .tc-bottom {
  display: flex;
  flex-direction: column;
  min-height: 9rem;
}

.album-card .tc-desc,
.reveal-grid-card .tc-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.35em;
  max-height: 2.35em;
}

.album-card .tc-mini-stats,
.reveal-grid-card .tc-mini-stats {
  margin-top: auto;
}

.rarity-common.tc-card {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,245,251,.95));
}

.rarity-rare.tc-card {
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.85), transparent 6rem),
    linear-gradient(180deg, rgba(252,247,255,.98), rgba(243,237,255,.95));
  box-shadow: 0 16px 34px rgba(122, 88, 255, .18), inset 0 0 0 1px rgba(255,255,255,.86);
}

.rarity-rare.tc-card::after,
.rarity-super_rare.tc-card::after,
.rarity-ultra_rare.tc-card::after,
.rarity-secret_rare.tc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
}

.rarity-rare.tc-card::after {
  background:
    linear-gradient(120deg, transparent 15%, rgba(255,255,255,.85) 32%, transparent 44%),
    repeating-linear-gradient(135deg, rgba(155,92,255,.10) 0 10px, rgba(255,255,255,0) 10px 20px);
}

.rarity-rare .tc-artframe {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,226,255,.96), rgba(214,234,255,.92));
  box-shadow: 0 14px 24px rgba(122,88,255,.14), inset 0 0 0 1px rgba(255,255,255,.9);
}

.rarity-super_rare.tc-card {
  background:
    radial-gradient(circle at 18% 8%, rgba(255,245,180,.95), transparent 6rem),
    linear-gradient(180deg, rgba(255,251,236,.98), rgba(255,244,214,.95));
}

.rarity-super_rare.tc-card::after {
  background:
    linear-gradient(120deg, transparent 18%, rgba(255,255,255,.88) 34%, transparent 48%),
    radial-gradient(circle at 20% 30%, rgba(255,209,102,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(255,209,102,.22) 0 2px, transparent 3px);
}

.rarity-super_rare .tc-artframe {
  background: linear-gradient(135deg, rgba(255,252,232,.98), rgba(255,238,200,.95));
  box-shadow: 0 16px 28px rgba(229,166,0,.18), inset 0 0 0 1px rgba(255,255,255,.92);
}

.rarity-ultra_rare.tc-card {
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.9), transparent 7rem),
    linear-gradient(180deg, rgba(238,252,255,.98), rgba(233,240,255,.95), rgba(245,235,255,.94));
}

.rarity-ultra_rare.tc-card::after {
  background:
    linear-gradient(120deg, transparent 18%, rgba(255,255,255,.92) 32%, transparent 46%),
    linear-gradient(45deg, rgba(0,194,255,.10), rgba(184,140,255,.10), rgba(255,105,200,.08));
}

.rarity-ultra_rare .tc-artframe {
  background: linear-gradient(135deg, rgba(236,252,255,.98), rgba(235,228,255,.96), rgba(255,235,249,.95));
  box-shadow: 0 18px 28px rgba(0,194,255,.18), inset 0 0 0 1px rgba(255,255,255,.92);
}

.rarity-secret_rare.tc-card {
  color: white;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.22), transparent 6rem),
    linear-gradient(145deg, rgba(34,18,66,.98), rgba(113,32,140,.95), rgba(255,105,200,.88));
}

.rarity-secret_rare.tc-card::before {
  border-color: rgba(255,255,255,.32);
}

.rarity-secret_rare.tc-card::after {
  opacity: .44;
  background:
    linear-gradient(120deg, transparent 18%, rgba(255,255,255,.88) 34%, transparent 46%),
    radial-gradient(circle at 20% 24%, rgba(255,242,168,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 12%, rgba(255,242,168,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 20%, rgba(255,255,255,.3) 0 2px, transparent 3px);
}

.rarity-secret_rare .tc-setline,
.rarity-secret_rare .tc-desc,
.rarity-secret_rare .tc-stat,
.rarity-secret_rare .tc-mini-stats,
.rarity-secret_rare .tc-topbar {
  color: rgba(255,255,255,.92);
}

.rarity-secret_rare .tc-artframe {
  background: linear-gradient(135deg, rgba(255,243,194,.24), rgba(255,255,255,.12), rgba(255,105,200,.18));
  box-shadow: 0 18px 30px rgba(255,242,168,.16), inset 0 0 0 1px rgba(255,255,255,.18);
}

.rarity-secret_rare .tc-stat {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
}

@media (max-width: 520px) {
  .set-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .set-filter-pill,
  .set-pack-option {
    padding: .68rem .82rem;
    border-radius: .9rem;
  }

  .album-card .tc-bottom,
  .reveal-grid-card .tc-bottom {
    min-height: 8.6rem;
  }
}

/* Hotfix 0.6.1 — cleaner floating opening modal + safer single-card sizing */
.opening-modal-panel {
  width: min(46rem, 100%);
  max-height: calc(100dvh - 1rem);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  gap: .8rem;
}

.opening-modal-header {
  align-items: center;
  padding-inline: .15rem;
}

.opening-modal-stage {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: .25rem 0;
}

.opening-modal-stage .opening-card-wrap {
  width: min(21rem, calc(100vw - 2rem), calc((100dvh - 15rem) * 0.849462));
  max-width: 100%;
  aspect-ratio: 632 / 744;
}

.opening-modal-caption,
.opening-modal-summary {
  position: relative;
  z-index: 2;
}

.opening-modal-caption {
  margin: 0;
  padding-inline: .35rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.tc-card-focus {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto);
  gap: .45rem;
  padding: .7rem !important;
}

.tc-card-focus .tc-topbar {
  margin-bottom: 0 !important;
  gap: .55rem;
}

.tc-card-focus .tc-name {
  font-size: .96rem;
  line-height: 1.02;
}

.tc-card-focus .tc-setline {
  font-size: .72rem;
}

.tc-card-focus .tc-id {
  padding: .3rem .6rem;
  font-size: .72rem;
}

.tc-card-focus .tc-artframe {
  aspect-ratio: 1 / 1.02;
  min-height: 0;
  padding: .28rem;
}

.tc-card-focus .tc-artframe .card-art,
.opening-card-front .tc-artframe .card-art {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.65), rgba(241,227,245,.95));
}

.tc-card-focus .tc-corner-gem {
  width: 2.55rem;
  height: 2.55rem;
  right: .7rem;
  bottom: .7rem;
}

.tc-card-focus .tc-bottom {
  padding-top: .1rem;
  display: grid;
  gap: .45rem;
}

.tc-card-focus .badge {
  min-height: 1.65rem;
  font-size: .76rem;
  padding-inline: .75rem;
}

.tc-card-focus .tc-desc {
  -webkit-line-clamp: 1 !important;
  min-height: 1.25em;
  font-size: .8rem;
}

.tc-card-focus .tc-mini-stats {
  margin-top: 0;
  gap: .35rem;
}

.tc-card-focus .tc-stat {
  padding: .3rem .5rem;
  font-size: .68rem;
  border-radius: .72rem;
}

@media (max-width: 640px) {
  .opening-modal {
    padding: max(.65rem, env(safe-area-inset-top)) .65rem max(.75rem, env(safe-area-inset-bottom));
  }

  .opening-modal-panel {
    gap: .65rem;
  }

  .opening-modal-stage .opening-card-wrap {
    width: min(18.5rem, calc(100vw - 1.25rem), calc((100dvh - 13.5rem) * 0.849462));
  }

  .tc-card-focus {
    padding: .58rem !important;
    gap: .35rem;
  }

  .tc-card-focus .tc-name {
    font-size: .86rem;
  }

  .tc-card-focus .tc-setline,
  .tc-card-focus .tc-id {
    font-size: .6rem;
  }

  .tc-card-focus .tc-artframe {
    aspect-ratio: 1 / 1;
  }

  .tc-card-focus .tc-desc {
    font-size: .72rem;
  }

  .tc-card-focus .tc-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tc-card-focus .tc-stat {
    font-size: .62rem;
    padding: .24rem .42rem;
  }
}

@media (max-height: 760px) {
  .opening-modal-stage .opening-card-wrap {
    width: min(17.8rem, calc(100vw - 2rem), calc((100dvh - 12.8rem) * 0.849462));
  }

  .tc-card-focus .tc-mini-stats {
    gap: .3rem;
  }

  .tc-card-focus .tc-stat {
    padding: .22rem .42rem;
  }
}

/* Hotfix 0.6.2 — uniform opening cards + kawaii status caption */
#opening-modal .opening-modal-panel {
  align-items: center;
}

#opening-modal .opening-modal-header,
#opening-modal .opening-modal-caption,
#opening-modal .opening-modal-summary {
  width: min(100%, 22rem);
}

#opening-modal .opening-modal-stage {
  width: 100%;
  justify-items: center;
}

#opening-modal .opening-modal-stage > .w-full {
  width: auto !important;
  max-width: 100%;
}

#opening-modal .opening-card-wrap {
  width: min(18.9rem, calc(100vw - 2rem), calc((100dvh - 14rem) * 0.849462)) !important;
  max-height: none !important;
}

#opening-modal .opening-card-front.tc-card.tc-card-focus {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto);
  gap: .34rem;
  height: 100%;
  overflow: hidden;
  padding: .62rem !important;
}

#opening-modal .tc-card-focus .tc-topbar {
  margin-bottom: 0 !important;
}

#opening-modal .tc-card-focus .tc-name {
  font-size: .92rem;
  line-height: 1.02;
}

#opening-modal .tc-card-focus .tc-setline {
  font-size: .68rem;
}

#opening-modal .tc-card-focus .tc-id {
  padding: .28rem .58rem;
  font-size: .68rem;
}

#opening-modal .tc-card-focus .tc-artframe {
  flex: none !important;
  display: block !important;
  aspect-ratio: 1 / 1.04;
  min-height: 0;
  padding: .28rem;
}

#opening-modal .tc-card-focus .tc-artframe .card-art,
#opening-modal .opening-card-front .tc-artframe .card-art {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.78), rgba(242,231,246,.96));
}

#opening-modal .tc-card-focus .tc-corner-gem {
  width: 2.45rem;
  height: 2.45rem;
  right: .6rem;
  bottom: .6rem;
}

#opening-modal .tc-card-focus .tc-bottom {
  padding-top: .18rem;
  display: grid;
  gap: .28rem;
}

#opening-modal .tc-card-focus .tc-bottom > .flex {
  margin-bottom: 0 !important;
  min-height: 1.8rem;
  align-items: center;
}

#opening-modal .tc-card-focus .badge {
  min-height: 1.55rem;
  font-size: .72rem;
  padding-inline: .68rem;
}

#opening-modal .tc-card-focus .tc-desc {
  margin: 0;
  min-height: 1.2em;
  max-height: 1.2em;
  line-height: 1.2;
  font-size: .78rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1 !important;
  overflow: hidden;
}

#opening-modal .tc-card-focus .tc-mini-stats {
  margin-top: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .28rem;
}

#opening-modal .tc-card-focus .tc-stat {
  padding: .24rem .42rem;
  border-radius: .66rem;
  font-size: .63rem;
}

#opening-modal .opening-modal-caption {
  margin-top: .2rem;
  text-align: center;
  justify-content: center;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 142, 203, .95);
  background: rgba(255,255,255,.95);
  color: #d14ea8 !important;
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    -1px 0 rgba(255,255,255,.92),
    1px 0 rgba(255,255,255,.92),
    0 -1px rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(255,105,200,.16);
}

@media (max-width: 640px) {
  #opening-modal .opening-modal-header,
  #opening-modal .opening-modal-caption,
  #opening-modal .opening-modal-summary {
    width: min(100%, 18.5rem);
  }

  #opening-modal .opening-card-wrap {
    width: min(17.1rem, calc(100vw - 1.25rem), calc((100dvh - 12.8rem) * 0.849462)) !important;
  }

  #opening-modal .tc-card-focus {
    padding: .54rem !important;
  }

  #opening-modal .tc-card-focus .tc-name {
    font-size: .84rem;
  }

  #opening-modal .tc-card-focus .tc-setline,
  #opening-modal .tc-card-focus .tc-id {
    font-size: .58rem;
  }

  #opening-modal .tc-card-focus .tc-desc {
    font-size: .7rem;
  }

  #opening-modal .tc-card-focus .badge {
    font-size: .66rem;
    padding-inline: .58rem;
  }

  #opening-modal .tc-card-focus .tc-stat {
    font-size: .58rem;
    padding: .22rem .36rem;
  }

  #opening-modal .opening-modal-caption {
    font-size: .84rem;
    padding: .6rem .82rem;
  }
}

@media (max-height: 860px) {
  #opening-modal .opening-card-wrap {
    width: min(17.3rem, calc(100vw - 2rem), calc((100dvh - 12.4rem) * 0.849462)) !important;
  }

  #opening-modal .tc-card-focus .tc-mini-stats {
    display: none !important;
  }

  #opening-modal .tc-card-focus .tc-desc {
    max-height: 1.15em;
  }
}

/* MVP 0.7 — fixed opening focus cards + crafting */
#opening-modal .opening-focus-shell {
  width: auto !important;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opening-modal .opening-card-wrap.opening-uniform-card {
  width: min(20rem, calc(100vw - 2rem), calc((100dvh - 13rem) * 0.849462)) !important;
  max-width: 100%;
  aspect-ratio: 632 / 744;
  max-height: none !important;
  perspective: 1400px;
}

#opening-modal .opening-card-front-clean,
#opening-modal .opening-card-back-clean {
  border-radius: 1.6rem;
}

#opening-modal .opening-card-front-clean {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .55rem;
  padding: .72rem;
  overflow: hidden;
  color: var(--kawaii-text);
}

#opening-modal .opening-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  min-height: 2.8rem;
}

#opening-modal .opening-card-name {
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.05;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#opening-modal .opening-card-set {
  margin-top: .18rem;
  font-size: .72rem;
  color: var(--kawaii-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#opening-modal .opening-card-id {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .35rem .7rem;
  color: #fff;
  font-weight: 900;
  font-size: .72rem;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 8px 18px rgba(255,105,200,.22);
}

#opening-modal .opening-art-box {
  position: relative;
  min-height: 0;
  border-radius: 1.25rem;
  padding: .35rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,231,247,.92), rgba(240,232,255,.92));
  box-shadow: 0 14px 26px rgba(255,105,200,.12), inset 0 0 0 1px rgba(255,255,255,.88);
}

#opening-modal .opening-art-box img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain !important;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.86), rgba(240,230,247,.95));
  box-shadow: 0 12px 24px rgba(255,105,200,.16);
}

#opening-modal .opening-gem {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255,105,200,.92), rgba(184,140,255,.92));
  box-shadow: 0 10px 22px rgba(255,105,200,.22);
}

#opening-modal .opening-card-info {
  display: grid;
  gap: .42rem;
  min-height: 4.3rem;
}

#opening-modal .opening-chip-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  min-height: 1.9rem;
}

#opening-modal .opening-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding-inline: .75rem;
  border-radius: 999px;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
}

#opening-modal .opening-chip.new {
  background: linear-gradient(135deg, #ff69c8, #ff8dd4);
}

#opening-modal .opening-chip.duplicate {
  color: #653600;
  background: linear-gradient(135deg, #ffd166, #ffb703);
}

#opening-modal .opening-card-info p {
  margin: 0;
  min-height: 1.25em;
  max-height: 1.25em;
  overflow: hidden;
  line-height: 1.25;
  font-size: .8rem;
  color: rgba(92,42,77,.82);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#opening-modal .opening-uniform-card.rarity-rare .opening-card-front-clean {
  background:
    linear-gradient(120deg, rgba(255,255,255,.94), rgba(246,237,255,.94)),
    repeating-linear-gradient(135deg, rgba(155,92,255,.12) 0 12px, rgba(255,255,255,0) 12px 24px);
}

#opening-modal .opening-uniform-card.rarity-super_rare .opening-card-front-clean {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,216,.94));
}

#opening-modal .opening-uniform-card.rarity-ultra_rare .opening-card-front-clean {
  background: linear-gradient(145deg, rgba(241,253,255,.96), rgba(237,232,255,.94), rgba(255,236,249,.92));
}

#opening-modal .opening-uniform-card.rarity-secret_rare .opening-card-front-clean {
  color: #fff;
  background: linear-gradient(145deg, rgba(35,18,68,.98), rgba(116,34,142,.95), rgba(255,105,200,.9));
}

#opening-modal .opening-uniform-card.rarity-secret_rare .opening-card-set,
#opening-modal .opening-uniform-card.rarity-secret_rare .opening-card-info p {
  color: rgba(255,255,255,.88);
}

#opening-modal .opening-modal-caption {
  color: #fff !important;
  -webkit-text-stroke: 1px #d14ea8;
  text-shadow:
    0 2px 0 #d14ea8,
    1px 0 0 #d14ea8,
    -1px 0 0 #d14ea8,
    0 -1px 0 #d14ea8,
    0 8px 20px rgba(209,78,168,.24);
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(255,142,203,.95);
}

.crafting-costs {
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,232,247,.72));
  border: 1px solid rgba(255,105,200,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

.craft-card .craft-action {
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  #opening-modal .opening-card-wrap.opening-uniform-card {
    width: min(17.5rem, calc(100vw - 1.25rem), calc((100dvh - 12.25rem) * 0.849462)) !important;
  }

  #opening-modal .opening-card-front-clean {
    padding: .58rem;
    gap: .38rem;
  }

  #opening-modal .opening-card-head {
    min-height: 2.35rem;
  }

  #opening-modal .opening-card-name {
    font-size: .84rem;
  }

  #opening-modal .opening-card-set,
  #opening-modal .opening-card-id {
    font-size: .58rem;
  }

  #opening-modal .opening-card-id {
    padding: .28rem .55rem;
  }

  #opening-modal .opening-card-info {
    min-height: 3.8rem;
    gap: .3rem;
  }

  #opening-modal .opening-chip {
    min-height: 1.45rem;
    font-size: .64rem;
    padding-inline: .58rem;
  }

  #opening-modal .opening-card-info p {
    font-size: .7rem;
  }

  #opening-modal .opening-gem {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-height: 760px) {
  #opening-modal .opening-card-wrap.opening-uniform-card {
    width: min(16.2rem, calc(100vw - 1.5rem), calc((100dvh - 11.25rem) * 0.849462)) !important;
  }

  #opening-modal .opening-card-info {
    min-height: 3.35rem;
  }

  #opening-modal .opening-card-info p {
    display: none;
  }
}

/* Hotfix 0.7.1 — full opening card details + top dropdown navigation */
.app-topbar-fixed {
  position: sticky;
  top: 0;
}

.app-main {
  padding-bottom: 2rem !important;
}

.app-menu {
  position: relative;
}

.app-menu summary {
  list-style: none;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.kawaii-menu-btn {
  border: 0;
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 10px 22px rgba(255,105,200,.22);
}

.app-menu-panel {
  min-width: 13.5rem;
  margin-top: .65rem;
  padding: .55rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 22px 48px rgba(92,42,77,.20), inset 0 0 0 1px rgba(255,105,200,.08);
  backdrop-filter: blur(18px);
}

.app-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 0;
  border-radius: .95rem;
  padding: .8rem .9rem;
  font-weight: 900;
  color: var(--kawaii-text);
  background: transparent;
  text-align: left;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}

.app-menu-item:hover {
  transform: translateX(2px);
  background: rgba(255,105,200,.08);
}

.app-menu-item.active {
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 10px 20px rgba(255,105,200,.16);
}

.app-menu-item.logout-item {
  color: #bd3b8b;
}

.app-menu-divider {
  height: 1px;
  margin: .4rem .3rem;
  background: rgba(255,105,200,.18);
}

.app-bottom-nav {
  display: none !important;
}

.app-nav-top {
  display: none !important;
}

/* Opening cards: use one complete, scalable card layout with all stats visible */
#opening-modal {
  overflow-y: auto !important;
  align-items: start;
  padding-top: max(.75rem, env(safe-area-inset-top));
}

#opening-modal .opening-modal-panel {
  width: min(44rem, 100%);
  max-height: none !important;
  overflow: visible !important;
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: .7rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#opening-modal .opening-modal-header,
#opening-modal .opening-modal-caption,
#opening-modal .opening-modal-summary {
  width: min(100%, 23rem);
}

#opening-modal .opening-modal-stage {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#opening-modal .opening-focus-shell {
  width: 100% !important;
  display: flex;
  justify-content: center;
}

#opening-modal .opening-card-wrap.opening-uniform-card {
  width: min(22rem, calc(100vw - 1.5rem), calc((100dvh - 10.8rem) * 0.849462)) !important;
  max-width: 100%;
  aspect-ratio: 632 / 744;
  max-height: none !important;
  perspective: 1400px;
}

#opening-modal .opening-card-front-clean,
#opening-modal .opening-card-back-clean {
  border-radius: 1.6rem;
}

#opening-modal .opening-card-front-clean {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .46rem;
  padding: .68rem;
  overflow: hidden;
  color: var(--kawaii-text);
}

#opening-modal .opening-card-head {
  min-height: 2.45rem;
  gap: .6rem;
}

#opening-modal .opening-card-name {
  font-size: .96rem;
  line-height: 1.02;
}

#opening-modal .opening-card-set {
  font-size: .66rem;
}

#opening-modal .opening-card-id {
  padding: .3rem .62rem;
  font-size: .66rem;
}

#opening-modal .opening-art-box {
  min-height: 0;
  padding: .32rem;
  border-radius: 1.22rem;
}

#opening-modal .opening-art-box img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), rgba(240,230,247,.96));
}

#opening-modal .opening-card-info {
  display: grid;
  gap: .34rem;
  min-height: 0;
}

#opening-modal .opening-chip-row {
  min-height: 1.55rem;
  gap: .35rem;
}

#opening-modal .opening-chip {
  min-height: 1.42rem;
  padding-inline: .62rem;
  font-size: .65rem;
}

#opening-modal .opening-card-info p {
  display: block !important;
  margin: 0;
  min-height: 1.15em;
  max-height: 1.15em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.15;
  font-size: .68rem;
}

#opening-modal .opening-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .28rem;
}

#opening-modal .opening-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .25rem .42rem;
  border-radius: .66rem;
  font-size: .6rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,105,200,.12);
}

#opening-modal .opening-stat strong {
  font-weight: 900;
}

#opening-modal .opening-uniform-card.rarity-secret_rare .opening-stat {
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.20);
}

#opening-modal .opening-modal-caption {
  margin: 0;
  padding: .66rem 1rem;
  border-radius: 999px;
  color: #fff !important;
  font-weight: 1000;
  text-align: center;
  -webkit-text-stroke: 1px #d14ea8;
  text-shadow:
    0 2px 0 #d14ea8,
    1px 0 0 #d14ea8,
    -1px 0 0 #d14ea8,
    0 -1px 0 #d14ea8,
    0 8px 20px rgba(209,78,168,.24);
  background: rgba(255,255,255,.94);
  border: 2px solid rgba(255,142,203,.95);
  box-shadow: 0 12px 24px rgba(255,105,200,.16);
}

@media (max-width: 640px) {
  .app-actions .btn,
  .app-actions summary.btn {
    min-height: 2rem;
    height: 2rem;
    padding-inline: .65rem;
    font-size: .72rem;
  }

  #opening-modal .opening-modal-header,
  #opening-modal .opening-modal-caption,
  #opening-modal .opening-modal-summary {
    width: min(100%, 19rem);
  }

  #opening-modal .opening-card-wrap.opening-uniform-card {
    width: min(19rem, calc(100vw - 1.1rem), calc((100dvh - 9.9rem) * 0.849462)) !important;
  }

  #opening-modal .opening-card-front-clean {
    padding: .54rem;
    gap: .32rem;
  }

  #opening-modal .opening-card-head {
    min-height: 2.1rem;
  }

  #opening-modal .opening-card-name {
    font-size: .82rem;
  }

  #opening-modal .opening-card-set,
  #opening-modal .opening-card-id {
    font-size: .55rem;
  }

  #opening-modal .opening-card-id {
    padding: .24rem .5rem;
  }

  #opening-modal .opening-chip {
    min-height: 1.28rem;
    font-size: .58rem;
    padding-inline: .48rem;
  }

  #opening-modal .opening-card-info p {
    font-size: .62rem;
  }

  #opening-modal .opening-stat-grid {
    gap: .22rem;
  }

  #opening-modal .opening-stat {
    font-size: .54rem;
    padding: .2rem .32rem;
  }

  #opening-modal .opening-modal-caption {
    font-size: .82rem;
    padding: .56rem .8rem;
  }
}

@media (max-height: 720px) {
  #opening-modal .opening-card-wrap.opening-uniform-card {
    width: min(17rem, calc(100vw - 1.2rem), calc((100dvh - 8.9rem) * 0.849462)) !important;
  }

  #opening-modal .opening-card-front-clean {
    gap: .25rem;
  }

  #opening-modal .opening-card-info p {
    display: none !important;
  }
}

/* MVP 0.7.3 — Dust Ritual crafting rework */
.craft-ritual-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.95), transparent 8rem),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,225,245,.82), rgba(239,230,255,.78));
  border: 1px solid rgba(255,105,200,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 18px 38px rgba(255,105,200,.12);
}

.craft-ritual-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,105,200,.26) 0 1px, transparent 2px);
  background-size: 42px 42px, 27px 27px;
}

.craft-ritual-panel > * {
  position: relative;
  z-index: 1;
}

.craft-cost-orb {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .1rem;
  color: white;
  background: linear-gradient(135deg, #ff69c8, #b88cff);
  box-shadow: 0 18px 34px rgba(255,105,200,.24), inset 0 0 0 4px rgba(255,255,255,.35);
}

.craft-cost-orb span,
.craft-cost-orb small {
  font-weight: 900;
  opacity: .92;
}

.craft-cost-orb strong {
  font-size: 2.6rem;
  line-height: .95;
  font-weight: 1000;
}

.craft-chance-card {
  padding: .85rem 1rem;
  border-radius: 1.1rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,105,200,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.craft-result-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,232,247,.72));
  border: 1px solid rgba(255,105,200,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.craft-result-card {
  max-width: 20rem;
  margin-inline: auto;
}

/* MVP 0.7.4 — haptic crafting, fixed top app bar, quieter support UI */
:root {
  --app-topbar-h: 8.5rem;
}

.app-topbar.app-topbar-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: max(.85rem, env(safe-area-inset-left)) max(.85rem, env(safe-area-inset-right));
  border-radius: 0 0 1.7rem 1.7rem;
  border-bottom: 1px solid rgba(255,255,255,.78);
  background: rgba(255,240,250,.88);
  box-shadow: 0 14px 32px rgba(255,105,200,.12), inset 0 -1px 0 rgba(255,255,255,.55);
}

.app-main {
  padding-top: calc(var(--app-topbar-h) + .95rem) !important;
  padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
}

.app-menu-panel {
  right: 0;
}

.ui-soft-copy {
  font-size: .82rem;
  line-height: 1.35;
  max-width: 46rem;
  opacity: .68;
}

.ui-micro-copy {
  font-size: .72rem;
  line-height: 1.3;
  opacity: .55;
}

.kawaii-card p.text-\[var\(--kawaii-muted\)\] {
  font-size: .86rem;
  line-height: 1.35;
  opacity: .72;
}

.import-panel p,
.selected-pack-card p,
.crafting-costs,
.support-aside {
  font-size: .82rem;
}

.subdued-info-card,
.support-aside,
.import-panel,
.crafting-costs {
  opacity: .84;
  filter: saturate(.92);
}

.support-aside {
  background: rgba(255,255,255,.58) !important;
  box-shadow: 0 12px 26px rgba(255,105,200,.08), inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

.support-note strong {
  font-size: .86rem;
}

.support-note p {
  margin: .12rem 0 0;
  font-size: .74rem;
  opacity: .58;
  line-height: 1.25;
}

.restoration-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.restoration-subcopy {
  font-size: .78rem;
  line-height: 1.3;
  opacity: .62;
  max-width: 34rem;
  margin-top: .15rem;
}

.restoration-header-badge {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1.15rem;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,105,200,.10), 0 10px 22px rgba(255,105,200,.10);
}

.restoration-main-card {
  position: relative;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.95), transparent 12rem),
    linear-gradient(180deg, rgba(255,248,253,.94), rgba(255,236,248,.92));
}

.restoration-focus-field {
  position: relative;
  min-height: min(58vh, 36rem);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.92), transparent 13rem),
    radial-gradient(circle at 50% 55%, rgba(255,105,200,.16), transparent 16rem),
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,220,242,.58), rgba(238,231,255,.55));
  box-shadow: 0 22px 48px rgba(255,105,200,.14), inset 0 0 0 1px rgba(255,255,255,.78);
}

.restoration-focus-field .restoration-card {
  width: min(285px, 78vw);
  box-shadow: 0 30px 55px rgba(255,105,200,.20), 0 0 0 6px rgba(255,255,255,.35), inset 0 0 0 2px rgba(255,255,255,.86);
}

.restoration-progress-block,
.restoration-charge-block,
#polish-result {
  position: relative;
  z-index: 1;
}

.crafting-view .crafting-costs h3,
.album-set-section h3,
.import-panel h3 {
  font-size: 1.1rem;
}

.craft-ritual-panel.ritual-active::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.82), transparent, rgba(255,105,200,.28), transparent);
  animation: ritual-spin 1.4s linear infinite;
  opacity: .6;
}

.craft-ritual-symbol {
  filter: drop-shadow(0 10px 20px rgba(255,105,200,.2));
}

.craft-chance-card {
  padding: .72rem .84rem;
  font-size: .78rem;
  line-height: 1.25;
  opacity: .86;
}

.craft-result-panel {
  min-height: 11rem;
}

.craft-reward-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
}

.craft-reward-panel {
  position: relative;
  width: min(25rem, 100%);
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border-radius: 2rem;
  padding: 1rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.98), transparent 12rem),
    linear-gradient(180deg, rgba(255,247,253,.98), rgba(255,227,245,.96));
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 85px rgba(81,22,72,.35), inset 0 0 0 1px rgba(255,105,200,.12);
}

.craft-reward-header {
  margin-bottom: .7rem;
}

.craft-reward-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 11rem;
}

.craft-reward-card {
  width: min(20rem, 100%);
  margin-inline: auto;
}

.craft-reward-orb {
  width: min(18rem, 86vw);
  min-height: 12rem;
  border-radius: 2rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  padding: 1.3rem;
  color: white;
  background: linear-gradient(135deg, #ff69c8, #ffd166, #b88cff);
  box-shadow: 0 24px 46px rgba(255,105,200,.24), inset 0 0 0 4px rgba(255,255,255,.35);
}

.craft-reward-orb span {
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 10px 20px rgba(92,42,77,.18));
}

.craft-reward-orb strong {
  font-size: 1.15rem;
  line-height: 1.2;
}

.craft-reward-message {
  margin: .75rem 0 1rem;
  font-weight: 900;
  color: #d14ea8;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.craft-collect-chip {
  position: absolute;
  z-index: 10;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: -1.8rem;
  margin-top: -1.8rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 36px rgba(255,105,200,.22), inset 0 0 0 2px rgba(255,105,200,.16);
  pointer-events: none;
}

@keyframes ritual-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .app-topbar.app-topbar-fixed {
    padding-top: .62rem;
    padding-bottom: .55rem;
    border-radius: 0 0 1.25rem 1.25rem;
  }

  .app-currency-row {
    padding-top: .45rem;
  }

  .app-main {
    padding-inline: .65rem;
    padding-top: calc(var(--app-topbar-h) + .65rem) !important;
  }

  .restoration-header-badge {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 1.35rem;
    border-radius: .95rem;
  }

  .restoration-subcopy,
  .ui-soft-copy {
    font-size: .74rem;
  }

  .restoration-focus-field {
    min-height: min(53vh, 32rem);
    padding-inline: .75rem !important;
  }

  .restoration-focus-field .restoration-card {
    width: min(258px, 78vw);
  }

  .craft-reward-panel {
    border-radius: 1.5rem;
    padding: .85rem;
  }
}

/* MVP 0.7.5 — mobile headline scale, safer topbar spacing, pack opening matches restoration reward cards */
.app-main {
  padding-top: calc(var(--app-topbar-h) + 1.55rem) !important;
}

#opening-modal.opening-modal {
  align-items: flex-start;
  place-items: start center;
  overflow-y: auto;
  overflow-x: hidden;
}

#opening-modal .opening-modal-panel {
  width: min(30rem, 100%) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: max(.85rem, env(safe-area-inset-top)) !important;
  padding-bottom: max(.85rem, env(safe-area-inset-bottom)) !important;
}

#opening-modal .opening-modal-header,
#opening-modal .opening-modal-caption,
#opening-modal .opening-modal-summary {
  width: min(100%, 24rem) !important;
}

#opening-modal .opening-modal-stage {
  width: 100% !important;
  overflow: visible !important;
  padding: .15rem 0 !important;
}

#opening-modal .opening-restoration-ratio-shell {
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opening-modal .opening-card-wrap.opening-uniform-card.opening-restoration-ratio {
  width: min(22rem, calc(100vw - 2rem), calc((100dvh - 12.5rem) * .626)) !important;
  aspect-ratio: 632 / 1010 !important;
  max-width: 100% !important;
  max-height: none !important;
  perspective: 1400px;
}

#opening-modal .opening-card-front-tc {
  transform: rotateY(180deg);
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: .76rem !important;
  overflow: hidden;
  border-radius: 1.7rem;
}

#opening-modal .opening-card-front-tc .tc-topbar {
  flex: 0 0 auto;
  margin-bottom: .52rem;
  gap: .65rem;
}

#opening-modal .opening-card-front-tc .tc-name {
  font-size: 1.02rem;
  line-height: 1.04;
}

#opening-modal .opening-card-front-tc .tc-setline {
  font-size: .7rem;
}

#opening-modal .opening-card-front-tc .tc-id {
  font-size: .7rem;
  padding: .32rem .66rem;
}

#opening-modal .opening-card-front-tc .tc-artframe {
  flex: 0 0 auto;
  padding: .34rem;
  border-radius: 1.24rem;
}

#opening-modal .opening-card-front-tc .tc-artframe .card-art {
  width: 100%;
  height: auto !important;
  aspect-ratio: 632 / 744 !important;
  object-fit: contain !important;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.92), rgba(240,230,247,.96));
  border-radius: .98rem;
}

#opening-modal .opening-card-front-tc .tc-corner-gem {
  width: 2.1rem;
  height: 2.1rem;
  right: .72rem;
  bottom: .7rem;
}

#opening-modal .opening-card-front-tc .tc-bottom {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: .55rem;
}

#opening-modal .opening-card-front-tc .tc-bottom > .flex {
  flex: 0 0 auto;
  margin-bottom: .42rem !important;
  gap: .38rem;
}

#opening-modal .opening-card-front-tc .badge {
  min-height: 1.45rem;
  padding-inline: .62rem;
  font-size: .68rem;
}

#opening-modal .opening-card-front-tc .tc-desc {
  flex: 0 0 auto;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.25em;
  max-height: 2.25em;
  line-height: 1.18;
  font-size: .78rem;
}

#opening-modal .opening-card-front-tc .tc-mini-stats {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .34rem;
  margin-top: .52rem;
}

#opening-modal .opening-card-front-tc .tc-stat {
  padding: .31rem .48rem;
  border-radius: .72rem;
  font-size: .64rem;
}

#opening-modal .opening-card-front-tc.rarity-secret_rare .tc-desc,
#opening-modal .opening-card-front-tc.rarity-secret_rare .tc-setline {
  color: rgba(255,255,255,.9);
}

@media (max-width: 640px) {
  .app-main {
    padding-top: calc(var(--app-topbar-h) + 1.15rem) !important;
  }

  #view .kawaii-title {
    font-size: clamp(1.08rem, 5.1vw, 1.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em;
  }

  #view h2.kawaii-title,
  #view h3.kawaii-title,
  #view h4.kawaii-title {
    margin-bottom: .15rem;
  }

  #view .restoration-header-row h2.kawaii-title {
    font-size: clamp(1rem, 4.8vw, 1.35rem) !important;
  }

  #view .restoration-subcopy,
  #view .ui-soft-copy,
  #view .kawaii-card p.text-\[var\(--kawaii-muted\)\] {
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  #opening-modal .opening-modal-panel {
    width: min(100%, 23rem) !important;
  }

  #opening-modal .opening-modal-header h3 {
    font-size: 1.22rem !important;
  }

  #opening-modal .opening-card-wrap.opening-uniform-card.opening-restoration-ratio {
    width: min(19rem, calc(100vw - 1.25rem), calc((100dvh - 11.4rem) * .626)) !important;
  }

  #opening-modal .opening-card-front-tc {
    padding: .62rem !important;
    border-radius: 1.45rem;
  }

  #opening-modal .opening-card-front-tc .tc-topbar {
    margin-bottom: .4rem;
  }

  #opening-modal .opening-card-front-tc .tc-name {
    font-size: .86rem;
  }

  #opening-modal .opening-card-front-tc .tc-setline,
  #opening-modal .opening-card-front-tc .tc-id {
    font-size: .58rem;
  }

  #opening-modal .opening-card-front-tc .tc-id {
    padding: .26rem .52rem;
  }

  #opening-modal .opening-card-front-tc .tc-artframe {
    padding: .28rem;
  }

  #opening-modal .opening-card-front-tc .tc-bottom {
    padding-top: .42rem;
  }

  #opening-modal .opening-card-front-tc .tc-bottom > .flex {
    margin-bottom: .32rem !important;
  }

  #opening-modal .opening-card-front-tc .badge {
    min-height: 1.28rem;
    padding-inline: .52rem;
    font-size: .6rem;
  }

  #opening-modal .opening-card-front-tc .tc-desc {
    font-size: .66rem;
    min-height: 2.15em;
    max-height: 2.15em;
  }

  #opening-modal .opening-card-front-tc .tc-mini-stats {
    gap: .25rem;
    margin-top: .36rem;
  }

  #opening-modal .opening-card-front-tc .tc-stat {
    padding: .22rem .34rem;
    font-size: .55rem;
    border-radius: .58rem;
  }
}

@media (max-height: 720px) {
  #opening-modal .opening-card-wrap.opening-uniform-card.opening-restoration-ratio {
    width: min(17.4rem, calc(100vw - 1.35rem), calc((100dvh - 10.2rem) * .626)) !important;
  }

  #opening-modal .opening-card-front-tc .tc-desc {
    -webkit-line-clamp: 1 !important;
    min-height: 1.15em;
    max-height: 1.15em;
  }
}

/* Update 0.8 — Activity Stats foundation */
.stats-view {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,241,249,.78));
}

.stats-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
}

.stats-hero-card,
.stats-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,234,248,.72), rgba(239,232,255,.68));
  border: 1px solid rgba(255,105,200,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 28px rgba(255,105,200,.08);
}

.stats-value {
  font-size: clamp(1.8rem, 7vw, 2.65rem);
  line-height: .95;
  font-weight: 1000;
  color: var(--kawaii-primary-dark);
  text-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.stat-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .62rem .78rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,105,200,.10);
  font-size: .86rem;
}

.stat-mini-row span {
  color: var(--kawaii-muted);
  font-weight: 700;
}

.stat-mini-row strong {
  color: var(--kawaii-text);
  font-weight: 1000;
}

@media (max-width: 640px) {
  .stats-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .stats-hero-card,
  .stats-panel {
    border-radius: 1.25rem !important;
    padding: .85rem !important;
  }

  .stat-mini-row {
    padding: .52rem .62rem;
    font-size: .76rem;
    border-radius: .85rem;
  }
}

/* Update 0.9 — Kawaii Web Audio controls */
.sound-menu-card {
  display: grid;
  gap: .7rem;
  margin: .25rem .1rem;
  padding: .85rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,232,247,.86));
  border: 1px solid rgba(255,105,200,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  color: var(--kawaii-text);
}

.sound-toggle-row,
.sound-volume-row {
  display: grid;
  gap: .38rem;
  font-size: .82rem;
  font-weight: 900;
}

.sound-toggle-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.sound-volume-row span {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: var(--kawaii-muted);
}

.sound-volume-row strong {
  color: var(--kawaii-primary-dark);
}

.sound-menu-card .range {
  --range-shdw: var(--kawaii-primary);
}

.sound-menu-card .toggle:checked,
.sound-menu-card .toggle[checked="checked"] {
  background-color: var(--kawaii-primary);
  border-color: var(--kawaii-primary);
}


/* MVP 0.9.1 — moving Sweet Spot and harder Restoration timing */
.charge-bar {
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,241,249,.72), rgba(255,255,255,.55)),
    repeating-linear-gradient(90deg, rgba(255,105,200,.06) 0 6px, transparent 6px 14px);
}

.sweet-zone {
  background: linear-gradient(90deg, rgba(255,209,102,.46), rgba(255,245,183,.95), rgba(255,209,102,.46));
  border: 2px solid rgba(255,255,255,.96);
  box-shadow: 0 0 20px rgba(255,209,102,.85), inset 0 0 8px rgba(255,255,255,.84);
  will-change: left, width;
  transition: none !important;
}

.sweet-zone::after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 50%;
  width: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 18px rgba(255,209,102,.95);
}

.restoration-charge-block::before {
  content: "Moving Sweet Spot · perfekte Treffer geben deutlich mehr Fortschritt";
  display: block;
  margin-bottom: .35rem;
  color: var(--kawaii-muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
}

#polish-pad.charging .restoration-card {
  box-shadow: 0 34px 64px rgba(255,105,200,.24), 0 0 0 8px rgba(255,209,102,.18), inset 0 0 0 2px rgba(255,255,255,.9);
}

@media (max-width: 640px) {
  .restoration-charge-block::before {
    font-size: .6rem;
    line-height: 1.25;
  }

  .charge-bar {
    height: 24px;
  }
}

/* MVP 0.9.2 — sakuyume branding and clean login */
.auth-shell {
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.auth-clean-card {
  position: relative;
  overflow: hidden;
}

.auth-clean-card::before {
  content: "";
  position: absolute;
  inset: -38% -25% auto auto;
  width: 15rem;
  height: 15rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,105,200,.18) 54%, transparent 72%);
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
}

.auth-logo {
  width: 4rem;
  height: 4rem;
  border-radius: 1.45rem;
  display: grid;
  place-items: center;
  color: white;
  font-size: 2.05rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff69c8, #ff9ddc 45%, #b88cff);
  box-shadow: 0 16px 32px rgba(255, 105, 200, .30), inset 0 0 0 2px rgba(255,255,255,.46);
}

.auth-title {
  font-size: clamp(2.65rem, 12vw, 4.8rem);
  letter-spacing: -0.075em;
  text-transform: lowercase;
}

.auth-domain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--kawaii-primary-dark);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,105,200,.20);
}

.auth-claim {
  font-size: .86rem;
  color: var(--kawaii-muted);
  opacity: .78;
}

.auth-clean-card .tabs,
.auth-clean-card form {
  position: relative;
  z-index: 1;
}

/* MVP 0.9.3 — login polish, real card back, hidden Restoration identity */
.auth-clean-card form {
  text-align: center;
}

.auth-clean-card form h2,
.auth-clean-card form p {
  width: 100%;
  text-align: center;
}

.auth-clean-card .form-control {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.auth-clean-card .label-text {
  display: block;
  width: 100%;
  margin-bottom: .38rem;
  text-align: center;
  font-weight: 900;
  color: var(--kawaii-muted);
}

.auth-clean-card input.input {
  width: 100%;
  text-align: center;
  min-height: 3.05rem;
  box-shadow: inset 0 0 0 1px rgba(255,105,200,.14), 0 8px 20px rgba(255,105,200,.07);
}

.auth-clean-card form .btn.kawaii-btn {
  width: min(100%, 22rem) !important;
  margin-inline: auto;
  margin-top: .85rem !important;
}

.auth-clean-card .tabs {
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 420px) {
  .auth-clean-card {
    padding-inline: 1.2rem !important;
  }

  .auth-title {
    font-size: clamp(2.25rem, 13vw, 3.35rem);
  }
}

#opening-modal .sakuyume-card-back-face,
.opening-card-back.sakuyume-card-back-face {
  position: absolute;
  inset: 0;
  padding: .56rem;
  border-radius: 1.72rem;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.82), transparent 7rem),
    radial-gradient(circle at 78% 82%, rgba(255,209,102,.38), transparent 9rem),
    linear-gradient(145deg, #ff68c6 0%, #ff9fde 32%, #b98cff 70%, #6d4bc8 100%);
  border: 0;
  box-shadow: 0 28px 55px rgba(102,43,120,.28), inset 0 0 0 2px rgba(255,255,255,.75);
  overflow: hidden;
}

#opening-modal .sakuyume-card-back-face::before,
.opening-card-back.sakuyume-card-back-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.6px, transparent 2.6px),
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%);
  background-size: 38px 38px, 26px 26px;
  opacity: .42;
  animation: sparkle-drift 28s linear infinite;
}

#opening-modal .sakuyume-card-back-face::after,
.opening-card-back.sakuyume-card-back-face::after {
  content: "";
  position: absolute;
  inset: -35% -40%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.42), transparent 65%);
  opacity: .72;
  animation: shine 3.8s ease-in-out infinite;
}

#opening-modal .opening-card-back-inner.sakuyume-card-back,
.opening-card-back-inner.sakuyume-card-back {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 1.22rem;
  border: 2px solid rgba(255,255,255,.76);
  outline: 2px dashed rgba(255,255,255,.36);
  outline-offset: -.72rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.36), transparent 7.4rem),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  text-shadow: 0 4px 16px rgba(92,42,77,.26);
}

.sakuyume-back-frame {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .36rem;
  width: 78%;
  aspect-ratio: 1 / 1.18;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.82), rgba(255,255,255,.32) 58%, transparent 64%),
    conic-gradient(from 0deg, rgba(255,255,255,.12), rgba(255,209,102,.40), rgba(255,255,255,.12), rgba(184,140,255,.34), rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 18px 40px rgba(92,42,77,.17);
  padding: 1.15rem .9rem;
}

.sakuyume-back-orbit {
  width: min(7rem, 46%);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  border: 3px solid rgba(255,105,200,.46);
  background: radial-gradient(circle, rgba(255,255,255,.82), rgba(255,230,248,.44));
}

.sakuyume-back-orbit::before,
.sakuyume-back-orbit::after {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  border: 2px solid rgba(184,140,255,.38);
  transform: rotate(26deg) scaleX(1.25);
}

.sakuyume-back-orbit::after {
  transform: rotate(-32deg) scaleX(1.18);
  border-color: rgba(255,209,102,.46);
}

.sakuyume-back-moon {
  position: relative;
  z-index: 1;
  color: var(--kawaii-primary-dark);
  font-size: clamp(2.5rem, 13vw, 4rem);
  font-weight: 900;
  line-height: 1;
}

.sakuyume-back-brand {
  margin-top: .25rem;
  font-size: clamp(1.65rem, 8vw, 2.45rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  color: #fff;
}

.sakuyume-back-subtitle {
  font-size: clamp(.62rem, 2.8vw, .78rem);
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .88;
}

.sakuyume-back-count {
  margin-top: .22rem;
  padding: .28rem .72rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  color: #7d3c72;
  background: rgba(255,255,255,.72);
  text-shadow: none;
}

.sakuyume-back-corner {
  position: absolute;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  font-size: 1.05rem;
  font-weight: 900;
}

.sakuyume-back-corner-tl { top: .95rem; left: .95rem; }
.sakuyume-back-corner-tr { top: .95rem; right: .95rem; }
.sakuyume-back-corner-bl { bottom: .95rem; left: .95rem; }
.sakuyume-back-corner-br { bottom: .95rem; right: .95rem; }

.restoration-card.restoration-obscured .restoration-card-img {
  filter: blur(18px) saturate(.48) brightness(.82) contrast(.85) !important;
  transform: scale(1.11);
}

.restoration-card.restoration-obscured::before {
  content: "";
  position: absolute;
  inset: .55rem;
  z-index: 1;
  border-radius: 1.25rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 8rem),
    linear-gradient(135deg, rgba(255,105,200,.12), rgba(184,140,255,.14));
  mix-blend-mode: screen;
}

.restoration-card.restoration-revealed .restoration-card-img {
  filter: saturate(1.04) brightness(.98) contrast(1.02) !important;
  transform: scale(1);
}

.restoration-card .restoration-cover,
.restoration-card .restoration-sparkle-veil {
  z-index: 2;
}

#polish-pad.charging .restoration-card.restoration-obscured .restoration-card-img {
  filter: blur(16px) saturate(.55) brightness(.88) contrast(.9) !important;
}

.pack-image {
  filter: drop-shadow(0 22px 34px rgba(184, 80, 200, .32)) drop-shadow(0 4px 10px rgba(255,255,255,.45));
}