/* Shared shell for the gg.sisamos.net games: tokens, HUD, stage, touch pad, overlay. */

:root{
  --bg:#0d1117;
  --card:#161b24;
  --card-hover:#1c2230;
  --line:rgba(255,255,255,.09);
  --fg:#e9eef6;
  --muted:#8d9bb0;
  --gold:#c58335;
  --gold-ink:#1a1208;
  --danger:#e0574b;
  --pad-size:62px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  /* Stops the page rubber-banding while you drag on the controls. */
  overscroll-behavior:none;
}
body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  /* A stray text selection during a swipe looks broken; the controls are not text. */
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------------------------------------------------------------- back link */
.gg-back{
  position:fixed;
  left:10px;
  top:calc(10px + env(safe-area-inset-top));
  z-index:60;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:9px 13px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--muted);
  text-decoration:none;
  backdrop-filter:blur(6px);
}
.gg-back:hover{color:var(--fg);background:rgba(255,255,255,.11)}
.gg-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------------------------------------------------------- shell */
.gg-shell{
  width:100%;
  max-width:560px;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:calc(56px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- HUD */
.gg-hud{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex:0 0 auto;
}
.gg-stats{display:flex;gap:18px;min-width:0}
.gg-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.gg-stat .k{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
}
.gg-stat .v{
  font-size:19px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.gg-stat.is-best .v{color:var(--gold)}

.gg-tools{display:flex;gap:8px;flex:0 0 auto}
.gg-tool{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--muted);
  cursor:pointer;
  padding:0;
  font-size:15px;
  line-height:1;
}
.gg-tool:hover{color:var(--fg);background:rgba(255,255,255,.1)}
.gg-tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gg-tool[aria-pressed="true"]{color:var(--gold);border-color:rgba(197,131,53,.5)}
.gg-tool svg{width:17px;height:17px;fill:currentColor}

/* ---------------------------------------------------------------- stage */
.gg-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  /* fitCanvas floors the box it measures at 120px, so a stage shorter than that
     is handed a canvas taller than itself. That happens in landscape on a phone,
     where the pad and the HUD can leave the stage under 70px. Clip it, or the
     game paints over the HUD and the top row of the pad. */
  overflow:hidden;
}
.gg-stage canvas{
  display:block;
  border-radius:10px;
  border:1px solid var(--line);
  background:#090c11;
  /* The canvas is a control surface, not a scroll surface. */
  touch-action:none;
}

/* ---------------------------------------------------------------- overlay */
.gg-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* A game-over panel carrying a full top ten is taller than a phone's stage.
     Plain centring overflows in BOTH directions and the overflowing half is
     unreachable: the title lands behind the back link and the last rows sit over
     the pad. 'safe' centring falls back to flex-start exactly when it would
     overflow, so it stays centred while it fits and scrolls from the top when it
     does not. The first declaration is the fallback for engines without 'safe'. */
  justify-content:flex-start;
  justify-content:safe center;
  overflow-y:auto;
  overscroll-behavior:contain;
  gap:6px;
  padding:22px;
  text-align:center;
  border-radius:10px;
  background:rgba(9,12,17,.88);
  backdrop-filter:blur(3px);
}
.gg-overlay[hidden]{display:none}
.gg-overlay h2{
  margin:0;
  font-size:23px;
  font-weight:700;
  letter-spacing:.3px;
}
.gg-overlay .sub{margin:0;font-size:13px;color:var(--muted);line-height:1.55;max-width:30ch}
.gg-overlay .final{
  margin:10px 0 2px;
  font-size:34px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
  line-height:1;
}
.gg-overlay .newbest{
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
}

.gg-btn{
  margin-top:14px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--gold);
  color:var(--gold-ink);
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  cursor:pointer;
}
.gg-btn:hover{background:#d8943f}
.gg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gg-btn.ghost{background:transparent;border-color:var(--line);color:var(--fg);margin-top:8px;padding:10px 20px}
.gg-btn.ghost:hover{background:rgba(255,255,255,.07)}

.gg-name{
  margin-top:12px;
  width:min(240px,100%);
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-align:center;
  -webkit-user-select:text;
  user-select:text;
}
.gg-name:focus{outline:2px solid var(--gold);outline-offset:1px}
.gg-name::placeholder{color:var(--muted)}

/* ---------------------------------------------------------------- touch pad */
.gg-pad{
  display:none;
  flex:0 0 auto;
  gap:12px;
  align-items:center;
  justify-content:center;
  padding-top:2px;
}
.gg-pad.is-on{display:flex}
.gg-key{
  width:var(--pad-size);
  height:var(--pad-size);
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0;
  touch-action:manipulation;
}
.gg-key:active,.gg-key.is-down{background:rgba(197,131,53,.35);border-color:var(--gold)}
.gg-key:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gg-key svg{width:24px;height:24px;fill:currentColor}

/* A 2x3 cluster for Snake's four directions. */
.gg-pad.dpad{display:none;grid-template-columns:repeat(3,var(--pad-size));gap:9px}
.gg-pad.dpad.is-on{display:grid}
.gg-pad.dpad .sp{visibility:hidden}

/* ---------------------------------------------------------------- scoreboard */
.gg-scores{
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13px;
}
.gg-scores li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 2px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.gg-scores li:last-child{border-bottom:0}
.gg-scores li.me{color:var(--fg)}
.gg-scores li.me .s{color:var(--gold)}
.gg-scores .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg-scores .s{font-variant-numeric:tabular-nums;font-weight:700;flex:0 0 auto}
.gg-scores-wrap{width:min(300px,100%);margin-top:14px}
.gg-scores-wrap h3{
  margin:0 0 4px;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
}

/* ---------------------------------------------------------------- versus */
/* The room panel, built by versus.js and dropped into a game's own overlay, so
   all six two-player games get the same flow rather than six inventions. */
.gg-vs{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(300px,100%)}
.gg-vs[hidden]{display:none}
.gg-vs-step{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.gg-vs-step[hidden]{display:none}
.gg-vs-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.5;max-width:28ch}
/* The code is read out loud, so it is set wide and monospaced: at a glance you can
   tell an 8 from a B, which is most of what goes wrong down a phone line. */
.gg-vs-code{
  font:800 30px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:8px;
  text-indent:8px;
  color:var(--gold);
  padding:10px 14px;
  border:1px dashed rgba(197,131,53,.5);
  border-radius:10px;
  background:rgba(197,131,53,.07);
}
.gg-vs-input{
  font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:7px;
  text-indent:7px;
  text-align:center;
  text-transform:uppercase;
  width:100%;
}
.gg-vs-status{margin:0;font-size:12px;color:var(--muted);min-height:15px}
.gg-vs-status.is-bad{color:var(--danger)}
.gg-vs-row{display:flex;gap:8px;width:100%}
.gg-vs-row .gg-btn{flex:1 1 0;margin-top:0}
/* A live opponent, shown in the HUD next to your own score. */
.gg-stat.is-them .v{color:#6fb2d0}

/* A phone held sideways is the tightest case in the whole shell: the HUD, a two
   row pad and the top padding can leave the stage under 70px, which is less than
   fitCanvas will even measure. Trimming the pad and the padding gives the game
   back the height instead of letting the column ask for more than the viewport
   has. */
@media (max-height:540px){
  :root{--pad-size:46px}
  .gg-shell{gap:6px;padding-top:calc(46px + env(safe-area-inset-top))}
  .gg-pad.dpad{gap:6px}
  .gg-overlay{padding:14px}
  .gg-overlay h2{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}