/* Keysweeper (issues #61, #70). The grid is the board, so it sits on paper like every chart does; the hive look stays
   around it, never on it. */
.ky{max-width:600px}
.beta{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 8px 2px;border-radius:999px;background:var(--amber);color:var(--on-ink);font:700 .7rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* the catch-up strip (shared .days/.day look from style.css), as World Imposter has it */
#ky-days a.day{text-decoration:none;color:inherit}
#ky-days[hidden]{display:none}
.ky-card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px 12px;margin:16px 0}

/* Six slots for the word: honey once found, dashed while still hidden, typed letters in ink while guessing. */
.ky-slots{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px;max-width:360px;margin:0 auto;cursor:pointer}
.ky-slot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;
  border:2px dashed var(--rule);font:600 clamp(1.4rem,7vw,2.1rem)/1 'Fredoka',system-ui,sans-serif;color:var(--ink);
  text-transform:uppercase;background:transparent}
.ky-slot.hit{border:2px solid #DE8F0A;background:#F2BE45;color:#38220D}
.ky-slot.typed{border:2px solid var(--ink);border-style:solid}
.ky-slot.cur{border:2px solid var(--amber);border-style:solid;box-shadow:0 0 0 3px var(--hl)}
.ky-slot.lost{border:2px solid #8E0F2E;color:#8E0F2E;border-style:solid}
.ky-slot.boom{border:2px solid #D6312B;background:#F6D3CF;color:#8E0F2E}
.ky-slot.clash{border-color:#D6312B;color:#D6312B}

/* The Wordle part (Paul, 2026-10-11): letters the board has given away, tappable, and a box to type the code. */
.ky-tray{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0 0;min-height:4px}
.ky-tray-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.ky-tray-l{font-size:.75rem;color:var(--bronze);min-width:5.6em;text-align:right;margin-right:2px}
.ky-slot.green{border:2px solid #4E8F49;background:#6AAA64;color:#fff}

/* Wrong codes, scored like Wordle (Paul, 2026-10-11). */
.ky-rows{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px 0 0}
.ky-row{display:flex;gap:4px}
.ky-mini{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  font:600 1rem/1 'Fredoka',system-ui,sans-serif;color:#fff}
.ky-mini.g{background:#6AAA64}.ky-mini.y{background:#C9B458}.ky-mini.x{background:#787C7E}
/* Not colour alone (review M2): green is underlined, yellow carries a dot, grey is plain. */
.ky-mini{position:relative}
.ky-mini.g::after{content:'';position:absolute;left:7px;right:7px;bottom:4px;height:2px;border-radius:1px;background:#fff}
.ky-mini.y::after{content:'';position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#fff}
.ky-tile{min-width:40px;height:40px;border-radius:8px;font:600 1.2rem/1 'Fredoka',system-ui,sans-serif;cursor:pointer;border:2px solid}
.ky-tile.sure{background:#FAD6D0;border-color:#D6312B;color:#8E0F2E}
.ky-red{color:#D6312B}
.ky-entry{display:flex;gap:6px;margin:10px auto 0;max-width:420px}
.ky-entry[hidden]{display:none}
.ky-entry input{flex:1;min-width:0;font:600 1.15rem/1 'Fredoka',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 12px;border-radius:999px;border:2px solid var(--rule);background:var(--card);color:var(--ink)}
.ky-entry input:focus{outline:none;border-color:var(--amber)}
.ky-entry input::placeholder{letter-spacing:normal;text-transform:none;color:var(--bronze)}
.ky-hint{font-size:.85rem;color:var(--bronze);margin:2px 0 6px;line-height:1.4}

/* Minesweeper's top bar: bombs still to find, the face, points. */
.ky-hud{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px}
.ky-lcd{min-width:4.2em;padding:5px 9px;border-radius:8px;background:#2A1A0C;color:#FF5A3C;text-align:center;
  font:700 1.05rem/1 ui-monospace,'Consolas',monospace;letter-spacing:.04em}
.ky-face{font-size:1.7rem;line-height:1}
.ky-story{margin:8px 0 4px}
@media (prefers-reduced-motion:no-preference){.ky-slot.pop{animation:ky-pop .28s ease-out}}
@keyframes ky-pop{from{transform:scale(.6)}to{transform:scale(1)}}

.ky-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 6px}
.ky-lives{display:flex;align-items:center;gap:4px;font-size:.85rem;color:var(--bronze);white-space:nowrap}
.ky-pip{width:15px;height:17px;background:#F2BE45;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ky-pip.gone{background:var(--rule)}
.ky-acts{display:flex;gap:6px}
.ky-btn{font:600 .95rem/1 'Fredoka',system-ui,sans-serif;padding:10px 14px;border-radius:999px;border:2px solid var(--rule);
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
.ky-btn.go{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.ky-btn:disabled{opacity:.45;cursor:default}
.ky-msg{min-height:1.4em;font-size:.92rem;color:var(--bronze);margin:0 0 6px}
.ky-board{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#F7EFDC;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ky-board svg{display:block;width:100%;height:auto}

.ky-result{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.ky-result h2{font:600 1.35rem/1.2 'Fredoka',system-ui,sans-serif;margin:0 0 4px}
.ky-result p{margin:4px 0;color:var(--bronze)}
.ky-trail{font-size:1.2rem;letter-spacing:2px;margin:6px 0}
.ky-result .acts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ky-result .also{display:block;margin:8px 0 0;color:var(--amber)}

/* The grid (#70): undug cells are raised paper tiles showing their letter; dug cells sit flat and grey with the
   number in Minesweeper's own colours and the letter small in the corner. */
.ky-board{padding:8px}
.ky-grid{display:grid;grid-template-columns:repeat(var(--side,7),minmax(0,1fr));gap:4px;max-width:420px;margin:0 auto}
.ky-cell{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:7px;cursor:pointer;
  background:#FAF5EB;box-shadow:0 3px 0 #B5A88E;color:#38220D;font:600 clamp(1rem,5vw,1.35rem)/1 'Fredoka',system-ui,sans-serif}
.ky-cell:active{transform:translateY(2px);box-shadow:0 1px 0 #B5A88E}
.ky-cell .l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ky-cell .n{position:absolute;right:3px;bottom:2px;font-size:.62em;line-height:1}
.ky-cell.dug,.ky-cell.boom{box-shadow:none;transform:translateY(3px);cursor:default}
.ky-cell.dug{background:#C4BCAE}
.ky-cell.dug .l{font-size:.5em;align-items:flex-start;justify-content:flex-start;padding:3px 0 0 4px;color:#6B6150}
.ky-cell.dug .n{inset:0;display:flex;align-items:center;justify-content:center;font-size:1.05em;font-weight:800}
.ky-cell.n1 .n{color:#1F4FD1}.ky-cell.n2 .n{color:#2E7D32}.ky-cell.n3 .n{color:#C62828}
.ky-cell.n4 .n{color:#1A237E}.ky-cell.n5 .n{color:#7B1F1F}.ky-cell.n6 .n{color:#00838F}
.ky-cell.boom{background:#D6312B;color:#fff}
.ky-cell.flag{background:#FAD6D0}
.ky-cell.out{background:#E8E2D7;color:#A39A88}
.ky-cell.bomb{background:#F2BE45}
.ky-cell:disabled{cursor:default}

/* A refused code shakes its row, Wordle-style; a bomb shakes the grid. Its message sits above the slots. */
.ky-say{min-height:1.3em;text-align:center;font-weight:600;color:var(--ink);margin:0 0 6px;font-size:.92rem}
@media (prefers-reduced-motion:no-preference){.shake{animation:ky-shake .4s ease-in-out}}
@keyframes ky-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

/* A green slot you have typed over keeps its letter in the corner (Paul, 2026-10-12); an untyped green slot shows it
   faintly, as a reminder rather than an answer. */
.ky-slot{position:relative}
.ky-slot.ghost{opacity:.55}
.ky-corner{position:absolute;top:3px;right:5px;font-size:.42em;line-height:1;color:#fff;background:#6AAA64;border-radius:4px;padding:2px 3px}
.ky-tap{display:block;margin:8px auto 0;padding:9px 16px;border-radius:999px;border:2px dashed var(--rule);background:transparent;
  color:var(--bronze);font:600 .9rem/1 'Fredoka',system-ui,sans-serif;cursor:pointer}
.ky-tap[hidden]{display:none}

/* Our keyboard, only while typing the code: fixed to the bottom like a phone's, its keys coloured by what is known. */
.ky-kbd{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--rule);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(56,34,13,.12)}
.ky-kbd[hidden]{display:none}
.kb-row{display:flex;justify-content:center;gap:5px;margin:0 auto 6px;max-width:520px}
.kb-key{flex:1 1 0;min-width:0;height:46px;border-radius:7px;border:0;background:#E9E1D2;color:#38220D;
  font:600 1.05rem/1 'Fredoka',system-ui,sans-serif;cursor:pointer;padding:0}
.kb-key.wide{flex:1.6 1 0;font-size:.85rem}
.kb-key.go{background:var(--ink);color:var(--on-ink)}
.kb-key.g{background:#6AAA64;color:#fff}
.kb-key.in{background:#FAD6D0;color:#8E0F2E;box-shadow:inset 0 0 0 2px #D6312B}
.kb-key.x{background:#9A9285;color:#F3EEE6}
.kb-hide{display:block;margin:2px auto 0;border:0;background:none;color:var(--bronze);font:600 .8rem/1 system-ui;cursor:pointer;padding:4px 10px}
body.ky-typing{padding-bottom:210px}

/* ---- The Axisless look (Paul, 2026-10-12): Shade's front door and results, World Imposter's header. ---- */
/* The house hex logo, swept: dug cells carry Minesweeper numbers, one cell a flag, and the middle cell that fills in
   every Axisless logo fills with the bomb. */
.ky-hexlogo .dug{fill:#C4BCAE}
.ky-hexlogo text{font:800 13px/1 'Fredoka',system-ui,sans-serif;text-anchor:middle}
.ky-hexlogo .n1{fill:#1F4FD1}.ky-hexlogo .n2{fill:#2E7D32}.ky-hexlogo .n3{fill:#C62828}
.ky-hexlogo .flag{fill:#D6312B}.ky-hexlogo .flag-pole{stroke:#38220D;stroke-width:1.4}
.ky-hexlogo .pour{fill:#D6312B}
.ky-hexlogo .bomb{fill:#2A1A0C;opacity:0;animation:ky-bomb .4s var(--ease-pop) 1.8s forwards}
@keyframes ky-bomb{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.ky-hexlogo .bomb{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.ky-hexlogo .bomb{animation:none;opacity:1}}
h1.title .beta{font-size:.62rem;vertical-align:.9em;margin-left:4px}
/* the game screen's header, after World Imposter's: title, a coloured tagline, a small-caps kicker */
.ky-head{text-align:center;margin:2px 0 8px}
.ky-head h1{font:600 2.1rem/1.05 'Fredoka',system-ui,sans-serif;margin:0;letter-spacing:-.01em}
.ky-tagline{margin:4px 0 0;color:#D6312B;font:600 1.05rem/1.2 'Fredoka',system-ui,sans-serif}
.ky-kicker{margin:6px 0 0;font:600 .7rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
/* results: one big jar of honey, filled to the points */
.ky-jar{display:flex;justify-content:center;margin:14px 0 4px}
.ky-jar .honey{width:96px;height:111px}
.results #fb-slot{max-width:420px;margin:18px auto 0;text-align:left}