/* ============================================================
   百紋堂 — 墨地の和(design-forge wamodern を暗地に反転)
   ============================================================ */
:root{
  --bg:#12100e;
  --bg2:#1a1714;
  --panel:#211d19;
  --panel2:#2a251f;
  --cream:#f2ece0;
  --text:#e8e0d2;
  --muted:#948b7c;
  --line:rgba(242,236,224,.13);
  --line2:rgba(242,236,224,.07);
  --ai:#4a7ba8;      /* 藍 */
  --shu:#c8503a;     /* 朱 */
  --shu2:#e0684f;
  --kin:#d9b558;     /* 金 */
  --font-d:'Shippori Mincho',"Yu Mincho","YuMincho",serif;
  --font-b:'Noto Serif JP',"Yu Mincho",serif;
  --ez:cubic-bezier(.22,.61,.36,1);
  --ez-pop:cubic-bezier(.34,1.4,.5,1);
  --r:#8a8172;       /* 現在のレアリティ色(JSが差し替え) */
}

*{margin:0;padding:0;box-sizing:border-box}
/* hidden 属性を最優先で効かせる。
   .stage/.modal は display:grid を持つので、これが無いと hidden でも画面を覆い続ける */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:var(--shu);color:var(--cream)}
b,em,strong{font-style:normal;font-weight:600}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* 紙目のノイズ */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
/* 青海波の極薄地紋 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%23f2ece0' stroke-width='1'%3E%3Cpath d='M0 30a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 22a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 14a15 15 0 0130 0 15 15 0 0130 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ─────────── 上段 ─────────── */
.topbar{position:sticky;top:0;z-index:40}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(14px,4vw,32px);
  background:rgba(18,16,14,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mon{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  background:var(--shu);color:var(--cream);
  font-family:var(--font-d);font-weight:700;font-size:.95rem;
  clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);
}
.brand-txt{font-family:var(--font-d);font-weight:700;font-size:1.08rem;letter-spacing:.22em;line-height:1.15}
.brand-txt small{display:block;font-size:.44em;font-weight:500;letter-spacing:.3em;color:var(--muted)}
.purse{display:flex;gap:6px}
.purse-i{
  display:flex;align-items:baseline;gap:6px;
  padding:5px 12px;border:1px solid var(--line);background:var(--panel);
  font-family:var(--font-d);
}
.purse-i i{font-style:normal;font-size:.68rem;letter-spacing:.16em;color:var(--muted)}
.purse-i b{font-size:1rem;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.purse-i.is-up b{animation:tick .5s var(--ez-pop)}
@keyframes tick{0%{transform:scale(1);color:var(--kin)}40%{transform:scale(1.3);color:var(--kin)}100%{transform:scale(1)}}

/* ─────────── 帯タブ ─────────── */
.tabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:rgba(18,16,14,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:0 clamp(8px,3vw,26px);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:none;padding:12px 18px;
  font-family:var(--font-d);font-weight:600;font-size:.86rem;letter-spacing:.22em;
  color:var(--muted);transition:color .4s var(--ez);white-space:nowrap;
}
.tab::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--shu);transform:scaleX(0);transform-origin:center;
  transition:transform .5s var(--ez);
}
.tab:hover{color:var(--text)}
.tab.is-on{color:var(--cream)}
.tab.is-on::after{transform:scaleX(1)}

main{position:relative;z-index:1;max-width:1020px;margin:0 auto;padding:clamp(20px,5vw,44px) clamp(14px,4vw,32px) 80px}
.view{display:none;animation:vin .5s var(--ez)}
.view.is-on{display:block}
@keyframes vin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ─────────── 台 ─────────── */
.daiba{
  position:relative;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(200,80,58,.14),transparent 62%),
    linear-gradient(180deg,var(--panel2),var(--panel));
  padding:clamp(26px,6vw,54px) clamp(18px,5vw,48px) clamp(24px,5vw,42px);
  overflow:hidden;
}
.daiba::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--shu),transparent);opacity:.5;
}
.noren{
  display:flex;justify-content:center;gap:5px;margin-bottom:26px;
}
.noren span{
  width:clamp(38px,9vw,52px);padding:14px 0 20px;
  background:linear-gradient(180deg,#2f3d4e,#22303e);
  border-top:3px solid var(--ai);
  font-family:var(--font-d);font-weight:700;font-size:clamp(1rem,3vw,1.3rem);
  color:var(--cream);text-align:center;letter-spacing:.1em;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%);
  animation:sway 5.5s ease-in-out infinite;
  transform-origin:top center;
}
.noren span:nth-child(2){animation-delay:-1.8s}
.noren span:nth-child(3){animation-delay:-3.6s}
@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}

