/* ========================================================================
   padplayer.com — site.css
   Notepad theme. Dark green (#0F3B2E) + notepad yellow (#F4E27A) on
   paper (#FFFAE3). Serif body. Kept modest and self-contained.
   ======================================================================== */

:root {
  --green:   #0F3B2E;
  --green-2: #1B5A47;
  --yellow:  #F4E27A;
  --yellow-2: #E8D45D;
  --paper:   #FFFAE3;
  --ink:     #141210;
  --muted:   #6a6a6a;
  --line:    #d9d5b7;
  --err:     #a02b2b;
  --err-bg:  #fbe9e9;
  --ok:      #1f7a3e;
  --ok-bg:   #e8f4ec;
  --radius:  8px;
  --focus:   #F4E27A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--green); }
a:hover { text-decoration: underline; text-decoration-color: var(--yellow-2); text-decoration-thickness: 2px; }

/* ---- Header ------------------------------------------------------------ */
.pp-header {
  background: var(--green);
  color: var(--yellow);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 3px solid var(--yellow);
}
.pp-header .brand {
  font-weight: bold; font-size: 1.5rem; letter-spacing: 0.02em;
  color: var(--yellow); text-decoration: none;
}
.pp-header .tagline {
  opacity: 0.7; font-weight: normal; font-size: 0.9rem; font-style: italic; margin-left: 0.5em;
}
.pp-header nav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.95rem; }
.pp-header nav a, .pp-header nav .who {
  color: var(--yellow);
  text-decoration: none;
}
.pp-header nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pp-header .balance {
  background: var(--yellow); color: var(--green);
  padding: 0.15em 0.6em; border-radius: 4px; font-weight: bold;
}

/* ---- Main / layout ---------------------------------------------------- */
main { flex: 1; max-width: 960px; width: 100%; margin: 2rem auto; padding: 0 1.5rem; }
main.narrow { max-width: 560px; }

/* ---- Cards / hero ----------------------------------------------------- */
.card {
  background: #fff; border: 2px solid var(--green); border-radius: var(--radius);
  padding: 2rem; margin-bottom: 1.5rem;
  box-shadow: 0 2px 0 var(--green);
}
.card h1, .card h2 { margin-top: 0; color: var(--green); }

/* ---- Forms ------------------------------------------------------------ */
form.pp-form label { display: block; margin: 1rem 0 0.25rem; font-weight: bold; color: var(--green); }
form.pp-form input[type=text],
form.pp-form input[type=email],
form.pp-form input[type=password] {
  width: 100%; padding: 0.7em 0.9em;
  font: inherit; color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 4px;
  transition: border-color .1s;
}
form.pp-form input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus);
}
form.pp-form .hint { font-size: 0.85rem; color: var(--muted); margin-top: 0.25em; }
form.pp-form .row-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; }
form.pp-form .row-check input { margin-top: 0.35em; }
form.pp-form .row-check label { margin: 0; font-weight: normal; color: var(--ink); }

