/* ============================================================
   CELLAR — Wine Aging Simulator
   Warm-paper palette adaptation
   ============================================================ */
#cellaraging-section {
  --ca-bg: #FAF7F2;
  --ca-card: #FFFDF9;
  --ca-text: #2C1810;
  --ca-muted: #6B5D52;
  --ca-faint: #9E9189;
  --ca-edge: #E8DFD2;
  --ca-gold: #B8963E;
  --ca-gold-dim: #8A7340;
  --ca-gold-bright: #C9A961;
  --ca-pri: #5B8A4A;
  --ca-sec: #B8963E;
  --ca-ter: #A0522D;
  --ca-success: #4A7A42;
  --ca-err: #8A4A4A;
  --ca-fd: 'Playfair Display', Georgia, serif;
  --ca-fb: 'Libre Franklin', -apple-system, sans-serif;
  background: var(--ca-bg);
  color: var(--ca-text);
  padding: 0;
  overflow: hidden;
}

.ca-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; }
.ca-body { max-width:700px; margin:0 auto; padding:28px 24px 48px; }
.ca-hidden { display:none!important; }

/* Header with level toggle */
.ca-hdr { display:flex; align-items:center; justify-content:space-between; padding:0 0 .6rem; }
.ca-hdr-left { display:flex; flex-direction:column; }
.ca-hdr-title { font-family:var(--ca-fd); font-size:1.8rem; font-weight:400; color:var(--ca-text); line-height:1.1; }
.ca-hdr-title em { font-style:italic; color:var(--ca-gold); }

/* Level toggle */
.ca-lv-toggle { display:flex; border-radius:6px; overflow:hidden; border:1px solid var(--ca-edge); }
.ca-lv-btn { background:none; border:none; font-family:var(--ca-fb); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ca-faint); padding:.4rem .65rem; cursor:pointer; transition:all .2s; }
.ca-lv-btn:not(:last-child) { border-right:1px solid var(--ca-edge); }
.ca-lv-btn.active { background:rgba(184,150,62,.1); color:var(--ca-gold); }
.ca-lv-btn:hover:not(.active) { color:var(--ca-muted); }

/* Sub */
.ca-hdr-sub { font-size:.72rem; color:var(--ca-muted); font-weight:300; line-height:1.5; max-width:500px; padding-bottom:.8rem; border-bottom:1px solid var(--ca-edge); }

/* Tab nav */
.ca-tab-nav { display:flex; justify-content:center; border-bottom:1px solid var(--ca-edge); margin:.4rem 0 0; }
.ca-tab-btn { background:none; border:none; font-family:var(--ca-fb); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ca-faint); padding:.6rem 1.3rem; cursor:pointer; position:relative; transition:color .2s; }
.ca-tab-btn:hover { color:var(--ca-muted); }
.ca-tab-btn.active { color:var(--ca-gold); }
.ca-tab-btn.active::after { content:''; position:absolute; bottom:-1px; left:20%; right:20%; height:2px; background:var(--ca-gold); border-radius:1px; }

