/* Joker Bubble Mahjong — page and board chrome.
   A premium dark stage with a warm gold accent, scoped to this game only. The
   shell reads these --g-* values, so the top bar, buttons, HUD and modals all
   adopt the same luxe treatment as the canvas - everything stays consistent and
   high-end. This follows the site rule that every color comes from a --g-*
   variable, so it never leaks onto other games. The bubbles are real mahjong
   tiles drawn on the canvas; their only literal colors are the ivory pair that
   is the physical color of the tiles themselves. */

#gameRoot {
  --g-bg: #0a0f0e;
  --g-card: #0e1614;
  --g-panel: #121b18;
  --g-fg: #EAF0EC;
  --g-heading: #F6F3E8;
  --g-muted: rgba(234, 240, 236, .62);
  --g-line: rgba(234, 240, 236, .14);
  --g-glass: rgba(255, 255, 255, .05);
  --g-accent: #D8B463;
  --g-accent-lt: #F2DCA0;
  --g-accent-dk: #B8943F;
  --g-accent-soft: rgba(216, 180, 99, .30);
  --g-shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
  --g-shadow-lg: 0 18px 48px rgba(0, 0, 0, .62);
}

/* A quiet gold thread frames the play field, echoing the canvas rails. */
#gameRoot .jb-canvas-wrap {
  border-color: rgba(216, 180, 99, .28);
  box-shadow: 0 0 0 1px rgba(216, 180, 99, .10), var(--g-shadow-md);
}

/* Stat panels read as faint glass so the HUD feels part of the stage. */
#gameRoot .jb-stat { background: rgba(255, 255, 255, .045); }

/* The start / result card gets a warm gold hairline instead of a flat border. */
#gameRoot .jb-card { border-color: rgba(216, 180, 99, .30); }

/* The stage fills the real viewport height rather than a vh value, so a phone
   showing or hiding its address bar never crops the board or the launcher. */
#gameRoot {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#gameRoot .mj-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  background: transparent;
}
#gameRoot .jb-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  background: transparent;
}

/* ---------- HUD ---------- */
.jb-hud {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.jb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--g-glass);
  border: 1px solid var(--g-line);
}
.jb-stat span {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.jb-stat b {
  font-size: 17px;
  line-height: 1.1;
  color: var(--g-heading);
  font-variant-numeric: tabular-nums;
}
.jb-stat-best b { color: var(--g-accent-dk); }

/* ---------- board ---------- */
.jb-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--g-line);
  background: var(--g-card);
  box-shadow: var(--g-shadow-md);
}
#jbCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------- start / result overlay ---------- */
.jb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--g-bg) 72%, transparent);
  backdrop-filter: blur(3px);
  z-index: 2;
}
.jb-overlay[hidden] { display: none; }
.jb-card {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-lg);
}
.jb-medal { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.jb-card h2 {
  margin: 0 0 8px;
  font-family: var(--serif, Georgia, serif);
  font-size: 25px;
  color: var(--g-heading);
}
.jb-card p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--g-muted);
}

/* The one-line how-to lives inside the start/result card so it never eats
   board height; the fine print is a small legal note kept inside the card and
   the help panel. Both stay out of the board's flex layout, which is what
   lets the canvas grow taller and the tiles read bigger. */
.jb-card .jb-howto {
  margin: 2px 0 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--g-muted);
}
.jb-card .jb-fineprint,
.jb-help-card .jb-fineprint {
  margin: 14px auto 0;
  max-width: 360px;
  padding-top: 10px;
  border-top: 1px solid var(--g-line);
  text-align: center;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--g-muted);
  opacity: .8;
}

/* ---------- help ---------- */
.jb-help {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .48);
}
.jb-help[hidden] { display: none; }
.jb-help-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 22px 24px 20px;
  border-radius: 18px;
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-lg);
}
.jb-help-card h2 {
  margin: 0 0 14px;
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  color: var(--g-heading);
}
.jb-help-card h3 {
  margin: 16px 0 5px;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--g-accent-dk);
}
.jb-help-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--g-fg);
}
.jb-help-card #jbHelpOk { margin-top: 20px; }
.jb-help-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--g-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.jb-help-x:hover { background: var(--g-glass); color: var(--g-fg); }

/* ---------- phones ---------- */
@media (max-width: 620px) {
  #gameRoot .jb-wrap { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .jb-hud { gap: 5px; }
  .jb-stat { min-width: 0; flex: 1 1 auto; padding: 5px 7px; border-radius: 10px; }
  .jb-stat span { font-size: 9px; }
  .jb-stat b { font-size: 14px; }
  /* Four stats sit in one tidy row on a phone; the best score is a desktop
     extra and would otherwise wrap onto a row of its own. */
  .jb-stat-best { display: none; }
  .jb-card h2 { font-size: 21px; }
  .jb-card p { font-size: 12.5px; }
  .jb-card .jb-howto { font-size: 11px; }
}
@media (max-width: 380px) {
  .jb-stat span { font-size: 8.5px; }
  .jb-stat b { font-size: 13px; }
}