/* =========================================================
   Miss Michele's Build-A-Word — shared site styles
   Used by index.html, game-template.html, and every page in /games
   ========================================================= */

:root{
  --bg-top:#bfe8ff;
  --bg-bot:#eaf8ff;
  --panel:#ffffff;
  --panel-2:#f2f8ff;
  --sun:#ffc93c;
  --sun-dim:#e2a020;
  --ink:#2b2b45;
  --muted:#7c81a3;
  --green:#5bc98a;
  --green-ink:#0f3d26;
  --red:#ff6b6b;
  --red-ink:#4a1414;
  --outline:#cfe9fa;

  /* Vivid "Choose letters. Spell the word." game-page palette */
  --game-blue:#127AAE;
  --game-orange:#F07D23;
  --game-orange-dark:#c15f11;
  --game-tan:#967E5A;
  --game-tan-dark:#6f5c3f;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;min-height:100%;
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bot) 45%);
  color:var(--ink);
  font-family:'Quicksand',sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:16px 14px 40px;
  min-height:100%;
}

/* ---------- SHARED HEADER ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.header-left{display:flex;align-items:center;gap:10px;min-width:0;}
h1{
  font-family:'Baloo 2',cursive;
  font-size:clamp(20px,4.2vw,34px);
  letter-spacing:0.5px;
  color:var(--sun-dim);
  margin:0;
  text-shadow:2px 2px 0 rgba(255,255,255,0.7);
  line-height:1.15;
}
.header-right{display:flex;gap:10px;flex-shrink:0;}
.back-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--panel);
  border:2px solid var(--sun);
  color:var(--ink);
  padding:11px 22px;
  border-radius:16px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  font-size:19px;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 4px 0 var(--sun-dim);
  text-decoration:none;
  white-space:nowrap;
}
.back-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-dim);}

.subtitle{
  text-align:center;
  color:var(--muted);
  font-weight:600;
  font-size:15px;
  margin:0 0 22px;
}

/* ---------- SCREENS ---------- */
.screen{display:none;}
.screen.active{display:block;}

/* ---------- CARD GRID (word banks + characters) ---------- */
.deck-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:18px;
}
.deck-card{
  position:relative;
  background:var(--panel);
  border-radius:20px;
  padding:0;
  overflow:hidden;
  box-shadow:0 6px 0 var(--outline);
  cursor:pointer;
  border:none;
  text-align:left;
  display:flex;flex-direction:column;
  touch-action:manipulation;
  transition:transform .1s ease, box-shadow .1s ease;
  text-decoration:none;
  color:inherit;
}
.deck-card:active{transform:translateY(4px);box-shadow:0 2px 0 var(--outline);}
.deck-cover{
  width:100%;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;
  background-size:cover;
  background-position:center;
  color:#fff;
  font-family:'Baloo 2',cursive;
}
.deck-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.deck-cover.character-cover{
  position:relative;
  background:var(--panel-2);
  overflow:hidden;
}
.deck-cover.character-cover img,
.deck-cover.character-cover svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.deck-info{padding:12px 14px 14px;}
.deck-title{
  font-family:'Baloo 2',cursive;
  font-size:17px;
  color:var(--ink);
  margin:0;
  line-height:1.2;
}

/* ---------- ROUND DOTS ---------- */
.round-track{
  display:none;
  gap:7px;flex-wrap:wrap;
  justify-content:center;
  margin:4px 0 14px;
}
.dot{
  width:18px;height:18px;border-radius:50%;
  border:3px solid var(--outline);
  background:#fff;
  transition:all .25s ease;
}
.dot.current{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,201,60,0.35);}
.dot.done{background:var(--sun);border-color:var(--sun);}

/* ---------- STATUS BAR ---------- */
.status-bar{
  display:none;justify-content:center;gap:26px;
  font-size:15px;color:var(--muted);
  margin-bottom:14px;
  font-weight:600;
}
.status-bar b{color:var(--ink);font-size:17px;}

