/* Majed Space
   Layout: full-screen canvas game. The title runs a live demo behind a chunky logo and one big PLAY button.
   Online games use a fixed portrait arena centred on screen; the HUD lines up with its edges.
   Single dark look by design. */

@font-face{font-family:'Black Ops One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/black-ops-one-latin.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-latin-700.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/rubik-latin-900.woff2) format('woff2')}

:root{
  --void:#04050d;
  --hull:#ffffff;
  --plasma:#5ef2ff;
  --gold:#ffc21a;
  --rust:#c25a00;
  --ember:#ff6a3d;
  --peach:#ffd9a8;
  --ink:#12060a;
  --dim:#9aa3c7;
  --ok:#5dff9a;
  --bad:#ff6b7a;
  --panel:#0b1024;
  --logo:'Black Ops One','Impact','Arial Black',system-ui,sans-serif;
  --ui:'Rubik',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --arena-x:0px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--void);color:var(--hull)}
body{font-family:var(--ui);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
input{user-select:text;-webkit-user-select:text;touch-action:manipulation}
button{touch-action:manipulation}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.playing canvas{cursor:none}
[hidden]{display:none!important}
.noscript{position:fixed;inset:auto 0 40%;text-align:center;font:700 16px var(--ui)}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px),calc(var(--arena-x) + 12px));
  padding-right:max(16px,env(safe-area-inset-right,0px),calc(var(--arena-x) + 12px));
  pointer-events:none;font-variant-numeric:tabular-nums}
