:root{
  --black:#000;
  /* GameStop の実際のブランドレッド / GameStop's actual brand red is #FD0000.
     The previous #FD0000 leaned crimson and clashed against the red sections. */
  --red:#FD0000;
  --red-dark:#C40000;
  --white:#fff;
  --gray-bg:#F5F5F5;
  --gray-txt:#6B6B6B;
  --border:#E0E0E0;
  --pink:#FF4FA3;
  --cyan:#00D8E0;
  --yellow:#FFE100;
  --purple:#9B4DFF;
  --green:#007A2F;
  --header-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  /* 'Noto Sans' first so Latin glyphs (incl. Ē) come from a font that has them;
     Japanese falls through to Noto Sans JP. */
  font-family:'Noto Sans','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:var(--white);color:var(--black);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============ 装飾レイヤー / decoration layer ============ */
#floaters,#petals{
  position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;
}
#petals{z-index:58}
/* スプライトは本文を避けて空白部分にのみ配置される（chaos.js が判定）。
   位置は .fl、動きは内側の .sp が担当する — 分けないと配置と演技が競合する。
   Sprites are placed only in blank areas by chaos.js. Position lives on .fl and
   the behaviour animation on the inner .sp, so moving never fights performing. */
.fl{
  position:fixed;will-change:transform,left,top;opacity:0;
  transition:left 5s cubic-bezier(.4,0,.2,1),top 5s cubic-bezier(.4,0,.2,1),opacity .5s ease;
}
.fl.in{opacity:.95}
.sp{display:block;width:100%;height:100%;transform-origin:50% 60%}
.fl svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.22))}
.pt{position:absolute;top:-40px;will-change:transform}

/* ふるまい / behaviours */
@keyframes sp-idle{
  0%,100%{transform:translateY(0) rotate(var(--r0))}
  50%    {transform:translateY(-12px) rotate(calc(var(--r0) + 5deg))}
}
@keyframes sp-hop{
  0%,60%,100%{transform:translateY(0) scaleY(1)}
  15%{transform:translateY(-26px) scaleY(1.08)}
  30%{transform:translateY(0) scaleY(.88)}
  45%{transform:translateY(-12px) scaleY(1.04)}
}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-wobble{
  0%,100%{transform:rotate(-14deg)}
  50%    {transform:rotate(14deg)}
}
@keyframes sp-peek{
  0%,100%{transform:translateY(58%) rotate(0deg)}
  40%,60%{transform:translateY(-6%) rotate(var(--r0))}
}
@keyframes sp-sleep{
  0%,100%{transform:rotate(12deg) scale(1)}
  50%    {transform:rotate(12deg) scale(1.05)}
}
@keyframes sp-flip{
  0%,45%  {transform:scaleX(1)}
  50%,95% {transform:scaleX(-1)}
  100%    {transform:scaleX(1)}
}
@keyframes sp-shiver{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-3px,1px)}
  50%{transform:translate(3px,-1px)}
  75%{transform:translate(-2px,-2px)}
}
.b-idle  {animation:sp-idle   var(--bd) ease-in-out infinite}
.b-hop   {animation:sp-hop    var(--bd) ease-in-out infinite}
.b-spin  {animation:sp-spin   var(--bd) linear infinite}
.b-wobble{animation:sp-wobble var(--bd) ease-in-out infinite}
.b-peek  {animation:sp-peek   var(--bd) ease-in-out infinite}
.b-sleep {animation:sp-sleep  var(--bd) ease-in-out infinite}
.b-flip  {animation:sp-flip   var(--bd) ease-in-out infinite}
.b-shiver{animation:sp-shiver var(--bd) linear infinite}

/* 寝ているスプライトの Zzz / Zzz for sleeping sprites */
.zzz{
  position:absolute;top:-14%;right:-16%;font-size:60%;font-weight:900;color:var(--black);
  text-shadow:0 0 4px #fff,0 0 8px #fff;animation:sp-idle 2.4s ease-in-out infinite;
}

