/* ---- Rich emerald palette, rooted in the classic Gamasutra gear green ----
   All theme-able colours are tokens on :root; the dark theme below only
   re-points the tokens, so the rest of the sheet stays theme-agnostic. */
:root{
  color-scheme:light;

  /* ink + surfaces */
  --ink:#222; --paper:#f2f5f1; --card:#fff;
  --rule:#cbd6cc; --row-alt:#e8efe9; --row-hover:#fbf7e3;
  --muted:#6c7c70; --strong:#445; --label:#88958b; --zero:#bbb;
  --link:#1c6b3a;

  /* brand greens + accent */
  --gama-green:#1f6e3b; --gama-green-dk:#0f4d28; --gama-leaf:#2a8a4d; --accent:#b14a32;

  /* derived bits */
  --selection:#bfe6cf; --focus-ring:rgba(42,138,77,.22);
  --thumb-bg:#fff; --hatch-a:#eef2ee; --hatch-b:#e6ece6;

  /* masthead */
  --masthead-from:#258050; --masthead-to:var(--gama-green-dk);
  --masthead-border:#0a3a1d; --masthead-ink:#fff;
  --masthead-sub:#bfe6cf; --masthead-tagline:#aadcc0;

  /* table head */
  --head-from:#2c7d4c; --head-to:#1f6e3b; --head-border:#3d8a5a; --head-ink:#fff;
  --head-hover-from:#358a58; --head-hover-to:#247044; --head-focus:#cdebd8;

  /* category badges */
  --badge-ink:#fff; --cat-indie:#2a8a4d; --cat-audio:#7a5a2a; --cat-middleware:#2f5f6e;
}

/* ---- Dark theme: deep green-charcoal, brand emerald preserved ---- */
:root[data-theme="dark"]{
  color-scheme:dark;

  --ink:#dce4dc; --paper:#10140f; --card:#171c16;
  --rule:#2b352b; --row-alt:#1c221b; --row-hover:#2a2616;
  --muted:#93a294; --strong:#b9c6ba; --label:#7d8a7e; --zero:#566055;
  --link:#5fc98a;

  --gama-green:#2f7d49; --gama-leaf:#4fb377; --accent:#e0795e;

  --selection:#244b30; --focus-ring:rgba(95,201,138,.30);
  --thumb-bg:#0c0f0b; --hatch-a:#1b211a; --hatch-b:#222a21;

  --masthead-from:#1c6e40; --masthead-to:#0a3a20;
  --masthead-border:#072413; --masthead-tagline:#9fd3b6;

  --head-from:#24523a; --head-to:#193a29; --head-border:#2f6044;
  --head-hover-from:#2c6347; --head-hover-to:#214f38; --head-focus:#bfe6cf;

  --cat-indie:#2f9d57; --cat-audio:#8a6a32; --cat-middleware:#37728a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:14px/1.5 "Lucida Grande","Segoe UI",Verdana,sans-serif;
}
::selection{background:var(--selection); color:var(--ink)}
.wrap{max-width:1040px; margin:0 auto; padding:0 16px}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--gama-leaf); outline-offset:2px; border-radius:1px}

#masthead{
  background:linear-gradient(var(--masthead-from),var(--masthead-to));
  color:var(--masthead-ink); border-bottom:3px solid var(--masthead-border); padding:14px 0 16px;
}
#masthead .wrap{position:relative}
#masthead h1{margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:normal}
#masthead .gama{font-weight:bold; letter-spacing:-.5px}
#masthead .sub{font-weight:bold; letter-spacing:-.5px}
.tagline{margin:.3em 0 0; color:var(--masthead-tagline); font-size:12px; font-style:italic}

.theme-toggle{
  position:absolute; top:0; right:16px;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  background:rgba(255,255,255,.12); color:var(--masthead-ink);
  border:1px solid rgba(255,255,255,.38); border-radius:4px;
  font-size:16px; line-height:1; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.22)}
.theme-toggle:focus-visible{outline:2px solid var(--head-focus); outline-offset:2px}

#toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0 10px}
#search{flex:1 1 260px; min-width:200px; padding:6px 9px; border:1px solid var(--rule); background:var(--card); color:var(--ink)}
#category,#sortSel{padding:6px; border:1px solid var(--rule); background:var(--card); color:var(--ink)}
#search:focus,#category:focus,#sortSel:focus{
  outline:none; border-color:var(--gama-leaf);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.chk{font-size:12px; color:var(--strong); display:flex; gap:5px; align-items:center; white-space:nowrap}
.chk input{accent-color:var(--gama-green)}
.count{margin-left:auto; color:var(--muted); font-size:12px}

/* editorial note: the publication is still going */
.livenote{
  margin:16px 0 0; padding:9px 13px; border-left:3px solid var(--gama-leaf);
  background:var(--row-alt); color:var(--strong);
  font-size:13px; line-height:1.5; border-radius:0 3px 3px 0;
}
.livenote a{color:var(--link); font-weight:bold}

/* desktop: rather than squeeze the columns, keep a comfortable min width and
   let the table scroll sideways, with edge fades hinting there's more. */
.table-scroll{position:relative}
.table-wrap{overflow-x:auto}
#grid{min-width:1080px}
.table-scroll::before,.table-scroll::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:3;
  pointer-events:none; opacity:0; transition:opacity .15s ease;
}
.table-scroll::before{left:0; background:linear-gradient(to right, var(--paper), transparent)}
.table-scroll::after{right:0; background:linear-gradient(to left, var(--paper), transparent)}
.table-scroll.can-left::before{opacity:1}
.table-scroll.can-right::after{opacity:1}
table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule)}
thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(var(--head-from),var(--head-to)); color:var(--head-ink); text-align:left;
  font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:bold;
  padding:7px 9px; border-right:1px solid var(--head-border); white-space:nowrap;
}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{background:linear-gradient(var(--head-hover-from),var(--head-hover-to))}
thead th.sortable:focus-visible{
  outline:2px solid var(--head-focus); outline-offset:-3px;
  background:linear-gradient(var(--head-hover-from),var(--head-hover-to));
}
thead th.num{text-align:right}
th.sorted-asc::after{content:" ▲"; font-size:9px}
th.sorted-desc::after{content:" ▼"; font-size:9px}

tbody td{padding:7px 9px 2px; border-bottom:none; vertical-align:top}
/* leftmost rank column: each entry's stable balanced rank (1..N), unchanged
   when the table is re-sorted or filtered */
.rank-col{width:1%; text-align:right}
.rank-cell{
  text-align:right; padding-right:10px; padding-top:9px;
  font-variant-numeric:tabular-nums; font-size:12px; font-weight:bold;
  color:var(--muted); border-bottom:1px solid var(--rule);
}
/* full-height thumbnail: the cell is rowspan'd over both rows of the entry,
   and the image fills it via an absolutely-positioned layer */
