/* GamyBot app pages (gallery + creation) — same tokens as game.css */

:root {
  --bg: #0B0E1A; --panel: #12172A; --panel-deep: #0D1120;
  --line: #232A45; --ink: #E8E6DF; --ink-dim: #8B92AC;
  --accent: #22D3EE;
  --t-neg: #EF4444; --t-mid: #F59E0B; --t-pos: #22C55E;
  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
  min-height: 100vh;
}
#topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  background: var(--panel-deep);
}
.wordmark {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-size: 13px; text-decoration: none;
}
.page-title { font-family: var(--font-display); font-weight: 600;
              font-size: 16px; color: var(--accent); }
.spacer { flex: 1; }

.tool {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px;
  padding: 6px 12px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.tool:hover, .tool:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.tool.primary { background: var(--accent); color: var(--bg); border: 0;
                font-family: var(--font-display); font-weight: 600; }
.tool.primary:hover { color: var(--bg); filter: brightness(1.1); }
.tool.danger:hover { border-color: var(--t-neg); color: var(--t-neg); }
.tool:disabled { opacity: .4; cursor: default; }

main { max-width: 1000px; margin: 0 auto; padding: 26px 18px 60px; }

/* ---------- gallery ---------- */
#cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; margin-top: 18px;
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center;
}
.card img, .card canvas {
  width: 120px; height: 120px; border-radius: 10px;
  background: var(--panel-deep);
}
.card .name { font-family: var(--font-display); font-weight: 600;
              font-size: 16px; }
.card .author { color: var(--ink-dim); font-size: 12px; }
.card .stars { color: var(--t-mid); font-size: 14px; letter-spacing: 2px; }
.card .stars .votes { color: var(--ink-dim); font-size: 11px; letter-spacing: 0; }
.card .actions { display: flex; gap: 8px; margin-top: 4px; }
.empty { color: var(--ink-dim); font-style: italic; margin-top: 30px; }

/* ---------- wizard ---------- */
.steps {
  display: flex; gap: 8px; margin-bottom: 22px;
}
.step-dot {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
}
.step-dot.active { color: var(--accent); border-color: var(--accent); }

.screen { display: none; }
.screen.active { display: block; }

fieldset {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 16px 18px; margin: 0 0 18px;
}
legend {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); padding: 0 8px;
}
.field { margin-bottom: 12px; }
.field label {
  display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 4px;
}
.field .example { font-style: italic; opacity: .8; }
input[type=text], textarea, select {
  width: 100%; background: var(--panel-deep); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px; padding: 9px 11px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent); outline: none;
}
textarea { resize: vertical; min-height: 56px; }

.wand-row { display: flex; gap: 8px; align-items: flex-start; }
.wand-row > :first-child { flex: 1; }
.wand {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  font-size: 16px; line-height: 1;
}
.wand.busy { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.state-block { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 12px; }
.state-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.state-title { font-family: var(--font-display); font-size: 13px;
               color: var(--ink); margin-bottom: 8px; }
.state-title .lvl { color: var(--t-mid); }

.row-list .row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.row-list .row input { flex: 1; }
.row-list .row input.small { flex: 0 0 160px; }
.row-list .row select { flex: 0 0 90px; width: auto; }
.row-del { flex: 0 0 auto; }

.nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 10px; }
.hintline { color: var(--ink-dim); font-size: 12px; margin: 6px 0 14px; }
.error { color: var(--t-neg); font-size: 13px; margin: 8px 0; min-height: 18px; }

/* ---------- avatar screen ---------- */
#avatar-screen { display: flex; gap: 26px; flex-wrap: wrap; }
#avatar-preview { width: 300px; height: 300px; background: var(--panel-deep);
                  border: 1px solid var(--line); border-radius: 12px; }
.avatar-opts { flex: 1; min-width: 260px; }
.trust-preview { display: flex; gap: 6px; margin-top: 10px; }
.trust-preview button { min-width: 44px; }
.trust-preview button.active { border-color: var(--accent); color: var(--accent); }

/* ---------- overlay ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11,14,26,.85);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
}
#overlay .msg { font-family: var(--font-display); color: var(--accent); }
.hidden { display: none !important; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}

details.help {
  margin: -4px 0 14px; font-size: 12px; color: var(--ink-dim);
  border-left: 2px solid var(--line); padding-left: 10px; line-height: 1.5;
}
details.help summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details.help b { color: var(--ink); }

/* ---------- behavior sub-tabs ---------- */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.subtab {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .05em;
  padding: 6px 14px; cursor: pointer;
}
.subtab.active { color: var(--accent); border-color: var(--accent); }
.subpanel { display: none; }
.subpanel.active { display: block; }
.state-block fieldset { margin-bottom: 14px; }

/* ---------- labeled cards (decrease / knowledge) ---------- */
.card-row {
  position: relative;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-deep);
  padding: 14px 46px 6px 14px; margin-bottom: 12px;
}
.card-row .row-del { position: absolute; top: 10px; right: 10px;
                     width: 28px; height: 28px; padding: 0; }
.card-row textarea { min-height: 64px; }