/* ═════════ Draft 2.0 — the 9-round draft as a game table (Quick Play / Story) ═════════
   Markup from renderDraftRound (ui.js): .d3-head (pack rail, round, tent card), #draft-round-layout with
   .d3-lineup (lineup card) | #draft-col-cards (felt table) | .d3-chalk (dugout chalkboard).
   The 3D pack is drawn by draft3d.js inside .draft-pack.d3-pack-live. Sign Legend and the post-match
   reward use other markup and are not touched. */

/* ── header ── */
#screen-draft .d3-head { padding: 4px 0 14px !important; }
#screen-draft .d3-head .d3-intro {
  max-width: 760px !important; margin: 0 auto 12px !important; padding: 7px 16px !important;
  background: linear-gradient(180deg, rgba(20, 34, 26, .92), rgba(10, 20, 15, .92)) !important;
  border: 1px solid rgba(201, 162, 74, .55) !important; border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 180, .12), 0 4px 10px rgba(0, 0, 0, .4);
  font-family: 'Oswald', sans-serif !important; font-size: 13px !important; line-height: 1.4 !important;
  color: #d9e7dd !important; letter-spacing: .2px;
}
#screen-draft .d3-head .d3-intro * { font-family: inherit !important; font-size: inherit !important; }
#screen-draft .d3-head .d3-round { font-size: 12px !important; letter-spacing: 2px !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
#screen-draft .d3-head .d3-dots { display: none !important; }

