:root {
  --bg: #0e1116; --panel: #171c24; --panel2: #1f2632; --line: #2a3342;
  --ink: #eef2f7; --mut: #9aa6b8; --acc: #ffb02e; --acc2: #4cc3ff;
  --good: #3ddc84; --warn: #ffb02e; --bad: #ff6b6b;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  line-height: 1.55;
}
a { color: var(--acc2); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 18px; }
header.site { border-bottom: 1px solid var(--line); background: #0b0e13; position: sticky; top: 0; z-index: 10; }
.nav { display: flex; align-items: center; gap: 18px; padding: 12px 18px; max-width: 960px; margin: 0 auto; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: .5px; }
.brand span { color: var(--acc); }
.nav a.nlink { color: var(--mut); text-decoration: none; font-size: 15px; }
.nav a.nlink:hover, .nav a.nlink.active { color: var(--ink); }
.hero { padding: 44px 0 26px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 10px; line-height: 1.1; }
.hero p { color: var(--mut); font-size: 17px; max-width: 640px; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 26px 0; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-decoration: none; color: var(--ink); display: block;
}
a.card:hover { border-color: var(--acc); }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--mut); font-size: 14.5px; }
.card .tag { display: inline-block; font-size: 12px; color: var(--acc); border: 1px solid var(--acc);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 18px 0; }
.panel h2 { margin: 0 0 6px; font-size: 21px; }
.panel .sub { color: var(--mut); font-size: 14px; margin: 0 0 14px; }
.field { margin: 12px 0; }
.field label { display: block; font-size: 13.5px; color: var(--mut); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.inputs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .inputs2 { grid-template-columns: 1fr; } }
.result {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-top: 16px;
}
.result .big { font-size: 34px; font-weight: 800; }
.result .row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 15px; }
.result .row:first-of-type { border-top: none; }
.verdict { font-size: 20px; font-weight: 800; margin: 4px 0 6px; }
.v-good { color: var(--good); } .v-mid { color: var(--warn); } .v-bad { color: var(--bad); }
.fine { font-size: 12.5px; color: var(--mut); }
.est { display: inline-block; font-size: 11px; font-weight: 700; color: #0e1116; background: var(--warn);
  border-radius: 4px; padding: 1px 7px; vertical-align: middle; margin-left: 6px; letter-spacing: .4px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 10px 0; }