.hud-left{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.score{font-weight:900;font-size:clamp(22px,6.5vw,30px);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.score small{display:block;font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--dim);margin-bottom:4px}
.top-name{font-family:var(--logo);font-size:clamp(22px,7vw,32px);line-height:1;color:var(--gold);
  text-shadow:0 2px 0 var(--rust),0 4px 0 var(--ink);padding-top:2px}
.side{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.lives{display:flex;gap:6px}
.life{width:14px;height:16px;background:var(--plasma);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}
.life.lost{background:rgba(154,163,199,.22)}
.power{font-weight:900;font-size:11px;letter-spacing:.12em;color:var(--gold)}
.mate{display:flex;align-items:center;gap:6px;font-weight:900;font-size:10px;letter-spacing:.14em;color:var(--peach);max-width:44vw}
.mate>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mate-lives{display:flex;gap:3px}
.mate-lives i{display:block;width:8px;height:9px;background:var(--ember);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}
.mate-lives i.lost{background:rgba(154,163,199,.22)}
.mate-lives em{font-style:normal;color:var(--bad)}
.room-tag{font-weight:900;font-size:10px;letter-spacing:.18em;color:var(--plasma)}

.icon-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;cursor:pointer;
  color:var(--plasma);background:rgba(4,5,13,.55);border:2px solid rgba(94,242,255,.55)}
.icon-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.icon-btn:active{transform:translateY(2px)}
.pause-btn{pointer-events:auto;width:34px;height:34px;border-radius:9px;opacity:.85}
.sound-btn{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(16px,env(safe-area-inset-right,0px))}
.snd .off{display:none}
.snd.muted{color:var(--dim);border-color:rgba(154,163,199,.45)}
.snd.muted .on{display:none}
.snd.muted .off{display:block}

/* ---------- In-game messages ---------- */
.toast{position:fixed;left:0;right:0;top:34%;z-index:3;text-align:center;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font-family:var(--logo);font-size:clamp(30px,10vw,52px);line-height:1;color:var(--gold);
  text-shadow:0 3px 0 var(--rust),0 6px 0 var(--ink),0 10px 24px rgba(0,0,0,.6)}
.toast.small{font-size:clamp(20px,6.4vw,30px)}
.toast.show{animation:toast 1.4s ease-out both}
.notice{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:3;transform:translateX(-50%);pointer-events:none;
  font-weight:900;font-size:11px;letter-spacing:.2em;color:var(--hull);background:rgba(11,16,36,.85);
  border:2px solid rgba(94,242,255,.5);border-radius:999px;padding:8px 14px;white-space:nowrap}
.spect{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.spect b{font-family:var(--logo);font-weight:400;font-size:24px;color:var(--bad);text-shadow:0 3px 0 var(--ink)}
.spect span{font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--dim)}

/* ---------- Screens ---------- */
.overlay{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(22px,5.5vh,44px);
  text-align:center;overflow-y:auto;
  padding-top:calc(env(safe-area-inset-top,0px) + 24px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(ellipse 70% 45% at 50% 44%,rgba(4,5,13,.72),rgba(4,5,13,.18) 75%,rgba(4,5,13,0))}
.logo-block{display:flex;flex-direction:column;align-items:center;animation:drop .7s cubic-bezier(.2,1.6,.4,1) both}
.logo{display:grid;margin:0;font-family:var(--logo);font-weight:400;font-size:clamp(66px,22vw,132px);line-height:.9;letter-spacing:.01em}
.logo>span{grid-area:1/1}
.logo .back{color:var(--rust);-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink),0 12px 18px rgba(0,0,0,.6)}
.logo .front{background:linear-gradient(180deg,#fff 0%,#fff3bf 30%,var(--gold) 50%,#ff9a0a 51%,#ff6a00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.badge{margin-top:-6px;transform:rotate(-4deg) skewX(-14deg);background:var(--plasma);color:var(--ink);
  font-weight:900;font-size:clamp(15px,4.6vw,24px);letter-spacing:.55em;padding:6px 14px 6px calc(14px + .55em);
  box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink)}
.badge span{display:inline-block;transform:skewX(14deg)}
.over .logo{font-size:clamp(46px,14vw,84px)}
.logo.small{font-size:clamp(46px,14vw,84px)}

.play{font:900 clamp(20px,6vw,26px)/1 var(--ui);letter-spacing:.14em;color:var(--ink);background:var(--gold);
  border:0;border-bottom:6px solid var(--rust);border-radius:14px;padding:18px 54px 14px calc(54px + .14em);cursor:pointer;
  box-shadow:0 0 0 3px var(--ink),0 10px 24px rgba(0,0,0,.5);animation:breathe 1.6s ease-in-out infinite}
.play:active{transform:translateY(4px);border-bottom-width:2px;margin-top:4px}
.play:focus-visible{outline:3px solid var(--plasma);outline-offset:5px}
.play:disabled{filter:saturate(.3) brightness(.7);cursor:default;animation:none}
.best{font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--dim);margin-top:-12px}
.best b{color:var(--hull);font-weight:900}

.about-btn{font:900 13px/1 var(--ui);letter-spacing:.24em;color:var(--plasma);background:rgba(4,5,13,.55);
  border:2px solid var(--plasma);border-radius:10px;padding:11px 18px 11px calc(18px + .24em);cursor:pointer;margin-top:-10px}
.about-btn:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.about-btn:active{transform:translateY(2px)}
.about-btn:disabled{opacity:.5;cursor:default}
.about-btn.gold{color:var(--gold);border-color:var(--gold)}
.row{display:flex;gap:12px;margin-top:-10px;flex-wrap:wrap;justify-content:center}
.row .about-btn{margin-top:0}

/* Online screens */
.stack{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(340px,100%)}
.stack .play{width:100%;padding-left:20px;padding-right:20px}
.name-field{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.field-label{font-weight:700;font-size:11px;letter-spacing:.3em;color:var(--dim);text-align:left;padding-left:2px}
.name-in{width:100%;font:900 19px/1 var(--ui);letter-spacing:.08em;text-align:center;color:var(--hull);
  background:var(--panel);border:2px solid rgba(154,163,199,.45);border-radius:10px;padding:11px 10px}
.name-in::placeholder{color:rgba(154,163,199,.45)}
.name-in:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-color:var(--plasma)}
.or{font-weight:700;font-size:12px;letter-spacing:.3em;color:var(--dim)}
.joinrow{display:flex;gap:10px;width:100%}
.joinrow input{flex:1;min-width:0;font:900 26px/1 var(--ui);letter-spacing:.35em;text-align:center;text-transform:uppercase;
  color:var(--hull);background:var(--panel);border:2px solid var(--plasma);border-radius:10px;padding:12px 8px 12px calc(8px + .35em)}
