.spelling-body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* CSS specificity quirk: an element's own display:flex/block rule beats the
   browser's default [hidden]{display:none} at equal specificity. Force it. */
[hidden]{
  display: none !important;
}

.sg-landing{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 80px;
  gap: 40px;
}

.sg-title{
  font-size: clamp(48px, 10vw, 88px);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.sg-actions{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 280px;
}

.sg-btn{
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.sg-btn:hover{ opacity: 0.88; }
.sg-btn:active{ transform: scale(0.98); }

.sg-btn-primary{
  background: var(--blue);
  color: #fff;
}

.sg-btn-secondary{
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.sg-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.sg-modal{
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  width: 100%;
  max-width: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sg-modal-close{
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.sg-modal-title{
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.sg-modal-error{
  font-size: 13px;
  color: var(--red);
  text-align: center;
  margin: 0;
}

.sg-auth-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-auth-form input{
  font-family: var(--font-en);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-main);
}
.sg-auth-form input:focus{ outline: 2px solid var(--blue); }

.sg-remember-device{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.sg-remember-device input{ width: auto; }

.sg-modal-divider{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.sg-modal-divider::before,
.sg-modal-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sg-btn-ghost{
  background: transparent;
  color: var(--muted);
  border: none;
  text-decoration: underline;
  padding: 8px;
}

/* --- Play screen --- */

/* Persistent "back to waves/games" link shown above the play screen itself
   (not inside .sg-play/.mg-play/.wc-play -- see play.js in each game for
   why: those containers get their innerHTML replaced wholesale for every
   screen state, which would wipe out a link placed inside them). Shared by
   all three games since they all load this stylesheet. */

.sg-play-topbar{
  max-width: 640px;
  margin: 16px auto 0;
  padding: 0 24px;
}

.sg-back-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.sg-back-link:hover{
  color: var(--blue);
  text-decoration: underline;
}
/* .sg-account-bar / .sg-avatar / .sg-dashboard-link now live in the
   site-wide css/style.css instead of here -- the account bar shows up on
   the marketing pages too (Home, Resources, Book Store, Contact), not just
   the game pages, so it belongs in the stylesheet every page already loads
   rather than duplicated per-stylesheet. Every page that used to get these
   classes from here already loads style.css first, so nothing else needs
   to change. */

.sg-play{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 24px 80px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.sg-progress{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.sg-audio-btn{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: transparent;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.sg-audio-btn:hover{ background: var(--bg-alt); }
.sg-audio-btn:active{ transform: scale(0.96); }

.sg-blanks{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.sg-blank{
  width: 44px;
  height: 54px;
  border-bottom: 3px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  text-transform: lowercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sg-blank.is-correct{
  border-color: var(--green);
  color: var(--green);
  background: rgba(30, 138, 60, 0.08);
}

.sg-blank.is-wrong{
  border-color: var(--red);
  color: var(--red);
  background: rgba(212, 43, 43, 0.12);
  opacity: 0.6;
}

/* Shown after a missed attempt reveals the correct spelling -- distinct
   from is-correct (which means the player typed it themselves) so it
   reads as "here's the answer", not as a self-earned green. */
.sg-blank.is-revealed{
  border-color: #e0a800;
  color: #e0a800;
  background: rgba(224, 168, 0, 0.1);
}

/* Visual gap for the space in a multi-word entry (e.g. "ice cream") --
   not a fill-in blank, just a bit of breathing room between the two words. */
.sg-blank-gap{
  width: 18px;
  height: 54px;
}

.sg-keyboard{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

.sg-key-row{
  display: flex;
  gap: 5px;
  width: 100%;
}

/* Keys size themselves as a share of the row's actual width (min-width: 0
   lets flex-basis shrink below content size) instead of a fixed px width --
   that's what let the 10-key top row overflow narrow phone screens before. */
.sg-key{
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}
.sg-key:hover{ background: var(--bg-alt); }
.sg-key:active{ transform: scale(0.94); }

.sg-key-wide{
  flex: 2 1 0;
  font-size: 12px;
}

.sg-submit{
  width: 100%;
  max-width: 200px;
}

/* --- Dashboard --- */

.sg-dashboard{
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

/* --- Profile panel: name/avatar + overall stat + editable fields, all in
   one card above the per-game level list. Deliberately a different shape
   from the level/wave lists below (one solid panel, not a grid of floating
   cards) so the dashboard reads as "your profile" rather than one more wave
   list -- see .sg-dash-group-panel / .sg-dash-level-row further down for
   how the level list itself is restyled to match that same distinction. */

.sg-profile-panel{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.sg-profile-top{
  display: flex;
  align-items: center;
  gap: 16px;
}

.sg-avatar-lg{
  width: 56px;
  height: 56px;
  font-size: 22px;
  flex-shrink: 0;
}

.sg-profile-heading{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sg-profile-heading .sg-dash-title{ margin-bottom: 2px; }
.sg-profile-heading .sg-dash-greeting{ margin-bottom: 2px; }
.sg-profile-heading .sg-dash-account{ margin: 0; }

.sg-dash-title{
  font-size: 20px;
  font-weight: 700;
}

.sg-dash-greeting{
  font-size: 14px;
  color: var(--muted);
}

.sg-dash-account{
  font-size: 12px;
  color: var(--muted);
}

.sg-profile-stat{
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.sg-profile-stat-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.sg-profile-stat-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.sg-profile-stat-value{
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}

.sg-profile-form{
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sg-profile-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.sg-profile-field input,
.sg-profile-field select{
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-main);
}
.sg-profile-field input:focus,
.sg-profile-field select:focus{
  outline: none;
  border-color: var(--blue);
}

.sg-profile-form-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

.sg-profile-form .sg-btn{
  padding: 10px 22px;
  font-size: 14px;
}

.sg-profile-saved{
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}

.sg-reset-btn{
  margin-top: 20px;
  width: 100%;
}

/* --- Per-game level list: grouped into one panel per game (Spelling /
   Matching / Word Choice) with hairline-divided rows inside, instead of a
   grid of separate floating cards -- so it doesn't read as just another
   wave-list grid (see .sg-wave-card further down). */

.sg-dash-levels{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sg-dash-group-panel{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.sg-dash-group{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-alt);
  margin: 0;
  padding: 10px 18px;
}
/* The Japanese game name appended after the English group heading (e.g.
   "MATCHING マッチングゲーム") needs its own reset -- .sg-dash-group's
   uppercase/letter-spacing/font-weight are meant for the English label,
   not Japanese text, which has no case and reads oddly with extra
   tracking between characters. */
.sg-dash-group-jp{
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 11px;
  margin-left: 8px;
  /* .jp-gloss defaults to display:block (see style.css) so it drops to
     its own line in the cramped spots it's normally used in -- but this
     heading has a whole panel-width row to itself, so it opts back into
     sitting inline right after the English group name. */
  display: inline;
}

.sg-dash-level-row{
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background-color 0.15s;
}
.sg-dash-level-row:hover{ background: var(--bg-main); }
.sg-dash-level-row.is-locked{ opacity: 0.6; cursor: default; }
.sg-dash-level-row.is-locked:hover{ background: none; }

/* Level circles -- replaces .sg-dash-level-row inside each dashboard game
   panel. One circle per level, easiest to advanced left-to-right (GAMES is
   pre-sorted by LEVEL_ORDER in dashboard.js). Ring color = access state,
   ring fill (--pct, a conic-gradient) = progress through that level. */
.sg-dash-level-circles{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 18px;
  border-top: 1px solid var(--border);
}

.sg-level-circle{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sg-level-ring{
  --ring-color: var(--blue);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color) calc(var(--pct, 0) * 1%), var(--border) 0);
  transition: transform 0.15s;
}
.sg-level-circle:hover .sg-level-ring{ transform: scale(1.07); }
.sg-level-circle.is-free .sg-level-ring{ --ring-color: var(--green); }
.sg-level-circle.is-locked .sg-level-ring{ --ring-color: var(--muted); }

.sg-level-ring-inner{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-level-ring-label{
  font-weight: 700;
  font-size: 13px;
  color: var(--ring-color, var(--blue));
}
.sg-level-circle.is-free .sg-level-ring-label{ color: var(--green); }
.sg-level-circle.is-locked .sg-level-ring-label{ color: var(--muted); }

.sg-level-circle-meta{
  font-size: 11px;
  color: var(--muted);
}

.sg-level-circle-star{
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgba(255,193,7,0.9);
  color: #7a5200;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sg-grade-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sg-grade-card:hover{ border-color: var(--blue); }
.sg-grade-card.is-locked{ opacity: 0.6; cursor: default; }
.sg-grade-card.is-locked:hover{ border-color: var(--border); }

.sg-grade-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sg-grade-name{
  font-weight: 600;
  font-size: 15px;
}

.sg-grade-badge{
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.sg-grade-badge.free{ background: rgba(30,138,60,0.12); color: var(--green); }
.sg-grade-badge.locked{ background: rgba(0,0,0,0.06); color: var(--muted); }

.sg-progress-track{
  height: 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  overflow: hidden;
}
.sg-progress-fill{
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
}

.sg-grade-meta{
  font-size: 12px;
  color: var(--muted);
}

.sg-grade-review{
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: #9a6b00;
  background: rgba(255,193,7,0.16);
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
}
.sg-grade-review:hover{ text-decoration: underline; }

/* --- Waves screen --- */

.sg-waves{
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.sg-wave-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.sg-wave-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sg-wave-card:hover{ border-color: var(--blue); }
.sg-wave-card.is-locked{ opacity: 0.55; cursor: default; }
.sg-wave-card.is-locked:hover{ border-color: var(--border); }

.sg-wave-name{
  font-weight: 600;
  font-size: 15px;
}

.sg-review-banner{
  background: rgba(255,193,7,0.10);
  border-color: #e8b400;
}
.sg-review-banner:hover{ border-color: #e8b400; }
.sg-review-banner .sg-wave-name{ color: #9a6b00; }

.sg-grade-badge.review{ background: rgba(255,193,7,0.20); color: #9a6b00; }

.sg-paywall-card{
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  cursor: default;
  border-color: var(--blue);
  background: rgba(43, 108, 212, 0.06);
}
.sg-paywall-card:hover{ border-color: var(--blue); }
.sg-paywall-card .sg-btn{ width: 100%; }

/* --- Verify-email / verify-login screens --- */

.sg-verify{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 80px;
  gap: 20px;
  max-width: 360px;
  margin: 0 auto;
}

/* Wraps an English line + its .jp-gloss translation as one unit, so the
   tight 4px gap between the two languages doesn't get swallowed by
   .sg-verify's own 20px gap (which should only separate distinct blocks --
   heading, body, form -- not the two lines of one bilingual label). */
.sg-verify-heading{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sg-verify-body{
  color: var(--muted);
  font-size: 14px;
  max-width: 320px;
}

.sg-verify-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sg-verify-note{
  font-size: 13px;
  color: var(--muted);
}

#sg-code-field{
  text-align: center;
  font-size: 22px;
  letter-spacing: 4px;
  font-family: var(--font-en);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-main);
}

/* ---------------------------------------------------------------------------
   Starred (missed-word) review list -- shared by all three games (Spelling,
   Matching, Word Choice), imported here since spelling.css is already the
   one stylesheet every game's pages link to. Shown after a wave's first
   random pass whenever any words were missed; blocks wave completion until
   every entry here is either retried-and-cleared or manually removed. */

.rv-starred-intro{
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--muted);
  max-width: 420px;
  margin: 0;
}

.rv-starred-intro-jp{
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--muted);
  max-width: 420px;
  margin: 4px 0 0;
}

.rv-starred-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.rv-starred-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
}

.rv-starred-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rv-starred-word{
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.rv-starred-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.rv-stars{
  color: #e0a800;
  letter-spacing: 1px;
}

.rv-starred-actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rv-starred-actions .sg-btn,
.rv-starred-actions .sg-btn-ghost{
  padding: 8px 14px;
  font-size: 13px;
}