/*
 * Joe's Games — brand styles.
 * Cream #FAF3E7, maroon #7B2D26, gold #C98A2D, charcoal #2B2320.
 * Headings: Rokkitt (Georgia fallback). Body: Nunito Sans (system fallback).
 * Mobile-first: most players arrive from Facebook on a phone.
 */

/*
 * v1.0.2 mobile sizing fix — the card is the hard boundary: it fills its
 * parent content column (width: 100%) and can never be pushed wider by a
 * child. overflow-x: clip is the belt to the suspenders: even if some
 * inner element mis-sizes, it clips inside the card instead of shoving
 * past the phone's viewport.
 */
.jg-game,
.joe-lb-wrap {
  background: #FAF3E7;
  color: #2B2320;
  font-family: "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 20px 16px 24px;
  border: 2px solid #7B2D26;
  border-radius: 14px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
}

.jg-game *,
.joe-lb-wrap * { box-sizing: border-box; }

.jg-title {
  font-family: Rokkitt, Georgia, serif;
  color: #7B2D26;
  font-size: 1.7rem;
  margin: 0 0 4px;
  text-align: center;
}

.jg-sub {
  text-align: center;
  margin: 0 0 14px;
  color: #5c5148;
  font-size: 0.95rem;
}

.jg-lb-title {
  font-family: Rokkitt, Georgia, serif;
  color: #7B2D26;
  font-size: 1.25rem;
  margin: 22px 0 8px;
  text-align: center;
}

