/* The Tree of Life · phone and tablet layout (Design A, Ledger).
   Desktop (1024 px and wider) is untouched: everything below is inside max-width media queries,
   except hiding the few controls js/app.js adds for small screens.
   Selectors start with :root so they win over each page's own <style>. */
.mnav-btn,.ftoggle,.dk-bar,.dk-back,.dk-x{display:none}

/* ======================= tablet and phone (≤1023 px) ======================= */
@media (max-width:1023px){
:root{--pad:18px}
:root body{overflow-x:hidden}
:root html,:root body{-webkit-text-size-adjust:100%}

/* ---- header: logo, menu button, sign-in; nav + search drop down ---- */
:root .top{height:56px;gap:10px;padding:0 var(--pad);padding-top:env(safe-area-inset-top)}
/* header tag "unofficial fan page" stays visible on small screens (rules in proto.css) */
:root .top .grow{flex:1}
:root .mnav-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;order:3;width:44px;height:44px;padding:0 11px;border:1px solid var(--line-2);background:var(--night-2);flex:none}
:root .mnav-btn i{display:block;height:1.5px;background:var(--gold);transition:transform .18s,opacity .18s}
:root .top.mnav-open .mnav-btn i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
:root .top.mnav-open .mnav-btn i:nth-child(2){opacity:0}
:root .top.mnav-open .mnav-btn i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
:root .top .grow{order:1}
:root .top .authslot{order:2}
:root .top .nav,:root .top .search{display:none}
:root .top.mnav-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;height:auto;gap:0;padding:6px var(--pad) 10px;background:rgba(var(--night-rgb),.985);border-bottom:1px solid var(--gold-lo);box-shadow:0 24px 40px rgba(0,0,0,.6)}
:root .top.mnav-open .nav a{height:48px;padding:0 4px;font-size:17px;border-bottom:1px solid var(--line-3)}
:root .top.mnav-open .nav a.on{color:var(--gold-hi)}
:root .top.mnav-open .nav a.on::after{left:auto;right:4px;top:50%;bottom:auto;width:6px;height:6px;transform:translateY(-50%) rotate(45deg)}
:root .top.mnav-open .search{display:flex;position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 6px + 6*48px + 14px);min-width:0;height:44px;z-index:1}
:root .top.mnav-open::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(6*48px + 16px + 64px);background:rgba(var(--night-rgb),.985);border-bottom:1px solid var(--gold-lo);z-index:-1}
:root .top.mnav-open .nav{z-index:0;box-shadow:none;border-bottom:0}
:root .who{font-size:14px}
:root .who img{width:32px;height:32px}
:root .authslot .btn.sm{height:40px;padding:0 14px;font-size:11px}
:root .authslot .out{min-height:40px;padding:0 4px}
:root .tol-demo{position:static;max-width:none;margin:0;border-width:0 0 1px;font-size:12px;padding:8px var(--pad)}

/* ---- shared bits ---- */
:root .tri3>*,:root .dbody>*,:root .pgrid>*,:root .comments>*,:root .band>*,:root .dband>*,:root .heroes>*,:root .rules>*{min-width:0}
:root .btn{min-height:40px}
:root .btn.sm{height:auto;min-height:40px;font-size:11px}
:root .footer{flex-wrap:wrap;gap:8px 18px;padding:18px var(--pad)}
:root .toasts{left:12px;right:12px;transform:none;bottom:calc(18px + env(safe-area-inset-bottom))}
:root .toast{max-width:none;flex-wrap:wrap}

