/* 抽選BOXナビ — トレカ風デザイン（パック・ホロ・タイプ色） */
:root{
  --bg:#EEF1FA; --bg-deep:#E2E7F5; --surface:#FFFFFF; --ink:#151A33; --muted:#5E6584; --line:#D5DBEC;
  --accent:#4B3FD9; --accent-ink:#FFFFFF;
  --holo-a:#5FE1F2; --holo-b:#B48CFF; --holo-c:#FF8BC6; --holo-d:#FFE27A;
  --gain:#0F8A4F; --gain-soft:#DDF4E7; --warn:#B25E00; --warn-soft:#FFEFD6; --loss:#C52E3A; --loss-soft:#FDE3E5;
  --t-gold:#E9B31B; --t-psy:#9B5CF5; --t-grass:#1FAF7A; --t-water:#2F8BF0; --t-fire:#F0642F;
  --f-display:"Dela Gothic One","Zen Maru Gothic",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --f-num:"Rubik","Zen Maru Gothic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C0F22; --bg-deep:#070916; --surface:#161B36; --ink:#EEF0FF; --muted:#9CA3C9; --line:#2A3160;
  --accent:#8F86FF; --accent-ink:#0C0F22;
  --gain:#4FD99A; --gain-soft:#12331F; --warn:#FFB54D; --warn-soft:#3A2810; --loss:#FF7A84; --loss-soft:#3B1519;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65;font-weight:500;
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);background-size:22px 22px}
img{max-width:100%;display:block}
a{color:var(--accent)}
.wrap{max-width:820px;margin:0 auto;padding-inline:16px;padding-block:16px 96px;display:flex;flex-direction:column;gap:22px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.holo{background:linear-gradient(115deg,var(--holo-a),var(--holo-b) 30%,var(--holo-c) 55%,var(--holo-d) 80%,var(--holo-a));background-size:220% 220%}
@media (prefers-reduced-motion:no-preference){.holo{animation:sheen 9s linear infinite}}
@keyframes sheen{to{background-position:220% 0}}
button{font:inherit}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ヘッダー（ブースターパック） */
.pack{position:relative;border-radius:22px;padding:22px 20px 20px;overflow:hidden;color:#141833;isolation:isolate}
.pack .holo-bg{position:absolute;inset:0;z-index:-2}
.pack::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 2px,transparent 2px 9px);mix-blend-mode:overlay}
.crimp{position:absolute;left:0;right:0;height:10px;background:
  linear-gradient(135deg,transparent 50%,var(--bg) 50%) 0 0/12px 10px repeat-x,linear-gradient(225deg,transparent 50%,var(--bg) 50%) 0 0/12px 10px repeat-x}
.crimp.top{top:0}.crimp.bottom{bottom:0;transform:scaleY(-1)}
.pack-inner{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.eyebrow{font-family:var(--f-num);font-weight:800;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.logo{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,8vw,3rem);line-height:1.05;margin:0;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.logo .box{display:inline-block;background:#141833;color:#FFF6C9;padding:0 .18em;border-radius:.16em;transform:rotate(-3deg);margin-inline:.06em}
.tagline{margin:0;font-weight:700;font-size:.95rem;max-width:32em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.74rem;font-weight:700;background:rgba(255,255,255,.75);color:#141833;border-radius:999px;padding:3px 10px}

/* タブ（下部固定） */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-top:2px solid var(--line)}
.tabbar nav{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tabbar button{border:0;background:transparent;color:var(--muted);font-weight:900;font-size:.8rem;padding:6px 4px;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button .ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;color:#fff;background:var(--muted)}
.tabbar button[aria-selected="true"]{color:var(--ink);background:var(--bg-deep)}
.tabbar button[aria-selected="true"] .ico{background:var(--accent)}

.sec-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.08rem;display:flex;align-items:center;gap:8px}
.sec-title::before{content:"";width:10px;height:10px;border-radius:3px;transform:rotate(45deg);background:var(--accent)}
.lead{margin:0;color:var(--muted);font-size:.86rem}
.note{font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start;margin:0}
.note::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--warn-soft);color:var(--warn);font-family:var(--f-num);font-weight:800;font-size:.72rem;display:grid;place-items:center;margin-top:2px}
.none{color:var(--muted);font-size:.84rem;margin:0}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.seg{display:flex;gap:4px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--muted);font-size:.84rem;font-weight:900;padding:6px 13px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.row-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

/* サマリー */
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.token{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;min-width:0}
.orb{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:.9rem;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35)}
.orb.g{background:var(--t-grass)}.orb.f{background:var(--t-fire)}.orb.w{background:var(--t-water)}
.token small{display:block;color:var(--muted);font-size:.7rem;font-weight:700;line-height:1.3}
.token b{font-family:var(--f-display);font-weight:400;font-size:1.4rem;line-height:1.1}

.row{display:grid;grid-template-columns:3.8em minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:7px;border-bottom:1px dashed var(--line);font-size:.86rem}
.row:last-child{border-bottom:0}
.row .d{font-family:var(--f-num);font-weight:700;font-size:.8rem;line-height:1.2;text-align:center;background:var(--bg-deep);border-radius:8px;padding:4px 0}
.row .t{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t small{display:block;color:var(--muted);font-weight:500;font-size:.74rem;overflow:hidden;text-overflow:ellipsis}

.pill{font-size:.72rem;font-weight:900;border-radius:999px;padding:3px 9px;white-space:nowrap}
.pill.open{background:var(--gain-soft);color:var(--gain)}
.pill.soon{background:var(--warn-soft);color:var(--warn)}
.pill.upcoming{background:var(--bg-deep);color:var(--accent)}
.pill.closed{background:var(--bg-deep);color:var(--muted)}

/* 商品カード（トレカ風） */
.list{display:flex;flex-direction:column;gap:22px}
.tcg{--tone:var(--t-gold);position:relative;border-radius:20px;padding:7px;background:var(--tone);box-shadow:0 10px 24px -14px rgba(20,24,60,.55);transition:transform .25s ease}
.tcg[data-tone="psy"]{--tone:var(--t-psy)}.tcg[data-tone="grass"]{--tone:var(--t-grass)}.tcg[data-tone="water"]{--tone:var(--t-water)}.tcg[data-tone="fire"]{--tone:var(--t-fire)}
.tcg-face{position:relative;border-radius:14px;background:var(--surface);overflow:hidden}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:20px;mix-blend-mode:soft-light;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.85),transparent 45%),
  linear-gradient(115deg,transparent 20%,rgba(95,225,242,.55) 38%,rgba(255,139,198,.5) 52%,rgba(255,226,122,.5) 64%,transparent 80%)}
