/* Kids Word Builder — bright, chunky, friendly */
:root{
  --bg:#F8FCFF;
  --ink:#102027;
  --brand:#7AD6F8;
  --brand-2:#FFD166;
  --brand-3:#FF8AAE;
  --ok:#21c55d;
  --bad:#ef4444;
  --cell:#ffffff;
  --grid:#c7d9eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(60vw 60vw at -10% -10%, #EAF7FF 0%, transparent 60%),
    radial-gradient(60vw 60vw at 110% -10%, #FFF3E1 0%, transparent 60%),
    radial-gradient(60vw 60vw at 110% 110%, #F6FFF2 0%, transparent 60%),
    var(--bg);
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; position:sticky; top:0; z-index:3;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand .logo{width:40px; height:40px}
.brand h1{font-family:"Fredoka",sans-serif; font-weight:900; margin:0; color:#0b2a3b; text-shadow:0 2px 0 rgba(255,255,255,.6)}

.actions{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.btn{border:none; background:white; padding:.6rem .9rem; border-radius:999px; font-weight:900; cursor:pointer; box-shadow:var(--shadow)}
.btn.primary{background:#0ea5e9; color:white}
.toggle{display:flex; align-items:center; gap:.4rem; font-weight:900}

.wrap{display:grid; grid-template-columns:1fr 280px; gap:1rem; padding:1rem; max-width:1200px; margin:0 auto}
@media (max-width: 950px){ .wrap{grid-template-columns:1fr} }

.board{display:grid; gap:2px; background:var(--grid); padding:6px; border-radius:16px; box-shadow:var(--shadow); touch-action:manipulation}
.cell{
  width:min(8.5vw,52px); height:min(8.5vw,52px); display:grid; place-items:center; background:var(--cell);
  border-radius:10px; font-weight:900; position:relative; user-select:none;
}
.cell--dw{background:#e7f8ff}
.cell--dl{background:#fff6e5}
.cell--tw{background:#ffeaf1}
.cell--tl{background:#eafff0}
.cell.invalid{outline:3px solid var(--bad)}
.cell.valid{outline:3px solid var(--ok)}

.tile{
  width:44px; height:44px; background:white; border-radius:10px; display:grid; place-items:center; font-weight:900;
  box-shadow:var(--shadow); cursor:grab; touch-action:none; position:relative;
}
.tile:active{cursor:grabbing}
.tile .pts{position:absolute; bottom:4px; right:6px; font-size:.65rem; opacity:.7}

.rack-wrap{position:sticky; bottom:0; background:rgba(255,255,255,.9); padding:1rem; box-shadow:0 -8px 24px rgba(0,0,0,.06);}
.rack{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; min-height:60px}

.sidebar{display:flex; flex-direction:column; gap:1rem}
.score-card,.bag-card,.last-play{background:white; padding:1rem; border-radius:16px; box-shadow:var(--shadow)}
.last-play ul{margin:.5rem 0 0; padding-left:1rem}
.legend{margin-top:.5rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:80px;
  background:#0ea5e9; color:white; padding:.6rem .9rem; border-radius:12px; box-shadow:var(--shadow); font-weight:900;
}