.joinrow input::placeholder{color:rgba(154,163,199,.45)}
.joinrow input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.joinrow input.bad{border-color:var(--bad);animation:shake .38s}
.joinrow .about-btn{margin-top:0}
.err{min-height:1.3em;font-weight:900;font-size:12px;letter-spacing:.14em;color:var(--bad)}
.rlabel{font-weight:700;font-size:12px;letter-spacing:.3em;color:var(--dim);margin-bottom:-18px}
.code{font-family:var(--logo);font-size:clamp(72px,24vw,120px);line-height:1;letter-spacing:.12em;padding-left:.12em;color:var(--gold);
  text-shadow:0 4px 0 var(--rust),0 8px 0 var(--ink);user-select:text;-webkit-user-select:text}
.status{font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--hull);min-height:1.4em;max-width:32ch}
.status.ok{color:var(--ok)}
.status.bad{color:var(--bad)}
.dots::after{content:'';animation:dots 1.4s steps(1) infinite}

/* Game over */
.final{display:flex;flex-direction:column;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.final b{font-weight:900;font-size:clamp(48px,15vw,72px);line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.6)}
.final span{font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--dim)}
.duo{display:flex;flex-direction:column;gap:8px;width:min(300px,100%);margin-top:-12px;font-variant-numeric:tabular-nums}
.duo-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 14px;border-radius:10px;background:rgba(11,16,36,.7)}
.duo-name{font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--plasma);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo-name.mate-col{color:var(--peach)}
.duo-row b{font-weight:900;font-size:20px}
.best-line{font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--dim);margin-top:-14px;min-height:1.2em}
.best-line.new{color:var(--gold)}

/* About me */
.modal{position:fixed;inset:0;z-index:7;display:grid;place-items:center;background:rgba(2,3,8,.8);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.panel{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left;
  background:var(--panel);border-radius:16px;padding:26px 22px 22px;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--plasma),0 10px 0 5px var(--ink);
  animation:pop .35s cubic-bezier(.2,1.5,.4,1) both}
.panel h2{margin:0;font-family:var(--logo);font-weight:400;font-size:clamp(28px,8.5vw,36px);line-height:1.05;color:var(--gold);
  text-shadow:0 2px 0 var(--rust),0 4px 0 var(--ink)}
.panel .role{transform:skewX(-12deg);background:var(--plasma);color:var(--ink);font-weight:900;font-size:13px;letter-spacing:.12em;padding:5px 10px;text-transform:uppercase}
.panel .role span{display:inline-block;transform:skewX(12deg)}
.panel p{margin:0;font-weight:700;font-size:17px;line-height:1.5;color:var(--hull);min-height:1.5em;max-width:32ch}
.panel p.kicker{color:var(--gold)}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--plasma);animation:blink .8s steps(1) infinite}
.panel .play{align-self:center;margin-top:8px;font-size:18px;padding:14px 40px 10px calc(40px + .14em);animation:none}

@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes drop{from{transform:translateY(-40px) scale(1.25);opacity:0}to{transform:none;opacity:1}}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes toast{0%{transform:scale(1.6);opacity:0}12%{transform:scale(1);opacity:1}75%{opacity:1}100%{transform:translateY(-14px);opacity:0}}

@media (max-height:620px){
  .overlay{gap:16px}
  .logo{font-size:clamp(52px,15vh,110px)}
  .over .logo,.logo.small{font-size:clamp(38px,10vh,70px)}
}
@media (prefers-reduced-motion:reduce){
  .logo-block,.play,.panel,.caret,.dots::after,.toast.show,.joinrow input.bad{animation:none}
}