:root {
  --border: #7869c4;
  --screen: #40318d;
  --text: #a59ff0;
  --bright: #ffffff;
  --heart: #e0404a;
  --card: #4a3c9c;
  --s1: #d6342c; --s2: #f08a1c; --s3: #f4cf22; --s4: #47a948; --s5: #2e6ec4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--border);
  color: var(--text);
  font-family: "VT323", ui-monospace, "Courier New", monospace;
  font-size: 22px;
  line-height: 1.2;
  padding: clamp(10px, 3vw, 40px);
  min-height: 100vh;
}
a { color: var(--bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

.screen {
  background: var(--screen);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
  min-height: calc(100vh - 2 * clamp(10px, 3vw, 40px));
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

.top { margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-size: clamp(36px, 6.5vw, 60px); line-height: 1; color: var(--text); white-space: nowrap; } /* same light blue as the C64 text */
.brand:hover { text-decoration: none; }
.brand { display: inline-flex; flex-direction: column; }
.tagline { font-size: .3em; letter-spacing: .03em; margin-top: .45em; }
.heart { width: .62em; height: .56em; vertical-align: -.01em; margin: 0 .03em; }
nav { font-size: 1.2em; display: flex; gap: 1.2em; }
.muted { opacity: .5; }


.prompt { text-transform: uppercase; margin-bottom: 12px; }
.count { color: var(--bright); margin-bottom: 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { background: var(--card); border: 2px solid var(--border); padding: 10px; display: flex; flex-direction: column; color: var(--text); }
.card:hover { border-color: var(--bright); text-decoration: none; }
.thumb { aspect-ratio: 1; background: #fff; margin-bottom: 8px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .name { color: var(--bright); font-size: 1.1em; }
.card .sub { font-size: .85em; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .price { color: var(--s3); margin-top: 6px; }

.back { margin-bottom: 16px; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 760px) { .product { grid-template-columns: 1fr; } }
.gallery #main { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; border: 2px solid var(--border); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 8px; }
.thumbs img { aspect-ratio: 1; object-fit: cover; background: #fff; cursor: pointer; border: 2px solid var(--border); }
.thumbs img:hover { border-color: var(--bright); }
.info h1 { color: var(--bright); font-weight: normal; font-size: 2em; line-height: 1; }
.info .sub { margin-top: 6px; }
.info .price { color: var(--s3); font-size: 1.6em; margin: 12px 0; }

fieldset { border: 0; margin: 14px 0; }
legend { margin-bottom: 6px; }
legend b { color: var(--bright); font-weight: normal; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  font: inherit; font-size: .9em; color: var(--bright); background: var(--card);
  border: 2px solid var(--border); padding: 2px 10px; cursor: pointer; min-width: 44px;
}
.opt.on { border-color: var(--bright); background: var(--border); }
.opt:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.opt.swatch { width: 34px; height: 34px; min-width: 0; padding: 0; background: var(--sw); }
.opt.swatch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.opt.swatch.on { outline: 2px solid var(--bright); outline-offset: 2px; }
.opt.swatch:disabled { text-decoration: none; }

.buy {
  font: inherit; font-size: 1.2em; width: 100%; margin: 16px 0; padding: 10px;
  background: var(--bright); color: var(--screen); border: 0; cursor: pointer;
}
.buy:disabled { background: var(--card); color: var(--text); cursor: default; }
.desc { font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: #dcd8ff; }
.desc p, .desc ul { margin: 0 0 10px; }
.desc ul { padding-left: 20px; }

footer { font-size: .8em; text-align: center; opacity: .75; margin-top: 32px; }

.added { margin-top: -6px; }
.problem { color: var(--s3); margin-bottom: 12px; }
.lines { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 20px; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 2px solid var(--border); padding: 8px; }
.line img { width: 72px; height: 72px; object-fit: cover; background: #fff; }
.line .amt { color: var(--s3); }
.qty { margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.qty button { font: inherit; background: var(--screen); color: var(--bright); border: 2px solid var(--border); min-width: 32px; cursor: pointer; }
.qty .rm { margin-left: 10px; padding: 0 8px; font-size: .8em; }
.totals { max-width: 420px; margin-left: auto; }
.totals p { display: flex; justify-content: space-between; margin-bottom: 4px; }
.totals p span { color: var(--bright); }

.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; font-size: 1em; }
.cats a { border: 2px solid var(--border); padding: 2px 10px; background: var(--card); }
.cats a span { color: var(--s3); }
.cats a.on { background: var(--bright); color: var(--screen); text-decoration: none; }
.cats a.on span { color: var(--screen); }
.cat { margin-bottom: 36px; }
.cat h2 { font-weight: normal; font-size: 1.5em; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cat h2 .blocks { display: inline-block; min-width: 2.2em; color: var(--text); }
.cat h2 small { font-size: .55em; color: var(--text); }
.more { margin-top: 14px; text-align: right; }

/* Blog */
.blog-h1 { color: var(--bright); font-weight: normal; font-size: 1.6em; margin: 6px 0 2px; }
.posts { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.post-entry { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 18px; padding: 12px 14px; background: var(--card); border: 2px solid var(--border); color: var(--text); }
.post-entry:hover { border-color: var(--bright); text-decoration: none; }
.post-date { color: var(--s3); }
.post-title { color: var(--bright); font-size: 1.2em; }
.post-sum { grid-column: 2; font-size: .9em; }
@media (max-width: 560px) { .post-entry { grid-template-columns: 1fr; } .post-sum { grid-column: 1; } }
.feed { font-size: .85em; }
.post { max-width: 720px; }
.post h1 { color: var(--bright); font-weight: normal; font-size: 2.2em; line-height: 1.05; }
.byline { color: var(--s3); margin: 8px 0 22px; font-size: .9em; }
.draft { color: var(--s3); border: 2px dashed var(--s3); padding: 4px 10px; display: inline-block; margin-bottom: 14px; }
.post-body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; color: #e4e1ff; }
.post-body p, .post-body ul, .post-body ol, .post-body pre, .post-body blockquote, .post-body img { margin: 0 0 1.1em; }
.post-body h2, .post-body h3 { font-family: "VT323", monospace; font-weight: normal; color: var(--bright); font-size: 1.7em; line-height: 1.1; margin: 1.4em 0 .5em; }
.post-body h3 { font-size: 1.4em; }
.post-body a { color: var(--bright); text-decoration: underline; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body img { max-width: 100%; height: auto; border: 2px solid var(--border); }
.post-body code { font-family: "VT323", monospace; font-size: 1.15em; color: var(--bright); }
.post-body pre { background: var(--screen); border: 2px solid var(--border); padding: 12px 14px; overflow-x: auto; }
.post-body pre code { color: var(--text); }
.post-body blockquote { border-left: 4px solid var(--border); padding-left: 14px; color: var(--text); }

/* Standing pages (Hazelwood): wider than a post, the pictures full width */
.page { max-width: 900px; }
.page .post-body img { width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.page .post-body > p:first-child { margin-bottom: 1.4em; }
.page .post-body em { color: var(--text); }

/* members' login (src/play.ts) and the play button on /hazelwood-pc */
.login-form { display: grid; gap: 14px; max-width: 360px; margin: 1.4em 0; }
.login-form label { display: grid; gap: 4px; }
.login-form input { font: inherit; background: var(--screen); color: var(--bright); border: 2px solid var(--border); padding: 6px 8px; }
.login-form button, .play-button { font: inherit; background: var(--bright); color: var(--screen); border: 2px solid var(--border); padding: 6px 16px; cursor: pointer; justify-self: start; text-decoration: none; display: inline-block; }
.post-body a.play-button { color: var(--screen); text-decoration: none; }
.post-body a.play-button:hover, .login-form button:hover { background: var(--border); color: var(--bright); text-decoration: none; }
.login-error { color: #ff7777; }

/* Hazelwood's Founder's Edition (src/founders.ts) */
.login-form select, .login-form textarea { font: inherit; background: var(--screen); color: var(--bright); border: 2px solid var(--border); padding: 6px 8px; }
.bug-form { max-width: 560px; }
.founders .dim { opacity: .7; }
.founders .flash { color: var(--bright); border-left: 4px solid var(--bright); padding-left: 10px; }
.founders .builds { padding-left: 1.2em; }
.founders .bug { border-top: 2px solid var(--border); padding-top: 8px; margin-top: 12px; }
.founders form.inline { display: inline; }
.founders select { font: inherit; background: var(--screen); color: var(--bright); border: 2px solid var(--border); }
button.linkish { font: inherit; background: none; border: none; color: var(--bright); cursor: pointer; padding: 0; text-decoration: underline; }

/* The beta program (src/beta.ts): the founders' styles, plus tick boxes, the agreement and the profile code */
.login-form label.check { display: flex; gap: 10px; align-items: flex-start; }
.login-form label.check input { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; padding: 0; }
.hp { position: absolute; left: -9999px; }
.founders .agreement { border: 2px solid var(--border); padding: 4px 16px; margin: 1.2em 0; }
.founders .code { color: var(--bright); font-size: 2em; letter-spacing: 2px; }
.founders .credit { color: var(--bright); border-left: 4px solid var(--bright); padding-left: 10px; }
.founders pre.signed { white-space: pre-wrap; font: inherit; border: 2px solid var(--border); padding: 12px 14px; }

/* The jukebox (/jukebox) */
.jukebox h1 { color: var(--bright); font-weight: normal; font-size: 2em; line-height: 1; margin-bottom: 8px; }
.jb { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 760px) { .jb { grid-template-columns: 1fr; } .jb-list { order: 2; } }
.jb-head { color: var(--bright); margin-bottom: 6px; }
.tunes { background: var(--card); border: 2px solid var(--border); max-height: 520px; overflow-y: auto; }
.tune { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; padding: 4px 10px; cursor: pointer; }
.tune .n { color: var(--bright); display: block; }
.tune .a { font-size: .8em; display: block; }
.tune:hover { background: var(--border); }
.tune.on { background: var(--bright); color: var(--screen); }
.tune.on .n { color: var(--screen); }
.jb-empty { padding: 12px; }
.jb-deck { display: flex; flex-direction: column; gap: 10px; }
#scope { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border: 2px solid var(--border); }
@media (max-width: 600px) { #scope { aspect-ratio: 4 / 3; } }
.np { min-height: 3.6em; }
.np-title { color: var(--bright); font-size: 1.4em; line-height: 1; }
.np-released { font-size: .85em; }
.jb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jb-ctl button { font: inherit; color: var(--bright); background: var(--card); border: 2px solid var(--border); padding: 2px 12px; cursor: pointer; }
.jb-ctl button:hover { border-color: var(--bright); }
#btnPlay { background: var(--bright); color: var(--screen); min-width: 5.5em; }
.jb-time { color: var(--s3); min-width: 3em; }
.jb-sub { display: inline-flex; align-items: center; gap: 6px; }
.jb-sub[hidden] { display: none; }
.jb-vol { display: inline-flex; align-items: center; gap: 6px; }
.jb-vol input { width: 90px; accent-color: var(--bright); }
.jb-note { margin-top: 16px; font-size: .85em; }
.jb-own { display: block; margin-top: 8px; padding: 6px 10px; text-align: center; color: var(--bright); border: 2px dashed var(--border); cursor: pointer; }
.jb-own:hover, .jb-own:focus-within { border-color: var(--bright); }
.jb-own input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jb-own span { display: block; font-size: .8em; color: var(--text); }
.jb-acct { font-size: .8em; margin-top: 6px; }
.tune-row .keep:disabled { cursor: default; opacity: .7; }
.jb.drop .tunes, .jb.drop #scope, .jb.drop .jb-own { border-color: var(--bright); border-style: dashed; }
.tune.own .a { color: var(--s3); }

/* Site admin (/admin, src/analytics.ts) */
.site-admin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 1em 0; }
.site-admin .stats div { border: 2px solid var(--border); padding: 8px 10px; }
.site-admin .stats b { display: block; font-size: 2em; color: var(--bright); font-weight: normal; line-height: 1; }
.site-admin .tbl { overflow-x: auto; }
.site-admin table { border-collapse: collapse; width: 100%; font-size: .95em; }
.site-admin th, .site-admin td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.site-admin th { color: var(--bright); font-weight: normal; }
.site-admin .bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin: 1em 0 1.6em; border-bottom: 2px solid var(--border); }
.site-admin .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 6px; }
.site-admin .bar span { display: block; }
.site-admin .bar em { position: absolute; bottom: -1.4em; left: 0; font-size: .7em; font-style: normal; opacity: .7; white-space: nowrap; }
.site-admin .legend span { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; }
.site-admin .k-human { background: #6fd36f; }
.site-admin .k-browser { background: #a59ff0; }
.site-admin .k-bot { background: #e0a050; }
.site-admin .k-scanner { background: #d65050; }
.site-admin .kind { padding: 0 4px; color: #000; white-space: nowrap; }

/* Shop customer accounts (src/customers.ts) */
.cart-account { margin-top: 1.2em; }
.account-box { border: 2px solid var(--border); padding: 12px 14px; margin: 1.4em 0; max-width: 560px; }
.account-box h2 { color: var(--bright); font-size: 1em; font-weight: normal; margin-bottom: 6px; }
.account-box .login-form { margin: 1em 0 0; }
.orders { display: grid; gap: 10px; margin: 1.2em 0; }
.order-row { display: grid; gap: 2px; border: 2px solid var(--border); padding: 8px 12px; color: var(--text); text-decoration: none; }
.order-row:hover { border-color: var(--bright); }
.order-head { display: flex; justify-content: space-between; gap: 12px; color: var(--bright); }
.order-status { color: var(--s3); }
.order-track { margin: -4px 0 4px 14px; }
.account-password { margin: 1.4em 0 .6em; }
.account-password summary { cursor: pointer; color: var(--bright); }
.linkish { font: inherit; background: none; border: 0; color: var(--bright); cursor: pointer; padding: 0; text-decoration: underline; }
.admin-table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.admin-table th, .admin-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.inline-form button { font: inherit; background: var(--bright); color: var(--screen); border: 0; padding: 2px 10px; cursor: pointer; }
.flash-note { color: var(--bright); border-left: 4px solid var(--bright); padding-left: 10px; margin: 10px 0; }
.find-orders { margin: .8em 0; }

/* Admin: shop orders (src/adminOrders.ts) */
.admin-orders { max-width: none; }
.admin-orders .dim { opacity: .7; }
.admin-orders h2 { margin-top: 1.4em; }
.admin-scroll { overflow-x: auto; }
.admin-orders .admin-table td { vertical-align: top; }
.st { color: var(--bright); }
.st-failed { color: #ff7777; }
.st-paid, .st-submitted, .st-in_production { color: var(--s3); }
.st-shipped, .st-delivered { color: #8fdc8f; }
.st-canceled, .st-pending { opacity: .6; }

/* The jukebox's picking page (/admin/jukebox) */
.tune-row { display: flex; align-items: stretch; }
.tune-row .tune { flex: 1; min-width: 0; }
.tune-row .keep { font: inherit; background: none; color: var(--text); border: 1px solid var(--border); padding: 0 8px; cursor: pointer; margin: 2px 0 2px 4px; }
.tune-row .keep.on { background: var(--bright); color: var(--screen); }
.tune-row[hidden] { display: none; }
.jb-filter { margin-right: 16px; }
.jb-filter input[type=search] { font: inherit; background: var(--screen); color: var(--bright); border: 2px solid var(--border); padding: 2px 6px; }

/* The admin (src/adminNav.ts, src/admin.ts): the bar on every admin page, and the front page's parts */
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 2px solid var(--border); padding: 6px 10px; margin: 0 0 1em; }
.admin-nav strong { color: var(--bright); font-weight: normal; text-decoration: none; }
.admin-nav strong::before { content: ">"; }
.admin-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.admin-part { border: 2px solid var(--border); padding: 8px 12px; }
.admin-part h3 { margin: 0 0 .3em; }
.admin-part p { margin: .3em 0; }

/* The club (/club): the pin and tee mockups in a row, stacking on a phone. */
.club-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1.4em 0; }
.club-pics figure { margin: 0; }
.club-pics img { width: 100%; height: auto; display: block; border: 2px solid var(--border); background: #fff; }
.club-pics figcaption { font-size: .85em; margin-top: 4px; }
.club-box h3 { color: var(--bright); font-size: 1em; font-weight: normal; margin: 1em 0 4px; }

/* My PETSCII pictures (src/petscii.ts): the screens drawn in the browser from the character ROM */
.petscii-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin: 1.4em 0; }
.petscii-pic { margin: 0; }
.petscii-pic canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; border: 12px solid #6c5eb5; box-sizing: border-box; background: #352879; }
.petscii-pic figcaption { font-size: .85em; margin-top: 6px; line-height: 1.5; }
.petscii-pic .account-password { margin: .2em 0 0; }