/* ---- modals: full screen on small screens ---- */
:root .modal{align-items:stretch}
:root .modal-card{width:100%;max-width:100%;grid-template-columns:1fr;max-height:100dvh;overflow-y:auto;border-width:0}
:root .modal-card.si{width:100%;grid-template-columns:1fr}
:root .modal-card.si .modal-art{min-height:150px}
:root .si-gets li{grid-template-columns:minmax(0,1fr);gap:2px;font-size:14px}
:root .modal-card.si{max-height:100dvh}
:root .si-body{padding:22px var(--pad) calc(26px + env(safe-area-inset-bottom))}
:root .si-body h2{font-size:30px;padding-right:44px}
:root .si-tabs>button{height:44px}
:root .si-pw.two{grid-template-columns:minmax(0,1fr)}
:root .si-form .inp{height:46px}
:root .si-form .inp input{font-size:16px}
:root .si-eye{height:40px;min-width:56px}
:root .si-submit{flex:1 1 100%;height:46px}
:root .si-forgot{min-height:40px}
:root .si-avs{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
:root .priv h1{font-size:40px}
:root .priv-list li{grid-template-columns:minmax(0,1fr);gap:6px 12px}
:root .priv-list li p,:root .priv-list li p+p{grid-column:1}
:root .modal-x{width:44px;height:44px;right:8px;top:8px;font-size:24px;z-index:2;display:flex;align-items:center;justify-content:center;color:var(--text);background:rgba(var(--night-rgb),.85);border:1px solid var(--line-2)}
:root .cmodal .cm{width:100%;max-height:100dvh;height:100dvh;padding:18px var(--pad) calc(22px + env(safe-area-inset-bottom));border-width:0}
:root .cmodal .ci{grid-template-columns:1fr;gap:16px}
:root .cmodal .ci-img{max-width:min(300px,72vw);margin:0 auto}
:root .cmodal .ci-name{font-size:32px;padding-right:44px}
:root .ci-text{font-size:16px}

/* ======================= builder ======================= */
:root[data-dummy],:root body[data-page=builder]{height:auto;overflow:visible}
:root:has(body[data-page=builder]){height:auto;overflow:visible}
:root .bld{display:block;height:auto}
:root .bld .col{overflow:visible;border:0;min-height:0}
:root .bld .col:first-child{overflow:visible;padding:14px var(--pad) 18px;border-bottom:1px solid var(--line)}
:root .bld .hero-sel{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:0 14px;align-items:start}
:root .bld .hero-sel>.hr{grid-column:1/-1}
:root .bld .hero-big{grid-row:2/span 1;margin-top:12px}
:root .bld .hero-big .cap{padding:30px 10px 8px}
:root .bld .hero-big .cap h2{font-size:24px}
:root .bld .power{grid-column:2;grid-row:2;margin-top:12px}
:root .bld .hpl,:root .bld .hpick{grid-column:1/-1}
:root .bld .hpick{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
:root .bld .hpick img{min-height:44px}
:root .bld .col>.grid-wrap{overflow:visible;flex:none;padding:14px var(--pad) 110px}
:root .bld .filters{position:sticky;top:56px;z-index:12;padding:10px var(--pad);background:rgba(var(--night-rgb),.97)}
:root .bld .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
:root .bld .ct .add{width:40px;height:40px;font-size:22px;opacity:1;transform:none}
:root .bld .ct .ft{font-size:12px}
/* deck: bottom sheet behind a sticky bar */
:root .dk-bar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(58px + env(safe-area-inset-bottom));padding:0 var(--pad) env(safe-area-inset-bottom);background:rgba(var(--night-rgb),.97);border-top:1px solid var(--gold-lo);box-shadow:0 -14px 30px rgba(0,0,0,.55);color:var(--text);text-align:left}
:root .dk-bar .l{font:500 11px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
:root .dk-bar b{font:600 22px var(--f-mono);color:var(--text)}
:root .dk-bar .m{font:500 12px var(--f-mono);color:var(--muted)}
:root .dk-bar .go{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#140f04;background:var(--gold);border:1px solid var(--gold-hi);padding:0 14px;height:40px;display:flex;align-items:center}
:root .bld .col.dk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;height:min(88dvh,760px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:var(--night-2);border-top:1px solid var(--gold);box-shadow:0 -30px 60px rgba(0,0,0,.6);transform:translateY(101%);visibility:hidden;transition:transform .22s ease-out,visibility 0s .22s}
:root body.dk-open .bld .col.dk-sheet{transform:none;visibility:visible;transition:transform .22s ease-out}
:root .dk-back{display:block;position:fixed;inset:0;z-index:35;background:rgba(var(--veil-rgb),.7);opacity:0;pointer-events:none;transition:opacity .2s}
:root body.dk-open .dk-back{opacity:1;pointer-events:auto}
:root body.dk-open .dk-bar{visibility:hidden}
:root .dk-x{display:flex;flex:none;align-items:center;justify-content:center;position:sticky;top:8px;z-index:3;align-self:flex-end;margin:8px 10px -48px 0;height:40px;padding:0 14px;box-shadow:0 6px 18px rgba(0,0,0,.5);font:600 11px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--line-2);background:var(--night)}
:root .bld .col.dk-sheet>*{flex:none}
:root .bld .col.dk-sheet>.dk-list{max-height:none;overflow:visible}
:root .bld .dk-sheet .dk-head>.hr{margin-right:112px}
:root .bld .dk-sheet .dk-curve{display:none}
:root .bld .dk-sheet .dk-lean{white-space:normal;font-size:12px}
:root .bld .dk-sheet .dk-foot{padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
:root .bld .dk-sheet .dr{height:46px;font-size:15px}
:root .bld .dk-sheet .imp input{min-height:40px;font-size:14px}
:root .bld .dk-sheet .lock{font-size:13px}

/* filters (builder + cards): search + Filters button, the rest folds away */
:root .ftoggle{display:inline-flex;flex:none}
:root #filters .frow{gap:10px}
:root #filters .pool-search{flex:1 1 160px;max-width:none;height:40px}
:root #filters .pool-search input{font-size:16px}
:root #filters:not(.open) .frow:first-child>.fg,:root #filters:not(.open) .frow+.frow{display:none}
:root #filters.open{max-height:70dvh;overflow-y:auto}
:root #filters .fg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
:root #filters .fg .lab{width:100%;font-size:11px}
:root #filters [role=button]{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}

/* ======================= cards ======================= */
:root .cb .head{flex-wrap:wrap;padding:18px var(--pad) 12px}
:root .cb .head h1{font-size:36px}
:root .cb .filters{position:sticky;top:56px;z-index:12;padding:10px var(--pad);background:rgba(var(--night-rgb),.97)}
:root .cb .gridp .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
:root .cb .ct .ft{font-size:12px}

/* ======================= keywords ======================= */
:root .kwp{padding-left:var(--pad);padding-right:var(--pad)}
:root .kwgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
:root .kwgrid div{font-size:15px}

/* ======================= home ======================= */
:root .band .sky{display:flex;flex-direction:column;gap:18px;padding:18px var(--pad) 28px;min-height:0}
:root .band .dialwrap,:root .band .lede{position:relative;z-index:2;left:auto;right:auto;top:auto;bottom:auto}
:root .band .lede h1{max-width:none}
:root .feat{border-left:0;border-top:1px solid var(--line)}
:root .band{grid-template-columns:1fr;min-height:0}
:root .tri3{grid-template-columns:1fr;gap:28px}
:root .rules{grid-template-columns:1fr}
:root .rules>div{border-right:0;border-bottom:1px solid var(--line)}
:root .rules>div:last-child{border-bottom:0}
:root .heroes{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
:root .heroes .spine{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 0}
:root .strip{grid-template-columns:repeat(5,minmax(0,1fr))}
:root .strip .ct .ft{font-size:11.5px}

/* ======================= deck ======================= */
:root .dband{grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:end}
:root .dband .dcode{grid-column:1/-1}
:root .dbody,:root .comments{grid-template-columns:1fr}
:root .dbody .side{border-left:0;border-top:1px solid var(--line)}
:root .vbar{flex-wrap:wrap;gap:10px}
:root .note-item p{font-size:15px}
:root #dCommentEmpty{flex-wrap:wrap}
:root #dComment{max-width:100%;white-space:normal}
:root .note-form textarea{font-size:16px}

/* ======================= profile ======================= */
:root .pgrid{grid-template-columns:1fr}
:root .pgrid .edit{border-left:0;border-top:1px solid var(--line)}
:root .drow{grid-template-columns:56px minmax(0,1fr) auto;gap:6px 14px}
:root .drow:not([id]) .hp{width:56px;height:70px}
:root .shelf>.hr+.drow{display:none}
:root .pgrid.pl{grid-template-columns:minmax(0,1fr)}
:root .plside{border-top:1px solid var(--line)}
:root .plh{min-height:56px}
:root input:not([type=checkbox]):not([type=radio]),:root textarea,:root select{font-size:16px}
:root .codebox{height:44px}
:root .shelf>div:last-child{flex-wrap:wrap}
:root .pid .m2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px}
:root .pid .m2 span,:root .pid .m2 span:first-child{padding:0 0 0 10px;border-left:1px solid var(--line-2)}
:root .drow>div:nth-child(3),:root .drow>.minis{display:none}
:root .drow>.vis{grid-column:3;grid-row:1}
:root .pgrid .shelf .drow{grid-template-columns:56px minmax(0,1fr) auto}
:root .viscell{align-items:flex-end}
:root .vtog{min-height:40px;display:flex;align-items:center;border-bottom:0;text-decoration:underline;text-underline-offset:3px}
:root .visseg button{height:44px}
:root .dvis .btn{min-height:44px}
:root .dtitle{display:block}
:root .dvis{margin:-4px 0 12px}
:root .drow>.mono{grid-column:2;grid-row:2;font-size:12px}
:root .drow .acts2{flex-wrap:wrap;gap:8px}
:root .avgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
:root .inp input,:root .imp input{font-size:16px;min-height:40px;min-width:0}
:root .imp{grid-template-columns:minmax(0,1fr) auto auto}
:root #pImport{flex-wrap:wrap}
:root #pImport input{flex:1 1 180px;min-width:0}
:root .pid{flex-wrap:wrap}
:root .pid .grow{flex-basis:100%;height:0}
}

/* ======================= phone (≤600 px) ======================= */
@media (max-width:600px){
:root{--pad:14px}
:root .top .mark .wm{font-size:18px}
:root .top .mark svg{width:30px;height:30px}
:root .who{gap:7px;max-width:42vw;overflow:hidden}
:root .who span,:root .who{text-overflow:ellipsis;white-space:nowrap}
:root .authslot .out{display:none}
:root .top.mnav-open .nav::after{content:"";display:block}

/* builder */
:root .bld .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
:root .bld .col.dk-sheet{height:88dvh}
:root .bld .hero-sel{grid-template-columns:42% minmax(0,1fr)}
:root .bld .power{font-size:14px}

/* cards */
:root .cb .gridp .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
:root .cb .head h1{font-size:32px}

/* keywords */
:root .kwgrid{grid-template-columns:1fr}

/* home */
:root .lede h1{font-size:40px}
:root .lede p{font-size:16px}
:root .lede .row{flex-wrap:wrap;gap:10px}
:root .codebox{min-width:0;width:100%}
:root .heroes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:root .heroes .spine{flex-direction:row;gap:16px;padding:14px 0}
:root .hc .p{aspect-ratio:3/3.2}
:root .hc h4{font-size:20px}
:root .hc .pt{font-size:14px}
:root .hc .fac{font-size:10px}
:root .strip{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:38%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px}
:root .strip>*{scroll-snap-align:start}
:root .feat .rows{columns:1}
:root .feat .rows .dr{height:40px}
:root .feat .rows .dr .nm{font-size:15px}
:root .kw{grid-template-columns:1fr}
:root .rar{flex-wrap:wrap}
:root .hr{flex-wrap:wrap;row-gap:6px}
:root .hr .aside{order:4;flex-basis:100%;padding-left:32px;line-height:1.45}
:root .rar div{flex:1 1 30%;min-width:0;border-bottom:1px solid var(--line-3)}
:root .rar span{font-size:11px;letter-spacing:.06em}
:root .feat .fh{grid-template-columns:64px 1fr}

/* deck */
:root .dband{grid-template-columns:1fr;gap:14px}
:root .dband .por{width:132px;height:172px}
:root .leanrow{grid-template-columns:1fr;justify-items:center;text-align:center}
:root .kv{grid-template-columns:repeat(2,1fr);gap:10px 0}
:root .dcode .g2{grid-template-columns:1fr}

/* profile */
:root .pid{flex-wrap:wrap;gap:14px}
:root .pid .av{width:112px;height:112px}
:root .pid h1{font-size:40px}
:root .avgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
:root .crop{grid-template-columns:96px 1fr}
:root .crop .pv{width:96px;height:96px}
}

/* ---- profile danger zone + Delete account dialog (phones) ---- */
@media (max-width:640px){
:root .danger{margin:26px var(--pad) 0}
:root .danger-in{flex-direction:column;align-items:stretch;padding:18px 16px}
:root .danger-in .btn{width:100%;height:46px}
:root .modal-card.del{width:100%;max-height:100dvh;padding:22px var(--pad) calc(26px + env(safe-area-inset-bottom));border-width:0}
:root .modal-card.del h2{font-size:26px}
:root .del-row{flex-direction:column-reverse}
:root .del-row .btn{width:100%;height:46px}
:root .tol-deleted{top:64px;width:calc(100vw - 28px)}
}

/* ---- decks feed, home popular strip, deck likes + Share image (phones / tablets) ---- */
@media (max-width:1023px){
}
@media (max-width:640px){
:root .dfeed h1{font-size:40px}
:root .fc-top{grid-template-columns:60px minmax(0,1fr);gap:12px;padding:14px 14px 10px}
:root .fc-hero{width:60px;height:80px}
:root .fc-name{font-size:20px}
:root .fc-stats{white-space:normal}
:root .fc-cards{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 14px 12px}
:root .fc-cards .fc-t:nth-child(n+6),:root .fc-cards .fc-more{display:none}
:root .fc-foot{padding:10px 14px}
:root .kudos{height:44px}
:root .dreact{flex-wrap:wrap}
:root .modal-card.dcimg{width:100%;max-height:100dvh;padding:20px var(--pad) calc(24px + env(safe-area-inset-bottom));border-width:0}
:root .dc-row .btn{flex:1 1 140px;height:46px}
:root .band .lede .row .btn{flex:1 1 140px;height:46px}
}