/* =========================================================
   目押しマスター — Slot Timing Practice
   ========================================================= */

:root{
  --bg-0:#07060d;
  --bg-1:#0d0b1a;
  --panel:#14112a;
  --panel-2:#1b1638;
  --line: rgba(255,255,255,0.08);
  --gold:#ffd25f;
  --gold-2:#ffb020;
  --pink:#ff3d81;
  --cyan:#3df2ff;
  --violet:#8b5cf6;
  --green:#39ff8f;
  --red:#ff4d5e;
  --ink:#f4f1ff;
  --ink-dim:#9d97c4;
  --symbol-h: 132px;
  --radius-lg: 26px;
  --radius-md: 16px;
  font-size: 16px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background: var(--bg-0);
  color: var(--ink);
  font-family: "Yu Gothic UI","Hiragino Kaku Gothic ProN","Segoe UI",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}

::selection{ background: var(--pink); color:#fff; }

/* ---------------- background fx ---------------- */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(255,61,129,0.25), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(61,242,255,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, #05040a 100%);
}

.beam{
  position:absolute;
  width:2px;
  height:140%;
  top:-20%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
  filter: blur(1px);
  animation: sway 9s ease-in-out infinite;
  transform-origin: top center;
}
.beam1{ left:18%; animation-delay:0s; background: linear-gradient(180deg, transparent, rgba(255,178,32,0.25), transparent);}
.beam2{ left:52%; animation-delay:-3s; background: linear-gradient(180deg, transparent, rgba(255,61,129,0.22), transparent);}
.beam3{ left:82%; animation-delay:-6s; background: linear-gradient(180deg, transparent, rgba(61,242,255,0.22), transparent);}
@keyframes sway{
  0%,100%{ transform: rotate(-6deg); opacity:.5; }
  50%{ transform: rotate(6deg); opacity:1; }
}

.grid-floor{
  position:absolute;
  left:0; right:0; bottom:0;
  height:40vh;
  background-image:
    linear-gradient(rgba(139,92,246,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.18) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  transform: perspective(400px) rotateX(55deg);
  transform-origin: bottom;
  opacity:.5;
}

/* ---------------- layout ---------------- */
.app{
  position:relative;
  z-index:1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display:flex;
  flex-direction:column;
  gap: 22px;
  min-height:100vh;
}

/* ---------------- topbar ---------------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-icon{
  font-size:2.6rem;
  filter: drop-shadow(0 0 14px rgba(255,178,32,0.65));
  animation: iconFloat 3.2s ease-in-out infinite;
}
@keyframes iconFloat{
  0%,100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-5px) rotate(3deg); }
}
.brand-text h1{
  margin:0;
  font-size: 1.7rem;
  letter-spacing: .06em;
  font-weight:800;
  background: linear-gradient(90deg, var(--gold), #fff3d0 40%, var(--gold-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 30px rgba(255,178,32,.25);
}
.brand-text h1 .accent{
  background: linear-gradient(90deg, var(--pink), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text p{
  margin:2px 0 0;
  font-size:.68rem;
  letter-spacing:.35em;
  color: var(--ink-dim);
}

.stat-cluster{ display:flex; gap:10px; }
.stat-chip{
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius: 14px;
  padding:8px 16px;
  min-width:84px;
  text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.stat-label{
  display:block;
  font-size:.6rem;
  letter-spacing:.18em;
  color: var(--ink-dim);
  margin-bottom:2px;
}
.stat-value{
  display:block;
  font-size:1.25rem;
  font-weight:800;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,178,32,.4);
}
.combo-chip .stat-value{ color: var(--cyan); text-shadow:0 0 12px rgba(61,242,255,.5); }
.combo-chip.pulse{ animation: comboPulse .35s ease; }
@keyframes comboPulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

/* ---------------- stage ---------------- */
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* target panel */
.target-panel{
  display:flex;
  align-items:center;
  gap:16px;
  background: linear-gradient(160deg, rgba(255,178,32,.14), rgba(255,61,129,.08));
  border:1px solid rgba(255,178,32,.35);
  padding:12px 26px;
  border-radius: 999px;
  box-shadow: 0 0 40px rgba(255,178,32,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.target-label{
  font-size:.68rem;
  letter-spacing:.3em;
  color: var(--gold);
  font-weight:700;
}
.target-symbol{
  font-size:2.1rem;
  line-height:1;
  filter: drop-shadow(0 0 12px rgba(255,178,32,.6));
  animation: targetPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes targetPop{
  0%{ transform: scale(0.3) rotate(-20deg); opacity:0; }
  100%{ transform: scale(1) rotate(0); opacity:1; }
}
.target-hint{
  font-size:.8rem;
  color: var(--ink-dim);
}

/* cabinet */
.cabinet{
  position:relative;
  width:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(160deg, #1a1533, #0f0c22 60%, #0a081a);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px clamp(16px, 4vw, 42px) 26px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 80px rgba(139,92,246,.12);
  overflow:hidden;
}
.cabinet-glow{
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding:2px;
  background: conic-gradient(from 0deg, var(--gold), var(--pink), var(--violet), var(--cyan), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.55;
  animation: spinBorder 6s linear infinite;
  pointer-events:none;
}
@keyframes spinBorder{ to{ filter:hue-rotate(360deg); } }

.payline-tag{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size:.6rem;
  letter-spacing:.2em;
  color: var(--pink);
  writing-mode: vertical-rl;
  opacity:.7;
}
.payline-tag.left{ left:10px; }
.payline-tag.right{ right:10px; }

.reels{
  display:flex;
  justify-content:center;
  gap: clamp(10px, 2.4vw, 26px);
  position:relative;
  z-index:1;
}

.reel-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  position:relative;
}

.reel-window{
  width: clamp(78px, 22vw, 128px);
  height: calc(var(--symbol-h) * 3);
  border-radius: var(--radius-md);
  overflow:hidden;
  position:relative;
  background: linear-gradient(180deg, #050409, #0c0a18 50%, #050409);
  border: 2px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 12px 24px rgba(0,0,0,.7),
    inset 0 -12px 24px rgba(0,0,0,.7),
    0 0 0 6px rgba(0,0,0,.35);
}

.reel-strip{
  position:absolute;
  top:0; left:0; width:100%;
  will-change: transform;
}

.symbol-cell{
  height: var(--symbol-h);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  user-select:none;
}
.symbol-cell.bar{
  font-weight:900;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing:.05em;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,178,32,.7);
  font-style:italic;
}
.symbol-cell.seven{
  font-weight:900;
  color: var(--red);
  text-shadow: 0 0 18px rgba(255,77,94,.8);
}

.reel-shade{
  position:absolute; left:0; right:0; height: calc(var(--symbol-h) * 0.85);
  pointer-events:none; z-index:2;
}
.reel-shade.top{ top:0; background: linear-gradient(180deg, rgba(0,0,0,.85), transparent); }
.reel-shade.bottom{ bottom:0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); }

.payline{
  position:absolute;
  left:0; right:0;
  top: 50%;
  height: var(--symbol-h);
  transform: translateY(-50%);
  border-top: 2px dashed rgba(255,61,129,.75);
  border-bottom: 2px dashed rgba(255,61,129,.75);
  box-shadow: 0 0 16px rgba(255,61,129,.35) inset;
  z-index:3;
  pointer-events:none;
}

/* stop buttons */
.stop-btn{
  position:relative;
  width: 68px;
  height: 68px;
  border-radius:50%;
  border: none;
  cursor:pointer;
  background: radial-gradient(circle at 35% 30%, #ff6f9c, var(--pink) 55%, #a8104a 100%);
  box-shadow:
    0 8px 0 #7a0c37,
    0 14px 24px rgba(255,61,129,.4);
  color:#fff;
  font-weight:800;
  font-size:1.15rem;
  transition: transform .06s ease, box-shadow .06s ease;
}
.stop-btn .key{
  position:relative; z-index:2;
  text-shadow: 0 2px 2px rgba(0,0,0,.35);
}
.stop-btn .btn-glow{
  position:absolute; inset:-10px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,61,129,.55), transparent 70%);
  opacity:0;
  transition: opacity .15s ease;
}
.stop-btn:hover .btn-glow{ opacity:1; }
.stop-btn:active,
.stop-btn.pressed{
  transform: translateY(6px);
  box-shadow: 0 2px 0 #7a0c37, 0 4px 10px rgba(255,61,129,.35);
}
.stop-btn:disabled{
  filter: grayscale(.6) brightness(.6);
  cursor:not-allowed;
  box-shadow: 0 8px 0 #3a2a33;
}

.judge-badge{
  position:absolute;
  top: -6px;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.08em;
  padding:4px 12px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
.judge-badge.show{
  animation: judgePop .9s ease forwards;
}
@keyframes judgePop{
  0%{ opacity:0; transform: translateY(10px) scale(.6); }
  15%{ opacity:1; transform: translateY(-6px) scale(1.15); }
  30%{ transform: translateY(-6px) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform: translateY(-26px) scale(.9); }
}
.judge-badge.perfect{ color:#1a1206; background: linear-gradient(120deg,#fff3c4,var(--gold)); box-shadow:0 0 22px rgba(255,178,32,.8);}
.judge-badge.great{ color:#062018; background: linear-gradient(120deg,#c8ffe9,var(--green)); box-shadow:0 0 18px rgba(57,255,143,.7);}
.judge-badge.good{ color:#001a24; background: linear-gradient(120deg,#c4f4ff,var(--cyan)); box-shadow:0 0 16px rgba(61,242,255,.6);}
.judge-badge.miss{ color:#fff; background: linear-gradient(120deg,#ff7a86,var(--red)); box-shadow:0 0 16px rgba(255,77,94,.6);}

/* result banner */
.result-banner{
  position:absolute;
  left:50%; top:40%;
  transform: translate(-50%,-50%) scale(.7);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight:900;
  letter-spacing:.06em;
  opacity:0;
  z-index:10;
  pointer-events:none;
  text-align:center;
  white-space:nowrap;
}
.result-banner.show-jackpot{
  animation: bannerJackpot 1.6s cubic-bezier(.2,1.4,.4,1) forwards;
  background: linear-gradient(90deg, var(--gold), #fff, var(--pink), var(--gold));
  background-size: 300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(255,178,32,.6));
}
@keyframes bannerJackpot{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.3) rotate(-10deg); background-position:0% 50%; }
  14%{ opacity:1; transform: translate(-50%,-50%) scale(1.22) rotate(3deg); }
  20%{ transform: translate(-50%,-50%) scale(.94) rotate(-2deg); }
  26%{ transform: translate(-50%,-50%) scale(1.06) rotate(1deg); }
  32%{ transform: translate(-50%,-50%) scale(1) rotate(0); }
  80%{ opacity:1; background-position:100% 50%; }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(1) translateY(-20px); }
}
.result-banner.show-fail{
  color: var(--ink-dim);
  animation: bannerFail 1.1s ease forwards;
}
@keyframes bannerFail{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.8);}
  20%{ opacity:1; transform: translate(-50%,-50%) scale(1);}
  80%{ opacity:1; }
  100%{ opacity:0; }
}

.cabinet.shake{ animation: shake .4s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(4px); }
}

/* ---------------- control panel ---------------- */
.control-panel{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 26px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.panel-label{
  display:block;
  font-size:.62rem;
  letter-spacing:.25em;
  color: var(--ink-dim);
  margin-bottom:8px;
}
.diff-btns{ display:flex; gap:8px; }
.diff-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--ink-dim);
  padding:8px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.05em;
  cursor:pointer;
  transition: all .15s ease;
}
.diff-btn:hover{ color:var(--ink); border-color: rgba(255,255,255,.25); }
.diff-btn.active{
  background: linear-gradient(120deg, var(--violet), var(--pink));
  color:#fff;
  border-color:transparent;
  box-shadow: 0 4px 16px rgba(139,92,246,.5);
}

.lever-btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  border:none;
  cursor:pointer;
  padding: 14px 34px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--gold), var(--gold-2));
  color:#241400;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow: 0 10px 0 #a56409, 0 18px 30px rgba(255,178,32,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.lever-btn .lever-icon{ font-size:1.4rem; }