button, .btn {
  font: inherit; font-weight: bold;
  background: var(--green); color: var(--yellow);
  border: 2px solid var(--green);
  padding: 0.7em 1.4em; border-radius: 4px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: filter .1s;
}
button:hover, .btn:hover { filter: brightness(1.15); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary, .btn.secondary {
  background: transparent; color: var(--green);
}
button.link {
  background: none; border: 0; color: var(--green); padding: 0; font-weight: normal;
  cursor: pointer; text-decoration: underline;
}

.form-actions { display: flex; justify-content: space-between; align-items: center;
                margin-top: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.form-actions .alt { color: var(--muted); font-size: 0.9rem; }

/* ---- Messages --------------------------------------------------------- */
.msg { padding: 0.75em 1em; border-radius: 4px; margin: 1rem 0; }
.msg.err { background: var(--err-bg); border: 1px solid var(--err); color: var(--err); }
.msg.ok  { background: var(--ok-bg);  border: 1px solid var(--ok);  color: var(--ok); }
.msg.info { background: var(--yellow); color: var(--green); border: 1px solid var(--yellow-2); }
.msg.hidden { display: none; }

/* ---- Badges / pills --------------------------------------------------- */
.pill {
  display: inline-block; background: var(--yellow); color: var(--green);
  padding: 0.15em 0.6em; border-radius: 999px; font-weight: bold; font-size: 0.85rem;
}

/* ---- Games grid ------------------------------------------------------- */
.games {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.game-card {
  background: #fff; border: 2px solid var(--green); border-radius: var(--radius);
  padding: 1rem; text-decoration: none; color: inherit;
  transition: transform .1s, box-shadow .1s;
  display: block;
}
.game-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 0 var(--green);
  text-decoration: none;
}
.game-card h3 { margin: 0 0 0.3rem; color: var(--green); }
.game-card p  { margin: 0; color: var(--ink); font-size: 0.95rem; }

.empty { padding: 2rem; text-align: center; color: var(--muted); }

/* ---- Footer ----------------------------------------------------------- */
.pp-footer {
  max-width: 960px; width: 100%; margin: 3rem auto 2rem;
  padding: 1rem 1.5rem 0; font-size: 0.85rem; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---- Small screens ---------------------------------------------------- */
@media (max-width: 600px) {
  .pp-header { padding: 0.8rem 1rem; }
  .pp-header .brand { font-size: 1.25rem; }
  .pp-header .tagline { display: none; }
  .pp-header nav { gap: 0.8rem; font-size: 0.9rem; }
  main { padding: 0 1rem; margin: 1rem auto; }
  .card { padding: 1.25rem; }
}

/* ---- Legal / long-form document pages --------------------------------- */
.card h3 { color: var(--green-2); margin: 1.4rem 0 .4rem; font-size: 1.05rem; }
.card ul { padding-left: 1.4rem; }
.card li { margin: .35rem 0; }
.card h2 { margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.card h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-caps {
  font-size: 0.9rem; line-height: 1.5; background: #faf7e8;
  padding: 1em; border-left: 3px solid var(--yellow-2); border-radius: 3px;
}
kbd {
  background: #fff; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 3px; padding: .1em .4em; font-size: .85em; font-family: monospace;
}
code { background: var(--yellow); padding: 0 .3em; border-radius: 3px; font-size: .9em; }

/* ---- Section headings -------------------------------------------------- */
.section-heading { color: var(--green); margin: 2rem 0 .8rem; font-size: 1.3rem; }
.breadcrumb { margin: 0 0 1rem; font-size: .9rem; }
.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }
.lede { font-size: 1.05rem; color: #3a3a3a; }
.hint { font-size: .85rem; color: var(--muted); }
.muted { color: var(--muted); }

/* ---- Wallet ------------------------------------------------------------ */
.wallet-balance {
  text-align: center; padding: 1.5rem 1rem; margin: 1rem 0 1.5rem;
  background: var(--green); color: var(--yellow); border-radius: var(--radius);
}
.wallet-balance-label { font-size: .85rem; opacity: .8; letter-spacing: .05em; text-transform: uppercase; }
.wallet-balance-amount { font-size: 2.6rem; font-weight: bold; line-height: 1.2; margin: .2em 0; }
.wallet-balance-note { font-size: .8rem; opacity: .7; }
.wallet-topup { padding: 1rem 0; border-top: 1px solid var(--line); }
.wallet-stats {
  display: flex; gap: 2rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem;
}
.wallet-stats > div { display: flex; flex-direction: column; }
.stat-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.15rem; font-weight: bold; color: var(--green); }

/* ---- Tables (ledger + leaderboard) ------------------------------------- */
table.ledger, table.leaderboard {
  width: 100%; border-collapse: collapse; font-size: .95rem;
}
table.ledger th, table.leaderboard th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-bottom: 2px solid var(--line); padding: .5em .4em; font-weight: bold;
}
table.ledger td, table.leaderboard td {
  padding: .55em .4em; border-bottom: 1px solid #eee9d0; vertical-align: top;
}
table.ledger .num, table.leaderboard .num { text-align: right; white-space: nowrap; }
table.ledger th.num, table.leaderboard th.num { text-align: right; }
table.ledger .when, table.leaderboard .when { white-space: nowrap; color: var(--muted); font-size: .88rem; }
table.ledger .pos { color: var(--ok); font-weight: bold; }
table.ledger .neg { color: #8a4b12; }
table.leaderboard .rank { width: 2.5em; color: var(--muted); font-weight: bold; }
table.leaderboard tr.me { background: #fffbe8; }
table.leaderboard tr.me td { font-weight: bold; }
.you {
  background: var(--yellow); color: var(--green); font-size: .7rem;
  padding: .05em .4em; border-radius: 3px; font-weight: bold; margin-left: .4em;
}
.my-rank {
  background: #fffbe8; border: 1px solid var(--yellow-2); border-radius: 4px;
  padding: .7em 1em; margin-bottom: 1rem; font-size: .95rem;
}

/* ---- Game cards -------------------------------------------------------- */
.game-thumb {
  margin: -1rem -1rem .8rem; border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: #f0ecd8; aspect-ratio: 4 / 3;
}
.game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tag {
  display: inline-block; background: var(--yellow); color: var(--green);
  padding: .12em .55em; border-radius: 3px; font-size: .78rem; font-weight: bold;
}
.tag.free { background: #d8ecdd; color: #1f5c33; }
.tag.subtle { background: #efeada; color: #6a6250; font-weight: normal; }
.game-stats {
  margin-top: .6rem; font-size: .82rem; color: var(--muted);
  display: flex; gap: .9rem;
}

/* ---- Game detail ------------------------------------------------------- */
.game-detail-head { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.game-detail-thumb {
  flex: 0 0 240px; border-radius: var(--radius); overflow: hidden;
  background: #f0ecd8; aspect-ratio: 4 / 3;
}
.game-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-detail-info { flex: 1 1 300px; }
.game-detail-info h1 { margin-top: 0; }
.game-description { white-space: normal; line-height: 1.6; }
.game-actions {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.game-actions .alt { font-size: .88rem; color: var(--muted); }

/* ---- Like button ------------------------------------------------------- */
.like-btn {
  background: transparent; color: var(--muted); border: 2px solid var(--line);
  padding: .55em .9em; display: inline-flex; align-items: center; gap: .4em;
  font-weight: bold; border-radius: 4px; cursor: pointer;
}
.like-btn:hover { border-color: #c98; color: #a55; filter: none; }
.like-btn .heart { font-size: 1.1em; line-height: 1; }
.like-btn.liked { border-color: #c05; color: #c05; background: #fff0f4; }
.like-static { color: var(--muted); font-size: .9rem; }

@media (max-width: 600px) {
  .wallet-balance-amount { font-size: 2rem; }
  .game-detail-thumb { flex: 1 1 100%; }
  table.ledger .when { font-size: .8rem; }
}

/* Balance pill is a link to /wallet/ — keep it looking like a pill */
.pp-header .balance { text-decoration: none; }
.pp-header .balance:hover { filter: brightness(1.08); text-decoration: none; }

/* ---- Badges ------------------------------------------------------------ */
.badge-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.badge-item { display: flex; gap: .9rem; align-items: flex-start;
              padding: .9rem; border: 1px solid var(--line); border-radius: 6px;
              background: #fffdf5; }
.badge-item.locked { background: #faf8ee; }
.badge-medal { flex: 0 0 auto; display: block; }
.badge-body { min-width: 0; }
.badge-name { font-weight: bold; color: var(--green); display: flex;
              align-items: center; gap: .4rem; flex-wrap: wrap; }
.badge-item.locked .badge-name { color: #7d7862; }
.badge-tier { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
              padding: .1em .45em; border-radius: 3px; font-weight: bold; }
.tier-bronze    { background:#f6e9dc; color:#6b4423; }
.tier-silver    { background:#e8edf1; color:#4a5560; }
.tier-gold      { background:#fdf3d0; color:#7a6210; }
.tier-platinum  { background:#e2f0f7; color:#2d5468; }
.tier-legendary { background:#f3e6f9; color:#5b2c6f; }
.badge-desc { font-size: .9rem; margin-top: .15rem; }
.badge-meta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.badge-progress { margin-top: .4rem; }
.badge-progress .bar { height: 6px; background: #e6e2d0; border-radius: 3px; overflow: hidden; }
.badge-progress .bar span { display: block; height: 100%; background: var(--green); border-radius: 3px; }

/* Badge row inside the wallet ledger */
.ledger-badge { display: inline-flex; gap: .5rem; align-items: flex-start; }
.ledger-badge .badge-meta { margin-top: .1rem; }

/* ======================================================================
   Admin console
   ====================================================================== */
main.admin { max-width: 1180px; }

.admin-nav { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1.2rem;
             border-bottom:2px solid var(--line); padding-bottom:0; }
.admin-nav a { padding:.55em 1.1em; text-decoration:none; color:var(--muted);
               font-weight:bold; font-size:.95rem; border-radius:6px 6px 0 0;
               border:2px solid transparent; border-bottom:0; margin-bottom:-2px; }
.admin-nav a:hover { color:var(--green); background:#fffdf3; text-decoration:none; }
.admin-nav a.on { color:var(--green); background:#fff; border-color:var(--line);
                  border-bottom:2px solid #fff; }
.nav-count { background:var(--err); color:#fff; border-radius:999px;
             padding:0 .45em; font-size:.72rem; margin-left:.3em; }

/* Stat tiles */
.stat-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
             margin-bottom:1.2rem; }
.stat { background:#fff; border:2px solid var(--green); border-radius:8px; padding:1rem 1.2rem;
        display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.stat:hover { text-decoration:none; box-shadow:0 3px 0 var(--green); transform:translateY(-1px); }
.stat.alert { border-color:var(--err); }
.stat.alert .stat-num { color:var(--err); }
.stat-num { font-size:2rem; font-weight:bold; color:var(--green); line-height:1.1; }
.stat-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.stat-sub { font-size:.82rem; color:var(--muted); margin-top:.2rem; }

.admin-cols { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); }

/* Tables */
.admin-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
                  color:var(--muted); border-bottom:2px solid var(--line); padding:.45em .4em; }
.admin-table td { padding:.45em .4em; border-bottom:1px solid #eee9d0; vertical-align:top; }
.admin-table .num { text-align:right; white-space:nowrap; }
.admin-table th.num { text-align:right; }
.admin-table tr.row-bad { background:#fdf2f2; }
.admin-table .pos { color:var(--ok); }
.admin-table .neg { color:#8a4b12; }
.admin-table.scroll-y { display:block; max-height:420px; overflow-y:auto; }
.nowrap { white-space:nowrap; }
.small { font-size:.82rem; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; }
.bad { color:var(--err); font-weight:bold; }
.warn { color:var(--warn); font-weight:bold; }

/* Pills */
.pill-sm { display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
           padding:.1em .45em; border-radius:3px; font-weight:bold;
           background:#eee9d0; color:#6a6250; vertical-align:middle; }
.pill-sm.good { background:#e8f4ec; color:var(--ok); }
.pill-sm.bad  { background:#fbe9e9; color:var(--err); }
.pill-sm.warn-pill { background:#fff8dc; color:var(--warn); }
.pill-sm.role { background:var(--green); color:var(--yellow); }

.dot-online { display:inline-block; width:8px; height:8px; border-radius:50%;
              background:var(--ok); margin-right:.3em; vertical-align:middle; }
.playing { color:var(--green); font-weight:bold; }

/* Buttons */
button.mini { font-size:.76rem; padding:.25em .6em; border-width:1px; font-weight:bold; }
button.danger, .btn.danger { background:var(--err); border-color:var(--err); color:#fff; }
button.danger:hover { filter:brightness(1.1); }
button.mini.danger { background:transparent; color:var(--err); border-color:#e0b4b4; }
button.mini.secondary { background:transparent; color:var(--green); }
.action-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
              padding-top:1rem; border-top:1px solid var(--line); margin-top:1rem; }

/* Filters */
.filter-bar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.filter-bar input[type=text], .filter-bar select {
  padding:.5em .7em; font:inherit; border:2px solid var(--line); border-radius:4px; background:#fff; }
.filter-bar input[type=text] { min-width:240px; }

.player-head { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:flex-start; }
.player-balance { text-align:right; display:flex; flex-direction:column; }
.live-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }

.check-list { list-style:none; padding:0; margin:0; }
.check-list li { padding:.35em 0 .35em 1.5em; position:relative; border-bottom:1px solid #eee9d0; }
.check-list li::before { position:absolute; left:0; font-weight:bold; }
.check-list li.good::before { content:'✓'; color:var(--ok); }
.check-list li.warn::before { content:'!'; color:var(--warn); }
.check-list li.bad::before  { content:'!'; color:var(--err); }

.badge-strip { display:flex; gap:.35rem; flex-wrap:wrap; }
.ban-form { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:1rem 0; }
.ban-form input[type=text] { padding:.5em .7em; font:inherit; border:2px solid var(--line);
                             border-radius:4px; min-width:230px; }

.code-block { background:#f6f3e4; border:1px solid var(--line); border-radius:4px;
              padding:.8em; overflow-x:auto; font-size:.82rem; margin:0; }
.config-table input.cfg-input, .config-table select.cfg-input, .config-table textarea.cfg-input {
  width:100%; padding:.35em .5em; font:inherit; font-size:.88rem;
  border:2px solid var(--line); border-radius:3px; background:#fff; }
.cfg-input.saved { border-color:var(--ok); background:#f2fbf5; }
.config-table td:first-child { width:26%; }
.config-table td:nth-child(2) { width:28%; }

.pager { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:1rem; }
.pager a { padding:.35em .7em; border:1px solid var(--line); border-radius:3px;
           text-decoration:none; font-size:.88rem; }
.pager a.on { background:var(--green); color:var(--yellow); border-color:var(--green); }

@media (max-width: 720px) {
  .admin-cols { grid-template-columns:1fr; }
  .player-head { flex-direction:column; }
  .player-balance { text-align:left; }
  .admin-table { font-size:.82rem; }
}

/* ---- Game modes -------------------------------------------------------- */
.mode-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mode-card { border:2px solid var(--green); border-radius:var(--radius); padding:1.1rem;
             background:#fffdf5; display:flex; flex-direction:column; }
.mode-card.unaffordable { border-color:var(--line); background:#faf8ee; opacity:.85; }
.mode-head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.mode-head h3 { margin:0; color:var(--green); font-size:1.15rem; }
.mode-cost { font-weight:bold; color:var(--green); background:var(--yellow);
             padding:.1em .5em; border-radius:4px; white-space:nowrap; font-size:.95rem; }
.mode-card.unaffordable .mode-cost { background:#eee9d0; color:#6a6250; }
.mode-desc { font-size:.9rem; margin:.5rem 0 0; color:#3a3a3a; }
.mode-features { list-style:none; padding:0; margin:.7rem 0 1rem; font-size:.9rem; flex:1; }
.mode-features li { padding:.2em 0 .2em 1.2em; position:relative; }
.mode-features li::before { content:'+'; position:absolute; left:0; color:var(--green); font-weight:bold; }
.mode-card button, .mode-card .btn { width:100%; text-align:center; }

/* Plays-remaining readout a game can mirror in its own chrome */
.plays-left { font-weight:bold; }
.plays-left.low { color:#8a4b12; }
.plays-left.none { color:var(--err); }
.admin-table tr.row-muted { opacity:.55; }

/* ---- Game economics labelling ------------------------------------------ */
.tag.econ-free        { background:#d8ecdd; color:#1f5c33; }
.tag.econ-wager       { background:#fde8cd; color:#8a4b12; }
.tag.econ-paid        { background:#e6e1f5; color:#453a70; }
.tag.econ-paid-awards { background:#e2f0f7; color:#2d5468; }
.pill-sm.econ-free    { background:#d8ecdd; color:#1f5c33; }
.pill-sm.econ-wager   { background:#fde8cd; color:#8a4b12; }
.pill-sm.econ-paid    { background:#e6e1f5; color:#453a70; }
.econ-note { padding:.7em 1em; border-radius:5px; margin:.8rem 0; font-size:.92rem;
             border-left:4px solid var(--line); background:#faf8ee; }
.econ-note.econ-free        { border-left-color:#1f5c33; background:#f0f8f2; }
.econ-note.econ-wager       { border-left-color:#8a4b12; background:#fdf6ee; }
.econ-note.econ-paid        { border-left-color:#453a70; background:#f4f2fb; }
.econ-note.econ-paid-awards { border-left-color:#2d5468; background:#eef6fb; }
.mode-intro { font-size:1rem; color:#3a3a3a; margin:.2rem 0 1rem;
              padding-left:.9rem; border-left:3px solid var(--yellow-2); }

/* ======================================================================
   Password reveal
   ====================================================================== */
.pw-wrap { position:relative; display:block; }
.pw-wrap input { padding-right:3rem !important; }
.pw-toggle {
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  width:2.2rem; height:2.2rem; padding:0; display:flex; align-items:center;
  justify-content:center; background:transparent; border:0; border-radius:5px;
  color:var(--muted); cursor:pointer;
}
.pw-toggle:hover { background:#f2efe0; color:var(--green); filter:none; }
.pw-toggle:focus-visible { outline:3px solid var(--yellow); outline-offset:1px; }
.pw-toggle svg { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor;
                 stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pw-toggle .eye-shut { display:none; }
.pw-toggle.showing { color:var(--green); }
.pw-toggle.showing .eye-open { display:none; }
.pw-toggle.showing .eye-shut { display:block; }

/* ======================================================================
   Site notice
   ====================================================================== */
.site-notice {
  display:flex; gap:.75rem; align-items:flex-start;
  background:#fffdf2; border:1px solid var(--line-soft, #e6dfc0);
  border-left:4px solid var(--yellow-2);
  border-radius:6px; padding:.9em 1.1em; margin:1.5rem 0;
  font-size:.92rem; line-height:1.55; color:#4a4636;
}
.site-notice-icon svg { width:1.2rem; height:1.2rem; fill:none; stroke:var(--gold,#C9A227);
                        stroke-width:1.8; stroke-linecap:round; display:block; margin-top:.1rem; }
.site-notice strong { color:var(--green); }
.site-notice-compact { font-size:.85rem; color:var(--muted); margin:.8rem 0 0; }

/* ======================================================================
   Identity fallbacks — monograms instead of broken images
   ====================================================================== */
.pp-avatar {
  width:var(--s,34px); height:var(--s,34px); flex:0 0 auto;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:calc(var(--s,34px) * .38); letter-spacing:.02em;
  font-family:system-ui,sans-serif;
  background:hsl(var(--h,140) 42% 88%); color:hsl(var(--h,140) 55% 26%);
  border:1.5px solid hsl(var(--h,140) 40% 74%);
}
.game-thumb {
  display:block; position:relative; aspect-ratio:4/3; overflow:hidden;
  background:#f0ecd8; border-radius:var(--radius) var(--radius) 0 0;
}
.game-thumb img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.game-thumb.no-art img { display:none; }
.thumb-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,
    hsl(var(--h,140) 45% 82%), hsl(calc(var(--h,140) + 40) 40% 70%));
}
.thumb-mono {
  font-family:system-ui,sans-serif; font-weight:800; letter-spacing:.04em;
  font-size:2.1rem; color:hsl(var(--h,140) 60% 24%); opacity:.75;
}
.game-thumb.thumb-sm { aspect-ratio:1; width:46px; border-radius:8px; }
.game-thumb.thumb-sm .thumb-mono { font-size:1.05rem; }

/* ======================================================================
   Hero
   ====================================================================== */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--green) 0%, #14503d 55%, #0A241C 100%);
  color:var(--yellow); padding:3rem 1.5rem 2.4rem; margin-bottom:0;
  border-bottom:3px solid var(--yellow);
}
.hero-art { position:absolute; inset:0; pointer-events:none; }
.hero-art svg { width:100%; height:100%; display:block; }
.hero-inner { position:relative; max-width:1080px; margin:0 auto; }
.hero h1 { margin:0 0 .3rem; font-size:2.6rem; line-height:1.12; color:#fff; letter-spacing:-.01em; }
.hero-sub { margin:0 0 1.5rem; font-size:1.12rem; color:var(--yellow); opacity:.92; max-width:38em; }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.btn-lg { padding:.85em 1.7em; font-size:1.02rem; }
.hero .btn { background:var(--yellow); color:var(--green); border-color:var(--yellow); font-weight:bold; }
.hero .btn:hover { background:#fff; border-color:#fff; }
.hero .btn.secondary { background:transparent; color:var(--yellow); border-color:rgba(244,226,122,.55); }
.hero .btn.secondary:hover { background:rgba(244,226,122,.14); color:var(--yellow); }
.hero-link { color:var(--yellow); opacity:.85; font-size:.95rem; text-decoration:none; }
.hero-link:hover { opacity:1; text-decoration:underline; }
.hero-fine { margin:.9rem 0 0; font-size:.88rem; opacity:.72; }
.hero-stats { display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:1.8rem;
              padding-top:1.2rem; border-top:1px solid rgba(244,226,122,.2); font-size:.9rem; opacity:.85; }
.hero-stats strong { font-size:1.25rem; display:block; color:#fff; font-weight:800; line-height:1.2; }

/* ======================================================================
   Home layout
   ====================================================================== */
main.home { max-width:1080px; }
.home-grid { display:grid; gap:2rem; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; }
.col-head { font-size:.8rem; text-transform:uppercase; letter-spacing:.11em;
            color:var(--muted); margin:0 0 .9rem; font-weight:bold; font-family:system-ui,sans-serif; }
.col-more { font-size:.85rem; margin:.7rem 0 0; color:var(--muted); }
.side-block { margin-bottom:2rem; }
.empty-state { text-align:center; color:var(--muted); }
.empty-state strong { color:var(--ink); }

/* ---- Feed ---- */
.feed { list-style:none; margin:0; padding:0; }
.feed-item {
  display:flex; gap:.85rem; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:8px; padding:.85rem 1rem; margin-bottom:.6rem;
  transition:border-left-color .12s, transform .12s;
}
.feed-item:hover { transform:translateX(2px); }
.feed-badge { border-left-color:var(--gold,#C9A227); }
.feed-score { border-left-color:var(--green-2,#22B377); }
.feed-game  { border-left-color:var(--yellow-2); }
.feed-like  { border-left-color:#e0a3b4; }
.feed-join  { border-left-color:#a8bcd4; }
.feed-icon { flex:0 0 auto; display:flex; }
.feed-icon .badge-medal { display:block; }
.feed-body { min-width:0; flex:1; }
.feed-line { display:block; line-height:1.45; }
.feed-line a { text-decoration:none; }
.feed-line a:hover { text-decoration:underline; }
.feed-sub { display:block; font-size:.87rem; color:var(--muted); margin-top:.15rem; }
.feed-meta { display:block; font-size:.78rem; color:var(--muted); margin-top:.3rem; }
.feed-meta .sep, .game-stats .sep { margin:0 .4em; opacity:.5; }
.tier-name.tier-bronze    { color:#8a5a2b; }
.tier-name.tier-silver    { color:#5a6570; }
.tier-name.tier-gold      { color:#8a6d10; }
.tier-name.tier-platinum  { color:#2d5468; }
.tier-name.tier-legendary { color:#6b3a86; }
.rank-flag { background:#eef4f0; color:var(--ok); padding:.05em .45em;
             border-radius:3px; font-weight:bold; font-size:.75rem; }
.rank-flag.first { background:var(--yellow); color:var(--green); }

/* ---- Compact game cards in the sidebar ---- */
.games-compact { grid-template-columns:1fr; gap:.7rem; }
.games-compact .game-card { display:flex; gap:.8rem; padding:.7rem; align-items:stretch; }
.games-compact .game-thumb { width:72px; flex:0 0 72px; aspect-ratio:1; border-radius:6px; margin:0; }
.games-compact .game-thumb .thumb-mono { font-size:1.3rem; }
.games-compact .game-card-body { min-width:0; flex:1; display:flex; flex-direction:column; }
.games-compact h3 { font-size:1rem; margin:0 0 .15rem; }
.games-compact p { font-size:.85rem; margin:0; color:var(--muted);
                   display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.games-compact .game-meta { margin-top:.35rem; }
.games-compact .tag { font-size:.7rem; }
.games-compact .game-stats { margin-top:.3rem; font-size:.76rem; }

/* Full-size cards get a body wrapper too */
.game-card-body { display:block; padding-top:.8rem; }
.games:not(.games-compact) .game-card { padding:0 0 .9rem; overflow:hidden; }
.games:not(.games-compact) .game-card-body { padding:.9rem 1rem 0; }
.games:not(.games-compact) .game-card .game-meta,
.games:not(.games-compact) .game-card .game-stats { padding:0; }
.draft-tag { background:#a06a12; color:#fff; }

/* ---- Mini leaderboard ---- */
.mini-board { list-style:none; margin:0; padding:0; background:#fff;
              border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mini-board li { display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem;
                 border-bottom:1px solid #f0ecd8; font-size:.92rem; }
.mini-board li:last-child { border-bottom:0; }
.mini-board li.me { background:#fffbe8; font-weight:bold; }
.mb-rank { width:1.4em; color:var(--muted); font-weight:bold; font-size:.85rem; }
.mb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-score { font-weight:bold; color:var(--green); font-variant-numeric:tabular-nums; }

/* ---- Join card ---- */
.join-card { background:var(--green); color:var(--yellow); border-radius:8px; padding:1.4rem; }
.join-card h2 { color:#fff; margin:0 0 .5rem; border:0; padding:0; font-size:1.3rem; }
.join-card p { font-size:.9rem; opacity:.9; margin:0 0 .8rem; }
.join-card .btn { background:var(--yellow); color:var(--green); border-color:var(--yellow); width:100%; text-align:center; }

@media (max-width: 880px) {
  .home-grid { grid-template-columns:1fr; }
  .hero { padding:2.2rem 1.2rem 1.8rem; }
  .hero h1 { font-size:2rem; }
  .hero-sub { font-size:1rem; }
  .hero-stats { gap:1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-item, .game-card { transition:none; }
  .feed-item:hover, .game-card:hover { transform:none; }
}