/* the nine packs of the draft: opened, on the table, still sealed */
.d3-rail { display: flex; justify-content: center; align-items: flex-end; gap: 7px; margin: 4px auto 12px; height: 46px; }
.d3-rp { position: relative; display: block; width: 24px; height: 34px; border-radius: 3px; font-style: normal;
  background: var(--rp, #666); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .45); transition: transform .3s; }
.d3-rp::before, .d3-rp::after { content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 2px, rgba(0, 0, 0, .25) 2px 4px); }
.d3-rp::before { top: 0; } .d3-rp::after { bottom: 0; }
.d3-rp b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 11px 'Oswald', sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.d3-rp--epic_plus { --rp: linear-gradient(160deg, #fff1a6, #d4a017 55%, #8a6410); }
.d3-rp--epic { --rp: linear-gradient(160deg, #e3c2ff, #9b4dff 55%, #3c1170); }
.d3-rp--rare { --rp: linear-gradient(160deg, #cfe4ff, #3b82f6 55%, #0d2b66); }
.d3-rp--uncommon { --rp: linear-gradient(160deg, #c8f7dc, #22a35a 55%, #0b4a2a); }
.d3-rp--common { --rp: repeating-linear-gradient(120deg, #f3e6c4 0 7px, #c9302c 7px 10px, #f3e6c4 10px 14px, #1f3a7a 14px 16px); }
.d3-rp--random { --rp: linear-gradient(160deg, #ff6b9d, #ffd36b, #6bffb0, #6bc8ff, #a96bff); }
.d3-rp.is-done { opacity: .45; filter: grayscale(.4); clip-path: polygon(0 18%, 18% 10%, 36% 19%, 55% 9%, 74% 18%, 100% 11%, 100% 100%, 0 100%); }
.d3-rp.is-done b::after { content: '✓'; margin-left: 1px; color: #4ade80; }
.d3-rp.is-now { width: 30px; height: 44px; transform: translateY(-2px); box-shadow: 0 0 0 2px #ffd36a, 0 0 16px rgba(255, 211, 106, .6), 0 4px 8px rgba(0, 0, 0, .5);
  animation: d3RailNow 1.6s ease-in-out infinite; }
.d3-rp.is-sealed { opacity: .8; }
@keyframes d3RailNow { 50% { transform: translateY(-6px); } }

/* table tent with the round's rule */
#screen-draft .d3-head .d3-tent { font-family: 'Oswald', sans-serif !important; font-size: 14px !important; letter-spacing: 1.5px;
  padding: 5px 18px !important; border-radius: 4px !important; text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15); }

/* ── the felt table in the middle ── */
#screen-draft #draft-round-layout { align-items: stretch !important; }
#screen-draft #draft-col-cards {
  position: relative; border-radius: 18px; padding: 22px 14px 16px !important; min-height: 470px; justify-content: flex-start;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 255, 255, .08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 40%, #1f5c3a, #123a25 70%, #0b2618) !important;
  border: 12px solid #5a3a1e;
  border-image: linear-gradient(160deg, #9a6834, #4a2c12 35%, #8a5a2b 55%, #3e2410) 1;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 236, 180, .08), 0 14px 34px rgba(0, 0, 0, .55);
}
/* a printed diamond under the pack */
#screen-draft #draft-col-cards::before {
  content: ''; position: absolute; left: 50%; top: 46%; width: 230px; height: 230px; transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid rgba(243, 236, 214, .07); border-radius: 4px; pointer-events: none;
}
#screen-draft #draft-col-cards > * { position: relative; z-index: 1; }
#screen-draft #draft-col-cards .draft-cards-carousel { min-height: 380px; align-items: center; background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding-bottom: 34px; }
#screen-draft #draft-col-cards > div[style*="max-width:400px"], #screen-draft #draft-col-cards > div[style*="max-width: 400px"] {
  font-family: 'Oswald', sans-serif !important; font-size: 13px !important; color: #cfe8d8 !important; letter-spacing: .3px; }
#screen-draft #draft-col-cards > .btn-secondary {
  font-family: 'Oswald', sans-serif !important; font-size: 14px !important; letter-spacing: 1.5px; text-transform: uppercase;
  color: #2a1a0e !important; background: linear-gradient(180deg, #ffe9a0, #e3b54c 55%, #b9862b) !important; border: 0 !important;
  border-radius: 7px !important; padding: 10px 22px !important; margin-top: 12px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 5px 0 #6b4a17, 0 9px 18px rgba(0, 0, 0, .45) !important; }
#screen-draft #draft-col-cards > .btn-secondary:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 2px 0 #6b4a17 !important; }
/* the dealt cards sit on the felt */
#screen-draft #draft-col-cards .draft-card-wrapper { background: rgba(6, 20, 13, .55) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .5); }

/* ── the 3D pack ── */
.draft-pack.d3-pack-live {
  width: 250px !important; height: 330px !important; overflow: visible !important; background: none !important; border: 0 !important;
  box-shadow: none !important; animation: none !important; filter: none !important; border-radius: 0 !important;
}
.draft-pack.d3-pack-live::after, .draft-pack.d3-pack-live::before { display: none !important; }
.draft-pack.d3-pack-live > .draft-pack-crimp, .draft-pack.d3-pack-live > .draft-pack-badge,
.draft-pack.d3-pack-live > .draft-pack-brand, .draft-pack.d3-pack-live > .draft-pack-tagline { display: none !important; }
.draft-pack.d3-pack-live .d3-canvas { position: absolute; left: -70px; top: -90px; width: calc(100% + 140px) !important; height: calc(100% + 180px) !important; z-index: 2; pointer-events: none; }
.draft-pack.d3-pack-live .draft-pack-open-prompt {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; width: auto !important; height: auto !important; margin: 0 !important;
  background: rgba(0, 0, 0, .55) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 20px !important; padding: 4px 14px !important;
  animation: d3Prompt 1.8s ease-in-out infinite; }
.draft-pack.d3-pack-live .draft-pack-open-prompt * { color: #f3ecd6 !important; }
@keyframes d3Prompt { 50% { opacity: .55; } }
.draft-pack.d3-opening .draft-pack-open-prompt { display: none; }
.d3-glow { position: absolute; left: 50%; top: 46%; width: 230px; height: 300px; transform: translate(-50%, -50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--d3g, #fff) 0%, transparent 65%); opacity: .18; filter: blur(8px);
  transition: opacity .2s; }
.draft-pack.d3-tier-3 .d3-glow, .draft-pack.d3-tier-4 .d3-glow { opacity: .3; animation: d3Breath 2.4s ease-in-out infinite; }
@keyframes d3Breath { 50% { opacity: .5; } }
.draft-pack.d3-opening .d3-glow { animation: none; opacity: calc(.3 + var(--d3k, 0) * .7); }
.draft-pack.d3-ripped .d3-glow { animation: d3Burst .9s ease-out forwards; }
@keyframes d3Burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 35% { opacity: 1; transform: translate(-50%, -60%) scale(1.8); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(2.4); } }
/* light rays out of the torn top */
.draft-pack.d3-ripped::before { display: block !important; content: '' !important; position: absolute; left: 50%; top: 22%; width: 420px; height: 420px;
  transform: translate(-50%, -50%); z-index: 1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--d3g, #fff) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 62%); mask: radial-gradient(circle, #000 0 20%, transparent 62%);
  animation: d3Rays .9s ease-out forwards; }
@keyframes d3Rays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(40deg); } }
.d3-spark { position: absolute; left: 50%; top: 22%; width: 7px; height: 7px; z-index: 3; pointer-events: none; border-radius: 1px;
  background: var(--sc, #fff); box-shadow: 0 0 8px var(--sc, #fff); animation: d3Spark .9s ease-out forwards; }
@keyframes d3Spark { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy) + 40px)) rotate(260deg); } }

/* ── lineup card (left) ── */
#screen-draft .d3-lineup {
  background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(140, 190, 160, .06) 35px 36px),
    linear-gradient(180deg, #13261c, #0e1d16) !important;
  border: 2px solid #2f5a42 !important; border-radius: 6px !important; padding: 0 12px 12px !important;
  box-shadow: 0 0 0 4px #0a140f, 0 0 0 5px rgba(201, 162, 74, .45), 0 12px 26px rgba(0, 0, 0, .55) !important;
  transform: rotate(-.6deg);
}
#screen-draft .d3-lineup > div:first-child {
  margin: 0 -12px 10px !important; padding: 9px 0 !important; background: linear-gradient(180deg, #c8302b, #8e1f1b);
  font-family: 'Oswald', sans-serif !important; font-size: 14px !important; letter-spacing: 3px !important; color: #fff3dc !important;
  border-bottom: 2px solid #5c1411; border-radius: 4px 4px 0 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
#screen-draft .d3-lineup > div[id^="draft-slot-"] { background: rgba(0, 0, 0, .25) !important; border-radius: 3px !important; }
#screen-draft .d3-lineup > div[id^="draft-slot-"] > span:first-child {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px !important; height: 26px; border-radius: 50%;
  font-family: 'Oswald', sans-serif !important; font-size: 12px !important; font-weight: 700; color: #e9e2c9 !important;
  border: 1.5px solid rgba(233, 226, 201, .35); }
#screen-draft .d3-lineup > div[id^="draft-slot-"] > span:last-child:not(:first-child) { font-family: 'Oswald', sans-serif !important; font-size: 12px !important; color: #4f6b5b !important; letter-spacing: 2px; }
#screen-draft .d3-lineup > div[id^="draft-slot-"] div[style*="font-size:10px"] { font-family: 'Oswald', sans-serif !important; font-size: 14px !important; letter-spacing: .3px; }
#screen-draft .d3-lineup > div[id^="draft-slot-"] div[style*="font-size:9px"] { font-family: 'Oswald', sans-serif !important; font-size: 11.5px !important; }
#screen-draft .d3-lineup > div[id^="draft-slot-"]:hover { background: rgba(255, 255, 255, .07) !important; }
#screen-draft .d3-lineup > .d3-landed { animation: d3Land 1.1s ease-out; }
@keyframes d3Land { 0% { background: rgba(255, 215, 0, .5) !important; box-shadow: 0 0 22px rgba(255, 215, 0, .8); } 100% { box-shadow: 0 0 0 transparent; } }

/* ── dugout chalkboard (right) ── */
#screen-draft .d3-chalk {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, .04), transparent 55%),
    #1d2b25 !important;
  border: 11px solid #5a3a1e !important; border-image: linear-gradient(160deg, #8a5a2b, #4a2c12 40%, #7a4f26 60%, #3e2410) 1 !important;
  border-radius: 0 !important; padding: 12px 14px !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .55), 0 12px 26px rgba(0, 0, 0, .55) !important;
  transform: rotate(.5deg);
}
#screen-draft .d3-chalk > div:first-child {
  font-family: 'Special Elite', 'Oswald', monospace !important; font-size: 16px !important; letter-spacing: 2px !important;
  color: #eef3ee !important; text-shadow: 0 0 2px rgba(255, 255, 255, .45); border-bottom: 2px dashed rgba(238, 243, 238, .35); padding-bottom: 8px; }
#screen-draft .d3-chalk .bo-row { background: transparent !important; border-left: 0 !important; border-bottom: 1px dashed rgba(238, 243, 238, .14); border-radius: 0 !important; }
#screen-draft .d3-chalk .bo-row * { font-family: 'Special Elite', 'Oswald', monospace !important; color: #e8eee8 !important; text-shadow: 0 0 1.5px rgba(255, 255, 255, .4); }
#screen-draft .d3-chalk .bo-row span[style*="font-size:9px"] { font-size: 14px !important; }
#screen-draft .d3-chalk .bo-row > *:first-child { font-size: 15px !important; color: #ffe27a !important; min-width: 20px; }
#screen-draft .d3-chalk button { font-family: 'Special Elite', 'Oswald', monospace !important; font-size: 14px !important; color: #eef3ee !important;
  border: 2px dashed rgba(238, 243, 238, .4) !important; background: rgba(255, 255, 255, .04) !important; letter-spacing: 1px; }

/* the picked card flying to the lineup card */
.d3-fly { transition: transform .55s cubic-bezier(.5, 0, .3, 1), opacity .55s ease-in; transform-origin: center; }

/* ── phone ── */
@media (max-width: 768px) {
  #screen-draft #draft-col-cards { border-width: 7px; min-height: 0; padding: 14px 6px 12px !important; }
  #screen-draft #draft-col-cards::before { width: 160px; height: 160px; }
  .draft-pack.d3-pack-live { width: 220px !important; height: 290px !important; }
  .d3-rail { gap: 4px; height: 38px; }
  .d3-rp { width: 18px; height: 26px; } .d3-rp.is-now { width: 24px; height: 34px; }
  .d3-rp b { font-size: 9px; }
  #screen-draft .d3-head .d3-intro { font-size: 11.5px !important; }
  #screen-draft .d3-lineup, #screen-draft .d3-chalk { transform: none; }
  #screen-draft .d3-chalk { border-width: 7px !important; }
}
@media (prefers-reduced-motion: reduce) { .d3-rp.is-now, .d3-glow { animation: none !important; } }
/* the swipe hint only makes sense once the cards are out */
#screen-draft #draft-col-cards:has(.draft-pack) .draft-swipe-hint { display: none !important; }

/* fit the whole table on one desktop screen (user: no scroll at 1920 × 945) */
@media (min-width: 769px) {
  #screen-draft .d3-head { padding: 0 0 8px !important; }
  #screen-draft .d3-head .d3-intro { padding: 4px 14px !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 1.3 !important; }
  #screen-draft .d3-head .d3-round { margin-bottom: 2px !important; font-size: 11px !important; }
  #screen-draft .d3-head .md\:hidden { display: none !important; }      /* the lineup card already shows the filled positions */
  #screen-draft .d3-rail { margin: 2px auto 6px; height: 42px; }
  #screen-draft .d3-head .d3-tent { padding: 3px 16px !important; font-size: 13px !important; }
  #screen-draft .d3-lineup > div[id^="draft-slot-"] { padding: 3px 8px !important; margin-bottom: 4px !important; }
  #screen-draft .d3-lineup > div[id^="draft-slot-"] > span:first-child { height: 24px; min-width: 28px !important; }
  #screen-draft .d3-lineup > div:first-child { padding: 7px 0 !important; margin-bottom: 8px !important; }
  #screen-draft .d3-chalk .bo-row { margin-bottom: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  #screen-draft #draft-col-cards { min-height: 0; padding-top: 14px !important; padding-bottom: 12px !important; }
  #screen-draft #draft-col-cards > .btn-secondary { margin-top: 8px !important; }
}

/* the same 3D pack in the 162-0 Hobby Box and in the Dex */
.c162-sealed .c162-pack3d { margin: 6px auto 34px; position: relative; z-index: 2; cursor: pointer; }
.c162-sealed .c162-pack3d:not(.d3-pack-live) { display: none; }          /* until it is drawn, the flat pack shows */
.c162-sealed:has(.c162-pack3d.d3-pack-live) .c162-pack,
.c162-sealed:has(.c162-pack3d.d3-pack-live) .c162-sealed-rays { display: none !important; }
.c162-sealed.c162-opening3d .c162-sealed-cta { visibility: hidden; }
#dex-pack-overlay .dex3d-pack { cursor: pointer; }
#dex-pack-overlay .dex3d-pack:not(.d3-pack-live) { display: none; }