.jg-btn {
  display: inline-block;
  background: #7B2D26;
  color: #FAF3E7;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.jg-btn:hover,
.jg-btn:focus { background: #93392f; }

.jg-btn-big { width: 100%; padding: 14px 18px; font-size: 1.1rem; }

.jg-btn-small { padding: 6px 12px; font-size: 0.85rem; }

/* ---------- nickname bar ---------- */
/* v1.0.2 mobile sizing fix: the bar stays inside the card and its contents
   wrap — a long porch name breaks onto the next line instead of widening
   the row, and the input/button can shrink (min-width: 0) and wrap. */

.joe-nickname-bar {
  background: #FFF9EF;
  border: 1px dashed #C98A2D;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  max-width: 100%;
  overflow-wrap: break-word;
}

.jg-nickname-set { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.jg-nickname-set strong { min-width: 0; overflow-wrap: anywhere; }
.jg-nickname-set .jg-btn { flex: 0 1 auto; }

.jg-nickname-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jg-nickname-form label { width: 100%; font-weight: 700; color: #7B2D26; }
.jg-nickname-form input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #b9a888;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.jg-nickname-msg { width: 100%; color: #9A3B26; font-size: 0.85rem; }

/* ---------- leaderboard ---------- */

.jg-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #FFF9EF;
  border-radius: 10px;
  overflow: hidden;
}

.jg-lb-table th {
  background: #7B2D26;
  color: #FAF3E7;
  font-family: Rokkitt, Georgia, serif;
  text-align: left;
  padding: 8px 10px;
}

.jg-lb-table td { padding: 7px 10px; border-top: 1px solid #e8dcc4; }
.jg-lb-table tbody tr:nth-child(even) { background: #f7ecd7; }
.jg-lb-loading, .jg-lb-empty { text-align: center; color: #5c5148; margin: 8px 0; }

/* ---------- hub ---------- */

.jg-hub {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 24px;
}

.jg-hub-card {
  display: block;
  background: #FAF3E7;
  border: 2px solid #7B2D26;
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: #2B2320;
}

.jg-hub-name {
  display: block;
  font-family: Rokkitt, Georgia, serif;
  color: #7B2D26;
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.jg-hub-desc { display: block; margin-bottom: 14px; color: #5c5148; }

@media (min-width: 640px) {
  .jg-hub { flex-direction: row; }
  .jg-hub-card { flex: 1; }
}

/* ---------- Daily Word ---------- */
/*
 * v1.0.2 mobile sizing fix — root cause of the phone overflow: the board
 * and keyboard were sized in viewport units (width: min(330px, 88vw) and
 * min(500px, 94vw)). vw measures the whole phone screen, but the game
 * lives inside the theme's padded content column AND the card's own
 * padding, so at 360–400px the "88vw" board was wider than the space
 * actually available and its fifth column slid under the card's edge.
 * Fix: everything is sized relative to its container (width: 100% with a
 * max-width cap), tiles size from the grid (1fr columns + aspect-ratio,
 * never fixed pixels), and gaps/type shrink under 400px.
 */

.joe-dw-board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 10px;
}

.jg-dw-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; min-width: 0; }

.jg-dw-row.shake { animation: jg-shake 0.35s ease-in-out; }

@keyframes jg-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

.jg-dw-tile {
  aspect-ratio: 1 / 1;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #c9b995;
  border-radius: 6px;
  background: #FFF9EF;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.2s ease, transform 0.25s ease;
}

.jg-dw-tile.filled { border-color: #8a7a5c; }
.jg-dw-tile.flip { transform: rotateX(360deg); }
.jg-dw-tile.correct { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.jg-dw-tile.present { background: #C98A2D; border-color: #C98A2D; color: #fff; }
.jg-dw-tile.absent  { background: #787C7E; border-color: #787C7E; color: #fff; }

.joe-dw-message {
  min-height: 1.4em;
  text-align: center;
  font-weight: 700;
  color: #9A3B26;
  margin: 4px 0 8px;
}

/* v1.0.2 mobile sizing fix: keyboard is container-relative too — rows are
   width: 100% and every key is flex: 1 1 0 with min-width: 0 (no max-width
   caps), so all ten keys always share the card's real width exactly. */
.joe-dw-keyboard { width: 100%; max-width: 500px; margin: 0 auto; }

.jg-dw-kb-row { display: flex; gap: 5px; margin-bottom: 5px; width: 100%; }

.jg-dw-key {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border: none;
  border-radius: 6px;
  background: #E7DCC8;
  color: #2B2320;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.jg-dw-key-wide { flex: 1.5 1 0; min-width: 0; font-size: 0.8rem; }
.jg-dw-key.correct { background: #2E7D32; color: #fff; }
.jg-dw-key.present { background: #C98A2D; color: #fff; }
.jg-dw-key.absent  { background: #787C7E; color: #fff; }

.joe-dw-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 4px;
  width: 100%;
  max-width: 420px;
}

.joe-dw-stats > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 10px;
  padding: 8px 4px;
}

.joe-dw-stats strong {
  display: block;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.3rem;
  color: #7B2D26;
}

.joe-dw-stats span { font-size: 0.75rem; color: #5c5148; text-transform: uppercase; letter-spacing: 0.04em; }

.joe-dw-end { text-align: center; margin-top: 14px; }

.joe-dw-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.15rem;
  color: #7B2D26;
  margin: 0 0 12px;
}

/* v1.0.2 mobile sizing fix: under 400px, give the games back the card's
   side padding and shrink board gaps / tile type / key height so a
   320px-wide phone still fits everything with room to spare. */
@media (max-width: 400px) {
  .jg-game,
  .joe-lb-wrap { padding: 14px 10px 18px; }
  .jg-title { font-size: 1.45rem; }
  .joe-dw-board { gap: 4px; }
  .jg-dw-row { gap: 4px; }
  .jg-dw-tile { font-size: 1.25rem; border-width: 2px; }
  .jg-dw-kb-row { gap: 4px; }
  .jg-dw-key { height: 50px; font-size: 0.92rem; }
  .jg-dw-key-wide { font-size: 0.7rem; }
}

/* ---------- Stackin' Wood ---------- */
/* v1.0.2 mobile sizing fix: same vw trap as the word board — the well was
   width: min(300px, 78vw). It is now container-relative (width: 100%,
   max-width: 300px) and the canvas CSS-scales to it (max-width: 100%,
   height: auto; its internal resolution set by JS is untouched). The
   side panel and touch buttons wrap inside the card on narrow screens. */

.jg-sw-layout {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.jg-sw-main { position: relative; width: 100%; max-width: 300px; min-width: 0; }

.joe-sw-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #FFF9EF;
  border: 3px solid #7B2D26;
  border-radius: 8px;
  touch-action: none;
}

.joe-sw-end {
  position: absolute;
  inset: 0;
  background: rgba(250, 243, 231, 0.94);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 8px;
}
.joe-sw-end[hidden] { display: none; }

.jg-sw-end-title {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.5rem;
  color: #7B2D26;
  margin: 0;
}

.joe-sw-final { margin: 0; font-weight: 700; }

.joe-sw-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.1rem;
  color: #7B2D26;
  margin: 0 0 6px;
}

.jg-sw-side { width: 150px; display: flex; flex-direction: column; gap: 8px; }

.jg-sw-stat {
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}

.jg-sw-stat strong { color: #7B2D26; }

.jg-sw-preview {
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
}

.jg-sw-preview span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5c5148;
  margin-bottom: 2px;
}

.jg-sw-preview canvas { width: 84px; height: 84px; max-width: 100%; }

.jg-sw-keys { font-size: 0.78rem; color: #5c5148; margin: 2px 0 0; line-height: 1.5; }

.jg-sw-touch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
}

.jg-sw-touch button {
  flex: 1 1 64px;
  min-width: 0;
  max-width: 92px;
  padding: 14px 6px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  color: #FAF3E7;
  background: #7B2D26;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.jg-sw-touch button:active { background: #C98A2D; }

@media (hover: hover) and (min-width: 760px) {
  .jg-sw-touch { display: none; }
}

/* v1.0.2 note: an earlier rule stacked the side panel (full width, same
   as the well) underneath the well on phones. v1.0.3 replaces that
   arrangement entirely — see the max-width: 640px block below. */

/*
 * v1.0.3 mobile playability fix (Stackin' Wood) — the v1.0.2 sizing fix
 * made the well fit the card's WIDTH, but the canvas then scaled to a
 * ~300x600 box: on a phone the well alone filled the whole screen, and
 * the stats, Start button and (worst) the touch controls fell below the
 * fold, so the owner had to scroll mid-game. On screens <= 640px the
 * layout is now driven by HEIGHT and everything a player needs sits in
 * the first screen:
 *   1. the side panel becomes a slim strip ABOVE the well (order: -1):
 *      Score/Lines/Level/Best as one 4-across grid row, then Next/Hold
 *      previews (~60px canvases) with the Start/Pause button inline;
 *   2. the canvas sizes by height (56vh, capped at its native 600px)
 *      with aspect-ratio holding its 1:2 shape, centered in a
 *      shrink-wrapped well so the game-over overlay still hugs it;
 *   3. the touch bar sits directly under the well and is sticky at the
 *      viewport bottom (cream card background + maroon top border), so
 *      the buttons stay reachable even if the page drifts a little;
 *   4. touch-action: none on the canvas and touch bar (the buttons
 *      already had it) so playing can't scroll or pull-refresh the page.
 * Desktop (> 640px) keeps the exact v1.0.2 behavior. The keyboard-hint
 * line is hidden on small screens — touch players have no keys.
 */
@media (max-width: 640px) {
  .jg-sw-layout { flex-direction: column; align-items: center; gap: 10px; }

  .jg-sw-side {
    order: -1;
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .jg-sw-stat {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 4px 2px;
    font-size: 0.78rem;
    text-align: center;
  }

  .jg-sw-preview { padding: 4px; }
  .jg-sw-preview canvas { width: 60px; height: 60px; }

  .jg-sw-side .joe-sw-start {
    grid-column: span 2;
    align-self: center;
    width: 100%;
    padding: 10px 8px;
    font-size: 0.95rem;
  }

  .jg-sw-keys { display: none; }

  .jg-sw-main { width: fit-content; max-width: 100%; margin: 0 auto; }

  .joe-sw-canvas {
    width: auto;
    height: min(56vh, 600px);
    height: min(56svh, 600px);
    aspect-ratio: 1 / 2;
    max-width: 100%;
    margin: 0 auto;
  }

  .jg-sw-touch {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #FAF3E7;
    border-top: 2px solid #7B2D26;
    padding: 8px 0 4px;
    margin-top: 10px;
    touch-action: none;
  }

  .jg-sw-touch button { min-height: 48px; }
}