/* v0.11.2 responsive layouts. Phone portrait (<768px wide) is untouched.
   WIDE  = tablets + desktop (>=768px wide, >=521px tall): left sidebar nav, roomy content.
   WIDE + landscape: shop = big carousel + side details panel; reveal = card left / actions right.
   PLAND = phone landscape (<=520px tall): compact two-column shop and reveal, rail nav on the left. */
:root{--side:232px}
/* desktop carousel arrows (built in wide.js) */
.rz-arrows{display:none;position:absolute;inset:0;pointer-events:none;align-items:center;justify-content:space-between;padding:0 10px;z-index:3}
.rz-arrows button{pointer-events:auto;width:46px;height:46px;border-radius:50%;background:rgba(18,16,36,.82);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:24px;font-weight:900;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;transition:background .15s,transform .15s}
.rz-arrows button:hover{background:rgba(139,92,255,.5);transform:scale(1.06)}
.rz-arrows button:disabled{opacity:.25;cursor:default}
@media (hover:hover) and (pointer:fine){ .pack-rail{cursor:grab} .pack-rail:active{cursor:grabbing} }
@media (min-width:768px) and (min-height:521px){
  #app{max-width:none;display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .topbar{grid-column:2;grid-row:1;padding:calc(14px + var(--safe-t)) 28px 10px}
  #views{grid-column:2;grid-row:2}
  .tabbar{grid-column:1;grid-row:1/3;display:flex!important;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px;
    padding:calc(22px + var(--safe-t)) 14px 22px;border-top:0;border-right:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#0e0c1d,#08070f)}
  .tabbar::before{content:"";display:block;height:44px;margin:0 6px 18px;background:url(../img/brand/logo-icon.webp) left center/36px no-repeat,url(../img/brand/logo-wordmark.webp) 46px center/auto 22px no-repeat}
  .tabbar button{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:12px 14px;border-radius:14px;color:#b9b4d6;width:100%;transition:background .15s,color .15s}
  .tabbar button:hover{background:rgba(255,255,255,.05);color:#fff}
  .tabbar button.on{background:linear-gradient(90deg,rgba(139,92,255,.24),rgba(139,92,255,.08));color:#fff;box-shadow:inset 3px 0 0 #a77bff}
  .tabbar button span,.tabbar button span.icn{font-size:20px;height:24px;width:24px}
  .tabbar button:focus-visible{outline:2px solid #a77bff;outline-offset:2px}
  html.h2-nav .tabbar button[data-nav="more"]{display:flex!important;margin-top:auto}
  .view{padding:8px 32px 40px}
  /* drawer opens beside the sidebar */
  html.h2-nav #view-more{left:var(--side);width:360px}
  /* vault = multi-column grid */
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .coll-head,#view-collection>.grid,#view-collection>.empty{max-width:1280px;margin-left:auto;margin-right:auto}
  .sel-bar{max-width:720px;margin-left:auto;margin-right:auto}
  /* wallet / rewards / profile / refer: centred readable column */
  #view-store>*,#view-rewards>*,#view-profile>*,#view-refer>*{max-width:760px;margin-left:auto;margin-right:auto}
  .view.doc>*{max-width:760px;margin-left:auto;margin-right:auto}
  .view.doc{font-size:15.5px;line-height:1.6}
  /* modals = centred dialogs */
  .sheet{align-items:center;padding:24px}
  .sheet-body,.sheet.fx .sheet-body{max-width:560px;border-radius:22px;border:1px solid rgba(255,255,255,.12);max-height:min(88vh,860px);overflow-y:auto;transform:translateY(24px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .2s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .sheet.open .sheet-body{transform:none;opacity:1}
  .pd-panel{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100vw - 48px));max-height:min(88vh,860px);border-radius:22px;border:1px solid rgba(255,255,255,.1);transform:translate(-50%,-46%) scale(.98)!important;opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .2s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .pd.open .pd-panel{transform:translate(-50%,-50%)!important;opacity:1}
  .pd-grab{display:none}
  .offer>*{max-width:560px}
  /* stage + reveal get the full window; keep reveal content centred */
  .reveal-panel{max-width:620px;margin:0 auto;width:100%}
  .cta.sellagain{max-width:620px;margin:0 auto}
  .c-tip{max-width:440px}
}
/* tablet/desktop landscape: shop splits into carousel + details panel, reveal splits card | actions */
@media (min-width:900px) and (min-height:521px) and (min-aspect-ratio:1/1){
  html.home2 #view-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr);column-gap:32px;padding:6px 32px 28px;overflow:hidden;max-width:1500px;margin:0 auto}
  html.home2 #view-shop>*{grid-column:2}
  html.home2 #view-shop>.carousel-wrap{grid-column:1;grid-row:1/6;min-height:0}
  html.home2 #view-shop>.h2-tick{grid-row:1;align-self:end;margin:0}
  html.home2 #view-shop>#h2Info{grid-row:3}
  html.home2 #view-shop>#buyBar{grid-row:4;margin:16px 0 0;padding:0}
  html.home2 #view-shop>#packInfo,html.home2 #view-shop>.pack-dots{grid-row:5;align-self:start}
  html.home2 #h2Info{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px 22px 22px}
  html.home2 .h2-name{font-size:28px}
  html.home2 .h2-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  html.home2 .h2-s{background:rgba(0,0,0,.25);border-radius:14px;padding:12px 14px;text-align:left!important;align-items:flex-start!important}
  html.home2 .h2-s.mid{grid-column:1/3;grid-row:1}
  html.home2 .h2-s.right{justify-content:flex-start}
  html.home2 #buyBar .cta{height:58px;font-size:18px}
  .rz-arrows{display:flex}
  .reveal{flex-direction:row;align-items:center}
  .reveal-stage{flex:1 1 auto;min-width:0;margin:0}
  .reveal-panel{flex:0 0 min(440px,40vw);max-width:none;margin:0 4vw 0 0;text-align:left;align-self:center;max-height:100vh;overflow-y:auto;padding:24px}
  .reveal-panel .rp-val{justify-content:flex-start}
  .reveal-panel .rp-actions,.reveal-panel .rp-actions.three{grid-template-columns:1fr 1fr}
  .reveal-panel .rp-actions.three>button:first-child{grid-column:1/3}
  .reveal-panel .cta.sellagain{position:static;width:100%;max-width:none;margin:14px 0 0;padding:14px}
}
/* phone landscape */
@media (orientation:landscape) and (max-height:520px){
  :root{--side:76px}
  #app{max-width:none;display:grid;grid-template-columns:calc(var(--side) + env(safe-area-inset-left)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .topbar{grid-column:2;padding:calc(6px + var(--safe-t)) calc(14px + env(safe-area-inset-right)) 4px 14px}
  #views{grid-column:2;grid-row:2}
  .tabbar{grid-column:1;grid-row:1/3;display:flex!important;flex-direction:column;justify-content:center;gap:4px;padding:8px 4px 8px env(safe-area-inset-left);border-top:0;border-right:1px solid rgba(255,255,255,.07)}
  .tabbar button{font-size:10px;padding:6px 2px}
  html.h2-nav .tabbar button[data-nav="more"]{display:flex!important}
  .view{padding:2px 16px 16px}
  html.home2 #view-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,42%);grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px;padding:0 14px 8px;overflow:hidden}
  html.home2 #view-shop>*{grid-column:2}
  html.home2 #view-shop>.carousel-wrap{grid-column:1;grid-row:1/4;min-height:0}
  html.home2 #view-shop>.h2-tick{grid-row:1;margin:0;font-size:12px}
  html.home2 #view-shop>#h2Info{grid-row:2;align-self:center}
  html.home2 #view-shop>#buyBar{grid-row:3;margin:0;padding:0}
  html.home2 .h2-name{font-size:19px}
  html.home2 .h2-pills{margin-top:6px}
  html.home2 .h2-stats{margin-top:8px}
  html.home2 .h2-s.mid b{font-size:28px;line-height:32px}
  html.home2 #buyBar .cta{height:46px;font-size:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .view.doc>*{max-width:720px;margin-left:auto;margin-right:auto}
  .sheet{align-items:center;padding:10px}
  .sheet-body,.sheet.fx .sheet-body{max-width:560px;border-radius:18px;max-height:94vh;overflow-y:auto}
  .pd-panel{left:50%;right:auto;width:min(560px,96vw);transform:translateX(-50%)!important;max-height:94vh}
  .pd:not(.open) .pd-panel{transform:translate(-50%,100%)!important}
  html.h2-nav #view-more{left:var(--side);width:min(340px,60vw)}
  .reveal{flex-direction:row;align-items:center}
  .reveal-stage{flex:1 1 auto;min-width:0;margin:0;transform:scale(.62);transform-origin:center}
  .reveal-panel{flex:0 0 min(380px,50vw);min-height:0;max-height:100vh;overflow-y:auto;padding:10px 14px 10px 0}
  .reveal-panel .rp-actions button{padding:9px 6px;font-size:13px}
  .reveal-panel .rp-name{font-size:17px}
  .reveal-panel .cta.sellagain{position:static;width:100%;margin:8px 0 0;padding:8px}
  .reveal-panel .rp-val{font-size:21px}
  .stage-odds{top:6px}
}