@keyframes bob{
  0%  {transform:translate(0,0) rotate(var(--r0))}
  25% {transform:translate(26px,-30px) rotate(calc(var(--r0) + 14deg))}
  50% {transform:translate(-18px,-52px) rotate(calc(var(--r0) - 12deg))}
  75% {transform:translate(-30px,-22px) rotate(calc(var(--r0) + 9deg))}
  100%{transform:translate(0,0) rotate(var(--r0))}
}
@keyframes cross{
  0%  {transform:translate(-22vw,0) rotate(0deg)}
  100%{transform:translate(122vw,var(--dy)) rotate(var(--spin))}
}
@keyframes fall{
  0%  {transform:translate(0,-10vh) rotate(0deg)}
  100%{transform:translate(var(--sway),110vh) rotate(720deg)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wiggle{
  0%,100%{transform:rotate(-7deg) scale(1)}
  50%    {transform:rotate(7deg) scale(1.09)}
}
@keyframes blink{50%{opacity:.15}}
@keyframes rainbow{
  0%  {border-color:var(--red)}
  25% {border-color:var(--cyan)}
  50% {border-color:var(--yellow)}
  75% {border-color:var(--pink)}
  100%{border-color:var(--red)}
}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,-3px)}
  80%{transform:translate(2px,3px)}
}
@keyframes slideL{to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.fl.bob{animation:bob var(--d) ease-in-out var(--delay) infinite}
.fl.cross{animation:cross var(--d) linear var(--delay) infinite}
.pt{animation:fall var(--d) linear var(--delay) infinite}

/* ============ マーキー / marquee ============ */
/* 赤い帯の直上・直下に赤い枠を置かない。以前は赤地に赤枠が接して濁っていた。
   No red border may touch a red section — the old red-on-red seam muddied the edge.
   Ribbons are black or white, matching GameStop's own promo bars. */
.marquee{
  background:var(--black);color:var(--white);overflow:hidden;white-space:nowrap;
  font-weight:900;font-size:15px;letter-spacing:1px;padding:8px 0;position:relative;z-index:65;
}
.marquee.alt{
  background:var(--white);color:var(--black);
  border-top:3px solid var(--black);border-bottom:3px solid var(--black);
}
.marquee div{display:inline-block;animation:slideL 18s linear infinite}
.marquee.alt div{animation:slideR 22s linear infinite}
.marquee span{padding:0 22px}
.marquee em{color:var(--red);font-style:normal}
.marquee.alt em{color:var(--red)}

/* ============ 爆発バッジ / starbursts ============ */
/* 星の内側だけにテキストを収める。日本語でも英訳後の長い文でも崩れないよう、
   寸法・余白・文字サイズをすべて --bs から算出する。
   Size, padding and font-size all derive from --bs so the label stays inside the
   star's inner area whether it holds 4 Japanese characters or a long English
   translation. Never set width/height/font-size on .burst directly. */
.burst{
  --bs:160px;
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:var(--bs);height:var(--bs);padding:calc(var(--bs) * .25);
  text-align:center;font-weight:900;color:var(--white);line-height:1.15;
  font-size:calc(var(--bs) * .095);
  overflow:hidden;overflow-wrap:normal;
  clip-path:polygon(50% 0%,58% 20%,79% 11%,76% 33%,98% 35%,82% 50%,98% 65%,76% 67%,79% 89%,58% 80%,50% 100%,42% 80%,21% 89%,24% 67%,2% 65%,18% 50%,2% 35%,24% 33%,21% 11%,42% 20%);
  animation:wiggle 1.1s ease-in-out infinite;z-index:3;pointer-events:none;
}
.burst span{display:block;max-width:100%;max-height:100%;overflow:hidden}
/* 最終手段: 縮小しても収まらない長い単語だけ途中で折る
   last resort — only break inside a word if shrinking still could not fit it */
.burst.brk span{overflow-wrap:anywhere}
.b-red{background:var(--red)}
.b-pink{background:var(--pink)}
.b-cyan{background:var(--cyan);color:var(--black)}
.b-yellow{background:var(--yellow);color:var(--black)}
.b-purple{background:var(--purple)}

/* ============ header ============ */
header{
  position:sticky;top:0;z-index:100;background:var(--black);
  height:var(--header-h);display:flex;align-items:center;
  border-bottom:3px solid var(--red);
}
.hdr{display:flex;align-items:center;gap:24px;width:100%}
.logo{
  font-weight:900;font-size:22px;letter-spacing:-.5px;color:var(--white);
  transform:skewX(-8deg);white-space:nowrap;flex-shrink:0;
}
.logo span{color:var(--red);animation:blink 1.4s steps(1) infinite}
nav{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--white);flex-shrink:0}
nav a{padding:4px 0;border-bottom:2px solid transparent;transition:border-color .15s}
nav a:hover{border-color:var(--red)}
.search{flex:1;position:relative;min-width:0}
.search input{
  width:100%;height:38px;border:0;border-radius:2px;padding:0 40px 0 14px;
  font-family:inherit;font-size:14px;background:var(--white);color:var(--black);
}
.search svg{position:absolute;right:12px;top:9px;width:20px;height:20px;fill:var(--gray-txt);pointer-events:none}

