*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:radial-gradient(ellipse at top,#2b1650,#0c0814 70%);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
#app{display:flex;flex-direction:column;align-items:center;height:100%;height:100dvh;padding:env(safe-area-inset-top) 4px 0}
#hud{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;max-width:560px;padding:6px 0;flex-wrap:nowrap}
.hb{background:linear-gradient(#2a2340,#16121f);border:1px solid #ffffff22;box-shadow:0 2px 8px #0006;border-radius:10px;padding:2px 6px;display:flex;flex-direction:column;align-items:center;min-width:56px}
.lbl{font-size:9px;color:#ffe100;letter-spacing:1px}#hud span:not(.lbl){font-size:15px;font-weight:bold}
#hud button{background:linear-gradient(#ff5aa9,#d10f6c);box-shadow:0 2px 8px #0006;border:0;border-radius:10px;font-size:18px;width:38px;height:38px;color:#fff;cursor:pointer}
#stage{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
#game{display:block;background:#000;border-radius:14px;box-shadow:0 0 0 3px #fff2,0 0 0 6px #ff1f8e,0 10px 40px #00b7eb55,0 0 80px #ff1f8e33}
.hero{width:150px;height:130px;display:block;margin:0 auto -6px}
.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000b}
.ov.show{display:flex}
.panel{background:linear-gradient(#fff,#f1eef8);color:#111;border:4px solid #111;box-shadow:6px 6px 0 #ff1f8e,-6px -6px 0 #00b7eb;border-radius:10px;padding:18px;text-align:center;max-width:92%;width:340px;max-height:96%;overflow:auto}
.panel button{display:block;width:100%;margin:8px 0;padding:10px;font:bold 15px inherit;font-family:inherit;border:0;border-radius:12px;background:linear-gradient(#fff07a,#ffd000);box-shadow:0 3px 0 #b39200;cursor:pointer}
.panel button.big{background:linear-gradient(#ff5aa9,#d10f6c);box-shadow:0 3px 0 #8a0846;color:#fff;font-size:20px}
.hidden{display:none}
h1{font-size:42px;font-weight:900;letter-spacing:1px;line-height:1;margin:6px 0;text-shadow:0 3px 0 #0002}h2{margin-bottom:10px}
.logo{width:110px}.sub{font-size:13px;margin-bottom:8px}.tiny{font-size:11px;color:#666}
.c{color:#00b7eb}.m{color:#ff1f8e}.y{color:#e6c800}.k{color:#111}h1 .k{color:#444}
ul{text-align:left;font-size:13px;line-height:1.4;padding-left:16px}li{margin:5px 0}
ol{text-align:left;padding-left:30px;font-size:16px;line-height:1.6}
#initials{font:bold 26px monospace;width:100px;text-align:center;text-transform:uppercase;border:3px solid #111;border-radius:6px}
#banner{position:absolute;top:40%;left:0;right:0;text-align:center;font-size:30px;font-weight:bold;color:#ffe100;text-shadow:3px 3px 0 #ff1f8e,-2px -2px 0 #00b7eb;pointer-events:none;opacity:0;transition:opacity .3s}
#banner.on{opacity:1}
#touch{display:none;width:100%;max-width:480px;justify-content:space-between;align-items:center;padding:8px 18px calc(10px + env(safe-area-inset-bottom))}
@media (pointer:coarse),(max-width:700px){#touch{display:flex}}
#dpad{position:relative;width:150px;height:150px}
#dpad button{position:absolute;width:52px;height:52px;border-radius:14px;border:2px solid #fff8;background:radial-gradient(circle at 40% 30%,#5fdcff,#0089b3);box-shadow:0 4px 10px #0008;color:#fff;font-size:22px;touch-action:none}
#dpad .u{left:49px;top:0}#dpad .d{left:49px;bottom:0}#dpad .l{left:0;top:49px}#dpad .r{right:0;top:49px}
#dpad button.on,#act.on{filter:brightness(1.4);transform:scale(.94)}
#act{width:96px;height:96px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 40% 30%,#ff7ab9,#c4126a);color:#fff;font:900 22px system-ui,sans-serif;touch-action:none;box-shadow:0 0 0 4px #ffe100}

.cplogo{width:200px;max-width:80%;display:block;margin:-4px auto 0;filter:drop-shadow(0 3px 4px #0005)}
.hero{height:110px}
@media (max-width:420px){.hb{min-width:46px;padding:2px 4px}#hud{gap:4px}}
#logoband{flex:0 0 auto;height:clamp(58px,13vh,130px);width:100%;display:flex;align-items:center;justify-content:center;background:none;padding:2px 0}
#logoband img{height:100%;width:auto;max-width:94%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(255,31,142,.35))}

/* ---- retro arcade cabinet ---- */
html,body{background:#07040b}
body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:clamp(8px,calc(14vw - 46px),150px);background:url(../assets/wood.webp) center/cover;z-index:0;pointer-events:none;box-shadow:inset 0 0 30px #000c}
body::before{left:0;border-right:4px solid #2a1a10;box-shadow:inset -14px 0 24px #000a,inset 0 0 30px #000a}
body::after{right:0;border-left:4px solid #2a1a10;box-shadow:inset 14px 0 24px #000a,inset 0 0 30px #000a}
#app{position:relative;z-index:1;margin:0 auto;width:calc(100% - 2*clamp(8px,calc(14vw - 46px),150px));background:linear-gradient(90deg,#000 0,#120a1e 6%,#1a0f2a 50%,#120a1e 94%,#000 100%)}
#hud{flex-wrap:wrap;gap:8px;max-width:760px;padding:8px 6px 2px}
.led{background:linear-gradient(#100a16,#050307);border:2px solid #2e2440;border-radius:10px;box-shadow:inset 0 2px 8px #000,0 0 0 2px #000,0 2px 10px #0008;padding:3px 8px 4px;display:flex;flex-direction:column;align-items:center}
.led .lbl{font:900 10px system-ui,sans-serif;letter-spacing:2px;color:#ffe100;text-shadow:0 0 6px #ffb300}
.led.big .lbl{color:#ff6fb3;text-shadow:0 0 6px #ff1f8e}
.led canvas{display:block}
.row2{display:flex;gap:8px;align-items:center}
#scoreSeg{width:210px;height:46px}#hiSeg{width:130px;height:30px}#lvlSeg{width:46px;height:30px}#livesC{width:120px;height:30px}
@media (max-width:520px){#hud{gap:5px;padding-top:6px}#scoreSeg{width:150px;height:34px}#hiSeg{width:92px;height:22px}#lvlSeg{width:30px;height:22px}#logoband{height:clamp(56px,10vh,100px)}#livesC{width:110px;height:26px}.row2{width:100%;justify-content:center}.led{padding:2px 6px 3px}#hud button{width:34px;height:34px}}
#logoband{position:relative;flex-direction:column;height:clamp(64px,13vh,136px)}
#logoband img{height:calc(100% - 16px);flex:1 1 auto;min-height:0}
.bulbs{flex:0 0 6px;width:min(520px,90%);background:radial-gradient(circle,#ffe9a0 0 2px,#ffb30066 3px,transparent 4px) 0 0/16px 6px repeat-x;animation:chase 1s steps(2) infinite;opacity:.9;filter:drop-shadow(0 0 3px #ffb300)}
@keyframes chase{to{background-position:16px 0}}
#screen{position:relative;padding:clamp(6px,1.6vw,20px);border-radius:22px;background:linear-gradient(145deg,#2b2433,#0b080f 40%,#16111c);box-shadow:inset 0 0 0 2px #3a3046,inset 0 0 18px #000,0 0 0 3px #000,0 12px 40px #000c,0 0 60px #00b7eb22}
#screen #game{border-radius:12px;box-shadow:0 0 0 2px #000,0 0 26px #00b7eb55,0 0 50px #ff1f8e33}
#crt{position:absolute;inset:clamp(6px,1.6vw,20px);border-radius:12px;pointer-events:none;
 background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.55) 100%);
 box-shadow:inset 0 0 40px rgba(0,183,235,.18),inset 0 0 6px rgba(255,255,255,.15);mix-blend-mode:normal}
#crt::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 35%);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.85}}
/* ---- wood buttons ---- */
.panel button,.panel button.big,#hud button,#dpad button,#act{
 background:linear-gradient(rgba(255,255,255,.14),rgba(0,0,0,.18)),url(../assets/wood.webp) center/cover !important;
 color:#fff8e8 !important;text-shadow:-1px -1px 0 #2a1408,1px -1px 0 #2a1408,-1px 1px 0 #2a1408,1px 1px 0 #2a1408,0 2px 4px #000 !important;
 border:2px solid #3a1f0e !important;
 box-shadow:inset 0 2px 0 rgba(255,230,190,.35),inset 0 -3px 0 rgba(0,0,0,.35),inset 0 0 12px rgba(0,0,0,.35),0 3px 0 #2a1408,0 5px 10px rgba(0,0,0,.5) !important}
.panel button.big{font-size:22px;letter-spacing:1px}
#act{border:4px solid #ffe100 !important;box-shadow:inset 0 3px 0 rgba(255,230,190,.35),inset 0 -4px 0 rgba(0,0,0,.35),inset 0 0 16px rgba(0,0,0,.4),0 0 0 3px #2a1408,0 6px 14px rgba(0,0,0,.6) !important}
#dpad button{border-color:#ffe10099 !important}
.panel button:active,#hud button:active,#dpad button.on,#act.on{filter:brightness(1.25);transform:translateY(2px)}
#touch{max-width:none;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),url(../assets/wood.webp) center/cover;border-top:4px solid #2a1408;box-shadow:inset 0 6px 14px rgba(0,0,0,.6)}
/* ---- wood scoreboard ---- */
#hud{max-width:none;width:calc(100% + 0px);background:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.35)),url(../assets/wood.webp) center/cover;border-bottom:4px solid #2a1408;box-shadow:inset 0 -6px 14px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.5);padding:8px 6px 8px}
.led{background:linear-gradient(#0a0610,#020103);border:2px solid #1a0c05;box-shadow:inset 0 3px 10px #000,inset 0 0 0 1px #000,0 1px 0 rgba(255,220,170,.35),0 -1px 0 rgba(0,0,0,.6)}
#scores.panel{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.5)),url(../assets/wood.webp) center/cover;color:#fff8e8;border-color:#2a1408}
#scores h2{color:#ffe100;text-shadow:0 0 8px #ffb300,0 2px 0 #2a1408}
#scoreList{background:linear-gradient(#0a0610,#020103);border-radius:10px;box-shadow:inset 0 3px 10px #000;padding:10px 10px 10px 40px;color:#ff6fb3;font-family:ui-monospace,monospace;text-shadow:0 0 6px #ff1f8e}
@media (max-height:900px) and (max-width:520px){.panel{padding:12px}.cplogo{width:150px}.hero{height:76px}h1{font-size:32px}.panel button{margin:6px 0;padding:8px}.sub{margin-bottom:4px}}
/* ---- accent colors on wood for in-game buttons; menu buttons plain wood ---- */
#title button,#how button,#scores button{border:2px solid #3a1f0e !important;color:#fff8e8 !important}
#dpad button{border:3px solid #00b7eb !important;color:#7fe3ff !important;box-shadow:inset 0 2px 0 rgba(255,230,190,.3),inset 0 0 12px rgba(0,0,0,.4),0 0 10px #00b7eb99,0 4px 8px #0008 !important}
#act{border:4px solid #ff1f8e !important;color:#ff8cc4 !important;box-shadow:inset 0 3px 0 rgba(255,230,190,.3),inset 0 0 16px rgba(0,0,0,.45),0 0 0 4px #ffe100,0 0 16px #ff1f8eaa,0 6px 14px #0009 !important}
#hud button{border:2px solid #ff1f8e !important;color:#ff8cc4 !important;box-shadow:inset 0 2px 0 rgba(255,230,190,.3),inset 0 0 10px rgba(0,0,0,.4),0 0 8px #ff1f8e99,0 3px 6px #0008 !important}
#over button.big,#paused button.big{border:3px solid #ff1f8e !important;color:#ff8cc4 !important;box-shadow:inset 0 2px 0 rgba(255,230,190,.3),inset 0 0 12px rgba(0,0,0,.4),0 0 12px #ff1f8e99,0 4px 8px #0008 !important}
#btnMenu,#btnSave{border:3px solid #ffe100 !important;color:#ffe97a !important;box-shadow:inset 0 2px 0 rgba(255,230,190,.3),inset 0 0 12px rgba(0,0,0,.4),0 0 10px #ffe10088,0 4px 8px #0008 !important}
/* ---- solid color fills with wood bezel ---- */
#dpad button,#act,#hud button,#over button.big,#paused button.big,#btnMenu,#btnSave{
 --c1:#ff7ab9;--c2:#ff1f8e;--c3:#a80b57;--gl:#ff1f8e;
 border:5px solid transparent !important;
 background:radial-gradient(ellipse at 50% 15%,rgba(255,255,255,.55),transparent 55%) padding-box,linear-gradient(var(--c1),var(--c2) 55%,var(--c3)) padding-box,url(../assets/wood.webp) center/cover border-box !important;
 background-blend-mode:normal,normal,normal !important;color:#fff !important;
 text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 4px rgba(0,0,0,.35) !important;
 box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),inset 0 2px 2px rgba(255,255,255,.4),0 0 0 2px #2a1408,0 0 12px var(--gl),0 4px 8px #0009 !important}
#dpad button{--c1:#7fe3ff;--c2:#00b7eb;--c3:#00729a;--gl:#00b7eb99}
#btnMenu,#btnSave{--c1:#fff59a;--c2:#ffe100;--c3:#d4a800;--gl:#ffe10088;color:#2a1408 !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important}
#act{border-width:7px !important;box-shadow:inset 0 -4px 8px rgba(0,0,0,.3),inset 0 3px 3px rgba(255,255,255,.4),0 0 0 3px #ffe100,0 0 0 5px #2a1408,0 0 18px #ff1f8eaa,0 6px 14px #0009 !important}
/* ---- maximize play field ---- */
#hud{padding:4px 6px;gap:6px}
#logoband{height:clamp(40px,8vh,84px)}
#screen,#crt{padding:clamp(3px,.8vw,10px)}#crt{inset:clamp(3px,.8vw,10px)}
#screen{border-radius:14px}
@media (max-width:620px){
 body::before,body::after{width:3px;border:0}
 #app{width:calc(100% - 6px);padding-left:0;padding-right:0}
 #hud{flex-wrap:nowrap;gap:3px;padding:3px 2px;justify-content:space-between}
 .row2{width:auto;gap:3px}
 .led{padding:1px 4px 2px;border-radius:7px}.led .lbl{font-size:7px;letter-spacing:1px}
 #scoreSeg{width:92px;height:22px}#hiSeg{width:62px;height:16px}#lvlSeg{width:22px;height:16px}#livesC{width:56px;height:18px}
 #hud button{width:28px !important;height:28px !important;font-size:13px !important;border-width:3px !important}
 #logoband{height:38px;padding:0}#logoband .bulbs{display:none}#logoband img{height:100%}
 #stage{padding:0}
 #screen,#crt{padding:2px}#crt{inset:2px}#screen{border-radius:10px}
 #touch{padding:4px 14px calc(4px + env(safe-area-inset-bottom));border-top-width:2px}
 #dpad{width:118px;height:118px}#dpad button{width:42px;height:42px;font-size:17px}
 #dpad .u{left:38px}#dpad .d{left:38px}#dpad .l,#dpad .r{top:38px}
 #act{width:78px;height:78px;font-size:19px}
}
@media (max-width:620px){#logoband{height:32px}#dpad{width:108px;height:108px}#dpad button{width:38px;height:38px}#dpad .u,#dpad .d{left:35px}#dpad .l,#dpad .r{top:35px}#act{width:72px;height:72px}#touch{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}}
@media (min-width:621px){#logoband{height:clamp(40px,7vh,72px)}#hud{padding:3px 6px}}
@media (max-width:620px){#logoband{height:46px}#logoband img{height:100% !important}}
@media (min-width:621px){#logoband{height:clamp(56px,10vh,96px)}#logoband img{height:calc(100% - 10px)}.bulbs{flex-basis:5px}}
/* ---- menu buttons: CMYK color fill in wood frame ---- */
#title #btnPlay,#title #btnHow,#title #btnScores,.panel button.back{
 --c1:#ff7ab9;--c2:#ff1f8e;--c3:#a80b57;--gl:#ff1f8e99;
 border:5px solid transparent !important;
 background:radial-gradient(ellipse at 50% 15%,rgba(255,255,255,.55),transparent 55%) padding-box,linear-gradient(var(--c1),var(--c2) 55%,var(--c3)) padding-box,url(../assets/wood.webp) center/cover border-box !important;
 color:#fff !important;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 4px rgba(0,0,0,.35) !important;
 box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),inset 0 2px 2px rgba(255,255,255,.4),0 0 0 2px #2a1408,0 0 12px var(--gl),0 4px 8px #0009 !important}
#title #btnHow,.panel button.back{--c1:#7fe3ff;--c2:#00b7eb;--c3:#00729a;--gl:#00b7eb99}
#title #btnScores{--c1:#fff59a;--c2:#ffe100;--c3:#d4a800;--gl:#ffe10088;color:#2a1408 !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important}
/* ---- gamepad: focus highlight + toast ---- */
body.gp .panel button.gp-focus,.panel button:focus-visible{outline:4px solid #ffe100 !important;outline-offset:3px !important;filter:brightness(1.2) !important;transform:scale(1.03)}
#gpToast{position:fixed;left:50%;top:14px;transform:translate(-50%,-20px);background:rgba(17,17,17,.9);color:#fff;border:2px solid #00b7eb;border-radius:20px;padding:8px 16px;font:bold 14px system-ui,sans-serif;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#gpToast.on{opacity:1;transform:translate(-50%,0)}
/* ---- landscape phone layout (v3) ---- */
@media (orientation:landscape) and (max-height:520px){
 body::before,body::after{display:none}
 #app{display:grid;width:100%;height:100%;height:100dvh;margin:0;
  grid-template-columns:calc(158px + env(safe-area-inset-left)) minmax(0,1fr) calc(158px + env(safe-area-inset-right));
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"hud stage logo" "pad stage act";
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);align-items:stretch;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5)),url(../assets/wood.webp) center/cover}
 #hud{grid-area:hud;display:grid;grid-template-columns:auto auto;gap:4px;justify-content:center;align-content:start;
  width:auto;padding:6px 4px 4px calc(4px + env(safe-area-inset-left));background:none;border:0;box-shadow:none}
 #hud .led.sm{grid-column:1}#hud .led.xs{grid-column:2}
 #hud .led.big{grid-column:1/3;grid-row:2}
 #hud .row2{grid-column:1/3;grid-row:3;display:flex;gap:4px;justify-content:center;width:auto}
 .led{padding:1px 5px 2px;border-radius:7px}.led .lbl{font-size:8px;letter-spacing:1px}
 #scoreSeg{width:128px;height:26px}#hiSeg{width:84px;height:18px}#lvlSeg{width:26px;height:18px}#livesC{width:66px;height:20px}
 #hud button{width:30px !important;height:30px !important;font-size:13px !important;border-width:3px !important}
 #logoband{grid-area:logo;height:auto !important;width:auto;padding:8px calc(6px + env(safe-area-inset-right)) 0 6px;align-items:center;justify-content:flex-start}
 #logoband .bulbs{display:none}
 #logoband img{width:100%;height:auto !important;max-height:70px;max-width:100%;flex:0 0 auto}
 #stage{grid-area:stage;padding:4px 0;min-width:0}
 #screen,#crt{padding:3px}#crt{inset:3px}#screen{border-radius:10px}
 #touch{display:contents}
 #dpad{grid-area:pad;align-self:end;justify-self:center;margin:0 0 10px env(safe-area-inset-left);width:132px;height:132px}
 #dpad button{width:46px;height:46px;font-size:18px}
 #dpad .u,#dpad .d{left:43px}#dpad .l,#dpad .r{top:43px}
 #act{grid-area:act;align-self:end;justify-self:center;margin:0 env(safe-area-inset-right) 18px 0;width:96px;height:96px;font-size:21px}
 /* menus cover the whole screen, laid out wide */
 .ov{position:fixed;z-index:50;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .panel{width:min(620px,92vw);max-height:92vh;padding:10px 14px}
 #title.panel:not(.hidden){display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:center}
 #title .cplogo,#title .hero,#title h1,#title .sub{grid-column:1}
 #title button,#title .tiny{grid-column:2}
 #title .cplogo{width:150px;grid-row:1}#title .hero{grid-row:2;height:70px;width:120px}#title h1{grid-row:3;font-size:26px;margin:2px 0}#title .sub{grid-row:4;margin:0}
 #btnPlay{grid-row:1}#btnHow{grid-row:2}#btnScores{grid-row:3}#title .tiny{grid-row:4}
 .panel button{margin:5px 0;padding:8px}
 #how ul{font-size:12px;columns:2;column-gap:18px}#how li{break-inside:avoid;margin:3px 0}
 #over p{margin:2px 0}#initials{font-size:20px}
 #banner{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);white-space:nowrap;font-size:clamp(18px,5vh,26px);padding:6px 16px;border-radius:10px;background:rgba(10,6,16,.82);box-shadow:0 0 0 2px #ffe100,0 4px 14px #000a;z-index:5}
}