/* ==========================================================================
   CubRawl · Base — reset, page shell, screens and panels
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{background:var(--void);scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;touch-action:pan-x pan-y}
body{
  background:
    radial-gradient(1100px 620px at 50% -8%,rgba(122,92,255,.16),transparent 62%),
    radial-gradient(900px 520px at 86% 108%,rgba(255,47,208,.10),transparent 60%),
    var(--void);
  color:var(--ink);
  font-family:var(--font-ui);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--cyan)}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[hidden]{display:none!important}

/* thin neon scrollbars inside panels */
*{scrollbar-width:thin;scrollbar-color:rgba(0,234,255,.38) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,234,255,.5),rgba(255,47,208,.45));border-radius:99px}

/* ---- game canvas & full-screen layers ---- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.layer{position:fixed;inset:0;pointer-events:none}
#labels{overflow:hidden}

/* ---- screens ---- */
.screen{
  position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:auto;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-right,0px) + 18px)
          calc(env(safe-area-inset-bottom,0px) + 18px) calc(env(safe-area-inset-left,0px) + 18px);
}
#menu{
  background:
    linear-gradient(180deg,rgba(4,6,15,.08) 0%,rgba(4,6,15,.62) 56%,rgba(4,6,15,.88) 100%);
}

/* ---- frosted dark panels ---- */
.panel{
  position:relative;
  background:
    linear-gradient(180deg,rgba(0,234,255,.06),rgba(0,234,255,0) 42%),
    var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}

/* ---- cards: notched corners + HUD brackets ---- */
.card{
  position:relative;
  width:min(470px,100%);
  padding:28px 28px 24px;
  border-radius:var(--radius);
  text-align:center;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.card::before,.card::after{
  content:'';position:absolute;width:22px;height:22px;pointer-events:none;z-index:2;
}
.card::before{top:7px;left:7px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);opacity:.75}
.card::after{bottom:7px;right:7px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);opacity:.65}
.card>*{position:relative;z-index:1}

.screen:not([hidden]) .card{animation:cardIn .42s cubic-bezier(.2,.9,.25,1.15)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---- small shared bits ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
kbd{
  font:700 11px/1 var(--font-ui);padding:3px 6px;border-radius:3px;
  background:rgba(0,234,255,.10);border:1px solid var(--line);
  color:var(--cyan-soft);white-space:nowrap;
}
.tile-gap{display:inline-block}

/* ---- decorative baseline ---- */
.cyber-rule{
  height:1px;border:0;margin:14px 0;
  background:linear-gradient(90deg,transparent,var(--line-strong),var(--line-magenta),transparent);
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .screen:not([hidden]) .card{animation:none}
}