:root{
  --bg:#0f1533; --bg2:#14204d; --card:#17285f;
  --text:#ffffff; --muted:#cfe1ff; --shadow:rgba(0,0,0,.5);
  --accent:#5ad1ff; --accent2:#6ea3ff; --accent3:#9af0ff;
  --warn:#ffd166; --danger:#ff6b6b;
}

/* Layout scale + container */
.container{width:min(1200px,96vw)}
.card{
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(23,40,95,.92), rgba(23,40,95,.88));
  min-height: clamp(540px, 80vh, 760px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2.2vw, 24px);
}

/* clickable ticker chip */
.ticker-btn{
  font: inherit;
  background: var(--chip-bg, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent, #6bdcff);
  cursor: pointer;
}
.ticker-btn:hover{ filter: brightness(1.1); }

/* popover */
.popover{
  position: absolute;
  z-index: 9999;
  width: 300px;
}
.popover.hidden{ display:none; }
.popover .card{
  background: #1e2a3a;
  color: #e7f0ff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 14px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.popover .close{
  float: right;
  background: transparent;
  border: 0;
  color: #9fb6d1;
  cursor: pointer;
  font-size: 16px;
}
.popover .title{
  font-weight: 700;
  margin: 2px 0 6px;
}
.popover .blurb{
  font-size: 14px;
  opacity: .9;
  margin-bottom: 8px;
}
.popover ul{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  opacity: .95;
}


/* HERO header */
.hero{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);

  /* ⬇ Reserve vertical space so panels don’t bump the badges/logo */
  min-height: 72px;
  padding: 6px 0;
}
.brand{display:flex; align-items:center; gap:16px;}
.logo{
  width:72px; height:72px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffe6f0, #ff99cc);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#4b1840; font-size:1.6rem;
  box-shadow:0 0 16px rgba(255,255,255,.18);
}
.title{
  margin:0;
  font-weight:800;
  font-size: clamp(32px, 4.2vw, 48px);
  letter-spacing:.4px;
}
.subtitle{
  margin:.2rem 0 0 0;
  color: var(--accent3);
  font-weight:700;
  font-size: clamp(16px, 1.8vw, 20px);
  opacity:.95;
}

/* status badges */
.status{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.badge{
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.16);
  font-weight:800; white-space:nowrap;
}

/* Hero body (menu) */
.hero-body{
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(10px, 3vw, 24px);
}
.intro{max-width: 920px; font-size: clamp(16px, 2vw, 18px)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
button.xl{padding: 16px 22px; font-size: clamp(16px, 2vw, 18px)}
button{font-size: clamp(14px, 1.8vw, 16px)}

@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; gap:12px}
  .status{justify-content:flex-start}
  .logo{width:64px;height:64px;font-size:1.4rem}
}

*{box-sizing:border-box}
html,body{height:100%}

/* ⬇️ Anchor content to the top and allow full scrolling */
body{
  margin:0;
  font-family:"Nunito",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 15% 0%, var(--bg2), var(--bg));
  color:var(--text);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
}

/* When a modal is open, prevent page scroll */
body.modal-open{
  overflow: hidden;
}

/* keep the app centered with some breathing room */
.container{width:min(1100px,96vw); margin: 28px auto;}
.card{background:rgba(23,40,95,.9);backdrop-filter:saturate(120%) blur(14px);border:2px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 18px 60px var(--shadow);padding:28px}

h1{margin:0;font-size:34px;letter-spacing:.4px;display:flex;align-items:center;gap:10px}
h1 .spark{font-size:28px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.pill{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.16);font-weight:800}
.coins{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}

