/* MASKD — Neo-Biker Brutalism base styles */
:root{
  --deep-black:#000;
  --primary:#00ff41;        /* electric green */
  --primary-fixed:#72ff70;
  --secondary:#ff3131;      /* vibrant red */
  --bg:#0c160a;             /* surface */
  --surface-low:#141e12;
  --surface:#182216;
  --surface-high:#222d20;
  --on-bg:#dae6d2;
  --on-variant:#b9ccb2;
  --outline-variant:#3b4b37;
  --stark-white:#fff;
  --off-white:#e6e7da;
  --dark-gray:#1a1a1a;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--on-bg);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

/* hard neo-brutalist offset shadows */
.neo-shadow{ box-shadow:4px 4px 0 0 rgba(0,0,0,1); }
.neo-shadow-lg{ box-shadow:8px 8px 0 0 rgba(0,0,0,1); }
.neo-shadow-primary{ box-shadow:4px 4px 0 0 var(--primary); }

/* press-to-push tactile feedback */
.active-push{ transition:transform .06s ease, box-shadow .06s ease; }
.active-push:active{ transform:translate(2px,2px); box-shadow:0 0 0 0 rgba(0,0,0,1) !important; }

.hide-scrollbar::-webkit-scrollbar{ display:none; }
.hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.fill-icon{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }

/* diagonal hazard fill for dead space */
.hazard{
  background-image:repeating-linear-gradient(45deg,#00ff4122 0 10px,transparent 10px 20px);
}

/* form fields — black with white border, green focus glow (the one soft element) */
.field{
  width:100%; background:#000; color:#fff; border:2px solid #fff;
  padding:14px 14px; font-size:16px; outline:none; border-radius:0;
}
.field::placeholder{ color:#7d8a78; }
.field:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,255,65,.35); }
select.field{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; }

/* view transition */
#view{ animation:fade .22s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* toast */
#toast-wrap{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:90; width:max-content; max-width:92vw; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  background:var(--primary); color:#000; border:3px solid #000; padding:12px 18px;
  font-weight:700; text-transform:uppercase; box-shadow:4px 4px 0 0 #000; font-size:14px;
  display:flex; align-items:center; gap:10px; animation:toastin .25s ease;
}
.toast.err{ background:var(--secondary); color:#fff; }
@keyframes toastin{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }

/* drawer slide */
#drawer-panel{ transition:transform .3s cubic-bezier(.2,.8,.2,1); }

/* header auto-hide */
header#topbar{ transition:transform .3s ease; }

/* drawer links */
.drawer-link{ display:flex; align-items:center; gap:16px; padding:14px 24px; color:var(--on-surface); font-weight:500; text-transform:uppercase; font-size:15px; transition:transform .12s ease, background .12s ease; }
.drawer-link:hover{ background:var(--surface-high); transform:translateX(4px); }
.drawer-link .material-symbols-outlined{ color:var(--primary); }

/* bottom nav */
.botnav{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#000; opacity:.6; padding:6px 10px; border:2px solid transparent; font-size:11px; font-weight:700; text-transform:uppercase; transition:all .15s ease; min-width:58px; }
.botnav .material-symbols-outlined{ font-size:24px; }
.botnav.nav-on{ opacity:1; background:var(--primary); border-color:#000; box-shadow:2px 2px 0 0 #000; transform:scale(.96); }

/* utility */
.upper{ text-transform:uppercase; }
.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-tight{ line-height:1.05; }
.skel{ background:linear-gradient(90deg,#1d271b 25%,#283326 37%,#1d271b 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; }
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }