/* PlayGamesMore - original arcade-night theme. Mobile first; wide screens use the width, small ones waste no height. */
:root {
  --bg: #0e1018; --surface: #171a27; --surface2: #1f2333; --line: #2a2f45;
  --text: #e8ebf5; --muted: #9aa3bd; --accent: #ffd23f; --accent-ink: #1a1500; --link: #5ee0ff; --hot: #ff4f87;
  --radius: 10px; --gap: 12px;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f4f5fa; --surface: #fff; --surface2: #eceef7; --line: #d8dbea; --text: #161a2b; --muted: #596080; --accent: #e8a900; --accent-ink: #1a1500; --link: #0a6bb5; --hot: #d1235b; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img, iframe, video { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gap); }
main.wrap { padding-top: 10px; padding-bottom: 28px; }

/* header: one tight row + a wrapping category strip (no scroll panels) */
.top { background: var(--surface); border-bottom: 2px solid var(--accent); }
.top-row { display: flex; align-items: center; gap: 12px; padding-top: 7px; padding-bottom: 5px; }
.logo { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none !important; font-style: italic; }
.logo b { color: var(--text); font-weight: 800; }
.tag { display: none; color: var(--muted); font-size: .85rem; }
.all-cats { margin-left: auto; font-size: .85rem; font-weight: 600; }
.cats { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 7px; font-size: .84rem; }
.cats a { color: var(--muted); font-weight: 600; white-space: nowrap; }
.cats a:hover { color: var(--accent); text-decoration: none; }

.section-h { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; font-weight: 700; }
.section-h::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--hot); margin-right: 8px; border-radius: 2px; }

