/* fREgs extras for mechsicko.art: smaller body text, Lily Stack and the Photobooth.
   Kept apart from fregs.css so game updates can drop in without losing it. */

/* ---- body text at 8px (your font is crisp at multiples of 8); titles, buttons and tabs stay as they are ---- */
.lede,.card .lede,.modal-card p,.legend,.species-line,.fact span,.pick small,.preview,.policy p,.policy li,
.goal p:not(.goalnum):not(.kicker),.oddstable,.oddstable th,.tagline,.foot,.restock,.chip,.wallet small,
.overlay p:not(.big),.empty p,.frogcard .lede,.rank,.booth-status,.booth-hint,.blabel,.bcheck{font-size:8px;line-height:2}
.lede{line-height:2.25;max-width:72ch}
.kicker{font-size:8px;letter-spacing:.04em}
.rank .pos{font-size:16px}
.rank .nm{font-size:12px}

/* ---- games picker with a third game ---- */
.picker.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}
.pick .pickpad{width:28px;height:auto;flex:none}

/* ---- Lily Stack ---- */
.stackbox canvas{aspect-ratio:144/176!important;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;touch-action:none;outline:none}

/* ---- Photobooth ---- */
.booth-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--sage);box-shadow:4px 4px 0 var(--sage);padding:14px 16px;margin-right:4px;background:var(--surface)}
.booth-cta>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 240px}
.booth{align-items:start;overflow:auto;z-index:40}
.booth-card{max-width:980px;width:100%;gap:18px;margin:auto}
.booth-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px;align-items:start}
.booth-preview{display:flex;flex-direction:column;gap:8px;min-width:0}
#boothCv{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border:1px solid #000;box-shadow:6px 6px 0 var(--sage);touch-action:none;background:var(--bg)}
.booth-controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.bopt{display:flex;flex-direction:column;gap:8px}
.bopt[hidden]{display:none}
.blabel{color:var(--sage);text-transform:uppercase}
.booth select,.booth input[type="text"]{font:inherit;font-size:12px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:0;min-width:0;text-transform:uppercase}
.booth select{flex:1;cursor:pointer}
.booth form.row{flex-wrap:nowrap}
.booth form input{flex:1;width:0}
.booth input[type="range"]{width:100%;accent-color:var(--sage)}
.bcheck{display:flex;align-items:center;gap:8px;text-transform:uppercase;cursor:pointer}
.bcheck input{accent-color:var(--sage);width:16px;height:16px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.segb{border:0;background:none;padding:10px 6px;font-size:12px;cursor:pointer;color:var(--muted);text-transform:uppercase}
.segb[aria-pressed="true"]{background:var(--sage);color:#fff}
.booth-status{color:var(--muted);min-height:16px}
.booth-actions .btn{flex:1}
@media (max-width:820px){
  .booth{padding:0}
  .booth-card{min-height:100%;max-width:none;box-shadow:none;border:0;padding:16px 12px calc(24px + env(safe-area-inset-bottom))}
  .booth-body{grid-template-columns:1fr;gap:16px}
  #boothCv{box-shadow:4px 4px 0 var(--sage)}
  .picker.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .picker.three .pick{flex-direction:column;align-items:flex-start;gap:6px;padding:8px}
}

/* ---- the game guide: same body / title split ---- */
html body .gbody p,html body .gbody li,html body .gbody dd,html body .shot figcaption,
html body .loop span,html body .buttons span{font-size:8px;line-height:2.1}
html body .big-lede{font-size:12px!important;line-height:2!important}
html body .scard p{font-size:8px!important;line-height:2!important}