@font-face { font-family:'Noto Sans JP Rewards'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./assets/noto-sans-jp-rewards.woff2') format('woff2'); }
:root { color-scheme:dark; --gold:#d8b56e; --cream:#ede2bb; font-family:'Noto Sans JP Rewards',Arial,'Yu Gothic','Meiryo',sans-serif; background:#080906; color:var(--cream); }
* { box-sizing:border-box; }
html, body { margin:0; }
body { min-height:100svh; background:radial-gradient(ellipse at 8% 0,#71532436,transparent 28%),radial-gradient(ellipse at 96% 0,#72552228,transparent 26%),#080906; }
a { -webkit-tap-highlight-color:transparent; }
h1,h2,h3,p,figure { margin:0; }
.back, .live-status, .viewport { width:min(100%,1152px); margin-inline:auto; padding-left:16px; padding-right:16px; }
.back { display:flex; align-items:center; gap:8px; min-height:44px; padding-top:10px; padding-bottom:6px; text-decoration:none; color:#e4d9bf; font-size:.9375rem; letter-spacing:1px; }
.back span { font-size:1.375rem; line-height:1; }
.back:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.live-status { padding-bottom:10px; color:#d8b56e; font-size:.9375rem; letter-spacing:.04em; }
.viewport { padding-bottom:28px; }
.poster { width:100%; min-width:0; background:radial-gradient(ellipse at 2% 0%,#71532450,transparent 19%),radial-gradient(ellipse at 99% 1%,#72552240,transparent 19%),#0b0c08; border-radius:18px; padding:0 0 16px; }
.art { --art-scale:1; display:block; width:calc(var(--w) * var(--art-scale)); height:calc(var(--h) * var(--art-scale)); background-image:url('./assets/rewards-art-hd.png'); background-size:calc(726px * var(--art-scale)) calc(800px * var(--art-scale)); background-position:calc(-1 * var(--x) * var(--art-scale)) calc(-1 * var(--y) * var(--art-scale)); background-repeat:no-repeat; flex-shrink:0; }
.hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:4px; align-items:center; text-align:center; padding:8px 4px 12px; }
.hero h1 { grid-column:2; font-size:clamp(1.2rem,5.2vw,1.95rem); line-height:1.35; letter-spacing:-.03em; font-weight:800; color:#e0bb74; text-shadow:0 2px 4px #000; }
.hero p { grid-column:2; margin-top:8px; padding-top:8px; background:linear-gradient(90deg,transparent,#a57e3b66,transparent) 50% 0 / min(80%,28rem) 1px no-repeat; font-size:.9375rem; font-weight:700; color:#dbb778; line-height:1.5; }
.decor { pointer-events:none; mix-blend-mode:screen; }
.decor-ballot { grid-column:1; grid-row:1 / span 2; align-self:start; --art-scale:.4; }
.decor-gift { grid-column:3; grid-row:1 / span 2; align-self:start; --art-scale:.4; }
.decor-wreath-l, .decor-wreath-r { display:none; }
.panel { position:relative; border:1px solid #846338; border-radius:15px; background:linear-gradient(108deg,#16160d55,#090b08aa 40%,#16150c55); box-shadow:inset 0 0 0 2px #070906,inset 0 0 0 3px #66502d88,inset 0 0 19px #a27a2711; }
.panel::after { content:''; position:absolute; inset:5px; pointer-events:none; border:1px solid #8063373d; border-radius:10px; }
.rewards { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:0 0 12px; }
.tier { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; padding:12px 14px 16px; }
.days { display:flex; justify-content:center; align-items:center; gap:6px; min-height:28px; width:100%; font-size:.9375rem; color:#d7b473; background:radial-gradient(ellipse,#b1833625,transparent 70%); }
.laurel { width:12px; height:25px; color:#b99a55; }
.laurel.right { transform:scaleX(-1); }
.tier h2 { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:4px; font-size:1.125rem; font-weight:700; line-height:1.3; color:var(--gold); }
.tier h2 svg { flex-shrink:0; overflow:visible; }
.tier h2 .icon { width:19px; height:20px; }
.choice { margin:4px 0 10px; font-size:.8125rem; font-weight:700; color:#dfc38b; }
.tier-body { display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%; flex:1; }
.item { display:flex; flex-flow:row wrap; align-items:center; gap:12px; min-width:0; }
.item p { flex:1 1 8rem; min-width:0; text-align:left; font-size:.9375rem; line-height:1.45; font-weight:600; }
.voucher-block { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; margin-top:auto; }
.voucher { position:relative; width:132px; height:52px; border:1px solid #76613f; border-radius:5px; background:radial-gradient(ellipse at 28% -35%,#b89b6240,transparent 75%),linear-gradient(175deg,#493c27 0%,#302718 48%,#19160f 100%); box-shadow:0 2px 4px #0009,0 0 1px #b69a6655,inset 0 1px 1px #ddc18b45,inset 0 -1px 1px #a58b4f30,inset 1px 0 1px #c1a47020; color:#e7d8a3; display:grid; place-items:center; font:28px/1 'Times New Roman','Yu Mincho',serif; text-shadow:0 1px 1px #0009,0 0 1px #f0d89580; }
.tier:not(.monthly) .voucher::before { content:''; position:absolute; inset:1px; border-radius:3px; pointer-events:none; opacity:.13; mix-blend-mode:soft-light; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h120v60H0z'/%3E%3C/svg%3E"); }
.voucher::after { content:''; position:absolute; right:2px; top:2px; width:14px; height:14px; opacity:.38; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%239e7d42' stroke-width='1'%3E%3Cpath d='M23 1H12C4 1 4 8 9 9s8-4 4-5c-5-1-4 8 2 10s8 5 5 7c-4 3-8-1-6-4M22 2v8c0 4-5 4-5 1M1 1h5M1 1v5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.voucher-value { display:flex; align-items:baseline; gap:2px; white-space:nowrap; transform:scaleX(.92); position:relative; z-index:1; }
.yen { font-size:16px; letter-spacing:0; }
.amount { letter-spacing:-.9px; }
.voucher-copy { width:100%; font-size:.9375rem; line-height:1.4; }
.payment { display:block; margin-top:3px; font-size:.75rem; color:#d9c292; }
.monthly .voucher { width:148px; height:72px; font-size:34px; color:#201c0e; background:radial-gradient(ellipse at 24% 12%,#f3dfa1a6,transparent 70%),linear-gradient(155deg,#e8ca82 10%,#dbb668 65%,#c39a4e); border-color:#c5a365; text-shadow:none; box-shadow:inset 0 0 0 1px #f4dca380,inset 0 0 0 2px #a77c3433,0 2px 5px #0008; overflow:hidden; }
.monthly .voucher::before { content:''; position:absolute; inset:2px; border-radius:3px; pointer-events:none; opacity:.12; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.55' d='M0 0h150v100H0z'/%3E%3C/svg%3E"); }
.monthly .voucher::after { inset:0; width:auto; height:auto; opacity:1; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20105%2066%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2397702f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke-width%3D%22.7%22%20opacity%3D%22.55%22%20d%3D%22M24%2064C14%2057%207%2051%202%2043M3%2061C4%2050%2012%2045%2017%2048C22%2052%209%2059%205%2060C10%2051%2017%2049%2017%2051M5%2062C11%2055%2023%2053%2024%2057C25%2062%2012%2063%207%2062M15%2064C21%2060%2029%2060%2031%2064M2%2054C6%2048%206%2044%203%2043M88%202C93%205%2089%2010%2096%2012C100%2013%2099%2016%20103%2017M93%202C91%205%2094%208%2097%207C101%205%2096%202%2095%205C93%2010%2099%2011%20103%2010M103%204C99%201%2097%206%20101%207%22%2F%3E%3Cpath%20stroke-width%3D%22.35%22%20opacity%3D%22.4%22%20d%3D%22M3%2057C7%2048%2015%2045%2019%2049C23%2054%2011%2061%206%2061M8%2064C15%2057%2023%2055%2027%2059M87%202C91%208%2087%2010%2094%2014C99%2015%2098%2018%20103%2019%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; }
.monthly .voucher-value { transform:scaleX(.86); gap:1px; font-weight:600; }
.monthly .yen { font-size:15px; }
.monthly .payment { margin-top:4px; }
.special-body { align-items:center; }
.special-extra { display:flex; flex-direction:column; align-items:center; gap:4px; }
.special-copy { font-size:clamp(1.25rem,5vw,1.5rem); letter-spacing:-.02em; line-height:1.25; font-weight:700; color:#d7b06a; }
.plus { font-size:32px; line-height:1; color:#d8ad60; font-weight:700; }
.special-end { font-size:1rem; line-height:1.4; font-weight:700; color:#d7b16d; }
.lower { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.rules { padding:16px 16px 14px 54px; }
.rules h2 { display:flex; align-items:center; justify-content:center; gap:8px; font-size:1rem; font-weight:600; color:#d5b171; margin:0 0 10px -38px; text-shadow:0 0 3px #e9bd6333; }
.rules-sparkle { flex:none; width:14px; height:20px; background:url('./assets/rules-sparkle.svg') center/contain no-repeat; filter:drop-shadow(0 0 1px #efc66c70); }
.rule { position:relative; margin-bottom:12px; }
.rule:last-child { margin-bottom:0; }
.rule h3 { font-size:.9375rem; line-height:1.35; font-weight:700; }
.rule p { font-size:.9375rem; line-height:1.55; }
.rule .icon { position:absolute; width:24px; height:26px; left:-36px; top:2px; color:#d1ac68; fill:none; stroke:currentColor; stroke-width:1.5; }
.pool { padding:16px 14px 14px; text-align:center; background:radial-gradient(ellipse at 50% 42%,#74512133,transparent 60%),linear-gradient(130deg,#101109,#0a0c09); }
.pool h2 { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; color:#d8b473; font-size:clamp(1.05rem,4.4vw,1.25rem); line-height:1.4; }
.flourish { display:inline-block; width:48px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.flourish:last-child { transform:scaleX(-1); }
.pool-intro { margin:8px 0 12px; font-size:.9375rem; line-height:1.5; color:#dfc48b; }
.grand { display:flex; flex-direction:column; align-items:center; gap:10px; }
.grand-copy { display:flex; align-items:center; justify-content:center; gap:12px; }
.car-slot { display:block; width:100%; max-width:560px; }
.art.car { width:100%; height:auto; aspect-ratio:448 / 191; background-image:url('./assets/rewards-car-stage-v2.png'); background-size:contain; background-position:center; background-repeat:no-repeat; pointer-events:none; }
.car-label { font-size:1rem; color:#eee1b8; line-height:1.35; text-align:left; }
.car-label small { display:block; font-size:.75rem; font-weight:400; }
.medal { position:relative; flex-shrink:0; width:52px; height:52px; background:linear-gradient(130deg,#f4e4a4,#c69942); color:#40331a; display:grid; place-items:center; font-size:13px; font-weight:800; line-height:1; white-space:nowrap; clip-path:polygon(50% 0,61% 7%,75% 6%,81% 18%,94% 25%,93% 39%,100% 50%,93% 61%,94% 75%,81% 82%,75% 94%,61% 93%,50% 100%,39% 93%,25% 94%,19% 82%,6% 75%,7% 61%,0 50%,7% 39%,6% 25%,19% 18%,25% 6%,39% 7%); }
.medal::after { content:''; position:absolute; inset:5px; border:1px solid #9b763b; border-radius:50%; }
.prizes { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:12px; }
.prize { position:relative; min-width:0; min-height:64px; padding:8px 12px; border:1px solid #8a6e43; border-radius:9px; background:linear-gradient(135deg,#4d402321,#0d100d); display:flex; flex-direction:row; align-items:center; gap:12px; }
.prize .art { --crop-x:30; --crop-w:400; --show-h:56px; --sprite-scale:calc(var(--show-h) / 340); width:calc(var(--crop-w) * var(--sprite-scale)); height:var(--show-h); margin:0; background-image:url('./assets/rewards-prizes-hd.png'); background-size:calc(2172 * var(--sprite-scale)) calc(724 * var(--sprite-scale)); background-position:calc(-1 * var(--crop-x) * var(--sprite-scale)) calc(var(--show-h) / 2 - 365 * var(--sprite-scale)); }
.prize:nth-child(2) .art { --crop-x:470; --crop-w:315; }
.prize:nth-child(3) .art { --crop-x:835; --crop-w:420; }
.prize:nth-child(4) .art { --crop-x:1290; --crop-w:385; }
.prize:nth-child(5) .art { --crop-x:1720; --crop-w:425; }
.prize figcaption { flex:1; min-width:0; text-align:left; font-size:.9375rem; line-height:1.4; color:#ede1b6; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }

@media (max-width:374px) {
  .back, .live-status, .viewport { padding-left:12px; padding-right:12px; }
  .flourish { display:none; }
}

@media (min-width:600px) {
  .rewards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .tier-long { grid-column:1 / -1; }
  .special-body { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"gift copy" "gift extra"; justify-content:center; align-items:center; column-gap:28px; row-gap:4px; max-width:34rem; margin-inline:auto; }
  .special-gift { grid-area:gift; --art-scale:1; }
  .special-copy { grid-area:copy; text-align:left; }
  .special-extra { grid-area:extra; align-items:flex-start; }
  .special-end { text-align:left; }
  .prizes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prize:last-child { grid-column:1 / -1; }
}

@media (min-width:700px) {
  .hero { display:block; position:relative; padding:20px 130px 18px; }
  .hero p { font-size:1rem; }
  .decor { position:absolute; }
  .decor-ballot { left:0; top:0; --art-scale:.72; }
  .decor-gift { right:0; top:0; --art-scale:.72; }
  .decor-wreath-l, .decor-wreath-r { display:block; top:24px; --art-scale:1; }
  .decor-wreath-l { left:18%; }
  .decor-wreath-r { right:18%; left:auto; }
}

@media (min-width:900px) {
  .lower { grid-template-columns:minmax(280px,.42fr) minmax(0,1fr); align-items:stretch; }
}

@media (min-width:1024px) {
  .rewards { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
  .tier-long { grid-column:auto; }
  .tier { padding:10px 8px 14px; }
  .choice { font-size:.75rem; }
  .item { flex-direction:column; gap:6px; }
  .item .art { --art-scale:.8; }
  .item p { flex:0 1 auto; text-align:center; font-size:.8125rem; line-height:1.35; }
  .special-body { display:flex; flex-direction:column; max-width:none; margin:0; }
  .special-copy { font-size:1.25rem; text-align:center; }
  .special-extra { align-items:center; }
  .special-end { font-size:.875rem; text-align:center; }
  .special-gift { --art-scale:.7; }
  .prizes { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .prize { flex-direction:column; justify-content:flex-start; gap:4px; padding:8px 6px 10px; min-height:0; }
  .prize:last-child { grid-column:auto; }
  .prize figcaption { text-align:center; font-size:.75rem; }
  .pool h2 { font-size:1.25rem; }
}

@media print {
  :root { background:#fff; }
  .back, .live-status { display:none; }
  .poster { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}