:root{
  --bg:#f7f3eb;
  --card:#fffdf8;
  --ink:#1f2933;
  --muted:#697386;
  --line:#ded7cc;
  --green:#00e600;
  --yellow:#ffff00;
  --grey:#8b929c;
  --fixed-tile:#1f2933;
  --accent:#293241;
  --danger:#b23b3b;
  --focus:#f5c542;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;-webkit-text-size-adjust:100%;touch-action:manipulation}
body{
  margin:0;
  font-family:"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#fffdf8,#f4eee3);
  color:var(--ink);
  min-height:100svh;
  overscroll-behavior:none;
}
button,input,textarea,select{font:inherit;font-size:16px}
button{touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:focus{outline:none}
button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.app{
  width:min(500px,100%);
  min-height:100svh;
  margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.topbar{display:grid;grid-template-columns:46px 1fr 76px;align-items:center;gap:10px;margin:4px 0 12px;flex:0 0 auto}.brand-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;line-height:1}.brand-logo{display:block;width:min(210px,52vw);height:auto;max-height:58px;object-fit:contain;margin:0 auto}.brand-wrap p{margin:2px 0 0;color:var(--muted);font-size:15px;text-align:center;line-height:1.15;font-weight:650;white-space:nowrap}
.topbar h1{font-size:clamp(28px,8vw,38px);line-height:1;margin:0;letter-spacing:-.9px;text-align:center}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:16px;text-align:center;line-height:1.15}
.icon-btn,.clue-btn,.primary,.secondary{border:0;border-radius:999px;padding:10px 14px;font-weight:850;cursor:pointer;min-height:44px;font-size:16px}
.icon-btn{width:44px;height:44px;background:var(--card);box-shadow:0 5px 20px #0001;color:#0786ff}
.clue-btn{background:var(--accent);color:#fff;min-width:72px}
.clue-btn:disabled,.key:disabled{opacity:.52;cursor:not-allowed}
.timer-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 30px #0000000c;flex:0 0 auto}
.timer-card span{font-size:16px;color:var(--muted);line-height:1.1}
.timer-card strong{font-size:clamp(24px,7vw,32px);line-height:1;font-weight:950}
.board-wrap{position:relative;margin:13px 0 7px;flex:0 0 auto}
.skeleton{position:absolute;inset:0;z-index:5;min-height:300px;border-radius:24px;background:linear-gradient(110deg,#fff8,#fff,#fff8);border:1px solid var(--line);display:grid;place-items:center;font-weight:900;color:var(--muted);animation:pulse 1.2s infinite}
.board{display:grid;gap:8px;transition:opacity .25s ease}
.board.is-hidden{opacity:0;min-height:300px}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tile{height:clamp(50px,13.7vw,58px);border:2px solid var(--line);border-radius:14px;background:var(--card);display:grid;place-items:center;font-size:clamp(25px,7.2vw,33px);font-weight:950;text-transform:uppercase;box-shadow:0 5px 14px #0000000a;transition:transform .18s,border-color .18s,outline-color .18s;background-clip:padding-box}
.tile.locked{background:var(--fixed-tile);color:#fff;border-color:var(--fixed-tile)}
.tile.active:not(.locked){border-color:var(--accent);box-shadow:0 0 0 3px var(--focus),0 5px 14px #0000000a;transform:translateY(-1px)}
.tile.correct{background:var(--green);border-color:var(--green);color:#fff;box-shadow:none}
.tile.present{background:var(--yellow);border-color:var(--yellow);color:#fff;box-shadow:none}
.tile.absent{background:var(--grey);border-color:var(--grey);color:#fff;box-shadow:none}
.tile.clue:not(.correct):not(.present):not(.absent){border-color:var(--focus);box-shadow:0 0 0 3px rgba(245,197,66,.55),0 5px 14px #0000000a}
.flip{animation:flip .48s ease}
.row.wave .tile:not(.locked){animation:wave .55s ease infinite}
.row.shake{animation:shake .35s ease}
.message{min-height:28px;margin:3px 0 7px;text-align:center;font-weight:900;font-size:16px;color:var(--danger);line-height:1.2;flex:0 0 auto}
.keyboard{display:grid;gap:8px;margin-top:10px;flex:0 0 auto;padding-bottom:4px;width:100%}
.kb-row{display:flex;gap:4px;justify-content:center;width:100%}
.key{border:0;background:#fff;border-bottom:4px solid #d4cec4;border-radius:13px;flex:1 1 0;min-width:0;max-width:none;height:54px;padding:0 2px;font-size:20px;font-weight:950;color:var(--ink);cursor:pointer;line-height:1;display:grid;place-items:center;box-shadow:0 2px 0 #00000008}
.key.big{flex:1.75 1 0;max-width:none;background:var(--accent);color:#fff;border-bottom-color:#121722;font-size:18px;letter-spacing:.2px}
.key.correct{background:var(--green);color:#fff}
.key.present{background:var(--yellow);color:#fff}
.key.absent{background:var(--grey);color:#fff}
.modal{border:0;background:transparent;padding:12px;width:min(430px,94vw);max-height:92svh;overflow:auto}
.modal::backdrop{background:#0008}
.modal-card{position:relative;background:var(--card);border-radius:26px;padding:24px;box-shadow:0 24px 80px #0004}
.modal-card h2{margin-top:0;font-size:clamp(28px,8vw,36px);line-height:1.05}
.result-card{text-align:left}
.result-card h2{margin-bottom:12px}
.result-card p{margin:0 0 8px;color:#111;font-weight:650}
.result-card .primary,.result-card .secondary{min-height:52px;border-radius:999px}

.modal-card p,.modal-card li{font-size:16px;line-height:1.45}
.modal-card li{margin:8px 0;color:var(--muted)}
.close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:28px;cursor:pointer}
.primary{background:var(--accent);color:#fff;width:100%;margin:8px 0;font-size:18px}
.secondary{background:#eee7dc;width:100%;font-size:18px;color:#0786ff}
.result-grid{display:grid;grid-template-columns:repeat(5,clamp(34px,8.2vw,42px));gap:7px;margin:16px auto 14px;background:#f3eee6;border-radius:18px;padding:15px;width:max-content;max-width:100%;box-shadow:inset 0 1px 0 #ffffff80}
.mini-tile{width:clamp(34px,8.2vw,42px);height:clamp(34px,8.2vw,42px);border-radius:9px;background:#d8d8d8;box-shadow:inset 0 1px 0 #ffffff80}
.mini-tile.correct{background:#00e600}
.mini-tile.present{background:var(--yellow)}
.mini-tile.absent{background:#d8d8d8}
.share-text{white-space:pre-wrap;background:#f3eee6;border-radius:14px;padding:10px 12px;text-align:left;overflow:auto;font-size:13px;line-height:1.25;max-height:92px;color:#293241;margin:0 0 10px}
@keyframes pulse{50%{opacity:.55}}
@keyframes flip{50%{transform:rotateX(90deg)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes wave{50%{transform:translateY(-6px)}}
@media (max-height:720px){
  .app{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .topbar{margin-bottom:8px}.brand-logo{width:min(220px,56vw);max-height:56px}.topbar h1{font-size:28px}.brand-wrap p{font-size:14px}
  .icon-btn,.clue-btn{min-height:40px;height:40px}.icon-btn{width:40px}
  .timer-card{padding:9px 12px}.timer-card span{font-size:15px}.timer-card strong{font-size:25px}
  .board-wrap{margin:9px 0 4px}.board{gap:6px}.row{gap:6px}
  .tile{height:clamp(45px,12.4vw,52px);font-size:clamp(23px,6.7vw,29px);border-radius:12px}
  .message{min-height:22px;margin:2px 0 5px;font-size:15px}
  .keyboard{gap:6px;margin-top:8px}.kb-row{gap:4px}.key{height:48px;font-size:19px;border-radius:12px}.key.big{font-size:17px}
}
@media (max-width:380px){
  .app{padding-left:10px;padding-right:10px}
  .brand-logo{width:min(210px,58vw);max-height:52px}
  .row{gap:6px}.board{gap:6px}
  .tile{height:clamp(45px,13vw,52px);font-size:24px}
  .key{height:48px;font-size:19px;border-radius:12px}.key.big{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* MIDDIO logo placement polish */
.topbar{display:grid;grid-template-columns:46px 1fr 76px;align-items:center;gap:10px;margin:4px 0 12px;flex:0 0 auto}
.brand-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;line-height:1}
.brand-logo{display:block;width:min(210px,52vw);height:auto;max-height:58px;object-fit:contain;margin:0 auto}
.brand-wrap p{margin:2px 0 0;color:var(--muted);font-size:15px;text-align:center;line-height:1.15;font-weight:650;white-space:nowrap}
@media (max-height:720px){
  .brand-logo{width:min(190px,50vw);max-height:48px}
  .brand-wrap p{font-size:13px}
}
@media (max-width:380px){
  .brand-logo{width:min(180px,50vw);max-height:44px}
  .brand-wrap p{font-size:12px}
}


/* Hint icon button */
.clue-btn{display:grid;place-items:center;padding:0;min-width:72px;width:72px;height:44px;background:var(--accent);color:#fff;border-radius:999px}
.clue-btn .hint-icon{display:grid;place-items:center;width:24px;height:24px}
.clue-btn svg{display:block;width:24px;height:24px;stroke:#f5c542;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.clue-btn:disabled svg{stroke:#e8d8a3}
@media (max-height:720px){.clue-btn{width:64px;min-width:64px;height:40px}.clue-btn .hint-icon,.clue-btn svg{width:22px;height:22px}}


/* Premium polished hint button */
.clue-btn{
  position:relative;
  overflow:hidden;
  width:74px;
  min-width:74px;
  height:46px;
  border-radius:999px;
  background:linear-gradient(180deg,#313c4e 0%, #243041 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(31,41,51,.18), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.clue-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}
.clue-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 6px 16px rgba(31,41,51,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.clue-btn .hint-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(245,197,66,.18), rgba(245,197,66,.02) 70%);
}
.clue-btn svg{
  width:24px;
  height:24px;
  stroke:#f5c542;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
.clue-btn:not(:disabled) svg path:first-child,
.clue-btn:not(:disabled) svg path:nth-child(2){
  stroke:#ffd45f;
}
.clue-btn:not(:disabled):after{
  content:"";
  position:absolute;
  top:7px;
  left:13px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  opacity:.6;
  pointer-events:none;
}
.clue-btn:disabled{
  background:linear-gradient(180deg,#9aa0aa 0%, #8d949e 100%);
  box-shadow:none;
}
.clue-btn:disabled .hint-icon{background:transparent}
.clue-btn:disabled svg{stroke:#efe3b7;opacity:.9;filter:none}
@media (max-height:720px){
  .clue-btn{width:68px;min-width:68px;height:42px}
  .clue-btn .hint-icon{width:24px;height:24px}
  .clue-btn svg{width:22px;height:22px}
}


/* How To Play redesign */
.howto-modal{width:min(520px,94vw)}
.howto-card{
  background:#121213;
  color:#ffffff;
  border-radius:18px;
  padding:26px 24px 22px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.howto-card h2{
  margin:0 0 12px;
  font-size:clamp(28px,7vw,40px);
  line-height:1.02;
  color:#fff;
  letter-spacing:-.02em;
}
.howto-intro{
  margin:0 0 16px;
  color:#f4f4f4;
  font-size:clamp(20px,5.7vw,26px);
  line-height:1.24;
}
.howto-rules{
  margin:0 0 18px;
  padding-left:26px;
}
.howto-rules li{
  margin:10px 0;
  color:#e7e7e7;
  font-size:16px;
  line-height:1.4;
}
.howto-rules strong,.howto-example strong,.howto-note strong{color:#ffffff}
.howto-subtitle{
  margin:10px 0 14px;
  font-size:18px;
  font-weight:800;
  color:#ffffff;
}
.howto-example{
  padding:12px 0 14px;
  border-top:1px solid rgba(255,255,255,.11);
}
.howto-example:first-of-type{border-top:0;padding-top:0}
.howto-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.howto-tile{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:2px solid #3a3a3c;
  color:#fff;
  background:transparent;
  font-size:38px;
  font-weight:800;
  text-transform:uppercase;
  user-select:none;
}
.howto-tile.locked{background:#1f2933;border-color:#1f2933}
.howto-tile.correct{background:#00e600;border-color:#00e600}
.howto-tile.present{background:#ffff00;border-color:#ffff00}
.howto-tile.absent{background:#3a3a3c;border-color:#3a3a3c}
.howto-example p{
  margin:0;
  color:#f1f1f1;
  font-size:15px;
  line-height:1.45;
}
.howto-note{
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#d6d6d6;
  font-size:14px;
  line-height:1.45;
}
.howto-close{
  color:#ffffff;
  opacity:.85;
}
.howto-close:hover{opacity:1}
@media (max-width:480px){
  .howto-card{padding:22px 18px 18px}
  .howto-rules{padding-left:24px}
  .howto-tile{width:54px;height:54px;font-size:31px}
  .howto-row{gap:6px}
  .howto-intro{font-size:18px}
}
@media (max-width:380px){
  .howto-tile{width:48px;height:48px;font-size:27px}
  .howto-example p,.howto-rules li{font-size:14px}
}


/* Mobile keyboard ENTER text fit fix */
.key.big{
  font-size:16px;
  letter-spacing:0;
  white-space:nowrap;
}
@media (max-width:480px){
  .key.big{
    font-size:14px;
    letter-spacing:-.2px;
  }
}
@media (max-width:380px){
  .key.big{
    font-size:13px;
    letter-spacing:-.35px;
  }
}
@media (max-height:720px){
  .key.big{
    font-size:13px;
    letter-spacing:-.35px;
  }
}


/* Polished How-To icon button */
.help-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  background:linear-gradient(180deg,#fffdfa 0%, #f4efe4 100%);
  border:1px solid rgba(41,50,65,.08);
  box-shadow:0 10px 24px rgba(31,41,51,.10), inset 0 1px 0 rgba(255,255,255,.85);
  color:#2f6df6;
  transition:transform .16s ease, box-shadow .16s ease;
}
.help-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  pointer-events:none;
}
.help-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 6px 16px rgba(31,41,51,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.help-btn .help-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
}
.help-btn svg{width:24px;height:24px;display:block}
.help-btn .help-ring{
  fill:none;
  stroke:#d7e4ff;
  stroke-width:1.5;
}
.help-btn .help-mark,
.help-btn .help-dot{
  fill:none;
  stroke:#2483ff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.help-btn .help-dot{fill:#2483ff;stroke:none}
.help-btn:hover{box-shadow:0 12px 26px rgba(31,41,51,.12), inset 0 1px 0 rgba(255,255,255,.9)}
@media (max-height:720px){
  .help-btn{width:42px;height:42px}
  .help-btn .help-icon,.help-btn svg{width:22px;height:22px}
}
@media (max-width:380px){
  .help-btn{width:40px;height:40px}
}


/* Batch 1.11 polish fixes */
.howto-close{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#ffffff;
  font-size:28px;
  line-height:1;
  transition:background .16s ease, transform .16s ease, opacity .16s ease;
}
.howto-close:hover{background:rgba(255,255,255,.10)}
.howto-close:active{transform:scale(.97)}
.howto-close:focus,.howto-close:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
@media (max-width:480px){
  .howto-close{width:40px;height:40px;font-size:26px}
}


/* Batch 1.16: premium light How To Play + logo subtitle removal */
.brand-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-wrap p{
  display:none !important;
}
.brand-logo{
  width:min(232px,54vw);
  max-height:58px;
}

.howto-modal{
  width:min(520px,94vw);
}

.howto-card{
  background:
    radial-gradient(circle at top left, rgba(245,197,66,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(79,143,100,.13), transparent 34%),
    #fffdf8 !important;
  color:var(--ink) !important;
  border:1px solid rgba(222,215,204,.96);
  border-radius:28px;
  padding:26px 24px 22px;
  box-shadow:0 26px 80px rgba(31,41,51,.22), inset 0 1px 0 rgba(255,255,255,.9);
  font-family:ui-rounded, "SF Pro Rounded", "Avenir Next", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.howto-card h2{
  margin:0 0 10px;
  color:var(--ink) !important;
  font-size:clamp(30px,7.4vw,42px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:950;
}

.howto-intro{
  margin:0 0 16px;
  color:#293241 !important;
  font-size:clamp(18px,5vw,22px);
  line-height:1.28;
  font-weight:850;
  letter-spacing:-.015em;
}

.howto-rules{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:10px;
}

.howto-rules li{
  margin:0;
  color:#4c5667 !important;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(222,215,204,.9);
  border-radius:16px;
  padding:12px 13px;
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  box-shadow:0 8px 20px rgba(31,41,51,.055);
}

.howto-rules strong,
.howto-example strong{
  color:#1f2933 !important;
  font-weight:950;
}

.howto-subtitle{
  margin:14px 0 12px;
  color:#1f2933 !important;
  font-size:18px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.02em;
}

.howto-example{
  padding:14px 0 15px;
  border-top:1px solid rgba(222,215,204,.9);
}

.howto-example:first-of-type{
  border-top:0;
  padding-top:2px;
}

.howto-row{
  display:flex;
  gap:7px;
  margin:0 0 11px;
}

.howto-tile{
  width:clamp(45px,11.5vw,58px);
  height:clamp(45px,11.5vw,58px);
  display:grid;
  place-items:center;
  border:2px solid #ded7cc;
  border-radius:14px;
  color:#1f2933;
  background:#fffdf8;
  font-size:clamp(25px,7vw,34px);
  font-weight:950;
  text-transform:uppercase;
  box-shadow:0 7px 18px rgba(31,41,51,.08);
  user-select:none;
}

.howto-tile.locked{
  background:#293241;
  border-color:#293241;
  color:#fff;
}

.howto-tile.correct{
  background:#00e600;
  border-color:#00e600;
  color:#fff;
}

.howto-tile.present{
  background:#ffff00;
  border-color:#ffff00;
  color:#fff;
}

.howto-tile.absent{
  background:#8b929c;
  border-color:#8b929c;
  color:#fff;
}

.howto-example p{
  margin:0;
  color:#4c5667 !important;
  font-size:15px;
  line-height:1.42;
  font-weight:700;
}

.howto-close{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#f2ede4 !important;
  color:#293241 !important;
  border:1px solid rgba(222,215,204,.9);
  box-shadow:0 8px 20px rgba(31,41,51,.10);
  font-size:28px;
  line-height:1;
  opacity:1;
}

.howto-close:hover{
  background:#ebe3d7 !important;
}

.howto-close:focus,
.howto-close:focus-visible{
  outline:none !important;
  box-shadow:0 8px 20px rgba(31,41,51,.10) !important;
}

@media (max-height:720px){
  .brand-logo{
    width:min(205px,52vw);
    max-height:48px;
  }
  .howto-card{
    padding:22px 18px 18px;
  }
  .howto-rules{
    gap:8px;
    margin-bottom:14px;
  }
  .howto-rules li{
    padding:10px 11px;
    font-size:14px;
  }
  .howto-example{
    padding:11px 0 12px;
  }
  .howto-row{
    gap:6px;
    margin-bottom:9px;
  }
}

@media (max-width:380px){
  .brand-logo{
    width:min(190px,54vw);
    max-height:44px;
  }
  .howto-card{
    padding:20px 15px 16px;
  }
  .howto-tile{
    border-radius:12px;
  }
}


/* Batch 1.17: premium font polish */
:root{
  --font-main:"Nunito", ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
textarea,
select{
  font-family:var(--font-main) !important;
}

body{
  font-weight:700;
  letter-spacing:-0.01em;
}

.timer-card span,
.message,
.key,
.tile,
.primary,
.secondary,
.icon-btn,
.clue-btn{
  font-family:var(--font-main) !important;
}

.tile{
  font-weight:900;
  letter-spacing:0.01em;
}

.key{
  font-weight:900;
  letter-spacing:0.01em;
}

.key.big{
  font-weight:900;
}

.timer-card strong{
  font-family:var(--font-main) !important;
  font-weight:900;
  letter-spacing:-0.035em;
}

.howto-card{
  font-family:var(--font-main) !important;
}

.howto-card h2{
  font-family:var(--font-main) !important;
  font-weight:900;
  letter-spacing:-0.055em;
}

.howto-intro{
  font-family:var(--font-main) !important;
  font-weight:900;
  letter-spacing:-0.025em;
}

.howto-rules li,
.howto-example p{
  font-family:var(--font-main) !important;
  font-weight:750;
  letter-spacing:-0.01em;
}

.howto-subtitle{
  font-family:var(--font-main) !important;
  font-weight:900;
}

.result-card h2{
  font-family:var(--font-main) !important;
  font-weight:900;
  letter-spacing:-0.045em;
}

.result-card p,
.share-text{
  font-family:var(--font-main) !important;
}


/* Batch 1.18: next puzzle countdown */
.next-puzzle-box{
  margin:12px 0 10px;
  padding:13px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,243,235,.92));
  border:1px solid rgba(222,215,204,.95);
  box-shadow:0 10px 24px rgba(31,41,51,.08), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.next-puzzle-box[hidden]{display:none !important}
.next-puzzle-box span{
  color:#697386;
  font-size:14px;
  font-weight:850;
}
.next-puzzle-box strong{
  color:#293241;
  font-size:22px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
body.game-completed .timer-card{
  background:linear-gradient(180deg,#fffdf8,#f4efe6);
  border-color:rgba(201,163,72,.32);
}
body.game-completed .timer-card strong{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
}
@media (max-width:380px){
  .next-puzzle-box strong{font-size:19px}
  .next-puzzle-box span{font-size:13px}
}


/* Batch 1.19: cursor/backspace stability support */
.tile.active:not(.locked){
  will-change:transform;
}


/* Batch 1.22: feedback color update */
.tile.correct,
.tile.present,
.key.correct,
.key.present,
.howto-tile.correct,
.howto-tile.present{
  background:var(--green);
  border-color:var(--green);
  color:#111827;
}

.tile.present,
.key.present,
.howto-tile.present{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#111827;
}

.mini-tile.correct{
  background:#00e600;
}

.mini-tile.present{
  background:#ffff00;
}


/* Batch 1.25: rounded tile system */
:root{
  --board-tile-radius:22px;
  --board-tile-radius-sm:20px;
  --mini-tile-radius:14px;
  --howto-tile-radius:18px;
}

.tile{
  border-radius:var(--board-tile-radius) !important;
}

.mini-tile{
  border-radius:var(--mini-tile-radius) !important;
}

.howto-tile{
  border-radius:var(--howto-tile-radius) !important;
}

@media (max-height:720px){
  .tile{
    border-radius:var(--board-tile-radius-sm) !important;
  }
  .mini-tile{
    border-radius:13px !important;
  }
  .howto-tile{
    border-radius:16px !important;
  }
}

@media (max-width:380px){
  .tile{
    border-radius:var(--board-tile-radius-sm) !important;
  }
  .mini-tile{
    border-radius:12px !important;
  }
  .howto-tile{
    border-radius:15px !important;
  }
}


/* Batch 1.26: keyboard press feel */
.key{
  transition:transform .08s ease, box-shadow .08s ease, border-bottom-width .08s ease, filter .08s ease, background-color .16s ease;
  will-change:transform;
}

.key:not(:disabled):active,
.key:not(:disabled).is-pressed{
  transform:translateY(3px) scale(.985);
  border-bottom-width:1px;
  box-shadow:inset 0 3px 8px rgba(31,41,51,.16), 0 1px 0 rgba(255,255,255,.6);
  filter:brightness(.97);
}

.key.big:not(:disabled):active,
.key.big:not(:disabled).is-pressed{
  box-shadow:inset 0 3px 8px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.18);
  filter:brightness(1.03);
}