/* Interaction polish: accessible cards, meaningful filters and clear states. */
/* The card itself is the detail view; other confirmation dialogs keep their panel. */
dialog:has(>.card){--detail-width:min(380px,calc((100dvh - 48px)*5/7),calc(100vw - 32px));--detail-art-height:calc(var(--detail-width)*.63);background:transparent;border:0;box-shadow:none;padding:0;border-radius:17px;width:var(--detail-width);max-width:calc(100vw - 32px);overflow:hidden}
dialog:has(>.card)>.card{width:100%;height:calc(var(--detail-width)*1.4);margin:0;opacity:1;filter:none;transform:none;transition:none}
dialog:has(>.card)>.card:hover{transform:none;opacity:1;box-shadow:0 0 20px color-mix(in srgb,var(--tone) 12%,transparent)}
dialog:has(>.card) .card-main{display:grid;grid-template-rows:45% minmax(0,1fr);height:100%;flex:none}
dialog:has(>.card) .card-main .card-art{height:100%;min-height:0}
dialog:has(>.card) .card-art img,dialog:has(>.card) .card:hover .card-art img{transform:none;transition:none}
dialog:has(>.card) .card-main .card-body{min-height:0;padding:20px;overflow:hidden}
dialog:has(>.card) .word{flex-shrink:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
dialog:has(>.card) .card-main .translations{display:block;min-height:0;overflow:auto;flex:1;margin-bottom:14px;overscroll-behavior:contain}
dialog:has(>.card) .card-foot{flex-shrink:0;margin-top:auto}
.card-preview-close{position:absolute!important;width:1px;height:1px;padding:0!important;overflow:hidden;clip-path:inset(50%)}
.card-preview-close:focus-visible{clip-path:none;width:32px;height:32px;top:8px;right:8px;background:#14221b;color:white;border-radius:50%;outline-offset:0}
.photo-credit{position:absolute;top:calc(var(--detail-art-height) - 38px);right:10px;z-index:3;color:#f0f5f2;text-align:left}
.photo-credit summary{display:grid;place-items:center;width:28px;height:28px;cursor:pointer;list-style:none;background:#0b130fd9;border-radius:50%;font-weight:600}
.photo-credit summary::-webkit-details-marker{display:none}
.photo-credit>div{position:absolute;bottom:36px;right:0;width:250px;max-width:calc(100vw - 64px);padding:12px;background:#102018f5;border-radius:10px;overflow-wrap:anywhere;box-shadow:0 4px 16px #0006}
@media(max-width:720px){dialog:has(>.card) .card-main .card-body{padding:16px}}
button,input,select{touch-action:manipulation}
#open-pack,[data-open-pack]{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.main h1:focus{outline:none}
.sidebar>.brand{gap:0;white-space:nowrap}.sidebar>.brand span{margin:0}
.mini-profile{width:100%;background:none;color:var(--text);text-align:left;border-radius:0;padding-bottom:0}
.mini-profile:hover strong{color:var(--mint)}
.card{cursor:default}.card-main{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;background:none;color:inherit;padding:0;border-radius:inherit;overflow:hidden;flex:1}
.card-main:disabled{opacity:1;cursor:default}.card-main:focus-visible{outline-offset:-3px;outline-color:var(--dark)}
.card-main .card-art,.card-main .card-body{width:100%}
.card .star{min-width:36px;min-height:36px;transition:background .2s,color .2s}
.card .star:hover{background:#172b2a55}.card .star:focus-visible{outline-color:#fff8bc;outline-offset:1px}
.ownership-label{position:absolute;right:9px;bottom:9px;background:#10281cc7;color:#eff9f1;border-radius:5px;padding:5px 7px;letter-spacing:.1px}
.card.unowned{opacity:.78;filter:saturate(.65)}
.search{min-width:180px}.search input{padding-right:43px}.clear-search{position:absolute;right:10px;top:10px;width:32px;height:32px;display:grid;place-items:center;color:var(--muted);background:none;border-radius:6px}.clear-search[hidden]{display:none}.clear-search:hover{background:#2c3c31;color:white}.clear-search svg{position:static;width:16px;height:16px;color:inherit}
.filters{align-items:stretch;flex-wrap:wrap}.filters select{max-width:210px}.favorites-filter{display:flex;gap:8px;align-items:center;white-space:nowrap}.favorites-filter.selected{background:#203c2d;color:var(--mint);border-color:#3c7855}.favorites-filter.selected svg{fill:var(--mint)}
.rarities{gap:12px;align-items:center}.rarities button{padding:9px 6px;border-bottom-width:2px;min-height:38px}.rarities button span{opacity:1;margin-left:4px}.rarities button.selected span{opacity:1}
.results-line{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin:-8px 0 18px;color:var(--muted);}.results-line .text-button{padding:5px 0}
.pagination{margin-top:32px;}.pagination .secondary{}
.nav-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--mint);color:#102b1c;font-weight:700;border-radius:10px;margin-left:auto}
.nav button.active:has(.nav-count):after{display:none}
.panel{max-width:100%;border-color:#26362b;background:linear-gradient(135deg,#141d17,#111913)}
.panel h2{font-weight:600;letter-spacing:-.3px}
.field-label{display:block;color:#9eafa4;margin-bottom:9px}.help{line-height:1.75}.form-row .primary{flex-shrink:0}.form-row input{width:100%}
.count-badge{display:inline-grid;place-items:center;background:#263c2e;color:#bddcc9;font-family:'DM Sans',sans-serif;border-radius:20px;min-width:23px;height:23px;margin-left:7px}
.row-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.compact{padding:10px 13px;border-radius:8px}.icon-button{display:grid;place-items:center;width:34px;height:34px;background:none;color:var(--muted);border-radius:8px}.icon-button svg{width:17px;height:17px}.icon-button:hover{background:#334639;color:#fff}
.row .grow{min-width:0}.row .grow>strong{overflow-wrap:anywhere}.row small{}.row .avatar{flex-shrink:0}
.trade-selectors{display:grid;grid-template-columns:1fr 1fr;gap:18px}.trade-form .primary{justify-self:start}.trade-preview{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.trade-preview:empty{display:none}.trade-preview-card{width:185px;text-align:center}.trade-preview-card .card{width:100%}.trade-preview-card .card-art{height:120px}.trade-preview-card .card-body{min-height:122px}.trade-preview-card small{display:block;color:var(--muted);margin-top:10px}.trade-direction{color:var(--mint)}
.inline-empty{padding:18px;background:#1a251d;border-radius:10px;color:#bdcfc2;}.inline-empty p{color:var(--muted);margin-bottom:0}.inline-empty .text-button{padding-left:0;}
.word-link{padding:0;background:none;font-family:Outfit,sans-serif;color:#d6eee0;font-weight:600;text-align:left}.word-link:hover{text-decoration:underline;color:var(--mint)}.trade-pair{gap:12px}.trade-pair svg{width:19px}.trade-row{align-items:center}
.about-panel>summary{cursor:pointer;color:#b9d0c1;font-weight:500}.about-panel[open]>summary{margin-bottom:20px}.about-panel>.row:first-of-type{margin-top:15px}
.progress-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.progress-title h2{margin:0}.progress-title>strong{font-family:Outfit,sans-serif;color:var(--mint)}
.rarity-stats{display:grid;gap:12px;margin-top:23px}.rarity-stats>div{display:flex;gap:10px;align-items:center;}.rarity-stats i{width:7px;height:7px;border-radius:50%}.rarity-stats span{flex:1;color:#b5c8bc}.rarity-stats small{color:var(--muted);min-width:45px}.rarity-stats b{font-weight:500}
.dialog-meta{margin-top:16px}.owned-status{display:flex;align-items:center;gap:7px;}.owned-status svg{width:15px;height:15px;color:var(--mint)}.dialog-actions,.summary-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.dialog-actions{justify-content:flex-end;margin-top:25px}.dialog-meta p{}
dialog .card-main .translations{display:block;overflow:visible}dialog .card-main .card-body{min-height:170px}dialog .card-main .card-art{height:210px}
dialog{max-height:calc(100dvh - 36px);overflow:auto}.dialog-close{position:relative;z-index:4}
.empty{padding:56px 22px}.empty h2{font-weight:500}.empty p{}.page-heading p{line-height:1.5}
.summary .summary-actions{margin-top:25px}.summary .summary-actions button{}.summary .eyebrow{margin-top:24px}.summary>h1{}.reverse{display:flex;transform:rotate(180deg)}
@media(min-width:1200px){.panel{max-width:850px}.profile-page{max-width:900px}.stat-grid{max-width:850px}.trade-preview{justify-content:flex-start;padding:5px 0}}
@media(max-width:720px){.nav button{position:relative}.nav-count{position:absolute;top:5px;left:calc(50% + 5px);min-width:15px;height:15px;padding:0 4px;}.sidebar{height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}#toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 28px);padding:12px 17px}.card .star{min-height:36px;min-width:36px}.filters select{max-width:none;min-height:46px}.favorites-filter{justify-content:center}.rarities{gap:4px;flex-wrap:wrap;margin-bottom:18px}.rarities button{padding:9px 5px;min-height:36px}.rarities button span{margin-left:2px}.results-line{margin-top:0}.results-line .text-button{}.row{flex-wrap:wrap;row-gap:12px}.row-actions{margin-left:auto}.trade-row .row-actions{width:100%;justify-content:flex-end}.trade-selectors{grid-template-columns:1fr;gap:15px}.trade-preview{gap:12px;flex-wrap:nowrap}.trade-preview-card{width:calc((100% - 48px)/2)}.trade-preview-card .word{}.trade-preview-card .card-art{height:95px}.trade-preview-card .card-body{padding:12px 10px;min-height:123px}.trade-preview-card .translations{}.trade-preview-card .card-foot{letter-spacing:0}.trade-preview-card .star{display:none}.trade-preview-card small{}.trade-direction svg{width:20px}.trade-form .primary{justify-self:stretch}.summary>h1{}.summary-actions{display:grid}.panel{padding:20px}.stat-grid{margin-bottom:20px}.page-heading{gap:10px}.page-heading p{}.page-heading .pill{white-space:nowrap}.ownership-label{padding:4px 5px}dialog{padding:20px;width:350px}dialog .card-main .card-art{height:180px}}

/* Readable type and room for labels on every screen size. */
:root{--muted:#b3c0b7}
body{line-height:1.6}
input,select{}
button{line-height:1.4}
.topbar{height:auto;min-height:42px;gap:16px;flex-wrap:wrap}
.topbar .pill{min-height:44px}
.translations,.reveal .translations{line-height:1.55}
.card-foot,.reveal .card-foot,.trade-preview-card .card-foot{letter-spacing:0;gap:8px;flex-wrap:wrap}
.card-foot>span:first-child{flex:1;min-width:0}
.card-foot .gem{flex-shrink:0}
.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card-body{min-height:175px}
.timer{color:var(--muted)}
.intro p,.page-heading p,.login-form>p{}
.mini-profile small,.subtle-button{}
.rarity-stats>div,.rarities button,.results-line,.help,.field-label{}
.nav-count,.count-badge{min-width:28px;height:28px;padding:0 6px}
.trade-preview-card{width:240px;max-width:100%}
.trade-preview-card .translations{}
.trade-preview-card .card-body{min-height:175px}
.page-heading{flex-wrap:wrap}
@media(max-width:720px){
 .sidebar{height:calc(88px + env(safe-area-inset-bottom))}
 .nav{justify-content:flex-start;overflow-x:auto}
 .nav button{flex:1 0 86px;padding:12px 6px}
 .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 .topbar{min-height:32px;height:auto}
 .topbar .pill{margin-left:auto}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card-body{min-height:175px}
 .trade-preview{flex-wrap:wrap}
 .trade-preview-card{width:min(240px,100%)}
 .stat-grid{grid-template-columns:1fr}
 .stat{padding:18px}
 #toast{bottom:calc(104px + env(safe-area-inset-bottom))}
}
@media(max-width:520px){
 .grid{grid-template-columns:1fr}
 .grid .card-art{height:190px}
 .page-heading .pill{white-space:normal}
 .pagination{gap:10px;flex-wrap:wrap}
}

/* Primary controls should be as legible as the surrounding body text. */
.filters input,.filters select,.favorites-filter,.rarities button,.rarities button span{}
.rarities button{min-height:48px;padding:10px 8px;line-height:1.5;color:#bdcbc2}
.rarities button.selected{color:var(--text)}
.rarities button span{color:inherit}
.rarity-stats>div,.rarity-stats small{}
.results-line,.results-line .text-button,.pagination,.pagination .secondary{}
.field-label,.login-form label,.trade-form label,.help,.owned-status,.dialog-meta,.dialog-meta p,.row small{}
.intro p,.page-heading p,.login-form>p,.empty p,.inline-empty,.inline-empty p{}
.primary,.secondary,.compact,.text-button,.about-panel>summary{}
.panel h2{line-height:1.3}
.grid .word,.trade-preview-card .word{line-height:1.2}
.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.grid .card-art{height:125px}
.grid .card-body{min-height:145px;padding:13px}
.grid .translations,.trade-preview-card .translations{line-height:1.5;margin-bottom:12px}
.grid .card-foot,.trade-preview-card .card-foot{gap:6px}
.card-foot{line-height:1.5}
.filters .search{flex:1 1 280px}
.filters select{max-width:100%;flex:0 1 240px}
.form-row,.row-actions{flex-wrap:wrap}
.form-row input{flex:1 1 240px}
.trade-preview-card{width:240px}
.nav button{}
.progress-title{gap:16px;flex-wrap:wrap}
@media(max-width:720px){
 .nav button{flex-basis:100px}
 .filters .search{flex-basis:100%}
 .filters select{flex:1 1 220px}
 .favorites-filter{min-height:48px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rarities{gap:6px 10px}
 .trade-preview-card{width:min(240px,100%)}
 dialog{width:calc(100vw - 32px);padding:20px}
 .row-actions{max-width:100%}
}
@media(max-width:620px){.grid{grid-template-columns:minmax(0,280px);justify-content:center}.grid .card-art{height:125px}}

/* Compact collection overview leaves more room for the card grid. */
.collection-progress{max-width:none;padding:14px 18px;margin-bottom:16px}
.collection-progress .progress-title{margin-bottom:8px}
.collection-progress .progress-title h2{}
.collection-progress .progress-title strong{}
.collection-progress .rarity-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:10px}
.collection-progress .rarity-stats>div{flex-wrap:wrap;gap:3px 6px;}
.collection-progress .rarity-stats span{flex:1;min-width:calc(100% - 16px)}
.collection-progress .rarity-stats b{margin-left:13px;}
.collection-progress .rarity-stats small{min-width:0}
.page-heading:has(+.collection-progress) p{margin-bottom:14px;}
.filters input,.filters select,.favorites-filter,.rarities button,.rarities button span{}
.rarities{margin-bottom:16px}
.rarities button{min-height:42px;padding:8px 6px}
@media(min-width:1600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:900px){.collection-progress .rarity-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
 .collection-progress .rarity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .grid .card-art{height:110px}
 .grid .card-body{padding:10px;min-height:155px}
 .grid .word{}
 .grid .translations{}
 .grid .card-foot{}
 .grid .card-foot>span:first-child{flex-basis:100%}
}
@media(max-width:350px){.grid{grid-template-columns:1fr}}

.collection-heading{margin-top:0;margin-bottom:14px}
.collection-heading p{display:none}
.collection-heading h1{margin-bottom:0}
.profile-account-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.danger-button{background:#3a2024;border:1px solid #784049;color:#ffc1c8;border-radius:12px;padding:14px 20px;min-height:48px}
.danger-button:hover:not(:disabled){background:#51282e;border-color:#bd6472}
#delete-account-form input{width:100%;margin-top:10px;letter-spacing:.25em}
#delete-account-form .dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
#delete-status:empty{display:none}

/* Landing page: one compact composition, with the sign-in form in focus. */
.login{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:48px 40px;background:radial-gradient(ellipse at 20% 50%,#1b39262b,transparent 60%)}
.login-brand{width:100%;max-width:1080px;margin:0 auto 32px;gap:12px}
.login-brand .brand-mark{width:36px;height:40px;border-radius:10px}
.login-panel{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1080px;min-height:530px;margin:0 auto;border:0;border-radius:0;background:none;box-shadow:none}
.login-art{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:radial-gradient(ellipse at 50% 55%,#2a584242,transparent 72%);border:0;overflow:hidden}
.login-cards{position:relative;width:370px;height:400px;transform:none;margin:0;flex-shrink:0}
.login-cards .card{width:220px;top:24px;box-shadow:0 16px 35px #0005}
.login-cards .card-main:disabled{opacity:1;cursor:default}
.login-cards .card:nth-child(1){left:0;top:64px;transform:rotate(-15deg)}
.login-cards .card:nth-child(2){right:0;top:64px;transform:rotate(15deg)}
.login-cards .card:nth-child(3){left:75px;top:24px;transform:rotate(-2deg)}
.login-cards .card-art{height:160px}
.login-cards .card-body{min-height:165px;padding:18px 16px 14px}
.login-cards .word{}
.login-cards .translations{}
.login-cards .card-foot{gap:8px;letter-spacing:.3px}
.login-form{padding:56px 48px;max-width:none;margin:0;min-height:0;justify-content:center}
.login-form:before{content:none}
.login-form h1{line-height:1.12;letter-spacing:-1px;margin:0 0 36px;max-width:350px}
.login-form label{margin-bottom:10px;color:#c9d5cd}
.login-form input{min-height:58px;border-radius:12px;padding:16px;margin-bottom:16px;background:#18231c}
.login-form input:focus{border-color:var(--mint);outline:2px solid #45cea02e;outline-offset:3px}
.login-form .primary{min-height:58px;border-radius:12px;padding:16px;}
.login-form>p.help{line-height:1.6;margin:16px 0 0;overflow-wrap:anywhere}
.login-form #login-status:empty{display:none}
.login-form h1+p.help{margin:0 0 24px}
.login-form .text-button{min-height:44px;margin-top:8px}
.login-form #login-code{letter-spacing:.3em}
@media(max-width:900px){.login{padding:32px 24px}.login-panel{grid-template-columns:1fr 1fr;min-height:470px}.login-form{padding:36px 28px}.login-form h1{}.login-cards{transform:scale(.85)}}
@media(max-width:720px){.login{padding:32px 20px;justify-content:center}.login-brand{max-width:440px;margin-bottom:48px;}.login-panel{display:block;max-width:440px;min-height:0;border-radius:0}.login-art{display:none}.login-form{padding:0;min-height:0;max-width:none}.login-form h1{margin-bottom:30px}.login-form:before{content:none}}

/* A moving sample of the actual catalogue, with short cues about play. */
.login{padding:48px 40px;gap:0}
.login-brand{max-width:1180px;margin-bottom:44px}
.login-panel{max-width:1180px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:52px;min-height:400px;align-items:center}
.login-form{padding:24px 0 24px 24px}
.login-form h1{max-width:400px;}
.login-preview{min-width:0}
.preview-window{overflow:hidden;padding:24px 0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.preview-track{display:flex;width:max-content;animation:preview-drift 150s linear infinite;will-change:transform}
.preview-group{display:flex;gap:18px;padding-right:18px}
.preview-group .card{position:relative;width:196px;flex:0 0 196px;box-shadow:0 8px 20px #0004}
.preview-group .card-main:disabled{opacity:1;cursor:default}
.preview-group .card-art{height:142px}
.preview-group .card-body{padding:16px 14px 12px;min-height:150px}
.preview-group .word{line-height:1.2}
.preview-group .translations{line-height:1.45}
.preview-group .card-foot{letter-spacing:.2px;gap:6px}
.preview-group .badge{}
.login-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;width:100%;max-width:1180px;margin:48px auto 0;padding-top:28px;border-top:1px solid #27382c}
.login-steps>div{display:flex;align-items:flex-start;gap:14px}
.login-steps svg{color:var(--mint);width:26px;height:26px;margin-top:4px;flex-shrink:0}
.login-steps p{margin:0;line-height:1.5}
.login-steps strong{display:block;font-weight:500;color:#dce9e1}
.login-steps span{display:block;margin-top:4px;color:#94a69a}
@keyframes preview-drift{to{transform:translateX(-50%)}}
@media(max-width:1050px){.login-panel{gap:28px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.login-form{padding-left:0}.login-form h1{}.login-steps{gap:20px}.login-steps>div{gap:10px}}
@media(max-width:720px){.login{padding:28px 20px;justify-content:flex-start}.login-brand{max-width:440px;margin-bottom:28px}.login-panel{display:flex;flex-direction:column;gap:28px;max-width:440px}.login-preview{width:100%;order:2}.login-form{width:100%;padding:0;order:1}.login-form h1{margin-bottom:24px}.preview-window{padding:16px 0}.preview-group .card{width:170px;flex-basis:170px}.preview-group .card-art{height:112px}.preview-group .card-body{min-height:132px;padding:12px}.preview-group .word{}.preview-group .translations{}.preview-caption{padding:0}.login-steps{max-width:440px;grid-template-columns:1fr;gap:20px;margin-top:28px;padding-top:24px}.login-steps span{margin-top:0}.login-steps strong{}}
@media(prefers-reduced-motion:reduce){.preview-track{animation:none;transform:none;will-change:auto}.preview-pause{display:none}}
@media(min-width:1100px){
 .main:has(.collection-heading){position:relative}
 .main:has(.collection-heading) .topbar{position:absolute;top:20px;right:50px;min-height:0}
 .collection-heading{min-height:48px}
 .collection-heading>.pill{display:inline-flex}
 .collection-progress .rarity-stats>div{flex-wrap:nowrap}
 .collection-progress .rarity-stats span{flex:0 1 auto;min-width:0}
 .collection-progress .rarity-stats b{margin-left:auto}
 .collection-progress .rarity-stats small{white-space:nowrap}
}

/* Stable sign-in steps and pack reveals, with browser-standard body text. */
.nav button{}
.page-heading h1{}
.intro h1{}
.reveal .counter{}
.reveal .counter b{}
.reveal .word{}
.login-form{display:grid;grid-template-rows:5.125rem 19.375rem 3.25rem;gap:1rem;height:29.75rem;min-height:29.75rem;padding:0 0 0 24px;align-content:start}
.login-form h1{margin:0;align-self:center}
.login-fields{display:flex;flex-direction:column;min-width:0}
.login-fields .login-recipient{height:3.25rem;min-height:3.25rem;overflow:auto;margin:0 0 8px;line-height:1.5;overflow-wrap:anywhere}
.login-form label{line-height:1.5;margin-bottom:8px}
.login-form input{height:3.25rem;min-height:3.25rem;flex-shrink:0;padding:12px 14px;margin-bottom:12px}
.login-form .primary{height:3.25rem;min-height:3.25rem;padding:12px;flex-shrink:0}
.login-code-actions{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px}
.login-code-actions .text-button{margin:0;padding:8px 0;min-height:2.5rem;line-height:1.5;text-align:left}
.login-form #login-status,.login-form #login-status:empty{display:block;height:3.25rem;overflow:auto;margin:0;line-height:1.5}
.login-brand{margin-bottom:24px}
.login-steps{margin-top:28px}
.reveal .card{height:460px;width:330px;max-width:100%;flex-shrink:0;animation:reveal-fade .3s ease}
.reveal .card,.reveal .card:hover{transform:none;transition:none;box-shadow:0 0 22px color-mix(in srgb,var(--tone) 26%,transparent)}
.reveal .card-art img,.reveal .card:hover .card-art img{transform:none;transition:none}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}
.reveal .card-main{height:100%;flex:none}
.reveal .card-art{height:210px;flex:0 0 210px}
.reveal .card-body{height:250px;min-height:0;flex:1;overflow:hidden}
.reveal .word{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;flex-shrink:0}
.reveal .translations{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;flex-shrink:0;}
.reveal .card-foot{margin-top:auto;flex-shrink:0}
.reveal .reveal-continue{min-height:48px}
.reveal .reveal-continue:disabled{visibility:hidden;pointer-events:none}
@media(min-width:721px) and (max-height:850px){
 .login{padding-top:24px;padding-bottom:24px}
 .reveal .card{width:285px;height:405px}
 .reveal .card-art{height:185px;flex-basis:185px}
 .reveal .card-body{height:220px;padding:18px}
}
@media(max-width:1050px){.login-form{padding-left:0}.login-form h1{}}
@media(max-width:720px){
 .nav button{flex-basis:86px}
 .login-form h1{margin:0}
 .intro h1{}
 .page-heading h1{}
 .reveal .card{width:min(310px,100%);height:435px}
 .reveal .card-art{height:200px;flex-basis:200px}
 .reveal .card-body{height:235px;padding:18px}
}

.mobile-menu-toggle,.mobile-menu-backdrop{display:none}
/* Mobile navigation opens from the button in the fixed top header. */
@media(max-width:720px){
 .sidebar{display:none;inset:calc(72px + env(safe-area-inset-top)) 12px auto auto;width:min(320px,calc(100vw - 24px));height:auto;max-height:calc(100dvh - 88px - env(safe-area-inset-top));overflow-y:auto;padding:10px;border:1px solid var(--border);border-radius:16px;background:#111713;box-shadow:0 12px 32px #0008;z-index:31}
 .layout.menu-open .sidebar{display:block}
 .sidebar .nav{display:flex;flex-direction:column;height:auto;gap:4px;margin:0;overflow:visible}
 .sidebar .nav button{flex:none;flex-direction:row;min-width:0;min-height:48px;padding:12px;gap:12px;justify-content:flex-start;line-height:1.5;border-radius:10px}
 .sidebar .nav button.active{background:#192d24}
 .sidebar .nav-count{position:static;min-width:22px;height:22px;margin-left:auto;padding:0 5px}
 .main{padding-top:calc(88px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .main .topbar,.main:has(.reveal) .topbar{display:flex;position:fixed;inset:0 0 auto 0;height:calc(64px + env(safe-area-inset-top));min-height:64px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;margin:0;justify-content:space-between;flex-wrap:nowrap;background:#0b0e0cf5;border-bottom:1px solid var(--border);z-index:32}
 .mobile-menu-toggle{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:10px;background:#19251e;color:var(--text)}
 .mobile-menu-toggle svg{width:24px;height:24px}
 .layout.menu-open .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:#0008;z-index:30;padding:0;cursor:default}
 #toast{bottom:calc(20px + env(safe-area-inset-bottom))}
 .card .star,.icon-button{min-width:44px;min-height:44px}
 .compact,.text-button,.rarities button,.pagination button{min-height:44px}
 .profile-account-actions{display:grid;grid-template-columns:1fr}
 .profile-account-actions button{width:100%}
 .help,.row .grow{overflow-wrap:anywhere}
 .main:has(.reveal){padding-top:calc(80px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .reveal .counter{margin:0 0 10px}
 .reveal .card{--mobile-card-height:clamp(240px,calc(100dvh - 256px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),435px);height:var(--mobile-card-height);width:min(310px,calc(var(--mobile-card-height)*5/7),100%)}
 .reveal .card-main{display:grid;grid-template-rows:45% minmax(0,1fr)}
 .reveal .card-main .card-art{height:100%;min-height:0}
 .reveal .card-main .card-body{height:auto;min-height:0;padding:12px}
 .reveal .card-main .translations{min-height:0;flex:1;flex-shrink:1;display:block;overflow:auto;overscroll-behavior:contain;margin-bottom:8px}
 .reveal-nav{margin:10px 0;gap:10px}
 .reveal-nav .round{width:44px;height:44px}
 .reveal-nav .dots{gap:4px}
 .reveal-nav .dots button{width:24px;height:24px;display:grid;place-items:center;background:transparent}
 .reveal-nav .dots button:before{content:'';width:10px;height:10px;border-radius:50%;background:#3a4940}
 .reveal-nav .dots button.active:before{background:var(--mint)}
 .reveal .reveal-continue{padding:12px 24px;min-height:48px}
 .photo-credit summary{width:36px;height:36px}
}
@media(max-width:480px){
 .trade-preview{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .trade-preview-card{width:100%;max-width:240px;margin-inline:auto}
 .trade-direction{justify-self:center;transform:rotate(90deg)}
}
@media(min-width:721px) and (max-height:600px){
 .sidebar{overflow-y:auto;padding-top:20px;padding-bottom:20px}
 .sidebar .nav{margin-top:24px;gap:6px;min-width:0;grid-template-columns:minmax(0,1fr)}
 .sidebar .nav button{min-width:0;padding:12px 10px;gap:10px}
}

/* Fit the booster home to the visible viewport by shrinking the artwork first. */
.layout:has(.packs-view){height:100dvh;min-height:0}
.main:has(>.packs-view){height:100dvh;min-height:0;display:flex;flex-direction:column;padding-top:20px;padding-bottom:20px}
.packs-view{width:100%;min-height:0;flex:1;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px}
.packs-view .intro{padding:0}
.packs-view .intro h1{margin-bottom:4px}
.packs-view .intro p{margin:0;max-width:none}
.packs-view .intro .text-button{min-height:40px;padding:8px 12px}
.packs-view .pack-stage{min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;gap:8px;justify-items:center;padding:0}
.packs-view .pack-aura{display:grid;place-items:center;width:min(350px,100%);height:100%;min-height:0;margin:0;padding:8px}
.packs-view .foil-pack{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:244px;max-height:366px;margin:auto;aspect-ratio:auto}
.packs-view .pack-open{min-height:44px;padding:8px 24px}
.packs-view .stock{margin:0;padding:8px 24px;min-width:194px}
.packs-view .stock small{margin-top:2px}
.packs-view .timer{margin:0;line-height:1.5}
.packs-view #retry-pack{margin:0;padding:6px 12px}
@media(min-width:721px){.main:has(>.packs-view)>.topbar{display:none}}
@media(max-width:720px){
 .main:has(>.packs-view){padding-top:calc(76px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .packs-view .pack-stage{gap:6px}
}
@media(min-width:480px) and (max-height:500px){
 .packs-view{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:16px}
 .packs-view .pack-stage{height:100%}
}