:root{
  --gold:#e8b13c; --gold2:#ffdf7e; --red:#d21f26; --deep:#14100c;
  --panel:#241a12; --cell:92px;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#3a2410,#0b0806 70%);
  color:#f3e9d2;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  display:flex;justify-content:center;padding:14px}
.cabinet{width:min(680px,100%);background:linear-gradient(180deg,#2b1d10,#171008);
  border:3px solid #6d4c1c;border-radius:18px;padding:16px;box-shadow:0 20px 60px #000}
.top-panel{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.logo-sub{color:var(--gold);font-size:12px;letter-spacing:.15em}
.logo h1{margin:2px 0;font-size:52px;line-height:1;font-weight:900;
  background:linear-gradient(180deg,#fff3c4,#e8b13c 55%,#8a5a10);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.15)}
.logo-note{font-size:12px;color:#cbb488}
.data-counter{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;background:#0a0805;border:1px solid #57431f;border-radius:8px;padding:8px 12px;font-family:ui-monospace,monospace}
.data-counter div{display:flex;justify-content:space-between;gap:10px}
.dc-label{color:#9c8a5f;font-size:11px}
.data-counter span:last-child{color:#7dff8a;font-weight:700}
.lamp-row{display:flex;gap:6px;margin:12px 0 8px;flex-wrap:wrap}
.lamp{padding:4px 10px;border-radius:20px;background:#241c10;border:1px solid #57431f;color:#8a774e;font-size:12px;font-weight:700;letter-spacing:.08em}
.lamp.on{background:var(--red);color:#fff;box-shadow:0 0 12px var(--red)}
.lamp.big{flex:1;text-align:center}
.lamp.big.on{background:linear-gradient(90deg,#d21f26,#ff7a1a);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{filter:brightness(1.6)}}
.message{min-height:28px;text-align:center;font-size:17px;font-weight:700;color:var(--gold2);text-shadow:0 0 8px rgba(232,177,60,.4)}
.reel-window{position:relative;background:linear-gradient(180deg,#fff8ea,#e9dcc0);border-radius:12px;
  border:4px solid #0a0805;box-shadow:inset 0 0 0 2px #8a6d35, inset 0 10px 24px rgba(0,0,0,.35);overflow:hidden}
.reels{display:flex}
.reel{flex:1;height:calc(var(--cell)*3);overflow:hidden;position:relative;border-right:2px solid #b7a67e}
.reel:last-child{border-right:none}
.reel-col{position:absolute;left:0;right:0;will-change:transform}
.sym{height:var(--cell);display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid #d8c9a3;color:#221a10}
.sym .lab{font-size:30px;font-weight:900;line-height:1}
.sym .sub{font-size:11px;color:#6d5c39;font-weight:700}
.sym.aka7 .lab{color:#d21f26;font-size:44px}
.sym.hokuto .lab{color:#8a5a10;background:linear-gradient(180deg,#ffe98a,#c8912a);padding:2px 10px;border-radius:6px;border:2px solid #7a5210}
.sym.bar .lab{background:#171310;color:#f5ecd7;padding:2px 12px;border-radius:4px;letter-spacing:.2em}
.sym.bell .lab{color:#c8912a}
.sym.suika .lab{color:#1d7a2e}
.sym.cherry .lab{color:#c22744}
.sym.replay .lab{color:#1756a9;font-size:20px}
.sym.jac .lab{color:#7a2ea0;border:2px solid #7a2ea0;padding:1px 8px;border-radius:4px;font-size:22px}
.sym.blank .lab{color:#cbbb95}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 30%,transparent 70%,rgba(0,0,0,.38))}
.payline-marks{display:none}
.win-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.win-lines line{stroke:#ff2222;stroke-width:5;opacity:.85;filter:drop-shadow(0 0 4px #ff0)}
.reel-glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 48%,transparent 58%)}
.control-deck{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.seg-group{display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center}
.seg-label{font-size:11px;color:#9c8a5f;font-weight:700}
.seg{background:#050403;color:#ffb03a;font-family:ui-monospace,monospace;font-size:26px;font-weight:700;
  padding:2px 10px;border-radius:6px;border:1px solid #57431f;min-width:86px;text-align:right}
.buttons{display:flex;gap:8px}
.btn{cursor:pointer;border:none;border-radius:10px;padding:10px 12px;font-weight:800;color:#fff;background:#4a3820;box-shadow:0 3px 0 #221809}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.bet{background:linear-gradient(180deg,#c8912a,#8a5a10)}
.btn.lever{background:linear-gradient(180deg,#d21f26,#8f1013);font-size:16px;padding:12px 18px}
.btn:disabled{opacity:.4;cursor:default}
.stop-buttons{display:flex;gap:8px;margin-left:auto}
.btn.stop{background:linear-gradient(180deg,#31537d,#1c3350);border-radius:50%;width:86px;height:86px;font-size:13px}
.btn.stop:disabled{background:#333}
.btn.stop.ready{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 18px #7db4ff}}
.sub-panel{display:flex;gap:16px;margin-top:12px;font-size:13px;color:#cbb488;flex-wrap:wrap}
.sub-panel select{background:#0a0805;color:#f3e9d2;border:1px solid #57431f;border-radius:4px;padding:2px 6px}
.z80-monitor{margin-top:14px;background:#061206;border:1px solid #1f4d1f;border-radius:10px;padding:10px 14px;font-family:ui-monospace,monospace}
.z80-monitor h2{font-size:13px;color:#7dff8a;margin:0 0 8px;letter-spacing:.1em}
.mon-note{color:#4d7a4d;font-size:11px}
.mon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 12px;font-size:12.5px;color:#9fd89f}
.mon-grid b{color:#eaffea}
.mon-grid .wide{grid-column:span 2}
.info-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
@media(min-width:640px){.info-grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--panel);border:1px solid #57431f;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#d9c9a3}
.card h2{font-size:14px;color:var(--gold2);margin:0 0 8px}
.card table{width:100%;border-collapse:collapse;font-family:ui-monospace,monospace}
.card th,.card td{border-bottom:1px solid #43331a;padding:2px 4px;text-align:right}
.card th:first-child,.card td:first-child{text-align:left}
.strip-view{display:flex;gap:6px;font-size:9.5px}
.strip-col{flex:1;background:#0a0805;border-radius:6px;padding:4px}
.strip-col div{padding:1px 2px;border-radius:3px;color:#cbb488;white-space:nowrap}
.strip-col div.cur{background:#d21f26;color:#fff;font-weight:700}
footer{margin-top:12px;font-size:11px;color:#8a774e;text-align:center}
@media(max-width:560px){:root{--cell:74px}.logo h1{font-size:40px}.btn.stop{width:70px;height:70px}}