/* ============================================================
   SUBWAY SURFERS SAVE GENERATOR — subway-editor.css
   Author  : Piererra
   Project : Piererra Tools
   Theme: Subway Surfers
   Palette:
     bg-deep:    #0A2A5E  (tunnel navy)
     bg-panel:   rgba(14,30,62,.84)
     bg-card:    rgba(18,37,72,.90)
     bg-input:   rgba(8,25,54,.95)
     yellow:     #FFC800  (signature logo yellow)
     orange:     #FF7A00  (logo shadow / accent)
     blue:       #00AEEF  (sky blue)
     red:        #E8262E  (accent / danger)
     green:      #39B54A  (accent / success)
     text-main:  #EAF3FF
     text-muted: #8FA5CE
     border:     #1C3462
============================================================ */

:root {
  /* Chrome (bg/panel/card/text/border) now inherited from shared/portal.css
     so this panel sits flush inside the one-page dashboard shell. */
  --bg-deep:        var(--bg);
  --bg-panel:       var(--panel);
  --bg-panel-solid: var(--panel);
  --bg-card:        var(--card);
  --bg-input:       var(--card);

  --yellow:      #FFC107;
  --yellow-dim:  rgba(255,193,7,0.12);
  --yellow-glow: rgba(255,193,7,0.30);
  --orange:      #FB923C;
  --orange-dim:  rgba(251,146,60,0.14);
  --blue:        #38BDF8;
  --blue-dim:    rgba(56,189,248,0.11);
  --red:         #F87171;
  --red-dim:     rgba(248,113,113,0.11);
  --green:       #4ADE80;
  --green-dim:   rgba(74,222,128,0.12);

  --text-main:  var(--text);
  --border-lit: rgba(255,193,7,0.45);
  --font:       var(--font-body);
  --ease:       0.16s ease;
  /* Aliases consumed by shared/editor-shell.css */
  --tool-accent:      var(--yellow);
  --tool-accent-dim:  var(--yellow-dim);
  --tool-accent-glow: var(--yellow-glow);
}

/* Light theme handled entirely by shared/portal.css tokens above. */

body {
  font-family: var(--font);
}

code {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--blue);
  background: var(--bg-card);
  padding: 0.12em 0.4em;
  border-radius: 6px;
}

/* ── PANEL HEADER (compact — sits inside the shared dashboard shell) ── */
.ssg-header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ssg-header__game {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 0.35rem;
}
.ssg-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text-main);
}
.ssg-header__by {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ── VERSION WIDGET ─────────────────────────────────────── */
.ssg-version-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.ssg-version-widget__item strong { color: var(--text-main); font-weight: 700; }
.ssg-version-widget__sep { opacity: 0.5; }
.ssg-version-widget__status {
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.ssg-version-widget__status--ok {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.12);
}
.ssg-version-widget__status--stale {
  color: var(--yellow);
  background: rgba(255, 200, 60, 0.12);
}

/* ── MAIN ───────────────────────────────────────────────── */
.ssg-main {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── SECTION ────────────────────────────────────────────── */
.ssg-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  backdrop-filter: blur(10px);
}
.ssg-section--actions {
  border-color: rgba(255,200,0,0.3);
  background: linear-gradient(160deg, var(--bg-panel) 60%, rgba(255,122,0,0.08) 100%);
}
.ssg-section__head { display: flex; flex-direction: column; gap: 0.3rem; }
.ssg-section__title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--yellow);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.ssg-optional { font-size: 0.65rem; color: var(--text-muted); text-transform: none; font-weight: 400; letter-spacing: 0; }
.ssg-section__desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; }

/* ── DROPZONE ───────────────────────────────────────────── */
.ssg-dropzone {
  border: 2px dashed var(--border-lit);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color var(--ease), background var(--ease);
  background: var(--bg-card);
}
.ssg-dropzone__icon {
  width: 32px; height: 32px;
  color: var(--yellow);
  margin: 0 auto 0.7rem;
  display: block;
  filter: drop-shadow(0 0 6px var(--yellow-glow));
}
.ssg-dropzone__text { font-size: 0.88rem; color: var(--text-main); }
.ssg-dropzone__sub  { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; }
.ssg-dropzone__input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ── INFOBAR ────────────────────────────────────────────── */
.ssg-infobar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  border-left: 3px solid var(--green);
  font-size: 0.78rem;
}
.ssg-infobar__label { color: var(--text-muted); }
.ssg-infobar__val    { color: var(--green); font-weight: 700; }

/* ── FIELD GRID (wallet / upgrades) ─────────────────────── */
.ssg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.ssg-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ssg-field__label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.ssg-field__hint { font-size: 0.6rem; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ssg-field-row { display: flex; gap: 0.4rem; align-items: stretch; }
.ssg-field-row input { flex: 1; }

.ssg-input {
  background: var(--bg-input);
  border: 1px solid var(--border-lit);
  border-radius: 8px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 0.6rem 0.75rem;
  outline: none;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ssg-input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-dim);
}
.ssg-input--gold { color: var(--orange); }