button{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:16px;border:2px solid transparent;background:rgba(255,255,255,.14);cursor:pointer;user-select:none;transition:.18s transform,.18s background,.18s box-shadow;font-weight:800;letter-spacing:.2px}
button:hover{transform:translateY(-2px) scale(1.02);background:rgba(255,255,255,.2)}
button:active{transform:translateY(0) scale(.98)}
button:focus-visible{outline:4px solid rgba(90,209,255,.5)}
.primary{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#0a1a2e;border:none;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.sm{padding:8px 10px;border-radius:12px;font-size:.95rem}

/* ==== GAME GRID (Portfolio + Round Info over Stocks) ==== */
.grid{
  display:grid;
  /* Prevent content from forcing overflow; keep columns aligned to Stocks card edges */
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap:18px;
  align-items:start;
}
/* Let panels shrink inside the grid so long text/bubbles don’t push columns wider */
.grid > .panel{ min-width: 0; }

/* Stocks panel spans full width under the two top panels */
#panel-stocks{ grid-column: 1 / -1; }

.panel{padding:18px;border-radius:16px;background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.14)}

.stocks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stock{padding:14px;border-radius:16px;background:rgba(255,255,255,.14);border:2px solid transparent;display:flex;flex-direction:column;gap:10px;transition:.18s}
.stock:hover{border-color:var(--accent)}
.stock h3{margin:0;font-size:22px;color:var(--accent3)}
.muted{color:var(--muted)}
.news{font-size:16px;line-height:1.35}
.choices{display:flex;gap:10px;margin-top:auto}
.choice{flex:1;text-align:center}
.boosts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.boosts button{font-size:.95rem}

.good{border:2px solid rgba(90,209,255,.7);border-radius:10px}
.bad{border:2px solid rgba(255,107,107,.7);border-radius:10px}
.neutral{border:2px solid rgba(255,209,102,.7);border-radius:10px}

.kbd{font-family:ui-monospace,monospace;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.2);padding:3px 8px;border-radius:8px}

.footer{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.hidden{display:none !important}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:26px}

