/* P11-W4..W7 — character, collection, progression and reward presentation. */

:root { --p11-character-accent: #d7c1ff; }

.p11-hero-nameplate {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  min-width: 170px;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--p11-character-accent) 48%, transparent);
  border-radius: 16px;
  background: rgba(13, 5, 27, 0.78);
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 0 30px color-mix(in srgb, var(--p11-character-accent) 18%, transparent);
  pointer-events: none;
}

.p11-hero-nameplate strong { display:block; color:#fff; font-size:18px; line-height:1; letter-spacing:2.4px; }
.p11-hero-nameplate span { display:block; margin-top:4px; color:var(--p11-character-accent); font-size:9px; font-weight:800; letter-spacing:1.8px; }
.p11-hero-avatar { filter: drop-shadow(0 28px 28px rgba(0,0,0,.38)) drop-shadow(0 0 22px color-mix(in srgb, var(--p11-character-accent) 18%, transparent)); }

/* ---------- full game-hub surfaces ---------- */
.p11-product-overlay { z-index: 52; background: linear-gradient(180deg, rgba(10,4,22,.76), rgba(10,4,22,.94)); }
.p11-product-panel {
  width: min(940px, calc(100vw - 28px));
  max-height: calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  align-items:stretch;
  gap:18px;
  padding:22px;
}
.p11-product-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.p11-product-head-copy { display:grid; gap:4px; }
.p11-product-head h2 { color:#fff; font-size:clamp(24px,4vw,36px); line-height:1; }
.p11-product-head p { color:rgba(255,255,255,.56); font-size:12px; }
.p11-product-close { width:46px; height:46px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.06); color:#fff; font-size:25px; cursor:pointer; }

.p11-collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.p11-collection-card {
  position:relative; display:grid; grid-template-columns:110px 1fr auto; gap:14px; align-items:center;
  min-height:150px; padding:14px; border:1px solid rgba(255,255,255,.11); border-radius:20px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04)), rgba(255,255,255,.035));
  overflow:hidden;
}
.p11-collection-card.selected { border-color:color-mix(in srgb, var(--accent) 62%, white 10%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 30px rgba(0,0,0,.18); }
.p11-collection-card.locked { opacity:.68; }
.p11-style-preview { position:relative; height:120px; display:grid; place-items:end center; isolation:isolate; }
.p11-style-preview::before { content:""; position:absolute; inset:22% 7% 4%; z-index:-1; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 68%); opacity:.28; filter:blur(9px); }
.p11-style-preview img { max-width:100%; max-height:118px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.35)); }
.p11-style-preview i { position:absolute; bottom:5px; width:76%; height:13px; border-radius:50%; background:var(--accent); opacity:.25; filter:blur(8px); }
.p11-card-copy { min-width:0; }
.p11-card-state { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:1.5px; }
.p11-card-copy h3 { color:#fff; font-size:18px; line-height:1.05; margin:4px 0; }
.p11-card-copy p { color:rgba(255,255,255,.6); font-size:12px; line-height:1.3; }
.p11-card-copy small { display:block; margin-top:8px; color:rgba(255,255,255,.42); font-size:10px; }
.p11-equip-btn { min-width:82px; min-height:42px; border:1px solid color-mix(in srgb,var(--accent) 48%,transparent); border-radius:13px; background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.04)); color:#fff; font:800 11px/1 "Baloo 2",sans-serif; cursor:pointer; }
.p11-equip-btn:disabled { opacity:.5; cursor:default; }

