/* ============================================================
   Joker's Tile Tank 2.0 — game layout
   The world (neon city) is drawn on a canvas that fills the stage.
   HUD, overlays and touch controls are DOM layered on top and reuse
   the shell's --g-* theme variables so everything stays color-coordinated.
   ============================================================ */

/* Stage becomes the positioning context; the game fills it (overriding the
   shell's centered max-width rule for direct game children). */
.mj-stage{ position:relative; }
.mj-stage > .jtt-game{ max-width:none; margin:0; width:100%; height:100%; }

.jtt-game{
  position:absolute; inset:0; overflow:hidden;
  background:#06030f;            /* base behind the canvas (canvas paints over) */
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}

#jttWorld{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none;
}

/* ---------------- HUD ---------------- */
.jtt-hud{
  position:absolute; left:0; right:0; top:0; z-index:10;
  padding:8px 12px calc(8px + env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:6px;
  pointer-events:none;             /* never block the play field */
  font-family:var(--sans,'Inter',system-ui,sans-serif);
}
.jtt-row{ display:flex; gap:8px; flex-wrap:wrap; }
.jtt-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  background:rgba(8,4,20,.55); backdrop-filter:blur(8px);
  border:1px solid var(--g-accent-edge);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  color:var(--g-fg); font-size:12.5px; font-weight:600;
}
.jtt-chip .k{ color:var(--g-accent-lt); font-size:10px; letter-spacing:.12em; font-weight:700; }
.jtt-chip b{ color:#fff; font-weight:800; font-variant-numeric:tabular-nums; }

.jtt-meter{
  position:relative; height:16px; border-radius:999px; overflow:hidden;
  background:rgba(8,4,20,.55); border:1px solid var(--g-accent-edge);
  box-shadow:0 2px 10px rgba(0,0,0,.35); max-width:340px;
}
.jtt-meter-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, var(--g-accent-dk), var(--g-accent), var(--g-accent-lt));
  box-shadow:0 0 14px var(--g-accent-soft);
  transition:width .25s ease;
}
.jtt-meter-lbl{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9.5px; letter-spacing:.18em; font-weight:800; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.jtt-chip-hp b{ color:#5BE08A; }
.jtt-chip-lives b{ color:#FF5B7F; letter-spacing:1px; }

/* one-line mission banner — subtle, never shouts */
.jtt-mission{
  font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--g-accent-lt); opacity:.92;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  max-width:460px; line-height:1.35;
}

/* active buffs row (hidden when empty) */
.jtt-buffs:empty{ display:none; }
.jtt-buffs{ display:flex; gap:6px; flex-wrap:wrap; max-width:340px; }
.jtt-buff{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  border:1px solid currentColor; font-size:10px; font-weight:800; letter-spacing:.06em;
  background:rgba(8,4,20,.5);
}

.jtt-boss{
  display:flex; flex-direction:column; gap:4px; max-width:340px;
}
.jtt-boss-name{
  font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--g-accent-lt);
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.jtt-boss-bar{
  height:12px; border-radius:999px; overflow:hidden;
  background:rgba(8,4,20,.6); border:1px solid var(--g-accent-edge);
}
.jtt-boss-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg,#ff5b7f,#ff9a3c,#ffd84d);
  box-shadow:0 0 14px rgba(255,90,127,.6);
  transition:width .15s linear;
}

.jtt-combo{
  align-self:flex-start;
  padding:6px 14px; border-radius:12px; font-weight:800; font-size:15px;
  color:#fff; background:linear-gradient(135deg,var(--g-accent),var(--g-accent-lt));
  box-shadow:0 4px 16px var(--g-accent-soft);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* manual-aim toggle — visible on every device, top-right of the HUD */
.jtt-aim-btn{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right));
  z-index:14; cursor:pointer; pointer-events:auto;
  padding:9px 14px; border-radius:14px; font:inherit; font-size:12px; font-weight:800; letter-spacing:.06em;
  color:var(--g-fg); background:rgba(8,4,20,.62); border:1px solid var(--g-accent-edge);
  backdrop-filter:blur(8px); box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.jtt-aim-btn.is-on{ background:linear-gradient(180deg,var(--g-accent-lt),var(--g-accent)); color:#fff; border-color:transparent; }
/* aim joystick (right) — only shown on coarse pointers while manual aim is ON */
.jtt-aim-joy{
  left:auto; right:calc(18px + env(safe-area-inset-right));
  bottom:calc(150px + env(safe-area-inset-bottom));
  display:none;
}
.jtt-aim-on .jtt-aim-joy{ display:block; }

/* ---------------- touch controls ---------------- */
.jtt-touch{ position:absolute; inset:0; z-index:12; pointer-events:none; }
.jtt-joy{
  position:absolute; left:calc(18px + env(safe-area-inset-left)); bottom:calc(22px + env(safe-area-inset-bottom));
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(8,4,20,.5));
  border:2px solid var(--g-accent-edge);
  box-shadow:0 4px 18px rgba(0,0,0,.4); pointer-events:auto;
  display:none;                   /* shown by JS on coarse pointers */
}
.jtt-joy-knob{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:linear-gradient(180deg,var(--g-accent-lt),var(--g-accent));
  box-shadow:0 2px 10px rgba(0,0,0,.5); opacity:.92;
}
.jtt-suits{
  position:absolute; right:calc(16px + env(safe-area-inset-right)); bottom:calc(22px + env(safe-area-inset-bottom));
  display:none; gap:8px; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end; max-width:60vw;
}
.jtt-suits button{
  min-width:58px; padding:10px 12px; border-radius:14px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--g-fg);
  background:rgba(8,4,20,.6); border:1px solid var(--g-accent-edge);
  backdrop-filter:blur(8px); box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.jtt-suits button.is-on{ background:linear-gradient(180deg,var(--g-accent-lt),var(--g-accent)); color:#fff; border-color:transparent; }
.jtt-suits .suit-joker{ background:linear-gradient(180deg,#ffd84d,#ff9a3c); color:#3a1d00; border-color:transparent; }
.jtt-dash{
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom));
  display:none; pointer-events:auto; padding:14px 24px; border-radius:18px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:800; letter-spacing:.08em; color:#04121a;
  background:linear-gradient(180deg,#9fe9ff,#5bc8ff); border:2px solid #cdf3ff;
  box-shadow:0 4px 16px rgba(0,0,0,.45); opacity:.92;
}
.jtt-dash:active{ transform:translateX(-50%) scale(.94); filter:brightness(1.08); }

/* ---------------- overlays ---------------- */
.jtt-overlay{
  position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, rgba(40,18,80,.55), rgba(4,2,12,.86));
  backdrop-filter:blur(4px); padding:20px;
}
.jtt-overlay[hidden]{ display:none; }
.jtt-card{
  width:min(460px,92vw); text-align:center; padding:30px 26px;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  color:var(--g-fg); border:1px solid var(--g-line); border-top:3px solid var(--g-accent);
  border-radius:22px; box-shadow:var(--g-shadow-lg), 0 0 0 6px var(--g-accent-soft);
}
.jtt-card h1{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:32px; margin:0 0 8px; color:var(--g-heading); line-height:1.05;
}
.jtt-card h1 span{
  display:inline-block; font-family:var(--sans,'Inter',sans-serif); font-size:14px; font-weight:800;
  letter-spacing:.14em; vertical-align:middle; margin-left:6px;
  padding:3px 10px; border-radius:999px; color:#1a0a2c;
  background:linear-gradient(90deg,var(--g-accent-lt),var(--g-accent));
}
.jtt-sub{ color:var(--g-muted); font-size:14.5px; line-height:1.5; margin:0 0 18px; }
.jtt-players{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.jtt-players .lbl{ font-size:13px; color:var(--g-muted); }
.jtt-players-row{ display:inline-flex; gap:8px; }
.mj-chip{ font:700 16px/1 inherit; min-width:46px; height:40px; padding:0 14px; border-radius:12px; cursor:pointer;
  color:var(--g-fg); background:var(--g-glass); border:2px solid var(--g-line); transition:.15s ease; user-select:none; }
.mj-chip:hover{ border-color:var(--g-accent); transform:translateY(-1px); }
.mj-chip.is-on{ color:#fff; background:linear-gradient(180deg,var(--g-accent-lt),var(--g-accent)); border-color:transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.22); }
.jtt-leaderboard{ display:flex; flex-direction:column; gap:8px; margin:6px 0 18px; }
.jtt-lb-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px;
  background:var(--g-glass); border:1px solid var(--g-line);
}
.jtt-lb-row.is-winner{
  background:linear-gradient(135deg,var(--g-accent),var(--g-accent-lt)); color:#1a0a2c; border-color:transparent;
  box-shadow:0 4px 16px var(--g-accent-soft);
}
.jtt-lb-rank{ font-weight:800; font-size:18px; width:26px; text-align:center; }
.jtt-lb-name{ flex:1; text-align:left; font-weight:700; }
.jtt-lb-stats{ font-size:12px; opacity:.85; font-variant-numeric:tabular-nums; }

/* ---------------- premium results card ---------------- */
.jtt-result{ margin:2px 0 12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.jtt-result[hidden]{ display:none; }
.jtt-big-chips{
  font-size:42px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFF6D8,#FFD84D 55%,#C89A2E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,216,77,.35));
}
.jtt-big-chips small{ font-size:14px; font-weight:700; letter-spacing:.14em; }
.jtt-result-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.jtt-badge{
  padding:4px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.1em;
  border:1px solid var(--g-line); background:var(--g-glass); color:var(--g-fg);
}
.jtt-badge.gold{
  border-color:transparent; color:#2a1a00;
  background:linear-gradient(90deg,#FFE9A8,#FFD84D);
  animation:jttBadgePulse 1.6s ease-in-out infinite;
}
@keyframes jttBadgePulse{ 0%,100%{ box-shadow:0 0 8px rgba(255,216,77,.35); } 50%{ box-shadow:0 0 20px rgba(255,216,77,.7); } }
.jtt-badge.tier{ color:#FFD84D; letter-spacing:2px; text-shadow:0 0 8px rgba(255,216,77,.4); }

/* gold shimmer on the results title */
.jtt-card h1.is-gold{
  background:linear-gradient(90deg,#B8860B,#FFD84D 25%,#FFF3C4 50%,#FFD84D 75%,#B8860B);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:jttGoldShift 3.2s linear infinite;
}
@keyframes jttGoldShift{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }

/* confetti burst inside the overlay */
.jtt-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.jtt-confetti i{
  position:absolute; top:-14px; width:8px; height:14px; border-radius:2px; opacity:.95;
  animation:jttConfettiFall linear forwards;
}
@keyframes jttConfettiFall{
  from{ transform:translateY(0) rotate(0deg); }
  to{ transform:translateY(var(--fall,640px)) rotate(720deg); }
}
.jtt-lb-rank.medal{ font-size:20px; width:30px; }

/* ---------------- help ---------------- */
.jtt-help{ position:absolute; inset:0; z-index:34; display:flex; align-items:center; justify-content:center;
  background:rgba(4,2,12,.7); backdrop-filter:blur(5px); padding:18px; }
.jtt-help[hidden]{ display:none; }
.jtt-help-card{
  width:min(520px,94vw); max-height:88vh; overflow:auto; padding:26px 24px; position:relative;
  background:linear-gradient(180deg,var(--g-panel),var(--g-card)); color:var(--g-fg);
  border:1px solid var(--g-line); border-top:3px solid var(--g-accent); border-radius:20px;
  box-shadow:var(--g-shadow-lg);
}
.jtt-help-card h2{ font-family:var(--serif,Georgia,serif); color:var(--g-heading); margin:0 0 10px; font-size:24px; }
.jtt-help-card h3{ color:var(--g-heading); margin:16px 0 6px; font-size:15px; }
.jtt-help-card p{ color:var(--g-muted); font-size:13.5px; line-height:1.55; margin:0 0 8px; }
.jtt-help-lead{ color:var(--g-fg) !important; font-size:14.5px !important; }
.jtt-help-note{ font-size:12px; opacity:.7; margin-top:14px; border-top:1px solid var(--g-line); padding-top:12px; }
.jtt-help-x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid var(--g-line);
  background:var(--g-card); color:var(--g-fg); font-size:20px; cursor:pointer; }
.jtt-help .close{ margin-top:10px; }

/* ---------------- responsive ---------------- */
@media (max-width:560px){
  .jtt-card h1{ font-size:26px; }
  .jtt-sub{ font-size:13.5px; }
}
/* coarse pointer (touch) shows the on-screen joystick + suit switch */
@media (pointer:coarse){
  .jtt-joy{ display:block; }
  .jtt-suits{ display:flex; }
  .jtt-dash{ display:block; }
}