.daiba-lead{
  text-align:center;font-family:var(--font-d);font-weight:500;
  font-size:clamp(.94rem,2.6vw,1.14rem);letter-spacing:.16em;color:var(--muted);
  margin-bottom:clamp(22px,5vw,36px);
}

/* 天井 */
.hoshou{
  max-width:520px;margin:0 auto clamp(24px,5vw,34px);
  border:1px solid var(--line);background:rgba(18,16,14,.5);padding:14px 18px;
}
.hoshou-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--font-d);font-size:.8rem;letter-spacing:.18em;color:var(--muted)}
.hoshou-head b{font-size:.9rem;color:var(--text);font-weight:600}
.hoshou-head b em{font-size:1.24rem;color:var(--kin);font-weight:700;font-variant-numeric:tabular-nums;margin:0 2px}
.hoshou-bar{height:3px;background:var(--line2);margin:10px 0 8px;overflow:hidden}
.hoshou-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ai),var(--kin));
  transition:width .7s var(--ez)}
.hoshou-note{font-size:.72rem;color:var(--muted);letter-spacing:.06em;line-height:1.6}

/* 引くボタン */
.hiku-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hbtn{
  position:relative;overflow:hidden;
  min-width:min(240px,84vw);padding:20px 26px 18px;
  border:1px solid rgba(242,236,224,.34);background:rgba(18,16,14,.4);
  font-family:var(--font-d);text-align:center;
  transition:transform .45s var(--ez),box-shadow .45s var(--ez),border-color .45s var(--ez);
  clip-path:polygon(0 0,100% 0,100% 82%,88% 100%,0 100%);
}
.hbtn-t{display:block;font-weight:700;font-size:1.12rem;letter-spacing:.24em}
.hbtn-c{display:block;margin-top:7px;font-size:.76rem;letter-spacing:.2em;color:var(--muted)}
.hbtn-c b{color:var(--text)}
.hbtn-tag{
  display:inline-block;margin-top:11px;padding:3px 11px;
  border:1px solid rgba(217,181,88,.5);color:var(--kin);
  font-size:.66rem;letter-spacing:.14em;
}
.hbtn:hover:not(:disabled){transform:translateY(-3px);border-color:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hbtn:active:not(:disabled){transform:translateY(0) scale(.985)}
.hbtn:disabled{opacity:.34;cursor:not-allowed}
.hbtn-main{background:linear-gradient(160deg,#a33f2c,#7d2e20);border-color:var(--shu2)}
.hbtn-main .hbtn-c{color:rgba(242,236,224,.7)}
.hbtn-main .hbtn-c b{color:var(--cream)}
.hbtn-main::before{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-16deg);transition:left 1s var(--ez);
}
.hbtn-main:hover::before{left:150%}

.hokyu{text-align:center;margin-top:22px}
.lnk{
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.16em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .4s var(--ez),border-color .4s var(--ez);
}
.lnk:hover{color:var(--kin);border-color:var(--kin)}
.lnk-danger:hover{color:var(--shu2);border-color:var(--shu2)}

/* 直前に出た札 */
.saikin{margin-top:clamp(26px,5vw,40px)}
.mini-h{font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.28em;color:var(--muted);margin-bottom:14px}
.saikin-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.saikin-row .zcard{flex:none;width:96px}

/* ─────────── 図鑑 ─────────── */
.zukan-head{margin-bottom:clamp(20px,4vw,30px)}
.comp{margin-bottom:18px}
.comp-l{font-family:var(--font-d);font-size:.76rem;letter-spacing:.3em;color:var(--muted)}
.comp-n{display:block;font-family:var(--font-d);line-height:1;margin:6px 0 12px}
.comp-n b{font-size:clamp(2.2rem,7vw,3rem);font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums}
.comp-n i{font-style:normal;margin:0 8px;color:var(--muted)}
.comp-n em{font-size:1.1rem;color:var(--muted)}
.comp-bar{height:2px;background:var(--line2);overflow:hidden}
.comp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ai),var(--shu),var(--kin));transition:width .8s var(--ez)}

