:root {
  --bg:#14161c; --panel:#1c1f27; --text:#ece8dd; --muted:#8b8f9c; --line:#2b2f3a; --accent:#f2c14e;
  --anim:1; --dur:calc(200ms * var(--anim));
  --head:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Atkinson Hyperlegible', system-ui, sans-serif;
  --r:8px; --lift:0 6px 0 -2px var(--line); --wrap:1080px;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text); font:400 1rem/1.55 var(--body);
  min-height:100vh; display:flex; flex-direction:column;
  transition:background-color calc(var(--dur) * 2), color var(--dur);
}
html[data-bg=grid] body { background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; background-position:-1px -1px; }
html[data-bg=dots] body { background-image:radial-gradient(var(--line) 1.5px,transparent 1.5px); background-size:22px 22px; }
a { color:var(--accent); }
h1,h2,h3 { font-family:var(--head); line-height:1.1; letter-spacing:-.02em; }
h1 { font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800; }
h2 { font-size:1.15rem; font-weight:800; margin-bottom:.8rem; }
.muted { color:var(--muted); }
kbd { font:700 .72rem var(--body); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 .35rem; color:var(--muted); background:var(--panel); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* banner */
.banner { background:var(--accent); color:#14161c; overflow:hidden; font-size:.82rem; font-weight:700; white-space:nowrap; }
.banner[hidden] { display:none; }
.banner a { color:inherit; }
.banner-track { display:flex; width:max-content; padding:.35rem 0; animation:marquee var(--dur,30s) linear infinite; }
.banner:hover .banner-track { animation-play-state:paused; }
.banner-group { display:flex; flex:none; }
.banner-group span { padding-right:4rem; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* header */
.top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; max-width:var(--wrap); width:100%; margin:0 auto; padding:1rem 1.25rem; }
.logo { font:800 1.35rem var(--head); color:var(--text); text-decoration:none; letter-spacing:-.03em; justify-self:start; }
#openSettings { justify-self:end; }
.sticker { display:inline-block; background:var(--accent); color:#14161c; font-size:.7rem; padding:.05rem .4rem; margin-left:.35rem; border-radius:4px; transform:rotate(-6deg) translateY(-.35em); transition:transform var(--dur); }
.logo:hover .sticker { transform:rotate(4deg) translateY(-.45em); }
.nav { display:flex; gap:.25rem; }
.nav a { color:var(--muted); text-decoration:none; padding:.35rem .75rem; border-radius:6px; font-weight:700; transition:color var(--dur), background var(--dur); }
.nav a:hover { color:var(--text); }
.nav a.on { color:var(--text); background:var(--panel); box-shadow:inset 0 -2px var(--accent); }
.count { color:var(--muted); font-size:.8rem; font-weight:400; }

/* buttons */
.btn { font:700 .95rem var(--body); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.55rem 1rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:transform var(--dur), border-color var(--dur), background var(--dur); }
.btn:hover { border-color:var(--accent); transform:translateY(-2px); }
.btn:active { transform:translateY(1px) scale(.97); }
.btn.primary { background:var(--accent); color:#14161c; border-color:var(--accent); }
.btn.ghost { background:transparent; }
.btn.danger { color:#ff8a7a; border-color:#5a2f2a; width:100%; justify-content:center; margin-top:1rem; }
.btn.small { padding:.3rem .8rem; font-size:.85rem; }

/* layout */
main { flex:1; display:flex; flex-direction:column; max-width:var(--wrap); width:100%; margin:0 auto; padding:1rem 1.25rem 3rem; outline:none; }
.view { width:100%; }
.view[hidden] { display:none; }
.view.enter { animation:viewIn calc(var(--dur) * 2) ease-out; }
@keyframes viewIn { from { opacity:0; transform:translateY(8px); } }

/* home: a start page */
body[data-view=home] .logo { visibility:hidden; }
.start { width:100%; max-width:480px; margin:0 auto; padding:0 0 2.5rem; }
body[data-view=home] #view-home { flex:1; display:flex; align-items:center; }   /* centered between header and footer */
.quick-slot { position:relative; height:9.5rem; }   /* reserved + out of flow, so nothing shifts when recents/results appear */
.quick-slot #quickWrap { position:absolute; left:0; right:0; top:0; }
.quick-slot #quickWrap[hidden] { display:none; }
.wordmark { text-align:center; font-size:clamp(2.4rem,7vw,3.6rem); margin-bottom:1.5rem; }
.wordmark .sticker { font-size:.9rem; margin-left:.5rem; }
.sfield { position:relative; width:100%; }
.sfield input { width:100%; font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.7rem 2.5rem .7rem 1rem; transition:border-color var(--dur), box-shadow var(--dur); }
.sfield input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.clear { position:absolute; right:.45rem; top:50%; width:1.7rem; height:1.7rem; margin-top:-.85rem; display:grid; place-items:center; border:0; border-radius:calc(var(--r) - 2px); background:transparent; color:var(--muted); cursor:pointer; opacity:0; transform:scale(.5) rotate(-90deg); pointer-events:none; transition:opacity var(--dur), transform calc(var(--dur) * 1.4) cubic-bezier(.3,1.5,.5,1), background var(--dur), color var(--dur); }
.clear svg { width:.75rem; height:.75rem; }
.sfield.has .clear { opacity:1; transform:none; pointer-events:auto; }
.sfield.has .clear:hover { background:var(--line); color:var(--text); }
.sfield.has .clear:active { transform:scale(.82); background:var(--accent); color:#14161c; }
.hint { text-align:center; font-size:.8rem; color:var(--muted); margin:.5rem 0 1.75rem; }
.quick-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; font-weight:700; color:var(--muted); font-size:.9rem; }
.quick-head a { font-size:.85rem; text-decoration:none; }
.quick-head a:hover { text-decoration:underline; }
.tiles.quick { display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; }
.tiles.quick.results { justify-content:flex-start; }
.quick .tile { width:calc((100% - 3 * .9rem) / 4); aspect-ratio:1; }

/* games page + tiles */
.page-head { display:flex; align-items:baseline; gap:1rem; padding:1.5rem 0 1rem; }
.toolbar .sfield { width:min(100%,260px); }
.toolbar { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; }
.chips { display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { font:700 .85rem var(--body); color:var(--muted); background:none; border:1px solid var(--line); border-radius:99px; padding:.25rem .8rem; cursor:pointer; transition:all var(--dur); }
.chip:hover { color:var(--text); border-color:var(--muted); }
.chip.on { background:var(--text); color:var(--bg); border-color:var(--text); }

.tiles { --tile:124px; display:grid; grid-template-columns:repeat(auto-fill,var(--tile)); gap:.9rem; justify-content:start; }
html[data-cards=compact] .tiles { --tile:92px; gap:.65rem; }
.tile { position:relative; width:var(--tile); aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:0; overflow:hidden; cursor:pointer; color:#fff; font:inherit; transition:transform var(--dur), border-color var(--dur), box-shadow var(--dur); }
.tile:hover, .tile:focus-visible { transform:translateY(-3px) scale(1.04); border-color:var(--accent); box-shadow:var(--lift); }
.tile:active { transform:scale(.97); }
.tile:hover img { transform:scale(1.07); }
.tile .name { position:absolute; left:0; right:0; bottom:0; padding:.35rem .4rem .4rem; background:#101216d9; color:#f3efe6; font:700 .74rem/1.2 var(--body); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(100%); transition:opacity var(--dur), transform var(--dur); }
.tile:hover .name, .tile:focus-visible .name { opacity:1; transform:none; }
.skel { animation:pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.45; } }
.empty { text-align:center; padding:3rem 0; color:var(--muted); display:grid; gap:1rem; justify-items:center; }
.empty[hidden] { display:none; }
.lost { padding:4rem 0; display:grid; gap:1rem; justify-items:start; }
.lost h1 { font-size:6rem; color:var(--accent); }

/* tile internals */
.tile { container-type:size; }
.art { position:absolute; inset:0; display:grid; place-items:center; padding:min(7cqw, 7cqh); }
.tile[data-own] .art { padding:min(14cqw, 14cqh); }
.art img { width:100%; height:100%; object-fit:contain; display:block; opacity:0; transition:transform calc(var(--dur) * 1.5), opacity calc(var(--dur) * 1.5); }
.art img.in { opacity:1; }
.tile.pending .art { animation:pulse 1s ease-in-out infinite alternate; }
.tile.pending .art::before { content:''; width:46%; height:46%; border-radius:var(--r); background:var(--line); }
.tile:hover .art img { transform:scale(1.07); }
.letter { font:800 min(50cqw, 50cqh)/1 var(--head); letter-spacing:-.04em; text-shadow:0 2px 0 #0003; }

/* star: always there on touch, hover/favorited only with a mouse */
.star { position:absolute; top:4px; right:4px; z-index:2; width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:calc(var(--r) - 1px); background:color-mix(in srgb, var(--bg) 72%, transparent); color:var(--text); cursor:pointer; opacity:0; transform:scale(.8); transition:opacity var(--dur), transform calc(var(--dur) * 1.3) cubic-bezier(.3,1.5,.5,1), background var(--dur); }
.star svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; transition:fill var(--dur), stroke var(--dur); }
.tile:hover .star, .tile:focus-visible .star, .tile.fav .star { opacity:1; transform:none; }
.star:hover { background:var(--line); }
.star:active { transform:scale(.85); }
.tile.fav .star { color:var(--accent); }
.tile.fav .star svg { fill:var(--accent); stroke:var(--accent); }
.star.pop { animation:starpop calc(var(--dur) * 3) cubic-bezier(.3,1.4,.5,1); }
@keyframes starpop { 0% { transform:scale(.5) rotate(-30deg); } 45% { transform:scale(1.5) rotate(14deg); } 100% { transform:none; } }
@media (hover:none), (pointer:coarse) { .star { opacity:1; transform:none; } }

/* the grid: every tile the same size, as many per row as fit */
.tiles.wall { --tile:132px; grid-template-columns:repeat(auto-fill, minmax(var(--tile), 1fr)); gap:.9rem; }
html[data-cards=compact] .tiles.wall { --tile:100px; gap:.65rem; }
.wall .tile { width:auto; aspect-ratio:1; }

/* touch: no hover, so names sit on the tile quietly */
@media (hover:none) { .tile .name { opacity:1; transform:none; font-size:.68rem; background:#101216b3; } }

#doodles { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
html:not([data-bg=doodle]) #doodles { display:none; }

/* footer, toasts, top button */
.foot { max-width:var(--wrap); width:100%; margin:0 auto; padding:1rem 1.25rem 1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.to-top { position:fixed; right:1.25rem; bottom:1.25rem; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:1.1rem; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:all var(--dur); }
.to-top.show { opacity:1; pointer-events:auto; transform:none; }
.to-top:hover { border-color:var(--accent); }
.toasts { position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); display:grid; gap:.5rem; z-index:30; width:max-content; max-width:92vw; }
.toast { background:var(--text); color:var(--bg); padding:.55rem 1rem; border-radius:8px; font-weight:700; font-size:.9rem; animation:toastIn calc(var(--dur) * 1.5) ease-out; }
.toast.out { opacity:0; transition:opacity .3s; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } }

/* drawer */
.scrim { position:fixed; inset:0; background:#0009; opacity:0; transition:opacity var(--dur); z-index:20; }
.scrim.on { opacity:1; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(360px,100vw); background:var(--panel); border-left:1px solid var(--line); z-index:21; transform:translateX(105%); transition:transform calc(var(--dur) * 1.4) cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.drawer-head h2 { margin:0; }
.drawer-body { padding:1.25rem; overflow-y:auto; display:grid; gap:1.25rem; align-content:start; }
.field > label { display:flex; justify-content:space-between; font-weight:700; margin-bottom:.5rem; font-size:.9rem; }
output { color:var(--muted); font-weight:400; }
.seg, .themes { display:flex; flex-wrap:wrap; gap:.4rem; }
.seg button, .themes button { font:700 .85rem var(--body); color:var(--muted); background:none; border:1px solid var(--line); border-radius:6px; padding:.35rem .7rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:all var(--dur); }
.seg button:hover, .themes button:hover { color:var(--text); }
.seg button.on, .themes button.on { color:var(--text); border-color:var(--accent); background:var(--bg); }
.themes i { width:.9rem; height:.9rem; border-radius:50%; background:var(--sw); border:3px solid var(--sb); outline:1px solid var(--line); }
.swatches { display:flex; gap:.5rem; margin-bottom:.6rem; }
.swatches button { width:1.7rem; height:1.7rem; border-radius:50%; background:var(--c); border:2px solid transparent; cursor:pointer; transition:transform var(--dur); }
.swatches button:hover { transform:scale(1.15); }
.swatches button.on { border-color:var(--text); }
.inline { display:flex; gap:.6rem; align-items:center; }
input[type=color] { width:2.2rem; height:1.8rem; border:1px solid var(--line); background:none; border-radius:4px; padding:0; cursor:pointer; }
input[type=range] { width:100%; accent-color:var(--accent); }
.switch { display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; font-weight:700; font-size:.92rem; }
.switch small { display:block; font-weight:400; color:var(--muted); }
.switch input { accent-color:var(--accent); width:1.1rem; height:1.1rem; margin-top:.2rem; }

/* reduced motion: manual setting or OS preference */
html.reduce *, html.reduce *::before, html.reduce *::after { animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
html.reduce .banner-track { animation:none !important; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* tablet / phone */
@media (max-width:560px) {
  .top { grid-template-columns:1fr auto; gap:.5rem 1rem; padding:.75rem 1rem; }
  .nav { order:3; grid-column:1 / -1; width:100%; border-top:1px solid var(--line); padding-top:.5rem; }
  .nav a { flex:1; text-align:center; }
  #openSettings kbd, .hint { display:none; }
  main { padding:.5rem 1rem 2rem; }
  .quick .tile { width:calc((100% - 2 * .9rem) / 3); }
  .start { padding-bottom:1.5rem; }
  .banner { font-size:.75rem; }
}

/* main is not interactive, so it never gets a focus ring */
main:focus, main:focus-visible { outline:none; }

/* ── library: load-more + empty/error ───────────────────────── */
.more { display:flex; justify-content:center; align-items:center; gap:.75rem; padding:1.5rem 0 .5rem; color:var(--muted); font-size:.9rem; min-height:3rem; }
.more[hidden] { display:none; }
.dots { display:inline-flex; gap:.3rem; }
.dots i { width:.45rem; height:.45rem; border-radius:2px; background:var(--accent); animation:hop calc(var(--dur) * 4.5) ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay:calc(var(--dur) * .6); } .dots i:nth-child(3) { animation-delay:calc(var(--dur) * 1.2); }
@keyframes hop { 0%,60%,100% { transform:none; opacity:.5; } 30% { transform:translateY(-.4rem); opacity:1; } }
#sentinel { height:1px; }
.empty .row, .pstate .row { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.empty .row [hidden] { display:none; }

/* ── home: "N GAMES!" splash ───────────────────────────────── */
.wordblock { position:relative; display:flow-root; }
.splash { position:absolute; right:3%; bottom:.1rem; z-index:2; transform-origin:center; transform:rotate(-9deg); text-decoration:none; pointer-events:auto;
  font:800 .95rem/1 var(--head); letter-spacing:.01em; color:var(--accent); white-space:nowrap;
  text-shadow:2px 2px 0 color-mix(in srgb, var(--bg) 85%, #000), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
  animation:splashIn calc(var(--dur) * 3) cubic-bezier(.3,1.5,.5,1) both; }
.splash[hidden] { display:none; }
.splash > span:last-child { display:inline-block; animation:splashBeat calc(var(--dur) * 6) ease-in-out infinite; }
.splash .spark { display:inline-block; animation:spark calc(var(--dur) * 12) linear infinite; }
.splash:hover { filter:brightness(1.15); }
.splash.bump > span:last-child { animation:splashBump calc(var(--dur) * 3) cubic-bezier(.3,1.5,.5,1), splashBeat calc(var(--dur) * 6) calc(var(--dur) * 3) ease-in-out infinite; }
@keyframes splashBeat { 0%,100% { transform:scale(1); } 50% { transform:scale(1.09); } }
@keyframes splashBump { 0% { transform:scale(.6); } 60% { transform:scale(1.3); } 100% { transform:scale(1); } }
@keyframes splashIn { from { opacity:0; transform:rotate(-9deg) scale(.5); } }
@keyframes spark { to { transform:rotate(360deg); } }

/* ── game player ───────────────────────────────────────────── */
.player { display:flex; flex-direction:column; gap:.6rem; height:100%; min-height:0; }
.pbar { display:flex; align-items:center; gap:.6rem; min-height:2.4rem; }
.ptitle { flex:1; min-width:0; font-size:1.15rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pact { display:flex; gap:.4rem; flex:none; }
.pbtn { padding:.4rem .75rem; min-height:2.3rem; }
.pbtn svg { width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pbtn .pstar svg { width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; display:block; }
.pbtn[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.pbtn[aria-pressed=true] .pstar svg { fill:var(--accent); stroke:var(--accent); }
.pbtn.pop .pstar { animation:starpop calc(var(--dur) * 3) cubic-bezier(.3,1.4,.5,1); }
.stage { position:relative; flex:1; min-height:0; background:#000; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
#frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.stage:fullscreen, .stage:-webkit-full-screen { border:0; border-radius:0; width:100%; height:100%; }
.stage.pfs { position:fixed; inset:0; z-index:40; border:0; border-radius:0; height:100dvh; }
.pstate { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.7rem; padding:1.5rem; text-align:center; background:var(--panel); z-index:1; transition:opacity calc(var(--dur) * 1.5); }
.pstate[hidden] { display:none; }
.pstate.out { opacity:0; pointer-events:none; }
.ltxt { font:800 1.05rem var(--head); letter-spacing:-.01em; }
.lsub { color:var(--muted); font-size:.88rem; max-width:30ch; }
.etitle { font:800 1.35rem var(--head); letter-spacing:-.02em; }
.loader { display:flex; gap:.4rem; margin-bottom:.2rem; }
.loader i { width:.9rem; height:.9rem; border-radius:calc(var(--r) / 2); background:var(--accent); animation:tilepop calc(var(--dur) * 6) ease-in-out infinite; }
.loader i:nth-child(2) { animation-delay:calc(var(--dur) * .7); opacity:.75; } .loader i:nth-child(3) { animation-delay:calc(var(--dur) * 1.4); opacity:.5; }
@keyframes tilepop { 0%,70%,100% { transform:scale(1) rotate(0); } 35% { transform:scale(1.5) rotate(90deg); } }
.fs-exit { position:absolute; top:.6rem; right:.6rem; z-index:3; width:2.3rem; height:2.3rem; display:grid; place-items:center; border:1px solid #fff3; border-radius:var(--r); background:#000a; color:#fff; cursor:pointer; opacity:.5; transition:opacity var(--dur); }
.fs-exit:hover, .fs-exit:focus-visible { opacity:1; }
.fs-exit[hidden] { display:none; }
.fs-exit svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* playing: the game gets the screen */
body[data-view=game] { height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; }
body[data-view=game] main { min-height:0; max-width:min(1600px, 100%); padding:0 max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); }
body[data-view=game] #view-game { flex:1; min-height:0; }
body[data-view=game] .foot, body[data-view=game] .to-top { display:none; }
body[data-view=game] .top { padding-top:.55rem; padding-bottom:.55rem; max-width:min(1600px, 100%); }
@media (max-width:560px) {
  body[data-view=game] .banner, body[data-view=game] .nav { display:none; }
  body[data-view=game] .top { grid-template-columns:1fr auto; padding:.4rem .75rem; }
  body[data-view=game] #openSettings { padding:.3rem .7rem; }
  .pbtn .lbl, .pbtn span:not(.pstar) { display:none; }
  .pbtn { padding:.4rem .6rem; min-width:2.5rem; justify-content:center; }
  .ptitle { font-size:1rem; }
}
@media (max-height:520px) {          /* phones on their side: all the space to the game */
  body[data-view=game] .banner, body[data-view=game] .top { display:none; }
  .player { gap:.35rem; }
  body[data-view=game] main { padding-top:.35rem; }
}

/* random button + popular chip */
.actions { display:flex; justify-content:center; margin-top:.9rem; }
.actions + .hint { margin-top:.7rem; }
#randomBtn { margin-left:auto; }
.btn[disabled] { opacity:.6; pointer-events:none; }
@media (max-width:560px) { #randomBtn { margin-left:0; } .actions kbd { display:none; } }