/* Event pass reward board. Load AFTER style.css.
   CSS-only: existing page controls, event tabs, claim buttons and 100 levels stay intact.
   Current DOM uses .ep-row > button[data-level], not .ep-reward.
   Asset URLs are relative to this stylesheet in online/. */
body #event-pass-v2.inline-event-pass {
  --ep-night: #291b38;
  --ep-mid: #57334d;
  --ep-accent: #ffc878;
  --ep-art: url('../assets/cookies/pumpkin.png');
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
  padding: 22px;
  border: 3px solid var(--ep-accent);
  border-radius: 24px;
  background: radial-gradient(ellipse at 100% 0, var(--ep-mid), transparent 72%), var(--ep-night);
  color: #fff4dc;
  box-shadow: inset 0 0 0 4px #ffffff0a, 0 5px 0 #201323;
  font: 16px/1.55 'CookieRun', sans-serif;
}
body #event-pass-v2.inline-event-pass.theme-halloween { --ep-night:#291b38; --ep-mid:#673846; --ep-accent:#ffc878; --ep-art:url('../assets/cookies/pumpkin.png'); }
body #event-pass-v2.inline-event-pass.theme-dragon { --ep-night:#142f2c; --ep-mid:#34604a; --ep-accent:#bfe69b; --ep-art:url('../assets/dragons/pitaya.png'); }
body #event-pass-v2.inline-event-pass.theme-ancient { --ep-night:#29283c; --ep-mid:#655239; --ep-accent:#ffe5a2; --ep-art:url('../assets/cookies/pure.png'); }
body #event-pass-v2.inline-event-pass.theme-circus { --ep-night:#292340; --ep-mid:#593e66; --ep-accent:#f5c4df; --ep-art:url('../assets/cookies/pomni.png'); }
/* Equal specificity to existing per-theme backgrounds, later in this file. */
body #event-pass-v2.inline-event-pass[class*="theme-"] {
  background: radial-gradient(ellipse at 90% 0, var(--ep-mid), transparent 72%), var(--ep-night);
}
body #event-pass-v2.inline-event-pass::before {
  content: '';
  position: absolute;
  inset: 10px 2% auto auto;
  width: min(46%, 410px);
  height: 370px;
  background: var(--ep-art) right top / contain no-repeat;
  opacity: .19;
  pointer-events: none;
  z-index: -1;
}
body #event-pass-v2.inline-event-pass > section { min-width:0; position:relative; }
body #event-pass-v2.inline-event-pass header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 0 14px; padding:0 0 12px;
  border:0; border-bottom:1px solid #ffffff26; background:none;
}
body #event-pass-v2.inline-event-pass h2 {
  font-size:28px; line-height:1.3; color:var(--ep-accent);
  text-shadow:0 3px 0 #15101b; word-break:keep-all;
}
body #event-pass-v2.inline-event-pass .ep-emblem {
  display:grid; place-items:center; flex:0 0 54px; height:54px;
  border:2px solid var(--ep-accent); border-radius:18px;
  background:#17121e80; font-size:32px; transform:rotate(5deg);
}
body #event-pass-v2.inline-event-pass > section > strong {
  display:inline-block; padding:6px 14px; border-radius:20px;
  color:#fff6dd; background:#17121ec9; font-size:16px;
}
body #event-pass-v2.inline-event-pass progress {
  display:block; width:100%; height:16px; margin:10px 0;
  overflow:hidden; border:2px solid #15121f; border-radius:12px;
  background:#17121e; accent-color:var(--ep-accent);
}
body #event-pass-v2.inline-event-pass progress::-webkit-progress-bar { background:#17121e; }
body #event-pass-v2.inline-event-pass progress::-webkit-progress-value { background:linear-gradient(90deg,#da9546,var(--ep-accent)); border-radius:10px; }
body #event-pass-v2.inline-event-pass progress::-moz-progress-bar { background:linear-gradient(90deg,#da9546,var(--ep-accent)); border-radius:10px; }
body #event-pass-v2.inline-event-pass p {
  font-size:14px; line-height:1.65; margin:10px 0; color:#fff0d8;
  word-break:keep-all; overflow-wrap:anywhere;
}
body #event-pass-v2.inline-event-pass > section > p:not(.ep-status) {
  width:fit-content; max-width:100%; padding:10px 14px;
  border-radius:12px; background:#17121ec9;
}
body #event-pass-v2.inline-event-pass button {
  min-height:44px; min-width:0; padding:10px 14px;
  border:2px solid #bc945d; border-radius:13px;
  font:15px/1.45 'CookieRun',sans-serif;
  background:linear-gradient(#fff7e5,#f3dab2); color:#452b24;
  box-shadow:0 3px 0 #17121e;
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
  touch-action:manipulation;
}
body #event-pass-v2.inline-event-pass button:disabled {
  opacity:1; filter:none; cursor:default; box-shadow:none;
  background:#d5cab6; color:#514739; border-color:#9c8d76;
}
body #event-pass-v2.inline-event-pass button:focus-visible,
body #event-pass-v2.inline-event-pass summary:focus-visible {
  outline:3px solid #fff3b0; outline-offset:3px;
}
body #event-pass-v2.inline-event-pass [data-ep-key="buy"] {
  background:linear-gradient(#ffe9a0,#eeb756); border-color:#ffe3a1;
  color:#45271b; padding:10px 18px; margin:4px 0 8px;
}
body #event-pass-v2.inline-event-pass [data-ep-key="buy"]:disabled { background:#dac7a4; color:#51432f; border-color:#b49c74; }
body #event-pass-v2.inline-event-pass small { color:inherit; line-height:1.5; }
body #event-pass-v2.inline-event-pass > section > small { font-size:12px; color:#f4e5cf; }
body #event-pass-v2.inline-event-pass .ep-contract {
  padding:8px 12px; border:1px solid #ffffff30; border-radius:12px;
  margin:12px 0; background:#17121ec9; font-size:13px;
}
body #event-pass-v2.inline-event-pass .ep-contract summary { cursor:pointer; min-height:36px; align-content:center; }
body #event-pass-v2.inline-event-pass .ep-status { padding:10px 14px; color:#fff1c8; background:#17121ee6; border:1px solid var(--ep-accent); }
body #event-pass-v2.inline-event-pass .ep-status:empty { display:none; }
body #event-pass-v2.inline-event-pass nav {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin:16px 0 0; padding:10px;
  border-radius:15px; background:#17121eb3;
}
body #event-pass-v2.inline-event-pass nav b { font-size:15px; color:#fff0d0; }
/* Ten visible milestones per page; the original previous/next handlers reach all 100. */
body #event-pass-v2.inline-event-pass .ep-track {
  display:flex; align-items:stretch; gap:18px;
  width:100%; min-width:0; max-width:100%;
  overflow-x:auto; overflow-y:hidden;
  padding:18px 6px 20px; margin:0;
  scroll-snap-type:x proximity; scroll-padding-inline:6px;
  overscroll-behavior-x:contain; overscroll-behavior-y:auto;
  touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch;
  scrollbar-width:auto; scrollbar-color:var(--ep-accent) #17121e;
}
body #event-pass-v2.inline-event-pass .ep-row {
  position:relative; flex:0 0 170px; width:170px; min-width:170px;
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-rows:42px minmax(122px,auto) minmax(122px,auto);
  align-items:stretch; gap:10px;
  margin:0; padding:0 0 6px; border:0; border-radius:0;
  background:none; text-align:center; scroll-snap-align:start;
}
/* Segments connect badges without overlaying the buttons or intercepting input. */
body #event-pass-v2.inline-event-pass .ep-row:not(:last-child)::after {
  content:''; position:absolute; left:calc(50% + 23px); top:18px;
  width:142px; height:6px; border-radius:4px;
  background:var(--ep-accent); opacity:.5; pointer-events:none;
}
body #event-pass-v2.inline-event-pass .ep-row > b {
  display:grid; place-items:center; align-self:center; justify-self:center;
  width:42px; height:42px; padding:0; border:2px solid var(--ep-accent);
  border-radius:50%; background:var(--ep-night); color:#fff4d6;
  box-shadow:0 3px 0 #15101b; font-size:18px; line-height:1;
}
body #event-pass-v2.inline-event-pass .ep-row > button[data-level] {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; min-height:122px; height:auto;
  padding:12px 10px; border:2px solid #d1ac75; border-radius:17px;
  background:linear-gradient(145deg,#fffdf0,#f2dcad); color:#452b24;
  box-shadow:0 4px 0 #15101b; font-size:16px; line-height:1.5;
}
body #event-pass-v2.inline-event-pass .ep-row > button[data-plus="true"] {
  background:linear-gradient(145deg,#fff0b0,#e7b956);
  border-color:#ffe4a0; color:#452719;
}
body #event-pass-v2.inline-event-pass .ep-row > button[data-level]:disabled {
  background:#d5cab6; color:#514739; border-color:#a5967d;
  box-shadow:0 3px 0 #15101b; opacity:1;
}
body #event-pass-v2.inline-event-pass .ep-row > button[data-plus="true"]:disabled { background:#cebb95; color:#4a3c29; }
body #event-pass-v2.inline-event-pass .ep-row > button[data-level]:enabled {
  border-color:#fff1af;
  box-shadow:0 4px 0 #15101b,0 0 0 2px #f5d27870,0 0 16px #ffd16a30;
}
body #event-pass-v2.inline-event-pass .ep-row button small:first-child {
  display:block; align-self:stretch; margin:0; padding:2px 8px;
  border-radius:7px; background:#553321; color:#fff1d1;
  font-size:12px; font-weight:700;
}
body #event-pass-v2.inline-event-pass .ep-row button small:last-child {
  font-size:12px; margin-top:auto; padding-top:4px;
}
body #event-pass-v2.inline-event-pass h3 { margin:20px 0 10px; color:var(--ep-accent); font-size:20px; }
body #event-pass-v2.inline-event-pass .ep-quests {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0 0;
}
body #event-pass-v2.inline-event-pass .ep-quests button {
  min-height:80px; padding:12px; border-radius:15px;
  background:#fff0ce; color:#452b24; text-align:left;
}
body #event-pass-v2.inline-event-pass .ep-quests button:disabled { background:#d5cab6; color:#514739; }
body #event-pass-v2.inline-event-pass .ep-quests button small { margin-top:6px; font-size:13px; }
@media (max-width:650px) {
  body #event-pass-v2.inline-event-pass { padding:14px; border-radius:18px; }
  body #event-pass-v2.inline-event-pass::before { width:52%; height:280px; opacity:.14; }
  body #event-pass-v2.inline-event-pass h2 { font-size:23px; }
  body #event-pass-v2.inline-event-pass .ep-emblem { flex-basis:44px; height:44px; font-size:27px; }
  body #event-pass-v2.inline-event-pass .ep-row { flex-basis:152px; width:152px; min-width:152px; }
  body #event-pass-v2.inline-event-pass .ep-row:not(:last-child)::after { width:124px; }
  body #event-pass-v2.inline-event-pass .ep-row > button[data-level] { font-size:15px; }
  body #event-pass-v2.inline-event-pass .ep-quests { grid-template-columns:1fr; }
  body #event-pass-v2.inline-event-pass nav { gap:8px; padding:8px; }
  body #event-pass-v2.inline-event-pass nav b { font-size:13px; }
  body #event-pass-v2.inline-event-pass nav button { padding:8px 12px; }
}
@media (forced-colors:active) {
  body #event-pass-v2.inline-event-pass::before { display:none; }
  body #event-pass-v2.inline-event-pass .ep-row > button[data-level]:enabled { outline:2px solid Highlight; }
}

