:root{
  --hud:rgba(8,12,18,.55); --hud-ink:#ffffff; --hud-dim:rgba(255,255,255,.7); --accent:#ffb43a;
  --card:rgba(10,14,22,.72); --card-ink:#ffffff; --card-dim:rgba(255,255,255,.75);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --hud:rgba(4,6,10,.62); --card:rgba(6,8,14,.8); color-scheme:dark; }
}
:root[data-theme="dark"]{ --hud:rgba(4,6,10,.62); --card:rgba(6,8,14,.8); color-scheme:dark; }
[hidden]{display:none !important;}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{height:100%; margin:0; overflow:hidden;}
body{background:#10141c; color:var(--hud-ink); font-family:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif; touch-action:none; user-select:none; -webkit-user-select:none;}
canvas#gl{position:fixed; inset:0; width:100%; height:100%; display:block; filter:saturate(1.12) contrast(1.05);}
#vig{position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.32) 100%);}
.hud{position:fixed; pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.6);}
#clock{top:calc(14px + env(safe-area-inset-top,0px)); right:18px; text-align:right;}
#clock b{display:block; font-size:34px; font-weight:700; line-height:1; letter-spacing:.5px;}
#clock span{font-size:14px; color:var(--hud-dim); letter-spacing:1px;}
#stars{font-size:24px; letter-spacing:2px; margin-top:2px; color:rgba(255,255,255,.25);}
#stars .on{color:#fff; text-shadow:0 0 8px rgba(255,255,255,.7);}
#stars.flash .on{animation:blink .6s steps(2) infinite;}
@keyframes blink{50%{opacity:.25;}}
#busted{left:50%; top:40%; transform:translate(-50%,-50%); font-size:clamp(60px,14vw,140px); font-weight:700; letter-spacing:6px; color:#ff4a3d; text-shadow:0 4px 0 #000,0 0 40px rgba(0,0,0,.8);}
@media (prefers-reduced-motion: reduce){#stars.flash .on{animation:none;}}
#mini{position:fixed; pointer-events:auto; left:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:180px; height:180px; border-radius:50%; border:3px solid rgba(255,255,255,.85); box-shadow:0 6px 20px rgba(0,0,0,.45); pointer-events:none;}
#prompt{left:50%; bottom:calc(38px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--hud); padding:8px 18px; border-radius:10px; font-size:18px; letter-spacing:.4px; white-space:nowrap;}
#prompt kbd{font:inherit; background:var(--accent); color:#1a1205; border-radius:5px; padding:0 8px; margin-right:6px; text-shadow:none; font-weight:700;}
#speed{right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); text-align:right;}
#speed b{font-size:52px; font-weight:700; line-height:.9; display:block;}
#speed span{font-size:14px; color:var(--hud-dim); letter-spacing:1px;}
#note{left:50%; top:calc(18px + env(safe-area-inset-top,0px)); transform:translateX(-50%); background:var(--hud); padding:6px 16px; border-radius:10px; font-size:16px; opacity:0; transition:opacity .25s;}
#note.on{opacity:1;}
#topbar{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:18px; display:flex; gap:8px; flex-wrap:wrap; max-width:60vw;}
.tbtn{font:inherit; font-size:15px; color:var(--hud-ink); background:var(--hud); border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:6px 14px; cursor:pointer;}
.tbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
#money{top:calc(98px + env(safe-area-inset-top,0px)); right:18px; font-size:26px; font-weight:700; color:#7ee08a;}
#hpWrap{position:fixed; left:18px; bottom:calc(208px + env(safe-area-inset-bottom,0px)); width:180px; height:9px; border-radius:6px; background:rgba(0,0,0,.45); overflow:hidden; border:1px solid rgba(255,255,255,.4);}
#hp{height:100%; width:100%; background:#4cd964; transition:width .2s;}
#armWrap{position:fixed; left:18px; bottom:calc(222px + env(safe-area-inset-bottom,0px)); width:180px; height:7px; border-radius:6px; background:rgba(0,0,0,.45); overflow:hidden; border:1px solid rgba(255,255,255,.4);}
#arm{height:100%; width:0; background:#4aa3ff;}
body.touch #armWrap{left:auto; right:16px; top:calc(218px + env(safe-area-inset-top,0px)); bottom:auto; width:118px;}
#sirenBtn{position:fixed; right:18px; top:50%; transform:translateY(-50%); font:inherit; font-size:20px; font-weight:700; letter-spacing:.5px; color:#fff; background:rgba(10,14,22,.72); border:3px solid rgba(255,255,255,.6); border-radius:16px; padding:14px 18px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.4);}
#sirenBtn:hover{border-color:#fff;} #sirenBtn:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
#sirenBtn.on{background:linear-gradient(90deg,rgba(220,30,30,.9),rgba(30,70,230,.9)); border-color:#fff; animation:sirenPulse .6s steps(2) infinite;}
@keyframes sirenPulse{50%{filter:brightness(1.35);}}
@media (prefers-reduced-motion: reduce){#sirenBtn.on{animation:none;}}
body.touch #sirenBtn{display:none;}
#weapon{right:22px; bottom:calc(112px + env(safe-area-inset-bottom,0px)); text-align:right;}
#weapon b{display:block; font-size:22px;} #weapon span{font-size:14px; color:var(--hud-dim);}
#wpInfo{left:50%; top:calc(56px + env(safe-area-inset-top,0px)); transform:translateX(-50%); background:var(--hud); padding:4px 14px; border-radius:10px; font-size:15px; color:#ffd23f;}
#cross{position:fixed; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; pointer-events:none; background:radial-gradient(circle,#fff 0 2px,transparent 3px),linear-gradient(#fff,#fff) center/2px 7px no-repeat,linear-gradient(90deg,#fff,#fff) center/7px 2px no-repeat; opacity:.85; filter:drop-shadow(0 0 2px #000);}
#uw{position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(40,140,170,.25), rgba(10,50,80,.6)); opacity:0; transition:opacity .3s; z-index:3;}
#bigmap{position:fixed; inset:0; z-index:6; background:rgba(8,12,18,.92); display:flex; flex-direction:column; align-items:center; padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)); box-sizing:border-box; gap:8px;}
#bigCv{flex:1; width:100%; border-radius:14px; cursor:crosshair; touch-action:none;}
#bigHint{color:var(--hud-dim); font-size:15px;}
#mini{cursor:pointer;}
body.bigbtn .tb{font-size:19px; padding:14px 24px; min-width:100px;} body.bigbtn #joy{width:180px; height:180px;} body.bigbtn #knob{width:74px; height:74px; margin:-37px 0 0 -37px;} body.bigbtn #bFire{width:110px; height:110px; font-size:50px;}
#fade{position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .5s; z-index:4;}
#fade.on{opacity:1;}
#red{position:fixed; inset:0; pointer-events:none; box-shadow:inset 0 0 160px 40px rgba(200,0,0,.85); opacity:0;}
#wasted{left:50%; top:40%; transform:translate(-50%,-50%); font-size:clamp(60px,14vw,140px); font-weight:700; letter-spacing:6px; color:#d23a2e; text-shadow:0 4px 0 #000,0 0 40px rgba(0,0,0,.8);}
.menu{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:20px; padding-top:calc(20px + env(safe-area-inset-top,0px)); padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)); box-sizing:border-box; z-index:5;}
.mcard{background:var(--card); color:var(--card-ink); border-radius:16px; padding:16px 18px; width:100%; max-width:420px; max-height:100%; overflow:auto; box-sizing:border-box;}
.mcard h2{margin:0 0 10px; font-size:26px; font-weight:700; letter-spacing:.5px;}
.mi{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:9px 13px; margin:0 0 8px; cursor:pointer;}
.mi:hover:not([disabled]){background:rgba(255,180,58,.22);} .mi:focus-visible{outline:2px solid var(--accent);}
.mi[disabled]{opacity:.45; cursor:default;}
.mi b{display:block; font-size:18px; font-weight:500;} .mi span{display:block; font-size:14px; color:var(--card-dim); font-weight:400;}
.mfoot{font-size:14px; color:var(--card-dim); margin:6px 0 0; line-height:1.45; font-weight:400;}
.mclose{font:inherit; font-size:16px; margin-top:10px; background:var(--accent); color:#1a1205; border:none; border-radius:10px; padding:8px 18px; cursor:pointer; font-weight:500;}
.pl{display:block; font-size:15px; margin-bottom:6px; color:var(--card-dim);}
#pcode{font:inherit; font-size:20px; width:100%; box-sizing:border-box; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.3); color:#fff; margin-bottom:10px;}
#helpBtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
#help{position:fixed; top:calc(56px + env(safe-area-inset-top,0px)); left:18px; background:var(--card); color:var(--card-ink); border-radius:12px; padding:12px 16px; font-size:15px; line-height:1.55; max-width:290px; font-weight:400;}
#help p{margin:2px 0;}
#tut{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100vw - 32px));background:rgba(10,14,28,.92);color:#fff;border:2px solid #ffd23f;border-radius:18px;padding:18px 20px 14px;z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.5);font-family:"Oswald","Arial Narrow",Arial,sans-serif}
#tut[hidden]{display:none}
#tut .tstep{padding-right:90px;font-size:13px;letter-spacing:.14em;color:#ffd23f;text-transform:uppercase}
#tut h3{margin:4px 0 6px;font-size:26px;line-height:1.1}
#tut p{margin:0;font-size:17px;line-height:1.45;font-family:system-ui,Arial,sans-serif;color:#e6ebf5}
#tut kbd{display:inline-block;background:#fff;color:#111;border-radius:5px;padding:0 6px;font-size:14px;font-weight:700;margin:0 1px}
#tut .trow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
#tut .dots{display:flex;gap:5px}#tut .dots i{width:8px;height:8px;border-radius:50%;background:#4a5470}#tut .dots i.on{background:#ffd23f}
#tut button{font:inherit;font-size:17px;border-radius:10px;border:0;padding:8px 18px;cursor:pointer}
#tut .tnext{background:#ffd23f;color:#111;font-weight:700}#tut .tback,#tut .tskip{background:transparent;color:#c8d0e0;border:1px solid #4a5470}
#tut .tx{position:absolute;top:10px;right:10px;background:#e6394a;color:#fff;font-weight:700;font-size:15px;padding:6px 12px}
#tut button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){#tut{bottom:auto;top:calc(60px + env(safe-area-inset-top,0px))}#tut h3{font-size:22px}#tut p{font-size:15px}}

#joy{position:fixed; left:26px; bottom:calc(26px + env(safe-area-inset-bottom,0px)); width:136px; height:136px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.45); display:none; touch-action:none;}
#knob{position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(255,255,255,.8);}
#btns{position:fixed; right:18px; bottom:calc(110px + env(safe-area-inset-bottom,0px)); display:none; flex-direction:column; gap:12px; align-items:flex-end;}
.tb{font:inherit; font-size:16px; font-weight:500; color:#fff; background:var(--hud); border:2px solid rgba(255,255,255,.55); border-radius:999px; padding:10px 20px; min-width:88px; touch-action:manipulation;}
#bFire{width:84px; height:84px; min-width:0; padding:0; border-radius:50%; font-size:38px; line-height:1; background:rgba(214,40,40,.75); border:3px solid rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(0,0,0,.4);}
#bFire:active{transform:scale(.92);}
.tb:active{background:rgba(255,180,58,.55);}
body.touch #joy{display:block;} body.touch #btns{display:flex;}
body.touch #hpWrap{left:auto; right:16px; top:calc(204px + env(safe-area-inset-top,0px)); bottom:auto; width:118px;}
body.touch #money{top:calc(98px + env(safe-area-inset-top,0px)); right:150px; font-size:20px;}
body.touch #weapon{bottom:calc(470px + env(safe-area-inset-bottom,0px));}
body.touch #btns{gap:9px;}
body.touch .tb{padding:8px 16px; min-width:74px;}
body.touch #mini{left:auto; right:16px; top:calc(80px + env(safe-area-inset-top,0px)); bottom:auto; width:118px; height:118px;}
body.touch #speed{bottom:calc(300px + env(safe-area-inset-bottom,0px));}
body.touch #prompt{bottom:calc(180px + env(safe-area-inset-bottom,0px)); font-size:15px;}
body.touch kbd{display:none;}
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(10,14,24,.15) 0%,rgba(10,14,24,.78) 70%); padding:24px; padding-top:calc(24px + env(safe-area-inset-top,0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); box-sizing:border-box;}
.card{max-width:560px; width:100%; text-align:center; color:var(--card-ink);}
.title{margin:0; font-size:clamp(60px,15vw,128px); font-weight:700; line-height:.88; letter-spacing:2px; color:#fff; text-shadow:0 6px 30px rgba(255,140,60,.55),0 3px 0 rgba(0,0,0,.4);}
.studio{margin:0 0 10px; font-size:clamp(15px,3.4vw,20px); letter-spacing:6px; color:var(--accent); font-weight:500;}
.tag{font-size:clamp(17px,3.6vw,22px); color:var(--card-dim); margin:14px 0 22px; font-weight:400;}
.keys{background:var(--card); border-radius:14px; padding:14px 20px; text-align:left; font-size:16px; line-height:1.6; margin:0 auto 22px; max-width:420px; font-weight:400;}
.keys p{margin:0;}
.keys b{color:var(--accent); font-weight:500;}
.play{font:inherit; font-size:24px; font-weight:700; letter-spacing:2px; color:#1a1205; background:var(--accent); border:none; border-radius:12px; padding:12px 44px; cursor:pointer; box-shadow:0 8px 30px rgba(255,170,60,.4);}
.play:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.play[disabled]{opacity:.5;}
@media (max-width:640px){ #clock b{font-size:26px;} #speed b{font-size:40px;} }
@media (prefers-reduced-motion: reduce){ #note{transition:none;} }

/* ===== Portrait phone layout fix (added on rabgames.com server 2026-11-11) ===== */
@media (orientation:portrait) and (max-width:600px){
body.touch #topbar{left:10px;max-width:calc(100vw - 150px);gap:5px}
body.touch .tbtn{font-size:13px;padding:5px 9px;border-radius:8px}
body.touch #clock{right:12px}
body.touch #clock b{font-size:22px}
body.touch #clock span{font-size:11px}
body.touch #mini{right:12px;top:calc(62px + env(safe-area-inset-top,0px));width:112px;height:112px}
body.touch #hpWrap{right:12px;top:calc(182px + env(safe-area-inset-top,0px));width:112px}
body.touch #armWrap{right:12px;top:calc(195px + env(safe-area-inset-top,0px));width:112px}
body.touch #money{right:12px;top:calc(206px + env(safe-area-inset-top,0px));font-size:20px}
body.touch #note{left:10px;right:136px;top:auto;bottom:calc(330px + env(safe-area-inset-bottom,0px));transform:none;font-size:14px;padding:6px 10px}
body.touch #btns{flex-direction:row;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;width:170px;right:10px;bottom:calc(20px + env(safe-area-inset-bottom,0px));gap:7px}
body.touch #btns .tb{min-width:0;width:78px;padding:7px 0;font-size:14px;text-align:center}
body.touch #btns #bFire{width:72px;height:72px;font-size:32px}
body.touch #joy{left:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:128px;height:128px}
body.touch #prompt{left:10px;right:10px;transform:none;white-space:normal;text-align:center;bottom:calc(290px + env(safe-area-inset-bottom,0px))}
body.touch #speed{right:auto;left:16px;bottom:calc(160px + env(safe-area-inset-bottom,0px))}
body.touch #weapon{bottom:calc(330px + env(safe-area-inset-bottom,0px));right:12px}
body.touch #tut{top:calc(150px + env(safe-area-inset-top,0px))}
}