/* EPI Pad — phone-as-gamepad. Deep field, teal and gold. */

:root{
  --bg:#070a0f;
  --bg2:#0b111a;
  --ink:#dfe9ee;
  --dim:#6d8494;
  --teal:#3fd7c4;
  --teal-dk:#1b6f68;
  --gold:#e8b24a;
  --gold-dk:#7a5c1f;
  --line:rgba(63,215,196,.20);
  --pad-h:min(4.2vh,34px);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* the whole point: the page must never scroll, zoom, select or flash grey */
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

body{
  display:flex;
  flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(63,215,196,.10), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(232,178,74,.08), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
}

/* ---------------------------------------------------------------- top bar */

#topbar{
  position:relative; z-index:2;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px 6px;
  font-size:12px; letter-spacing:.16em;
}

#brand{color:var(--dim); font-weight:700}
#brand span{color:var(--teal)}

#player{
  color:var(--gold);
  border:1px solid rgba(232,178,74,.35);
  border-radius:999px;
  padding:3px 10px;
  font-size:11px;
  background:rgba(232,178,74,.06);
}
#player b{font-size:13px}

#conn{display:flex; align-items:center; gap:7px; color:var(--dim); font-size:11px;
      white-space:nowrap}

#conn-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--dim);
  box-shadow:0 0 0 0 rgba(63,215,196,.5);
}
#conn.ok  #conn-dot{background:var(--teal); animation:pulse 2.6s ease-out infinite}
#conn.wait #conn-dot{background:var(--gold); animation:pulse 1.1s ease-out infinite}
#conn.bad #conn-dot{background:#e0575b}
#conn.ok  #conn-text{color:var(--teal)}
#conn.bad #conn-text{color:#e0575b}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,215,196,.45)}
  70%{box-shadow:0 0 0 9px rgba(63,215,196,0)}
  100%{box-shadow:0 0 0 0 rgba(63,215,196,0)}
}

.hidden{display:none !important}

/* ------------------------------------------------------------------- pad */

#pad{
  position:relative; z-index:1;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  padding:0 10px 14px;
  overflow:hidden;
  justify-content:flex-end;
}

.shoulders{
  flex:0 0 auto;
  display:flex; justify-content:space-between;
  padding:2px 2px 8px;
}

.mainrow{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:auto minmax(0,auto) auto;
  justify-content:space-between;
  /* thumbs live in the lower half of a phone held in portrait */
  align-items:end;
  gap:6px;
  min-width:0; min-height:0;
  padding-bottom:4vh;
}

/* ---- generic button look ---- */

.btn{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(63,215,196,.10), rgba(10,16,22,.85));
  color:var(--ink);
  font-family:inherit; font-weight:700; letter-spacing:.08em;
  border-radius:14px;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .05s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
}

.btn.pressed{
  background:linear-gradient(180deg, rgba(63,215,196,.42), rgba(27,111,104,.55));
  box-shadow:0 0 18px rgba(63,215,196,.45), inset 0 2px 6px rgba(0,0,0,.45);
  transform:translateY(2px) scale(.97);
  border-color:rgba(63,215,196,.65);
}

/* ---- shoulders ---- */

.shoulder{
  width:32%; height:clamp(40px,7.5vh,60px);
  font-size:15px;
  border-radius:16px;
}

/* ---- mode switch (D-PAD | STICK), lives between the shoulders ---- */