.filters{display:flex;gap:7px;flex-wrap:wrap}
.fbtn{
  padding:6px 15px;border:1px solid var(--line);
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.16em;color:var(--muted);
  transition:all .35s var(--ez);
}
.fbtn:hover{color:var(--text);border-color:var(--muted)}
.fbtn.is-on{color:#12100e;background:var(--cream);border-color:var(--cream)}

.zukan-grid{
  display:grid;gap:clamp(9px,2vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(96px,26vw,132px),1fr));
}
.zcard{
  position:relative;display:block;width:100%;text-align:center;
  aspect-ratio:5/7;
  border:1px solid var(--line);
  background:linear-gradient(170deg,var(--panel2),var(--panel));
  padding:10px 6px 8px;
  transition:transform .45s var(--ez),border-color .45s var(--ez),box-shadow .45s var(--ez);
  overflow:hidden;
}
.zcard::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 50% at 50% 22%,var(--r),transparent 70%);
  opacity:.14;transition:opacity .45s var(--ez);
}
.zcard:hover{transform:translateY(-4px);border-color:var(--r);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.zcard:hover::before{opacity:.26}
.zcard .mon{width:64%;margin:2px auto 6px;display:block}
.zcard-n{position:relative;font-family:var(--font-d);font-weight:700;font-size:.95rem;letter-spacing:.08em;line-height:1.3}
.zcard-y{position:relative;font-size:.6rem;letter-spacing:.1em;color:var(--muted);line-height:1.4}
.zcard-r{
  position:absolute;top:0;left:0;width:22px;height:22px;display:grid;place-items:center;
  background:var(--r);color:#12100e;font-family:var(--font-d);font-weight:700;font-size:.72rem;
  clip-path:polygon(0 0,100% 0,0 100%);padding-right:8px;padding-bottom:8px;
}
.zcard-c{
  position:absolute;right:5px;bottom:4px;
  font-family:var(--font-d);font-size:.62rem;letter-spacing:.06em;color:var(--muted);
}
.zcard.is-locked{border-style:dashed;border-color:var(--line2);background:rgba(255,255,255,.014)}
.zcard.is-locked::before{opacity:0}
.zcard.is-locked:hover{transform:none;border-color:var(--line);box-shadow:none}
.zcard.is-locked .zcard-n{color:var(--muted);letter-spacing:.3em}
.zcard.is-new::after{
  content:"新";position:absolute;top:4px;right:4px;
  width:19px;height:19px;display:grid;place-items:center;border-radius:50%;
  background:var(--shu);color:var(--cream);font-family:var(--font-d);font-size:.62rem;font-weight:700;
}

/* 紋の描画 */
.mon{width:100%;height:auto;color:var(--r);overflow:visible}
.mon.is-kin{filter:drop-shadow(0 0 7px rgba(217,181,88,.6))}
.mon.is-sil{color:var(--muted);opacity:.2}

/* ─────────── パネル共通 ─────────── */
.panel{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(20px,4.4vw,34px);margin-bottom:18px;
}
.sec-h{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.02rem,3vw,1.24rem);letter-spacing:.1em;
  margin-bottom:12px;
}
.sec-n{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid var(--shu);color:var(--shu2);font-size:.82rem;
}
.sec-p{font-size:.85rem;color:var(--muted);line-height:1.9;margin-bottom:16px}
.sec-p b{color:var(--text)}
.shard-now{font-family:var(--font-d);font-size:.84rem;letter-spacing:.16em;color:var(--muted)}
.shard-now b{font-size:1.5rem;color:var(--kin);margin-left:8px;font-variant-numeric:tabular-nums}

.rtable{font-size:.84rem;margin:6px 0 4px}
.rtable th,.rtable td{padding:9px 8px;border-bottom:1px solid var(--line2);text-align:right}
.rtable th{color:var(--muted);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-align:right}
.rtable th:first-child,.rtable td:first-child{text-align:left}
.rtable td:first-child{font-family:var(--font-d);font-weight:600}
.rt-chip{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;
  background:var(--r);color:#12100e;font-family:var(--font-d);font-weight:700;font-size:.74rem}
.rtable td{font-variant-numeric:tabular-nums}
.rt-gap{font-size:.72rem;color:var(--muted)}

.stat-line{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.14em;color:var(--muted);margin-bottom:14px}
.stat-line b{font-size:1.4rem;color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}
.stat-sep{width:1px;height:18px;background:var(--line);margin:0 8px}

.rules{list-style:none;margin-top:18px;font-size:.82rem;color:var(--muted);line-height:1.9}
.rules li{padding-left:16px;position:relative;margin-bottom:7px}
.rules li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:var(--shu);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.rules b{color:var(--text)}
.rules em{color:var(--kin);font-weight:600}
.danger{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2);text-align:right}
.fine{font-size:.72rem;color:var(--muted);line-height:1.8}