/* ---------- LAYOUT: keyboard/word LEFT, stage RIGHT ---------- */
.game-layout{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 780px){
  .game-layout{grid-template-columns:1fr;}
  .stage-col{order:2;}
  .play-col{order:1;}
}

.play-col{
  background:var(--panel);
  border-radius:22px;
  padding:18px 16px 20px;
  box-shadow:0 6px 0 var(--outline);
}
.stage-col{
  padding:10px;
}

/* ---------- WORD DISPLAY (LARGE) ---------- */
.word-display{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;
  margin:6px 0 22px;
  font-family:'Baloo 2',cursive;
  font-size:clamp(34px,6.5vw,58px);
  letter-spacing:1px;
}
.letter-slot{
  min-width:0.8em;
  text-align:center;
  border-bottom:6px solid var(--outline);
  padding-bottom:2px;
  color:var(--ink);
}
.letter-slot.space{border-bottom:none;width:0.5em;}
.letter-slot.reveal{color:var(--green);border-bottom-color:var(--green);}
.letter-slot.missed{color:var(--red);border-bottom-color:var(--red);}

.keyboard-wrap{
  position:relative;
}
.next-wrap{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.next-wrap.active{display:flex;}
.keyboard{
  transition:opacity .25s ease;
}
.keyboard.dimmed{
  opacity:0.25;
}
.next-btn{
  background:var(--game-orange);
  color:#ffffff;
  border:none;
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:32px;
  letter-spacing:1px;
  padding:24px 64px;
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--game-orange-dark);
}
.next-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--game-orange-dark);}

/* ---------- KEYBOARD (LARGE) ---------- */
.keyboard{
  display:flex;flex-direction:column;
  gap:14px;
  align-items:stretch;
  user-select:none;
}
.kb-row{display:flex;justify-content:center;gap:12px;}
.key{
  flex:1 1 0;
  max-width:100px;
  min-width:40px;
  height:88px;
  border-radius:16px;
  border:none;
  background:var(--panel-2);
  color:var(--ink);
  font-family:'Baloo 2',cursive;
  font-weight:700;
  font-size:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:0 5px 0 var(--outline);
  transition:background .15s ease, transform .08s ease, opacity .2s ease, box-shadow .08s ease;
}
.key:active{transform:translateY(4px);box-shadow:0 1px 0 var(--outline);}
.key.correct{background:var(--green);color:var(--green-ink);box-shadow:0 5px 0 #3a9e68;}
.key.wrong{opacity:0.25;}
.key:disabled{cursor:default;opacity:0.55;}
.key.correct:disabled{opacity:1;}
.key.wrong:disabled{opacity:0.25;}

@media (max-width: 480px){
  .key{height:64px;font-size:26px;border-radius:12px;}
  .word-display{font-size:clamp(28px,9vw,40px);}
}

/* ---------- STAGE (character reveal) ---------- */
.stage-wrap{
  position:relative;
  width:100%;
  max-width:320px;
  aspect-ratio:4/5;
  margin:0 auto;
}
.stage-figure{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.stage-figure.ghost{
  opacity:0.28;
  filter:brightness(0);
  pointer-events:none;
  z-index:1;
}
.stage-figure:not(.ghost){
  z-index:2;
}
.stage-figure img.part-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .35s ease;
}
.stage-figure img.part-img.shown{opacity:1;}
.stage-figure svg{position:absolute;inset:0;width:100%;height:100%;}
.part{opacity:0;transform:scale(0.85);transform-origin:center;transition:opacity .35s ease, transform .35s ease;}
.part.shown{opacity:1;transform:scale(1);}

/* ---------- FINAL CELEBRATION SCREEN ---------- */
.final-screen{
  position:fixed;inset:0;
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bot) 45%);
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
  z-index:60;
}
.final-screen.active{display:flex;}
.final-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  max-width:900px;
  width:100%;
  flex-wrap:wrap;
}
.final-text{
  text-align:center;
  flex:1 1 260px;
}
.final-text h2{
  font-family:'Baloo 2',cursive;
  font-size:clamp(52px,12vw,96px);
  color:var(--sun-dim);
  margin:0 0 22px;
  text-shadow:3px 3px 0 rgba(255,255,255,0.7);
}
.final-btn-row{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;}
.final-figure-wrap{
  flex:1 1 260px;
  max-width:300px;
}
.link-btn{
  background:none;border:none;
  color:var(--muted);
  font-family:'Quicksand',sans-serif;
  font-weight:700;
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
  padding:6px;
}
a.link-btn{display:inline-block;}