table.data th, table.data td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--mut); font-weight: 600; font-size: 13px; }
.btn {
  display: inline-block; background: var(--acc); color: #14100a; font-weight: 800; border: none;
  border-radius: 12px; padding: 13px 26px; font-size: 16px; cursor: pointer; margin-top: 8px;
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tabs { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--mut); cursor: pointer; font-size: 15px; font-weight: 600; }
.tab.active { background: var(--acc); color: #14100a; border-color: var(--acc); }
.pack-stage { perspective: 900px; }
.cardrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; justify-content: center; }
.tcard {
  width: 104px; height: 146px; border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 8px;
  font-size: 12px; font-weight: 700; line-height: 1.3; color: #0e1116;
  animation: flipin .45s ease backwards; border: 2px solid rgba(255,255,255,.25);
}
.tcard small { font-weight: 600; font-size: 10.5px; opacity: .85; }
@keyframes flipin { from { transform: rotateY(90deg) scale(.85); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
.r-c { background: linear-gradient(135deg, #c8ccd2, #9aa0a8); }
.r-u { background: linear-gradient(135deg, #7fd08a, #4a9e57); }
.r-r { background: linear-gradient(135deg, #8fb8ff, #4a7dd6); color: #0b1526; }
.r-foil { background: linear-gradient(135deg, #e8f4ff, #9fd0ff); color: #0b1526; }
.r-l { background: linear-gradient(135deg, #ffd27f, #e09b2d); }
.r-sr { background: linear-gradient(135deg, #c9a7ff, #8a5cf6); color: #fff; }
.r-aa { background: linear-gradient(135deg, #ff9de2, #c93df0); color: #fff; }
.r-leg { background: linear-gradient(135deg, #ffb02e, #ff7a1a); }
.r-lr { background: linear-gradient(135deg, #ffe27f, #d6a92d); }
.r-sec { background: linear-gradient(135deg, #ff8a8a, #d63d3d); color: #fff; }
.r-ench { background: linear-gradient(135deg, #a7f3ff, #4cc3ff 40%, #b98cff); animation: flipin .45s ease backwards, glow 1.6s ease-in-out infinite alternate; }
.r-manga { background: linear-gradient(135deg, #f5f5f5, #b9b9b9 60%, #efefef); }
.r-tok { background: linear-gradient(135deg, #8b93a1, #5c6370); color: #fff; }
@keyframes glow { from { box-shadow: 0 0 6px #4cc3ff; } to { box-shadow: 0 0 22px #b98cff; } }
.stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 14px; }
.stat b { font-size: 19px; display: block; }
footer.site { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 0 40px; color: var(--mut); font-size: 13px; }
.setlist { display: grid; gap: 10px; margin: 14px 0; }
.setrow { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; }
.setrow b { font-size: 15.5px; }
.setrow .rel { color: var(--mut); font-size: 13px; }

/* ============ PackMath v2: trading-terminal theme ============ */
:root {
  --bg0: #07090d;
  --gold: #ffb02e;
  --gold2: #ffd97f;
}
body {
  background:
    radial-gradient(1100px 480px at 12% -4%, rgba(255,176,46,.10), transparent 60%),
    radial-gradient(900px 420px at 88% -6%, rgba(76,195,255,.08), transparent 60%),
    radial-gradient(700px 700px at 50% 110%, rgba(138,92,246,.06), transparent 60%),
    var(--bg0);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
}
.wrap, header.site, footer.site { position: relative; z-index: 1; }
header.site { background: rgba(7,9,13,.82); backdrop-filter: blur(10px); }
.brand { text-shadow: 0 0 22px rgba(255,176,46,.35); }

.hero { padding: 56px 0 30px; }
.hero h1 {
  background: linear-gradient(180deg, #fff 30%, var(--gold2) 85%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .3px;
}
.statstrip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.statstrip .pill {
  font-size: 13px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  background: rgba(255,255,255,.03);
}
.statstrip .pill b { color: var(--gold); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--panel);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.card:hover {
  transform: translateY(-3px); border-color: var(--gacc, var(--acc));
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px var(--gacc, var(--acc)), 0 0 24px -6px var(--gacc, var(--acc));
}
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%), var(--panel);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.7);
}
.gpanel { border-top: 3px solid var(--gacc, var(--acc)); }
.gpanel h2 .rankno { color: var(--gacc, var(--acc)); }

.btn {
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, #e89a1f);
  box-shadow: 0 6px 20px -6px rgba(255,176,46,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 8px 26px -6px rgba(255,176,46,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold2); }

/* per-game accent colors — the "ten worlds" twist */
[data-game="magic"]        { --gacc: #d4a24e; }
[data-game="pokemon"]      { --gacc: #ffcb05; }
[data-game="onepiece"]     { --gacc: #ff5a5a; }
[data-game="yugioh"]       { --gacc: #b678ff; }
[data-game="lorcana"]      { --gacc: #7b8cff; }
[data-game="riftbound"]    { --gacc: #4cc3ff; }
[data-game="gundam"]       { --gacc: #ff7a3c; }
[data-game="dragonball"]   { --gacc: #ff9d2e; }
[data-game="digimon"]      { --gacc: #3ddc84; }
[data-game="fleshandblood"]{ --gacc: #ff4d5e; }
.tab.active { background: var(--gacc, var(--acc)); border-color: var(--gacc, var(--acc));
  box-shadow: 0 0 18px -4px var(--gacc, var(--acc)); }

/* ---- pack-opening drama ---- */
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,215,130,.85), rgba(255,176,46,.25) 45%, transparent 70%);
}
#flash.go { animation: flashpop .7s ease-out; }
@keyframes flashpop { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.packback {
  width: 150px; height: 210px; margin: 10px auto; border-radius: 14px;
  background: linear-gradient(135deg, #232b38, #12161d 60%, #1d2532);
  border: 2px solid var(--gacc, var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--gold2); text-align: center;
  box-shadow: 0 0 34px -6px var(--gacc, var(--gold));
}
.packback.ripping { animation: shake .55s ease-in-out; }
@keyframes shake {
  0%,100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-4deg) scale(1.04); }
  40% { transform: rotate(4deg) scale(1.07); }
  60% { transform: rotate(-3deg) scale(1.05); }
  80% { transform: rotate(2deg) scale(1.03); }
}
.tcard.god {
  transform: scale(1.14);
  box-shadow: 0 0 30px 4px var(--gacc, var(--gold)), 0 0 70px 10px rgba(255,176,46,.35);
  animation: flipin .45s ease backwards, godpulse 1.1s ease-in-out .45s infinite alternate; z-index: 2;
}
@keyframes godpulse { from { box-shadow: 0 0 18px 2px var(--gacc, var(--gold)); } to { box-shadow: 0 0 44px 10px var(--gacc, var(--gold)); } }
.tcard.slowroll { animation: flipin .9s cubic-bezier(.2,.7,.3,1.2) backwards; }
.sharebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.sharebar .fine { flex-basis: 100%; }

/* ---- daily pack + vault ---- */
.countpill {
  display: inline-block; font-variant-numeric: tabular-nums; font-weight: 800;
  background: rgba(255,176,46,.12); border: 1px solid var(--gold); color: var(--gold2);
  border-radius: 999px; padding: 5px 16px; font-size: 15px;
}
.streakflame { font-size: 15px; font-weight: 800; color: var(--gold2); }
.vaultgrid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 2px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.faq summary:hover { color: var(--gold2); }
.faq p { color: var(--mut); margin: 8px 0 4px; font-size: 15px; }
@media (max-width: 560px) {
  .hero { padding: 40px 0 22px; }
  .packback { width: 124px; height: 174px; }
}