/* Ordinary-draw album and the final presentation refinements, candidate 2 only. */
body.experience-v2 .site-header {
  background:rgba(249,250,247,.16); backdrop-filter:blur(22px) saturate(110%) contrast(.25) brightness(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(110%) contrast(.25) brightness(1.7); border-color:rgba(91,111,99,.14);
}
body.experience-v2 .shell-context-bar { border-top-color:rgba(91,111,99,.13); }
body.experience-v2 .draw-tools-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; padding:22px 24px 8px; }
body.experience-v2 .draw-tools-heading h2 { margin:0; font-size:17px; color:#22332d; }
body.experience-v2 .draw-tools-heading small { font-size:12px; color:#5b6962; }
body.experience-v2 .draw-tools-links { display:flex; flex-wrap:wrap; gap:12px 24px; padding:0 24px 18px; }
body.experience-v2 .draw-tools-links a { font-size:13px; color:#285e7d; text-underline-offset:4px; }
body.experience-v2 .featured-pool::before {
  background-image:linear-gradient(90deg,#10212cc9,#10212c66),url("./draw-simulator/fig/00backfig/editorial/messi-14.webp");
  background-position:center,35% 43%; opacity:1; mask-image:none;
}
body.experience-v2 .featured-player figcaption span { color:#c4d4d9; }
body.experience-v2 .spending-hero { position:relative; isolation:isolate; overflow:hidden; background:#142526; }
body.experience-v2 .spending-hero::before {
  content:""; position:absolute; z-index:-1; inset:0 3% 0 42%;
  background:url("./draw-simulator/fig/00backfig/editorial/messi-13.webp") center 54%/cover no-repeat;
  mask-image:linear-gradient(90deg,transparent,#000 23%,#000 77%,transparent);
}
body.experience-v2 .spending-hero :is(h2,p) { color:#f4f8f5; }
body.experience-v2 .spending-hero .spending-privacy-badge { background:rgba(13,30,29,.8); }
body.experience-v2 #spendingView .spending-privacy-badge small { color:#dce8e0; }
body.experience-v2 .guided-disclosure > summary { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:78px; cursor:pointer; }
body.experience-v2 .guided-disclosure > summary::after { display:none; }
body.experience-v2 .guided-disclosure > summary:focus-visible { outline:3px solid #4b73ca; outline-offset:-4px; border-radius:12px; }
body.experience-v2 .guided-disclosure .collection-album-toggle { display:none; }
body.experience-v2 .disclosure-cue { display:inline-flex; align-items:center; flex-shrink:0; gap:8px; margin-left:auto; color:#285e7d; font-size:12px; font-weight:500; white-space:nowrap; }
body.experience-v2 .disclosure-cue::before {
  content:""; display:block; width:54px; height:50px; flex-shrink:0;
  background-image:url("./draw-simulator/fig/00backfig/disclosure-characters.webp");
  background-position:var(--disclosure-position,-4px -10px); background-size:239px 345px; background-repeat:no-repeat;
  mix-blend-mode:multiply;
}
body.experience-v2 .disclosure-cue::after { content:"⌄"; font-size:22px; line-height:1; }
body.experience-v2 .disclosure-cue .cue-close { display:none; }
body.experience-v2 .guided-disclosure[open] > summary .cue-open { display:none; }
body.experience-v2 .guided-disclosure[open] > summary .cue-close { display:inline; }
body.experience-v2 .guided-disclosure[open] > summary .disclosure-cue::after { transform:rotate(180deg); }
body.experience-v2 .guided-disclosure[open] > summary .disclosure-cue::before { display:none; }
body.experience-v2 .atlas-page { display:grid; gap:24px; scroll-margin-top:145px; }
body.experience-v2 .atlas-hero { position:relative; overflow:hidden; isolation:isolate; border-radius:18px; padding:44px; background:#17292c; color:#f7f9f5; min-height:258px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
body.experience-v2 .atlas-hero::before { content:""; position:absolute; z-index:-1; inset:0 0 0 44%; background:url("./draw-simulator/fig/00backfig/editorial/messi-15.webp") center 48%/cover no-repeat; mask-image:linear-gradient(90deg,transparent,#000 38%); }
body.experience-v2 .atlas-hero h1 { color:inherit; font-size:clamp(28px,3.2vw,44px); line-height:1.2; margin:12px 0; }
body.experience-v2 .atlas-hero p { color:#e1e9e3; max-width:550px; line-height:1.8; }
body.experience-v2 .atlas-hero .chapter-label { color:#e2cf93; }
body.experience-v2 .atlas-hero a { display:inline-block; color:#ead99f; font-size:14px; margin-top:8px; }
body.experience-v2 .atlas-total { padding:22px; min-width:165px; border-radius:14px; background:rgba(19,37,36,.7); backdrop-filter:blur(10px); }
body.experience-v2 .atlas-total strong { display:block; font-size:32px; color:#e6d398; }
body.experience-v2 .atlas-total span { display:block; margin-top:7px; color:#e1e9e3; font-size:12px; }
body.experience-v2 .atlas-controls { display:grid; grid-template-columns:1.25fr .8fr 1fr 1.25fr; gap:16px; padding:22px 24px; border:1px solid #dfe5df; border-radius:16px; background:#fafcf9; }
body.experience-v2 .atlas-controls label { display:grid; gap:8px; color:#475d51; font-size:12px; min-width:0; }
body.experience-v2 .atlas-controls :is(select,input) { width:100%; min-height:44px; margin:0; background:#fff; color:#24372c; border:1px solid #cdd7cd; border-radius:9px; font-size:14px; padding:10px 12px; }
body.experience-v2 .atlas-status { margin:0 2px; font-size:13px; color:#4c6154; }
body.experience-v2 .atlas-events { display:grid; gap:26px; }
body.experience-v2 .atlas-event { border:1px solid #e0e5de; padding:24px; border-radius:16px; background:rgba(255,255,252,.94); }
body.experience-v2 .atlas-event-heading { display:flex; align-items:baseline; gap:16px; margin-bottom:20px; }
body.experience-v2 .atlas-event-heading h2 { font-size:20px; color:#23372c; margin:0; }
body.experience-v2 .atlas-event-heading span { margin-left:auto; color:#5c6b5b; font-size:12px; }
body.experience-v2 .atlas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
body.experience-v2 .atlas-card { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid #e3e6df; background:#f5f7f1; min-width:0; }
body.experience-v2 .atlas-portrait { position:relative; isolation:isolate; flex:0 0 58px; height:76px; overflow:hidden; border-radius:6px; border:1px solid #86938c; background:linear-gradient(135deg,#d5dfd5,#f8faf6,#b5c1b8); display:grid; place-items:center; color:#3d4d42; }
body.experience-v2 .atlas-card.is-a .atlas-portrait { border-color:#b89941; background:linear-gradient(135deg,#ab8d3f,#f3e4a8,#c3a053); }
body.experience-v2 .atlas-portrait img { position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); object-fit:contain; z-index:1; }
body.experience-v2 .atlas-portrait > span { font-size:19px; font-weight:600; }
body.experience-v2 .atlas-card.is-locked .atlas-portrait { filter:grayscale(1); opacity:.5; }
body.experience-v2 .atlas-card h3 { font-size:13px; font-weight:650; line-height:1.45; color:#23382d; margin:0 0 4px; overflow-wrap:anywhere; }
body.experience-v2 .atlas-card p { font-size:11px; color:#576951; margin:0; line-height:1.7; }
body.experience-v2 .atlas-card small { display:block; font-size:10px; color:#536b47; margin-top:4px; }
body.experience-v2 .atlas-card.is-locked small { color:#737970; }
body.experience-v2 .atlas-exchange-cost { display:block; margin-top:6px; font-size:11px; line-height:1.65; font-weight:650; color:#315d49; text-decoration:none; overflow-wrap:anywhere; }
body.experience-v2 a.atlas-exchange-cost:hover { text-decoration:underline; }
body.experience-v2 .atlas-exchange-cost.is-unknown { color:#737970; font-weight:400; }
.rating-fragment-note { font-size:12px; line-height:1.7; color:#53644f; margin:8px 0; }
.rating-upgrade-panel #ratingUpgradePlan { line-height:1.7; min-width:0; overflow-wrap:anywhere; }
body.experience-v2 .atlas-empty { padding:36px 24px; text-align:center; border:1px dashed #c3cfc2; border-radius:16px; background:#f8faf6; color:#53644f; line-height:1.9; }
@media(max-width:700px) {
  body.experience-v2 .atlas-hero { padding:26px 22px; flex-wrap:wrap; }
  body.experience-v2 .atlas-page { scroll-margin-top:210px; }
  body.experience-v2 .atlas-hero::before { inset:0; background-position:70% center; opacity:.55; }
  body.experience-v2 .atlas-total { padding:12px 16px; }
  body.experience-v2 .atlas-total strong { font-size:24px; }
  body.experience-v2 .atlas-controls { grid-template-columns:1fr 1fr; padding:16px; gap:14px 10px; }
  body.experience-v2 .atlas-event { padding:18px 12px; }
  body.experience-v2 .atlas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body.experience-v2 .atlas-card { flex-direction:column; align-items:flex-start; padding:12px; gap:10px; }
  body.experience-v2 .atlas-portrait { flex-basis:auto; width:58px; }
  body.experience-v2 .spending-hero::before { inset:0; background-position:right 68%; background-size:auto 160%; mask-image:linear-gradient(90deg,transparent,#000); opacity:.65; }
  body.experience-v2 .guided-disclosure > summary { padding:16px; gap:8px; }
  body.experience-v2 .disclosure-cue { gap:4px; font-size:11px; }
  body.experience-v2 .disclosure-cue::before { width:45px; height:43px; background-size:207px 299px; background-position:calc(var(--disclosure-x,-4px) * .866109) calc(var(--disclosure-y,-10px) * .866667); }
}

/* Keep the album tile footprint; make the actual card art fill its left side. */
body.experience-v2 .atlas-card { align-items:stretch; min-height:148px; gap:10px; padding:10px; }
body.experience-v2 .atlas-card .atlas-portrait { flex:0 0 44%; height:auto; min-height:128px; border:0; border-radius:0; background:none; overflow:visible; }
body.experience-v2 .atlas-portrait img { inset:0; width:100%; height:100%; object-fit:contain; }
body.experience-v2 .atlas-card-info { align-self:center; min-width:0; }
body.experience-v2 .atlas-exchange-panel { padding:22px 24px; border:1px solid #dfe5df; border-radius:16px; background:#fafcf9; }
body.experience-v2 .atlas-exchange-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
body.experience-v2 .atlas-exchange-heading h2 { font-size:19px; margin:0 0 8px; color:#23372c; }
body.experience-v2 .atlas-exchange-heading p { font-size:13px; margin:0; line-height:1.7; }
body.experience-v2 .atlas-exchange-heading > strong { padding:10px 14px; background:#eaf1e8; border-radius:10px; color:#315d49; white-space:nowrap; }
body.experience-v2 .atlas-exchange-controls { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(220px,1.6fr) auto; gap:14px; align-items:end; margin-top:18px; }
body.experience-v2 .atlas-exchange-controls label { display:grid; gap:8px; font-size:12px; min-width:0; color:#475d51; }
body.experience-v2 .atlas-exchange-controls select { width:100%; min-width:0; min-height:44px; background:#fff; border:1px solid #cdd7cd; border-radius:9px; padding:10px; }
body.experience-v2 .atlas-exchange-controls button { min-height:44px; }
body.experience-v2 .atlas-exchange-note { font-size:12px; line-height:1.7; color:#60705f; margin:12px 0 0; }
body.experience-v2 .atlas-exchange-status { font-size:13px; line-height:1.7; color:#315d49; margin:10px 0 0; }
body.experience-v2 .atlas-exchange-history { font-size:12px; margin-top:12px; color:#475d51; }
body.experience-v2 .atlas-exchange-history summary { cursor:pointer; }
body.experience-v2 .atlas-exchange-history ul { line-height:1.8; padding-left:18px; }
@media(max-width:700px) {
  body.experience-v2 .atlas-card { align-items:stretch; }
  body.experience-v2 .atlas-card .atlas-portrait { flex-basis:auto; width:100%; height:180px; min-height:0; }
  body.experience-v2 .atlas-card-info { width:100%; }
  body.experience-v2 .atlas-exchange-panel { padding:18px 14px; }
  body.experience-v2 .atlas-exchange-controls { grid-template-columns:minmax(0,1fr); }
}

body.experience-v2 .atlas-inline-exchange { padding:2px 7px; margin-left:3px; border:1px solid #aac0ad; border-radius:6px; color:#315d49; background:#eaf1e8; font-size:11px; cursor:pointer; }
body.experience-v2 .atlas-material-summary { display:flex; flex-wrap:wrap; gap:10px 24px; color:#3f5f4b; font-size:13px; padding:0 8px; }
body.experience-v2 .atlas-exchange-dialog { width:min(560px,calc(100% - 32px)); max-height:85vh; overflow:auto; box-sizing:border-box; border:1px solid #dfe5df; border-radius:16px; padding:24px; background:#fafcf9; color:#23372c; }
body.experience-v2 .atlas-exchange-dialog::backdrop { background:#15261e66; }
body.experience-v2 .atlas-exchange-dialog form { text-align:right; }
body.experience-v2 .atlas-exchange-dialog p { line-height:1.8; font-size:14px; }
body.experience-v2 .atlas-exchange-dialog h2 { font-size:20px; }
#atlasExchangeMessage:empty, #atlasExchangeRetry[hidden] {display:none;}

/* Compact, prominent material balances and bounded-history statistics. */
body.experience-v2 .atlas-material-summary { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;padding:0; }
.atlas-material-era {background:#f5f8f3;border:1px solid #d6e3d4;border-left:5px solid #577c61;border-radius:16px;padding:18px 22px;}
.atlas-material-era>strong {font-size:17px;}.atlas-material-era small {display:block;margin-top:12px;color:#657366;}
.atlas-material-values {display:flex;gap:24px;flex-wrap:wrap;margin-top:10px;}.atlas-material-values span {display:flex;align-items:baseline;gap:7px;}.atlas-material-values b {font-size:28px;color:#294c35;}
.inventory-history {margin-top:28px;border-top:1px solid #dce3de;padding-top:20px;}.inventory-history>summary{cursor:pointer;font-weight:700;font-size:18px;}.inventory-history>p{font-size:13px;color:#68756d;}
.inventory-history-era {border:1px solid #e0e6df;border-radius:16px;padding:18px;margin-top:14px;background:#f6f8f4;}.inventory-history-era header{display:flex;justify-content:space-between;gap:10px;}.inventory-history-era p{color:#617067;font-size:14px;}
.inventory-history-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:10px;}.inventory-history-grid>div{background:white;border-radius:10px;padding:12px;}.inventory-history-grid span{display:block;color:#728074;font-size:12px;}.inventory-history-grid strong{display:block;font-size:23px;margin-top:7px;}
body.experience-v2 .inventory-summary {grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:700px){body.experience-v2 .inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr));}.inventory-header{flex-wrap:wrap;}.atlas-material-values{gap:16px;}}

body.experience-v2 .atlas-controls {grid-template-columns:1.2fr .75fr .85fr 1.1fr 1.2fr;}
.atlas-recipe-field,.collection-sort-field {display:flex;flex-direction:column;gap:8px;color:#536355;font-size:14px;}
.atlas-recipe-field select,.collection-sort-field select {max-width:100%;padding:12px;border:1px solid #cbd8cc;border-radius:12px;background:#fff;color:#28372d;font:inherit;}
.collection-sort-field {margin:0 24px 20px;max-width:290px;}
@media(max-width:900px){body.experience-v2 .atlas-controls{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){body.experience-v2 .atlas-controls{grid-template-columns:1fr;}}

/* Zodiac has a separate page; main-event cards keep their own space. */
body.experience-v2 #zodiacAtlasPage .atlas-hero { background:linear-gradient(120deg,#081d30,#233c58); }
body.experience-v2 #zodiacAtlasPage .atlas-hero .chapter-label { color:#e2c589; }
body.experience-v2 #zodiacAtlasPage .atlas-material-summary { grid-template-columns:1fr; }