:root{
  color-scheme:dark;
  --bg:#090b0a;--bg2:#0f120f;--panel:#121511;--panel2:#171a15;
  --ink:#f1e7d2;--muted:#a39b8b;--dim:#706a5d;
  --yamabuki:#d69a24;--yamabuki2:#edbd4a;--brass:#9f7227;
  --green:#176b52;--red:#8e2f32;--ivory:#f1e7d2;
  --line:#403820;--line2:#262820;--hot:#c63d34;--shadow:rgba(0,0,0,.58);
  --ui-font:"Source Han Sans JP","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --brand-font:"BIZ UDPGothic","Yu Gothic UI","Yu Gothic",Meiryo,var(--ui-font);
  --pop-font:"HG創英角ポップ体","HGP創英角ポップ体","HG創英角ﾎﾟｯﾌﾟ体",var(--ui-font);
  --wafu-font:"勘亭流","HG正楷書体-PRO","Yu Mincho","Hiragino Mincho ProN",serif;
  --heavy-font:"Source Han Sans JP","Noto Sans JP","Arial Black",Impact,var(--ui-font);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;color:var(--ink);font:14px/1.55 var(--ui-font);background:
 radial-gradient(circle at 50% -15%,rgba(214,154,36,.08),transparent 36rem),
 radial-gradient(circle at 15% 42%,rgba(23,107,82,.045),transparent 30rem),
 linear-gradient(180deg,#10130f,#080908 72%)}
button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--yamabuki2);outline-offset:3px}
.page-shell{width:min(760px,calc(100% - 20px));margin:0 auto}.game-wrap{padding:10px 0 20px}.page-tools{height:34px;display:flex;align-items:center;gap:13px;color:#817a6c;font-size:11px;padding:0 3px}.mini-brand{font-family:var(--brand-font);font-weight:900;color:#b9af99;letter-spacing:.03em}.page-spacer{flex:1}.text-btn{border:0;background:transparent;padding:4px 2px;color:#9d9585;cursor:pointer}.text-btn:hover{color:var(--yamabuki2)}
.machine-shell{position:relative;margin:0 auto}.machine-bezel{position:relative;overflow:hidden;border:1px solid #4c4028;border-radius:18px;background:#0d0f0d;box-shadow:0 24px 70px var(--shadow),inset 0 0 0 4px #070807,inset 0 0 0 5px #312817}.machine-bezel:before{content:"";position:absolute;inset:7px;border:1px solid rgba(169,120,40,.14);border-radius:13px;pointer-events:none;z-index:20}
.machine-title-row{height:43px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #332a1a;background:linear-gradient(90deg,#17150f,#101310 62%,#101813)}.machine-title{display:flex;align-items:center;gap:8px}.machine-title strong{font-family:var(--brand-font);font-size:16px;font-weight:900;color:var(--yamabuki2);letter-spacing:.035em;text-shadow:0 1px 0 #432a0b}.lamp{width:7px;height:7px;border-radius:50%;background:#2d2410;border:1px solid #6e571d;box-shadow:inset 0 0 4px #000}.playing .lamp-left{background:var(--yamabuki2);box-shadow:0 0 9px rgba(232,182,62,.55)}.machine-status{display:flex;gap:10px;color:#766f61;font:9px var(--mono);letter-spacing:.02em}.machine-status #status-label{color:#b68628}
/* simple browser-game flow */
.flow-overlay{position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(circle at 50% 35%,rgba(214,154,36,.11),transparent 19rem),linear-gradient(180deg,rgba(8,10,9,.965),rgba(7,8,7,.992));backdrop-filter:blur(4px)}.flow-overlay.hidden{display:none}.flow-screen{display:none;width:min(520px,94%);text-align:center}.flow-screen.active{display:block;animation:flowin .18s ease-out}@keyframes flowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.title-logo-wrap{position:relative;width:min(500px,95%);height:160px;margin:-22px auto 0;display:grid;place-items:center}.title-logo{position:absolute;inset:18px 0 auto;width:100%;height:auto;opacity:.96}.title-wordmark{position:relative;z-index:2;margin:12px 0 0;font:900 clamp(48px,8.2vw,70px)/.96 var(--brand-font);letter-spacing:-.035em;color:#f0c252;background:linear-gradient(180deg,#fff0ad 0%,#e8b63e 42%,#b87518 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.8px rgba(77,43,7,.72);filter:drop-shadow(0 3px 0 #3d2508) drop-shadow(0 0 10px rgba(214,154,36,.18));transform:skewX(-2deg)}.title-submark{position:absolute;z-index:2;left:0;right:0;bottom:12px;color:#c8b78c;font:800 10px var(--ui-font);letter-spacing:.34em}.title-copy{margin:-5px 0 24px;color:#b8ae9b;letter-spacing:.08em}.title-note{display:block;margin-top:20px;color:#665f54;font-size:10px}.flow-kicker{color:#8b806b;font:10px var(--mono);letter-spacing:.22em}.flow-screen h2{margin:7px 0 0;font:900 32px/1.2 var(--heavy-font);letter-spacing:.06em}.course-lead{margin:5px 0 18px;color:#8f8778}.primary,.secondary{border-radius:7px;cursor:pointer;transition:transform .08s,border-color .12s,filter .12s}.primary{border:1px solid #9b7022;background:linear-gradient(#e2a938,#b97718);color:#171006;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.24),0 5px 14px rgba(0,0,0,.28)}.primary:hover{filter:brightness(1.08)}.primary:active,.secondary:active{transform:translateY(1px)}.secondary{border:1px solid #4a4335;background:#11130f;color:#c0b6a3}.secondary:hover{border-color:#80672e;color:#e0c47a}.flow-play{width:min(300px,80%);height:54px;font-size:18px;letter-spacing:.13em}.flow-sub-actions{display:flex;justify-content:center;gap:9px;margin-top:11px}.flow-sub-actions button{min-width:110px;height:36px}.flow-course-list{display:grid;gap:9px;margin:18px 0 13px}.flow-course-button{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border:1px solid #423c2f;border-left:5px solid #6d654f;border-radius:8px;background:linear-gradient(90deg,#151711,#10120f);text-align:left;cursor:pointer}.flow-course-button:nth-child(1){border-left-color:var(--green)}.flow-course-button:nth-child(2){border-left-color:var(--yamabuki)}.flow-course-button:nth-child(3){border-left-color:var(--red)}.flow-course-button:hover,.flow-course-button.selected{border-color:#806c3c;background:linear-gradient(90deg,#201b11,#111612);transform:translateX(2px)}.flow-course-button span{display:grid;gap:1px}.flow-course-button b{font-size:17px}.flow-course-button small{color:#8e8678}.flow-course-button strong{font:900 18px var(--heavy-font);color:#e4b348;white-space:nowrap}.flow-back{height:36px;min-width:140px}.countdown-value{min-height:145px;display:grid;place-items:center;color:var(--yamabuki2);font:900 clamp(76px,16vw,130px)/1 var(--heavy-font);text-shadow:0 0 22px rgba(214,154,36,.24)}#countdown-course{color:#c1b7a3;letter-spacing:.07em}
/* playfield and art layers */
.playfield-wrap{padding:10px 10px 0}.board{position:relative;width:100%;aspect-ratio:720/650;overflow:hidden;border:1px solid #51462f;border-radius:14px 14px 8px 8px;background:#0b0d0b;box-shadow:inset 0 0 35px #000,0 1px 0 rgba(255,255,255,.03)}.board:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(116deg,rgba(255,255,255,.035),transparent 18%,transparent 76%,rgba(255,255,255,.018)),radial-gradient(circle at 50% 34%,transparent 50%,rgba(0,0,0,.23) 100%)}.board-asset{position:absolute;pointer-events:none;user-select:none}.board-base{z-index:0;inset:0;width:100%;height:100%;object-fit:cover}.board-top{z-index:2;left:0;top:0;width:100%;height:27.7%;object-fit:fill}.board-left{z-index:3;left:0;top:0;width:16.7%;height:100%;object-fit:fill;opacity:.84}.board-right{z-index:3;right:0;top:0;width:16.7%;height:100%;object-fit:fill;opacity:.84}#physics{position:absolute;z-index:4;inset:0;width:100%;height:100%;display:block}.mode-badge{position:absolute;z-index:12;top:11px;right:13px;display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid rgba(169,120,40,.44);border-radius:4px;background:rgba(5,7,6,.74);font:8px var(--mono);color:#9c9483;backdrop-filter:blur(4px)}.mode-badge b{color:#e2ac3a}.reel-frame-art{position:absolute;z-index:9;left:23.6%;top:26.6%;width:63.8%;height:33.8%;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.56))}.reel-panel{position:absolute;z-index:10;left:27.3%;top:30.6%;width:56.4%;padding:8px 11px 10px;background:rgba(6,8,7,.82);border-radius:5px}.reel-topline{display:flex;justify-content:space-between;gap:7px;margin-bottom:6px;color:#aaa08e;font-size:8px}.reel-topline #prob-label{font:800 9px var(--mono);color:#e2ad3e;white-space:nowrap}.reels{display:flex;gap:7px}.reel{flex:1;height:clamp(64px,12.4vw,103px);display:grid;place-items:center;border:1px solid #6d5b34;border-radius:3px;background:linear-gradient(180deg,#050605,#181710 46%,#33250f 49%,#0b0c0a 53%,#030403);color:#f3ead7;font:900 clamp(43px,8vw,71px)/1 var(--heavy-font);text-shadow:0 3px 0 #000}.reel.spinning{color:#bfa66b;filter:blur(.35px)}.reel.stopped{box-shadow:inset 0 0 14px rgba(214,154,36,.07)}.reserve-row{display:flex;align-items:center;gap:6px;margin-top:6px}.reserve-label{color:#7d7567;font-size:8px}.stocks{display:flex;gap:5px}.stocks i{width:10px;height:10px;border-radius:50%;border:1px solid #7a5b1b;background:#0b0d0a;box-shadow:inset 0 0 3px #000}.stocks i.on{background:var(--yamabuki2);box-shadow:0 0 7px rgba(232,182,62,.62)}.stocks.blue i.on{background:#3c9c7c;border-color:#5dbf9e;box-shadow:0 0 7px rgba(45,151,113,.6)}.start-art{position:absolute;z-index:3;left:46.7%;top:86.9%;width:16.7%;height:13.8%;pointer-events:none;opacity:.86}.chance-lamp-art{position:absolute;z-index:7;right:5.3%;bottom:9.5%;width:8.5%;opacity:.28;transition:opacity .15s,filter .15s}.chance-lamp-label{position:absolute;z-index:9;right:5.3%;bottom:7.8%;width:8.5%;text-align:center;color:#82765f;font:700 6px var(--mono);letter-spacing:.08em}.board[data-combo="1"] .chance-lamp-art,.board.reaching .chance-lamp-art{opacity:.62}.board[data-combo="4"] .chance-lamp-art,.board.winning .chance-lamp-art{opacity:1;filter:drop-shadow(0 0 10px rgba(232,182,62,.65))}.board-push{position:absolute;z-index:15;right:4.8%;top:67.5%;width:66px;height:66px;border:2px solid #72634d;border-radius:50%;background:radial-gradient(circle at 40% 32%,#6d6257,#27231e 44%,#080908 73%);color:#e8d7b0;box-shadow:inset 0 0 0 4px #0b0c0b,0 5px 14px rgba(0,0,0,.55);font:900 11px var(--heavy-font);letter-spacing:.05em;opacity:.86}.board-push:disabled{opacity:.16;filter:grayscale(1);cursor:default}.hit-banner{position:absolute;z-index:18;left:50%;top:61.5%;transform:translateX(-50%);min-width:150px;text-align:center;color:#f5e8bd;font:900 22px/1.1 var(--wafu-font);letter-spacing:.08em;text-shadow:0 2px 0 #511f14,0 0 11px rgba(214,154,36,.25);pointer-events:none}.board-info{position:absolute;z-index:10;left:23%;right:17%;bottom:1.5%;display:flex;justify-content:space-between;color:#665f53;font-size:7px}.flash{position:absolute;z-index:30;inset:0;pointer-events:none}.flash.weak{animation:flashweak .45s ease-out}.flash.on{animation:flashon .55s ease-out}@keyframes flashweak{0%{background:rgba(255,231,152,.34)}100%{background:transparent}}@keyframes flashon{0%{background:rgba(255,238,173,.58)}45%{background:rgba(214,154,36,.16)}100%{background:transparent}}.board.shake{animation:shake .18s linear 2}@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
/* gameplay HUD + typing, simple and readable */
.play-hud{display:grid;grid-template-columns:1.15fr 1fr .8fr 1fr;min-height:52px;border-top:1px solid #47391c;border-bottom:1px solid #332c1d;background:linear-gradient(#17150f,#10120f)}.play-hud>div{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:8px;border-right:1px solid #2e2a20}.play-hud>div:last-child{border-right:0}.play-hud small{font-size:8px;color:#7e7668}.play-hud strong{font:900 20px var(--heavy-font);color:#e8b63e}.play-hud span{font-size:8px;color:#8f8778}.play-hud .time-hud strong{color:#f2d885}.time-track{height:3px;background:#090a09}.time-track>div{height:100%;width:100%;background:linear-gradient(90deg,#176b52 0 12%,#d69a24 42%,#e8b63e 100%);transition:width .05s linear}.typing{position:relative;margin:8px 10px 0;padding:11px 16px 10px;min-height:135px;border:1px solid #4b4029;border-radius:7px;background:radial-gradient(circle at 50% 110%,rgba(214,154,36,.055),transparent 20rem),#080a09;box-shadow:inset 0 0 22px rgba(0,0,0,.7)}.typing-meta{display:flex;justify-content:space-between;color:#807565;font:8px var(--mono);letter-spacing:.08em}.typing-meta #typing-label{color:#bd8c2c}.word{text-align:center;margin-top:5px;font:900 clamp(23px,4.1vw,34px)/1.25 var(--ui-font);letter-spacing:.02em}.kana{text-align:center;color:#766f62;font-size:10px;margin-top:0}.romaji{text-align:center;margin-top:2px;font:900 clamp(22px,4vw,32px)/1.25 var(--heavy-font);letter-spacing:.055em;color:#f0e7d7}.romaji .typed{color:#d69a24}.romaji .remaining{color:#eee7da}.typing-footer{display:flex;justify-content:space-between;gap:10px;margin-top:7px;padding-top:6px;border-top:1px solid #23251f;color:#6e675b;font-size:8px}.typing.miss{border-color:#773b30;box-shadow:inset 0 0 18px rgba(142,47,50,.12)}.compact-stats{margin:6px 10px 0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #2e2a20;border-bottom:1px solid #2e2a20;background:#0e100d}.compact-stats div{text-align:center;padding:5px 3px;border-right:1px solid #28271f}.compact-stats div:last-child{border-right:0}.compact-stats span{display:block;color:#665f53;font-size:7px}.compact-stats strong{font:800 11px var(--heavy-font);color:#c5bcab}.combo-reward{display:none}.machine-controls{min-height:30px;margin:0 10px;display:flex;align-items:center;justify-content:space-between;color:#5d584e;font-size:8px}.machine-controls kbd{font:8px var(--mono);border:1px solid #4e4738;padding:1px 4px;border-radius:3px}.site-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 3px 0;color:#615b51;font-size:9px}.site-footer button{border:0;background:transparent;color:#817764;cursor:pointer}.site-footer button:hover{color:#c3ac73}
/* special states */
.board.reaching .reel-panel{box-shadow:0 0 0 1px rgba(142,47,50,.45),0 0 25px rgba(142,47,50,.17)}.board.winning .reel-panel{box-shadow:0 0 0 1px rgba(232,182,62,.7),0 0 30px rgba(232,182,62,.21)}.board.winning .hit-banner{font-size:27px;color:#ffe5a0}.board.silence{filter:saturate(.76) brightness(.82)}.ctime-overlay{display:none;position:absolute;z-index:40;inset:0;background:rgba(4,5,5,.91);place-items:center;text-align:center}.board.ctime .ctime-overlay{display:grid}.ctime-inner{width:min(370px,82%);padding:24px;border:1px solid #8b5e20;background:#0b0d0b;box-shadow:0 0 35px rgba(214,154,36,.1)}.ctime-kicker{font:9px var(--mono);letter-spacing:.25em;color:#7d7465}.ctime-inner>strong{display:block;margin-top:3px;font:900 32px var(--wafu-font);color:#e4b03d}.ctime-inner p{margin:3px 0;color:#aaa08d}.ctime-kanji{font:900 70px var(--wafu-font);line-height:1.1}.ctime-romaji{font:900 25px var(--heavy-font);letter-spacing:.08em}.ctime-romaji .done{color:#d69a24}.ctime-romaji .now{text-decoration:underline;text-decoration-color:#e8b63e}.ctime-inner small{display:block;margin-top:11px;color:#776e5f}
/* dialogs */
dialog{width:min(540px,calc(100% - 28px));border:1px solid #57482b;border-radius:12px;background:#10120f;color:var(--ink);padding:20px;box-shadow:0 26px 80px #000}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}.dialog-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-title h2{margin:0;font:900 22px var(--heavy-font)}.close{border:0;background:transparent;color:#9a9181;font-size:24px;cursor:pointer}.subtext{color:#8f8778;font-size:11px}.setting{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #26271f}.setting input[type=range]{width:100%}.setting select{background:#0a0c0a;border:1px solid #494131;color:#ddd2bd;padding:5px}.full{width:100%;min-height:42px;margin-top:14px}.instructions{padding-left:22px}.instructions li{margin:11px 0}.instructions p{margin:2px 0;color:#8c8475;font-size:11px}details{margin:11px 0;border-top:1px solid #2a2b23;padding-top:9px}summary{cursor:pointer;color:#ccb77e}.result-dialog{width:min(620px,calc(100% - 24px))}.result-heading{display:flex;justify-content:space-between;color:#8c8374;font:9px var(--mono);letter-spacing:.12em}.result-dialog h2{margin:5px 0 13px;font:900 24px var(--ui-font)}.result-hero{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:12px;border:1px solid #4f4025;background:#0b0d0a}.result-hero strong{font:900 37px var(--heavy-font);color:#e8b63e}.result-hero span{color:#8d8474;font-size:10px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:10px;background:#2c2b23;border:1px solid #2c2b23}.result-grid>div{background:#10120f;padding:9px;text-align:center}.result-grid small{display:block;color:#756e61;font-size:8px}.result-grid strong{font:900 17px var(--heavy-font)}.result-learning{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.result-learning>div{padding:9px;border:1px solid #292a22;background:#0c0e0c}.result-learning small{display:block;color:#746d60}.result-learning strong{display:block;margin-top:2px}.result-actions{display:flex;gap:8px;margin-top:13px}.result-actions button{flex:1;min-height:40px}
@media(max-width:620px){.page-shell{width:100%}.game-wrap{padding-top:0}.page-tools{padding:0 10px}.machine-bezel{border-radius:0}.machine-bezel:before{display:none}.playfield-wrap{padding:5px 5px 0}.typing{margin:6px 5px 0;padding-left:10px;padding-right:10px}.compact-stats{margin-left:5px;margin-right:5px}.machine-controls{margin:0 6px}.board-push{width:52px;height:52px;font-size:9px}.flow-overlay{padding:20px 12px}.machine-title-row{padding:0 10px}.machine-status #best-label{display:none}.play-hud strong{font-size:16px}.play-hud small,.play-hud span{font-size:7px}.typing-footer{font-size:7px}.site-footer{padding:7px 9px}.result-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.title-wordmark,.machine-title strong{white-space:nowrap}

/* v3.1 play-layout refinement: keep the typing target in the same visual cluster as the reels. */
.board>.board-typing{
  position:absolute;z-index:14;left:21.8%;top:60.8%;width:62.4%;
  margin:0;padding:7px 12px 8px;min-height:0;
  border:1px solid rgba(169,120,40,.72);border-radius:7px;
  background:
    linear-gradient(180deg,rgba(15,17,14,.96),rgba(5,7,6,.95)),
    radial-gradient(circle at 50% 0,rgba(214,154,36,.13),transparent 60%);
  box-shadow:0 8px 22px rgba(0,0,0,.52),inset 0 0 20px rgba(0,0,0,.56),0 0 0 1px rgba(241,231,210,.035);
  backdrop-filter:blur(3px)
}
.board>.board-typing:before,.board>.board-typing:after{
  content:"";position:absolute;top:7px;bottom:7px;width:3px;border-radius:5px;
  background:linear-gradient(180deg,transparent,#176b52 24%,#edbd4a 50%,#8e2f32 78%,transparent);
  opacity:.72;box-shadow:0 0 7px rgba(232,182,62,.18)
}
.board>.board-typing:before{left:5px}.board>.board-typing:after{right:5px}
.board>.board-typing .typing-meta{font-size:7px;padding:0 2px}
.board>.board-typing .word{margin-top:2px;font-size:clamp(19px,3.35vw,28px);line-height:1.16;text-shadow:0 2px 0 #000}
.board>.board-typing .kana{font-size:8px;margin-top:1px;color:#827a6c}
.board>.board-typing .romaji{margin-top:0;font-size:clamp(18px,3.1vw,26px);line-height:1.12}
.board>.board-typing .typing-footer{margin-top:5px;padding-top:4px;font-size:6.5px;line-height:1.25}
.board>.board-typing.miss{border-color:#a23c35;box-shadow:0 8px 22px rgba(0,0,0,.52),inset 0 0 26px rgba(142,47,50,.2),0 0 12px rgba(142,47,50,.18)}

/* Align art with the actual Matter.js START sensor (center x=374, y=612). */
.start-art{left:43.6%;top:86.9%;width:16.7%;height:13.8%}

/* Keep secondary controls out of the typing sightline. */
.board-push{right:3.2%;top:69.5%;width:60px;height:60px}
.hit-banner{top:18%;min-width:220px;font-size:24px;z-index:23}

/* Jackpot layer: intentionally loud, while the typing panel remains above the light wash. */
.jackpot-fx{position:absolute;z-index:13;inset:0;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden}
.jackpot-rays{position:absolute;left:50%;top:43%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.5);border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,115,.56) 0 5deg,rgba(214,154,36,0) 5deg 13deg);
  filter:blur(.2px);mix-blend-mode:screen}
.jackpot-emblem{position:absolute;left:50%;top:39%;width:54%;transform:translate(-50%,-50%) scale(.55);opacity:0;filter:drop-shadow(0 0 18px rgba(255,196,62,.6))}
.jackpot-copy{position:absolute;left:50%;top:14%;transform:translate(-50%,-20px) scale(.7);width:80%;text-align:center;opacity:0;text-shadow:0 4px 0 #5f240f,0 0 18px rgba(255,205,70,.95),0 0 38px rgba(198,61,52,.45)}
.jackpot-copy small{display:block;color:#fff1be;font:900 8px var(--mono);letter-spacing:.48em;margin-left:.48em}
.jackpot-copy strong{display:block;color:#ffe07b;font:900 clamp(34px,7vw,58px)/.94 var(--wafu-font);letter-spacing:.08em;-webkit-text-stroke:1px rgba(115,52,10,.62)}
.jackpot-copy span{display:block;margin-top:2px;color:#f7ead0;font:900 13px var(--heavy-font);letter-spacing:.42em;margin-left:.42em}
.spark-field{position:absolute;inset:0}.spark-field i{--a:calc(var(--i)*15deg);position:absolute;left:50%;top:45%;width:5px;height:18px;border-radius:50%;opacity:0;background:linear-gradient(#fff4ba,#e9a82e 55%,#a73228);box-shadow:0 0 8px rgba(255,214,82,.75);transform-origin:50% 210px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-70px) scale(.3)}
.board.winning .jackpot-fx{visibility:visible;opacity:1}
.board.winning .jackpot-rays{animation:jackpot-rays 1.55s cubic-bezier(.15,.75,.15,1) both}
.board.winning .jackpot-emblem{animation:jackpot-emblem 1.55s cubic-bezier(.13,.8,.22,1) both}
.board.winning .jackpot-copy{animation:jackpot-copy 1.55s cubic-bezier(.13,.8,.22,1) both}
.board.winning .spark-field i{animation:jackpot-spark 1.2s ease-out both;animation-delay:calc(var(--i)*11ms)}
.board.winning{box-shadow:inset 0 0 45px rgba(255,200,66,.28),0 0 0 2px rgba(237,189,74,.78),0 0 36px rgba(214,154,36,.45)}
.board.winning:before{content:"";position:absolute;z-index:12;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,205,62,.52),transparent 8% 92%,rgba(255,205,62,.52));animation:edge-fever .18s steps(2,end) 8 alternate}
.board.premium-win{animation:premium-border .42s linear 5}
.board.premium-win .jackpot-copy strong{color:#fff8cf;text-shadow:0 3px 0 #701d31,0 0 16px #fff,0 0 34px #e8b63e,0 0 48px #176b52}
.board.premium-win .jackpot-rays{background:repeating-conic-gradient(from 0deg,rgba(255,76,101,.5) 0 4deg,rgba(255,205,70,.55) 4deg 8deg,rgba(70,218,179,.48) 8deg 12deg,rgba(87,147,255,.45) 12deg 16deg,transparent 16deg 22deg)}
@keyframes jackpot-rays{0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-12deg)}12%{opacity:1}55%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(38deg)}}
@keyframes jackpot-emblem{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-7deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}28%{transform:translate(-50%,-50%) scale(.96)}72%{opacity:.92}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes jackpot-copy{0%{opacity:0;transform:translate(-50%,-28px) scale(.45)}13%{opacity:1;transform:translate(-50%,0) scale(1.08)}24%{transform:translate(-50%,0) scale(.98)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-3px) scale(1.04)}}
@keyframes jackpot-spark{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-54px) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-330px) scale(1.05)}}
@keyframes edge-fever{from{filter:brightness(1)}to{filter:brightness(2.1)}}
@keyframes premium-border{0%{border-color:#edbd4a;filter:hue-rotate(0deg)}50%{border-color:#f1e7d2;filter:hue-rotate(110deg)}100%{border-color:#edbd4a;filter:hue-rotate(360deg)}}

/* Reach is deliberately visible in peripheral vision without covering the word. */
.board.reaching .reel-frame-art{filter:drop-shadow(0 0 15px rgba(198,61,52,.58)) drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.board.reaching .reel-panel{animation:reach-pulse .45s ease-in-out infinite alternate}
@keyframes reach-pulse{from{box-shadow:0 0 0 1px rgba(142,47,50,.4),0 0 18px rgba(142,47,50,.12)}to{box-shadow:0 0 0 2px rgba(214,154,36,.65),0 0 32px rgba(198,61,52,.34)}}

@media(max-width:620px){
  .board>.board-typing{left:18.8%;width:67.5%;padding:6px 9px 7px;top:60.6%}
  .board>.board-typing .typing-meta,.board>.board-typing .typing-footer{font-size:5.8px}
  .board>.board-typing .word{font-size:clamp(16px,4.2vw,23px)}
  .board>.board-typing .romaji{font-size:clamp(16px,4vw,22px)}
  .board-push{width:48px;height:48px;font-size:8px}
  .jackpot-copy strong{font-size:clamp(30px,10vw,50px)}
}
/* Effects stay around the playfield; the typing target remains readable and stationary. */
.flash{z-index:13}
.board.shake{animation:none}
.board.shake .reel-panel,.board.shake .reel-frame-art{animation:reel-shake .16s linear 3}
@keyframes reel-shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* v3.2 full-screen pachinko feedback: loud at the edges, readable at the typing core. */
.screen-fx{position:fixed;z-index:90;inset:0;pointer-events:none;overflow:hidden;contain:layout paint;isolation:isolate}
.screen-fx>div{position:absolute;pointer-events:none}
.screen-fx-wash{inset:0;opacity:0;background:transparent;mix-blend-mode:screen}
.screen-fx-rings{left:50%;top:48%;width:min(1220px,96vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(.65);border-radius:50%;opacity:0;background:repeating-conic-gradient(from -8deg,transparent 0 7deg,rgba(237,189,74,.24) 7deg 9deg,transparent 9deg 17deg);mask:radial-gradient(circle,transparent 0 37%,#000 46% 100%);-webkit-mask:radial-gradient(circle,transparent 0 37%,#000 46% 100%)}
.screen-fx-scan{inset:-25% -12%;opacity:0;background:linear-gradient(112deg,transparent 0 38%,rgba(255,255,255,.2) 44%,rgba(255,195,54,.42) 48%,rgba(255,255,255,.16) 52%,transparent 58% 100%);transform:translateX(-68%)}
.screen-fx-side{top:50%;width:clamp(92px,12vw,190px);height:58vh;transform:translateY(-50%);display:grid;place-items:center;opacity:0;filter:drop-shadow(0 0 16px currentColor)}
.screen-fx-side span{writing-mode:vertical-rl;text-orientation:upright;font:900 clamp(35px,4.2vw,72px)/1 var(--wafu-font);letter-spacing:.12em;-webkit-text-stroke:1px rgba(0,0,0,.52);text-shadow:0 4px 0 rgba(62,13,9,.72),0 0 18px currentColor}
.screen-fx-left{left:max(8px,calc(50% - 560px));color:#ff4c3f}.screen-fx-right{right:max(8px,calc(50% - 560px));color:#ffd45d}

/* A mistype reads instantly in peripheral vision without covering the word. */
.screen-fx.miss-pulse .screen-fx-wash{animation:screen-miss .24s ease-out both;background:radial-gradient(ellipse at 50% 58%,transparent 0 17%,rgba(113,0,0,.08) 35%,rgba(245,41,35,.34) 68%,rgba(121,0,0,.68) 100%)}
.screen-fx.miss-pulse + .page-shell .machine-bezel{animation:machine-miss .22s ease-out}
.screen-fx.miss-pulse + .page-shell .board-left,.screen-fx.miss-pulse + .page-shell .board-right{filter:drop-shadow(0 0 13px rgba(255,54,44,.75)) saturate(1.35)}
@keyframes screen-miss{0%{opacity:0}17%{opacity:1}100%{opacity:0}}
@keyframes machine-miss{0%,100%{box-shadow:0 24px 70px var(--shadow),inset 0 0 0 4px #070807,inset 0 0 0 5px #312817}36%{box-shadow:0 0 0 2px #d94036,0 0 38px rgba(230,49,41,.6),inset 0 0 42px rgba(142,47,50,.38)}}

/* Reach moves from a calm black/yamabuki machine into red/gold anticipation. */
.screen-fx.reach-active .screen-fx-wash{opacity:.72;background:radial-gradient(ellipse at 50% 57%,transparent 0 22%,rgba(142,47,50,.05) 38%,rgba(193,43,34,.14) 67%,rgba(88,7,5,.42) 100%);animation:reach-wash .48s ease-in-out infinite alternate}
.screen-fx.reach-active .screen-fx-rings{opacity:.52;animation:reach-rings 1.2s linear infinite}
.screen-fx.reach-active + .page-shell .machine-bezel{box-shadow:0 24px 70px var(--shadow),0 0 28px rgba(193,54,42,.24),inset 0 0 0 4px #070807,inset 0 0 24px rgba(142,47,50,.14)}
.screen-fx.reach-active + .page-shell .lamp-left{animation:lamp-alert .18s steps(2,end) infinite alternate}
@keyframes reach-wash{from{filter:brightness(.82) saturate(1.05)}to{filter:brightness(1.22) saturate(1.55)}}
@keyframes reach-rings{from{transform:translate(-50%,-50%) scale(.72) rotate(0deg)}to{transform:translate(-50%,-50%) scale(1.04) rotate(34deg)}}
@keyframes lamp-alert{from{background:#7f1d17;box-shadow:0 0 8px #b82e25}to{background:#ffd159;box-shadow:0 0 18px #ffbd3e}}

/* Hot/notice state: broader color range and cabinet-wide scanning light. */
.screen-fx.hot-active .screen-fx-wash{opacity:.85;background:radial-gradient(ellipse at 50% 57%,transparent 0 18%,rgba(255,121,33,.08) 35%,rgba(198,61,52,.22) 62%,rgba(245,174,38,.36) 100%);animation:hot-wash .28s steps(2,end) infinite alternate}
.screen-fx.hot-active .screen-fx-rings{opacity:.8;background:repeating-conic-gradient(from 0deg,rgba(255,49,38,.5) 0 3deg,transparent 3deg 8deg,rgba(255,194,50,.56) 8deg 11deg,transparent 11deg 17deg);animation:hot-rings .75s linear infinite}
.screen-fx.hot-active .screen-fx-scan{opacity:1;animation:hot-scan 1.05s ease-in-out infinite}
.screen-fx.hot-active .screen-fx-left{opacity:.92;animation:side-hot .34s ease-in-out infinite alternate}
.screen-fx.hot-active + .page-shell .machine-bezel{animation:hot-machine .32s ease-in-out infinite alternate}
.screen-fx.hot-active + .page-shell .board-top,.screen-fx.hot-active + .page-shell .board-left,.screen-fx.hot-active + .page-shell .board-right{filter:drop-shadow(0 0 16px rgba(255,183,43,.78)) saturate(1.5) brightness(1.16)}

/* 遊タイム突入は状態変化として一度だけ大きく見せる。 */
.screen-fx.yutime-burst .screen-fx-wash{opacity:1;background:radial-gradient(ellipse at 50% 57%,transparent 0 14%,rgba(49,209,157,.15) 30%,rgba(255,206,70,.28) 58%,rgba(23,107,82,.58) 100%);animation:yutime-wash .72s ease-out both}
.screen-fx.yutime-burst .screen-fx-rings{opacity:.92;background:repeating-conic-gradient(from 0deg,rgba(62,226,170,.65) 0 4deg,transparent 4deg 9deg,rgba(255,210,74,.72) 9deg 13deg,transparent 13deg 19deg);animation:yutime-rings .82s cubic-bezier(.18,.8,.2,1) both}
.screen-fx.yutime-burst .screen-fx-scan{opacity:1;animation:hot-scan .62s ease-out 1}
.screen-fx.yutime-burst .screen-fx-left,.screen-fx.yutime-burst .screen-fx-right{opacity:1;color:#76e2bd;animation:jackpot-side .16s steps(2,end) 4 alternate}
.screen-fx.yutime-burst + .page-shell .machine-bezel{box-shadow:0 24px 70px var(--shadow),0 0 38px rgba(64,210,165,.36),0 0 58px rgba(232,182,62,.22),inset 0 0 0 4px #070807,inset 0 0 28px rgba(23,107,82,.2)}
@keyframes yutime-wash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
@keyframes yutime-rings{0%{transform:translate(-50%,-50%) scale(.42) rotate(-16deg);opacity:0}22%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.18) rotate(34deg);opacity:0}}
@keyframes hot-wash{from{filter:hue-rotate(-8deg) brightness(.86)}to{filter:hue-rotate(12deg) brightness(1.24)}}
@keyframes hot-rings{from{transform:translate(-50%,-50%) scale(.8) rotate(0)}to{transform:translate(-50%,-50%) scale(1.08) rotate(50deg)}}
@keyframes hot-scan{0%{transform:translateX(-76%);opacity:0}24%{opacity:.86}65%{opacity:.62}100%{transform:translateX(78%);opacity:0}}
@keyframes side-hot{from{transform:translateY(-50%) scale(.96);filter:drop-shadow(0 0 8px currentColor)}to{transform:translateY(-50%) scale(1.04);filter:drop-shadow(0 0 26px currentColor)}}
@keyframes hot-machine{from{box-shadow:0 24px 70px var(--shadow),0 0 20px rgba(193,45,34,.3),inset 0 0 0 4px #070807,inset 0 0 20px rgba(153,36,28,.18)}to{box-shadow:0 24px 70px var(--shadow),0 0 42px rgba(255,183,43,.48),inset 0 0 0 4px #070807,inset 0 0 38px rgba(224,93,25,.28)}}

/* Jackpot intentionally floods the whole browser while the center typing plate stays opaque. */
.screen-fx.jackpot-active .screen-fx-wash{opacity:1;background:radial-gradient(ellipse at 50% 57%,rgba(255,242,184,.05) 0 15%,rgba(255,210,75,.18) 30%,rgba(255,62,35,.28) 58%,rgba(255,194,45,.62) 100%);animation:jackpot-screen .16s steps(2,end) 10 alternate}
.screen-fx.jackpot-active .screen-fx-rings{opacity:1;background:repeating-conic-gradient(from 0deg,#ff4a32aa 0 3deg,transparent 3deg 7deg,#ffd85daa 7deg 10deg,transparent 10deg 14deg,#49cfa0aa 14deg 17deg,transparent 17deg 22deg);animation:jackpot-screen-rings .85s linear infinite}
.screen-fx.jackpot-active .screen-fx-scan{opacity:1;animation:jackpot-scan .62s ease-out 3}
.screen-fx.jackpot-active .screen-fx-left,.screen-fx.jackpot-active .screen-fx-right{opacity:1;animation:jackpot-side .2s steps(2,end) infinite alternate}
.screen-fx.jackpot-active + .page-shell .machine-bezel{animation:jackpot-machine .22s steps(2,end) 8 alternate}
.screen-fx.jackpot-active + .page-shell .page-tools,.screen-fx.jackpot-active + .page-shell .site-footer{filter:brightness(1.8) saturate(1.7)}
@keyframes jackpot-screen{from{filter:brightness(.82) saturate(1.2)}to{filter:brightness(1.65) saturate(2)}}
@keyframes jackpot-screen-rings{from{transform:translate(-50%,-50%) scale(.58) rotate(0)}to{transform:translate(-50%,-50%) scale(1.18) rotate(72deg)}}
@keyframes jackpot-scan{0%{transform:translateX(-88%);opacity:0}18%{opacity:1}100%{transform:translateX(95%);opacity:0}}
@keyframes jackpot-side{from{transform:translateY(-50%) scale(.92);filter:drop-shadow(0 0 9px currentColor)}to{transform:translateY(-50%) scale(1.08);filter:drop-shadow(0 0 32px currentColor)}}
@keyframes jackpot-machine{from{box-shadow:0 0 0 2px #ff4f33,0 0 34px rgba(255,74,45,.55),inset 0 0 35px rgba(198,61,52,.28)}to{box-shadow:0 0 0 3px #ffe078,0 0 62px rgba(255,208,70,.85),inset 0 0 60px rgba(255,186,48,.4)}}

.screen-fx.premium-active .screen-fx-wash{background:radial-gradient(ellipse at 50% 57%,transparent 0 14%,rgba(255,87,142,.2) 28%,rgba(61,214,184,.24) 46%,rgba(85,128,255,.3) 63%,rgba(255,213,71,.55) 100%);animation:premium-screen .2s linear infinite}
.screen-fx.premium-active .screen-fx-rings{background:repeating-conic-gradient(from 0deg,#ff4d6dcc 0 4deg,#ffd04dcc 4deg 8deg,#44dbabcc 8deg 12deg,#5c8cffcc 12deg 16deg,#d25cffcc 16deg 20deg,transparent 20deg 25deg)}
.screen-fx.premium-active .screen-fx-left{color:#ff5cbf}.screen-fx.premium-active .screen-fx-right{color:#66e6ff}
@keyframes premium-screen{from{filter:hue-rotate(0deg) saturate(1.6) brightness(1.05)}to{filter:hue-rotate(72deg) saturate(2.1) brightness(1.35)}}

/* Keep the gameplay text plate visually stable even while the surrounding cabinet goes wild. */
.screen-fx.reach-active + .page-shell .board-typing,
.screen-fx.hot-active + .page-shell .board-typing,
.screen-fx.jackpot-active + .page-shell .board-typing{filter:none!important;transform:none!important;isolation:isolate}
.screen-fx.hot-active + .page-shell .board-typing,.screen-fx.jackpot-active + .page-shell .board-typing{background:linear-gradient(180deg,rgba(12,14,12,.985),rgba(4,6,5,.985)),radial-gradient(circle at 50% 0,rgba(214,154,36,.16),transparent 60%)}

/* Local playfield color escalation complements the viewport effects. */
.board.hot-spin .reel-frame-art{filter:drop-shadow(0 0 19px rgba(255,58,43,.78)) drop-shadow(0 0 30px rgba(255,189,47,.38))}
.board.hot-spin .chance-lamp-art{opacity:1;filter:drop-shadow(0 0 16px rgba(255,199,52,.95)) saturate(1.5)}
.board.hot-spin .board-left,.board.hot-spin .board-right{filter:saturate(1.42) brightness(1.12)}
.board.reaching:not(.hot-spin) .board-left,.board.reaching:not(.hot-spin) .board-right{filter:drop-shadow(0 0 9px rgba(198,61,52,.55)) saturate(1.25)}

.reduced .screen-fx-side{display:none}.reduced .screen-fx-rings,.reduced .screen-fx-scan{animation:none!important;opacity:0!important}.reduced .screen-fx-wash{animation-duration:.45s!important;opacity:.22!important}.reduced .screen-fx + .page-shell .machine-bezel{animation:none!important}
@media(max-width:1050px){.screen-fx-side{display:none}}
@media(prefers-reduced-motion:reduce){.screen-fx-side{display:none!important}.screen-fx-rings,.screen-fx-scan{display:none!important}.screen-fx-wash{animation:none!important;opacity:.16!important}}

/* v3.3 final readability pass: MAX stays difficult without ever escaping the typing plate. */
.board>.board-typing .word,
.board>.board-typing .romaji{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.board>.board-typing .romaji{white-space:normal}
.board>.board-typing .romaji span{overflow-wrap:anywhere;word-break:break-all}
.board>.board-typing[data-word-size="medium"] .word{font-size:clamp(18px,2.95vw,25px);letter-spacing:.01em}
.board>.board-typing[data-word-size="medium"] .romaji{font-size:clamp(17px,2.75vw,23px);letter-spacing:.035em}
.board>.board-typing[data-word-size="long"] .word{font-size:clamp(17px,2.6vw,22px);line-height:1.12;letter-spacing:0}
.board>.board-typing[data-word-size="long"] .romaji{font-size:clamp(15px,2.3vw,20px);line-height:1.08;letter-spacing:.018em}
.board>.board-typing[data-word-size="xlong"] .word{font-size:clamp(15px,2.25vw,19px);line-height:1.08;letter-spacing:0}
.board>.board-typing[data-word-size="xlong"] .romaji{font-size:clamp(13px,2vw,17px);line-height:1.08;letter-spacing:.008em}
.board>.board-typing[data-word-size="xlong"] .kana{font-size:7px}
.board>.board-typing[data-word-size="xlong"] .typing-footer{margin-top:3px;padding-top:3px}

/* Course-specific ST is intentionally more celebratory than normal play, but calmer than a hit. */
.board.st-mode:not(.winning) .mode-badge{border-color:rgba(74,205,162,.62);box-shadow:0 0 12px rgba(56,184,143,.2);background:rgba(4,19,15,.82)}
.board.st-mode:not(.winning) .mode-badge span{color:#79d9b8}
.board.st-mode:not(.winning) .mode-badge b{color:#f0c75b}
.board.st-mode:not(.winning) .reel-frame-art{filter:drop-shadow(0 0 12px rgba(48,176,137,.24)) drop-shadow(0 10px 18px rgba(0,0,0,.56))}
.board.st-mode:not(.winning) .board-left,.board.st-mode:not(.winning) .board-right{filter:drop-shadow(0 0 8px rgba(47,174,135,.28)) saturate(1.12)}
.board.st-mode:not(.winning) .chance-lamp-art{opacity:.75;filter:drop-shadow(0 0 10px rgba(75,211,166,.6)) hue-rotate(45deg)}

@media(max-width:620px){
  .board>.board-typing[data-word-size="long"] .word{font-size:clamp(14px,3.7vw,19px)}
  .board>.board-typing[data-word-size="long"] .romaji{font-size:clamp(12px,3.25vw,17px)}
  .board>.board-typing[data-word-size="xlong"] .word{font-size:clamp(12px,3.25vw,17px)}
  .board>.board-typing[data-word-size="xlong"] .romaji{font-size:clamp(10.5px,2.8vw,15px)}
}

/* ST RUSH gets a cabinet-wide edge aura so the post-hit state is unmistakable. */
.screen-fx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s}
body.st-rush .screen-fx:not(.jackpot-active):not(.hot-active):not(.reach-active)::before{
  opacity:.72;
  box-shadow:inset 0 0 48px rgba(44,190,143,.24),inset 0 0 8px rgba(245,193,62,.34);
  border:1px solid rgba(83,210,165,.15);
  animation:st-rush-edge 1.15s ease-in-out infinite alternate
}
@keyframes st-rush-edge{from{filter:brightness(.85);opacity:.46}to{filter:brightness(1.28);opacity:.82}}
.reduced body.st-rush .screen-fx::before,body.reduced.st-rush .screen-fx::before{animation:none;opacity:.18}


/* フラッシュOFF: 画面全体の明滅だけを完全停止。盤面内の状態表示は残す。 */
body.flash-off .screen-fx .screen-fx-wash,
body.flash-off .screen-fx .screen-fx-rings,
body.flash-off .screen-fx .screen-fx-scan,
body.flash-off .screen-fx .screen-fx-side,
body.flash-off.st-rush .screen-fx::before{animation:none!important;opacity:0!important;filter:none!important}
body.flash-off .screen-fx + .page-shell .machine-bezel{animation:none!important}