/* Sci-fi fonts (Orbitron display + Rajdhani body) + optional Equinox brand font. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');
@font-face{
  font-family:'Equinox';
  src: local('Equinox'), url('fonts/Equinox.woff2') format('woff2'),
       url('fonts/Equinox.otf') format('opentype');
  font-display: swap;
}
:root{
  --bg:#0a1726; --tile:#16304a; --tile2:#112740; --fg:#e7f3ff; --muted:#8fb0cf;
  --acc:#41C0F2; --acc-deep:#0D518C; --on-acc:#063450;
  /* Claymorphism primitives */
  --raise:9px 12px 26px rgba(0,0,0,.5), inset 3px 3px 7px rgba(255,255,255,.06), inset -5px -5px 10px rgba(0,0,0,.5);
  --raise-sm:6px 8px 18px rgba(0,0,0,.45), inset 2px 2px 5px rgba(255,255,255,.06), inset -3px -3px 7px rgba(0,0,0,.5);
  --inset:inset 5px 5px 12px rgba(0,0,0,.55), inset -4px -4px 10px rgba(255,255,255,.05);
  --hero:10px 16px 30px rgba(0,0,0,.45), 0 0 26px rgba(65,192,242,.28), inset 6px 6px 12px rgba(255,255,255,.4), inset -8px -8px 14px rgba(13,81,140,.55);
  --acc-btn:8px 10px 22px rgba(0,0,0,.4), inset 4px 4px 8px rgba(255,255,255,.42), inset -6px -6px 10px rgba(13,81,140,.5);
  --font:'Equinox','Rajdhani',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Equinox','Orbitron','Rajdhani',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.4;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--bg)}
/* Sci-fi backdrop: deep gradient + animated tech grid + drifting glow + scan line */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -8%, #103a63 0%, #0a1c30 52%, #05101c 100%)}
.bg::before{content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(65,192,242,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(65,192,242,.07) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 50% 26%,#000 26%,transparent 76%);
  mask-image:radial-gradient(circle at 50% 26%,#000 26%,transparent 76%);
  animation:gridpan 26s linear infinite}
.bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(38% 30% at 16% 12%,rgba(65,192,242,.22),transparent 70%),radial-gradient(46% 36% at 86% 22%,rgba(13,81,140,.55),transparent 72%);
  animation:glowdrift 16s ease-in-out infinite alternate}
body::before{content:"";position:fixed;left:0;right:0;top:-160px;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(65,192,242,0),rgba(65,192,242,.07),rgba(65,192,242,0));animation:scan 8s linear infinite}
@keyframes gridpan{from{background-position:0 0,0 0}to{background-position:38px 38px,38px 38px}}
@keyframes glowdrift{from{transform:translateY(-2%) scale(1)}to{transform:translateY(3%) scale(1.05)}}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(calc(100dvh + 160px))}}
@media (prefers-reduced-motion:reduce){.bg::before,.bg::after,body::before{animation:none}}

.glass{background:var(--tile);box-shadow:var(--raise);border:none}
h1,h2,.brand,nav button,.grid button .lbl,#status,.timer,.lockcard h2{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase}

header{display:flex;align-items:center;gap:10px;padding:14px 16px;margin:8px;border-radius:24px;background:var(--tile);box-shadow:var(--raise-sm);flex-shrink:0}
header #status{font-weight:700;flex:1;letter-spacing:.04em}
.timer{font-variant-numeric:tabular-nums;color:var(--acc);font-size:14px;font-weight:700}
.dot{width:11px;height:11px;border-radius:50%;background:#5b7089;transition:.3s}
.dot.on{background:var(--acc);box-shadow:0 0 12px var(--acc)}
.ghost{background:none;border:none;color:var(--muted);font-size:20px}

main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px}
.view{display:none}.view.active{display:block}