/* Sim */
.ca-sim { padding:.8rem 0 .5rem; }
.ca-wine-sel { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.ca-wp { background:rgba(184,150,62,.06); border:1px solid var(--ca-edge); border-radius:100px; padding:.3rem .7rem; font-family:var(--ca-fd); font-size:.72rem; color:var(--ca-muted); cursor:pointer; transition:all .2s; }
.ca-wp:hover { border-color:var(--ca-gold-dim); color:var(--ca-text); }
.ca-wp.active { background:rgba(184,150,62,.12); border-color:var(--ca-gold); color:var(--ca-gold-bright); font-size:.82rem; padding:.35rem .85rem; }
.ca-wp .ca-pv { font-family:var(--ca-fb); font-size:.55rem; color:var(--ca-faint); margin-left:.2rem; }
.ca-wp .ca-noage-x { color:var(--ca-ter); font-weight:600; margin-right:.2rem; font-family:var(--ca-fb); font-size:.65rem; }

/* Aging profile box */
.ca-age-profile { background:var(--ca-card); border:1px solid var(--ca-edge); border-radius:8px; padding:.7rem .9rem; margin:.6rem 0 .3rem; font-size:.72rem; color:var(--ca-muted); line-height:1.5; font-weight:300; }
.ca-age-profile-title { font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ca-gold-dim); margin-bottom:.3rem; }
.ca-age-profile.noage { border-color:rgba(160,82,45,.25); background:rgba(160,82,45,.04); }
.ca-age-profile.noage .ca-age-profile-title { color:var(--ca-ter); }
.ca-decline-box { background:rgba(184,150,62,.03); border:1px solid var(--ca-edge); border-radius:8px; padding:.6rem .8rem; margin:.4rem 0; font-size:.68rem; color:var(--ca-muted); line-height:1.45; font-weight:300; }
.ca-decline-box-title { font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ca-gold-dim); margin-bottom:.25rem; }

.ca-btl-area { display:flex; align-items:center; justify-content:center; gap:1.8rem; margin:1rem 0; min-height:180px; }
.ca-btl-v { width:50px; display:flex; flex-direction:column; align-items:center; }
.ca-btl-nk { width:12px; height:32px; border-radius:3px 3px 0 0; background:rgba(44,24,16,.12); border:1px solid var(--ca-edge); border-bottom:none; }
.ca-btl-bd { width:34px; height:100px; border-radius:0 0 4px 4px; border:1px solid var(--ca-edge); border-top:none; overflow:hidden; position:relative; background:rgba(44,24,16,.06); }
.ca-btl-w { position:absolute; bottom:0; left:0; right:0; height:85%; transition:background-color 1s ease; border-radius:0 0 3px 3px; }
.ca-w-info { flex:1; max-width:340px; }
.ca-w-name { font-family:var(--ca-fd); font-size:1.3rem; color:var(--ca-text); line-height:1.2; }
.ca-w-reg { font-size:.64rem; color:var(--ca-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:.1rem; }
.ca-w-yr { font-family:var(--ca-fd); font-size:1.8rem; font-weight:500; color:var(--ca-gold); margin:.25rem 0; }
.ca-w-age { font-size:.64rem; color:var(--ca-faint); }

.ca-phase { text-align:center; margin:.5rem 0; }
.ca-ph-name { font-family:var(--ca-fd); font-size:.95rem; font-weight:500; color:var(--ca-gold); transition:color .5s; }
.ca-ph-desc { font-size:.64rem; color:var(--ca-faint); margin-top:.08rem; }

.ca-tl { margin:1rem 0; padding:1rem 0; border-top:1px solid var(--ca-edge); border-bottom:1px solid var(--ca-edge); }
.ca-tl-r { display:flex; justify-content:space-between; margin-bottom:.4rem; }
.ca-tl-l { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ca-faint); }
.ca-sl-w { position:relative; padding:.35rem 0; }
.ca-dw { position:absolute; top:50%; transform:translateY(-50%); height:22px; background:rgba(74,122,66,.1); border:1px dashed rgba(74,122,66,.4); border-radius:4px; z-index:1; pointer-events:none; }
.ca-dw-l { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ca-success); white-space:nowrap; }
#cellaraging-section input[type="range"] { -webkit-appearance:none; width:100%; height:4px; background:linear-gradient(to right,var(--ca-pri),var(--ca-sec),var(--ca-ter)); border-radius:2px; outline:none; position:relative; z-index:2; cursor:pointer; }
#cellaraging-section input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ca-bg); border:2px solid var(--ca-gold); cursor:grab; box-shadow:0 2px 6px rgba(44,24,16,.15); }
#cellaraging-section input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--ca-bg); border:2px solid var(--ca-gold); cursor:grab; }
.ca-ym { display:flex; justify-content:space-between; margin-top:.25rem; padding:0 2px; }
.ca-ym span { font-size:.52rem; color:var(--ca-faint); font-variant-numeric:tabular-nums; }

.ca-sg { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin:.7rem 0; }
.ca-si { text-align:center; }
.ca-sl { font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ca-faint); margin-bottom:.2rem; }
.ca-sv { font-family:var(--ca-fd); font-size:.78rem; color:var(--ca-text); transition:all .6s; }

.ca-tn { background:var(--ca-card); border:1px solid var(--ca-edge); border-radius:10px; padding:.9rem 1.1rem; margin:.7rem 0; position:relative; }
.ca-tn::before { content:'\201C'; font-family:var(--ca-fd); font-size:2.2rem; color:var(--ca-gold-dim); opacity:.3; position:absolute; top:.08rem; left:.7rem; line-height:1; }
.ca-tn-t { font-family:var(--ca-fd); font-size:.84rem; font-style:italic; color:var(--ca-muted); line-height:1.6; padding-left:1.1rem; }

.ca-as { margin:.7rem 0; }
.ca-ac { margin-bottom:.8rem; opacity:1; transition:opacity .6s; }
.ca-ac.faded { opacity:.3; }
.ca-ah { display:flex; align-items:center; gap:.4rem; margin-bottom:.25rem; }
.ca-ad { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ca-ad.p { background:var(--ca-pri); } .ca-ad.s { background:var(--ca-sec); } .ca-ad.t { background:var(--ca-ter); }
.ca-al { font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ca-faint); }
.ca-at { width:100%; height:3px; background:rgba(44,24,16,.05); border-radius:2px; margin-bottom:.2rem; overflow:hidden; }
.ca-af { height:100%; border-radius:2px; transition:width .8s ease; }
.ca-af.p { background:var(--ca-pri); } .ca-af.s { background:var(--ca-sec); } .ca-af.t { background:var(--ca-ter); }
.ca-adesc { font-size:.72rem; color:var(--ca-muted); font-style:italic; line-height:1.4; font-family:var(--ca-fd); min-height:1.1em; }

/* Expandable */
.ca-et { display:flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer; font-family:var(--ca-fb); font-size:.82rem; font-weight:500; color:var(--ca-text); padding:.5rem 0; width:100%; text-align:left; transition:color .2s; }
.ca-et:hover { color:var(--ca-gold); }
.ca-ea { font-size:.55rem; color:var(--ca-gold-dim); transition:transform .3s; display:inline-block; }
.ca-ea.open { transform:rotate(90deg); }
.ca-ex { display:none; padding-bottom:.3rem; } .ca-ex.open { display:block; }

/* Callout, cards, etc */
.ca-co { background:var(--ca-card); border-left:3px solid var(--ca-gold-dim); border-radius:0 8px 8px 0; padding:.65rem .9rem; margin:.6rem 0; font-size:.74rem; color:var(--ca-muted); line-height:1.5; font-weight:300; }
.ca-co em { color:var(--ca-gold); font-style:normal; font-weight:400; }
.ca-fb-text { font-size:.74rem; color:var(--ca-muted); line-height:1.55; font-weight:300; margin-bottom:.4rem; }
.ca-fb-text strong { color:var(--ca-text); font-weight:500; }

.ca-fg { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.6rem 0; }
.ca-fc { background:rgba(184,150,62,.04); border:1px solid var(--ca-edge); border-radius:8px; padding:.6rem .55rem; text-align:center; }
.ca-fi { font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ca-gold-dim); margin-bottom:.15rem; }
.ca-ft { font-size:.7rem; color:var(--ca-muted); line-height:1.4; font-weight:300; }
.ca-ft strong { font-weight:500; }

/* SVG icon container */
.ca-ico { width:28px; height:28px; margin:0 auto .3rem; opacity:.6; }
.ca-ico svg { width:100%; height:100%; }

.ca-nal { display:flex; flex-wrap:wrap; gap:.25rem; margin:.4rem 0; }
.ca-nat { background:rgba(160,82,45,.08); border:1px solid rgba(160,82,45,.2); border-radius:100px; padding:.18rem .5rem; font-size:.64rem; color:var(--ca-ter); }

