/* Shelf Life — game-specific styles. Generic .game-stage/.game-frame/.game-overlay
   and .btn live in the shared assets/css/style.css. Tokens inherited. */

.sl { max-width: 840px; margin: 0 auto; padding: 0 var(--space-md); }
.sl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Screens */
.sl-screen { display: none; }
.sl-screen.is-active { display: block; }
#sl-day.sl-screen.is-active { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }

/* HUD */
.sl-hud {
  position: sticky; top: 56px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between;
  background: rgba(17,17,16,0.92); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md); margin: var(--space-md) auto var(--space-lg); max-width: 840px;
}
.sl-hud__brand { display: flex; flex-direction: column; }
.sl-hud__store { font-family: var(--font-heading); font-weight: 700; color: var(--text); }
.sl-hud__chap { font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.sl-hud__stats { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.sl-stat { text-align: right; }
.sl-stat__l { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.sl-stat__v { font-family: var(--font-heading); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Cards */
.sl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); }
.sl-title { font-size: 2.2rem; margin-bottom: var(--space-xs); }
.sl-sub { color: var(--text-secondary); margin-bottom: var(--space-lg); }
.sl-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.sl-hint { color: var(--text-muted); font-size: 0.9rem; margin-top: var(--space-sm); min-height: 1.2em; }

/* Onboarding */
.sl-field { margin-bottom: var(--space-lg); }
.sl-field > label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-xs); }
.sl-field input[type=text] {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); font-size: 1.05rem; padding: 0.6em 0.8em;
}
.sl-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sl-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.sl-world { text-align: left; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.sl-world.is-active { border-color: var(--accent); background: var(--accent-glow); }
.sl-world__name { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.sl-world__blurb { display: block; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* Plan table */
.sl-plan__head { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-md); }
.sl-plan__head h2 { margin: 0; font-size: 1.4rem; }
.sl-goal { color: var(--accent-alt); font-size: 0.9rem; }
.sl-table { width: 100%; border-collapse: collapse; }
.sl-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border); }
.sl-table td { padding: var(--space-sm); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.sl-g__name { font-family: var(--font-heading); font-weight: 600; color: var(--text); display: block; }
.sl-g__meta { font-size: 0.78rem; color: var(--text-muted); }
.sl-g__meta b { color: var(--text-secondary); }
.sl-fresh { font-size: 0.7rem; padding: 1px 6px; border-radius: var(--radius-sm); }
.sl-fresh--ok { color: var(--accent-alt); } .sl-fresh--mid { color: var(--accent); } .sl-fresh--bad { color: var(--error); } .sl-fresh--none { color: var(--text-muted); }
.sl-step { white-space: nowrap; }
.sl-step button { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 1.1rem; cursor: pointer; vertical-align: middle; }
.sl-step button:hover { border-color: var(--accent); color: var(--accent); }
.sl-step__v { display: inline-block; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.sl-cogs { font-size: 0.72rem; color: var(--text-muted); margin-left: var(--space-xs); }
.sl-orderbar { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-lg); }
.sl-order-total { color: var(--text-secondary); } .sl-order-total b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Day chrome */
.sl-daybar { width: 100%; max-width: 760px; display: flex; align-items: center; gap: var(--space-md); }
.sl-daybar__item { font-size: 0.9rem; color: var(--text-secondary); } .sl-daybar__item b { color: var(--text); font-variant-numeric: tabular-nums; }
.sl-daybar__prog { flex: 1; height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-subtle); }
.sl-daybar__prog span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 120ms linear; }
.sl-day-controls { width: 100%; max-width: 760px; display: flex; gap: var(--space-sm); align-items: center; justify-content: center; flex-wrap: wrap; }
.sl-speed { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.sl-speed button { background: var(--bg-elevated); border: 0; color: var(--text-secondary); padding: 0.5em 0.8em; cursor: pointer; font-weight: 600; }
.sl-speed button.is-active { background: var(--accent); color: var(--bg); }

/* Report */
.sl-reportcard { text-align: center; }
.sl-chapcard { background: var(--accent-alt-glow); border: 1px solid var(--accent-alt); border-radius: var(--radius-md); padding: var(--space-md); margin: var(--space-md) 0; color: var(--text); }
.sl-profit { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; margin: var(--space-md) 0; font-variant-numeric: tabular-nums; }
.sl-profit span { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.sl-profit.is-up { color: var(--accent-alt); } .sl-profit.is-down { color: var(--error); }
.sl-rrows { max-width: 380px; margin: var(--space-lg) auto; text-align: left; }
.sl-rrow { display: flex; justify-content: space-between; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.sl-rrow span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.sl-sold { max-width: 380px; margin: 0 auto var(--space-lg); text-align: left; }
.sl-sold__h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.sl-sold ul { list-style: none; padding: 0; margin: var(--space-xs) 0 0; columns: 2; }
.sl-sold li { font-size: 0.9rem; color: var(--text-secondary); }
.sl-reportcard .sl-actions { justify-content: center; }

/* First-run coach */
.sl-coach { display: flex; align-items: flex-start; gap: var(--space-sm); background: var(--accent-glow); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); color: var(--text); font-size: 0.92rem; }
.sl-coach span { flex: 1; }
.sl-coach b { color: var(--accent); }
.sl-coach__x { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.sl-coach__x:hover { color: var(--text); }
@keyframes slGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,130,0.0); } 50% { box-shadow: 0 0 0 4px rgba(200,168,130,0.35); } }
.sl-glow { animation: slGlow 1.4s ease-in-out infinite; }

/* Store-design editor */
.sl-editbar { width: 100%; max-width: 760px; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: center; }
.sl-pal { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; }
.sl-pal button { background: var(--bg-elevated); border: 0; color: var(--text-secondary); padding: 0.45em 0.7em; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.sl-pal button.is-active { background: var(--accent); color: var(--bg); }
.sl-editbar select { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: 0.45em 0.6em; }
.sl-editmsg { font-size: 0.85rem; color: var(--text-muted); }
.sl-editmsg.is-ok { color: var(--accent-alt); } .sl-editmsg.is-bad { color: var(--error); }

/* Menu button + modal */
.sl-menu-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
  width: 38px; height: 38px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 1.1rem; line-height: 1; flex-shrink: 0;
}
.sl-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.sl-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); }
.sl-modal[hidden] { display: none; }
.sl-modal__backdrop { position: absolute; inset: 0; background: rgba(8,8,7,0.72); backdrop-filter: blur(3px); }
.sl-modal__box { position: relative; z-index: 1; width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; }
.sl-modal__title { font-size: 1.3rem; margin-bottom: var(--space-md); }
.sl-modal__actions { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-md) 0; }
.sl-modal__actions .btn { width: 100%; }
.sl-modal__note { color: var(--text-muted); font-size: 0.85rem; }
.sl-locbox { max-width: 460px; text-align: left; }
.sl-loclist { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-md) 0; }
.sl-loc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.sl-loc.is-cur { border-color: var(--accent); background: var(--accent-glow); }
.sl-loc.is-lock { opacity: 0.6; }
.sl-loc__name { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--text); }
.sl-loc__meta { display: block; font-size: 0.76rem; color: var(--text-muted); }
.sl-loc__act { flex-shrink: 0; }
.sl-loc__act .btn { padding: 0.4em 0.8em; font-size: 0.85rem; }
.sl-loc__cur { font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.sl-loc__lock { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .sl-worlds { grid-template-columns: 1fr; }
  .sl-hud { top: 52px; }
  .sl-sold ul { columns: 1; }
  .sl-card { padding: var(--space-lg); }
}