.deck-picker{text-align:left;margin:22px 0;padding:18px;background:#0b1933dd;border:1px solid #81dacc55;border-radius:16px}
.deck-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deck-options button{padding:14px;text-align:left;min-height:88px;border:1px solid #ffffff30;border-radius:12px;background:#122541;color:#ecf8ff}
.deck-options .selected{border:2px solid #7ff3d5;background:#19443e}
.deck-options small{display:block;line-height:1.6;margin-top:5px}
.draw-summary{padding:12px 16px;background:#102b35ee;border-left:3px solid #7ff3d5;border-radius:8px;font-size:14px;line-height:1.7}
.draw-summary button{margin:6px 0 0 8px;min-height:44px}
.exchange-list{display:flex;flex-wrap:wrap;gap:10px}
.exchange-list button{min-height:48px;padding:12px}
@media(max-width:480px){.deck-options{grid-template-columns:1fr}.deck-picker{padding:12px}.top-buttons{flex-wrap:wrap}}
.opening{padding:18px;line-height:1.65}
.lead-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.lead-options button{padding:8px;background:#132b40;color:#efffff;border:2px solid #68809b;border-radius:14px;overflow:hidden}
.lead-options button.selected{border-color:#7ff3d5;background:#19443e;box-shadow:0 0 0 2px #7ff3d544}
.lead-options img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.lead-options b,.lead-options small{display:block}
.opening>.primary{margin-top:20px;min-height:52px;width:100%}

/* —— PTCG-style hub + matchup (v1.2 entry flow) —— */
.intro.hub,.intro.matchup{max-width:520px;margin:2vh auto;text-align:center}
.hub-tagline,.first-note,.diff-blurb{font-size:15px;line-height:1.7;color:#bed2d7;margin:10px 0}
.hub-primary{margin-top:8px}
.hub-primary .primary{width:100%;font-size:20px;min-height:56px}
.hub-secondary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.hub-secondary button{flex:1 1 140px;min-height:48px}
.hub-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:22px;padding-top:14px;border-top:1px solid #49646c66;font-size:14px;color:#8fa8b4}
.hub-footer .linkish,.hub-footer button.quiet{background:transparent;border:none;color:#bfe2de;min-height:44px;padding:8px 6px;text-decoration:underline;text-underline-offset:3px}
.hub-footer .hub-gallery{min-height:44px;padding:8px 12px;font-size:14px}
.matchup-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.matchup-header .back-btn{flex:none;min-width:72px;min-height:44px}
.matchup-header h1{font-size:20px;margin:0}
.matchup-header p{margin:2px 0 0;font-size:14px;color:#a9c1c9}
.vs-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:10px;margin:14px 0 18px}
.vs-center{display:flex;align-items:center;justify-content:center;padding:0 4px}
.vs-center strong{font-size:28px;letter-spacing:4px;color:#e8d9ad;text-shadow:0 2px 10px #0008}
.vs-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;min-height:44px;text-align:center;border:2px solid #68809b;border-radius:16px;background:#132b40;color:#efffff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.vs-tile:hover,.vs-tile:focus-visible{border-color:#7ff3d5;box-shadow:0 0 0 2px #7ff3d544}
.vs-tile .vs-tile-label{font-size:13px;color:#a9c1c9;letter-spacing:.5px}
.vs-tile .v1-card-art,.vs-tile img{width:72px;height:108px;object-fit:cover;border-radius:8px;border:1px solid #ffffff30}
.vs-tile b{font-size:16px;margin-top:2px}
.vs-tile small{display:block;font-size:13px;line-height:1.45;color:#b8cdd4;max-width:18em}
.diff-block{margin:8px 0 14px;text-align:center}
.diff-label{font-size:14px;color:#a9c1c9;margin-bottom:8px}
.diff-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.diff-pills .diff-pill{min-height:48px;border-radius:999px;font-weight:700;border:2px solid #68809b;background:#122541;color:#ecf8ff}
.diff-pills .diff-pill.selected{border-color:#7ff3d5;background:#19443e;box-shadow:0 0 0 2px #7ff3d544;color:#e8fff8}
.diff-blurb{min-height:1.5em;margin:10px 0 0;font-size:14px;color:#98f0ca}
.matchup-start .primary{width:100%;font-size:20px;min-height:56px;margin-top:8px}
.matchup .compact-choice{text-align:left;margin:10px 0}
@media(max-width:480px){
  .vs-row{grid-template-columns:1fr;gap:8px}
  .vs-center{padding:4px 0}
  .vs-center strong{font-size:22px;letter-spacing:3px}
  .vs-tile{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:10px;padding:12px}
  .vs-tile .vs-tile-label{width:100%;margin-bottom:-4px}
  .vs-tile .v1-card-art,.vs-tile img{width:56px;height:84px}
  .vs-tile b,.vs-tile small{flex:1 1 140px;text-align:left}
  .vs-tile small{max-width:none}
  .hub-primary .primary,.matchup-start .primary{min-height:52px;font-size:18px}
  .intro.hub h2,.intro.matchup h2{font-size:28px}
  .matchup-header{flex-wrap:wrap}
}

/* Matchup deck cover: dedicated art OR fanned mini-card emblem (not one blown-up card) */
.deck-cover-wrap{position:relative;width:100%;max-width:148px;margin:0 auto;min-height:200px;display:flex;align-items:center;justify-content:center}
.deck-cover{display:none;width:100%;max-width:148px;aspect-ratio:2/3;object-fit:cover;object-position:50% 18%;border-radius:14px;border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(20,20,60,.4)}
.deck-cover.ready{display:block}
.deck-emblem{width:100%;display:flex;justify-content:center;padding:6px 0 2px}
.deck-fan{position:relative;width:118px;height:88px}
.deck-fan-card{position:absolute;left:50%;top:8px;width:52px;height:78px;margin-left:-26px;border-radius:7px;overflow:hidden;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(20,20,60,.4);transform:rotate(calc((var(--i) - 1) * 12deg)) translateX(calc((var(--i) - 1) * 22px));transform-origin:50% 100%;background:#1a2740}
.deck-fan-card :is(img,.v1-card-art){width:100%!important;height:100%!important;object-fit:cover;object-position:center 22%;display:block;border:0!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:auto!important;max-width:none!important}
.vs-tile .deck-cover-wrap + b{margin-top:6px}
@media(max-width:480px){.deck-cover-wrap{max-width:120px;min-height:168px}.deck-cover{max-width:120px}.deck-fan{width:100px;height:76px}.deck-fan-card{width:44px;height:66px;margin-left:-22px;transform:rotate(calc((var(--i) - 1) * 11deg)) translateX(calc((var(--i) - 1) * 18px))}}
