/* Reading-room tokens (mirrors feed/theme.css): dark default, light only via fb:theme. */
:root{ --paper:#050906; --tile:#0a1a10; --tile-2:#0f2417; --ink:#ece6d4; --ink-soft:#b1ae9a; --ink-faint:#8d917f;
  --gold:#d9b45a; --brass:#b89a4a; --leaf:#7fc97f; --brick:#c8604f; --line:rgba(236,230,212,.14);
  --gilt:linear-gradient(135deg,#bc9741 0%,#d9b45a 38%,#e4c672 50%,#d2ae52 64%,#bc9741 100%);
  --pop-ink:#16120b; --display:"EB Garamond",Georgia,serif; --ui:"Inter",system-ui,sans-serif; }
:root[data-theme="light"]{ --paper:#d6e2d0; --tile:#e6efe0; --tile-2:#dbe7d3; --ink:#172019; --ink-soft:#4e5c4f; --ink-faint:#566456;
  --gold:#9a7a2a; --brass:#8a7230; --leaf:#2f7a4a; --brick:#a33a2c; --line:rgba(23,32,25,.16);
  --gilt:linear-gradient(135deg,#94722a 0%,#a8863a 38%,#bfa050 50%,#a8863a 64%,#94722a 100%); --pop-ink:#fff; }
*{ box-sizing:border-box } html,body{ margin:0; height:100% }
body{ background:var(--paper); color:var(--ink); font-family:var(--ui); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
button{ font:inherit; color:inherit }

/* ---- gate ---- */
.pl-gate{ max-width:360px; margin:0 auto; padding:18vh 16px 0; text-align:center }
.pl-gate h1{ font-family:var(--display); font-weight:500; font-size:34px; margin:0 0 6px }
.pl-gate p{ color:var(--ink-soft); margin:0 0 18px }
.pl-gate-row{ display:flex; gap:10px }
.pl-gate input{ flex:1; min-width:0; font:inherit; font-size:20px; letter-spacing:.3em; text-align:center; padding:11px;
  border:1px solid var(--line); border-radius:10px; background:var(--tile); color:var(--ink) }
.pl-gate input:focus{ outline:none; border-color:var(--gold) }
.pl-msg{ color:var(--brick); font-size:14px; margin-top:12px }

/* ---- app shell: top bar, goal, board, action bar ---- */
.pl-app{ height:100dvh; display:flex; flex-direction:column; max-width:520px; margin:0 auto;
  padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom) }
.pl-top{ display:flex; align-items:center; gap:10px; padding:10px 0 6px }
.pl-back, .pl-icon{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--tile); color:var(--ink-soft); text-decoration:none; cursor:pointer; flex:none }
.pl-back:hover, .pl-icon:hover{ color:var(--gold); border-color:var(--brass) }
.pl-back svg, .pl-icon svg{ width:18px; height:18px }
.pl-title{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1; margin:0 }
.pl-title small{ display:block; font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-top:3px }
.pl-spacer{ flex:1 }
.pl-pips{ display:flex; gap:6px; align-items:center }
.pl-pip{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  font-size:11px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; transition:.25s }
.pl-pip.on{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent) }
.pl-pip.done{ background:var(--gilt); color:var(--pop-ink); border-color:transparent; font-size:9px }
.pl-total{ text-align:right; min-width:58px }
.pl-total b{ display:block; font-family:var(--display); font-size:24px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; color:var(--gold) }
.pl-total span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint) }

.pl-goal{ display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 8px; font-size:13.5px; color:var(--ink-soft) }
.pl-goal b{ font-weight:700; background:var(--gilt); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:plSheen 4s ease-in-out infinite }
.pl-goal svg{ width:16px; height:16px; color:var(--gold); animation:plPulse 2.2s ease-in-out infinite }
@keyframes plSheen{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }
@keyframes plPulse{ 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.18); opacity:1 } }