.modesw{
  display:flex; align-items:stretch;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:rgba(10,16,22,.75);
  height:clamp(28px,4.4vh,34px);
  align-self:center;
}
.seg{
  -webkit-appearance:none; appearance:none;
  border:0; background:transparent;
  color:var(--dim);
  font-family:inherit; font-weight:700;
  font-size:9px; letter-spacing:.12em;
  padding:0 11px;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease, color .14s ease;
}
.seg.on{
  background:linear-gradient(180deg, rgba(63,215,196,.30), rgba(27,111,104,.42));
  color:#04100f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- left thumb column: d-pad and stick share one slot ---- */

.leftcol{
  justify-self:center;
  display:flex; align-items:flex-end; justify-content:center;
}
body.mode-stick .dpad{display:none}
body:not(.mode-stick) .stick{display:none}

/* ---- d-pad ---- */

.dpad{
  position:relative;
  width:min(35vw,168px);
  aspect-ratio:1;
}
.dpad .d{
  position:absolute;
  border-radius:12px;
}
.dpad .up,.dpad .down{ left:34%; width:32%; height:37% }
.dpad .left,.dpad .right{ top:34%; height:32%; width:37% }
.dpad .up{top:0}
.dpad .down{bottom:0}
.dpad .left{left:0}
.dpad .right{right:0}

/* arrow glyphs drawn in CSS so there is no font dependency */
.dpad .d::after{
  content:""; display:block;
  border:7px solid transparent;
  opacity:.75;
}
.dpad .up::after{border-bottom-color:var(--teal); margin-bottom:7px}
.dpad .down::after{border-top-color:var(--teal); margin-top:7px}
.dpad .left::after{border-right-color:var(--teal); margin-right:7px}
.dpad .right::after{border-left-color:var(--teal); margin-left:7px}
.dpad .d.pressed::after{opacity:1}

.dhub{
  position:absolute; left:34%; top:34%; width:32%; height:32%;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(10,16,22,.7);
  pointer-events:none;
}

/* ---- analog stick ---- */

.stick{
  position:relative;
  width:min(35vw,168px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 38%, rgba(63,215,196,.12), transparent 62%),
    linear-gradient(180deg, rgba(10,16,22,.6), rgba(7,10,15,.95));
  box-shadow:inset 0 3px 14px rgba(0,0,0,.65), 0 2px 0 rgba(0,0,0,.5);
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .14s ease, border-color .14s ease;
}
/* the inner gate ring: where the dead zone ends, so the eye can see centre */
.stickgate{
  position:absolute; left:50%; top:50%;
  width:26%; height:26%;
  margin:-13% 0 0 -13%;
  border:1px dashed rgba(63,215,196,.22);
  border-radius:50%;
  pointer-events:none;
}
.stick .knob{
  position:absolute; left:50%; top:50%;
  width:46%; height:46%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg, rgba(63,215,196,.32), rgba(11,17,26,.96));
  border:1px solid rgba(63,215,196,.42);
  box-shadow:0 4px 12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events:none;
  transition:transform .07s ease-out, background .12s ease, box-shadow .12s ease;
}
/* dot in the knob centre, gold so the resting position is unmistakable */
.stick .knob::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12%; height:12%; margin:-6% 0 0 -6%;
  border-radius:50%;
  background:rgba(232,178,74,.55);
}
.stick.grab{
  border-color:rgba(63,215,196,.55);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.65), 0 0 22px rgba(63,215,196,.28);
}
.stick.grab .knob{
  transition:background .12s ease, box-shadow .12s ease;   /* no lag while dragging */
  background:linear-gradient(180deg, rgba(63,215,196,.55), rgba(27,111,104,.7));
  border-color:rgba(63,215,196,.8);
  box-shadow:0 0 20px rgba(63,215,196,.5), inset 0 2px 6px rgba(0,0,0,.4);
}
.stick.grab .knob::after{background:#160f02}

/* ---- centre column ---- */

.centre{
  display:flex; flex-direction:column; gap:8px; align-items:center;
  justify-self:center;
}
.btn.tiny{
  font-size:9px; letter-spacing:.10em;
  padding:0 8px;
  height:32px; min-width:74px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(10,16,22,.85));
}
.btn.tiny.menu{
  color:var(--gold);
  border-color:rgba(232,178,74,.32);
}
.btn.tiny.menu.pressed{
  background:linear-gradient(180deg, rgba(232,178,74,.42), rgba(122,92,31,.55));
  box-shadow:0 0 18px rgba(232,178,74,.45), inset 0 2px 6px rgba(0,0,0,.45);
  border-color:rgba(232,178,74,.7);
  color:#160f02;
}

/* ---- face buttons ---- */

.face{
  position:relative;
  justify-self:center;
  width:min(35vw,168px);
  aspect-ratio:1;
}
.face .f{
  position:absolute;
  width:40%; aspect-ratio:1;
  border-radius:50%;
  font-size:16px;
  color:var(--gold);
  border-color:rgba(232,178,74,.28);
  background:linear-gradient(180deg, rgba(232,178,74,.10), rgba(10,16,22,.85));
}
.face .f.pressed{
  background:linear-gradient(180deg, rgba(232,178,74,.5), rgba(122,92,31,.6));
  box-shadow:0 0 22px rgba(232,178,74,.5), inset 0 2px 6px rgba(0,0,0,.45);
  border-color:rgba(232,178,74,.75);
  color:#160f02;
}
.face .x{top:0;    left:30%}
.face .y{top:30%;  left:0}
.face .a{top:30%;  right:0}
.face .b{bottom:0; left:30%}

/* ------------------------------------------------------------------ toast */

#toast{
  position:fixed; z-index:5; left:50%; bottom:14px; transform:translateX(-50%);
  background:rgba(7,10,15,.94);
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 14px; border-radius:999px;
  font-size:11px; letter-spacing:.08em;
  max-width:88vw; text-align:center;
}

/* --------------------------------------------------------- wide / landscape */

@media (orientation:landscape){
  #pad{justify-content:space-between}
  .mainrow{flex:1 1 auto; align-items:center; padding-bottom:0}
  .dpad,.stick{width:min(24vw,180px)}
  .face{width:min(24vw,185px)}
  .shoulder{height:clamp(34px,11vh,54px)}
  .btn.tiny{min-width:96px; font-size:10px}
  .modesw{height:clamp(28px,8vh,36px)}
}

/* very small phones (SE-class, 320px) */
@media (max-width:340px){
  .btn.tiny{min-width:64px; font-size:8px; height:29px}
  .dpad,.face,.stick{width:min(33vw,120px)}
  .seg{padding:0 8px; font-size:8px}
}