/* Bento grid — puffy clay tiles */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:82px;grid-auto-flow:row dense;gap:14px}
.grid button{background:var(--tile);color:var(--fg);border:none;border-radius:24px;box-shadow:var(--raise);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;transition:transform .1s;overflow:hidden}
.grid button .ico{font-size:26px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.grid button .lbl{font-size:11px;font-weight:700;color:#cfe6ff}
.grid button.w2{grid-column:span 2}
.grid button.h2{grid-row:span 2}
.grid button.h2 .ico{font-size:42px}
.grid button.hero{background:var(--acc);box-shadow:var(--hero)}
.grid button.hero .ico{filter:drop-shadow(0 2px 5px rgba(6,52,80,.5))}
.grid button.hero .lbl{font-size:14px;color:var(--on-acc)}
.grid button:active{transform:scale(.96)}

.pad{height:46dvh;border-radius:28px;background:var(--tile2);box-shadow:var(--inset);
  display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none}
.pad .hint{color:var(--muted);font-size:13px;text-align:center;padding:0 28px;pointer-events:none}
.padbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.padbtns button{background:var(--tile);color:var(--fg);border:none;border-radius:18px;padding:15px;box-shadow:var(--raise-sm)}
.padbtns button:active{transform:scale(.96)}
.slider{display:flex;align-items:center;gap:12px;color:var(--muted);margin-top:16px;font-size:14px;padding:15px 16px;border-radius:18px;background:var(--tile);box-shadow:var(--raise-sm)}
.slider input{flex:1;accent-color:var(--acc)}

.row{display:flex;gap:10px;margin-top:16px}
.row input{flex:1;min-width:0}
input{color:var(--fg);border:none;border-radius:16px;padding:15px;font-size:16px;width:100%;background:var(--tile2);box-shadow:var(--inset)}
input::placeholder{color:var(--muted)}
button{cursor:pointer;font-size:16px;color:var(--fg);font-family:var(--font)}
.row button,#save,#typeSend,#pwGo{background:var(--acc);color:var(--on-acc);border:none;border-radius:16px;padding:0 22px;font-weight:800;letter-spacing:.05em;box-shadow:var(--acc-btn)}
.row button:active,#save:active,#typeSend:active,#pwGo:active{transform:scale(.97)}
#save{width:100%;padding:16px;margin-top:18px}
.mic{width:100%;color:var(--fg);border:none;border-radius:22px;padding:26px;font-size:17px;font-weight:700;background:var(--tile);box-shadow:var(--raise)}
.mic.live{background:var(--acc);color:var(--on-acc);box-shadow:var(--acc-btn)}
label{display:block;margin-top:18px;color:var(--muted);font-size:14px}
label input{margin-top:9px}
.muted{color:var(--muted);font-size:13px;margin-top:12px}
.log{border:none;border-radius:18px;padding:14px;margin-top:16px;max-height:32dvh;overflow:auto;white-space:pre-wrap;font-size:12px;color:#cfe9ff;font-family:ui-monospace,Menlo,monospace;background:var(--tile2);box-shadow:var(--inset)}

nav{display:flex;margin:6px 8px 8px;border-radius:22px;background:var(--tile2);box-shadow:var(--inset);overflow:hidden;flex-shrink:0}
nav button{flex:1;background:none;border:none;color:var(--muted);padding:15px 4px;font-size:13px;font-weight:700}
nav button.active{color:var(--on-acc);background:var(--acc);border-radius:18px;box-shadow:var(--acc-btn);margin:5px}

/* Screen bar (pinned at top) */
#screenbar{margin:0 8px 4px;padding:8px;border-radius:20px;flex-shrink:0}
.scrhead{display:flex;align-items:center;justify-content:space-between;padding:2px 6px;font-size:13px;color:var(--muted);font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}
#scrBtn{padding:8px 16px;border:none;border-radius:12px;background:var(--acc);color:var(--on-acc);font-weight:800;letter-spacing:.04em;font-size:13px;box-shadow:var(--acc-btn);font-family:var(--font)}
.screen{width:100%;height:auto;max-height:42dvh;object-fit:contain;border-radius:14px;display:none;background:var(--tile2);box-shadow:var(--inset)}
#screenbar.on .screen{display:block;margin-top:8px}

/* Keyboard */
.krow{display:grid;gap:10px;margin-top:10px}
.kmods{grid-template-columns:repeat(4,1fr)}
.kgrid8{grid-template-columns:repeat(4,1fr)}
.kvol{grid-template-columns:repeat(3,1fr)}
.kmod,.kkey,.ksc,.kvol button{padding:14px 6px;border:none;border-radius:14px;background:var(--tile);color:var(--fg);box-shadow:var(--raise-sm);font-size:15px;font-family:var(--font)}
.kmod{font-size:18px}
.kmod.on{background:var(--acc);color:var(--on-acc);box-shadow:var(--acc-btn)}
.kkey:active,.ksc:active,.kmod:active,.kvol button:active{transform:scale(.95)}
.kbd{width:100%;margin-top:12px;min-height:96px;border:none;border-radius:16px;padding:14px;background:var(--tile2);box-shadow:var(--inset);color:var(--fg);font-size:16px;resize:none;font-family:var(--font);letter-spacing:normal;text-transform:none}

/* Lock screen */
.lock{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(5,12,22,.6)}
.lock.hidden{display:none}
.lockcard{width:100%;max-width:340px;border-radius:34px;padding:34px 26px;text-align:center;background:var(--tile);box-shadow:var(--raise)}
.lockcard .logo{font-size:46px}
.lockcard h2{margin:12px 0 4px;font-size:22px}
.lockcard input{margin-top:20px}
.lockcard #pwGo{width:100%;padding:16px;margin-top:16px}