/* Aging chart */
.ca-ar { display:flex; align-items:center; gap:.45rem; margin-bottom:.35rem; }
.ca-arl { font-family:var(--ca-fd); font-size:.7rem; color:var(--ca-text); width:115px; flex-shrink:0; text-align:right; }
.ca-art { flex:1; height:10px; background:rgba(44,24,16,.03); border-radius:3px; position:relative; }
.ca-arf { height:100%; border-radius:3px; position:absolute; top:0; }
.ca-ard { background:rgba(74,122,66,.2); border:1px solid rgba(74,122,66,.4); }
.ca-arp { background:rgba(74,122,66,.5); }
.ca-ary { font-size:.54rem; color:var(--ca-faint); width:55px; flex-shrink:0; }
.ca-alg { display:flex; gap:.8rem; margin-top:.3rem; padding-left:123px; }
.ca-li { display:flex; align-items:center; gap:.2rem; font-size:.54rem; color:var(--ca-faint); }
.ca-ls { width:9px; height:5px; border-radius:2px; }
.ca-ls.d { background:rgba(74,122,66,.2); border:1px solid rgba(74,122,66,.4); }
.ca-ls.p { background:rgba(74,122,66,.5); }

.ca-divider { border:none; border-top:1px solid var(--ca-edge); margin:1rem 0; }
.ca-src { text-align:center; font-size:.52rem; color:var(--ca-faint); margin-top:1rem; padding-top:.6rem; border-top:1px solid var(--ca-edge); line-height:1.5; opacity:.7; }

/* Quiz */
.ca-qa { padding:.8rem 0 2rem; }
.ca-qi { text-align:center; margin-bottom:1.2rem; }
.ca-qi h2 { font-family:var(--ca-fd); font-size:1.2rem; color:var(--ca-text); margin-bottom:.2rem; }
.ca-qi p { font-size:.72rem; color:var(--ca-muted); font-weight:300; }
.ca-qc { background:var(--ca-card); border:1px solid var(--ca-edge); border-radius:11px; padding:1.1rem 1rem; margin-bottom:.8rem; }
.ca-qn { font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ca-gold-dim); margin-bottom:.4rem; }
.ca-qt { font-family:var(--ca-fd); font-size:.95rem; color:var(--ca-text); line-height:1.35; margin-bottom:.8rem; }
.ca-mo { display:flex; flex-direction:column; gap:.35rem; }
.ca-mop { background:rgba(184,150,62,.04); border:1px solid var(--ca-edge); border-radius:7px; padding:.5rem .8rem; cursor:pointer; font-size:.74rem; color:var(--ca-muted); transition:all .2s; font-weight:300; }
.ca-mop:hover { border-color:var(--ca-gold-dim); color:var(--ca-text); }
.ca-mop.correct { border-color:var(--ca-success); background:rgba(74,122,66,.1); color:var(--ca-text); }
.ca-mop.wrong { border-color:var(--ca-err); background:rgba(138,74,74,.08); opacity:.6; }
.ca-mop.disabled { pointer-events:none; }
.ca-sqt { width:100%; height:5px; background:linear-gradient(to right,var(--ca-pri),var(--ca-sec),var(--ca-ter)); border-radius:3px; margin:.6rem 0 .2rem; }
.ca-sql { display:flex; justify-content:space-between; font-size:.52rem; color:var(--ca-faint); margin-bottom:.4rem; }
.ca-sqi { -webkit-appearance:none; width:100%; height:5px; background:transparent; position:relative; top:-10px; cursor:pointer; outline:none; }
.ca-sqi::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--ca-bg); border:2px solid var(--ca-gold); cursor:grab; box-shadow:0 1px 4px rgba(44,24,16,.15); }
.ca-sqi::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--ca-bg); border:2px solid var(--ca-gold); cursor:grab; }
.ca-sqv { text-align:center; font-family:var(--ca-fd); font-size:.85rem; color:var(--ca-gold); margin-bottom:.4rem; }
.ca-ol { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.5rem; }
.ca-oi { display:flex; align-items:center; gap:.5rem; background:rgba(184,150,62,.04); border:1px solid var(--ca-edge); border-radius:7px; padding:.45rem .7rem; user-select:none; }
.ca-oh { font-size:.8rem; color:var(--ca-faint); cursor:grab; }
.ca-on { font-size:.76rem; color:var(--ca-muted); font-family:var(--ca-fd); }
.ca-oa { margin-left:auto; display:flex; gap:.25rem; }
.ca-ob { background:none; border:1px solid var(--ca-edge); border-radius:4px; width:22px; height:22px; color:var(--ca-faint); cursor:pointer; font-size:.65rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ca-ob:hover { border-color:var(--ca-gold); color:var(--ca-gold); }
.ca-qf { margin-top:.5rem; padding:.5rem .7rem; border-radius:7px; font-size:.72rem; line-height:1.45; font-weight:300; }
.ca-qf.correct { background:rgba(74,122,66,.08); border:1px solid rgba(74,122,66,.2); color:var(--ca-success); }
.ca-qf.wrong { background:rgba(138,74,74,.06); border:1px solid rgba(138,74,74,.15); color:var(--ca-err); }
.ca-qf.info { background:rgba(184,150,62,.06); border:1px solid var(--ca-edge); color:var(--ca-muted); }
.ca-cb { background:rgba(184,150,62,.1); border:1px solid var(--ca-gold-dim); border-radius:100px; padding:.4rem 1.3rem; font-family:var(--ca-fd); font-size:.82rem; color:var(--ca-gold); cursor:pointer; transition:all .2s; display:block; margin:.6rem auto 0; }
.ca-cb:hover { background:rgba(184,150,62,.18); }
.ca-cb:disabled { opacity:.4; cursor:default; }
.ca-sb { display:flex; align-items:center; justify-content:center; gap:.8rem; padding:.6rem 0; margin-bottom:.8rem; border-bottom:1px solid var(--ca-edge); }
.ca-sn { font-family:var(--ca-fd); font-size:1.3rem; color:var(--ca-gold); }
.ca-sbl { font-size:.62rem; color:var(--ca-faint); }

/* Explore tab */
.ca-explore-area { padding:.8rem 0 2rem; }
.ca-explore-intro { margin-bottom:.6rem; }
.ca-explore-section { border-bottom:1px solid var(--ca-edge); }
.ca-explore-section:last-child { border-bottom:none; }
.ca-explore-hd { display:flex; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer; font-family:var(--ca-fb); font-size:.84rem; font-weight:500; color:var(--ca-text); padding:.7rem 0; width:100%; text-align:left; transition:color .2s; }
.ca-explore-hd:hover { color:var(--ca-gold); }
.ca-explore-hd-title { flex:1; }
.ca-explore-section .ca-ex { padding:0 0 .8rem; }
.ca-explore-section .ca-fb-text { font-size:.74rem; color:var(--ca-muted); line-height:1.55; font-weight:300; margin-bottom:.5rem; }
.ca-explore-section .ca-fb-text strong { color:var(--ca-text); font-weight:500; }
.ca-explore-section .ca-co { margin-top:.3rem; margin-bottom:.6rem; }

@media(max-width:600px) {
  .ca-hdr-title { font-size:1.5rem; }
  .ca-btl-area { flex-direction:column; gap:.8rem; }
  .ca-sg { grid-template-columns:repeat(2,1fr); }
  .ca-fg { grid-template-columns:1fr; }
  .ca-wine-sel, .ca-wp { font-size:.72rem; }
  .ca-arl { width:90px; font-size:.64rem; }
  .ca-alg { padding-left:98px; }
  .ca-lv-btn { font-size:.52rem; padding:.35rem .45rem; }
}