/* 検索結果 / search results dropdown */
.sbox{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:120;
  background:var(--white);border:3px solid var(--black);border-radius:2px;
  max-height:min(70vh,460px);overflow-y:auto;display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
}
.sbox.open{display:block}
.shead{
  font-size:10px;font-weight:900;letter-spacing:2px;color:var(--gray-txt);
  padding:10px 14px 6px;background:var(--gray-bg);border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
.sitem{
  display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--border);color:var(--black);
}
.sitem:last-child{border-bottom:0}
.sitem:hover,.sitem.sel{background:var(--red);color:var(--white)}
.sitem .ico{
  width:38px;height:42px;flex-shrink:0;background:#0C0C0C;border:2px solid var(--black);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sitem .ico img{width:100%;height:100%;object-fit:contain;display:block}
.sitem .ico b{color:var(--white);font-size:15px;font-weight:900}
.sitem .txt{min-width:0;flex:1}
/* .t と .s は span なので、block にしないと同じ行に繋がってしまう
   Both are spans — without display:block they run together on one line. */
.sitem .t{display:block;font-size:13.5px;font-weight:900;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .s{display:block;font-size:11.5px;color:var(--gray-txt);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem:hover .s,.sitem.sel .s{color:rgba(255,255,255,.85)}
.sitem .tag{
  font-size:9.5px;font-weight:900;letter-spacing:1px;flex-shrink:0;
  border:2px solid currentColor;padding:2px 6px;opacity:.75;
}
.snone{padding:20px 16px;font-size:13px;color:var(--gray-txt);line-height:1.8}

@media(max-width:640px){
  /* 携帯でも検索できるようにする / keep search usable on phones */
  .search{display:block}
  .logo{font-size:17px}
  .hdr{gap:12px}
  /* 入力欄が細いので、結果は画面幅いっぱいに出す。
     入力欄の幅を継ぐと商品名が「N…」まで潰れてしまう。
     The input is narrow on phones; inheriting its width truncated titles to
     "N…", so the dropdown breaks out to the full viewport instead. */
  .sbox{
    position:fixed;left:8px;right:8px;top:calc(var(--header-h) + 6px);
    max-height:62vh;
  }
  .sitem .tag{display:none}
  .sitem{padding:12px 14px}
}
.cart{position:relative;flex-shrink:0;display:flex;align-items:center}
.cart svg{width:26px;height:26px;fill:var(--white)}
.cart b{
  position:absolute;top:-6px;right:-9px;background:var(--red);color:var(--white);
  font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  animation:wiggle .8s ease-in-out infinite;
}

/* ============ hero ============ */
.hero{
  background:var(--red);color:var(--white);padding:72px 0 64px;text-align:center;
  position:relative;overflow:hidden;
}
/* 集中線 / speed lines */
.hero::before{
  content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    #fff 0deg 1.4deg, transparent 1.4deg 5deg);
  animation:spin 26s linear infinite;
}
.hero .wrap{position:relative;z-index:70}
.eyebrow{
  display:inline-block;background:var(--black);color:var(--yellow);
  font-size:12px;font-weight:900;letter-spacing:3px;padding:6px 16px;margin-bottom:24px;
  animation:blink 1s steps(1) infinite;
}
.hero h1{
  font-size:clamp(38px,8vw,82px);font-weight:900;line-height:1.1;letter-spacing:-2px;
  text-shadow:4px 4px 0 var(--black),8px 8px 0 rgba(0,0,0,.25);
  animation:shake 3.4s ease-in-out infinite;
}
.ticker{
  font-size:clamp(15px,3vw,22px);font-weight:900;letter-spacing:6px;
  margin-top:14px;color:var(--yellow);text-shadow:2px 2px 0 var(--black);
}
.ca-box{
  background:rgba(0,0,0,.62);border:3px solid var(--yellow);
  max-width:620px;margin:34px auto 0;padding:16px 18px;text-align:left;
  animation:rainbow 2.4s linear infinite;
}
.ca-box small{display:block;font-size:11px;letter-spacing:2px;opacity:.9;margin-bottom:8px}
.ca-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ca-row code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  word-break:break-all;flex:1;min-width:200px;
}
.copy{
  background:var(--yellow);color:var(--black);border:0;cursor:pointer;flex-shrink:0;
  font-family:inherit;font-size:12px;font-weight:900;padding:9px 16px;
  transition:opacity .15s;
}
.copy:hover{opacity:.82}
.cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-block;font-weight:900;font-size:16px;padding:16px 46px;
  border-radius:40px;transition:transform .12s,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-w{
  background:var(--white);color:var(--red);
  box-shadow:0 0 0 4px var(--black),0 0 0 8px var(--yellow);
  animation:wiggle 1.6s ease-in-out infinite;
}
.btn-w:hover{background:#f0f0f0}
.btn-o{border:3px solid var(--white);color:var(--white)}
.btn-o:hover{background:rgba(255,255,255,.14)}

/* ============ sections ============ */
section{padding:76px 0;position:relative;overflow:hidden}
.alt{background:var(--gray-bg)}
.head{margin-bottom:44px;position:relative;z-index:4}
.head h2{
  font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-1px;
  border-left:8px solid var(--red);padding-left:16px;line-height:1.2;
}
.head p{color:var(--gray-txt);font-size:15px;margin-top:12px;padding-left:24px}

/* ============ rewards ============ */
.tiers{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);position:relative;z-index:4}
.tier{
  background:var(--white);border:3px solid var(--border);border-radius:2px;
  padding:0 0 26px;overflow:hidden;
}
.tier-top{padding:22px;color:var(--white);text-align:center}
.tier-1 .tier-top{background:#7A5C3E}
.tier-2 .tier-top{background:#6E7376}
.tier-3 .tier-top{background:var(--black)}
.tier-3{border-color:var(--red);animation:rainbow 1.6s linear infinite}
.tier-top h3{font-size:20px;font-weight:900;letter-spacing:1px}
.tier-top small{display:block;font-size:12px;opacity:.85;margin-top:5px}
.tier ul{list-style:none;padding:22px 24px 0}
.tier li{font-size:14px;padding:9px 0 9px 24px;position:relative;color:#333}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}

/* ============ socials ============ */
/* 項目数に合わせて自動で列が決まる。1件でも横いっぱいに伸びない。
   Auto-fits the number of items — a single card no longer stretches full width. */
.socials{
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,370px));
  max-width:760px;position:relative;z-index:4;
}
.soc{
  display:flex;align-items:center;gap:18px;background:var(--white);
  border:3px solid var(--border);border-radius:2px;padding:26px 24px;
  transition:border-color .18s,transform .18s;
}
.soc:hover{transform:translateY(-3px) rotate(1deg)}
.soc svg{width:34px;height:34px;flex-shrink:0}
.soc b{display:block;font-size:17px;font-weight:700}
.soc span{font-size:13px;color:var(--gray-txt)}

/* ============ 入店ゲート / enter gate ============ */
/* クリックを受けてから音声を再生する。ブラウザは操作なしの自動再生を禁じているため、
   このゲート自体が音声を開始できる唯一のきっかけになる。
   The gate exists so audio has a user gesture to start from — browsers block
   autoplay without one, so this click is the only thing that can begin playback. */
#gate{
  position:fixed;inset:0;z-index:1000;background:var(--black);color:var(--white);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;transition:opacity .55s ease,visibility .55s ease;
}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
#gate::before{
  content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.10;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--red) 0deg 1.4deg, transparent 1.4deg 5deg);
  animation:spin 34s linear infinite;
}
.gate-in{position:relative;z-index:2;max-width:640px}
.gate-logo{
  font-weight:900;font-size:clamp(30px,7vw,60px);letter-spacing:-1.5px;
  transform:skewX(-8deg);line-height:1.1;
}
.gate-logo span{color:var(--red)}
.gate-en{
  font-size:clamp(13px,2.4vw,17px);font-weight:700;letter-spacing:2px;
  margin-top:18px;opacity:.92;
}
.gate-jp{font-size:clamp(15px,3vw,22px);font-weight:900;margin-top:6px;color:var(--yellow)}
.gate-btn{
  margin-top:34px;background:var(--red);color:var(--white);border:0;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:900;padding:18px 58px;border-radius:40px;
  box-shadow:0 0 0 4px var(--white),0 0 0 9px var(--red);
  transition:transform .12s,opacity .15s;animation:wiggle 1.8s ease-in-out infinite;
}
.gate-btn:hover{opacity:.9}
.gate-btn:active{transform:translateY(2px)}
.gate-note{font-size:11.5px;opacity:.62;margin-top:26px;line-height:1.8}