.tcg:hover .glare{opacity:1}
.tcg-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px 10px}
.thumb{width:56px;aspect-ratio:1;border-radius:10px;background:var(--bg-deep);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:.6rem;font-weight:900}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.tcg-name{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.08rem;line-height:1.3;text-wrap:balance}
.tcg-sub{margin:0;color:var(--muted);font-size:.76rem;font-weight:700}
.hp{text-align:right;line-height:1}
.hp small{display:block;font-size:.62rem;font-weight:900;letter-spacing:.12em;color:var(--muted);margin-bottom:3px}
.hp b{font-family:var(--f-num);font-weight:800;font-size:1.5rem;color:var(--gain)}
.hp b.neg{color:var(--loss)}
.hp .wait{font-size:.74rem;font-weight:900;color:var(--muted);border:2px dashed var(--line);border-radius:10px;padding:5px 7px;display:inline-block;line-height:1.3}
.art{margin:0 12px;border-radius:12px;padding:12px;position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;color:#141833}
.art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 2px,transparent 2px 10px);pointer-events:none}
.price{background:rgba(255,255,255,.8);border-radius:10px;padding:8px 10px;position:relative;z-index:1;min-width:0}
.price dt{font-size:.66rem;font-weight:900;letter-spacing:.1em;opacity:.7}
.price dd{margin:0;font-family:var(--f-num);font-weight:800;font-size:1.12rem}
.price dd.pending{font-family:var(--f-body);font-size:.82rem;font-weight:900;opacity:.75}
.price-note{grid-column:1/-1;position:relative;z-index:1;font-size:.72rem;font-weight:700;margin:0;opacity:.85}
.moves{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.moves h4{margin:0 4px;font-size:.7rem;font-weight:900;letter-spacing:.16em;color:var(--muted)}
.move{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:start;border-top:2px solid var(--line);padding:10px 4px 2px}
.move:first-of-type{border-top:0}
.move.closed{opacity:.65}
.energy{grid-row:1/5;width:26px;height:26px;border-radius:50%;margin-top:2px;display:grid;place-items:center;font-size:.62rem;font-weight:900;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35)}
.energy.online{background:var(--t-water)}.energy.store{background:var(--t-fire)}
.move .shop{font-weight:900;font-size:.95rem;min-width:0}
.move .cond,.move .when{grid-column:2;color:var(--muted);font-size:.76rem;min-width:0}
.move .side{grid-row:1/4;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.go{font-size:.78rem;font-weight:900;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:4px 10px;text-decoration:none;white-space:nowrap}
.tcg-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 16px 10px;border-top:2px solid var(--line);font-size:.7rem;font-weight:700;color:var(--muted)}
.tcg-foot a{font-weight:900}

