/* トレカ天国 — 見た目(設計書 第46-7節・案D 煽り型) */
:root {
  --red: #e90e00; --red-d: #9c0900; --ink: #2e2e2e; --mute: #6b6b6b; --line: #e6e6e6; --bg: #f4f4f4; --gold: #ffb200; --gold-l: #ffe66a; --green: #1fa447;
  --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --disp: "Dela Gothic One", var(--font); --gold-f: "Rampart One", "Dela Gothic One", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 500; line-height: 1.5; padding-bottom: 76px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
.main { max-width: 480px; margin: 0 auto; padding: 0 14px 20px; }
@media (min-width: 900px) { .main { max-width: 960px; } .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* header */
.hdr { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: baseline; font-family: var(--disp); font-size: 20px; letter-spacing: .02em; }
.logo-a { color: var(--red); } .logo-b { color: var(--ink); }
.logo-dot { width: 10px; height: 10px; margin-left: 4px; background: var(--gold); transform: rotate(45deg); align-self: center; }
.hdr-btns { display: flex; gap: 8px; align-items: center; }
.btn-sm { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1.5px solid transparent; background: none; }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-line { border-color: var(--red); color: var(--red); background: #fff; }
.btn-gray { background: #d9d9d9; color: #666; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold-line { border-color: var(--gold-l); color: var(--gold-l); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; }
.coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #e0a800); border: 1px solid #b07a00; }

/* banner / ticker */
.banner { display: block; position: relative; margin-top: 10px; height: 110px; border-radius: 8px; overflow: hidden; }
.banner-ribbon { position: absolute; top: 10px; left: -30px; transform: rotate(-12deg); background: var(--red); color: #fff; font-weight: 900; font-size: 11px; padding: 4px 40px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.banner-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 8px; }
.banner-big { font-size: 34px; } .banner-sub { font-size: 13px; }
.ticker { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; background: var(--ink); color: #fff; border-radius: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.ticker-tag { flex: none; padding: 2px 8px; background: var(--red); border-radius: 4px; font-weight: 900; font-size: 10px; }
.ticker-text { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

/* burst backgrounds (部品①) */
.burst, .th-entry { background-color: #ff3b1f; background-image: radial-gradient(circle at 50% 62%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 42%), repeating-conic-gradient(from 8deg at 50% 62%, #ff2a12 0deg 11deg, #ffb200 11deg 22deg); }
.th-main { background-color: #3a0a6b; background-image: radial-gradient(circle at 50% 62%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%), repeating-conic-gradient(from 8deg at 50% 62%, #4b0f8f 0deg 11deg, #ff3bd6 11deg 22deg); }
.th-rush { background-color: #0a5c2e; background-image: radial-gradient(circle at 50% 62%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 42%), repeating-conic-gradient(from 8deg at 50% 62%, #0f7a3d 0deg 11deg, #7dff9a 11deg 22deg); }
.th-last { background-color: #111; background-image: radial-gradient(circle at 50% 62%, rgba(255,215,64,.7) 0%, rgba(255,215,64,0) 45%), repeating-conic-gradient(from 8deg at 50% 62%, #1a1a1a 0deg 11deg, #3a2a00 11deg 22deg); }
.burst-gold, .th-box { background-color: #a35d00; background-image: radial-gradient(circle at 50% 62%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 44%), repeating-conic-gradient(from 8deg at 50% 62%, #ff9a00 0deg 11deg, #ffe66a 11deg 22deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 金の大文字(部品②)・白抜き(部品③) */
.gold, .silver { font-family: var(--gold-f); line-height: 1; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .6px #5a2a00; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(2px 3px 0 #4a1a00) drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.gold { background-image: linear-gradient(180deg, #fffbe6 0%, #ffe45c 34%, #e0a80f 52%, #fff2a0 68%, #c07a00 100%); }
.silver { background-image: linear-gradient(180deg, #fff 0%, #d9e2ea 35%, #7f8c99 55%, #eef3f7 75%, #55616d 100%); -webkit-text-stroke: .6px #1a1a1a; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(2px 3px 0 #1a1a1a) drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.stroke { color: #fff; font-family: var(--disp); text-shadow: -2px -2px 0 #8c0000, 2px -2px 0 #8c0000, -2px 2px 0 #8c0000, 2px 2px 0 #8c0000, 0 3px 0 #8c0000, 0 5px 6px rgba(0,0,0,.5); line-height: 1.15; }
.stroke em { font-style: normal; color: var(--gold-l); }

/* thumbnail (機械が作るサムネ) */
.th { position: relative; height: 200px; border-radius: 6px; overflow: hidden; margin: 0 10px; }
.th-large { margin: 0; height: 230px; border-radius: 10px; }
.th-badge { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 2; }
.th-badge-s { font-size: 9px; color: #fff; font-family: var(--disp); text-shadow: 0 0 3px #000, 0 0 3px #000; }
.th-badge-b { font-size: 28px; }
.th-ribbon { position: absolute; top: 14px; right: -40px; transform: rotate(18deg); background: var(--red); color: #fff; font-weight: 900; font-size: 10px; padding: 4px 44px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; white-space: nowrap; z-index: 2; }
.th-entry .th-ribbon { background: var(--ink); color: var(--gold-l); border-color: var(--gold-l); }
.th-last .th-ribbon { background: var(--gold-l); color: var(--ink); border-color: var(--ink); }
.th-art { position: absolute; top: 18px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 156px; height: 112px; border-radius: 6px; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,.5); overflow: hidden; background: #fff; }
.th-large .th-art { width: 200px; height: 140px; top: 22px; }
.th-photo { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.th-photo-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; font-weight: 900; color: #4a1a00; padding: 4px; }
.th-big { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; font-size: 40px; letter-spacing: -.02em; white-space: nowrap; }
.th-line { position: absolute; left: 6px; right: 6px; bottom: 8px; text-align: center; font-size: 13px; }
.th-min { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 9px; padding: 3px 6px; border-radius: 3px; z-index: 2; }
.th-min b { color: var(--gold-l); }
.th-box .th-big { bottom: 40px; } .th-box { height: 150px; }
.th-last .th-big { font-size: 60px; bottom: 44px; }

/* band / cards */
.band { margin: 10px -14px 0; padding: 14px 14px 18px; background: linear-gradient(135deg, #ffb200 0%, #ff4d2e 45%, #ff2e7a 100%); display: flex; flex-direction: column; gap: 12px; }
.band-title { text-align: center; font-size: 14px; }
.list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.card { background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid #c7c7c7; background: #fff; color: var(--ink); }
.chip-red { background: var(--red); color: #fff; border-color: var(--red); } .chip-dark { background: var(--ink); color: #fff; border-color: var(--ink); } .chip-gold { background: var(--gold); border-color: var(--gold); }
.chip-btn { cursor: pointer; }
.watchers { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 900; color: var(--red); }
.price-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; gap: 10px; }
.price { display: flex; align-items: center; gap: 4px; }
.price-n { font-size: 22px; font-weight: 900; } .price-n.red { color: var(--red); } .price-u { font-size: 11px; color: var(--mute); }
.left { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 150px; }
.left-n { font-size: 11px; font-weight: 700; } .left-n b { font-size: 13px; }
.bar { width: 100%; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-in { height: 100%; background: linear-gradient(90deg, #35c75a, var(--green)); transition: width .6s; }
.bar-gold { background: linear-gradient(90deg, #ffb200, #ff8a00); }
.odds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 8px 10px 0; }
.odd { background: #f7f7f7; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.odd-top { background: #fff1f0; border-color: #ffc9c4; } .odd-top .odd-l { color: var(--red); }
.odd-l { font-size: 9px; font-weight: 900; } .odd-n { font-size: 12px; font-weight: 900; } .odd-p { font-size: 9px; color: var(--mute); }
.draw-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 4px 10px 12px; }
.draw-btns.one { grid-template-columns: 1fr; }
.draw-form { display: block; min-width: 0; }
.btn { height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; font-weight: 900; font-size: 14px; border: 2px solid transparent; width: 100%; text-align: center; padding: 0 10px; }
.btn.btn-red { box-shadow: 0 3px 0 var(--red-d); } .btn.btn-gold { box-shadow: 0 3px 0 #b07a00; }
.btn.btn-line { border-color: var(--red); color: var(--red); background: #fff; }
.btn small { font-size: 11px; font-weight: 700; opacity: .9; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn, .draw-btns, form { scroll-margin-bottom: 96px; }
.main { padding-bottom: 40px; }
.card .btn-gray, .card > .btn, .card > a.btn { margin: 4px 10px 12px; width: auto; }

/* detail */
.detail { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.detail-title { font-family: var(--disp); font-size: 22px; margin: 4px 0 0; }
.detail-desc { margin: 0; color: var(--mute); font-size: 13px; }
.detail .price-row { padding: 0; } .detail .draw-btns { padding: 0; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; font-size: 13px; color: var(--ink); }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-size: 11px; color: var(--mute); background: #fafafa; }
.tbl-odds .row-top td { background: #fff1f0; font-weight: 900; }
.tbl-odds td, .tbl-odds th { padding: 8px 6px; font-size: 12px; white-space: nowrap; }
.tbl-odds td:nth-child(2) { white-space: normal; }
.tbl-odds .tag { display: block; width: max-content; margin-top: 2px; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #eee; color: var(--mute); }
.tag-red { background: var(--red); color: #fff; }
.note { font-size: 11px; color: var(--mute); line-height: 1.6; margin: 6px 0; }
.h1 { font-family: var(--disp); font-size: 22px; margin: 16px 0 8px; } .h2 { font-size: 14px; font-weight: 900; margin: 18px 0 8px; }
.empty { padding: 24px 12px; text-align: center; color: var(--mute); background: #fff; border-radius: 8px; }
.empty a { color: var(--red); text-decoration: underline; }
.events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ev { display: flex; gap: 8px; padding: 8px 10px; background: #fff; border-radius: 6px; font-size: 12px; border-left: 4px solid #ccc; }
.ev-draw_hit { border-left-color: var(--red); } .ev-box_drawn { border-left-color: var(--gold); } .ev-gacha_open { border-left-color: var(--green); }
.ev-at { color: var(--mute); flex: none; }
.next-teaser { margin-top: 14px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.next-teaser-k { font-size: 10px; color: var(--gold-l); font-weight: 900; } .next-teaser-v { font-size: 13px; font-weight: 900; }
.next-card { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.next-when { font-size: 11px; color: var(--red); font-weight: 900; } .next-name { font-family: var(--disp); font-size: 18px; } .next-sub { font-size: 12px; color: var(--mute); }

/* flash / forms */
.flash { padding: 10px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; margin: 8px 0; }
.flash-error { background: #fff1f0; color: var(--red); border: 1px solid #ffc9c4; } .flash-ok { background: #eefaf1; color: #157a37; border: 1px solid #bfe8cc; }
.form { display: flex; flex-direction: column; gap: 12px; background: #fff; padding: 14px; border-radius: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; }
.form input:not([type=checkbox]), .form select { height: 44px; border: 1.5px solid #c7c7c7; border-radius: 6px; padding: 0 10px; font-size: 16px; font-family: inherit; width: 100%; min-width: 0; }
.form-grid > * { min-width: 0; }
.form .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; } .form .check a { color: var(--red); text-decoration: underline; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form-grid .wide, .form-grid button { grid-column: 1 / -1; }
.form-inline { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .form-inline select { height: 36px; }
.amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.inline { display: inline; } .plain { padding-left: 18px; font-size: 13px; } .logout { margin-top: 24px; }
.me-bal { background: #fff; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.me-bal.danger { border: 2px solid var(--red); }
.me-bal-k { font-size: 11px; color: var(--mute); } .me-bal-v { font-size: 36px; font-weight: 900; } .me-bal-v small { font-size: 14px; } .me-bal-s { font-size: 11px; color: var(--mute); }
.pend { background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.pend-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plus { color: var(--green); font-weight: 900; } .minus { color: var(--red); }

/* footer / tabs */
.ftr { max-width: 480px; margin: 0 auto; padding: 10px 14px 20px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--mute); }
.ftr a { text-decoration: underline; } .ftr-note { width: 100%; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--mute); }
.tab.on { color: var(--red); font-weight: 900; }
.legal { font-size: 13px; } .legal-list li { margin-bottom: 8px; } .tbl-legal th { width: 32%; }

/* 結果の演出(第42節) */
.reveal { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.reveal-head { text-align: center; } .reveal-name { font-family: var(--disp); font-size: 18px; } .reveal-sub { font-size: 11px; color: var(--mute); }
.reveal-status { font-size: 13px; font-weight: 700; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; }
.reveal-status b { color: var(--gold-l); }
.rcards { display: grid; gap: 10px; width: 100%; } .rcards-one { grid-template-columns: 1fr; justify-items: center; } .rcards-many { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rcard { perspective: 800px; background: none; border: 0; padding: 0; width: 100%; aspect-ratio: 5 / 7; max-width: 220px; }
.rcard-inner { position: relative; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; border-radius: 10px; }
.rcard.open .rcard-inner { transform: rotateY(180deg); }
.rcard-back, .rcard-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; border: 4px solid var(--rim, #ddd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
.rcard-back { background: radial-gradient(circle at 50% 40%, #3a3a3a, #111); color: #fff; box-shadow: 0 0 0 2px #000 inset, 0 0 18px var(--rim, transparent); }
.rcard-logo { font-family: var(--disp); font-size: 40px; color: var(--gold-l); }
.rcards-many .rcard-logo { font-size: 20px; }
.rcard-front { background: #fff; transform: rotateY(180deg); color: var(--ink); }
.rcard-tier { font-size: 11px; font-weight: 900; color: var(--red); } .rcard-label { font-size: 14px; font-weight: 900; line-height: 1.2; } .rcard-souba { font-size: 10px; color: var(--mute); }
.rcards-many .rcard-tier { font-size: 8px; } .rcards-many .rcard-label { font-size: 9px; } .rcards-many .rcard-souba { display: none; }
.rim-white { --rim: #e0e0e0; } .rim-blue { --rim: #3b82f6; } .rim-green { --rim: #22c55e; } .rim-red { --rim: #ef4444; } .rim-silver { --rim: #c9d3dc; } .rim-gold { --rim: #f5b800; }
.rcard.rim-silver .rcard-back { animation: pulse 1.4s ease-in-out infinite; }
.rim-rainbow { --rim: #f5b800; }
.rim-rainbow .rcard-back, .rim-rainbow .rcard-front { border-image: conic-gradient(#ff004c, #ffb200, #21d07a, #2f80ed, #b721ff, #ff004c) 1; border-radius: 0; }
.rcard.rim-gold .rcard-back, .rcard.rim-rainbow .rcard-back { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 10px var(--rim); } 50% { box-shadow: 0 0 28px var(--rim); } }
.rcard.rim-rainbow .rcard-back { animation: rainbow 1.6s linear infinite; }
@keyframes rainbow { 0% { filter: hue-rotate(0deg) brightness(1.1); } 100% { filter: hue-rotate(360deg) brightness(1.1); } }
.rcard.open.hit .rcard-front { animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: rotateY(180deg) scale(.7); } 60% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(180deg) scale(1); } }
.reveal-after { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.reveal-after[hidden] { display: none; } /* めくる前に結果を見せない(display:flex が hidden を打ち消していた) */
.after-line { background: #fff; border-radius: 8px; padding: 12px; font-size: 14px; text-align: center; }
.after-line b { color: var(--red); }
.after-list { display: flex; flex-direction: column; gap: 4px; }
.after-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 6px; padding: 8px 10px; border-left: 5px solid var(--rim, #ddd); font-size: 12px; }
.after-tier { font-weight: 900; color: var(--red); width: 44px; flex: none; } .after-label { flex: 1; font-weight: 700; }
.after-btns { display: flex; flex-direction: column; gap: 8px; }

/* ===== 赤金の土台(会長 2026-09-09「白より赤や金を基調に」) data-theme="red" ===== */
html[data-theme=red] body { background: #e8100c; background-image: linear-gradient(180deg, #e8100c 0%, #ff4d1a 45%, #ff8a00 100%); background-attachment: fixed; }
html[data-theme=red] .hdr { background: #111111; border-bottom: 2px solid var(--gold); }
html[data-theme=red] .logo-a, html[data-theme=red] .logo-b { color: var(--gold-l); text-shadow: 0 2px 0 #000; }
html[data-theme=red] .logo-b { color: #fff; }
html[data-theme=red] .hdr .btn-line { background: transparent; color: var(--gold-l); border-color: var(--gold-l); }
html[data-theme=red] .hdr .btn-red { background: var(--gold); color: #5a0000; border-color: var(--gold); }
html[data-theme=red] .pill { background: #000; color: var(--gold-l); border-color: var(--gold); }
html[data-theme=red] .ticker { background: #3a0000; border: 1px solid var(--gold); }
html[data-theme=red] .ticker-tag { background: var(--gold); color: #3a0000; }
html[data-theme=red] .band { background: linear-gradient(135deg, #ffe66a 0%, #ffb200 50%, #ff7a00 100%); }
html[data-theme=red] .band-title { text-shadow: -2px -2px 0 #3a0000, 2px -2px 0 #3a0000, -2px 2px 0 #3a0000, 2px 2px 0 #3a0000, 0 3px 0 #3a0000; }
html[data-theme=red] .card { box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 2px solid var(--gold); }
html[data-theme=red] .card-entry { border-color: #3a0000; }
html[data-theme=red] .btn.btn-red { background: linear-gradient(180deg, #ff2a1a, #c40000); border-color: #ffd23f; box-shadow: 0 3px 0 #5a0000; }
html[data-theme=red] .btn-gold, html[data-theme=red] .btn.btn-gold { background: linear-gradient(180deg, #ffe66a, #ffb200); border-color: #fff; }
html[data-theme=red] .empty { background: #fff; color: var(--mute); }
html[data-theme=red] .empty a { color: var(--gold-l); }
html[data-theme=red] .h1, html[data-theme=red] .h2 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
html[data-theme=red] .main > .note, html[data-theme=red] .detail > .note, html[data-theme=red] .legal .note { color: #ffd9d9; }
html[data-theme=red] .detail-title { color: #fff; text-shadow: 0 2px 0 #000; }
html[data-theme=red] .detail-desc { color: #ffd9d9; }
html[data-theme=red] .detail .price-row, html[data-theme=red] .detail .left-n { color: #fff; }
html[data-theme=red] .detail .price-u { color: #ffd9d9; }
html[data-theme=red] .ev { background: #fff; }
html[data-theme=red] .next-teaser { background: #000; border: 1px solid var(--gold); }
html[data-theme=red] .next-card { border: 2px solid var(--gold); }
html[data-theme=red] .ftr { color: #ffd9d9; }
html[data-theme=red] .tabs { background: #111111; border-top: 2px solid var(--gold); }
html[data-theme=red] .tab { color: #bdbdbd; }
html[data-theme=red] .tab.on { color: var(--gold-l); }
html[data-theme=red] .form, html[data-theme=red] .me-bal, html[data-theme=red] .pend, html[data-theme=red] .tbl { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
html[data-theme=red] .reveal-status { background: #000; border: 1px solid var(--gold); }
html[data-theme=red] .reveal-name, html[data-theme=red] .reveal-sub { color: #fff; }
html[data-theme=red] .flash-ok { background: #fff; }
html[data-theme=red] .legal { color: #fff; } html[data-theme=red] .legal .legal-list { background: #fff; color: var(--ink); border-radius: 8px; padding: 12px 12px 12px 30px; }

/* ===== 欲望を刺激する配色の補強(会長 2026-09-09・根拠は設計書 第46-11節) ===== */
/* 押す所は「光る」: 動きは注意を最優先で引く(色より強い)。主ボタンだけ、控えめに */
@keyframes cta-glow { 0%, 100% { box-shadow: 0 3px 0 var(--red-d), 0 0 0 0 rgba(255,214,0,0); } 50% { box-shadow: 0 3px 0 var(--red-d), 0 0 22px 4px rgba(255,214,0,.55); } }
html[data-theme=red] .card .btn.btn-red, html[data-theme=red] .detail .btn.btn-red, html[data-theme=red] .after-btns .btn.btn-red { animation: cta-glow 1.8s ease-in-out infinite; }
/* 1等の枡は黒地に金(高級感＝黒と金の組み合わせ。金が一番目立つ地は黒) */
html[data-theme=red] .odd-top { background: #1a1a1a; border-color: var(--gold); }
html[data-theme=red] .odd-top .odd-l { color: var(--gold-l); } html[data-theme=red] .odd-top .odd-n { color: #fff; } html[data-theme=red] .odd-top .odd-p { color: var(--gold-l); }
html[data-theme=red] .tbl-odds .row-top td { background: #1a1a1a; color: #fff; } html[data-theme=red] .tbl-odds .row-top td:first-child { color: var(--gold-l); }
/* 残り口数の数字は赤(希少・急ぎの合図) */
.left-n b { color: var(--red); }
html[data-theme=red] .detail .left-n b { color: var(--gold-l); }
/* 見ている人数は炎の赤で脈打つ */
@keyframes flame { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.watchers svg { animation: flame 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .watchers svg, .btn { animation: none !important; } }

/* 未登録の人に見せる「登録すると開く」札 */
.locked { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; background: #1a1a1a; border: 2px dashed var(--gold); border-radius: 10px; color: #fff; }
.locked-k { font-family: var(--disp); font-size: 15px; color: var(--gold-l); }
.locked-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }

/* ラッシュ・天井・キリ番(第48-4節) */
.chip-rush { background: #0f7a3d; color: #fff; border-color: #0f7a3d; }
.odd-rush { background: #e8fbe9; border-color: #8fe0a0; } .odd-rush .odd-l { color: #0f7a3d; } .odd-rush .odd-n { color: #0f7a3d; }
.ceil { margin: 0 10px 12px; padding: 8px 10px; background: #fff8e1; border: 1px solid #ffe08a; border-radius: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
.detail .ceil { margin: 0; }
.ceil-off { background: #f3f3f3; border-color: #ddd; color: var(--mute); }
.ceil-t b { color: var(--red); } .ceil-s { font-size: 10px; color: var(--mute); }
.bar-ceil { height: 6px; } .bar-in-ceil { background: linear-gradient(90deg, #ffb200, #ff6a00); }
.mile { background: #fff; border-radius: 8px; padding: 10px 12px; font-size: 12px; } .mile b { color: var(--red); margin-right: 6px; }
html[data-theme=red] .mile { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
/* ラッシュの結果カード */
.rcard.kind-continue .rcard-front { background: #e8fbe9; border-color: #22c55e; } .rcard.kind-continue .rcard-tier { color: #0f7a3d; }
.rcard.kind-end .rcard-front { background: #eee; border-color: #bbb; } .rcard.kind-end .rcard-tier { color: #666; }
.rcards-rush { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rush-count { font-family: var(--disp); font-size: 34px; color: var(--gold-l); text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,214,0,.6); text-align: center; line-height: 1; }
.rush-count small { font-size: 14px; color: #fff; }

/* ===== 演出(fx.js)。第42節: 待たせる時間・光・粒子・カットイン ===== */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.fx-mute { margin-top: 6px; font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.35); color: #fff; }
/* 配る */
.rcard.dealing { opacity: 0; transform: translateY(60px) scale(.9); }
.rcard.dealt { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; opacity: 1; transform: none; }
/* ためる(押した後・めくる前) */
.rcard.arming .rcard-inner { animation: arm .5s ease-in-out infinite alternate; }
@keyframes arm { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(1.06) rotate(1.5deg); } }
.rcard.rim-gold.arming .rcard-back { box-shadow: 0 0 34px 8px rgba(255,214,0,.85); }
.rcard.rim-rainbow.arming .rcard-back { box-shadow: 0 0 40px 10px rgba(255,255,255,.9); }
/* 画面全体の色(ケラレ) */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 55; opacity: 0; transition: opacity .25s; }
body.fx-red::after { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(255,0,0,.55) 100%); animation: vign .8s ease-out; }
body.fx-gold::after { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,214,0,0) 40%, rgba(255,180,0,.65) 100%); animation: vign 1.6s ease-in-out; }
body.fx-rainbow::after { opacity: 1; background: conic-gradient(from 0deg, #ff004c, #ffb200, #21d07a, #2f80ed, #b721ff, #ff004c); mix-blend-mode: screen; animation: spinbg 2.6s linear; }
body.fx-dim::after { opacity: 1; background: rgba(0,0,0,.5); }
@keyframes vign { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .7; } }
@keyframes spinbg { from { filter: hue-rotate(0deg); opacity: .0; } 20% { opacity: .55; } to { filter: hue-rotate(360deg); opacity: .55; } }
body.fx-shake { animation: shake .5s ease-in-out; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(4px, -2px); } }
/* カットイン */
.fx-cutin { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); z-index: 70; pointer-events: none; font-family: var(--gold-f); font-size: 84px; line-height: 1; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px #4a1a00; filter: drop-shadow(0 0 2px #fff) drop-shadow(4px 6px 0 #4a1a00) drop-shadow(0 0 24px rgba(255,214,0,.9)); animation: cutin .5s cubic-bezier(.2,1.4,.3,1) forwards; }
.fx-cutin-top { background-image: linear-gradient(180deg, #fffbe6, #ffe45c 35%, #e0a80f 55%, #fff2a0 70%, #c07a00); font-size: 110px; }
.fx-cutin-2 { background-image: linear-gradient(180deg, #fff, #d9e2ea 35%, #7f8c99 55%, #eef3f7 75%, #55616d); }
.fx-cutin-3 { background-image: linear-gradient(180deg, #ffe0e0, #ff6a6a 40%, #c40000 60%, #ff9a9a 80%, #7a0000); font-size: 64px; }
.fx-cutin.out { animation: cutout .4s ease-in forwards; }
@keyframes cutin { to { transform: translate(-50%, -50%) scale(1) rotate(-6deg); } }
@keyframes cutout { to { transform: translate(-50%, -50%) scale(1.4) rotate(-6deg); opacity: 0; } }
/* ラッシュのスタンプ */
.fx-stamp { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(2) rotate(-10deg); z-index: 70; pointer-events: none; font-family: var(--disp); font-size: 42px; padding: 6px 18px; border: 4px solid; border-radius: 10px; opacity: 0; animation: stampin .9s cubic-bezier(.2,1.2,.3,1) forwards; background: rgba(255,255,255,.92); }
.fx-stamp-go { color: #0f7a3d; border-color: #0f7a3d; } .fx-stamp-end { color: #555; border-color: #555; }
@keyframes stampin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2) rotate(-10deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1) rotate(-8deg); } }
.rush-count.bump { animation: bump .35s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* 惜しい */
.rcard.fx-miss { animation: miss .6s ease-in-out; }
@keyframes miss { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .fx-cutin, .fx-stamp, body.fx-shake, .rcard.arming .rcard-inner { animation: none !important; } }

/* ===== 演出 v2(第49節): 昇格・扉・スキップ ===== */
.fx-skip { position: fixed; right: 12px; bottom: 16px; z-index: 75; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; }
.fx-overlay { position: fixed; inset: 0; z-index: 68; pointer-events: none; }
body.fx-black::after { opacity: 1; background: #000; transition: opacity .05s; }
body.fx-silver::after { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%, rgba(200,215,230,.7) 100%); animation: vign 1s ease-in-out; }
.fx-chance { position: fixed; left: 50%; top: 26%; transform: translate(-50%, -50%) skew(-8deg); z-index: 72; pointer-events: none; font-family: var(--gold-f); font-size: 56px; letter-spacing: .04em; -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #fff, #ffe45c 40%, #ff6a00 70%, #c40000); -webkit-text-stroke: 1px #4a1a00; filter: drop-shadow(0 0 2px #fff) drop-shadow(3px 4px 0 #4a1a00); animation: chancein 1.1s ease-out forwards; }
@keyframes chancein { 0% { opacity: 0; transform: translate(-50%, -50%) skew(-8deg) scale(1.6); } 15% { opacity: 1; transform: translate(-50%, -50%) skew(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-stamp-up { color: #c40000; border-color: #c40000; }
/* シャッター */
.fx-shutter .fx-shutter-a, .fx-shutter .fx-shutter-b { position: absolute; left: 0; right: 0; height: 50%; background: repeating-linear-gradient(180deg, #2a2a2a 0 14px, #3a3a3a 14px 16px); transition: transform .45s cubic-bezier(.6,0,.4,1); }
.fx-shutter .fx-shutter-a { top: 0; transform: translateY(-100%); animation: shutdown .35s ease-in forwards; }
.fx-shutter .fx-shutter-b { bottom: 0; transform: translateY(100%); animation: shutup .35s ease-in forwards; }
@keyframes shutdown { to { transform: translateY(0); } } @keyframes shutup { to { transform: translateY(0); } }
.fx-shutter.open .fx-shutter-a { animation: none; transform: translateY(-100%); } .fx-shutter.open .fx-shutter-b { animation: none; transform: translateY(100%); }
/* 炎 */
.rcard.fx-fire .rcard-back { box-shadow: 0 0 30px 10px rgba(255,106,0,.85), 0 0 60px 20px rgba(255,42,18,.5); animation: firey .25s ease-in-out infinite alternate; }
@keyframes firey { from { filter: brightness(1); } to { filter: brightness(1.5) saturate(1.4); } }
/* エレベーター(2択) */
.fx-elev-wrap { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.fx-elev { position: relative; width: 200px; height: 180px; }
.fx-elev-up, .fx-elev-stay { position: absolute; left: 0; right: 0; height: 80px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-size: 26px; color: #fff; border: 4px solid var(--rim, #fff); background: rgba(20,20,20,.9); box-shadow: 0 0 20px var(--rim, #fff); }
.fx-elev-up { top: 0; } .fx-elev-stay { bottom: 0; --rim: #777; font-size: 18px; }
.fx-elev-cur { position: absolute; left: -14px; width: 10px; height: 80px; bottom: 0; background: var(--gold-l); border-radius: 4px; transition: bottom 1s cubic-bezier(.3,1.4,.4,1); animation: elevjit .12s linear infinite alternate; }
@keyframes elevjit { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.fx-elev-wrap.go-up .fx-elev-cur { bottom: 100px; animation: none; } .fx-elev-wrap.go-up .fx-elev-up { animation: pulse .5s ease-in-out infinite; }
.fx-elev-wrap.go-stay .fx-elev-cur { animation: none; } .fx-elev-wrap.go-stay .fx-elev-stay { background: #444; }
/* 扉(ラッシュ) */
.fx-door-wrap { background: #0a0a0a; }
.fx-door { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #6a6f76, #c9d3dc 30%, #8e979f 60%, #d9e2ea 85%, #6a6f76); box-shadow: inset 0 0 40px rgba(0,0,0,.6); transition: transform 1.1s cubic-bezier(.7,0,.3,1); }
.fx-door::before { content: ""; position: absolute; inset: 10% 12%; border: 6px double rgba(60,60,70,.55); border-radius: 8px; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 6px, rgba(0,0,0,.08) 6px 12px); }
.fx-door-l { left: 0; border-right: 3px solid #2a2a2a; } .fx-door-r { right: 0; border-left: 3px solid #2a2a2a; }
.fx-door-label { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--disp); color: var(--gold-l); font-size: 16px; text-shadow: 0 2px 0 #000; }
.fx-door-wrap.rattle .fx-door-l { animation: doorjit .12s linear 4 alternate; } .fx-door-wrap.rattle .fx-door-r { animation: doorjit .12s linear 4 alternate-reverse; }
@keyframes doorjit { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
.fx-door-wrap.open { background: radial-gradient(circle at 50% 50%, #fff7c2, #ffb200 40%, #7a0000 100%); }
.fx-door-wrap.open .fx-door-l { transform: translateX(-104%); } .fx-door-wrap.open .fx-door-r { transform: translateX(104%); }
.fx-door-wrap.shut .fx-door-l { transform: translateX(-2%) scale(1.02); } .fx-door-wrap.shut .fx-door-r { transform: translateX(2%) scale(1.02); }
.fx-door-wrap.shut { background: #000; } .fx-door-wrap.shut .fx-door-label { color: #999; }

/* 当たりカードの表(第49節): 等級の色で光る額縁＋商品写真 */
.rcard-photo { width: 78%; max-height: 46%; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); margin-bottom: 4px; }
.rcards-many .rcard-photo, .rcards-rush .rcard-photo { display: none; }
.rcard.open.rim-rainbow .rcard-front { background: linear-gradient(160deg, #fff7f9, #fff 40%, #f3fff7); box-shadow: 0 0 30px rgba(255,255,255,.9), 0 0 60px rgba(255,0,76,.35); }
.rcard.open.rim-rainbow .rcard-tier { font-family: var(--gold-f); font-size: 22px; -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(90deg, #ff004c, #ffb200, #21d07a, #2f80ed, #b721ff); }
.rcard.open.rim-gold .rcard-front { background: linear-gradient(160deg, #fffbe6, #fff 45%, #fff2c2); box-shadow: 0 0 26px rgba(255,214,0,.8); }
.rcard.open.rim-gold .rcard-tier { font-family: var(--gold-f); font-size: 20px; color: #b8860b; }
.rcard.open.rim-silver .rcard-front { background: linear-gradient(160deg, #f4f7fa, #fff 45%, #e9eef3); box-shadow: 0 0 22px rgba(201,211,220,.9); }
.rcard.open.rim-silver .rcard-tier { font-family: var(--gold-f); font-size: 18px; color: #6b7785; }
.rcards-one .rcard-label { font-size: 16px; }

/* Astra批評(2026-09-10)の反映 */
.rim-hidden { --rim: #3a3a3a; }
.fx-cutin { white-space: nowrap; font-size: clamp(48px, 20vw, 96px); }
.fx-cutin-top { font-size: clamp(56px, 24vw, 120px); }
.fx-cutin-3 { font-size: clamp(40px, 16vw, 64px); }
.fx-cutin.out { animation: cutaway .4s ease-in forwards; }
@keyframes cutaway { to { transform: translate(-50%, -160%) scale(.7) rotate(-6deg); opacity: 0; } }
body.fx-rainbow::after, body.fx-gold::after { mix-blend-mode: normal; }
.fx-door-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff7c2 0%, #ffb200 30%, #7a0000 70%, #000 100%); opacity: 0; transition: opacity .6s; }
.fx-door-wrap.open .fx-door-glow { opacity: 1; }
.fx-door-wrap.open { background: #000; }
.fx-door { box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.8); background-image: linear-gradient(90deg, #6a6f76, #c9d3dc 30%, #8e979f 60%, #d9e2ea 85%, #6a6f76), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 3px, transparent 3px 9px); }
.fx-door-hint { position: absolute; left: 0; right: 0; top: 12%; text-align: center; font-family: var(--disp); color: #fff; font-size: 14px; letter-spacing: .1em; text-shadow: 0 2px 0 #000; opacity: .85; }
.fx-door-wrap.open .fx-door-label { font-size: 44px; color: var(--gold-l); bottom: 40%; text-shadow: 0 3px 0 #4a1a00, 0 0 20px rgba(255,214,0,.8); transition: all .3s; }