/* ============ 翻訳ウィジェット / translate widget ============ */
.tr{
  display:grid;grid-template-columns:1fr 1fr;max-width:900px;position:relative;z-index:4;
  border:3px solid var(--black);background:var(--white);
}
.trpane{padding:22px 24px 26px;min-height:150px;display:flex;flex-direction:column}
.trpane + .trpane{border-left:3px solid var(--black)}
.trlang{
  font-size:11px;font-weight:900;letter-spacing:2px;color:var(--gray-txt);
  padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--border);
}
.trtext{font-size:clamp(24px,4vw,36px);font-weight:900;line-height:1.2;letter-spacing:-.5px}
.trrom{font-size:13px;color:var(--gray-txt);font-weight:700;margin-top:8px;letter-spacing:1px}
.trfoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spk{
  display:inline-flex;align-items:center;gap:9px;background:var(--red);color:var(--white);
  border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:900;
  padding:11px 20px;border-radius:2px;transition:opacity .15s;
}
.spk:hover{opacity:.86}
.spk svg{width:17px;height:17px;fill:currentColor}
.spk.playing{animation:wiggle .5s ease-in-out infinite}
.trlink{font-size:12.5px;font-weight:700;color:var(--gray-txt);text-decoration:underline}
.trlink:hover{color:var(--red)}
.trnote{font-size:12px;color:var(--gray-txt);margin-top:14px;position:relative;z-index:4}
@media(max-width:640px){
  .tr{grid-template-columns:1fr}
  .trpane + .trpane{border-left:0;border-top:3px solid var(--black)}
}

