/* menu-home.css — Home (menu.html) on the v2 house style. Loads after ui-v2.css.
One hero action, three doors, a Today strip of at most three real things; the rest lives behind the avatar. */
/* minmax(0, 1fr): without it the one column grows to its widest child's min-content, and a long announcement line
(white-space: nowrap) widened the whole page past the screen (Ray, 2026-09-18, the 50-pack Blitz announcement) */
.home { max-width: 1320px; margin: 0 auto; padding: 4px var(--pad) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.6vh, 32px); }
/* top bar: identity is one button */
.me { display: flex; align-items: center; gap: 10px; padding: 3px 14px 3px 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair) !important;
backdrop-filter: blur(14px); transition: background .2s; }
.me:hover { background: var(--glass-2); }
.me-name { display: grid; text-align: left; line-height: 1.15; }
.me-name b { font-size: 13px; font-weight: 650; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-name small { font-size: 11px; color: var(--muted); }
.v2-avatar img.card { object-position: 50% 26%; transform: scale(1.9); }
/* hero */
/* minmax(0, …) is load-bearing: a plain fr column takes the min-content width of the buttons and the lede, and pushed the phone layout past the screen */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(20px, 4vw, 70px); min-height: min(46vh, 430px); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; min-width: 0; }
.hero .v2-title { font-size: clamp(88px, 11vw, 170px);
background: linear-gradient(180deg, #fff8e2 6%, #f3d27e 42%, #c8923a 72%, #8a5f22); -webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 2px 0 rgba(60,38,8,.9)) drop-shadow(0 16px 40px rgba(231,168,60,.35)); }
.hero .v2-story { max-width: 30ch; }
/* the room: the blurred pack art stays a whisper so the lit packs carry the screen */
.v2-room .art { opacity: .14; }
.v2-chip .lbl { font-weight: 500; color: var(--muted); }
@media (max-width: 1180px) { .v2-chip .lbl { display: none; } } /* tablets: the bar has room for the numbers, not the words (the tooltips keep them) */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.queue-note { margin: 0; }
.deckline { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 7px 16px 7px 7px; border-radius: 18px; background: var(--glass);
border: 1px solid var(--hair); transition: background .2s, border-color .2s; max-width: 100%; }
.deckline:hover { background: var(--glass-2); border-color: color-mix(in srgb, var(--c) 35%, var(--hair)); }
.deckart { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: none; background: var(--glass); }
.deckart img { width: 100%; height: 100%; object-fit: cover; }
.deckline > span:nth-child(2) { min-width: 0; }
.deckline small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.deckline b { display: block; font: 700 16px/1.25 var(--display); letter-spacing: .03em; color: var(--hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { margin-left: 6px; color: var(--muted); display: grid; }
/* the three God packs, fanned and lit like the article cover. Sized from the box's own height (container units), so the fan keeps
its proportions on any screen: Ra in front, Obelisk's blue and Slifer's red glowing at the sides. */
.hero-gods { position: relative; justify-self: center; display: block; width: min(100%, 600px); height: clamp(300px, 46vh, 460px); container-type: size; }
.hero-gods .v2-keylight { --kl-size: 150cqh; top: 50%; }
.gods { position: absolute; inset: 0; z-index: 1; }
/* --u: one unit of the fan, the smaller of the box's height and (most of) its width, so the fan never grows past its column */
.god { --u: min(1cqh, .78cqw); position: absolute; left: 50%; bottom: calc(4 * var(--u)); height: calc(76 * var(--u)); aspect-ratio: 400 / 733; translate: -50% 0; transform-origin: 50% 92%; transition: transform .7s var(--ease); }
.god .v2-tilt { position: absolute; inset: 0; }
.god .v2-tilt > img, .god .gloss, .god .holo { border-radius: 4px; }
.god.ra { height: calc(92 * var(--u)); bottom: calc(1 * var(--u)); z-index: 2; }
.god.ra .v2-tilt { --c: #f0b43a; }
.god.obelisk { transform: translateX(calc(-36 * var(--u))) rotate(-12deg); }
.god.obelisk .v2-tilt { --c: #4f86ff; }
.god.slifer { transform: translateX(calc(36 * var(--u))) rotate(12deg); }
.god.slifer .v2-tilt { --c: #ff4a3d; }
.hero-gods:hover .god.obelisk { transform: translateX(calc(-42 * var(--u))) translateY(calc(-2 * var(--u))) rotate(-15deg); }
.hero-gods:hover .god.slifer { transform: translateX(calc(42 * var(--u))) translateY(calc(-2 * var(--u))) rotate(15deg); }
/* the creator's fresh broadcast */
/* NEW FINAL BOSS feature: a slim strip (Ray, 2026-09-15: "remove or make it way smaller"). A small thumbnail of the
OZZY banner cropped to his face, one line of copy and the button; nothing is drawn over the art */
.boss-feature { display: grid; grid-template-columns: clamp(120px, 16vw, 200px) minmax(0, 1fr); align-items: stretch; width: 100%; max-width: 1040px; margin: 0 auto;
overflow: hidden; border-radius: 18px; text-decoration: none; color: var(--ink);
background: linear-gradient(180deg, rgba(10,20,16,.96), rgba(6,12,10,.98));
border: 1px solid rgba(126,226,168,.3); box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 24px rgba(80,200,130,.1);
transition: transform .3s var(--ease), box-shadow .35s; }
.boss-feature img { display: block; width: 100%; height: 100%; min-height: 76px; object-fit: cover; object-position: 50% 44%; }
.boss-feature:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 36px rgba(80,200,130,.2); }
.bf-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 10px clamp(12px, 2vw, 20px);
border-left: 1px solid rgba(126,226,168,.2); }
.bf-copy { display: grid; gap: 3px; min-width: 0; }
.bf-copy b { font: 800 clamp(15px, 1.3vw, 18px)/1.1 var(--display); color: #ffe6a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-copy em { font: italic 400 clamp(13px, 1.05vw, 15px)/1.3 "Crimson Text", Georgia, serif; color: #d9cba8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-go { flex: none; padding: 10px 18px; border-radius: 12px; white-space: nowrap;
font: 900 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #1c1203;
background: linear-gradient(180deg, #fff6d6 0%, #f3d27e 38%, #d9a441 64%, #b27a26 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(231,168,60,.3); }
@media (max-width: 760px) {
.boss-feature { grid-template-columns: 96px minmax(0, 1fr); border-radius: 16px; }
.bf-bar { gap: 10px; padding: 8px 10px; }
.bf-copy em { display: none; }
.bf-copy b { white-space: normal; font-size: 14px; line-height: 1.15; }
.bf-go { padding: 10px 12px; font-size: 11.5px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .boss-feature { transition: none; } }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.numbers[hidden] { display: none; }
.ncell { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px 20px; border-radius: 20px; box-shadow: none; }
.ncell b { font: 900 clamp(24px, 2.4vw, 34px)/1.05 var(--display); color: #f0cf72; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncell small { font-size: 13px; color: var(--muted); }
.ncell .nx { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--ink-2); }
.ncell .nx .nlink { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
a.ncell { text-decoration: none; color: inherit; cursor: pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
a.ncell:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
a.ncell:focus-visible { outline: 2px solid #f0cf72; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.ncell { transition: none; } a.ncell:hover { transform: none; } }
/* the new-player guide link under the hero buttons (guide.html) */
.guide-link { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: #f0cf72; text-decoration: underline; text-decoration-color: rgba(240,207,114,.4); text-underline-offset: 3px; }
.guide-link:hover { color: #ffe6a3; text-decoration-color: #ffe6a3; }
.ncell.queue { border-color: rgba(94,234,212,.45); background: linear-gradient(180deg, rgba(45,212,191,.14), rgba(255,255,255,.02)); }
.ncell.queue b { color: #7ff0dc; text-shadow: 0 0 16px rgba(45,212,191,.5); }
/* one colour per number (Ray): treasury ETH in Robinhood green, the burn on fire, packs gold, duelists Obelisk blue */
.ncell.treasury { border-color: rgba(0,200,5,.5); background: linear-gradient(180deg, rgba(0,200,5,.16), rgba(255,255,255,.02)); }
.ncell.treasury b { color: #3dff6e; text-shadow: 0 0 18px rgba(0,200,5,.55); }
a.ncell.treasury:hover .nlink { color: #3dff6e; }
.ncell.burn { border-color: rgba(255,90,40,.5); background: linear-gradient(180deg, rgba(255,70,20,.16), rgba(255,255,255,.02)); }
.ncell.burn b { background: linear-gradient(180deg, #ffe08a 0%, #ff9a3c 45%, #ff3b1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,80,30,.55)); animation: ncEmber 2.6s ease-in-out infinite; }
@keyframes ncEmber { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,80,30,.45)); } 50% { filter: drop-shadow(0 0 16px rgba(255,120,40,.8)); } }
.ncell.opened { border-color: color-mix(in srgb, #f0b43a 40%, var(--hair)); background: linear-gradient(180deg, rgba(240,180,58,.1), rgba(255,255,255,.02)); }
.ncell.duelists { border-color: rgba(79,134,255,.45); background: linear-gradient(180deg, rgba(79,134,255,.14), rgba(255,255,255,.02)); }
.ncell.duelists b { color: #8fb6ff; text-shadow: 0 0 16px rgba(79,134,255,.5); }
@media (prefers-reduced-motion: reduce) { .ncell.burn b { animation: none; } }
.news { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 20px; box-shadow: none; min-width: 0; }
.news > div { min-width: 0; }
.news b { display: block; font-size: 15px; }
.news small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tournament announcement → event card, in the Blitz poster's crimson and gold (menu-home.js renderEventCard) */
.news.event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px; padding: 18px 24px; border-radius: 22px; text-decoration: none; color: #fff;
background: radial-gradient(90% 160% at 0% 50%, rgba(225,60,40,.32), transparent 60%), linear-gradient(100deg, #2a0708 0%, #1a0506 55%, #120405 100%);
border: 1.5px solid rgba(255,200,110,.55); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 34px rgba(255,120,50,.18);
transition: transform .25s var(--ease), box-shadow .25s; }
.news.event:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 44px rgba(255,140,60,.3); }
.ev-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.35); box-shadow: 0 0 0 2px rgba(255,210,122,.6), 0 0 22px rgba(255,170,70,.5); }
.ev-mark img { width: 42px; height: 42px; }
.ev-copy { display: grid; gap: 4px; min-width: 0; }
.ev-kick { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--ui, inherit); letter-spacing: .16em; text-transform: uppercase; color: #2a0508;
background: #ffd27a; padding: 5px 10px; border-radius: 999px; }
.ev-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c8200f; }
.ev-kick.on::before { animation: v2pulse 1.4s ease-in-out infinite; }
.news.event b { font: 900 clamp(20px, 1.9vw, 26px)/1.1 var(--display); letter-spacing: .02em; color: #fff3cf; }
.news.event small { font-size: 13.5px; color: #e7c9a6; }
.ev-stats { display: flex; gap: 10px; }
.ev-stats span { display: grid; gap: 3px; padding: 9px 14px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,200,110,.28); font-size: 12px; color: #d9bf98; white-space: nowrap; text-align: center; }
.ev-stats span b { font: 800 22px/1 var(--ui, inherit) !important; color: #ffd27a !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ev-go { padding: 13px 22px; border-radius: 14px; white-space: nowrap; font: 900 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #1c1203;
background: linear-gradient(180deg, #fff6d6 0%, #f3d27e 38%, #d9a441 64%, #b27a26 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(231,168,60,.35); }
@media (max-width: 900px) {
.news.event { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px; }
.ev-stats { grid-column: 1 / -1; } .ev-stats span { flex: 1; }
.ev-go { grid-column: 1 / -1; text-align: center; }
.ev-mark { width: 44px; height: 44px; } .ev-mark img { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .news.event { transition: none; } .ev-kick.on::before { animation: none; } }
/* the three doors */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.door { --c: var(--dc); display: grid; grid-template-rows: 130px auto; min-height: 196px; }
.door::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .45s;
background: radial-gradient(70% 85% at 50% 108%, color-mix(in srgb, var(--dc) 26%, transparent), transparent 70%); opacity: .7; }
.door:hover::before { opacity: 1; }
.door.packs { --dc: #f0b43a; } .door.coll { --dc: #6fb3ff; } .door.market { --dc: #7ee2a8; }
/* the art reaches into the text area and fades under the copy instead of stopping at a hard line */
.door-art { position: relative; z-index: 0; } /* its own stack: the fan's raised middle card never climbs over the title */
.door-copy { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 22px 20px; min-width: 0; }
.door-copy::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -58px; pointer-events: none;
background: radial-gradient(70% 120% at 50% 135%, color-mix(in srgb, var(--dc) 20%, transparent), transparent 70%),
linear-gradient(180deg, rgba(14,11,8,0), rgba(14,11,8,.76) 58px, rgba(14,11,8,.86)); }
.door-copy > div { min-width: 0; }
.door-copy p { margin: 3px 0 0; }
.door-copy .arrow { font-size: 22px; color: var(--muted); transition: transform .3s var(--ease), color .3s; }
.door:hover .arrow { transform: translateX(4px); color: var(--dc); }
.fan { position: absolute; left: 50%; bottom: -34px; width: 0; height: 0; }
.fan img { max-width: none; position: absolute; bottom: 0; border-radius: 5px; transform-origin: 50% 120%; box-shadow: 0 16px 26px rgba(0,0,0,.55); transition: transform .55s var(--ease); background: #140c06; }
.fan.cards img { width: 92px; left: -46px; aspect-ratio: 813 / 1185; object-fit: cover; }
.fan img:nth-child(1) { transform: rotate(-15deg) translateX(-26px); }
.fan img:nth-child(2) { transform: translateY(-10px); z-index: 2; }
.fan img:nth-child(3) { transform: rotate(15deg) translateX(26px); }
.door:hover .fan img:nth-child(1) { transform: rotate(-22deg) translateX(-40px) translateY(-8px); }
.door:hover .fan img:nth-child(2) { transform: translateY(-22px); }
.door:hover .fan img:nth-child(3) { transform: rotate(22deg) translateX(40px) translateY(-8px); }
.tag { position: absolute; left: 50%; top: 16px; margin-left: 62px; z-index: 3; display: grid; padding: 8px 12px; border-radius: 14px; background: rgba(10,20,14,.72);
border: 1px solid color-mix(in srgb, var(--dc) 40%, transparent); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .55s var(--ease); }
.tag small { font-size: 11px; font-weight: 600; color: var(--muted); }
.tag b { font-size: 18px; font-weight: 650; color: var(--dc); font-variant-numeric: tabular-nums; }
.door:hover .tag { transform: translateY(-6px); }
/* today: at most three real things */
.today { display: grid; gap: 12px; }
.today-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.today-row:empty { display: none; }
.today-item { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 12px 12px 18px; border-radius: 20px; box-shadow: none; transition: background .2s, border-color .3s; min-width: 0; }
a.today-item:hover { background: rgba(255,255,255,.1); }
.today-item > div { flex: 1; min-width: 0; }
.today-item b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-item small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--hi); box-shadow: 0 0 12px var(--hi); }
.pip.live { background: #ff4a4a; box-shadow: 0 0 12px #ff4a4a; animation: v2pulse 2s ease-in-out infinite; }
.pip.ok { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.go { flex: none; font-size: 13px; font-weight: 650; color: var(--hi); padding: 9px 15px; border-radius: 999px; background: var(--glass-2); }
.today-item.ready { border-color: color-mix(in srgb, var(--ok) 38%, var(--hair)); }
/* account sheet */
.who { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.who .v2-avatar { width: 58px; height: 58px; }
.who > div { min-width: 0; }
.who b { display: block; font: 900 22px/1.1 var(--display); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--muted); font-size: 13px; }
.rankbox { margin: 4px 0 14px; padding: 16px; border-radius: 18px; background: rgba(0,0,0,.28); }
.rankbox .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rankbox .row b { font: 900 18px/1 var(--display); letter-spacing: .06em; color: var(--hi); text-transform: uppercase; }
.rankbox .v2-bar { display: block; }
.rankbox .next { margin-top: 9px; font-size: 13px; color: var(--muted); }
.rankbox .next b { color: var(--ink); }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.statrow div { padding: 10px 12px; border-radius: 14px; background: var(--glass); text-align: center; }
.statrow dt { font-size: 12px; color: var(--muted); }
.statrow dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.v2-list .danger { color: var(--bad); }
.v2-list button.on { color: var(--hi); }
/* sign in */
.gate { width: min(480px, calc(100vw - 24px)); z-index: 100; }
.gate-scrim { position: fixed; inset: 0; z-index: 99; background: radial-gradient(80% 60% at 50% 40%, rgba(20,16,10,.9), rgba(4,4,4,.97)); backdrop-filter: blur(8px); }
.gate-body { display: grid; gap: 14px; padding: 26px 24px 22px; }
.gate-body h2 { margin: 0; font: 900 clamp(26px, 4vw, 34px)/1.05 var(--display); letter-spacing: .04em; color: var(--hi); }
.gate-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.wallets { display: grid; gap: 8px; }
.wallet { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 16px; border-radius: 16px; text-align: left; font-size: 16px; font-weight: 600;
background: var(--glass); border: 1px solid var(--hair) !important; transition: background .2s, border-color .2s; }
.wallet:hover { background: var(--glass-2); border-color: color-mix(in srgb, var(--c) 40%, var(--hair)) !important; }
.wallet img, .wallet .wicon { width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--glass-2); }
.wallet small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.facts3 { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts3 li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.facts3 li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; flex: none;
background: var(--ok) url("data:image/svg+xml;utf8,") center / 12px no-repeat; }
.gate-err { padding: 10px 14px; border-radius: 14px; font-size: 14px; background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.gate-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.gate .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--hi); animation: v2spin 1s linear infinite; }
.gate-wait { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--ink-2); }
.installs { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1100px) {
.today-row { grid-template-columns: 1fr 1fr; }
.today-row > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.hide-sm { display: none !important; }
.me { padding: 3px; }
.hero { grid-template-columns: minmax(0, 1fr); text-align: center; min-height: 0; gap: 4px; }
.hero-gods { order: -1; width: 100%; height: clamp(220px, 32vh, 280px); margin: 0 auto 4px; }
.hero-copy { justify-items: center; gap: 10px; width: 100%; }
.hero .v2-title { font-size: 80px; }
.hero-actions { width: 100%; flex-wrap: nowrap; }
.hero-actions > * { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.15; }
.hero-actions .v2-gold { font-size: 14px; letter-spacing: .08em; padding: 0 14px; gap: 10px; }
.hero-actions .v2-gold img { width: 24px; height: 24px; }
.hero-actions .v2-obsidian { font-size: 12.5px; letter-spacing: .08em; min-height: 64px; }
.door-copy::before { display: none; }
.deckline { width: 100%; }
.doors { grid-template-columns: 1fr; }
.door { grid-template-rows: none; grid-template-columns: 124px minmax(0, 1fr); min-height: 112px; align-items: stretch; }
.door-copy { align-items: center; padding: 16px 18px 16px 4px; }
.fan { transform: scale(.78); bottom: -26px; }
.tag { display: none; }
.today-row { grid-template-columns: 1fr; }
.today-row > :nth-child(3) { grid-column: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
.home { gap: 14px; }
.hero { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; gap: 20px; }
.hero .v2-title { font-size: 64px; }
.hero .v2-lede { font-size: 14px; }
.hero-actions { margin-top: 2px; }
.hero-gods { width: 320px; height: calc(100dvh - 110px); }
.deckline { margin-top: 2px; padding: 5px 12px 5px 5px; }
.deckart { width: 38px; height: 38px; }
.doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.door { grid-template-rows: 90px auto; min-height: 150px; }
.door-copy { padding: 0 14px 12px; }
.fan { transform: scale(.72); bottom: -30px; }
.tag { display: none; }
.hero-actions .v2-gold { min-height: 50px; font-size: 14px; }
.hero-actions .v2-obsidian { min-height: 50px; }
}