.avatar{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ffe6f0, #ff99cc);display:flex;align-items:center;justify-content:center;font-weight:900;color:#4b1840;font-size:1.3rem;box-shadow:0 0 10px rgba(255,255,255,.25)}

.progress{height:14px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.progress > div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

.tag{font-size:14px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800}
.list{display:grid;gap:12px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(23,40,95,.95);border:2px solid rgba(255,255,255,.12);padding:12px 18px;border-radius:999px;font-weight:800}

/* Speech bubbles */
.bubble{position:relative;display:inline-block;background:#0f1f47;border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:10px 12px}
.bubble:after{content:"";position:absolute;left:14px;bottom:-10px;border-width:10px;border-style:solid;border-color:#0f1f47 transparent transparent transparent}

/* Confetti */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.piece{position:absolute;width:10px;height:10px;border-radius:2px;opacity:.9;animation:fall 1200ms linear forwards}
@keyframes fall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}

/* Shop */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shop-item{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.16)}
.shop-item h4{margin:0}
.owned{opacity:.7}
.inv{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Coach slot */
.coach{display:flex;align-items:flex-start;gap:10px}
.coach .who{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%, #ffe6f0, #ff99cc);color:#4b1840;font-weight:900}
.coach .bubble{max-width:100%; word-break:break-word;}
/* ^ ensures the coach message never pushes the right column out of alignment */

@media(max-width:900px){
  .grid{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;gap:10px}
  h1{font-size:28px}
}

/* ==== PiggyStreet UI polish (overrides) ==== */

/* Responsive grid for the cards area */
#stocks, .stocks{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr));
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  #stocks, .stocks{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 640px){
  #stocks, .stocks{ grid-template-columns: 1fr; }
}

/* Macro banner (the CPI/Fed/oil strip) */
.macro-banner{
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(180deg, rgba(90,209,255,.10), rgba(90,209,255,.05));
  border:2px solid rgba(255,255,255,.14);
  padding:10px 14px; border-radius:16px;
  box-shadow:0 10px 28px var(--shadow);
  margin-bottom:6px;
}
.macro-banner strong{ color: var(--accent3); }
.macro-banner .muted{ color: var(--muted); }

/* Card polish */
.stock{
  background: rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:16px 14px 14px;
  box-shadow:0 12px 36px var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.stock:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); }

/* Header row */
.stock .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Ticker & sector chips */
.ticker-btn{
  font-weight:800; letter-spacing:.4px;
  background: rgba(90,209,255,.12);
  color: var(--accent3);
  border:2px solid rgba(90,209,255,.35);
  padding:8px 12px; border-radius:999px;
}
.ticker-btn:focus{ outline:3px solid rgba(90,209,255,.45); outline-offset:2px; }

.sector-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.92rem; color:#e8f1ff;
  background: rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px;
  cursor:pointer;
}

/* Headline + odds */
.news{ margin:10px 0 8px; color:#e6f0ff; line-height:1.35; }
.odds{ color:var(--muted); font-size:.92rem; }

/* Boost buttons become a tidy grid */
.boosts{ display:grid; grid-template-columns: 1fr; gap:8px; margin-top:10px; }
@media (min-width: 520px){ .boosts{ grid-template-columns: repeat(3, 1fr); } }

button.sm{
  width:100%;
  background: rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.18);
  border-radius:12px;
}
button.sm:disabled{ opacity:.55; }

/* Pick button */
.choices{ margin-top:8px; }
.choice{
  width:100%;
  background: linear-gradient(180deg, rgba(110,163,255,.22), rgba(154,240,255,.18));
  border:2px solid rgba(110,163,255,.45);
  color:#eaffff;
  font-weight:800;
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 8px 26px var(--shadow);
}

/* Popover tiny tweaks */
.popover.hidden{ display:none !important; pointer-events:none; }
.popover .card{ background:#0f1f3a; }

/* Make the portfolio/progress panels match */
.panel{ background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.14); border-radius:16px; }

/* ==== Boost button layout fix ==== */

/* Put boosts in a tidy row that wraps */
.boosts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

/* Make each boost a consistent pill */
.boosts button.sm{
  flex:1 1 30%;
  min-width:90px;
  padding:8px 10px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  box-shadow:none;
  text-align:center;
}

/* On smaller screens stack them */
@media (max-width:600px){
  .boosts button.sm{ flex:1 1 100%; }
}

/* ==== Pick button polish ==== */

.stock .choices{
  margin-top:auto;
  display:flex;
}

.stock .choices .choice{
  flex:1;
  text-align:center;
  background:linear-gradient(180deg, rgba(110,163,255,.25), rgba(154,240,255,.18));
  border:2px solid rgba(110,163,255,.45);
  color:#f0fbff;
  font-weight:800;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 6px 18px var(--shadow);
  transition:.15s transform,.15s filter;
}

.stock .choices .choice:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.stock .choices .choice:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* ==== Round Info panel polish ==== */

.panel.round-info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border-radius:16px;
}

.panel.round-info h3,
.panel.round-info .title{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:800;
}

.panel.round-info p{
  margin:0;
  line-height:1.45;
  color:var(--muted);
  font-size:.95rem;
}

/* bubble message inside Round Info */
.panel.round-info .bubble{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  line-height:1.4;
}

.panel.round-info .bubble img,
.panel.round-info .bubble .icon{
  flex:0 0 auto;
  width:28px; height:28px;
}

/* Allocation controls */
.alloc{ margin-top:8px; }
.alloc label{ font-weight:700; font-size:.92rem; color:#e8f1ff; }
.alloc .alloc-val{ color:var(--accent3); }
.alloc input[type="range"]{ width:100%; accent-color: var(--accent); }
.alloc-footer{ grid-column:1 / -1; margin-top:6px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.12); }

