:root{
  --green:#58cc5a; --yellow:#ffc01e; --gray:#aab4c2;
  --tile-border:#dbe2ec; --ink:#3a4a5c; --key:#eef2f8; --key-shadow:#cfd8e6;
  --tile:54px; --tilegap:7px; --tilefont:27px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Fredoka','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#bdeaff 0%,#dcf3ff 35%,#fff0fb 100%);
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.app{
  width:100%; max-width:460px; height:100vh; height:100dvh; max-height:820px;
  background:#fff; border-radius:24px; box-shadow:0 14px 36px rgba(80,120,170,0.18);
  padding:10px 14px; display:flex; flex-direction:column; gap:7px; overflow:hidden;
}
.app > *{ flex:0 0 auto; }
.banner{ background:#fff3cd; color:#8a6d00; border:1px solid #ffe39a; border-radius:10px;
  padding:5px 10px; font-size:12.5px; font-weight:600; text-align:center; }
header{ display:flex; align-items:center; justify-content:space-between; }
h1{ font-size:26px; margin:0; font-weight:700; color:#5b6cff; letter-spacing:.5px; }
.top-btns{ display:flex; gap:6px; }
.icon-btn{ border:none; background:var(--key); width:38px; height:38px; border-radius:12px;
  font-size:18px; cursor:pointer; box-shadow:0 3px 0 var(--key-shadow); transition:transform .08s; }
.icon-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--key-shadow); }

.levels{ display:flex; gap:7px; }
.level{ flex:1; border:none; border-radius:14px; padding:7px 4px; font-family:inherit;
  font-weight:600; font-size:14px; color:#fff; cursor:pointer; opacity:.55;
  transition:transform .08s, opacity .15s; box-shadow:0 4px 0 rgba(0,0,0,.12); line-height:1.05; }