.log{list-style:none;font-size:.82rem;max-height:340px;overflow-y:auto}
.log li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line2)}
.log-r{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;
  background:var(--r);color:#12100e;font-family:var(--font-d);font-weight:700;font-size:.7rem}
.log-n{font-family:var(--font-d);font-weight:600;letter-spacing:.06em}
.log-t{margin-left:auto;font-size:.7rem;color:var(--muted);white-space:nowrap}
.log-dup{font-size:.68rem;color:var(--muted);border:1px solid var(--line);padding:0 6px}
.log-empty{color:var(--muted);justify-content:center;border:none}

/* 交換所 */
.kokan-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.krow{
  display:flex;align-items:center;gap:13px;
  border:1px solid var(--line);background:var(--panel);padding:11px 13px;
}
.krow .mon{width:44px;flex:none}
.krow-b{flex:1;min-width:0}
.krow-n{font-family:var(--font-d);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krow-y{font-size:.66rem;color:var(--muted)}
.kbtn{
  flex:none;padding:7px 12px;border:1px solid var(--r);color:var(--r);
  font-family:var(--font-d);font-size:.76rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;
  transition:all .35s var(--ez);
}
.kbtn:hover:not(:disabled){background:var(--r);color:#12100e}
.kbtn:disabled{opacity:.3;cursor:not-allowed}
.kokan-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:34px 0;grid-column:1/-1}

/* ─────────── 演出 ─────────── */
.stage{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(8,7,6,.94);
  padding:clamp(14px,4vw,36px);
  animation:sin .35s ease;
}
@keyframes sin{from{opacity:0}to{opacity:1}}
.stage-flash{
  position:absolute;inset:0;pointer-events:none;background:var(--r);opacity:0;
}
.stage-flash.is-go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.stage-rays{
  position:absolute;top:50%;left:50%;width:200vmax;height:200vmax;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,var(--r) 0 2deg,transparent 2deg 12deg);
  mask-image:radial-gradient(circle,transparent 12%,#000 42%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle,transparent 12%,#000 42%,transparent 74%);
  transition:opacity .6s var(--ez);
}
.stage-rays.is-go{opacity:.16;animation:spin 24s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.stage-body{position:relative;width:100%;max-width:840px;text-align:center}
.fuda-area{
  display:grid;gap:clamp(7px,1.6vw,13px);justify-content:center;
  grid-template-columns:repeat(5,minmax(0,1fr));
  max-height:74dvh;
}
.fuda-area.is-single{grid-template-columns:minmax(0,min(258px,70vw))}
@media(max-width:560px){.fuda-area{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 札 */
.fuda{
  position:relative;aspect-ratio:5/7;perspective:1000px;cursor:pointer;
  animation:deal .5s var(--ez-pop) backwards;
}
@keyframes deal{from{opacity:0;transform:translateY(26px) scale(.86)}to{opacity:1;transform:none}}
.fuda-in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .6s var(--ez);
}
.fuda.is-open .fuda-in{transform:rotateY(180deg)}
.fuda-b,.fuda-f{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);overflow:hidden;
}
/* 裏 */
.fuda-b{
  background:
    radial-gradient(circle at 50% 42%,rgba(74,123,168,.28),transparent 62%),
    linear-gradient(160deg,#243040,#161d26);
  display:grid;place-items:center;
}
.fuda-b i{
  width:46%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(242,236,224,.3);
  box-shadow:inset 0 0 0 5px rgba(242,236,224,.06);
  display:grid;place-items:center;
  font-family:var(--font-d);font-style:normal;font-weight:700;
  font-size:clamp(.8rem,2.4vw,1.4rem);color:rgba(242,236,224,.6);
}
.fuda.hint-2 .fuda-b i{border-color:rgba(139,123,192,.85);color:#b6a9e0;box-shadow:inset 0 0 0 5px rgba(139,123,192,.14),0 0 18px rgba(139,123,192,.5)}
.fuda.hint-3 .fuda-b i{border-color:var(--shu2);color:#f0a08c;box-shadow:inset 0 0 0 5px rgba(200,80,58,.16),0 0 22px rgba(200,80,58,.6);animation:pulse 1s ease-in-out infinite}
.fuda.hint-4 .fuda-b i{border-color:var(--kin);color:#f5df9f;box-shadow:inset 0 0 0 5px rgba(217,181,88,.2),0 0 30px rgba(217,181,88,.85);animation:pulse .62s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* 表 */
.fuda-f{
  transform:rotateY(180deg);
  background:linear-gradient(168deg,var(--panel2),#191512);
  border-color:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9px 6px;
}
.fuda-f::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(72% 48% at 50% 34%,var(--r),transparent 72%);opacity:.2;
}
.fuda-f .mon{position:relative;width:74%;margin-bottom:7px}
.fuda-nm{position:relative;font-family:var(--font-d);font-weight:700;
  font-size:clamp(.86rem,2.4vw,1.1rem);letter-spacing:.1em;line-height:1.25}
.fuda-ym{position:relative;font-size:.58rem;letter-spacing:.1em;color:var(--muted)}
.fuda-rr{
  position:absolute;top:0;left:0;width:24px;height:24px;display:grid;place-items:center;
  background:var(--r);color:#12100e;font-family:var(--font-d);font-weight:700;font-size:.76rem;
  clip-path:polygon(0 0,100% 0,0 100%);padding-right:9px;padding-bottom:9px;
}
.fuda-dup{
  position:absolute;bottom:0;left:0;right:0;padding:3px;
  background:rgba(18,16,14,.82);font-size:.6rem;letter-spacing:.06em;color:var(--kin);
}
.fuda.is-open.rare-3 .fuda-f,.fuda.is-open.rare-4 .fuda-f{box-shadow:0 0 26px var(--r),inset 0 0 30px rgba(0,0,0,.4)}
.fuda.is-open.rare-4 .fuda-f{animation:kinpulse 2.4s ease-in-out infinite}
@keyframes kinpulse{0%,100%{box-shadow:0 0 20px var(--r)}50%{box-shadow:0 0 44px var(--r)}}

.stage-ctl{display:flex;gap:11px;justify-content:center;margin-top:clamp(16px,3.4vw,26px);flex-wrap:wrap}
.sbtn{
  padding:12px 30px;background:var(--cream);color:#12100e;
  font-family:var(--font-d);font-weight:700;font-size:.84rem;letter-spacing:.24em;
  clip-path:polygon(0 0,100% 0,100% 76%,86% 100%,0 100%);
  transition:transform .35s var(--ez),opacity .3s var(--ez);
}
.sbtn:hover{transform:translateY(-2px)}
.sbtn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(242,236,224,.35)}
.sbtn[hidden]{display:none}

/* 粒 */
.spark{position:fixed;pointer-events:none;z-index:81;width:6px;height:6px;background:var(--r);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* ─────────── 詳細 ─────────── */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;animation:sin .3s ease}
.modal-bg{position:absolute;inset:0;background:rgba(8,7,6,.9)}
.modal-in{
  position:relative;width:100%;max-width:340px;
  border:1px solid var(--r);background:linear-gradient(168deg,var(--panel2),#191512);
  padding:30px 26px 26px;text-align:center;
  animation:mpop .45s var(--ez-pop);
}
@keyframes mpop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
.modal-in::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 44% at 50% 28%,var(--r),transparent 72%);opacity:.17}
.modal-in>*{position:relative}
.modal-in .mon{width:56%;margin:0 auto 14px}
.m-r{display:inline-block;padding:2px 13px;background:var(--r);color:#12100e;
  font-family:var(--font-d);font-weight:700;font-size:.74rem;letter-spacing:.2em;margin-bottom:11px}
.m-n{font-family:var(--font-d);font-weight:700;font-size:1.8rem;letter-spacing:.14em;line-height:1.2}
.m-y{font-size:.72rem;letter-spacing:.2em;color:var(--muted);margin-top:4px}
.m-k{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--font-d);font-size:.92rem;letter-spacing:.06em;line-height:1.9;color:var(--cream)}
.m-meta{margin-top:16px;display:flex;justify-content:center;gap:16px;
  font-size:.7rem;letter-spacing:.12em;color:var(--muted)}
.m-meta b{color:var(--text)}
.modal-x{position:absolute;top:16px;right:18px;font-size:1.7rem;line-height:1;color:var(--cream);opacity:.6;z-index:2}
.modal-x:hover{opacity:1}

/* ─────────── 報せ ─────────── */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:95;
  padding:11px 24px;background:var(--cream);color:#12100e;
  font-family:var(--font-d);font-size:.82rem;letter-spacing:.12em;white-space:nowrap;
  animation:tin .3s var(--ez-pop);box-shadow:0 8px 28px rgba(0,0,0,.5);
}
@keyframes tin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

.foot{text-align:center;padding:26px 16px 34px;border-top:1px solid var(--line2);
  font-family:var(--font-d);font-size:.7rem;letter-spacing:.3em;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}