.lever-btn .lever-text{ font-size:1.05rem; }
.lever-btn .lever-sub{ font-size:.6rem; opacity:.7; letter-spacing:.2em; }
.lever-btn:active{
  transform: translateY(8px);
  box-shadow: 0 2px 0 #a56409, 0 4px 10px rgba(255,178,32,.3);
}
.lever-btn:disabled{
  filter: grayscale(.5) brightness(.75);
  cursor:not-allowed;
  box-shadow: 0 10px 0 #4a3a1a;
}
.lever-btn.spinning{ animation: leverGlow 1s ease-in-out infinite; }
@keyframes leverGlow{
  0%,100%{ box-shadow: 0 10px 0 #a56409, 0 18px 30px rgba(255,178,32,.35); }
  50%{ box-shadow: 0 10px 0 #a56409, 0 18px 46px rgba(255,178,32,.7); }
}

.toggle-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--ink-dim);
  padding:8px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:.7rem;
  cursor:pointer;
  min-width:64px;
}
.toggle-btn.active{
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  color:#031018;
  border-color:transparent;
}

/* ---------------- footer ---------------- */
.foot-note{
  text-align:center;
  color: var(--ink-dim);
  font-size:.78rem;
  padding-top:6px;
}
.foot-note b{ color: var(--gold); }
.version-badge{
  display:inline-block;
  margin-top:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--ink-dim);
  padding:5px 14px;
  border-radius:999px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, border-color .15s ease;
}
.version-badge:hover{ color: var(--gold); border-color: rgba(255,178,32,.4); }