.pl-stage{ flex:1; min-height:0; display:grid; place-items:center; position:relative }
#board{ display:block; border-radius:18px; touch-action:none; cursor:crosshair;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 60%,transparent), 0 0 0 5px var(--paper), 0 0 0 6px color-mix(in srgb,var(--brass) 25%,transparent), 0 18px 40px rgba(0,0,0,.45) }
.pl-shake{ animation:plShake .32s ease-out }
.pl-kick{ animation:plKick .09s ease-out }
@keyframes plKick{ 35%{ transform:translate(2px,1px) } 70%{ transform:translate(-2px,-1px) } }
@keyframes plShake{ 20%{ transform:translate(-4px,2px) } 40%{ transform:translate(4px,-3px) } 60%{ transform:translate(-3px,1px) } 80%{ transform:translate(2px,-1px) } }

.pl-bar{ display:flex; align-items:center; gap:12px; padding:10px 0 22px; min-height:78px }
.pl-prompt{ flex:1; font-size:14px; line-height:1.35; color:var(--ink-soft) }
.pl-prompt b{ color:var(--ink) }
.pl-btn{ border:0; border-radius:12px; padding:13px 20px; font-weight:700; font-size:15px; cursor:pointer;
  background:var(--gilt); color:var(--pop-ink); box-shadow:0 2px 0 color-mix(in srgb,var(--brass) 70%,#000); transition:transform .12s, opacity .2s; white-space:nowrap }
.pl-btn:active{ transform:translateY(2px); box-shadow:none }
.pl-btn[hidden]{ display:none }
.pl-btn.ghost{ background:var(--tile); color:var(--ink); border:1px solid var(--line); box-shadow:none }
.pl-btn.pop{ animation:plBtnIn .35s cubic-bezier(.2,1.6,.4,1) }
@keyframes plBtnIn{ from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ---- results card ---- */
.pl-card{ position:absolute; inset:0; display:grid; place-items:center; padding:12px; background:color-mix(in srgb,var(--paper) 70%,transparent) }
.pl-card[hidden]{ display:none }
.pl-card-in{ width:min(360px,100%); background:var(--tile); border:1px solid color-mix(in srgb,var(--brass) 55%,transparent); border-radius:18px;
  padding:22px 20px 18px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.5); animation:plBtnIn .4s cubic-bezier(.2,1.4,.4,1) }
.pl-kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin:0 }
.pl-big{ font-family:var(--display); font-size:64px; font-weight:600; line-height:1; margin:6px 0 2px; font-variant-numeric:tabular-nums;
  background:var(--gilt); -webkit-background-clip:text; background-clip:text; color:transparent }
.pl-of{ color:var(--ink-faint); font-size:13px; margin:0 0 14px }
.pl-rounds{ display:grid; gap:6px; margin:0 0 14px; padding:0; list-style:none }
.pl-rounds li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--tile-2); font-size:14px }
.pl-rounds li .t{ flex:1; text-align:left; font-weight:600 }
.pl-rounds li .s{ font-variant-numeric:tabular-nums; color:var(--gold); font-weight:700 }
.pl-tier{ display:inline-block; width:10px; height:10px; border-radius:50% }
.pl-best{ text-align:left; font-size:13px; color:var(--ink-soft); margin:0 0 14px }
.pl-best h3{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:0 0 6px; font-weight:600 }
.pl-best ol{ margin:0; padding-left:22px; font-variant-numeric:tabular-nums }
.pl-best li.me{ color:var(--gold); font-weight:700 }
.pl-note{ font-size:11.5px; color:var(--ink-faint); margin:10px 0 0 }