/* cards: compact row on phones (thumb left), image-on-top from tablet up */
.card { display: flex; gap: 10px; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.card .thumb { flex: 0 0 104px; align-self: stretch; background: var(--surface2); display: block; position: relative; min-height: 78px; }
.card .thumb img, .list .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--surface2), var(--surface2) 8px, var(--surface) 8px, var(--surface) 16px); }
.card .body { padding: 8px 10px 8px 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.card h2 { font-size: .98rem; line-height: 1.25; margin: 2px 0 4px; font-weight: 700; }
.card h2 a { color: var(--text); }
.card h2 a:hover { color: var(--accent); text-decoration: none; }
.kicker { color: var(--hot); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.meta { color: var(--muted); font-size: .8rem; margin: 0; }
.meta a { color: var(--muted); text-decoration: underline; }

/* the first story is a full-width image card with the title over it */
.hero { display: grid; gap: var(--gap); }
.card.lead { display: block; position: relative; border: 0; }
.card.lead .thumb { display: block; aspect-ratio: 16 / 9; min-height: 0; }
.card.lead .body { position: absolute; inset: auto 0 0 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(8, 9, 16, .92)); }
.card.lead h2 { font-size: 1.3rem; }
.card.lead h2 a { color: #fff; }
.card.lead .meta { color: #c9cee0; }

.grid { display: grid; gap: var(--gap); }
.split { display: block; }
.side { display: none; }
.pills, .cat-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pills a, .cat-cloud a { display: inline-block; padding: 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; color: var(--text); font-size: .85rem; }
.pills a:hover, .cat-cloud a:hover { border-color: var(--accent); text-decoration: none; }
.pills small, .cat-cloud small { color: var(--muted); margin-left: 3px; }
.cat-cloud { margin-top: 12px; gap: 7px; }

.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl-head { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.cl-head b { color: var(--text, inherit); margin-right: 8px; }
.cl-text { margin: 0; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 4px; font-size: .9rem; }
.pager a, .pager b { padding: 5px 9px; border-radius: 6px; }
.pager a { background: var(--surface); border: 1px solid var(--line); }
.pager b { background: var(--accent); color: var(--accent-ink); }
.pager-mid { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pager i { color: var(--muted); font-style: normal; }

/* archive lists */
.arch-h { margin: 6px 0 10px; }
.arch-h h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.kicker-static { margin: 0; color: var(--hot); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list .thumb { flex: 0 0 96px; position: relative; background: var(--surface2); min-height: 84px; }
.list li > div { padding: 8px 10px 8px 0; min-width: 0; }
.list h2 { font-size: 1rem; line-height: 1.25; margin: 0 0 2px; }
.list h2 a { color: var(--text); }
.list .ex { display: none; color: var(--muted); font-size: .88rem; margin: 4px 0 0; }

/* single post */
.post { max-width: 780px; margin: 4px auto 0; }
.post-h h1 { font-size: 1.65rem; line-height: 1.15; margin: 4px 0 6px; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; font-size: .75rem; }
.chips a { background: var(--hot); color: #fff; padding: 1px 8px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.chips.tags { margin-top: 18px; color: var(--muted); align-items: center; }
.chips.tags a { background: var(--surface2); color: var(--text); text-transform: none; letter-spacing: 0; }
.featured { margin: 10px calc(-1 * var(--gap)); }
.featured img { display: block; width: 100%; }
.entry { font-size: 1.06rem; line-height: 1.65; margin-top: 12px; overflow-wrap: anywhere; }
.entry > :first-child { margin-top: 0; }
.entry p { margin: 0 0 1em; }
.entry h2, .entry h3, .entry h4 { line-height: 1.2; margin: 1.4em 0 .5em; }
.entry h2 { font-size: 1.45rem; } .entry h3 { font-size: 1.2rem; }
.entry a { text-decoration: underline; text-underline-offset: 2px; }
.entry figure { margin: 1em 0; }
.entry figure img { display: block; margin: 0 auto; }
.entry figcaption, .wp-element-caption { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 4px; }
.entry blockquote { margin: 1em 0; padding: .1em 1em; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }
.entry blockquote p { margin: .6em 0; }
.entry pre, .entry code { background: var(--surface2); border-radius: 6px; font-size: .92em; }
.entry pre { padding: 10px 12px; overflow-x: auto; }
.entry code { padding: 1px 5px; }
.entry hr, .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.entry ul, .entry ol { padding-left: 1.3em; margin: 0 0 1em; }
.entry li { margin: .2em 0; }
.entry table { border-collapse: collapse; width: 100%; font-size: .92rem; display: block; overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.entry th { background: var(--surface2); }
.entry sup { line-height: 0; }
.alignleft, .alignright { max-width: 50%; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; text-align: center; }
.has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; }
.has-small-font-size { font-size: .86em; } .has-medium-font-size { font-size: 1.12em; }
.has-large-font-size { font-size: 1.3em; } .has-x-large-font-size { font-size: 1.6em; }
[class*="-background-color"] { color: #111; padding: .7em 1em; border-radius: 8px; }
[class*="-background-color"] a { color: #003d8f; }
.has-pale-cyan-blue-background-color { background: #8ed1fc; }
.has-luminous-vivid-amber-background-color { background: #fcb900; }
.has-vivid-green-cyan-background-color { background: #00d084; }
.has-black-color { color: #000; }

/* embeds */
.embed { position: relative; margin: 1em 0; }
.embed-video { aspect-ratio: 16 / 9; }
.embed-video.embed-short { aspect-ratio: 9 / 16; max-width: 360px; margin-left: auto; margin-right: auto; }
.embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.embed-spotify iframe { width: 100%; border: 0; border-radius: 12px; }
.entry iframe[src*="youtube"], .entry iframe[src*="youtu.be"], .entry iframe[src*="rosebud"] { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.entry iframe { border: 0; }
.entry .twitter-tweet, .entry .tiktok-embed { margin-left: auto !important; margin-right: auto !important; }
.puzzleme { margin: 1em 0; background: var(--surface); border-radius: 8px; padding: 4px; }
.pm-embed-div { min-height: 120px; }
.puzzleme-credit { color: var(--muted); font-size: .8rem; text-align: center; margin: 4px 0; }

.prevnext { display: grid; gap: 8px; margin: 22px auto 0; max-width: 780px; }
.prevnext a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--text); }
.prevnext a:hover { border-color: var(--accent); text-decoration: none; }
.prevnext small { display: block; color: var(--hot); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.prevnext span { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.prevnext > span:empty { display: none; }

.comments { max-width: 780px; margin: 26px auto 0; }
.comments h2 { font-size: 1.2rem; } .comments h2 small { color: var(--muted); font-weight: 400; font-size: .8rem; }
.comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comments li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; overflow-wrap: anywhere; }
.comments .c-h { margin: 0 0 3px; font-size: .85rem; color: var(--muted); }
.comments .c-h b { color: var(--text); }
.comments .c-b { font-size: .95rem; }
.comments .pingback { opacity: .85; }
.related { margin-top: 26px; }

.foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .85rem; }
.foot-row { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; padding-bottom: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* tablet: two columns, image-on-top cards */
@media (min-width: 600px) {
  :root { --gap: 16px; }
  .tag { display: inline; }
  .hero { grid-template-columns: repeat(2, 1fr); }
  .card.lead { grid-column: 1 / -1; }
  .card.lead h2 { font-size: 1.7rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .post-h h1 { font-size: 2.1rem; }
  .featured { margin-left: 0; margin-right: 0; }
  .featured img { border-radius: var(--radius); }
  .alignleft { float: left; margin: .3em 1em .6em 0; } .alignright { float: right; margin: .3em 0 .6em 1em; }
  .prevnext { grid-template-columns: 1fr 1fr; }
  .prevnext a[rel="next"] { text-align: right; grid-column: 2; }
  .list .ex { display: block; }
  .foot-row { flex-direction: row; justify-content: space-between; }
}
/* desktop: lead story beside a 2x2 block, sidebar of category pills */
@media (min-width: 900px) {
  .hero { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
  .card.lead { grid-column: 1; grid-row: 1 / span 2; }
  .card.lead .thumb { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .hero .card:not(.lead) { display: block; }
  .hero .card:not(.lead) .thumb { aspect-ratio: 16 / 10; min-height: 0; }
  .hero .card:not(.lead) .body { padding: 8px 10px 10px; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
  .side { display: block; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid .card { display: block; }
  .grid .card .thumb { aspect-ratio: 16 / 10; min-height: 0; }
  .grid .card .body { padding: 8px 10px 10px; }
  .list { grid-template-columns: repeat(2, 1fr); }
  .list .thumb { flex-basis: 130px; }
}
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } .split { grid-template-columns: minmax(0, 1fr) 270px; } }

/* account area, login and comments form */
.acct { display: inline-flex; gap: 10px; align-items: center; font-size: .85rem; font-weight: 600; }
.top-row .acct { margin-left: 6px; }
.acct-name { color: var(--muted); max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-card { max-width: 420px; margin: 18px auto; }
.login-card h1 { margin: 0 0 6px; font-size: 1.5rem; }
.login-card label, .comment-form label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .9rem; }
.login-card input, .comment-form textarea { width: 100%; padding: 11px 12px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.btn-primary { margin-top: 14px; padding: 11px 18px; min-height: 44px; font: inherit; font-weight: 700; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
.btn-primary:disabled { opacity: .6; }
.form-error { background: rgba(255, 79, 135, .12); border-left: 4px solid var(--hot); padding: 8px 12px; border-radius: 6px; margin: 10px 0; }
.login-links { margin-top: 14px; }
.comment-form { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.comment-note { margin-top: 14px; }
.c-del { margin-top: 6px; } .c-del button { font: inherit; font-size: .8rem; color: var(--hot); background: none; border: 1px solid var(--hot); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.preview-banner { background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; font-weight: 600; margin: 8px 0; } .preview-banner a { color: inherit; }