/* Market close overlay */
.market-close{
  position:fixed; inset:0; background:rgba(10,15,30,.65);
  display:grid; place-items:center; pointer-events:none; opacity:0; transition:.25s opacity;
  z-index:99999;
  overscroll-behavior:contain; /* avoid background scroll chaining */
}
.market-close.show{ opacity:1; pointer-events:auto; }
.market-close .curtain{
  width:min(520px, 90vw);
  background:linear-gradient(180deg, rgba(23,40,95,.98), rgba(23,40,95,.94));
  border:2px solid rgba(255,255,255,.14);
  border-radius:18px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform: translateY(16px); animation: drop .8s ease forwards;

  /* ⬇️ Make the panel scroll independently */
  max-height: 90vh;
  overflow: auto;
  overscroll-behavior: contain;
}
@keyframes drop{ from{ transform:translateY(-20px); opacity:.6 } to{ transform:translateY(0); opacity:1 } }
.market-close .bell{ font-size:28px; }
.market-close .txt{ font-weight:900; font-size:1.2rem; margin:4px 0 8px; }
.market-close .mini{ background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); border-radius:12px; padding:10px; }
.market-close .mini-head{ margin-bottom:6px; }
.market-close .mini-row{ display:flex; justify-content:space-between; padding:4px 0; font-size:.95rem; }
.market-close .mini-tip{ margin-top:6px; color:var(--muted); font-size:.9rem; }

.market-close .continue-btn{
  margin-top:10px;
  width:100%;
  justify-content:center;
  font-weight:800;
}

#cash-value{ color: var(--accent3); }

/* === Home header tweaks per request === */
/* Center title/subtitle perfectly; pin logo left and badges right */
.hero{
  position: relative;
  grid-template-columns: 1fr;     /* single column so brand spans full width */
  justify-items: center;          /* center the brand block */
  gap: 0;
}
.hero .brand{ justify-content:center; }
.hero .titles{ text-align:center; }
.hero .brand .logo{ display:none; }

/* Top-left corner logo */
.corner-logo{
  position:absolute;
  top:0;
  left:0;
  width:64px;
  height:auto;
  z-index:10;
  user-select:none;
}

/* Move status to top-right so it doesn't affect centering */
.status{
  position:absolute;
  top:0;
  right:0;
}

/* Website link style */
.site-link{ color: var(--accent3); font-weight:800; text-decoration:none; }
.site-link:hover{ text-decoration:underline; }

/* Bottom-center link ONLY on the main menu */
#screen-menu .site-link{
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.14);
  text-decoration: none;
  font-weight: 800;
}
#screen-menu .site-link:hover{ text-decoration: underline; }

/* === Class Code Modal (centered overlay) === */
#classcode-modal{                 /* overlay container */
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;            /* centers the card */
}
#classcode-modal.hidden{ display:none; }

#classcode-modal .overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}

#classcode-modal .modal-card{
  position: relative;
  width: min(520px, 92vw);
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23,40,95,.98), rgba(23,40,95,.94));
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

#classcode-modal h3{ margin:0 0 6px; }
#classcode-modal p{ margin:0 0 10px; color: var(--muted); }

#cc-input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight:800;
  letter-spacing:.04em;
  outline:none;
}
#cc-input:focus{
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(110,163,255,.25);
}
#cc-error{ margin-top:8px; color: var(--danger); font-weight:700; }

/* Stack Cancel and Submit; center them, full width */
#classcode-modal .modal-card .row{
  display:flex;
  flex-direction: column !important;   /* overrides inline style */
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px;
  margin-top: 12px;
}

#classcode-modal #cc-cancel,
#classcode-modal #cc-submit{
  width: 100%;
  max-width: 460px;                    /* optional: keeps a nice width */
  margin: 0 auto;                      /* centers within the card */
}

/* Tutorial spacing + layout fixes */
#screen-tutorial .tutorial-list { counter-reset: item; } /* default <ol> nums */
#screen-tutorial .grid { gap: 14px; }

/* Space between the two Quick Check panels */
#screen-tutorial .stack{
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

/* Put Back next to Finish on the LEFT */
#screen-tutorial .footer.tutorial-footer{
  justify-content: flex-start;
  gap: 10px;
}