/* ---------- OVERLAY / MODAL ---------- */
.overlay{
  position:fixed;inset:0;
  background:rgba(43,43,69,0.55);
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  z-index:50;
}
.overlay.active{display:flex;}
.modal{
  background:var(--panel);
  border-radius:22px;
  padding:28px 24px;
  max-width:460px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 10px 0 var(--outline);
}
.modal h2{
  font-family:'Baloo 2',cursive;
  color:var(--sun-dim);
  font-size:26px;
  margin:0 0 12px;
}
.modal h3{
  font-family:'Baloo 2',cursive;
  color:var(--sun-dim);
  font-size:18px;
  margin:0 0 4px;
}
.modal p{color:var(--muted);font-size:15px;line-height:1.5;font-weight:600;}
.modal .word-reveal{color:var(--ink);font-weight:800;}
.modal hr{border:none;border-top:2px solid var(--outline);margin:24px 0;}
.btn{
  display:inline-block;
  background:var(--sun);
  color:#3a2905;
  border:none;
  font-weight:700;
  font-family:'Baloo 2',cursive;
  padding:13px 24px;
  border-radius:14px;
  font-size:17px;
  cursor:pointer;
  margin-top:10px;
  box-shadow:0 4px 0 var(--sun-dim);
  text-decoration:none;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-dim);}
.btn.secondary{
  background:var(--panel-2);
  color:var(--ink);
  box-shadow:0 4px 0 var(--outline);
}

/* ---------- FORMS ---------- */
label{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px;font-weight:700;}
textarea, input[type=number], input[type=text]{
  width:100%;
  background:var(--panel-2);
  border:2px solid var(--outline);
  color:var(--ink);
  border-radius:12px;
  padding:10px;
  font-family:'Quicksand',sans-serif;
  font-weight:600;
  font-size:14px;
}
textarea{min-height:110px;resize:vertical;}
input[type=file]{
  color:var(--muted);font-size:13px;
  width:100%;
}
.img-list{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-direction:column;gap:6px;
}
.img-list li{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);
  border-radius:10px;padding:6px 8px;
}
.img-list img{width:34px;height:34px;object-fit:cover;border-radius:6px;background:#eee;}
.img-list .stage-num{font-size:12px;color:var(--sun-dim);min-width:16px;font-weight:800;}
.img-list .name{flex:1;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.mini-btn{
  background:#fff;border:2px solid var(--outline);color:var(--muted);
  border-radius:8px;width:28px;height:28px;font-size:13px;cursor:pointer;
}
.mini-btn:active{transform:scale(0.9);}
.settings-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.hint{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600;}
.form-error{font-size:13px;color:var(--red);font-weight:700;margin-top:6px;display:none;}
.form-error.active{display:block;}

/* =========================================================
   GAME PAGE THEME — "Choose letters. Spell the word." look
   Scoped to <body class="game-page"> so the home page (word
   bank picker) keeps its own softer look.
   ========================================================= */
html.game-page{
  background:var(--game-blue);
}
body.game-page{
  background:var(--game-blue);
}
body.game-page #gameScreen > header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
}
body.game-page #gameScreen > header .header-left{
  grid-column:1;
  justify-self:start;
}
body.game-page #gameScreen > header .header-right{
  grid-column:3;
  justify-self:end;
}
body.game-page .game-tagline{
  grid-column:2;
  text-align:center;
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:clamp(16px,3vw,28px);
  color:#ffffff;
  text-shadow:1px 2px 0 rgba(0,0,0,0.15);
  margin:0;
  white-space:nowrap;
}
@media (max-width: 640px){
  body.game-page #gameScreen > header{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  body.game-page .game-tagline{
    order:3;
    flex-basis:100%;
    white-space:normal;
    margin-top:10px;
  }
}
body.game-page .back-btn{
  background:var(--game-orange);
  color:#ffffff;
  border:none;
  box-shadow:0 4px 0 var(--game-orange-dark);
}
body.game-page .back-btn:active{box-shadow:0 1px 0 var(--game-orange-dark);}