/* Compact first fold: reward board before the longer rules/contract copy.
   Explicit areas keep optional status text from creating holes above rewards. */
body #event-pass-v2.inline-event-pass { padding:14px 18px; }
body #event-pass-v2.inline-event-pass > section {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);
  grid-template-areas:
    'title balance'
    'progress progress'
    'purchase purchase-note'
    'pages pages'
    'rewards rewards'
    'status status'
    'rules rules'
    'contract contract'
    'quests-title quests-title'
    'quests-note quests-note'
    'quests quests';
  gap:8px 16px;
  align-items:center;
}
body #event-pass-v2.inline-event-pass > section > header {
  grid-area:title; min-height:38px; margin:0; padding:0; border:0;
  justify-content:flex-start; gap:12px;
}
body #event-pass-v2.inline-event-pass h2 { font-size:24px; }
body #event-pass-v2.inline-event-pass .ep-emblem {
  flex-basis:34px; height:34px; font-size:23px; border-radius:11px;
}
body #event-pass-v2.inline-event-pass > section > strong {
  grid-area:balance; justify-self:end; padding:5px 12px; font-size:14px;
}
body #event-pass-v2.inline-event-pass > section > progress {
  grid-area:progress; margin:0; height:12px;
}
body #event-pass-v2.inline-event-pass > section > [data-ep-key="buy"] {
  grid-area:purchase; justify-self:start; margin:0; min-height:44px;
  padding:8px 14px; font-size:14px;
}
body #event-pass-v2.inline-event-pass > section > [data-ep-key="buy"] + small {
  grid-area:purchase-note; font-size:12px; line-height:1.5;
}
body #event-pass-v2.inline-event-pass > section > nav {
  grid-area:pages; margin:0; padding:0 8px; min-height:44px;
}
body #event-pass-v2.inline-event-pass > section > nav button {
  min-height:44px; padding:6px 14px;
}
body #event-pass-v2.inline-event-pass > section > .ep-track {
  grid-area:rewards; padding-top:6px; padding-bottom:12px;
}
body #event-pass-v2.inline-event-pass .ep-row {
  grid-template-rows:42px minmax(106px,auto) minmax(106px,auto);
  gap:8px;
}
body #event-pass-v2.inline-event-pass .ep-row > button[data-level] {
  min-height:106px; padding:8px 10px; gap:5px; font-size:15px;
}
body #event-pass-v2.inline-event-pass > section > .ep-status {
  grid-area:status; margin:0;
}
body #event-pass-v2.inline-event-pass > section > p:not(.ep-status) {
  grid-area:rules; margin:0; width:100%; padding:8px 12px;
  font-size:13px; line-height:1.6;
}
body #event-pass-v2.inline-event-pass > section > .ep-contract {
  grid-area:contract; margin:0; padding:4px 12px;
}
body #event-pass-v2.inline-event-pass .ep-contract summary { min-height:44px; }
body #event-pass-v2.inline-event-pass > section > h3 {
  grid-area:quests-title; margin:8px 0 0;
}
body #event-pass-v2.inline-event-pass > section > h3 + small { grid-area:quests-note; }
body #event-pass-v2.inline-event-pass > section > .ep-quests { grid-area:quests; margin:0; }
@media(max-width:650px) {
  body #event-pass-v2.inline-event-pass { padding:12px; }
  body #event-pass-v2.inline-event-pass > section {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'title' 'balance' 'progress' 'purchase' 'purchase-note'
      'pages' 'rewards' 'status' 'rules' 'contract' 'quests-title' 'quests-note' 'quests';
    gap:6px;
  }
  body #event-pass-v2.inline-event-pass > section > strong { justify-self:start; }
  body #event-pass-v2.inline-event-pass > section > [data-ep-key="buy"] { justify-self:stretch; }
  body #event-pass-v2.inline-event-pass h2 { font-size:22px; }
  body #event-pass-v2.inline-event-pass > section > [data-ep-key="buy"] + small { font-size:12px; }
}