/* Slightly tighten the title spacing inside tutorial cards */
#screen-tutorial .panel > strong{ display:block; margin-bottom:6px; }

/* --- Tutorial: remove duplicate list numbers (keep your "1) ..." in titles) --- */
#screen-tutorial ol{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* --- Tutorial: spacing so the two Quick Check cards don't touch --- */
#screen-tutorial > ol + .panel{ margin-top: 14px; }
#screen-tutorial > .panel + .panel{ margin-top: 14px; }

/* --- Tutorial: put Back next to Finish on the left (no HTML changes) --- */
#screen-tutorial{ position: relative; padding-bottom: 68px; } /* room for moved Back */

#screen-tutorial > .row:first-child{
  /* this is the header row that contains the Back button */
  position: absolute;
  left: 18px;
  bottom: 18px;            /* move it down beside the footer */
  right: auto;
  margin: 0;
  gap: 10px;
}
#screen-tutorial > .row:first-child strong{
  display: none;           /* hide the extra "Tutorial" label to avoid clutter */
}

/* Align the Finish button to the left and leave space for the Back button */
#screen-tutorial .footer{
  justify-content: flex-start;
  gap: 10px;
  padding-left: 120px;      /* approximate width of the Back button + gap */
}

/* Small screens: tighten spacing so they still sit side-by-side */
@media (max-width: 480px){
  #screen-tutorial > .row:first-child{ left: 12px; bottom: 12px; }
  #screen-tutorial .footer{ padding-left: 108px; }
}


/* --- Tutorial buttons: align Back + Finish on the right, side-by-side --- */
#screen-tutorial{
  position: relative;
  padding-bottom: 80px;               /* space for the buttons */
}

/* Finish sits bottom-right */
#screen-tutorial .footer{
  position: absolute;
  right: 18px;
  bottom: 18px;
  margin: 0;
  padding: 0;                          /* override earlier padding-left */
  justify-content: flex-end;
}

/* Fix a minimum width for Finish so we can place Back beside it */
#screen-tutorial #btn-tutorial-finish{
  min-width: 120px;
}

/* Move the header row (with Back) next to Finish on the right */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  left: auto !important;
  right: calc(18px + 120px + 10px);    /* card edge + Finish width + gap */
  bottom: 18px;
  margin: 0;
  gap: 10px;
  justify-content: flex-end !important;
}

/* Hide duplicate "Tutorial" label in that row */
#screen-tutorial > .row:first-child strong{ display:none; }

/* Small screens: stack (still right-aligned) */
@media (max-width: 520px){
  #screen-tutorial > .row:first-child{
    right: 18px;
    bottom: calc(18px + 44px + 8px);   /* place Back just above Finish */
  }
}

/* --- Tutorial buttons: Back left of Finish, aligned right --- */
#screen-tutorial{ position: relative; padding-bottom: 86px; }

#screen-tutorial .footer{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 0;
}

/* Fix Finish width so Back can be offset precisely */
#screen-tutorial #btn-tutorial-finish{
  width: 150px;        /* was auto; make fixed to avoid overlap */
}

/* Move the header row (Back) to the bottom-right, just left of Finish */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  bottom: 18px;
  right: calc(18px + 150px + 12px);   /* card edge + Finish width + gap */
  margin: 0;
  gap: 12px;
  justify-content: flex-end !important;
  align-items: center;
}
#screen-tutorial > .row:first-child strong{ display:none; }

/* Small screens: stack while keeping right alignment */
@media (max-width: 520px){
  #screen-tutorial .footer{ right: 12px; bottom: 12px; }
  #screen-tutorial #btn-tutorial-finish{ width: 140px; }
  #screen-tutorial > .row:first-child{
    right: 12px;
    bottom: calc(12px + 44px + 10px); /* Back just above Finish */
  }
}

/* =========================
   TUTORIAL — tidy styling
   ========================= */