.ssg-mini-btn {
  background: var(--yellow-dim);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  border-radius: 8px;
  padding: 0 0.8rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ease);
}
.ssg-mini-btn:hover { background: var(--yellow); color: #0A2A5E; }

/* ── PICKER TOOLBAR (characters / hoverboards) ──────────── */
.ssg-picker-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.ssg-search {
  flex: 1;
  min-width: 160px;
  background: var(--bg-input);
  border: 1px solid var(--border-lit);
  border-radius: 999px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 0.82rem;
  padding: 0.55rem 1rem;
  outline: none;
  transition: border-color var(--ease);
}
.ssg-search:focus { border-color: var(--blue); }
.ssg-picker-toolbar__btns { display: flex; gap: 0.4rem; }

/* ── PICK GRID (chips) ──────────────────────────────────── */
.ssg-pickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 0.6rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-lit) transparent;
}
.ssg-pickgrid::-webkit-scrollbar { width: 5px; }
.ssg-pickgrid::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 99px; }

.ssg-chip {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all var(--ease);
}
.ssg-chip:hover { border-color: var(--blue); color: var(--text-main); }
.ssg-chip--owned {
  background: linear-gradient(135deg, var(--green-dim), var(--blue-dim));
  border-color: var(--green);
  color: var(--text-main);
}
.ssg-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssg-chip__star {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--border-lit);
  transition: color var(--ease), transform var(--ease);
}
.ssg-chip__star--active { color: var(--yellow); transform: scale(1.15); }

/* Chips that have outfit/upgrade variants stack the name row on top
   and the variant pills underneath, instead of the default single row. */
.ssg-chip--has-variants {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.ssg-chip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  cursor: pointer;
}
.ssg-chip__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
  cursor: default;
}
.ssg-variant-pill {
  font-size: 0.66rem;
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: all var(--ease);
}
.ssg-variant-pill:hover { border-color: var(--blue); color: var(--text-main); }
.ssg-variant-pill--active {
  background: linear-gradient(135deg, var(--green-dim), var(--blue-dim));
  border-color: var(--green);
  color: var(--text-main);
}
.ssg-variant-pill--all {
  border-style: dashed;
  font-style: italic;
}

.ssg-hidden-note {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.ssg-hidden-note:empty { display: none; }
.ssg-chip__hidden { display: none !important; }

/* ── BADGE ROW ──────────────────────────────────────────── */
.ssg-badge-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.ssg-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
}
.ssg-badge img { width: 40px; height: 40px; object-fit: contain; }
.ssg-badge__name { font-size: 0.72rem; font-weight: 700; color: var(--text-main); }
.ssg-badge input {
  width: 100%;
  text-align: center;
  background: var(--bg-input);
  border: 1px solid var(--border-lit);
  border-radius: 8px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 0.85rem;
  padding: 0.45rem;
  outline: none;
}
.ssg-badge input:focus { border-color: var(--yellow); }

/* ── BUTTONS ────────────────────────────────────────────── */
.ssg-btn {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-transform: uppercase;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.ssg-btn:hover { transform: translateY(-1px); }
.ssg-btn--primary {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #0A2A5E;
  box-shadow: 0 6px 20px rgba(255,122,0,0.3);
  padding: 0.9rem 1.6rem;
  font-size: 0.78rem;
  width: 100%;
}
.ssg-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-lit);
}
.ssg-btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.ssg-btn--small { padding: 0.45rem 0.9rem; font-size: 0.64rem; }

/* ── ACTIONS ────────────────────────────────────────────── */
.ssg-action-row { display: flex; }
.ssg-action-hint { font-size: 0.7rem; color: var(--text-muted); line-height: 1.7; }

/* ── TOAST ──────────────────────────────────────────────── */
.ssg-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  padding: 0.65rem 1.2rem;
  font-size: 0.78rem;
  color: var(--text-main);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.ssg-toast--ok   { border-left: 3px solid var(--green); color: var(--green); }
.ssg-toast--err  { border-left: 3px solid var(--red);  color: var(--red); }
.ssg-toast--info { border-left: 3px solid var(--blue); color: var(--blue); }

/* ── FOOTER ─────────────────────────────────────────────── */
.ssg-footer {
  padding: 1.1rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--border);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.ssg-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.ssg-footer__link { font-size: 0.64rem; color: var(--text-muted); transition: color var(--ease); }
.ssg-footer__link:hover { color: var(--yellow); }
.ssg-footer__sep { font-size: 0.55rem; color: var(--border-lit); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .ssg-main    { padding: 1.1rem 0.75rem 2rem; }
  .ssg-section { padding: 1.1rem; }
  .ssg-pickgrid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); max-height: 300px; }
  .ssg-picker-toolbar { flex-direction: column; align-items: stretch; }
}