/* SKLUCK — consolidated styles */
* { box-sizing: border-box; }
:root { --s: min(56px, 15.5vw); --gold: #f5c542; --grey: #eee; --line: #777; }
body { margin: 0; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; -webkit-tap-highlight-color: transparent; }
body.kb-on { padding-bottom: 210px; }
button { font-family: inherit; }

/* header */
.top-bar { height: 58px; position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; border-bottom: 1px solid #e5e5e5; }
.logo-small { position: absolute; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: 900; letter-spacing: -1px; }
.icon-btn { width: 36px; height: 36px; border: none; background: transparent; font-size: 20px; font-weight: 800; cursor: pointer; }

/* layout */
.game-container { width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 14px 30px; }
.screen { display: none; text-align: center; }
.screen.active { display: block; }
.screen h2 { margin: 8px 0 9px; font-size: 23px; font-weight: 800; }
.screen > p { max-width: 430px; margin: 0 auto 18px; color: #333; font-size: 14px; line-height: 1.45; }
.msg { min-height: 24px; margin-top: 14px; font-weight: 800; font-size: 15px; }
.attempts { margin: 12px auto 15px; color: #333; font-size: 15px; }

/* home */
.mascot { font-size: 78px; margin-top: 12px; }
#home h1 { margin: 8px 0 0; font-size: 46px; font-weight: 900; letter-spacing: -2px; }
.tagline { margin: 4px 0 0; color: #555; font-size: 17px; }
.daily-card { margin-top: 30px; padding: 17px; border: 1px solid #d5d5d5; border-radius: 10px; }
.daily-card h2 { margin: 0; font-size: 19px; }
.daily-card p { margin: 7px 0 0; color: #555; }
.primary-button { width: 100%; height: 52px; margin-top: 15px; border: none; border-radius: 8px; background: #111; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.primary-button.small { width: 200px; height: 46px; font-size: 15px; margin-top: 8px; }
.level-navigation { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; justify-items: center; }
.level { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.level span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eee; font-weight: 700; }
.level.active span { background: #5bbf63; color: #fff; }
.level small { font-size: 11px; color: #333; }
.rules-button { display: block; margin: 28px auto 0; padding: 10px 28px; background: transparent; color: #202633; border: 2px solid #202633; border-radius: 10px; font-size: 14px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.rules-button:hover { background: #202633; color: #fff; }

/* unlocked letters */
.unlocked-box { position: relative; margin-bottom: 17px; padding: 10px 12px 13px; border: 1.5px solid var(--line); border-radius: 9px; }
.unlocked-title { margin-bottom: 28px; font-size: 13px; font-weight: 700; }
.unlocked-slots { position: relative; display: flex; justify-content: center; gap: 6px; }
.unlocked-slots::before { content: "🐣"; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); font-size: 21px; line-height: 21px; }
.unlocked-slots > div { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 3px; background: var(--grey); font-size: 22px; font-weight: 800; }

/* shared boxes / rows */
.grid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.row { display: flex; justify-content: center; gap: 6px; }
.box { width: var(--s); height: var(--s); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 3px; background: var(--grey); font-size: calc(var(--s) * .52); font-weight: 800; line-height: 1; }
.row.active .box { background: #f6c945; border-color: #d9a900; }
.row.failed .box { background: #d9534f; border-color: #b52b27; color: #fff; }
.row.success .box { background: #5bbf63; border-color: #438f49; color: #fff; }
.row.fixed .box:not(.blank) { background: #d9d9d9; }

/* tiles (gold letters) */
.tiles { display: flex; justify-content: center; gap: 6px; margin: 15px 0 18px; }
.tiles.one-line { flex-wrap: nowrap; gap: 4px; max-width: none; margin: 15px auto; --c: min(44px, calc((100vw - 64px) / 10)); }
.one-line .tile { width: var(--c); height: var(--c); font-size: calc(var(--c) * .5); }
.tile { width: var(--s); height: var(--s); display: flex; align-items: center; justify-content: center; border: 1.5px solid #222; border-radius: 4px; background: var(--gold); font-size: calc(var(--s) * .5); font-weight: 900; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
.tile.static { cursor: default; border-color: #d5b62d; }
.tile.sel { box-shadow: 0 0 0 3px #222; transform: translateY(-3px); }
.tile.over { box-shadow: 0 0 0 3px #222; }

/* level 3 */
.cannot-use { margin: 10px 0; padding: 9px; border-radius: 8px; background: #ffdede; }
.cannot-use span { display: block; margin-bottom: 6px; font-size: 13px; }
.cannot-use b { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; margin: 2px; border-radius: 3px; background: #f4bcbc; }

/* level 5 */
.drop-arrow { font-size: 25px; margin-top: 4px; }
.drop { width: 70px; height: 70px; margin: 0 auto; border: 2px solid #222; background: #f7f7f7; font-size: 32px; font-weight: 900; transition: transform .15s; }
.drop.over { transform: scale(1.1); }
.drop.ok { background: #6aaa64; color: #fff; }
.ghost { position: fixed; z-index: 99999; width: var(--s); height: var(--s); display: flex; align-items: center; justify-content: center; background: var(--gold); border-radius: 8px; font-size: 26px; font-weight: 900; pointer-events: none; transform: translate(-50%, -50%); }

/* on-screen keyboard */
.kb { display: none; position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); background: #f2f2f2; border-top: 1px solid #ddd; z-index: 50; user-select: none; -webkit-user-select: none; }
body.kb-on .kb { display: block; }
.kb-row { display: flex; justify-content: center; gap: 5px; margin: 0 auto 6px; max-width: 520px; }
.kb button { flex: 1; max-width: 44px; height: 50px; border: none; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #bbb; font-size: 17px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.kb button.wide { flex: 1.6; max-width: 70px; font-size: 14px; background: #111; color: #fff; }
.kb button:active { background: #ddd; }

/* rules modal */
.modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.modal.open { display: flex; }
.modal-content { position: relative; width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 30px 24px 26px; text-align: left; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f1f1f1; font-size: 24px; cursor: pointer; }
.modal-content h2 { margin: 0 40px 8px 0; text-align: center; font-size: 25px; font-weight: 900; }
.modal-intro { margin: 0 0 24px; text-align: center; color: #555; font-size: 15px; }
.rule { margin-bottom: 14px; padding: 14px 16px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fafafa; }
.rule h3 { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.rule p { margin: 0; color: #444; font-size: 14px; line-height: 1.5; }
.modal-end { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5e5e5; text-align: center; line-height: 1.6; }
.modal-end div { margin-top: 10px; font-weight: 700; }

/* result */
.res-card { max-width: 500px; margin: 0 auto; padding: 14px 4px; }
.res-chicken { font-size: 48px; }
.res-title { font-size: 28px; font-weight: 900; }
.res-sub { margin-top: 5px; font-size: 11px; font-weight: 800; opacity: .6; letter-spacing: 2px; }
.res-word { display: flex; justify-content: center; gap: 7px; margin: 22px 0 9px; }
.res-word span { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: #65a765; color: #fff; font-size: 25px; font-weight: 900; }
.res-word.lost span { background: #777; }
.res-time { margin: 14px 0; font-size: 30px; font-weight: 900; }
.res-time small, .res-grid span, .res-foot span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; opacity: .55; }
.res-grid, .res-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.res-foot { grid-template-columns: 1fr 1fr; }
.res-grid div, .res-foot div { padding: 10px 5px; border: 1px solid rgba(128, 128, 128, .3); border-radius: 9px; }
.res-grid strong, .res-foot strong { display: block; font-size: 14px; font-weight: 900; }
.res-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
.res-row { display: grid; grid-template-columns: 1.6fr .8fr .8fr; align-items: center; gap: 6px; padding: 9px; border: 1px solid rgba(128, 128, 128, .25); border-radius: 9px; font-size: 11px; }
.res-row b { font-size: 11px; }
.res-row i { display: block; font-style: normal; font-weight: 800; text-align: center; }
.res-btn { width: 100%; padding: 13px; border: 0; border-radius: 9px; background: #111; color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; }

.ghost.lift { box-shadow: 0 8px 18px rgba(0,0,0,.3); transform: translate(-50%, -60%) scale(1.08); }
.tile { transition: transform .18s ease; }

/* Level 5: all ten letters on ONE line (id selector so the HTML class can't override it) */
#cands { display: flex !important; flex-wrap: nowrap !important; justify-content: center; gap: 4px; max-width: none !important; width: 100%; margin: 15px auto; --c: min(44px, calc((100vw - 64px) / 10)); }
#cands .tile { flex: 0 0 var(--c); width: var(--c); height: var(--c); min-width: 0; font-size: calc(var(--c) * .5); }

.res-next { margin-top: 14px; font-size: 12px; opacity: .6; }
.res-next b { font-variant-numeric: tabular-nums; }

/* share buttons */
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.share-grid button { padding: 11px 4px; border: 2px solid #111; border-radius: 9px; background: #fff; color: #111; font-size: 13px; font-weight: 800; cursor: pointer; }
.share-grid button:active { background: #eee; }
.share-hint { min-height: 18px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #333; }

/* home: next-puzzle line + more games button */
.daily-card .next-line { margin-top: 6px; font-size: 13px; }
.daily-card .next-line b { font-variant-numeric: tabular-nums; color: #111; }
.more-button { width: 100%; height: 48px; margin-top: 10px; border: 2px solid #111; border-radius: 8px; background: #fff; color: #111; font-size: 16px; font-weight: 800; letter-spacing: .5px; cursor: pointer; }
.more-button:hover { background: #111; color: #fff; }

/* more games (coming soon) */
.soon-hero { font-size: 72px; margin-top: 8px; animation: soonFloat 2.2s ease-in-out infinite alternate; }
.soon-title { margin: 6px 0 0 !important; font-size: 22px !important; font-weight: 900; color: #111 !important; }
.soon-sub { margin: 4px auto 22px !important; font-size: 15px !important; }
.soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.soon-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 6px; border: 2px dashed #bbb; border-radius: 12px; background: #fafafa; }
.soon-ico { font-size: 26px; filter: grayscale(.2); }
.soon-card b { font-size: 14px; } .soon-card small { font-size: 11px; color: #777; }
@keyframes soonFloat { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }

/* celebration: YOU SKLUCKED IT!! */
#celebrate { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2d2d2d, #0b0b0b 75%); text-align: center; transition: opacity .3s; animation: celFade .35s ease; cursor: pointer; perspective: 600px; }
#celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cel-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: celFlash .7s ease-out forwards; }
.cel-glow { position: absolute; left: 50%; top: 38%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 197, 66, .5), transparent 65%); animation: celGlow 2s ease-in-out infinite alternate; pointer-events: none; }
.cel-rain { position: absolute; inset: 0; pointer-events: none; }
.cel-rain i { position: absolute; top: -50px; font-style: normal; animation: celFall linear infinite; }
.cel-chick { position: relative; font-size: 100px; animation: celDance .55s ease-in-out infinite alternate; }
.cel-title { position: relative; margin: 8px 16px 0; font-size: clamp(32px, 10vw, 56px); font-weight: 900; line-height: 1.12; }
.cel-title .w { display: inline-block; white-space: nowrap; }
.cel-title .c { display: inline-block; color: hsl(calc(var(--i) * 21), 95%, 62%); text-shadow: 0 4px 0 rgba(0, 0, 0, .4); animation: celLetter .7s cubic-bezier(.2, 1.8, .4, 1) both, celWave 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms + .2s), calc(var(--i) * 70ms + 1.3s); }
.cel-word { position: relative; display: flex; gap: 7px; margin-top: 22px; }
.cel-word span { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #5bbf63; color: #fff; font-size: 28px; font-weight: 900; box-shadow: 0 5px 0 #3d8f46; animation: celFlip .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(1.2s + var(--i) * 130ms); }
.cel-sub { position: relative; margin-top: 22px; color: #fff; font-size: 14px; opacity: .75; animation: celFade 1s ease 2.2s both; }
@keyframes celFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes celFlash { from { opacity: .85; } to { opacity: 0; } }
@keyframes celGlow { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.15); opacity: 1; } }
@keyframes celFall { to { transform: translateY(115vh) rotate(360deg); } }
@keyframes celDance { from { transform: translateY(0) rotate(-8deg) scale(1); } to { transform: translateY(-24px) rotate(8deg) scale(1.08); } }
@keyframes celLetter { from { transform: translateY(-140px) scale(.2) rotate(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes celWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes celFlip { from { transform: rotateX(90deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cel-rain, .cel-glow, .cel-flash, .soon-hero { display: none; } .cel-chick, .cel-title .c { animation: none; } }

/* SKLUCK — extras: skip buttons, streaks, shiny badges (loads after style.css) */

/* skip button */
.skip-btn { display: block; margin: 16px auto 0; padding: 9px 18px; border: 1.5px dashed #999; border-radius: 20px; background: transparent; color: #555; font-size: 13px; font-weight: 800; cursor: pointer; max-width: 92%; }
.skip-btn:hover { background: #f4f4f4; }
.skip-btn.arm { background: #fff1f0; border-color: #d9534f; border-style: solid; color: #b52b27; }

/* back + skip row */
.nav-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.nav-row .skip-btn, .nav-row .back-btn { margin: 0; }
.back-btn { padding: 9px 16px; border: 1.5px solid #999; border-radius: 20px; background: #fff; color: #333; font-size: 13px; font-weight: 800; cursor: pointer; max-width: 92%; }
.back-btn:hover { background: #f4f4f4; }
.screen > .skip-note { margin: 8px auto 0; font-size: 11px; color: #777; text-align: center; }

/* streak chip on the home page */
.streak-chip { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px 10px; border: 2px solid #f5c542; border-radius: 10px; background: #fff9e0; color: #111; font-size: 15px; font-weight: 800; cursor: pointer; }
.streak-chip:hover { background: #fff2bd; }
.sc-flame { font-size: 20px; animation: flame .9s ease-in-out infinite alternate; }
.sc-sep { opacity: .4; }
@keyframes flame { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.18) rotate(4deg); } }

/* streak card on the result screen */
.streak-card { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 2px solid #f5c542; border-radius: 12px; background: #fff9e0; text-align: left; }
.streak-card .sc-fire { font-size: 34px; }
.streak-card strong { display: block; font-size: 17px; font-weight: 900; }
.streak-card small { display: block; margin-top: 3px; font-size: 12px; color: #555; }
.res-btn.alt { margin-top: 10px; background: #fff; color: #111; border: 2px solid #111; }

/* medals */
.medal { position: relative; flex: none; width: 92px; height: 92px; padding: 7px; border-radius: 50%; overflow: hidden;
  background: conic-gradient(var(--m1), var(--m2), var(--m1), var(--m3), var(--m1));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.medal.big { width: 190px; height: 190px; padding: 12px; }
.medal-face { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 38px;
  background: radial-gradient(circle at 35% 30%, var(--f1), var(--f2));
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .25); }
.medal.big .medal-face { font-size: 84px; }
.medal .shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%); transform: translateX(-120%); animation: medalShine 3s ease-in-out infinite; pointer-events: none; }
@keyframes medalShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.t-bronze { --m1: #8a4b1d; --m2: #f1c08c; --m3: #b36a2b; --f1: #f8d9b4; --f2: #b36a2b; }
.t-silver { --m1: #8d99a6; --m2: #ffffff; --m3: #c3ccd6; --f1: #ffffff; --f2: #aeb8c4; }
.t-gold { --m1: #b8860b; --m2: #fff0a0; --m3: #e0a914; --f1: #fff5bf; --f2: #e5ad1f; }
.t-platinum { --m1: #5d93b5; --m2: #f0fbff; --m3: #a9d6ee; --f1: #f6fdff; --f2: #8cc4e3; }
.t-diamond { --m1: #37d6ff; --m2: #c9b6ff; --m3: #ff9be0; --f1: #eafaff; --f2: #9a8cff; }
.t-legend { --f1: #fff6c9; --f2: #ff9a3c; background: conic-gradient(#ff5a5f, #f5c542, #5bbf63, #4aa3ff, #b57bff, #ff5a5f); animation: legendGlow 1.6s ease-in-out infinite alternate; }
@keyframes legendGlow { from { box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 0 10px rgba(255, 200, 80, .5); } to { box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 0 30px rgba(255, 120, 200, .9); } }
.medal.locked { filter: grayscale(1) brightness(.8); opacity: .5; animation: none; }
.medal.locked .shine { display: none; }

/* badge gallery */
.bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bcell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fafafa; color: #111; cursor: pointer; font-family: inherit; }
.bcell:hover { background: #f1f1f1; }
.bcell b { font-size: 12px; font-weight: 900; text-align: center; }
.bcell small { font-size: 11px; color: #666; }

/* single badge card */
.badge-card { text-align: center; overflow: hidden; }
.badge-card .bm-top { margin: 4px 0 14px; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #b8860b; }
.badge-card .medal { margin: 0 auto 16px; }
.badge-card h2 { margin: 0 0 6px; font-size: 24px; }
.badge-card .bm-line { margin: 0 0 6px; color: #444; font-size: 14px; }
.badge-card .bm-days { margin: 0 0 18px; font-size: 13px; font-weight: 800; color: #666; }
.badge-card .res-btn { margin-top: 8px; }
.bm-hint { min-height: 18px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #333; }
.bm-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

@media (prefers-reduced-motion: reduce) { .medal .shine, .sc-flame, .t-legend { animation: none; } .medal .shine { display: none; } }

/* ---- Wordle-style layout: header, instructions, boxes, then the keyboard, all on one screen ---- */
/* in-game keyboard */
.kb { padding: 8px 6px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e6e6e6; }
.kb-row { gap: 6px; margin: 0 auto 8px; max-width: 520px; }
.kb button { flex: 1; max-width: none; height: clamp(44px, 7.4vh, 58px); padding: 0; border-radius: 6px; background: #d3d6da; box-shadow: none; color: #111; font-size: clamp(14px, 3.8vw, 19px); font-weight: 700; }
.kb button.wide { flex: 1.5; max-width: none; background: #d3d6da; color: #111; font-size: 12px; }
.kb button:active { background: #b4b9bf; }
.kb-sp { flex: .5; }

/* boxes, unlocked letters and tiles share one column width so everything lines up */
.unlocked-slots > div { width: var(--s); height: calc(var(--s) * .75); font-size: calc(var(--s) * .42); }
.tile.ok { background: #5bbf63; border-color: #438f49; color: #fff; }
.nav-row .short { display: none; }

/* compact layout while the keyboard is showing (Levels 1, 2, 3 and the Final guess) */
body.kb-on { padding-bottom: calc(var(--kbh, 200px) + 6px); }
body.kb-on .top-bar { height: 44px; }
body.kb-on .logo-small { font-size: 20px; }
body.kb-on .game-container { padding-top: 8px; padding-bottom: 8px; }
body.kb-on .skip-note, body.kb-on .screen > p.ex { display: none; }
body.kb-on .screen { position: relative; }
body.kb-on .screen > p { max-width: none; margin: 0 auto 6px; font-size: 12px; line-height: 1.3; }
body.kb-on .screen h2 { margin: 0 0 4px; padding: 0 92px; font-size: 17px; line-height: 28px; }
body.kb-on .unlocked-box { margin-bottom: 8px; padding: 6px 8px; }
body.kb-on .unlocked-title, body.kb-on .unlocked-slots::before { display: none; }
body.kb-on .attempts { margin: 4px auto 6px; font-size: 13px; }
body.kb-on .msg { min-height: 20px; margin-top: 6px; }
body.kb-on .cannot-use { margin: 6px 0; padding: 6px; }
body.kb-on .cannot-use span { margin-bottom: 3px; }
body.kb-on .cannot-use b { width: 26px; height: 26px; }
body.kb-on .tiles { margin: 6px 0 8px; }
/* back + skip sit on the title line, like the icons in Wordle's header */
body.kb-on .nav-row { position: absolute; top: 0; left: 0; right: 0; margin: 0; gap: 0; flex-wrap: nowrap; justify-content: space-between; pointer-events: none; }
body.kb-on .nav-row button { pointer-events: auto; padding: 4px 10px; font-size: 12px; }
body.kb-on .nav-row .skip-btn { margin-left: auto; }
body.kb-on .nav-row .long { display: none; }
body.kb-on .nav-row .short { display: inline; }
@media (min-width: 700px) { body.kb-on .screen > p { font-size: 14px; } }

/* ---- Unlocked Letters: plain grey boxes, each turns sky blue when its letter unlocks ---- */
.unlocked-box { background: #fff; border: 1.5px solid #777; }
.unlocked-title { color: #111; }
.unlocked-slots::before { content: "🐣"; }
.unlocked-slots > div {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #777; border-radius: 3px;
  background: #eee; color: #111;
  font-size: 22px; font-weight: 800;
}
.unlocked-slots > div.on { background: #87ceeb; border-color: #4a9fc7; color: #111; }
.unlocked-slots > div.pop { animation: slotPop .55s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes slotPop { 0% { transform: scale(.3) rotate(-14deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .unlocked-slots > div.pop { animation: none; } }

/* ---- show the "Unlocked Letters" title and the 🐣 on typing screens too (compact size) ---- */
body.kb-on .unlocked-box { padding: 6px 8px 8px; }
body.kb-on .unlocked-title { display: block; margin-bottom: 24px; font-size: 12px; }
body.kb-on .unlocked-slots::before { display: block; top: -22px; font-size: 18px; line-height: 18px; }