.p11-progress-list { display:grid; gap:10px; }
.p11-progress-card,.p11-achievement-card {
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; min-height:88px;
  padding:13px 14px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background:rgba(255,255,255,.045);
}
.p11-progress-card.done,.p11-achievement-card.unlocked { border-color:rgba(143,255,209,.23); background:rgba(143,255,209,.05); }
.p11-progress-icon,.p11-achievement-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:rgba(185,138,255,.12); color:#e7d8ff; font-size:22px; }
.p11-achievement-card.unlocked .p11-achievement-icon { background:rgba(143,255,209,.12); color:#8fffd1; }
.p11-progress-copy { min-width:0; display:grid; gap:6px; }
.p11-progress-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.p11-progress-heading strong { color:#fff; font-size:14px; }
.p11-progress-heading span { color:#ffd95a; font-size:11px; font-weight:800; white-space:nowrap; }
.p11-progress-copy p,.p11-progress-copy small { color:rgba(255,255,255,.5); font-size:10px; line-height:1.25; }
.p11-progress-track { height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.p11-progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b98aff,#8fffd1); }
.p11-achievement-mark { color:#8fffd1; font-size:20px; }
.p11-achievement-card.locked .p11-achievement-mark { color:rgba(255,255,255,.36); font-size:15px; }

/* ---------- FTUE coach: teach while playing ---------- */
#ftueCoach {
  position:absolute; z-index:25; left:50%; bottom:max(122px,calc(env(safe-area-inset-bottom) + 108px)); transform:translateX(-50%);
  width:min(360px,calc(100vw - 34px)); display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:center;
  padding:11px 14px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:rgba(16,7,30,.82);
  backdrop-filter:blur(14px); box-shadow:0 16px 38px rgba(0,0,0,.32); pointer-events:none;
}
#ftueIcon { width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(180deg,#ffe36a,#ff9e3e); color:#3c1700; font-size:26px; font-weight:900; animation:p11CoachPulse 1.1s ease-in-out infinite; }
#ftueCoach[data-step="coin"] #ftueIcon { color:#6d4600; }
#ftueCoach[data-step="done"] #ftueIcon { background:linear-gradient(180deg,#a9ffdd,#60dfa9); color:#06301e; }
#ftueTitle { color:#fff; font-size:14px; font-weight:800; letter-spacing:1px; }
#ftueCopy { margin-top:2px; color:rgba(255,255,255,.62); font-size:11px; line-height:1.25; }
@keyframes p11CoachPulse { 50% { transform:scale(1.06); } }

/* ---------- post-run reward moment ---------- */
#over.p11-over { background:linear-gradient(180deg,rgba(20,7,35,.58),rgba(8,3,18,.94)); }
#over.p11-over .p11-gameover-panel { width:min(760px,calc(100vw - 28px)); display:grid; grid-template-columns:minmax(150px,.7fr) minmax(260px,1.15fr); gap:20px; align-items:center; padding:22px; }
.p11-defeat-stage { position:relative; min-height:330px; display:grid; place-items:end center; isolation:isolate; }
.p11-defeat-stage::before { content:""; position:absolute; z-index:-1; bottom:2%; width:90%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,106,132,.20),rgba(185,138,255,.08) 50%,transparent 72%); }
.p11-defeat-stage img { max-width:100%; max-height:330px; object-fit:contain; filter:drop-shadow(0 22px 24px rgba(0,0,0,.42)); animation:p11DefeatIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes p11DefeatIn { from { transform:translateY(30px) scale(.88); opacity:0; } }
.p11-result-stack { display:grid; gap:12px; }
.p11-result-kicker { color:#ff8fa2; font-size:10px; font-weight:800; letter-spacing:2.2px; }
.p11-result-title { color:#fff; font-size:clamp(28px,5vw,46px); line-height:.95; }
#newBestBadge { justify-self:start; }
.p11-result-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.p11-result-stat { padding:10px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.045); }
.p11-result-stat span { display:block; color:rgba(255,255,255,.44); font-size:9px; font-weight:800; letter-spacing:1.3px; }
.p11-result-stat b { display:block; margin-top:3px; color:#fff; font-size:22px; }
.p11-result-stat.gold b { color:#ffd95a; }
#postRunReveal { display:grid; gap:7px; }
.p11-reveal-row { display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:center; padding:9px 10px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); }
.p11-reveal-row>span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(185,138,255,.12); color:#d9c4ff; }
.p11-reveal-row strong { display:block; color:#fff; font-size:11px; }
.p11-reveal-row small { display:block; margin-top:1px; color:rgba(255,255,255,.48); font-size:9px; text-transform:capitalize; }
#retryBtn.p11-run-again { min-height:62px; width:100%; font-size:22px; }

@media (max-width:760px) {
  .p11-collection-grid { grid-template-columns:1fr; }
  .p11-collection-card { grid-template-columns:84px 1fr auto; min-height:126px; padding:11px; gap:10px; }
  .p11-style-preview { height:100px; }
  .p11-style-preview img { max-height:98px; }
  #over.p11-over .p11-gameover-panel { grid-template-columns:1fr; gap:8px; max-height:calc(100dvh - 24px); overflow:auto; }
  .p11-defeat-stage { min-height:150px; }
  .p11-defeat-stage img { max-height:170px; }
  .p11-result-stats { gap:6px; }
  .p11-result-stat { padding:8px; }
  .p11-result-stat b { font-size:18px; }
}

@media (max-width:480px) {
  .p11-product-panel { padding:16px; }
  .p11-collection-card { grid-template-columns:72px 1fr; }
  .p11-equip-btn { grid-column:1 / -1; width:100%; }
  .p11-progress-card,.p11-achievement-card { grid-template-columns:44px 1fr; }
  .p11-achievement-mark { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  #ftueIcon,.p11-defeat-stage img { animation:none !important; }
}