/* 1) Cards & spacing */
#screen-tutorial { position: relative; padding-bottom: 84px; } /* room for buttons */
#screen-tutorial ol { list-style: none; padding-left: 0; margin: 0 0 14px; }
#screen-tutorial ol.grid { gap: 14px; }

/* Space the two Quick Check panels so they never touch */
#screen-tutorial > ol + .panel { margin-top: 14px; }
#screen-tutorial > .panel + .panel { margin-top: 14px; }

/* Optional: consistent title spacing inside tutorial cards */
#screen-tutorial .panel > strong { display:block; margin-bottom:6px; }

/* 2) Buttons: Back left of Finish, both bottom-right */
#screen-tutorial .footer{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;                 /* if you ever put more buttons here */
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

/* Keep Finish width stable so layout never shifts */
#screen-tutorial #btn-tutorial-finish{
  min-width: 140px;          /* adjust if you change copy */
}

/* Move the top header row (contains Back) to bottom-right and place it LEFT of Finish */
#screen-tutorial > .row:first-child{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  margin: 0;
  gap: 0;
  transform: translateX(calc(-100% - 12px));  /* sit exactly to the left of Finish */
  z-index: 2;                                  /* stay above content */
}

/* Hide the duplicate "Tutorial" label in that row */
#screen-tutorial > .row:first-child strong{ display:none; }

/* 3) Mobile: stack neatly while staying right-aligned */
@media (max-width: 520px){
  #screen-tutorial { padding-bottom: 96px; }
  #screen-tutorial .footer{ right: 12px; bottom: 12px; }
  #screen-tutorial #btn-tutorial-finish{ min-width: 128px; }
  #screen-tutorial > .row:first-child{
    right: 12px;
    bottom: calc(12px + 44px + 10px);  /* Back above Finish */
    transform: none;                   /* no horizontal offset on small screens */
  }
}

/* ===== FINAL OVERRIDES (Tutorial) ===== */

/* spacing */
#screen-tutorial { position: relative !important; padding-bottom: 96px !important; }
#screen-tutorial ol { list-style: none !important; padding-left: 0 !important; margin: 0 0 14px !important; }
#screen-tutorial ol.grid { gap: 14px !important; }
#screen-tutorial > ol + .panel { margin-top: 14px !important; }
#screen-tutorial > .panel + .panel { margin-top: 14px !important; }
#screen-tutorial .panel > strong { display:block !important; margin-bottom:6px !important; }

/* buttons: finish bottom-right, back to its left */
#screen-tutorial .footer{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  z-index: 2 !important;
}

/* give Finish a stable width so Back can be placed precisely */
#screen-tutorial #btn-tutorial-finish{
  width: 148px !important;   /* tweak if you change the label */
}

/* move the header row (contains Back) to bottom-right, just LEFT of Finish */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  right: calc(18px + 148px + 12px) !important; /* edge + Finish width + gap */
  bottom: 18px !important;
  margin: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  gap: 0 !important;
  align-items: center !important;
  z-index: 2 !important;
}

/* hide the duplicate "Tutorial" label in that row */
#screen-tutorial > .row:first-child strong{ display:none !important; }

/* small screens: stack (still right-aligned) */
@media (max-width: 520px){
  #screen-tutorial .footer{ right: 12px !important; bottom: 12px !important; }
  #screen-tutorial #btn-tutorial-finish{ width: 140px !important; }
  #screen-tutorial > .row:first-child{
    right: 12px !important;
    bottom: calc(12px + 44px + 10px) !important; /* Back above Finish */
  }
}

/* ==== TUTORIAL BUTTONS — FINAL FIX ==== */
#screen-tutorial { position: relative !important; padding-bottom: 96px !important; }

/* Finish pinned bottom-right */
#screen-tutorial .footer{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  z-index: 1 !important;
}

/* Give Finish a fixed width so Back can be placed precisely */
#screen-tutorial #btn-tutorial-finish{
  width: 160px !important;  /* adjust if you change the label */
}