/* ============ サブページ / sub-pages ============ */
.pagehead{
  background:var(--red);color:var(--white);padding:44px 0;position:relative;overflow:hidden;
}
.pagehead::before{
  content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.14;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    #fff 0deg 1.4deg, transparent 1.4deg 5deg);
  animation:spin 30s linear infinite;
}
.pagehead .wrap{position:relative;z-index:70}
.crumb{font-size:12px;letter-spacing:1px;opacity:.9;margin-bottom:10px}
.crumb a:hover{text-decoration:underline}
.pagehead h1{
  font-size:clamp(26px,5vw,44px);font-weight:900;letter-spacing:-1px;
  text-shadow:3px 3px 0 var(--black);
}
.pagehead p{font-size:14px;margin-top:8px;opacity:.95}

.page{padding:52px 0 76px;position:relative}
.panel{
  background:var(--white);border:3px solid var(--border);border-radius:2px;
  padding:28px 26px;position:relative;z-index:4;margin-bottom:22px;
}
.panel h2{
  font-size:19px;font-weight:900;margin-bottom:16px;
  border-left:6px solid var(--red);padding-left:12px;line-height:1.3;
}
.panel h3{font-size:15px;font-weight:900;margin:20px 0 6px}
.panel p{font-size:14px;color:#333;margin-bottom:10px}
.panel > p:last-child{margin-bottom:0}
.narrow{max-width:860px}

/* 注文照会 / order lookup */
.lookup{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lookup input{
  flex:1;min-width:200px;height:46px;padding:0 14px;font-family:inherit;font-size:14px;
  border:3px solid var(--black);border-radius:2px;background:var(--white);color:var(--black);
}
.lookup input:focus{outline:none;border-color:var(--red)}
.lookup button{
  height:46px;padding:0 30px;border:0;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:900;background:var(--red);color:var(--white);border-radius:2px;
  transition:opacity .15s;
}
.lookup button:hover{opacity:.86}

.result{animation:pop .3s ease-out}
.badge-delivered{
  display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--white);
  font-size:clamp(20px,4vw,30px);font-weight:900;padding:12px 28px;border-radius:2px;
  letter-spacing:2px;margin-bottom:6px;
}
.badge-delivered::before{content:"✓";font-size:1.1em}
.deliv-when{font-size:15px;font-weight:700;color:#333;margin-bottom:22px}

.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv th,.kv td{border-bottom:1px solid var(--border);padding:12px 4px;text-align:left;vertical-align:top}
.kv th{width:150px;color:var(--gray-txt);font-weight:700;white-space:nowrap}
.kv td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all}

.track{list-style:none;margin-top:8px}
.track li{position:relative;padding:0 0 26px 34px;font-size:14px}
.track li::before{
  content:"";position:absolute;left:6px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--green);border:3px solid var(--white);box-shadow:0 0 0 3px var(--green);
}
.track li::after{
  content:"";position:absolute;left:12px;top:22px;bottom:-4px;width:2px;background:var(--green);
}
.track li:last-child{padding-bottom:0}
.track li:last-child::after{display:none}
.track b{display:block;font-weight:900}
.track time{font-size:12.5px;color:var(--gray-txt)}