/* 報告（応募・当選・落選） */
.report{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.rbtn{border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:900;cursor:pointer}
.rbtn[data-kind="won"]{border-color:var(--gain);color:var(--gain)}
.rbtn[data-kind="lost"]{border-color:var(--line);color:var(--muted)}
.rbtn[disabled]{opacity:.5;cursor:default}
.rbtn.done{background:var(--ink);color:var(--surface);border-color:var(--ink);opacity:1}
.rstat{font-size:.72rem;color:var(--muted);font-weight:700}
.meter{display:inline-block;width:64px;height:8px;border-radius:99px;background:var(--bg-deep);overflow:hidden;vertical-align:middle;margin-left:4px}
.meter i{display:block;height:100%;background:var(--gain)}

/* 投票（カードグリッド） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vcard{position:relative;border-radius:16px;padding:5px;background:var(--tone,var(--t-gold));transition:transform .2s ease}
.vcard-face{background:var(--surface);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.vcard .pic{aspect-ratio:63/88;background:var(--bg-deep);display:grid;place-items:center;position:relative;overflow:hidden}
.vcard .pic img{width:100%;height:100%;object-fit:contain;background:#fff}
.vcard .pic .ph{font-family:var(--f-display);font-size:1rem;color:var(--muted);text-align:center;padding:10px;line-height:1.3}
.vcard .rar{position:absolute;top:6px;right:6px;font-family:var(--f-num);font-weight:800;font-size:.66rem;letter-spacing:.06em;background:rgba(20,24,51,.85);color:#FFE27A;border-radius:6px;padding:2px 6px}
.vcard .meta{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
.vcard .nm{margin:0;font-weight:900;font-size:.9rem;line-height:1.3}
.vcard .st{margin:0;color:var(--muted);font-size:.68rem;font-weight:700;line-height:1.3}
.vbtn{margin-top:auto;border:0;border-radius:999px;padding:7px 10px;font-weight:900;font-size:.82rem;cursor:pointer;background:var(--ink);color:var(--surface)}
.vbtn.done{background:var(--gain);color:#fff}
.vbtn[disabled]:not(.done){opacity:.45;cursor:default}
.buy{font-size:.68rem;font-weight:900;text-align:center;text-decoration:none}

/* ランキング */
.rank{display:flex;flex-direction:column;gap:10px}
.rk{display:grid;grid-template-columns:2.4em 56px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.rk .pos{font-family:var(--f-display);font-size:1.5rem;text-align:center;line-height:1}
.rk:nth-child(1){border-color:var(--t-gold)}.rk:nth-child(1) .pos{color:var(--t-gold)}
.rk:nth-child(2) .pos{color:#9AA3B5}.rk:nth-child(3) .pos{color:#C9874B}
.rk .im{width:56px;aspect-ratio:63/88;border-radius:6px;background:var(--bg-deep);overflow:hidden}
.rk .im img{width:100%;height:100%;object-fit:contain;background:#fff}
.rk .who{min-width:0}
.rk .who b{display:block;font-size:.95rem;line-height:1.3}
.rk .who small{color:var(--muted);font-size:.72rem;font-weight:700}
.bar{height:8px;border-radius:99px;background:var(--bg-deep);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%}
.rk .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rk .v{font-family:var(--f-num);font-weight:800}
.mv{font-size:.7rem;font-weight:900}
.mv.up{color:var(--gain)}.mv.down{color:var(--loss)}.mv.new{color:var(--accent)}.mv.same{color:var(--muted)}
.share{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:.84rem;text-decoration:none;background:var(--ink);color:var(--surface);border-radius:999px;padding:8px 16px;align-self:flex-start}

.shoprate{display:flex;flex-direction:column;gap:2px}
.sr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:7px;border-bottom:1px dashed var(--line);font-size:.86rem}
.sr-row:last-child{border-bottom:0}
.sr-row b{font-family:var(--f-num)}

.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-weight:900;font-size:.86rem;border-radius:999px;padding:8px 16px;z-index:30;pointer-events:none}

footer{color:var(--muted);font-size:.74rem;display:flex;flex-direction:column;gap:4px;padding-top:8px}
footer p{margin:0}

@media (max-width:440px){
  .token{flex-direction:column;align-items:flex-start;gap:6px;padding:10px}.token b{font-size:1.2rem}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rk{grid-template-columns:2em 44px minmax(0,1fr) auto;gap:8px}.rk .im{width:44px}
  .tcg-head{grid-template-columns:auto minmax(0,1fr)}.tcg-head .hp{grid-column:1/-1;text-align:left;display:flex;gap:8px;align-items:baseline}
}
@media (prefers-reduced-motion:reduce){.tcg,.vcard{transition:none}}