@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Noto+Sans+JP:wght@400;600;800;900&display=swap');
@font-face{font-family:'Orbitron';src:url('assets/fonts/Orbitron-Variable.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'SUM Numeric';src:url('assets/fonts/Orbitron-Variable.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'M PLUS 2';src:url('assets/fonts/MPLUS2-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:dark;--cyan:#70ffdf;--accent:#70ffdf;--orange:#ff8758;--muted:#788391;--border:#28323c;font-family:'Barlow Condensed','Noto Sans JP',sans-serif;background:#080b11;color:#eaf3f5}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 45% 50%,#172e3340,transparent 60%)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:1px solid var(--border);border-radius:6px}button:hover{border-color:var(--accent);color:var(--accent)}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.ambient{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#1a273740 1px,transparent 1px),linear-gradient(90deg,#1a273740 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000,transparent 50%,#000)}.cabinet{width:440px;padding:24px;position:relative;overflow:hidden;border:1px solid #34404b;background:linear-gradient(145deg,#151d27,#0d121c 60%);box-shadow:0 24px 90px #0008,0 0 65px #70ffdf09;border-radius:18px}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:28px;font-weight:900;letter-spacing:-.8px}.brand span{color:var(--cyan)}.brand i{font-size:9px;vertical-align:top;margin-left:4px;color:var(--orange)}.header-actions{display:flex;gap:8px}.header-actions button{font-size:11px;letter-spacing:1px;padding:6px 9px}.edition{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin:7px 0 22px}.scoreboard{display:flex;justify-content:space-between;align-items:center}.scoreboard label,label,.eyebrow{display:block;font-size:11px;letter-spacing:2px;color:var(--muted)}#score{font-size:58px;line-height:1.05;display:block;font-variant-numeric:tabular-nums;letter-spacing:1px}.scoreboard small{font-size:11px;color:var(--muted);letter-spacing:1px}.combo{text-align:right}.combo strong{font-size:48px;color:var(--accent);line-height:1}.boost{display:flex;align-items:center;justify-content:space-between;margin:18px 0 16px;padding:9px 13px;background:#70ffdf09;border:1px solid #70ffdf30;border-radius:5px;font-size:10px;letter-spacing:1.5px}.boost strong{font-size:32px;line-height:1;color:var(--accent)}.boost span:last-child{color:var(--muted)}.machine{border:1px solid #374650;border-radius:10px;background:#090e15;padding:10px 12px;box-shadow:inset 0 0 25px #0006;transition:border-color .15s,box-shadow .15s}.machine-top,.machine-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.machine-top span:first-child{color:var(--accent)}.machine-bottom{margin-top:9px;font-size:8px}.reels{display:flex;align-items:center;gap:12px;margin-top:10px}.reel{flex:1;height:150px;overflow:hidden;position:relative;background:linear-gradient(#141f2a,#202e39,#111b24);border:1px solid #334450;border-radius:5px}.reel:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0b111be8,transparent 28%,transparent 72%,#0b111be8)}.strip{position:absolute;left:0;right:0;top:0;will-change:transform}.digit{height:120px;display:flex;align-items:center;justify-content:center;font-size:110px;font-weight:800;line-height:1;text-shadow:0 2px 0 #ffffff40,0 0 24px #70ffdf20}.plus{color:var(--accent);font-size:30px}.payline{position:absolute;left:0;right:0;top:50%;border-top:1px solid #70ffdf19}.payline:before{content:'';position:absolute;left:0;top:-5px;border-left:6px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}.accepting .machine{border-color:var(--accent);box-shadow:0 0 22px #70ffdf20}.feedback{height:86px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px}.feedback small{font-size:10px;letter-spacing:2px;color:var(--accent)}.feedback strong{font-size:27px;font-weight:900;line-height:1.2}.feedback>span{font-family:'Noto Sans JP',sans-serif;font-size:10px;color:var(--muted)}.timer{height:3px;background:#27313c;margin-bottom:14px;border-radius:3px;overflow:hidden}#timebar{height:100%;background:var(--accent);width:100%;transform-origin:left}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad button{height:49px;background:linear-gradient(#202c38,#19212d);font-size:26px;font-weight:700;box-shadow:0 3px 0 #05070b;color:#b7c1cb;touch-action:manipulation}.keypad button:last-child{grid-column:1 / 4;height:42px}.accepting .keypad button{color:#effffa;border-color:#70ffdf65;box-shadow:0 3px 0 #05070b,inset 0 0 16px #70ffdf06}.keypad button:active,.keypad button.pressed{background:var(--cyan);color:#101c1c;transform:translateY(2px)}footer{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font-size:9px;letter-spacing:1px;color:var(--muted)}footer button{border:0;font-size:11px;color:var(--cyan);padding:4px}.side-note{position:absolute;left:calc(50% + 265px);color:#63717e}.side-note>span{writing-mode:vertical-rl;letter-spacing:4px;font-size:11px}.side-note p{font-size:14px;line-height:2;letter-spacing:2px}.side-note small{font-size:9px;letter-spacing:2px}.overlay{position:absolute;z-index:5;inset:77px 14px 45px;background:#0c131cf5;backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:1px solid #35454e;border-radius:10px;text-align:center}.hidden{display:none!important}.intro-mark{font-family:'Noto Sans JP',sans-serif;font-size:57px;font-weight:900;letter-spacing:-4px;line-height:1.25;text-align:left;transform:skew(-7deg)}.intro-mark em{font-style:normal;color:var(--cyan);text-shadow:0 0 36px #70ffdf40}.overlay p{font-family:'Noto Sans JP',sans-serif;font-size:11px;line-height:1.9;color:#9aa8b6}.example{display:flex;align-items:center;gap:15px;margin:18px 0 24px;font-size:23px}.example b{font-size:40px}.example .answer{color:var(--cyan);border:1px solid #70ffdf60;border-radius:7px;padding:0 15px}.example span{color:#63717e}.primary{display:flex;justify-content:space-between;width:100%;background:var(--cyan);color:#0b1b1b;border:0;padding:16px 20px;font-size:22px;font-weight:800;letter-spacing:2px;box-shadow:0 0 25px #70ffdf22;margin:12px 0}.primary:hover{background:#a2ffe9;color:#10211e}.overlay small{color:var(--muted);font-size:10px;line-height:1.8}.overlay h1{font-size:58px;color:var(--orange);margin:12px 0 0;line-height:1}.final-score{font-size:56px;line-height:1.15}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:20px 0 0;gap:8px}.result-grid label{font-size:9px;letter-spacing:1px}.result-grid b{font-size:26px}.result-actions{display:flex;gap:20px;margin:7px}.result-actions button{border:0;font-size:12px}#particles{position:absolute;inset:0;pointer-events:none;z-index:7;width:100%;height:100%}.score-pop{position:absolute;top:43%;left:0;width:100%;z-index:8;pointer-events:none;text-align:center;font-size:60px;font-weight:900;color:var(--accent);text-shadow:0 0 35px currentColor;opacity:0}.pop{animation:pop .65s ease-out}.bump{animation:bump .35s ease-out}.shake{animation:shake .2s}.flash:before{content:'';position:absolute;inset:0;background:var(--accent);opacity:0;z-index:6;pointer-events:none;animation:flash .25s}.reduced .flash:before{display:none}.slip{box-shadow:inset 0 0 32px #70ffdf70}.miss .machine{border-color:#ff6767}.miss{--accent:#ff6767}.hot{--accent:#ff9864}.gold{--accent:#ffe08a}.rainbow{--accent:#e9a2ff}dialog{max-width:440px;width:calc(100% - 24px);max-height:85svh;background:#111b27;color:#edf7fa;border:1px solid #415663;border-radius:14px;padding:24px;box-shadow:0 20px 90px #0009}dialog::backdrop{background:#02060cc9;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:26px;letter-spacing:1px;margin:0}.dialog-head button{padding:6px 10px}dialog p,dialog small{font-size:11px;color:#98a7b6}dialog small{display:block}.name-row{display:flex;gap:8px;margin:6px 0}.name-row input{min-width:0;flex:1;background:#080f18;border:1px solid #3b4c5a;border-radius:5px;padding:10px;color:white}.name-row button{padding:8px 16px}nav{display:flex;gap:5px;margin-top:22px}nav button{flex:1;padding:9px 0;font-size:12px}nav .selected{background:var(--cyan);color:#0b1b1b}.rank-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:12px 5px;border-bottom:1px solid #28323c}.rank-row .position{font-size:22px;color:#8794a6}.rank-row:nth-child(1) .position{color:#ffdc82}.rank-row:nth-child(2) .position{color:#d3e1f2}.rank-row:nth-child(3) .position{color:#cf9c76}.rank-row strong{font-size:14px}.rank-row .points{text-align:right;font-size:20px}.rank-row.me{background:#70ffdf13}.setting{display:flex;justify-content:space-between;align-items:center;margin:25px 0;font-family:'Noto Sans JP';font-size:13px;letter-spacing:0}.setting input{accent-color:var(--cyan)}#debug{position:fixed;left:10px;top:10px;z-index:20;background:#000d;font-size:10px;pointer-events:none;white-space:pre-wrap}@keyframes pop{0%{opacity:0;transform:scale(.5) translateY(20px)}20%{opacity:1;transform:scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translateY(-45px)}}@keyframes bump{50%{transform:scale(1.2);text-shadow:0 0 20px currentColor}}@keyframes shake{25%{transform:translateX(var(--shake,4px))}75%{transform:translateX(calc(-1 * var(--shake,4px)))}}@keyframes flash{15%{opacity:.15}100%{opacity:0}}@media(max-width:800px){.side-note{display:none}}@media(max-width:500px){body{padding:0;align-items:flex-start}.cabinet{width:100%;min-height:100svh;border:0;border-radius:0;padding:16px 20px max(14px,env(safe-area-inset-bottom))}.edition{margin-bottom:15px}.overlay{inset:70px 12px 40px}.reel{height:140px}}@media(max-height:760px){body{padding-top:0;padding-bottom:0}.cabinet{padding-top:12px;padding-bottom:10px}.edition{margin-bottom:10px}.boost{margin:10px 0}.reel{height:125px}.feedback{height:72px}.keypad button{height:44px}.keypad{gap:6px}footer{margin-top:10px}#score{font-size:48px}.overlay{inset:65px 12px 35px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;scroll-behavior:auto!important}}

/* Keep the entire cabinet reachable on short mobile screens. */
:root{line-height:1.25}body{align-items:flex-start}.cabinet{margin:auto 0}.digit{font-variant-numeric:tabular-nums}.reels{direction:ltr}@media(max-height:700px){.cabinet{padding:10px 16px}.edition{margin-bottom:8px}.reel{height:110px}.machine{padding:8px 10px}.feedback{height:66px}.boost{margin:8px 0;padding:6px 12px}.keypad button{height:44px}.keypad button:last-child{height:44px}.timer{margin-bottom:10px}.overlay{inset:60px 10px 34px}.intro-mark{font-size:49px}.overlay h1{font-size:48px}.final-score{font-size:48px}.result-grid{margin-top:12px}.overlay p{margin:8px 0}.primary{padding:12px 16px}}


@media(max-height:700px){.edition{margin-bottom:4px}.reel{height:96px}.boost{margin:6px 0}.boost strong{font-size:28px}.feedback{height:60px}#score{font-size:42px}footer{margin-top:6px}.digit{font-size:100px}}
.final-score{max-width:100%;overflow-wrap:anywhere;font-size:clamp(30px,8vw,56px)}
#intro>p{width:100%;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty;font-size:11px;line-height:1.75;margin:10px 0}
#intro .how-to-link{font-size:13px;letter-spacing:1px;padding:7px 18px;margin:0 0 10px;color:#9fb3bd;border-color:#344650}
.how-to-link span{font-size:9px;margin-left:8px;letter-spacing:0}
#howTo{padding:0;overflow:hidden;border-color:#52766f;box-shadow:0 20px 90px #0009,0 0 30px #70ffdf13;width:calc(100% - 24px);max-width:440px;max-height:85svh}
#howTo[open]{display:flex;flex-direction:column}
#howTo .dialog-head{flex:none;padding:14px 20px;border-bottom:1px solid #314b4b;background:#111b27}
#howTo .dialog-head small{font-size:9px;letter-spacing:1px;color:var(--cyan);margin-bottom:2px}
#howTo .dialog-head h2{font-size:30px;letter-spacing:2px}
.how-to-content{overflow-y:auto;overscroll-behavior:contain;padding:0 20px 16px;font-family:'Noto Sans JP',sans-serif;scrollbar-color:#52766f #111b27}
.how-to-content section{padding:15px 0;border-bottom:1px solid #283a43}
.how-to-content section:last-child{border:0}
.how-to-content h3{font-family:'Barlow Condensed','Noto Sans JP',sans-serif;font-size:22px;letter-spacing:1px;margin:0 0 8px}
.how-to-content h3>span{font-size:12px;color:var(--cyan);margin-right:8px}
.how-to-content h4{font-size:11px;font-weight:800;color:#d9f4ed;margin:15px 0 8px}
#howTo p{font-size:11px;line-height:1.85;margin:8px 0;color:#c0ccd3;overflow-wrap:anywhere}
#howTo small{font-size:10px;line-height:1.8;color:#8fa7b4}
.how-to-example{font-family:'Barlow Condensed',sans-serif;font-size:28px;text-align:center;background:#0c151d;padding:8px;border-radius:5px}.how-to-example b{color:var(--cyan)}.how-to-example span{color:#617c85}
.how-to-keys{width:100%;border-collapse:collapse;text-align:center;font-size:12px;background:#0c151d}.how-to-keys caption{font-size:10px;color:#8fa7b4;text-align:left;padding:3px 0 8px}.how-to-keys th,.how-to-keys td{padding:7px 4px;border:1px solid #2a4147}.how-to-keys thead th{font-family:'Barlow Condensed',sans-serif;color:var(--cyan);font-size:13px}.how-to-keys tbody th{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:#8fa7b4}.how-to-keys td{font-size:17px;font-weight:800}
.how-to-moves{background:#0c151d;border-left:2px solid var(--cyan);padding:9px 12px;font-family:'Barlow Condensed',sans-serif;font-size:16px;line-height:1.8}.how-to-moves b{font-size:11px;color:#8fa7b4}.how-to-moves strong{color:var(--cyan)}
@media(max-width:380px){#intro{padding:18px}#intro>p{font-size:10px;line-height:1.65}.intro-mark{font-size:49px}#intro .example{margin:12px 0 16px}}

/* Continuous three-row reel windows. Cell pitch is shared by CSS and renderer. */
.reel{--reel-cell-size:56px;height:calc(var(--reel-cell-size)*3 + 2px);isolation:isolate;background:linear-gradient(90deg,#0c1621,#243642 50%,#0c1621);box-shadow:inset 0 0 16px #0008}
.reel .digit{height:var(--reel-cell-size);font-size:calc(var(--reel-cell-size)*.9);font-weight:800;line-height:1;text-shadow:0 1px 0 #ffffff45,0 0 12px #70ffdf25}
.digit span{display:block;transform-origin:center;backface-visibility:hidden}
.reel:after{z-index:2;background:linear-gradient(#060c1460,transparent 28%,transparent 72%,#060c1460);box-shadow:inset 0 9px 12px -10px #000,inset 0 -9px 12px -10px #000}
.reel .payline{height:var(--reel-cell-size);top:50%;transform:translateY(-50%);z-index:1;border:1px solid #70ffdf65;background:#70ffdf06;box-shadow:0 0 14px #70ffdf12;pointer-events:none}
.reel .payline:before{top:calc(50% - 5px)}
.reel .payline:after{content:'';position:absolute;right:0;top:calc(50% - 5px);border-right:6px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.reel[data-motion=spin] .strip{filter:blur(.6px);text-shadow:0 4px 3px #d9fff850}
.reel[data-motion=spin] .digit span{text-shadow:0 5px 2px #ddfff840,0 -5px 2px #ddfff840}
@media(max-height:760px){.reel{--reel-cell-size:48px}}
@media(max-height:700px){
 .reel{--reel-cell-size:44px}
 .edition{margin-top:3px;margin-bottom:3px}
 .scoreboard{height:68px}.scoreboard small{font-size:9px}#score{font-size:36px}
 .boost{padding:4px 10px;margin:4px 0}.boost strong{font-size:24px}
 .machine{padding:6px 10px}.reels{margin-top:6px}.machine-bottom{margin-top:5px}
 .feedback{height:60px}
}
.bonus-active{--accent:#ffd878;background:radial-gradient(ellipse at 50% 38%,#58381855,transparent 70%),linear-gradient(145deg,#261c23,#111722 70%);border-color:#9b7445;box-shadow:0 0 55px #f4b84025}
.bonus-active .machine{border-color:#ffd878;box-shadow:0 0 22px #ffbd4738,inset 0 0 25px #0006}
.bonus-active .boost{background:#ffd87816;border-color:#ffd87877;color:#ffe5a3}
.bonus-active .keypad button{border-color:#ffd87870;background:linear-gradient(#382b24,#24212b)}
.bonus-active .keypad button.pressed{background:#ffd878;color:#18120a}
.bonus-active .payline{border-color:#ffd878aa;background:#ffd8780d}
.bonus-active .machine-bottom{min-height:30px;align-items:center;letter-spacing:.4px}
.bonus-overlay{position:absolute;z-index:6;inset:78px 14px 45px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;background:radial-gradient(ellipse,#5a3217ed,#100c17fa 70%);border:1px solid #ffd878;border-radius:10px;pointer-events:none;box-shadow:inset 0 0 60px #ffd87825}
.bonus-overlay .eyebrow{color:#edc17a;font-size:10px;letter-spacing:2px}
.bonus-overlay h2{font-size:clamp(36px,10vw,62px);line-height:1;letter-spacing:1px;color:#fff0bf;text-shadow:0 0 25px #ffa8008c;margin:25px 0 20px}
.bonus-overlay strong{font-size:26px;letter-spacing:2px;color:#ffd878}
.bonus-overlay p{font-size:25px;font-weight:800;color:white;overflow-wrap:anywhere;max-width:100%}
.bonus-overlay small{font-size:11px;line-height:1.6;color:#dcc8a4}
.bonus-entry{animation:bonus-reveal 1.4s ease-out}
@keyframes bonus-reveal{0%{background:#000;opacity:.3;transform:scale(.97)}18%{opacity:1;box-shadow:inset 0 0 80px #fff9,0 0 45px #ffd878}40%{transform:scale(1)}100%{box-shadow:inset 0 0 60px #ffd87825}}
.reduced .bonus-entry{animation:none}
@media(max-height:700px){.bonus-active .edition{display:none}.bonus-active .scoreboard{margin-top:4px}.bonus-overlay{inset:60px 10px 34px}.bonus-overlay h2{font-size:45px}.bonus-active .machine-bottom{min-height:28px}}
@media(max-width:500px){#debug{max-width:45vw;max-height:30svh;overflow:hidden;font-size:8px}}
.debug-continue{position:absolute;bottom:70px;left:10%;width:80%;z-index:25;background:#ffd878;color:#21190b;padding:12px;font-size:14px;font-weight:bold}
/* Keep the full cabinet in a desktop window as well as on a phone. */
@media(min-width:501px){
 .cabinet{padding:10px 20px}.edition{margin:3px 0}.scoreboard{height:68px}#score{font-size:36px}
 .boost{padding:4px 10px;margin:4px 0}.boost strong{font-size:24px}
 .reel{--reel-cell-size:48px}.machine{padding:6px 10px}.reels{margin-top:6px}.machine-bottom{margin-top:5px}
 .feedback{height:60px}.keypad{gap:6px}.keypad button,.keypad button:last-child{height:44px}
 .timer{margin-bottom:10px}footer{margin-top:6px}
}
.row-hints{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.5px}
.row-hints[hidden]{display:none}
.row-hints>span{display:flex;justify-content:center;align-items:center;gap:5px;min-height:25px;border:1px solid #334651;border-radius:5px;background:#101e26;color:#8297a3;transition:background .08s,color .08s,box-shadow .08s}
.row-hints small{font-size:9px;letter-spacing:0}
.row-hints .lit{color:#effffc;background:#216057;border-color:#95ffe1;box-shadow:0 0 11px #60ffcd77,inset 0 0 7px #73ffda44;text-shadow:0 0 6px #aaffeb}
#keypad button.row-hint-key:not(.pressed){border-color:#80d8bf;background:#173a38;color:#e6fff7;box-shadow:inset 0 0 10px #71e8c51c,0 0 5px #60ffcd30}
@media(max-height:700px){.row-hints{margin-bottom:5px}.row-hints>span{min-height:23px}.feedback{height:60px!important}.timer{margin-bottom:6px!important}.edition{display:none}}

.feedback{gap:1px}.feedback strong{font-size:25px}

/* v2: image strips, shared stock, roulette controls. */
.reel-image{display:block;object-fit:fill;max-width:none;user-select:none}
.stock-line{display:flex;align-items:center;justify-content:space-between;margin:6px 0;font-size:11px;letter-spacing:1px}.stock-line strong{color:#ffd878;font-size:20px}.stock-line small{color:#9fb4be}

#keypad button[data-number="0"]{font-size:17px;background:#48351e;color:#ffe6ab;border-color:#b98a44}#keypad button[data-number="0"]:disabled{opacity:.35}
#startMode{width:100%;background:#162632;color:white;font:inherit;font-size:18px;padding:8px;margin-top:4px;border:1px solid #526b78;border-radius:5px}
#endEndless{font-size:10px}#debug{max-height:45svh;overflow:auto;pointer-events:auto;font-size:9px}
@media(max-height:740px){.feedback{height:52px!important}.stock-line{margin:3px 0}.keypad button{height:40px!important}.reel{--reel-cell-size:40px}}


/* SPEED is independent of STOCK; six half-level segments. */
.speed-hud{display:flex;align-items:center;gap:7px;margin:-9px 0 8px;min-height:16px;font-size:10px;color:var(--cyan)}.speed-hud[hidden]{display:none}.speed-hud>span{white-space:nowrap;font-weight:800;min-width:62px}#speedMeter{display:flex;gap:3px;flex:0 0 72px}#speedMeter i{height:6px;flex:1;background:#28323c;border-radius:1px}#speedMeter .lit{background:var(--cyan)}.speed-hud.max-speed{color:#ffd878}.max-speed #speedMeter .lit{background:#ffd878}#speedNotice{font-size:9px;line-height:1.2;margin-left:auto;text-align:right}@media(max-height:760px){.speed-hud{margin:0 0 4px;min-height:14px}}
/* Keep the added gauge and keypad together on portrait phones. */
@media(max-width:500px) and (min-height:741px){
 .cabinet{padding:12px 18px max(12px,env(safe-area-inset-bottom))}.edition{display:none}
 .scoreboard{height:68px}#score{font-size:42px}
 .boost{margin:6px 0;padding:4px 10px}.boost strong{font-size:24px}
 .speed-hud{margin:0 0 4px}.reel{--reel-cell-size:44px}
 .machine{padding:6px 10px}.reels{margin-top:6px}.feedback{height:66px}
 .keypad{gap:6px}.keypad button,.keypad button:last-child{height:44px}footer{margin-top:8px}
}
/* Roulette uses the actual numeric keypad; prediction never looks like live light. */
.bonus-active .reels{display:none}.roulette-board[hidden]{display:none}
.roulette-board{height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.roulette-board strong{font-size:24px;color:var(--roulette-color,#ffe5a3);letter-spacing:3px}.roulette-board small{font-size:10px;color:#a8b5bc}
#rouletteStatus{font-size:18px;font-weight:800;color:var(--roulette-color,#ffd878)}#rouletteSelection{color:#70ffdf}
#keypad .roulette-candidate{border-color:var(--roulette-color);color:var(--roulette-color);background:#252d35}
#keypad .roulette-current{background:var(--roulette-color);color:#161324;box-shadow:0 0 14px var(--roulette-color),inset 0 0 16px #fff7;border-color:white;transform:none}
#keypad .roulette-picked{position:relative;outline:3px solid white;outline-offset:-5px}
#keypad .roulette-picked:after{content:'予測';position:absolute;right:5px;top:3px;font-size:9px;color:#0b2823;background:white;border-radius:2px;padding:1px 3px}
@media(max-height:740px){.roulette-board{height:110px;gap:6px}}

.roulette-readout{display:flex;gap:15px;align-items:center}.roulette-readout #rouletteMoves{font-size:30px;letter-spacing:1px;font-variant-numeric:tabular-nums}#roulettePattern{color:var(--roulette-color);font-weight:800;letter-spacing:1px}

.bonus-settle .machine,.bonus-settle .keypad,.bonus-settle .row-hints{opacity:.25;filter:brightness(.5)}
.bonus-settle{box-shadow:0 0 20px #0008}

.final-bonus #modeBadge,.final-bonus #level{color:#ffd878}
.final-bonus{border-color:#ffd878}

/* REEL SHIFT is orange; BONUS keeps its gold theme. Image glyphs stay upright. */
.reel-cell{position:relative;overflow:hidden;width:100%;flex:none}.reel-cell img{display:block;max-width:none;flex:none}
.reordered-strip{display:block}
.cabinet{transition:border-color 350ms,box-shadow 350ms,background-color 350ms}
.reel-shift-theme.cabinet{--accent:#ff9c32;border-color:#ff9c32;background-color:#241509;box-shadow:0 0 70px #ff8f2840}
.reel-shift-theme .machine,.reel-shift-theme .speed-hud{border-color:#ff9c32;box-shadow:0 0 18px #ff9c3230}
.reel-shift-theme .payline{border-color:#ff9c32;background:#ff9c3218}
.reel-shift-theme .keypad{outline:1px solid #ff9c32;border-radius:8px}
.reel-shift-theme #score,.reel-shift-theme .brand span,.reel-shift-theme .boost{color:#ffbd54}
body.reel-shift-theme .ambient{background:radial-gradient(ellipse,#ff9c3225,transparent 70%)}
.shift-badge{margin:4px 0;color:#ffbd54;font-size:12px;font-weight:800;letter-spacing:2px}
.shift-overlay{position:absolute;inset:110px 15px 95px;z-index:15;background:#080b14ec;border:1px solid #ff9c32;border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#ffbd54;padding:18px;pointer-events:none}
.shift-overlay[hidden],.shift-badge[hidden]{display:none}
.shift-overlay h2{font-size:clamp(28px,8vw,46px);letter-spacing:3px}.shift-overlay p{max-width:100%;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
.shift-directions{color:#fff1d3}
.shift-freeze *{animation-play-state:paused!important}
/* Power-off belongs to the individual lamps, not a black screen overlay. */
body.shift-blackout{background:#080b11}
body.shift-blackout .ambient{opacity:0;transition:none!important}
.shift-blackout.cabinet{border-color:#252a30!important;background:#101318!important;box-shadow:0 24px 90px #0008!important;--accent:#44494f;--cyan:#44494f}
.shift-blackout.cabinet *:not(.shift-overlay):not(.shift-overlay *){color:#51565d!important;text-shadow:none!important;box-shadow:none!important;outline:none!important;transition:none!important}
.shift-blackout .machine,.shift-blackout .reel,.shift-blackout .boost,.shift-blackout .row-hints>span,.shift-blackout #keypad button{background:#15191e!important;border-color:#30353b!important}
.shift-blackout .payline{background:transparent!important;border-color:#30353b!important;box-shadow:none!important}
.shift-blackout .payline:before{border-left-color:#3b4046!important}
.shift-blackout .payline:after{border-right-color:#3b4046!important}
.shift-blackout #speedMeter i,.shift-blackout #timebar{background:#30353b!important}
.shift-blackout .reel img{filter:grayscale(1) brightness(.25)!important}
.shift-blackout #particles,.shift-blackout .score-pop{visibility:hidden}
.shift-blackout.cabinet:before{display:none!important}
.shift-freeze .shift-overlay{background:transparent;border-color:transparent;box-shadow:none}
.shift-freeze .shift-overlay h2{color:#ffbf43;text-shadow:0 0 12px #ff9c32,0 0 35px #ff9c3280;margin:0}
.shift-freeze .shift-overlay p:empty{display:none}
.shift-freeze .feedback{visibility:hidden}
.reel-shift-theme.cabinet{--cyan:#ff9c32;background:linear-gradient(145deg,#281b12,#16120e 60%)}
.reel-shift-theme .reel img{filter:sepia(.8) saturate(1.5)}
.reel-shift-theme .reel{border-color:#ff9c3270;background:linear-gradient(90deg,#20160c,#423024 50%,#20160c)}
.reel-shift-theme .boost{background:#ff9c3212;border-color:#ff9c3260}
.reel-shift-theme #speedMeter .lit,.reel-shift-theme #timebar{background:#ff9c32}
.reel-shift-theme #keypad button{border-color:#ff9c3260;background:linear-gradient(#35291f,#241b15);color:#ffd6a1}
.reel-shift-theme #keypad button.row-hint-key:not(.pressed){background:#51321b;border-color:#ffb660;box-shadow:0 0 10px #ff9c3250;color:#ffe2ba}
.reel-shift-theme .row-hints .lit{background:#51321b;border-color:#ffb660;box-shadow:0 0 10px #ff9c3250;color:#ffe2ba;text-shadow:none}
.shift-relighting .machine,.shift-relighting .reel,.shift-relighting .payline,.shift-relighting .keypad,.shift-relighting #keypad button,.shift-relighting .scoreboard *,.shift-relighting .speed-hud,.shift-relighting #speedMeter i,.shift-relighting .boost,.shift-relighting .brand span,.shift-relighting .reel img,body.shift-relighting .ambient{transition:color var(--shift-relight-ms),background-color var(--shift-relight-ms),border-color var(--shift-relight-ms),box-shadow var(--shift-relight-ms),filter var(--shift-relight-ms)}
.shift-relighting .payline{transition-delay:var(--shift-stagger-ms)}
.shift-relighting .keypad,.shift-relighting #keypad button{transition-delay:calc(var(--shift-stagger-ms)*2)}
.shift-relighting .scoreboard *,.shift-relighting .speed-hud,.shift-relighting #speedMeter i,.shift-relighting .boost,.shift-relighting .brand span{transition-delay:calc(var(--shift-stagger-ms)*3)}
body.shift-relighting .ambient{opacity:1;transition:opacity var(--shift-relight-ms);transition-delay:calc(var(--shift-stagger-ms)*4)}
.shift-test-panel{position:fixed;right:8px;top:8px;z-index:30;display:flex;flex-direction:column;gap:5px;max-width:260px;background:#111e;padding:10px;font-size:11px}.shift-test-panel button,.shift-test-panel select{font-size:11px;padding:6px}.shift-test-panel small{color:#ffbd54}
.visual-guide{padding:0 14px 16px}
.visual-guide section{margin:12px 0;padding:12px;border:1px solid #2a4147;border-radius:10px;background:#0c151d}
.visual-guide h3{font-size:23px;margin-bottom:10px}.visual-guide h4{line-height:1.7}
.guide-overview{border:0!important;padding:4px 0!important;background:transparent!important}
.guide-mini{padding:10px;margin:8px 0;border:1px solid var(--guide-color);border-radius:8px}.normal{--guide-color:#70ffdf}.bonus{--guide-color:#ffd878}
.guide-mini strong,.guide-block h3{color:var(--guide-color)}
.guide-jump{display:block;text-align:right;color:var(--guide-color);font-size:10px;padding:3px 0}.guide-jump:focus-visible{outline:2px solid var(--guide-color)}.guide-block{scroll-margin-top:8px}
.guide-block.normal{border-color:#70ffdf60;background:linear-gradient(145deg,#102926,#0b161c)}
.guide-block.bonus{border-color:#ffd87880;background:linear-gradient(145deg,#302317,#16131c)}
.guide-flow{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;line-height:1.5;margin:10px 0;text-align:center}.guide-flow span{padding:6px;background:#ffffff08;border-radius:4px}.guide-flow b{color:var(--guide-color,#70ffdf)}
.guide-shot{position:relative;margin:12px 0 8px}.guide-shot img{display:block;width:100%;height:auto;border-radius:7px;border:1px solid #ffffff25}
.guide-pin{position:absolute;border-radius:4px;background:var(--guide-color);color:#102020;font-size:11px;font-weight:800;padding:4px 6px;box-shadow:0 2px 9px #0009;line-height:1.3;white-space:nowrap}
.normal-one{top:22%;left:30%}.normal-three{top:77%;right:2%}.bonus-two{top:9%;left:6%}.bonus-one{top:86%;left:38%}.bonus-four{bottom:16%;left:6%}
.guide-equation{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:18px;padding:9px;border:1px solid #70ffdf35;border-radius:5px}.guide-equation b,.guide-equation strong{color:#70ffdf}
#howTo .guide-lead{font-weight:800;color:#eaf3f5}.visual-guide details{margin-top:12px;border-top:1px solid #ffffff20;padding-top:9px}.visual-guide summary{cursor:pointer;font-size:11px;color:#a7b9c3;padding:4px 0}.visual-guide summary:focus-visible{outline:2px solid #70ffdf}
.guide-stack{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;margin:12px 0}.guide-stack>strong{padding:9px 16px;border:1px solid #70ffdf55;border-radius:6px;color:#70ffdf}.guide-stack>b{font-size:11px;color:#8ca7b4}.guide-stock-lamps{font-size:26px;color:#ffd878;letter-spacing:5px}
.guide-branches{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.guide-branches>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid #3f5660;border-radius:6px;font-size:12px;text-align:center}.guide-branches span{font-size:10px;color:#8fa7b4}.guide-branches strong{color:#ffd878;font-size:12px}
#howTo .guide-switch{color:#ffd878;letter-spacing:1px;font-weight:800}
.guide-predict{flex-wrap:wrap;gap:5px;color:#ffe6aa}.guide-predict>strong{flex-basis:100%;font-size:12px}.guide-predict>b:nth-of-type(2),.guide-predict>b:nth-of-type(3){flex-basis:100%}
.guide-key-map{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;font-size:11px;margin:10px 0;color:#ffe6aa}.guide-key-map b{display:block;font-size:24px;border:1px solid #ffd87860;border-radius:5px;padding:5px;margin-top:4px}
.moves-demo{border:1px solid #ffd87840;border-radius:7px;padding:10px;background:#0c1119}.moves-start{font-size:11px;text-align:center}.moves-start strong{color:#ffd878;text-shadow:0 0 12px #ffd87880}
.moves-demo ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;padding:0;margin:12px 0 0;text-align:center}.moves-demo li{position:relative;border:1px solid #6d5838;border-radius:5px;padding:6px 1px;font-size:12px}.moves-demo li+li:before{content:'→';position:absolute;left:-13px;top:11px;color:#ffd878}.moves-demo li:first-child{background:#ffd87820;box-shadow:0 0 10px #ffd87820}.moves-demo li:last-child{border-color:#ffd878;color:#ffd878}
.guide-results{display:grid;gap:6px}.guide-results>div{display:grid;grid-template-columns:70px 1fr 1fr;align-items:center;gap:5px;background:#ffd8780b;padding:9px 6px;border-radius:5px;font-size:10px}.guide-results b{font-size:17px;color:#ffd878}.guide-results strong{color:#ffe6aa}
.guide-combo{padding:10px 2px;color:#70ffdf;font-size:12px;text-align:center;border-bottom:1px solid #284340;margin-bottom:6px}.guide-endless{background:#121c28!important}.guide-mystery{text-align:center;border-style:dashed!important}.guide-mystery strong{font-size:16px;color:#ffd878}
@media(max-width:360px){.visual-guide{padding:0 10px 12px}.visual-guide section{padding:9px}.visual-guide h3{font-size:21px}.guide-flow{font-size:10px;gap:3px}.guide-flow span{padding:5px 3px}.guide-pin{font-size:9px;padding:3px 4px}.moves-demo ol{gap:7px}.moves-demo li{font-size:11px}.moves-demo li+li:before{left:-9px}.guide-results>div{grid-template-columns:62px 1fr 1fr;font-size:9px}.guide-combo{font-size:10px}}
/* Numeric gameplay displays use Orbitron only for digits; surrounding labels keep the UI face. */
:root{--font-ui:'M PLUS 2','Noto Sans JP','Yu Gothic',Meiryo,system-ui,sans-serif;--font-numeric:'SUM Numeric','M PLUS 2',system-ui,sans-serif;font-family:var(--font-ui)}
input,select,textarea{font-family:var(--font-ui)}
.feedback>span,.overlay p,.setting,.how-to-content,.how-to-content h3,.how-to-keys th,.how-to-keys td{font-family:var(--font-ui)}
.brand,.intro-mark,#judgement,.overlay h1,.bonus-overlay h2,.shift-overlay h2,.shift-overlay p{font-family:'Barlow Condensed','Noto Sans JP',sans-serif}
.intro-mark{font-family:'Noto Sans JP',sans-serif}
#score,#best,#combo,#multiplier,#level,#speedLabel,#stockProgress,#machineRange,#rouletteMoves,#rouletteRow,#roulettePattern,#rouletteRate,#bonusScore,#bonusHits,#bonusTitle,#bonusSub,#finalScore,#finalCombo,#todayRank,#allRank,#personalBest,.score-pop,.rank-row .points,.rank-row .position,.example b,.row-hints small,.guide-key-map b,.guide-equation,.guide-combo,.moves-start,.moves-demo li small{font-family:var(--font-numeric);font-variant-numeric:tabular-nums}
#keypad button{font-family:var(--font-numeric);font-size:25px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
#keypad button[data-number="0"]{font-size:16px}
.keypad button:after{font-family:var(--font-ui)}
.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(52px,28%);gap:12px;min-height:72px}
.scoreboard>div:first-child{min-width:0}.scoreboard #score{white-space:nowrap;font-size:42px;letter-spacing:0;line-height:1.15;max-width:100%}
.combo strong{font-size:36px}.final-score{white-space:nowrap;overflow-wrap:normal;letter-spacing:0}
.combo{min-width:0}#combo{display:block;max-width:100%;white-space:nowrap}
.boost{gap:8px;letter-spacing:.3px}.boost #level{font-size:9px;line-height:1.4;max-width:48%;text-align:right;overflow-wrap:anywhere}
.boost #modeBadge{font-size:9px;letter-spacing:.5px;max-width:35%}.boost strong{font-size:26px;white-space:nowrap}
.edition{font-size:8px;letter-spacing:.5px}.header-actions{gap:5px}.header-actions button{letter-spacing:0;font-size:10px;padding:6px}
.speed-hud{font-size:9px;gap:5px}#speedMeter{flex-basis:60px}#speedNotice{font-size:8px;max-width:45%;overflow-wrap:anywhere}
.machine-top,.machine-bottom{letter-spacing:.5px}.row-hints{font-size:9px;letter-spacing:0}.row-hints small{font-size:9px}
.stock-line{font-size:10px;letter-spacing:0}.stock-line small{font-size:9px}footer{letter-spacing:0;font-size:8px}footer button{font-size:9px}
.primary{font-size:18px;letter-spacing:1px}.example{gap:12px}.example b{font-weight:700;font-size:34px}
#howTo p{line-height:1.95}#howTo h3{letter-spacing:0;font-weight:800}.how-to-content small{line-height:1.9}.guide-combo{font-size:10px}
@media(max-width:360px){.brand{font-size:25px}.boost #modeBadge{font-size:8px}.boost #level{font-size:8px}.boost strong{font-size:22px}.speed-hud{gap:4px;font-size:8px}#speedMeter{flex-basis:48px}.stock-line{font-size:9px}.stock-line small{font-size:8px}.row-hints small{font-size:8px}.example{gap:10px}.example b{font-size:30px}}
.bonus-overlay h2,#bonusTitle,.shift-overlay h2,.shift-overlay p{font-family:'SUM Numeric','Barlow Condensed','Noto Sans JP',sans-serif}
#bonusDetail,#bonusTotal,#bonusNote,#rouletteSelection,#hint{font-family:var(--font-numeric);font-variant-numeric:tabular-nums}
.bonus-hit-reveal #judgement{color:#9affea;font-size:34px;text-shadow:0 0 18px #70ffdf99}
.bonus-miss-reveal #judgement{color:#92a4ae;font-size:29px;text-shadow:none}
.bonus-hit-reveal .machine{border-color:#9affea;box-shadow:0 0 24px #70ffdf55}
.bonus-answer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px}
.bonus-answer-columns>div{display:flex;flex-direction:column;align-items:center;border:1px solid #52616a;border-radius:5px;padding:4px;color:#7a8993;min-width:0}
.bonus-answer-columns b{font-family:var(--font-numeric);font-size:24px;line-height:1.1}.bonus-answer-columns small{font-size:8px;line-height:1.3}
.bonus-answer-columns .correct{color:#abfff0;border-color:#70ffdf;box-shadow:0 0 16px #70ffdf66;background:#70ffdf18}
.bonus-answer-columns .correct small{color:#abfff0}.bonus-answer-columns .wrong{color:#687883;background:#1c242b;opacity:.65}
.bonus-hit-reveal #roulettePattern,.bonus-hit-reveal #rouletteRow,.bonus-hit-reveal #rouletteRate,.bonus-hit-reveal #rouletteSelection,.bonus-miss-reveal #roulettePattern,.bonus-miss-reveal #rouletteRow,.bonus-miss-reveal #rouletteRate,.bonus-miss-reveal #rouletteSelection{display:none}
#keypad .bonus-answer-correct{color:#d8fff6;border-color:#9affea;background:#265c54;box-shadow:inset 0 0 20px #70ffdf66,0 0 15px #70ffdf77}
#keypad .bonus-answer-correct:after{content:'HIT';font-size:8px;position:absolute;right:4px;top:3px;color:#c5fff2}
.bonus-miss-reveal #keypad .bonus-answer-correct:after{content:'正解'}
#cabinet #keypad .bonus-answer-wrong{color:#71808d;background:#182129;border-color:#46545d;box-shadow:none;outline:1px solid #46545d;outline-offset:0}
#keypad .bonus-answer-wrong:after{content:'予測 ×';color:#8697a4;background:#19232d}
.bonus-perfect-reveal .bonus-overlay{border-color:#bdfff1;box-shadow:inset 0 0 70px #70ffdf33,0 0 28px #ffe08a55}
.bonus-perfect-reveal .bonus-overlay h2{color:#fff2bf;text-shadow:0 0 32px #ffd878bb}
.bonus-perfect-reveal #bonusDetail{color:#aeffeb}.bonus-perfect-reveal #bonusDetail:after{content:'  ● ● ●';color:#aeffeb}
.bonus-hit-reveal .score-pop.pop{animation-duration:.38s}
@media(max-height:740px){.bonus-answer-columns b{font-size:19px}.bonus-answer-columns>div{padding:2px}.bonus-answer-columns{gap:8px}}
/* BONUS CHARGE lights physical cabinet parts; numeric glyphs keep their normal colors. */
.bonus-charging .machine{position:relative}
.bonus-charge-core{position:absolute;pointer-events:none;left:50%;top:50%;width:150px;height:90px;border-radius:50%;z-index:1;background:radial-gradient(ellipse,#fffbd7 0%,rgba(var(--charge-core-rgb,112,255,223),.55) 35%,transparent 72%);filter:blur(5px)}
.bonus-charge-core[hidden]{display:none}
.bonus-charging.charge-lit{border-color:rgba(var(--charge-rgb),.9);box-shadow:inset 0 0 18px rgba(var(--charge-rgb),calc(var(--charge-light)*.16)),0 0 46px rgba(var(--charge-rgb),calc(var(--charge-light)*.42)),0 24px 90px #0008}
.bonus-charging .charge-lit{border-color:rgba(var(--charge-rgb),.85);box-shadow:0 0 17px rgba(var(--charge-rgb),calc(var(--charge-light)*.45)),inset 0 0 12px rgba(var(--charge-rgb),calc(var(--charge-light)*.14))}
.bonus-charging .payline.charge-lit{background:rgba(var(--charge-rgb),calc(var(--charge-light)*.12));box-shadow:0 0 18px rgba(var(--charge-rgb),calc(var(--charge-light)*.65))}
.bonus-charging .payline.charge-lit:before{border-left-color:rgb(var(--charge-rgb))}.bonus-charging .payline.charge-lit:after{border-right-color:rgb(var(--charge-rgb))}
.bonus-charging .scoreboard.charge-lit{border-bottom:1px solid rgba(var(--charge-rgb),.7)}
.bonus-charging .speed-hud.charge-lit{border-radius:4px;background:rgba(var(--charge-rgb),calc(var(--charge-light)*.08))}
.bonus-charging #keypad.charge-lit{outline:1px solid rgba(var(--charge-rgb),.75);outline-offset:4px;border-radius:8px}
.bonus-charging #keypad button.charge-lit{background:linear-gradient(rgba(var(--charge-rgb),calc(var(--charge-light)*.20)),#17222a);color:#eaf3f5}
body.bonus-charging .ambient{background:radial-gradient(ellipse,rgba(var(--charge-rgb,112,255,223),.08),transparent 65%)}
.bonus-arrived .bonus-overlay{background:radial-gradient(ellipse,#4b301fdc,#11101ae8 75%);box-shadow:inset 0 0 42px #ffd87820,0 0 24px #ffd87825}
.bonus-arrived .bonus-overlay h2{font-size:clamp(38px,11vw,64px);color:#fff2c9;text-shadow:0 0 30px #ffd87899}
body.reduced .bonus-charge-core{filter:none;opacity:.13!important}
body.reduced .bonus-charging.charge-lit{box-shadow:0 0 16px rgba(var(--charge-rgb),.12)}
body.reduced .bonus-charging .charge-lit{box-shadow:0 0 5px rgba(var(--charge-rgb),.14)}
body.reduced .bonus-charging .payline.charge-lit{box-shadow:none}
body.reduced .bonus-arrived .bonus-overlay{box-shadow:none}
@media(prefers-reduced-motion:reduce){.bonus-charge-core{filter:none;opacity:.13!important}.bonus-charging .charge-lit{box-shadow:0 0 5px rgba(var(--charge-rgb),.14)}}