/* ============ ゲーム売り場 / game catalogue ============ */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;position:relative;z-index:4}
.chip{
  border:3px solid var(--black);background:var(--white);color:var(--black);
  font-family:inherit;font-size:13px;font-weight:900;padding:8px 18px;border-radius:40px;
  cursor:pointer;transition:background .15s,color .15s;
}
.chip:hover{background:var(--gray-bg)}
.chip[aria-pressed="true"]{background:var(--red);color:var(--white);border-color:var(--red)}

.pgrid{
  display:grid;gap:20px;grid-template-columns:repeat(4,1fr);
  position:relative;z-index:4;
}
.pcard{
  background:var(--white);border:3px solid var(--border);border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .18s,transform .18s;
}
.pcard:hover{box-shadow:0 8px 26px rgba(0,0,0,.14);transform:translateY(-4px)}
.pcard.out{opacity:.62}

/* パッケージ写真 / boxed-copy photography.
   アスペクト比が画像ごとに違うので contain で中央に置く。
   Source images vary in aspect ratio, so contain them on a dark plate. */
.cover{
  position:relative;aspect-ratio:1/1.1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#0C0C0C;border-bottom:3px solid var(--black);
}
.cover img{width:100%;height:100%;object-fit:contain;display:block}
.cover .flag{
  position:absolute;top:8px;right:8px;background:var(--yellow);color:var(--black);
  font-size:10px;font-weight:900;padding:3px 8px;letter-spacing:1px;
}
.cover .flag.used{background:var(--cyan)}
.cover .flag.out{background:var(--black);color:var(--white)}

