:root {
  --bg: #212121; --fg: #e8e8e8; --muted: #9a9a9a; --border: #6b6b6b; --key: #5a5a5a;
  --accent: #f2a81d; --accent-fg: #212121; --bad: #ff6b5b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  background: var(--bg); color: var(--fg); font-family: system-ui, sans-serif; }
header { width: 100%; text-align: center; padding: 12px 16px 8px; border-bottom: 1px solid #333; }
h1 { margin: 0; font-size: 1.8rem; display: inline-flex; align-items: center; gap: 8px; }
.logo { height: 1.3em; }
#subheader { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
main { flex: 1; width: 100%; max-width: 500px; overflow-y: auto; padding: 20px 16px 0; }
#board { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.row { display: flex; gap: 8px; }
.tile { width: 66px; height: 66px; display: grid; place-items: center; font-size: 2rem; font-weight: 700;
  border: 2px solid var(--border); text-transform: uppercase; }
.row.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
#message { text-align: center; min-height: 1.4em; font-weight: 600; }
#message.bad { color: var(--bad); }
#keyboard { width: 100%; max-width: 500px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; gap: 6px; justify-content: center; }
.key { flex: 1; max-width: 40px; height: 44px; border: none; border-radius: 4px; background: var(--key); color: var(--fg);
  font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.key.wide { max-width: 56px; flex: 1.4; font-size: .8rem; }
footer { display: flex; gap: 48px; justify-content: center; padding: 12px 16px 20px; flex-wrap: wrap; }
.link { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; }
.link:hover { color: var(--fg); }
dialog { border: none; border-radius: 10px; background: #2c2c2c; color: var(--fg); max-width: min(420px, calc(100vw - 32px)); padding: 24px; }
dialog::backdrop { background: #000a; }
dialog .close:not(.primary) { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--fg); font-size: 1.2rem; cursor: pointer; }
.primary { display: block; margin: 16px auto 0; padding: 10px 28px; border: none; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 1rem; cursor: pointer; }
.example { display: flex; gap: 4px; align-items: center; justify-content: center; }
.example span { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--border); font-weight: 700; }
.example span.hl { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 4px; }
.stats-grid b { font-size: 1.6rem; display: block; }
.stats-grid small { color: var(--muted); }
.bar { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.bar span:first-child { width: 2em; text-align: right; }
.bar div { background: var(--key); padding: 1px 6px; min-width: 1.6em; text-align: right; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini .row { gap: 4px; }
.mini .tile { width: 34px; height: 34px; font-size: 1rem; }
.credit { color: var(--accent); text-align: center; }
.credit a { color: inherit; }
.tile.hit { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
a.link { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.poop { height: 1.2em; }
dialog[open] { animation: fade-in .2s ease-out; }
dialog[open]::backdrop { animation: fade-in .2s ease-out; }
dialog.closing, dialog.closing::backdrop { animation: fade-out .2s ease-in forwards; }
.row.enter { animation: fade-in .35s ease-out; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@media (max-width: 520px) {
  footer { width: 100%; gap: 6px 10px; padding: 10px 8px 16px; flex-wrap: nowrap; justify-content: space-evenly; }
  footer .link { font-size: .75rem; padding: 4px 0; white-space: nowrap; }
}
.link.icon { display: inline-flex; align-items: center; padding: 0; }
header { position: relative; }
.corner-l, .corner-r { position: absolute; top: 50%; transform: translateY(-50%); }
/* Keep icons inside the same 500px column as the board, so desktop matches mobile */
.corner-l { left: max(28px, calc(50% - 222px)); }
.corner-r { right: max(28px, calc(50% - 222px)); }
/* Phone bottom banner: space reserved up front so the page doesn't jump when the ad loads.
   Gap above keeps it away from the links; padding below clears the phone's home bar. */
#ad-bottom { width: 100%; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); margin-top: 4px; display: flex; justify-content: center; overflow: hidden; flex-shrink: 0; }
#ad-bottom[hidden] { display: none; }
/* Local ad-placement preview */
.ad-mock { display: grid; place-items: center; background: #ffffff14; border: 1px dashed #ffffff55; color: #ffffff88; font-size: .75rem; pointer-events: none; }
.ad-mock.rail { position: fixed; top: 50%; transform: translateY(-50%); width: 160px; height: 600px; max-height: 80vh; }
.ad-mock.rail.l { left: 8px; }
.ad-mock.rail.r { right: 8px; }
@media (max-width: 1100px) { .ad-mock.rail { display: none; } }