/* Move the Back row next to Finish (to its LEFT) */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  bottom: 18px !important;
  right: calc(18px + 160px + 12px) !important;  /* edge + Finish width + gap */
  display: inline-flex !important;
  margin: 0 !important;
  gap: 0 !important;
  transform: none !important;
  z-index: 1 !important;
}
#screen-tutorial > .row:first-child strong{ display: none !important; }

/* Mobile: stack (still right-aligned) */
@media (max-width: 520px){
  #screen-tutorial .footer{ right: 12px !important; bottom: 12px !important; }
  #screen-tutorial #btn-tutorial-finish{ width: 140px !important; }
  #screen-tutorial > .row:first-child{
    right: 12px !important;
    bottom: calc(12px + 46px + 10px) !important; /* Back above Finish */
  }
}

/* ==== TUTORIAL SPACING (clean, non-overlapping cards) ==== */
#screen-tutorial ol{ list-style: none !important; padding-left: 0 !important; margin: 0 0 14px !important; }
#screen-tutorial ol.grid{ gap: 14px !important; }
#screen-tutorial > ol + .panel{ margin-top: 14px !important; }
#screen-tutorial > .panel + .panel{ margin-top: 14px !important; }

/* ==== TUTORIAL — LOCKED LAYOUT (no overlap) ==== */
#screen-tutorial{
  position: relative !important;
  --gap: 12px;              /* distance between Back and Finish */
  --finish-w: 176px;        /* visual width of the Finish pill */
  padding-bottom: 100px !important;
}

/* Finish pinned bottom-right */
#screen-tutorial .footer{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  z-index: 3 !important;
}

/* Fix Finish width so Back can sit precisely to its left */
#screen-tutorial #btn-tutorial-finish{
  width: var(--finish-w) !important;
}

/* Move the header row (Back) to the bottom-right, LEFT of Finish */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  right: calc(18px + var(--finish-w) + var(--gap)) !important;
  bottom: 18px !important;
  display: inline-flex !important;
  margin: 0 !important;
  transform: none !important;
  gap: 0 !important;
  z-index: 3 !important;
}
#screen-tutorial > .row:first-child strong{ display: none !important; }

/* Clean spacing in tutorial cards */
#screen-tutorial ol{ list-style: none !important; padding-left: 0 !important; margin: 0 0 14px !important; }
#screen-tutorial .grid{ gap: 14px !important; }
#screen-tutorial > ol + .panel,
#screen-tutorial > .panel + .panel{ margin-top: 14px !important; }

/* Mobile: keep right-aligned, stack Back above Finish */
@media (max-width: 520px){
  #screen-tutorial{
    --finish-w: 140px;
    --gap: 10px;
    padding-bottom: 110px !important;
  }
  #screen-tutorial .footer{ right: 12px !important; bottom: 12px !important; }
  #screen-tutorial > .row:first-child{
    right: 12px !important;
    bottom: calc(12px + 46px + var(--gap)) !important; /* Back above Finish */
  }
}

/* ==== TUTORIAL BUTTONS — LOCKED, NO OVERLAP ==== */
#screen-tutorial{
  position: relative !important;
  padding-bottom: 104px !important;        /* room for buttons */
}

/* Finish pinned bottom-right */
#screen-tutorial .footer{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

/* Fix Finish width so we can place Back precisely */
#screen-tutorial #btn-tutorial-finish{
  width: 220px !important;                 /* lock width of "Finish" pill */
}

/* Move the Back row next to Finish (to its LEFT) */
#screen-tutorial > .row:first-child{
  position: absolute !important;
  bottom: 18px !important;
  right: calc(18px + 220px + 12px) !important;  /* edge + Finish width + gap */
  display: inline-flex !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 5 !important;
}
#screen-tutorial > .row:first-child strong{ display:none !important; }

/* Clean spacing for the tutorial cards */
#screen-tutorial ol{ list-style:none !important; padding-left:0 !important; margin:0 0 14px !important; }
#screen-tutorial .grid{ gap:14px !important; }
#screen-tutorial > ol + .panel,
#screen-tutorial > .panel + .panel{ margin-top:14px !important; }