.thumb-col{width:74px}
.thumb-cell{width:74px; padding:0; position:relative; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.thumb-cell a{position:absolute; inset:0; display:block}
img.thumb{width:100%; height:100%; min-height:64px; object-fit:cover; display:block; background:var(--thumb-bg)}
.thumb-cell.no-thumb{background:repeating-linear-gradient(45deg,var(--hatch-a),var(--hatch-a) 4px,var(--hatch-b) 4px,var(--hatch-b) 8px)}

/* an entry spans two rows: a headline row + a wide detail row beneath it */
.main-cell{padding-right:16px}
.detail-cell{padding:0 9px 9px; border-bottom:1px solid var(--rule)}
tbody tr{transition:background-color .12s ease}
tbody tr:nth-child(4n+3),tbody tr:nth-child(4n+4){background:var(--row-alt)}
tbody tr.r-main:hover,
tbody tr.r-main:hover + tr.r-detail,
tbody tr.r-detail:hover,
tbody tr.r-main:has(+ tr.r-detail:hover){background:var(--row-hover)}
td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--strong)}
.hn-metric span{white-space:nowrap}
.hn-metric span + span{margin-left:6px; color:var(--muted)}
.title-cell{font-weight:bold; font-family:Georgia,serif; font-size:15px; line-height:1.25}
.byline{display:none}
.summary{display:block; font-family:"Lucida Grande",sans-serif; font-weight:normal; font-size:12.5px; line-height:1.5; color:var(--muted); max-width:90ch}
.game{color:var(--accent); font-size:11px; font-style:italic; font-weight:normal; display:block}
.mirrors{display:block; margin-top:3px; font-size:10.5px; font-weight:normal; font-family:"Lucida Grande",sans-serif; color:var(--muted)}
.mirror-links,.discussions,.sales-link{display:block}
.discussions{margin-top:1px}
.sales-chip{display:inline-block; margin-top:2px; padding:1px 5px; border:1px solid var(--rule); border-radius:2px; color:var(--strong); background:var(--row-alt)}
.line-label{color:var(--label); font-size:10px; text-transform:uppercase; letter-spacing:.4px}
.mirrors a{color:var(--muted); text-decoration:none}
.mirrors a:hover{color:var(--link); text-decoration:underline}
.primary-link{font-weight:bold; color:var(--strong)}
.cat{display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--badge-ink); background:var(--gama-green); padding:1px 6px; border-radius:2px; white-space:nowrap}
.cat.indie{background:var(--cat-indie)}
.cat.audio{background:var(--cat-audio)}
.cat.middleware{background:var(--cat-middleware)}
.notable{color:var(--accent); font-weight:bold; cursor:help}
.author-link{color:inherit; text-decoration:none; border-bottom:1px dotted var(--rule)}
.author-link:hover{color:var(--link); border-bottom-color:currentColor}
.est{color:var(--muted); cursor:help}
.zero{color:var(--zero)}
/* vintage dateline above the headline — desktop uses the table columns,
   so it's hidden there and revealed in the mobile card layout */
.meta-top{display:none}
/* On desktop the column headers are the primary sort UI, but the dropdown stays
   visible too so the balanced default — and the metric sorts without their own
   column (Reddit, copies sold, submissions) — remain reachable. */
#sortSel{flex:0 1 auto}
.sort-label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--label); align-self:center}

/* Desktop echo of the balanced "why it ranked" hint (the meta line that hosts
   the mobile version is hidden on desktop). */
.why-balanced{
  display:inline-block; margin-bottom:8px; font-size:11.5px; font-weight:bold;
  color:var(--gama-leaf); cursor:help;
}

.empty{padding:30px 12px; text-align:center; color:var(--muted); font-style:italic}
.status{color:var(--muted); padding:14px 0; font-style:italic}
footer{margin-top:24px; padding:16px 0 40px; border-top:1px solid var(--rule); color:var(--muted); font-size:11px}
footer .wrap{line-height:1.6}