/* ---------------- changelog modal ---------------- */
.changelog-list{ display:flex; flex-direction:column; gap:16px; }
.changelog-entry{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
}
.changelog-entry.latest{
  border-color: rgba(255,178,32,.5);
  background: linear-gradient(160deg, rgba(255,178,32,.1), rgba(255,61,129,.05));
}
.changelog-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.changelog-version{
  font-weight:900;
  font-size:.9rem;
  color: var(--gold);
}
.changelog-date{
  font-size:.68rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.changelog-badge{
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#1a1206;
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  padding:2px 9px;
  border-radius:999px;
}
.changelog-entry ul{ margin:0; padding-left:1.2em; }
.changelog-entry li{ font-size:.76rem; color: var(--ink); line-height:1.6; }

/* ---------------- particles ---------------- */
.particle-layer{
  position:fixed; inset:0; z-index:50;
  pointer-events:none;
  overflow:hidden;
}
.particle{
  position:absolute;
  border-radius:50%;
  opacity:0;
  line-height:1;
  text-align:center;
}
.particle.burst{
  animation: burstFly var(--dur,900ms) ease-out forwards;
}
@keyframes burstFly{
  0%{ opacity:1; transform: translate(0,0) scale(1); }
  100%{ opacity:0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
.confetti{
  position:absolute;
  top:-20px;
  width:9px; height:16px;
  opacity:.95;
  animation: confettiFall var(--dur, 2400ms) linear forwards;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(110vh) rotate(600deg); opacity:.2; }
}

/* =========================================================
   やりこみ要素 & 追加演出（実績 / レベル / トースト 等）
   ========================================================= */

/* ---------------- ambient particles ---------------- */
.ambient-particles{ position:absolute; inset:0; overflow:hidden; }
.amb-dot{
  position:absolute;
  bottom:-6vh;
  border-radius:50%;
  opacity:0;
  animation-name: ambFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ambFloat{
  0%{ transform: translate(0,0); opacity:0; }
  8%{ opacity:.75; }
  92%{ opacity:.55; }
  100%{ transform: translate(20px,-118vh); opacity:0; }
}

/* ---------------- player / level bar ---------------- */
.player-bar{
  display:flex;
  align-items:center;
  gap:16px;
  background: linear-gradient(120deg, rgba(139,92,246,.16), rgba(61,242,255,.08));
  border:1px solid rgba(139,92,246,.35);
  border-radius: 999px;
  padding: 8px 10px 8px 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.level-badge{
  flex-shrink:0;
  font-weight:900;
  font-size:.95rem;
  letter-spacing:.03em;
  color:#1a1206;
  background: linear-gradient(150deg, var(--gold), var(--gold-2));
  padding:9px 16px;
  border-radius:999px;
  box-shadow: 0 0 16px rgba(255,178,32,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.player-info{ flex:1; min-width:0; }
.player-title{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  color: var(--ink);
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xp-bar{
  height:8px;
  border-radius:999px;
  background: rgba(0,0,0,.4);
  overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.xp-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  position:relative;
  transition: width .5s cubic-bezier(.2,1,.3,1);
  box-shadow: 0 0 10px rgba(61,242,255,.6);
}
.xp-fill::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width:40%;
  animation: xpShine 2.4s linear infinite;
}
@keyframes xpShine{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(280%); }
}
.ach-btn{
  flex-shrink:0;
  border:none;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.02em;
  color:#fff;
  background: linear-gradient(120deg, var(--pink), var(--violet));
  box-shadow: 0 6px 16px rgba(255,61,129,.35);
  transition: transform .12s ease;
}
.ach-btn:hover{ transform: translateY(-2px); }
.ach-btn:active{ transform: translateY(0); }

/* ---------------- marquee ---------------- */
.marquee{
  width:100%;
  overflow:hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(20,17,42,.6), rgba(0,0,0,.5));
  border:1px solid var(--line);
  border-radius: 999px;
  padding:7px 0;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.marquee-track{
  display:inline-block;
  white-space:nowrap;
  font-size:.72rem;
  letter-spacing:.04em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,178,32,.5);
  animation: marqueeScroll 26s linear infinite;
  padding-left:100%;
}
@keyframes marqueeScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---------------- cabinet attract lights ---------------- */
.cabinet-lights{
  position:absolute;
  top:8px; left:16px; right:16px;
  height:0;
  z-index:2;
  pointer-events:none;
}
.bulb{
  position:absolute;
  top:0;
  width:7px; height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 4px rgba(255,178,32,.6);
  animation: bulbTwinkle 2.6s ease-in-out infinite;
}
/* 点滅ではなく、ゆっくり色が移ろう「きらめき」に留める（光過敏の方への配慮） */
@keyframes bulbTwinkle{
  0%,100%{ background: var(--gold); box-shadow:0 0 10px rgba(255,178,32,.75); opacity:1; }
  50%{ background: var(--pink); box-shadow:0 0 10px rgba(255,61,129,.75); opacity:.68; }
}

/* ---------------- combo heat meter ---------------- */
.combo-chip{ position:relative; overflow:visible; transition: box-shadow .3s ease; }
.combo-chip.heat-1{ box-shadow: 0 0 14px rgba(61,242,255,.5); }
.combo-chip.heat-2{ box-shadow: 0 0 18px rgba(139,92,246,.65); }
.combo-chip.heat-2 .stat-value{ color: var(--violet); text-shadow:0 0 12px rgba(139,92,246,.6); }
.combo-chip.heat-3{ box-shadow: 0 0 22px rgba(255,61,129,.7); animation: heatPulse 1.1s ease-in-out infinite; }
.combo-chip.heat-3 .stat-value{ color: var(--pink); text-shadow:0 0 14px rgba(255,61,129,.7); }
.combo-chip.heat-4{ box-shadow: 0 0 30px rgba(255,178,32,.85); animation: heatPulse .6s ease-in-out infinite; }
.combo-chip.heat-4 .stat-value{ color: var(--gold); text-shadow:0 0 16px rgba(255,178,32,.85); }
@keyframes heatPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

/* ---------------- screen bloom (jackpot) ----------------
   光過敏の方への配慮として、真っ白な強いフラッシュは使わず、
   暖色の柔らかいグロー（じわっと現れてゆっくり消える）に留める。 */
.screen-flash{
  position:fixed; inset:0; z-index:90;
  background: radial-gradient(circle, rgba(255,205,110,.42), rgba(255,120,170,.18) 45%, transparent 72%);
  pointer-events:none;
  animation: bloomInOut 900ms cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes bloomInOut{
  0%{ opacity:0; }
  25%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---------------- jackpot: cabinet punch & 光線バースト ---------------- */
.cabinet.punch{ animation: cabinetPunch .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes cabinetPunch{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.025); }
  100%{ transform: scale(1); }
}
.jackpot-rays{
  position:absolute;
  top:50%; left:50%;
  width:160vmax; height:160vmax;
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    rgba(255,178,32,.16) 0deg, transparent 18deg,
    rgba(255,61,129,.14) 40deg, transparent 58deg,
    rgba(139,92,246,.14) 80deg, transparent 98deg,
    rgba(61,242,255,.14) 120deg, transparent 138deg,
    rgba(255,178,32,.16) 160deg, transparent 178deg,
    rgba(255,61,129,.14) 200deg, transparent 218deg,
    rgba(139,92,246,.14) 240deg, transparent 258deg,
    rgba(61,242,255,.14) 280deg, transparent 298deg,
    rgba(255,178,32,.16) 320deg, transparent 338deg, transparent 360deg);
  pointer-events:none;
  z-index:1;
  opacity:0;
  animation: raysBurst 1.8s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes raysBurst{
  0%{ opacity:0; transform: translate(-50%,-50%) rotate(0deg) scale(.4); }
  20%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%,-50%) rotate(45deg) scale(1); }
}

/* ---------------- ヒット時のリングパルス（単発・非点滅） ---------------- */
.ring-pulse{
  position:fixed;
  border-radius:50%;
  border:3px solid var(--gold);
  pointer-events:none;
  z-index:55;
  transform: translate(-50%,-50%) scale(.3);
  opacity:.9;
  animation: ringExpand 620ms ease-out forwards;
}
@keyframes ringExpand{
  0%{ transform: translate(-50%,-50%) scale(.3); opacity:.9; }
  100%{ transform: translate(-50%,-50%) scale(2.6); opacity:0; }
}

/* ---------------- toast (achievement unlock) ---------------- */
.toast-layer{
  position:fixed;
  top: 16px;
  right: 16px;
  z-index:150;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  max-width: min(360px, calc(100vw - 32px));
}
.toast{
  display:flex;
  align-items:center;
  gap:12px;
  background: linear-gradient(135deg, #1b1638, #0f0c22);
  border:1px solid rgba(255,178,32,.5);
  border-radius: 16px;
  padding:12px 14px;
  box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,178,32,.25);
  transform: translateX(120%);
  opacity:0;
  transition: transform .4s cubic-bezier(.2,1,.3,1), opacity .4s ease;
}
.toast.show{ transform: translateX(0); opacity:1; }
.toast.hide{ transform: translateX(120%); opacity:0; }
.toast-icon{
  font-size:1.8rem;
  filter: drop-shadow(0 0 8px rgba(255,178,32,.7));
  flex-shrink:0;
}
.toast-body{ min-width:0; flex:1; }
.toast-label{ font-size:.6rem; letter-spacing:.15em; color: var(--gold); font-weight:800; }
.toast-title{ font-size:.9rem; font-weight:800; color:#fff; margin:1px 0; }
.toast-desc{ font-size:.68rem; color: var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast-xp{
  flex-shrink:0;
  font-weight:900;
  font-size:.85rem;
  color: var(--gold);
  text-align:center;
  line-height:1.1;
}
.toast-xp span{ display:block; font-size:.55rem; opacity:.7; }

/* ---------------- level-up banner ---------------- */
.levelup-banner{
  position:fixed;
  top: 30%;
  left:50%;
  transform: translate(-50%,-50%) scale(.6);
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  font-weight:900;
  letter-spacing:.06em;
  opacity:0;
  pointer-events:none;
  z-index:160;
  background: linear-gradient(90deg, var(--cyan), #fff, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 18px rgba(61,242,255,.6));
  white-space:nowrap;
}
.levelup-banner.show{
  animation: levelUpPop 1.8s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes levelUpPop{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.5) rotate(-6deg); }
  18%{ opacity:1; transform: translate(-50%,-50%) scale(1.12) rotate(2deg); }
  30%{ transform: translate(-50%,-50%) scale(1) rotate(0); }
  82%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(1) translateY(-16px); }
}

/* ---------------- achievements modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background: rgba(5,4,10,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-panel{
  width:min(760px, 100%);
  max-height:86vh;
  overflow-y:auto;
  background: linear-gradient(165deg, #17132e, #0c0a1c);
  border:1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 24px clamp(16px,3vw,28px) 28px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(139,92,246,.2);
  transform: scale(.92) translateY(10px);
  transition: transform .3s cubic-bezier(.2,1,.3,1);
}
.modal-overlay.open .modal-panel{ transform: scale(1) translateY(0); }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
  position:sticky; top:0;
}
.modal-header h2{
  margin:0;
  font-size:1.2rem;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal-close{
  border:none; cursor:pointer;
  width:34px; height:34px;
  border-radius:50%;
  background: rgba(255,255,255,.08);
  color: var(--ink);
  font-size:1rem;
  transition: background .15s ease, transform .15s ease;
}
.modal-close:hover{ background: rgba(255,61,129,.3); transform: rotate(90deg); }

.modal-stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap:10px;
  margin-bottom:20px;
}
.mstat{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.mstat span{ font-size:.62rem; letter-spacing:.1em; color: var(--ink-dim); }
.mstat b{ font-size:1.1rem; color: var(--gold); font-variant-numeric: tabular-nums; }

.ach-grid{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.ach-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.ach-section-head h3{
  margin:0;
  font-size:.88rem;
  letter-spacing:.04em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(61,242,255,.4);
}
.ach-section-head span{
  font-size:.72rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.ach-section-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap:10px;
}

.backup-bar{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  text-align:center;
}
.backup-note{
  margin:0;
  font-size:.68rem;
  color: var(--ink-dim);
  max-width:520px;
  line-height:1.5;
}
.backup-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.backup-btn{
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  padding:9px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:.74rem;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.backup-btn:hover{ background: rgba(255,255,255,.1); transform: translateY(-2px); }
.ach-card{
  position:relative;
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  overflow:hidden;
  transition: transform .15s ease;
}
.ach-card:hover{ transform: translateY(-3px); }
.ach-card.unlocked{
  border-color: rgba(255,178,32,.5);
  background: linear-gradient(160deg, rgba(255,178,32,.12), rgba(255,61,129,.06));
  box-shadow: 0 0 18px rgba(255,178,32,.15);
}
.ach-card.unlocked::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size:250% 250%;
  animation: cardShine 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cardShine{
  0%{ background-position: 150% 150%; }
  100%{ background-position: -50% -50%; }
}
.ach-card.locked{ opacity:.62; }
.ach-card.locked .ach-icon{ filter: grayscale(1) brightness(.8); }
.ach-icon{ font-size:1.7rem; margin-bottom:6px; }
.ach-name{ font-size:.85rem; font-weight:800; margin-bottom:3px; }
.ach-desc{ font-size:.68rem; color: var(--ink-dim); line-height:1.4; margin-bottom:8px; min-height:2.6em; }
.ach-progress{
  height:6px; border-radius:999px; background: rgba(0,0,0,.4); overflow:hidden;
}
.ach-progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  border-radius:999px;
}
.ach-progress-text{ font-size:.62rem; color: var(--ink-dim); margin-top:4px; text-align:right; }
.ach-done{
  font-size:.68rem; font-weight:800; color: var(--gold);
  text-shadow: 0 0 8px rgba(255,178,32,.6);
}

/* ---------------- title glow upgrade ---------------- */
.brand-text h1{
  background-size: 200% auto;
  animation: titleShift 5s linear infinite;
}
@keyframes titleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 640px){
  :root{ --symbol-h: 92px; }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .stat-cluster{ width:100%; justify-content:space-between; }
  .control-panel{ justify-content:center; }
  .cabinet{ padding: 26px 10px 20px; }
  .player-bar{ flex-wrap:wrap; border-radius:20px; }
  .ach-btn{ order:3; width:100%; text-align:center; }
  .marquee-track{ font-size:.66rem; }
}

/* =========================================================
   モーション低減設定への対応（OS/ブラウザの「視差効果を減らす」設定）
   常時ループする装飾アニメーションを止め、演出は最小限のフェードに留める。
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .beam, .amb-dot, .bulb, .marquee-track, .xp-fill::after,
  .ach-card.unlocked::before, .brand-text h1, .cabinet-glow,
  .combo-chip.heat-3, .combo-chip.heat-4, .lever-btn.spinning{
    animation: none !important;
  }
  .grid-floor{ display:none; }
  .screen-flash, .jackpot-rays, .ring-pulse, .confetti, .particle.burst{
    display:none !important;
  }
}