/* ---- settings drawer ---- */
.pl-drawer{ position:fixed; inset:0; z-index:20; display:flex; justify-content:flex-end; background:rgba(0,0,0,.45) }
.pl-drawer[hidden]{ display:none }
.pl-panel{ width:min(380px,100%); height:100%; overflow:auto; background:var(--tile); border-left:1px solid var(--line); padding:18px 16px 40px }
.pl-panel h2{ font-family:var(--display); font-weight:500; font-size:24px; margin:0 0 4px }
.pl-panel h3{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:20px 0 8px; font-weight:600 }
.pl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px }
.pl-row small{ display:block; color:var(--ink-faint); font-size:11.5px }
.pl-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--gold) }
.pl-group{ font-size:12.5px; font-weight:700; color:var(--ink); margin:14px 0 2px; padding-top:10px; border-top:1px solid var(--line) }
.pl-slider{ padding:6px 0 }
.pl-slider label{ display:flex; justify-content:space-between; font-size:13.5px }
.pl-slider output{ color:var(--gold); font-variant-numeric:tabular-nums; font-weight:600 }
.pl-slider input{ width:100%; accent-color:var(--gold) }
.pl-panel .pl-btn{ padding:9px 14px; font-size:13px }
.pl-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.pl-seed{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink-soft); word-break:break-all }

.pl-ver{ position:fixed; right:6px; bottom:4px; font-size:10px; opacity:.35; pointer-events:none; font-variant-numeric:tabular-nums; z-index:30 }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (prefers-reduced-motion: reduce){ .pl-goal b, .pl-goal svg, .pl-shake, .pl-kick, .pl-btn.pop, .pl-card-in{ animation:none } }

/* ---- public page extras (body[data-pred=public]) ---- */
.pl-app[hidden]{ display:none }
.pl-pub .pl-app{ height:calc(100dvh - var(--fb-bar-h,37px)) }
.pl-pub{ height:auto; min-height:100%; overscroll-behavior:auto }
.pl-lb{ text-align:left; margin:0 0 12px; font-size:13px }
.pl-lbstat{ margin:0; padding:8px 0; color:var(--ink-soft); font-size:13px; text-align:center }
.pl-xp{ color:var(--gold); font-weight:700 }
.pl-share{ display:flex; justify-content:center; margin:0 0 6px }
.pl-share .pl-btn{ padding:9px 16px; font-size:13px }
.pl-soon{ max-width:420px; margin:0 auto; padding:9vh 20px 0; text-align:center }
.pl-soon svg{ width:64px; height:64px; color:var(--gold) }
.pl-soon h1{ font-family:var(--display); font-weight:500; font-size:clamp(30px,8vw,40px); line-height:1.1; margin:14px 0 8px }
.pl-soon p{ color:var(--ink-soft); margin:0 0 6px; font-size:16px }
.pl-soon .when{ color:var(--ink); font-weight:700; font-size:20px; margin:14px 0 6px }
.pl-foot{ max-width:640px; margin:0 auto; padding:34px 16px 90px; color:var(--ink-soft); font-size:15px; line-height:1.6; border-top:1px solid var(--line) }
.pl-foot h2{ font-family:var(--display); font-weight:500; font-size:24px; color:var(--ink); margin:22px 0 6px }
.pl-foot h3{ font-size:16px; color:var(--ink); margin:16px 0 2px }
.pl-foot ul{ padding-left:20px; margin:6px 0 12px }
.pl-foot a{ color:var(--ink) }
/* The sign-in CTA's styles live in feed/feed.css (200 KB), which this page does not load: a scoped copy. */
.pl-lb .fb-savescore-cta{ display:block; margin:0 0 10px; padding:10px 12px; border-radius:12px; text-align:center; text-decoration:none; color:#fff;
  font:800 14px/1.25 var(--ui); background:linear-gradient(135deg, var(--crimson,#b3261e), color-mix(in srgb, var(--crimson,#b3261e) 72%, #000)); border:1px solid rgba(255,255,255,.18) }
.pl-lb .fb-ss-sub{ display:block; margin-top:3px; font:500 11.5px/1.35 var(--ui); opacity:.85 }
/* A narrow card: let "pts · off" wrap so the player name keeps its room. */
.pl-lb .dcl-row{ gap:6px }
.pl-lb .dcl-time{ font-size:12px; white-space:normal; text-align:right; max-width:10ch; line-height:1.25 }