/* P11-W9/W10 — Flow Core + events/live-ops presentation. */

/* ---------- signature mechanic HUD ---------- */
#flowHud {
  --flow-accent: #8fffd1;
  min-width: 128px;
  display:grid;
  gap:4px;
  padding:7px 10px 8px;
  border:1px solid color-mix(in srgb,var(--flow-accent) 34%,rgba(255,255,255,.10));
  border-radius:14px;
  background:rgba(18,7,31,.58);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
#flowHud.hidden { display:none !important; }
#flowLabel { color:#fff; font-size:9px; font-weight:800; letter-spacing:1.1px; line-height:1; }
.p11-flow-track { height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
#flowFill { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--flow-accent),#fff1a0); box-shadow:0 0 14px color-mix(in srgb,var(--flow-accent) 60%,transparent); transition:width .15s linear; }
#flowHud[data-tier="2"],#flowHud[data-tier="3"] { box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 22px color-mix(in srgb,var(--flow-accent) 18%,transparent); }
#flowHud.burst { animation:p11FlowBurst .48s ease-in-out infinite alternate; }
@keyframes p11FlowBurst { to { transform:scale(1.035); border-color:var(--flow-accent); } }

/* ---------- Flow Core collection ---------- */
.p11-flow-section { margin-top:4px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.p11-flow-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.p11-flow-section-head h3 { color:#fff; font-size:18px; }
.p11-flow-section-head p { color:rgba(255,255,255,.48); font-size:10px; }
#flowCoreGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.p11-flow-core-card { display:grid; grid-template-columns:54px 1fr; gap:9px; align-items:center; min-height:126px; padding:11px; border:1px solid rgba(255,255,255,.10); border-radius:17px; background:rgba(255,255,255,.04); }
.p11-flow-core-card.selected { border-color:color-mix(in srgb,var(--core) 56%,white 8%); background:color-mix(in srgb,var(--core) 8%,rgba(255,255,255,.04)); }
.p11-flow-core-card.locked { opacity:.62; }
.p11-flow-core-orb { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--core) 38%,rgba(255,255,255,.04) 74%); box-shadow:0 0 24px color-mix(in srgb,var(--core) 36%,transparent); }
.p11-flow-core-orb i { width:20px; height:20px; border:3px solid rgba(20,8,35,.52); border-radius:50%; }
.p11-flow-core-card span { color:var(--core); font-size:8px; font-weight:800; letter-spacing:1.2px; }
.p11-flow-core-card h4 { margin:2px 0; color:#fff; font-size:13px; }
.p11-flow-core-card p { color:rgba(255,255,255,.52); font-size:9px; line-height:1.25; }
.p11-flow-core-card small { display:block; margin-top:5px; color:rgba(255,255,255,.36); font-size:8px; }
.p11-flow-core-card button { grid-column:1 / -1; min-height:34px; border:1px solid color-mix(in srgb,var(--core) 42%,transparent); border-radius:11px; background:color-mix(in srgb,var(--core) 13%,rgba(255,255,255,.04)); color:#fff; font:800 9px/1 "Baloo 2",sans-serif; cursor:pointer; }
.p11-flow-core-card button:disabled { opacity:.5; cursor:default; }

/* ---------- seasonal event button ---------- */
.p11-season-chip {
  --event-accent:#83e7ff;
  justify-self:center;
  min-height:48px;
  display:grid;
  align-content:center;
  gap:1px;
  padding:7px 16px;
  border:1px solid color-mix(in srgb,var(--event-accent) 36%,rgba(255,255,255,.12));
  border-radius:16px;
  background:rgba(18,7,31,.62);
  color:#fff;
  backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 20px color-mix(in srgb,var(--event-accent) 12%,transparent);
}
.p11-season-chip span { color:var(--event-accent); font-size:7px; font-weight:800; letter-spacing:1.5px; }
.p11-season-chip strong { font-size:11px; letter-spacing:1.3px; line-height:1; }

/* ---------- event hub ---------- */
#eventOverlay { z-index:54; }
.p11-event-panel { width:min(820px,calc(100vw - 28px)); max-height:calc(100dvh - 30px); overflow:auto; align-items:stretch; gap:14px; padding:20px; }
.p11-event-hero {
  --event-accent:#83e7ff;
  --event-accent-2:#c687ff;
  position:relative;
  overflow:hidden;
  min-height:220px;
  display:grid;
  align-content:end;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--event-accent) 36%,rgba(255,255,255,.12));
  border-radius:22px;
  background:
    radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--event-accent) 28%,transparent),transparent 30%),
    radial-gradient(circle at 30% 70%,color-mix(in srgb,var(--event-accent-2) 22%,transparent),transparent 34%),
    linear-gradient(135deg,#1b0c34,#0d1731 56%,#102928);
}
.p11-event-hero::after { content:""; position:absolute; inset:auto -5% 0; height:42%; background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 44px); transform:skewY(-5deg); }
.p11-event-kicker { position:relative; z-index:1; color:var(--event-accent); font-size:9px; font-weight:800; letter-spacing:2px; }
.p11-event-hero h2 { position:relative; z-index:1; margin-top:4px; color:#fff; font-size:clamp(32px,7vw,60px); line-height:.9; }
.p11-event-hero p { position:relative; z-index:1; margin-top:8px; color:rgba(255,255,255,.64); font-size:12px; }
#eventCountdown { position:absolute; z-index:2; right:16px; top:16px; padding:7px 10px; border-radius:999px; background:rgba(0,0,0,.28); color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; }
.p11-event-progress { display:grid; gap:7px; padding:13px 14px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.04); }
.p11-event-progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:rgba(255,255,255,.56); font-size:10px; font-weight:800; letter-spacing:1px; }
.p11-event-progress-head strong { color:#fff; font-size:13px; }
.p11-event-progress-track { height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
#eventProgressFill { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#83e7ff,#c687ff,#ffe07a); }
.p11-event-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.p11-event-card { min-height:110px; display:grid; align-content:center; gap:5px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:17px; background:rgba(255,255,255,.04); }
.p11-event-card span { color:rgba(255,255,255,.42); font-size:8px; font-weight:800; letter-spacing:1.4px; }
.p11-event-card strong { color:#fff; font-size:15px; }
.p11-event-card small { color:#ffd95a; font-size:9px; }

@media (max-width:720px) {
  #flowHud { min-width:102px; padding:6px 8px 7px; }
  #flowLabel { font-size:8px; }
  #flowCoreGrid { grid-template-columns:1fr; }
  .p11-flow-core-card { grid-template-columns:46px 1fr auto; min-height:96px; }
  .p11-flow-core-card button { grid-column:auto; min-width:70px; }
  .p11-event-grid { grid-template-columns:1fr; }
  .p11-season-chip { padding:6px 9px; min-height:44px; max-width:132px; }
  .p11-season-chip strong { font-size:9px; }
}

@media (prefers-reduced-motion: reduce) { #flowHud.burst { animation:none !important; } }