body.game-page .play-col{
  background:transparent;
  box-shadow:none;
  padding:18px 0 20px;
}

body.game-page .letter-slot{
  color:#ffffff;
  border-bottom-color:rgba(255,255,255,0.45);
}
body.game-page .letter-slot.reveal{
  color:#ffffff;
  border-bottom-color:#ffffff;
}
body.game-page .letter-slot.missed{
  color:#ffd27a;
  border-bottom-color:#ffd27a;
}

body.game-page .key{
  background:var(--game-orange);
  color:#ffffff;
  box-shadow:0 5px 0 var(--game-orange-dark);
}
body.game-page .key:active{box-shadow:0 1px 0 var(--game-orange-dark);}
body.game-page .key.correct{
  background:var(--green);
  color:var(--green-ink);
  box-shadow:0 5px 0 #3a9e68;
}
body.game-page .key.wrong{
  background:var(--game-tan);
  color:#ffffff;
  opacity:1;
  box-shadow:0 5px 0 var(--game-tan-dark);
}
body.game-page .key:disabled{opacity:1;}
body.game-page .key.correct:disabled{opacity:1;}
body.game-page .key.wrong:disabled{opacity:1;}

/* ---------- FINAL SCREEN (game-page theme) ---------- */
body.game-page .final-screen{
  background:var(--game-blue);
}
body.game-page .final-text h2{
  color:#ffffff;
  text-shadow:3px 4px 0 rgba(0,0,0,0.15);
}
body.game-page .final-btn-row{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
body.game-page .final-btn-row .btn{
  background:var(--game-orange);
  color:#ffffff;
  box-shadow:0 4px 0 var(--game-orange-dark);
}
body.game-page .final-btn-row .btn:active{
  box-shadow:0 1px 0 var(--game-orange-dark);
}
body.game-page .final-btn-row .btn.secondary{
  background:var(--panel-2);
  color:var(--ink);
  box-shadow:0 4px 0 var(--outline);
}
body.game-page .final-btn-row .btn.secondary:active{
  box-shadow:0 1px 0 var(--outline);
}

/* =========================================================
   HOME PAGE THEME — word bank picker
   Scoped to <body class="home-page"> so the character-picker
   screen inside game pages (which reuses .deck-card/.deck-cover)
   keeps its own look.
   ========================================================= */
html.home-page,
body.home-page{
  background:var(--game-blue);
}
body.home-page header{
  margin-bottom:4px;
}
body.home-page h1{
  color:#ffffff;
  text-shadow:1px 2px 0 rgba(0,0,0,0.15);
  font-size:clamp(20px,3.6vw,30px);
}
body.home-page .subtitle{
  color:rgba(255,255,255,0.8);
  font-weight:600;
}
body.home-page .deck-grid{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:20px;
}
body.home-page .deck-card{
  border-radius:14px;
  box-shadow:0 3px 10px rgba(9,40,58,0.25);
  transition:transform .12s ease, box-shadow .12s ease;
}
body.home-page .deck-card:active{
  transform:translateY(2px);
  box-shadow:0 1px 4px rgba(9,40,58,0.25);
}
body.home-page .deck-cover{
  aspect-ratio:2.2/1;
  font-size:32px;
}
body.home-page .deck-info{
  padding:14px 16px 18px;
  text-align:center;
}
body.home-page .deck-title{
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}