@media(max-width:720px){
  .wrap{padding:0 12px}
  #masthead{padding:18px 0 20px}
  /* keep the title clear of the toggle; the wordmark wraps as one unit */
  #masthead h1{font-size:32px; line-height:1.08; padding-right:44px; text-wrap:balance}
  .tagline{font-size:13px; line-height:1.45; max-width:34em; text-wrap:pretty}
  .theme-toggle{top:2px; right:12px}

  /* sort via dropdown instead of column headers */
  #toolbar{gap:9px; margin:14px 0 12px}
  /* the meta-top chip carries the balanced hint here, and the dropdown goes
     full-width, so the desktop label + detail-row echo are redundant */
  .sort-label,.why-balanced{display:none}
  #search,#category,#sortSel{width:100%; min-width:0; font-size:16px; min-height:40px}
  /* leading icons on the mobile controls (data-URI SVGs, tinted per theme) */
  #search,#category,#sortSel{
    background-repeat:no-repeat; background-position:11px center; background-size:16px;
    padding-left:36px;
  }
  #search{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>")}
  #category{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='3 4 21 4 14 12 14 20 10 18 10 12'/></svg>")}
  #sortSel{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='14' y2='12'/><line x1='4' y1='18' x2='9' y2='18'/></svg>")}
  :root[data-theme="dark"] #search{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>")}
  :root[data-theme="dark"] #category{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='3 4 21 4 14 12 14 20 10 18 10 12'/></svg>")}
  :root[data-theme="dark"] #sortSel{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='14' y2='12'/><line x1='4' y1='18' x2='9' y2='18'/></svg>")}
  #sortSel{display:block; flex:1 1 100%}
  #search{flex:1 1 100%}
  #category{flex:1 1 100%}
  .chk{font-size:14px}
  .chk input{width:18px; height:18px}
  .count{margin-left:0; margin-inline-start:auto; font-size:13px; white-space:nowrap}

  /* cards, not a wide grid: drop the horizontal scroll + fades */
  .table-wrap{overflow-x:visible}
  #grid{min-width:0}
  .table-scroll::before,.table-scroll::after{display:none}
  thead{display:none}
  table,tbody,tbody tr{display:block}
  table{border:none; background:transparent}
  tbody td{display:block; padding:0; border:none}

  /* the entry's two rows fuse into one card: headline half + detail half */
  tbody tr.r-main,tbody tr.r-detail{
    display:block; background:var(--card) !important;
    border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  }
  tbody tr.r-main{border-top:1px solid var(--rule); margin-top:12px; padding:11px 12px 0; overflow:hidden}
  tbody tr.r-detail{border-bottom:1px solid var(--rule); padding:2px 12px 12px}
  .detail-cell{border:none}

  /* drop the rank + desktop metadata columns; the card keeps only the
     thumbnail (2nd cell) and main cell (3rd), with the meta line + byline
     carrying the rest */
  tbody tr.r-main td:first-child{display:none}
  tbody tr.r-main td:nth-child(n+4){display:none}

  .thumb-cell{
    position:static; float:right; width:64px; height:64px; overflow:hidden;
    padding:0; margin:2px 0 8px 12px; border:1px solid var(--rule);
  }
  .thumb-cell.no-thumb{display:none}
  .thumb-cell a{position:static; width:64px; height:64px}
  img.thumb{width:64px; height:64px; min-height:0}
  .main-cell{padding:0}

  /* one clean meta line: date · type · (sort signal only when it adds info) */
  .meta-top{
    display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px;
    margin-bottom:7px; font-size:12px; color:var(--muted);
  }
  .meta-top .m-date{font-weight:bold; color:var(--strong)}
  .m-sort{font-size:11.5px; font-weight:bold; color:var(--gama-leaf)}
  .title-cell{display:block; font-size:20px; line-height:1.18}
  .game{margin-top:3px}
  .byline{display:block; margin-top:5px; font-size:13px; font-style:italic; color:var(--muted)}
  .summary{display:block; max-width:none; margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink)}
  .mirrors{margin-top:10px; padding-top:8px; border-top:1px solid var(--rule); font-size:12px; line-height:1.5}
}

/* Respect users who ask for less motion */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* ---- Print: a clean, ink-friendly reading list (force light) ---- */
@media print{
  body{background:#fff; color:#000; font-size:11px}
  #toolbar,.rank-col,.rank-cell,.thumb-col,.thumb-cell,#status,.theme-toggle,.livenote{display:none}
  .table-wrap{overflow:visible}
  #grid{min-width:0}
  .table-scroll::before,.table-scroll::after{display:none}
  #masthead{background:none; color:#000; border-bottom:2px solid #000; padding:0 0 8px}
  #masthead .sub,.tagline{color:#333}
  table,thead th{border-color:#999}
  thead th{position:static; background:none; color:#000; border-bottom:1px solid #000}
  tbody tr{background:none !important; break-inside:avoid}
  tbody tr.r-main{break-after:avoid}  /* keep a headline with its detail row */
  a{color:#000; text-decoration:none}
  footer{border-top:1px solid #999; color:#333}
}