.level small{ display:block; font-weight:500; font-size:10px; opacity:.95; }
.level:active{ transform:translateY(2px); }
.level.active{ opacity:1; transform:translateY(-1px) scale(1.02); }
.level[data-lvl="latt"]{ background:#58cc5a; }
.level[data-lvl="mellan"]{ background:#ff9f1c; }
.level[data-lvl="svar"]{ background:#ff5d8f; }

.mascot{ display:flex; align-items:center; gap:8px; }
.owl{ font-size:34px; flex-shrink:0; animation:bob 2.5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.bubble{ position:relative; background:#f3f7ff; border:2px solid #e2ebfb; border-radius:14px;
  padding:7px 12px; font-size:15px; font-weight:500; color:#445; flex:1; line-height:1.2; }
.bubble::before{ content:''; position:absolute; left:-9px; top:13px; border:7px solid transparent; border-right-color:#e2ebfb; }

.hints{ display:flex; gap:7px; align-items:center; justify-content:center; }
.hint-btn{ border:none; background:#fff4d6; color:#a9791a; font-family:inherit; font-weight:600;
  font-size:13px; padding:6px 12px; border-radius:12px; cursor:pointer; box-shadow:0 3px 0 #f0e0b0; }
.hint-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #f0e0b0; }
.hint-pic{ font-size:26px; min-width:30px; text-align:center; }
.hint-img{ height:38px; width:38px; object-fit:contain; vertical-align:middle; }

.board{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:var(--tilegap);
  align-items:center; justify-content:center; }
.row{ display:flex; gap:var(--tilegap); }
.tile{ width:var(--tile); height:var(--tile); border:3px solid var(--tile-border); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:var(--tilefont); font-weight:700;
  text-transform:uppercase; background:#fff; color:var(--ink); user-select:none; }
.row.active .tile{ border-color:#c2d0e6; }
.tile.filled{ animation:pop .12s ease; border-color:#9fb3d1; }
@keyframes pop{ 0%{ transform:scale(.85); } 100%{ transform:scale(1); } }
.tile.reveal{ animation:flip .5s ease forwards; }
@keyframes flip{ 0%{ transform:rotateX(0);} 45%{ transform:rotateX(90deg);} 100%{ transform:rotateX(0);} }
.tile.correct{ background:var(--green); border-color:var(--green); color:#fff; }
.tile.present{ background:var(--yellow); border-color:var(--yellow); color:#fff; }
.tile.absent{ background:var(--gray); border-color:var(--gray); color:#fff; }
.row.win .tile{ animation:dance .6s ease; }
@keyframes dance{ 0%,100%{ transform:translateY(0);} 30%{ transform:translateY(-12px);} 60%{ transform:translateY(0);} }
.row.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 20%,60%{ transform:translateX(-7px);} 40%,80%{ transform:translateX(7px);} }

.keyboard{ display:flex; flex-direction:column; gap:5px; align-items:center; }
.krow{ display:flex; gap:4px; justify-content:center; width:100%; }
.key{ flex:1 1 0; max-width:42px; height:clamp(38px,6.2vh,46px); border:none; border-radius:9px;
  background:var(--key); color:var(--ink); font-family:inherit; font-weight:600;
  font-size:clamp(15px,4.4vw,19px); cursor:pointer; box-shadow:0 3px 0 var(--key-shadow); touch-action:manipulation; }
.key:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--key-shadow); }
.key.wide{ flex:1 1 0; max-width:none; font-size:14px; }
.key.enter{ background:#58cc5a; color:#fff; box-shadow:0 3px 0 #3ea641; }
.key.del{ background:#ffd0d0; color:#c0392b; box-shadow:0 3px 0 #f0b0b0; }
.key.correct{ background:var(--green); color:#fff; box-shadow:0 3px 0 #3ea641; }
.key.present{ background:var(--yellow); color:#fff; box-shadow:0 3px 0 #d8a014; }
.key.absent{ background:var(--gray); color:#fff; box-shadow:0 3px 0 #8d97a6; }

.footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.legend{ display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:#7c8ca0; font-weight:500; }
.legend span{ display:flex; align-items:center; gap:3px; }
.swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.swatch.g{ background:var(--green); }
.swatch.y{ background:var(--yellow); }
.swatch.x{ background:var(--gray); }
.new-btn{ border:none; background:#5b6cff; color:#fff; font-family:inherit; font-weight:600;
  font-size:15px; padding:9px 18px; border-radius:13px; cursor:pointer; box-shadow:0 4px 0 #4453d6; white-space:nowrap; }
.new-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #4453d6; }
.daily-status{ font-size:12.5px; color:#7c8ca0; font-weight:600; text-align:right; line-height:1.3; }
.daily-status b{ color:#5b6cff; }

.overlay{ position:fixed; inset:0; background:rgba(40,55,75,.55); display:flex; align-items:center;
  justify-content:center; padding:16px; z-index:60; }
.overlay.hidden{ display:none; }
.sheet{ background:#fff; border-radius:20px; max-width:680px; width:100%; max-height:90dvh; overflow:auto;
  padding:22px 22px 26px; position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.sheet h2{ margin:0 0 4px; color:#5b6cff; font-size:22px; }
.sheet .close{ position:absolute; top:14px; right:14px; border:none; background:#eef2f8; width:34px;
  height:34px; border-radius:10px; font-size:16px; cursor:pointer; }
.note{ background:#fff8e6; border:1px solid #ffe3a3; border-radius:12px; padding:12px 14px;
  font-size:13.5px; line-height:1.45; color:#6b5a2a; margin:10px 0 18px; }
.note b{ color:#5a4a1a; }
.wordcols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.wordcols h3{ margin:0 0 8px; font-size:15px; color:#3a4a5c; }
.subhead{ margin:12px 0 6px; font-size:13px; color:#7c8ca0; font-weight:600; }
.wl{ display:flex; flex-wrap:wrap; gap:6px; }
.wl span{ background:#f1f5fb; border-radius:8px; padding:4px 8px; font-size:13px; font-weight:600;
  color:#46566a; text-transform:uppercase; }
.wl span.ans{ background:#e3f7e4; color:#2f7a31; }

#confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.confetti-piece{ position:fixed; top:-14px; width:10px; height:14px; border-radius:2px; }
@keyframes fall{ to{ transform:translateY(106vh) rotate(720deg); opacity:.7; } }

@media (max-height:680px){
  .owl{ font-size:28px; } .bubble{ font-size:14px; padding:6px 10px; }
  h1{ font-size:23px; } .level{ font-size:13px; padding:6px 4px; }
}