/* Mobile: stack (Back above Finish), still right-aligned */
@media (max-width: 520px){
  #screen-tutorial .footer{ right:12px !important; bottom:12px !important; }
  #screen-tutorial #btn-tutorial-finish{ width:140px !important; }
  #screen-tutorial > .row:first-child{
    right: 12px !important;
    bottom: calc(12px + 46px + 10px) !important; /* Back above Finish */
  }
}

/* === SHOP LAYOUT & EMOJI CLEANUP === */
#screen-shop{position:relative;padding-bottom:72px;}
#screen-shop .grid{gap:20px;margin-top:6px;}
#screen-shop .panel>.row:first-child{margin-bottom:12px;} /* space headings from cards */
#screen-shop .shop-grid{margin-top:6px;}

/* ⬇ Bottom bar with centered Back (sticky inside the card) */
#screen-shop .shop-footer{
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center !important; /* override .footer default */
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.12);
}

/* Center the button; remove absolute positioning */
#screen-shop #btn-shop-back{
  position: static;
  margin: 0;
  padding: 8px 12px;
}

/* If your Back label includes a leading emoji (e.g., "⬅️ Back"), hide it */
#screen-shop #btn-shop-back{ text-indent:-1.2em; padding-left:1.2em; }

/* Hide leading emojis on LOOKS item titles only; keep power-up & coin emojis */
#shop-custom .shop-item h4{
  text-indent:-1.6em; padding-left:1.6em; /* removes first glyph (emoji) */
}
@media (max-width:520px){
  #shop-custom .shop-item h4{ text-indent:-1.3em; padding-left:1.3em; }
}

/* Center “Change class code” directly under “Review Tutorial” */
#screen-menu{
  display:grid;
  grid-template-columns: repeat(3, auto);
  justify-content:center;
  align-content:center;
  gap:14px 14px; /* row / column */
}
#screen-menu .titles{ grid-column: 1 / -1; }     /* keep title centered */
#screen-menu .cta-row{ display: contents; }      /* flatten buttons into grid */
#btn-shop{ grid-column:1; }
#btn-tutorial{ grid-column:2; }                  /* middle */
#btn-start{ grid-column:3; }

#screen-menu .mini-links{ display: contents; }   /* make change-code a grid item */
#btn-change-class{
  grid-column:2;                                  /* under Review Tutorial */
  justify-self:center;
}

/* Mobile: stack everything cleanly */
@media (max-width: 560px){
  #screen-menu{ grid-template-columns: 1fr; }
  #btn-shop, #btn-tutorial, #btn-start, #btn-change-class{ grid-column:1; }
}

/* Center the 3 main buttons; put “Change class code” and the note under the middle one */
#screen-menu{
  display:grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, max-content);
  justify-content:center;           /* center whole 3-col block */
  justify-items:center;
  align-content:center;
  gap:14px 18px;
}
#screen-menu .titles{ grid-column:1 / -1; }   /* title spans full width */

/* Flatten rows so each item can occupy a grid cell */
#screen-menu .cta-row,
#screen-menu .mini-links{ display: contents; }

/* Place the 3 buttons in centered columns */
#btn-shop{ grid-column:1; }
#btn-tutorial{ grid-column:2; }
#btn-start{ grid-column:3; }

/* Put “Change class code” under Review Tutorial */
#btn-change-class{
  grid-column:2;
  justify-self:center;
}

/* Put the small note directly under that */
#screen-menu .footnote{
  grid-column:2;
  justify-self:center;
  margin-top:4px;
}

/* Mobile: stack cleanly */
@media (max-width:560px){
  #screen-menu{ grid-template-columns:1fr; }
  #btn-shop,#btn-tutorial,#btn-start,#btn-change-class,
  #screen-menu .footnote{ grid-column:1 !important; }
}