/* play-hub.css — the Play hub (play-hub.html) on the v2 house style. Loads after ui-v2.css.
   Order: a running duel to rejoin, the one-tap Duel with your deck, the computer, other players (what goes in and what
   comes out), live matches to watch, and your last duels. Every mode opens a sheet with its rules and one button. */

.play { max-width: 1320px; margin: 0 auto; padding: 4px var(--pad) 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vh, 56px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.dot.no { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.dot.live { background: #ff4a4a; box-shadow: 0 0 10px #ff4a4a; animation: v2pulse 2.2s ease-in-out infinite; }

.rejoin { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; border-radius: 20px;
  background: linear-gradient(90deg, rgba(255,74,74,.18), rgba(255,255,255,.04)); border: 1px solid rgba(255,110,110,.3); }
.rejoin p { margin: 0; flex: 1; min-width: 0; font-size: 14px; }
.rejoin p small { display: block; color: rgba(255,200,190,.8); font-size: 12.5px; }
.rejoin .v2-btn { --c: #ff6a5a; --hi: #ffd2c8; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); min-height: clamp(380px, 58vh, 560px); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; min-width: 0; }
.hero .v2-lede { max-width: 31em; }
.deckchip { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 16px 6px 6px; border-radius: 999px; text-align: left; background: var(--glass); border: 1px solid var(--hair) !important; transition: background .2s; }
.deckchip:hover { background: var(--glass-2); }
.deckchip .dimg { width: 34px; height: 50px; flex: none; border-radius: 4px; overflow: hidden; background: #140c06; }
.deckchip .dimg img { width: 100%; height: 100%; object-fit: cover; }
.deckchip > span:not(.dimg) { min-width: 0; }
.deckchip b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckchip small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.deckchip em { margin-left: 8px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--hi); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.online { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hint { margin: 0; font-size: 13px; color: var(--muted); }

.vs { position: relative; height: clamp(300px, 48vh, 460px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.vs .side { width: clamp(120px, 13vw, 196px); justify-self: center; }
.vs .me { rotate: -7deg; }
.vs .them { rotate: 7deg; }
.vs .card { position: relative; width: 100%; aspect-ratio: 813 / 1185; border-radius: 10px; }
.vs .card > img, .vs .card .v2-cardback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.vs .them .v2-cardback { animation: seek 2.4s ease-in-out infinite; }
@keyframes seek { 50% { box-shadow: 0 0 60px color-mix(in srgb, var(--c) 70%, transparent); } }
.disc { position: relative; z-index: 2; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; font: 900 22px/1 var(--display); color: #160f03;
  background: linear-gradient(180deg, #fff, var(--hi) 55%, var(--c)); box-shadow: 0 0 44px color-mix(in srgb, var(--c) 70%, transparent), 0 12px 24px rgba(0,0,0,.5); }
.disc i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--hi); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
.disc i:nth-child(2) { animation-delay: 1.2s; }
@keyframes ping { from { transform: scale(.9); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

.solo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.solo .v2-card { display: grid; align-content: start; gap: 12px; padding: 20px; text-align: left; min-width: 0; }
.solo h3 { margin: 0; }
.solo p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.solo .pay { font-size: 13px; font-weight: 600; color: var(--hi); }
/* NEW FINAL BOSS: OZZY's banner shown whole across the row (it carries its own title), a slim bar underneath */
.solo .boss-feature { grid-column: 1 / -1; display: grid; gap: 0; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid rgba(126,226,168,.35); box-shadow: 0 20px 46px rgba(0,0,0,.45), 0 0 36px rgba(80,200,130,.12); }
.solo .boss-feature img { display: block; width: 100%; max-height: 560px; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.solo .boss-feature .bf-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid rgba(126,226,168,.22); }
.solo .boss-feature .bf-copy { display: grid; gap: 4px; min-width: 0; }
.solo .boss-feature .bf-copy h3 { font-size: clamp(17px, 1.6vw, 21px); color: #ffe6a3; }
.solo .boss-feature .bf-copy p { color: #d9cba8; }
.solo .boss-feature .bf-go { flex: none; }
@media (max-width: 760px) {
  .solo .boss-feature .bf-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px 14px; }
  .solo .boss-feature .bf-copy p { font-size: 13px; }
}
.gauntlet { grid-column: span 2; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px !important; }
.gauntlet .portrait { grid-row: span 5; align-self: stretch; border-radius: 18px; overflow: hidden; min-height: 200px; background: #120f0c; }
.gauntlet .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.path { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.path span { height: 10px; border-radius: 3px; background: rgba(255,255,255,.08); }
.path span.done { background: var(--hi); }
.path span.now { background: var(--hi); box-shadow: 0 0 0 2px #0b0a09, 0 0 0 3px var(--hi), 0 0 12px var(--c); }
.faces { display: flex; align-items: center; }
.faces span { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #15120f; background: #222; }
.faces span + span { margin-left: -10px; }
.faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.faces b { margin-left: 10px; font-size: 13px; color: var(--muted); }
.cardart { display: block; height: 120px; margin: -20px -20px 0; overflow: hidden; }
.cardart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.2); }

.modes { padding: 8px; }
.mrow, .mhead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 20px; align-items: center; gap: 16px; padding: 12px 14px; }
.mhead { padding-block: 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mrow { width: 100%; border-radius: 16px; text-align: left; transition: background .2s; }
.mrow:hover { background: var(--glass); }
.mrow + .mrow { box-shadow: 0 -1px 0 var(--hair); }
.mname { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mname .thumb { width: 48px; height: 48px; flex: none; border-radius: 14px; overflow: hidden; background: #15120f; display: grid; place-items: center; }
.mname .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mname b { display: block; font-size: 15.5px; }
.mname small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mcell { font-size: 13.5px; color: var(--ink-2); }
.mcell i { display: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; }

.live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.match { display: grid; gap: 12px; padding: 18px; text-align: left; }
.match .top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.match .top span { display: flex; align-items: center; gap: 7px; }
.duelist { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.duelist b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelist span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: -6px; }
.lp i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--hi)); }
.history { padding: 8px; }
.hrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 12px; }
.hrow + .hrow { box-shadow: 0 -1px 0 var(--hair); }
.res { justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.res.w { color: #062a16; background: var(--ok); }
.res.l { color: #fff; background: rgba(255,107,107,.35); }
.res.d { color: var(--ink); background: rgba(255,255,255,.12); }
.hrow .who b { display: block; font-size: 14px; }
.hrow .who small { font-size: 12.5px; color: var(--muted); }
.hrow .when { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* sheets */
.sh-art { height: 130px; margin: -22px -22px 16px; border-radius: 28px 28px 0 0; overflow: hidden; position: relative; }
.sh-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.sh-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(24,21,18,.96)); }
.sh-title { position: relative; margin: -52px 0 14px; }
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); counter-increment: s; }
.steps li::before { content: counter(s); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: #160f03; background: linear-gradient(180deg, #fff, var(--hi)); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; background: rgba(255,255,255,.05); }
.check .dot { margin-top: 5px; }
.opt { display: grid; gap: 8px; margin-bottom: 16px; }
.opt > small { font-size: 12px; font-weight: 600; color: var(--muted); }
.opt .note { font-size: 13px; color: var(--ink-2); }
.rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 16px; max-height: 38vh; overflow: auto; padding-right: 6px; }
.rival { display: grid; justify-items: center; gap: 5px; padding: 8px 4px; border-radius: 14px; text-align: center; transition: background .2s; }
.rival:hover { background: var(--glass); }
.rival.on { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--hi); }
.rival span { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: #222; }
.rival img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* OZZY's portrait has his face in the middle of the frame (the other bosses' faces sit near the top), so center his crop */
.sh-art img[src*="boss_ozzy"] { object-position: 50% 46%; }
.rival img[src*="boss_ozzy"], .faces img[src*="boss_ozzy"], .gauntlet .portrait img[src*="boss_ozzy"], .mname .thumb img[src*="boss_ozzy"] { object-position: 50% 44%; }
.rival b { font-size: 12px; line-height: 1.2; }
.stages { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; max-height: 42vh; overflow: auto; }
.stages li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.stages li.done { color: var(--ink-2); }
.stages li.now { color: var(--ink); background: rgba(255,255,255,.08); }
.stages li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stages li span:last-child { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.codein { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(0,0,0,.3); color: var(--ink); font: 800 22px var(--mono); letter-spacing: .18em; text-transform: uppercase; outline: 0; }
.decks { display: grid; gap: 6px; margin-bottom: 16px; }
.deck { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 16px; text-align: left; transition: background .2s; }
.deck:hover { background: var(--glass); }
.deck.on { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--hi); }
.deck .dimg { width: 38px; height: 55px; border-radius: 4px; overflow: hidden; background: #140c06; }
.deck .dimg img { width: 100%; height: 100%; object-fit: cover; }
.deck b { display: block; font-size: 14.5px; }
.deck small { display: block; font-size: 12.5px; color: var(--muted); }
.deck .fits { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.deck .fits span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.deck .fits .dot { width: 6px; height: 6px; }
.deckgroup { margin: 10px 2px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }

@media (max-width: 1100px) and (min-width: 761px) { .solo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .rejoin { gap: 10px; padding: 8px 8px 8px 12px; } .rejoin p small { display: none; } .rejoin p { font-size: 13px; line-height: 1.3; }
  .hero .v2-lede { font-size: 14px; }
  .vs { order: -1; height: 190px; }
  .vs .side { width: 96px; }
  .disc { width: 54px; height: 54px; font-size: 17px; }
  .hero-copy { justify-items: stretch; text-align: center; }
  .deckchip, .online { justify-self: center; }
  .actions { justify-content: center; }
  .actions .v2-btn { flex: 1 1 100%; }
  .solo { grid-template-columns: minmax(0, 1fr); }
  .gauntlet { grid-column: auto; grid-template-columns: 96px minmax(0, 1fr); }
  .gauntlet .portrait { min-height: 0; grid-row: span 2; }
  .gauntlet .path, .gauntlet .pay, .gauntlet .v2-btn { grid-column: 1 / -1; }
  .mhead { display: none; }
  .mrow { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 12px; }
  .mrow .mname { grid-column: 1; }
  .mrow .chev { grid-column: 2; grid-row: 1; }
  .mrow .mcell { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding-left: 62px; font-size: 13px; }
  .mcell i { display: block; }
  .live { grid-template-columns: minmax(0, 1fr); }
  .hrow { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .hrow .when { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .play { gap: 26px; }
  .hero { min-height: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-copy { gap: 10px; }
  .rejoin p small, .online { display: none; }
  .deckchip { padding: 4px 14px 4px 4px; } .deckchip .dimg { width: 26px; height: 38px; }
  .hero .v2-title { font-size: 44px; }
  .hero .v2-lede { font-size: 13px; line-height: 1.4; }
  .vs { height: 62vh; }
  .vs .side { width: min(110px, 30vh); }
  .v2-btn.lg { min-height: 46px; padding: 0 26px; font-size: 16px; }
  .solo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gauntlet { grid-template-columns: 90px minmax(0, 1fr); }
  .gauntlet .portrait { min-height: 0; }
  .mrow, .mhead { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr) 16px; gap: 10px; }
  .mcell { font-size: 12.5px; }
  .sh-art { height: 90px; }
  .stages { max-height: 30vh; }
  .v2-sheet { max-height: calc(100dvh - 16px); bottom: 8px; }
}

/* ── the same key art as Home and the front door: the two backs meet in a shaft of light ── */
.hero-copy .v2-engrave { margin-bottom: -4px; white-space: nowrap; }
/* the light is absolutely placed and would otherwise widen the page, so the hero clips it (with room for the
   cards' float and shadows to bleed) */
.vs { isolation: isolate; overflow: clip; overflow-clip-margin: 30px; }
.vs .v2-keylight { --kl: #ffd98d; --kl-size: min(760px, 128%); top: 50%; opacity: .45; }
.vs .v2-dust { inset: -10% 0; }
.vs .side, .vs .disc, .vs .v2-pool { position: relative; z-index: 1; }
.actions .v2-gold[disabled] { filter: grayscale(.65) brightness(.7); box-shadow: none; cursor: not-allowed; }
@media (max-width: 760px) {
  .actions .v2-gold, .actions .v2-obsidian { flex: 1 1 100%; }
  .hero-copy .v2-engrave { justify-content: center; }
  .vs .v2-keylight { --kl-size: min(560px, 150%); opacity: .4; }
}