.pbody{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.pbody h3{font-size:14.5px;font-weight:900;line-height:1.4;margin-bottom:6px}
.pmeta{font-size:11.5px;color:var(--gray-txt);margin-bottom:4px}
.prating{
  /* align-self keeps this from stretching to full width — .pbody is a flex column */
  display:inline-block;align-self:flex-start;
  border:2px solid var(--gray-txt);color:var(--gray-txt);
  font-size:10px;font-weight:900;padding:1px 6px;margin-bottom:10px;
}
.pprice{font-size:20px;font-weight:900;color:var(--red);margin-top:auto}
.pstock{font-size:11px;font-weight:900;color:var(--green);margin:2px 0 12px}
.pstock.out{color:var(--gray-txt)}
.pstock::before{content:"●";margin-right:5px;font-size:8px;vertical-align:1px}
.pbuy{
  border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:900;
  padding:11px 0;width:100%;background:var(--red);color:var(--white);border-radius:2px;
  transition:opacity .15s;
}
.pbuy:hover{opacity:.86}
.pbuy:disabled{background:var(--border);color:var(--gray-txt);cursor:not-allowed}
a.pcard .pbuy{display:block;text-align:center}
a.pcard.out .pbuy{background:var(--border);color:var(--gray-txt)}

.pcard .jsub{font-size:11.5px;color:var(--gray-txt);margin:-3px 0 6px}
a.pcard{color:inherit}

/* ============ 商品詳細 / product detail ============ */
.gdetail{
  display:grid;gap:32px;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  position:relative;z-index:4;align-items:start;
}
.gcover{
  background:#0C0C0C;border:3px solid var(--black);border-radius:2px;
  padding:0;overflow:hidden;
}
.gcover img{width:100%;height:auto;display:block}
.ginfo h2{
  font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.25;letter-spacing:-.5px;
}
.ginfo .jsub{font-size:14px;color:var(--gray-txt);font-weight:700;margin-top:4px}
.gtags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.gtag{
  background:var(--black);color:var(--white);font-size:11px;font-weight:900;
  padding:5px 12px;letter-spacing:1px;
}
.gtag.r-a{background:var(--green)}
.gtag.r-z{background:var(--red)}
.gbuy{
  border:3px solid var(--black);background:var(--gray-bg);padding:20px;margin:20px 0;
}
.gbuy .p{font-size:32px;font-weight:900;color:var(--red);line-height:1.1}
.gbuy .s{font-size:12px;font-weight:900;color:var(--green);margin:4px 0 14px}
.gbuy .s.out{color:var(--gray-txt)}
.gbuy .s::before{content:"●";margin-right:5px;font-size:8px;vertical-align:1px}
.feat{list-style:none;margin:6px 0 0}
.feat li{font-size:14px;padding:7px 0 7px 24px;position:relative;color:#333}
.feat li::before{content:"▶";position:absolute;left:0;color:var(--red);font-size:10px;top:11px}

/* 関連商品 / related titles */
.rel{display:grid;gap:14px;grid-template-columns:repeat(5,1fr);margin-top:8px}
.rel a{display:block;color:inherit}
.rel .rc{
  background:#0C0C0C;border:3px solid var(--border);aspect-ratio:1/1.1;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:border-color .15s,transform .15s;
}
.rel a:hover .rc{border-color:var(--red);transform:translateY(-3px)}
.rel img{width:100%;height:100%;object-fit:contain;display:block}
.rel b{display:block;font-size:11.5px;font-weight:700;margin-top:7px;line-height:1.35}

/* カート通知 / add-to-cart toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);
  background:var(--black);color:var(--white);border:3px solid var(--yellow);
  font-size:14px;font-weight:900;padding:14px 26px;z-index:120;
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 規約 / terms document */
.doc{counter-reset:article}
.doc article{margin-bottom:26px}
.doc article:last-child{margin-bottom:0}
.doc h3{
  font-size:15px;font-weight:900;margin-bottom:8px;
  border-left:5px solid var(--red);padding-left:10px;
}
.doc p{font-size:13.5px;color:#333;margin-bottom:8px;line-height:1.9}
.doc ol{margin:0 0 8px 22px;font-size:13.5px;color:#333;line-height:1.9}
.doc li{margin-bottom:4px}
.stamp{
  display:inline-block;border:4px double var(--red);color:var(--red);
  font-size:15px;font-weight:900;padding:10px 18px;transform:rotate(-6deg);
  letter-spacing:3px;margin-top:8px;
}

/* FAQ */
.faq details{
  border:3px solid var(--border);border-radius:2px;margin-bottom:12px;background:var(--white);
}
.faq details[open]{border-color:var(--red)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 20px;font-size:15px;font-weight:700;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:var(--red);font-weight:900;margin-right:10px;flex-shrink:0}
.faq summary::after{content:"＋";color:var(--red);font-weight:900;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 20px 20px 46px;font-size:14px;color:#333;position:relative}
.faq .a::before{
  content:"A";position:absolute;left:20px;top:0;color:var(--gray-txt);font-weight:900;
}

/* ============ footer ============ */
footer{background:var(--black);color:var(--white);padding:60px 0 0;position:relative;z-index:65}
.fgrid{display:grid;gap:32px;grid-template-columns:repeat(4,1fr);padding-bottom:44px}
.fgrid h4{font-size:13px;font-weight:700;letter-spacing:2px;margin-bottom:16px;color:var(--white)}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:10px}
.fgrid a{font-size:13.5px;color:#9A9A9A;transition:color .15s}
.fgrid a:hover{color:var(--white)}
.fbot{border-top:1px solid #262626;padding:26px 0 40px;font-size:12px;color:#7A7A7A}
.fbot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:#9A9A9A}
.fbot p{margin-bottom:10px;line-height:1.8}

/* ============ responsive ============ */
@media(max-width:1000px){
  nav{display:none}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  section{padding:56px 0}
  .tiers{grid-template-columns:1fr}
  .socials{grid-template-columns:1fr}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:56px 0 50px}
  /* 星は隠さず縮小する / shrink the starbursts rather than hiding them */
  .burst{--bs:126px}
  .page{padding:34px 0 56px}
  .panel{padding:22px 18px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .gdetail{grid-template-columns:1fr;gap:22px}
  .gcover{max-width:320px;margin:0 auto}
  .rel{grid-template-columns:repeat(3,1fr)}
  .kv th{width:auto;display:block;border:0;padding-bottom:0}
  .kv td{display:block;padding-top:2px}
}
@media(max-width:640px){
  /* 検索は携帯でも表示する（上の 640px ブロックで display:block 指定済み）
     Search stays visible on phones — it used to be display:none here, which
     silently overrode the rule above it. */
  .hdr{justify-content:space-between}
  .btn{padding:15px 34px;font-size:15px}
  .cta{flex-direction:column}
  .cta .btn{width:100%}
  .lookup button{width:100%}
  .burst{--bs:114px}
}

/* ============ 動きを減らす / reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #floaters,#petals{display:none}
  html{scroll-behavior:auto}
}