theme.css

/* FrogQuest — 8-bit / NES-RPG pixel-art theme for plain Gradio (gr.Blocks).
   Single-page master-detail layout (left = hero/stats/settings, center = selected scene +
   actions, right = task list, bottom = Frog Master chat). Palette is the fixed "Eat That Frog"
   green / black / red scheme; the cyberpunk/fantasy/space theme only flavors the generated
   images, never the UI. */

:root {
  --bg: #0a0f0a;       /* near-black green-tinted background */
  --bg2: #10180f;      /* raised surfaces / inputs */
  --panel: #16241a;    /* panels & cards */
  --ink: #eafbe2;      /* primary text */
  --dim: #8fae84;      /* muted text */
  --accent: #4ade5b;   /* FROG GREEN — primary actions, borders, logo */
  --accent2: #e5484d;  /* RED — danger / couldn't */
  --select: #ff8a1f;   /* ORANGE — currently-selected task highlight */
  --success: #4ade5b;  /* green — done */
  --danger: #e5484d;   /* red — couldn't */
  --gold: #ffd23f;     /* XP / accents */
  --frog: #4ade5b;     /* frog-quest border */
  --shadow: #000;
  --border: 4px;
}

/* ================= Gradio chrome neutralization ================= */
*, *::before, *::after { box-sizing: border-box; }

body, gradio-app, .gradio-container {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Press Start 2P", monospace !important;
  image-rendering: pixelated;
}
.gradio-container {
  max-width: min(1720px, 97vw) !important;  /* use the screen — was 1240px w/ huge dead margins */
  margin: 0 auto !important;
  padding: 0 16px 32px !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}
/* faint background grid */
.gradio-container {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(120,255,120,0.02) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(120,255,120,0.02) 38px 39px) !important;
}
/* CRT scanlines overlay */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}
/* hide Gradio's footer & progress chrome */
footer, .gradio-container > .main > .wrap > .contain > div > .built-with,
.show-api, .built-with { display: none !important; }

/* strip default block styling so our panels/cards control the look */
.block, .form, .gr-box, .gr-block, .styler,
.gradio-container .prose { background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important; }
.gr-padded, .block.padded { padding: 0 !important; }
.gap, .gradio-container .gap { gap: 0 !important; }

/* ================= top bar ================= */
.fq-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-bottom: var(--border) solid var(--accent);
  background: var(--bg2); margin-bottom: 16px;
}
.fq-logo { margin: 0; font-size: 20px; letter-spacing: 2px; color: var(--accent);
  text-shadow: 3px 3px 0 var(--shadow); }
.fq-logo b { color: var(--accent2); font-weight: normal; }

/* ================= master-detail grid ================= */
/* the wrapping gr.Row becomes a 3-column grid; its child gr.Columns are the cells.
   Wider side panels (hero content fits without endless wrapping -> shorter panel);
   the center takes everything else. */
.fq-app-grid { display: grid !important; grid-template-columns: 320px minmax(0, 1fr) 320px !important;
  gap: 16px !important; align-items: start !important; flex-wrap: nowrap !important; }
.fq-app-grid > .fq-left, .fq-app-grid > .fq-center, .fq-app-grid > .fq-right { min-width: 0 !important; }

.panel, .fq-left, .fq-center, .fq-right {
  background: var(--panel) !important;
  border: var(--border) solid var(--ink) !important;
  box-shadow: 6px 6px 0 var(--shadow) !important;
  padding: 16px !important;
}
.panel-title { margin: 0 0 12px; font-size: 12px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); }
.panel-subtitle { margin: 16px 0 10px; font-size: 10px; color: var(--accent); }
.hint { color: var(--dim); font-size: 9px; line-height: 1.9; }

/* ================= buttons ================= */
button.pix-btn, .pix-btn button, .pix-btn {
  font-family: "Press Start 2P", monospace !important; font-size: 10px !important;
  color: var(--ink) !important; cursor: pointer;
  background: var(--bg2) !important; border: var(--border) solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important; padding: 12px 14px !important;
  text-transform: uppercase; border-radius: 0 !important;
  transition: transform .05s, box-shadow .05s; min-width: 0 !important;
}
button.pix-btn:hover, .pix-btn button:hover { background: var(--accent) !important; color: var(--bg) !important; }
button.pix-btn:active, .pix-btn button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow) !important; }
.pix-btn.primary, .pix-btn.primary button {
  background: var(--accent) !important; color: var(--bg) !important; border-color: #fff !important;
  width: 100% !important; font-size: 11px !important; padding: 14px !important;
}
.pix-btn.primary:hover, .pix-btn.primary button:hover { background: var(--gold) !important; color: var(--bg) !important; }
.pix-btn.small, .pix-btn.small button { font-size: 8px !important; padding: 9px 10px !important; box-shadow: 3px 3px 0 var(--shadow) !important; }

/* ================= LEFT: hero photo / stats / settings ================= */
.fq-photo .image-container, .fq-photo .upload-container, .fq-photo [data-testid="image"] {
  min-height: 180px !important; background: var(--bg2) !important;
  border: var(--border) dashed var(--accent) !important; border-radius: 0 !important;
}
.fq-photo .image-container img { image-rendering: pixelated; object-fit: cover; }
.fq-photo .wrap, .fq-photo .icon-wrap, .fq-photo .upload-text { color: var(--dim) !important;
  font-family: "Press Start 2P", monospace !important; font-size: 8px !important; }

.fq-stats { margin: 14px 0; padding: 12px; background: var(--bg2);
  border: 2px solid var(--dim); }
.fq-stats h4 { margin: 0 0 8px; font-size: 9px; color: var(--accent); }
.fq-stats .stat-row { display: flex; justify-content: space-between; font-size: 9px;
  color: var(--ink); margin: 6px 0; }
.fq-stats .stat-row b { color: var(--gold); }

.fq-settings { margin-top: 12px; }

/* world picker (gr.Radio styled to fit the pixel theme) — one row in the 320px panel */
.fq-theme, .fq-theme * { color: var(--ink) !important; }
.fq-theme .wrap { gap: 6px !important; display: flex !important; flex-direction: row !important;
  flex-wrap: nowrap !important; }
.fq-theme label, .fq-theme .wrap label {
  background: var(--bg2) !important; border: 3px solid var(--dim) !important;
  box-shadow: 3px 3px 0 var(--shadow) !important; border-radius: 0 !important;
  font-family: "Press Start 2P", monospace !important; font-size: 8px !important;
  padding: 8px 6px !important; cursor: pointer; text-transform: uppercase;
  flex: 1 1 0 !important; justify-content: center !important; white-space: nowrap;
}
.fq-theme label:hover { border-color: var(--accent) !important; }
.fq-theme label.selected, .fq-theme input:checked ~ * {
  border-color: var(--select) !important; color: var(--select) !important;
  box-shadow: 3px 3px 0 var(--select) !important;
}
.fq-theme input[type="radio"] { accent-color: var(--accent); }

/* theme picker (3 buttons styled as small cards) */
.theme-card, .theme-card button {
  font-family: "Press Start 2P", monospace !important; font-size: 8px !important;
  color: var(--ink) !important; cursor: pointer; height: 100%;
  display: flex !important; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px !important; background: var(--bg2) !important;
  border: 3px solid var(--dim) !important; box-shadow: 3px 3px 0 var(--shadow) !important;
  border-radius: 0 !important; white-space: pre-line; line-height: 1.5;
}
.theme-card:hover, .theme-card button:hover { border-color: var(--accent) !important; }
.theme-card.selected, .theme-card.selected button {
  border-color: var(--select) !important; background: var(--panel) !important;
  box-shadow: 3px 3px 0 var(--select) !important;
}

/* ================= CENTER: scene / description / actions ================= */
.fq-scene .image-container, .fq-scene [data-testid="image"] {
  min-height: 360px !important; background: var(--bg2) !important; border-radius: 0 !important;
  border: var(--border) solid var(--ink) !important;
}
.fq-scene img { image-rendering: pixelated; object-fit: contain; width: 100%; }

.fq-detail { display: flex; gap: 14px; align-items: stretch; margin-top: 14px; }
.fq-desc { flex: 1; background: var(--bg2); border: var(--border) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow); padding: 14px 16px; min-height: 96px; }
.fq-desc .adventure-header h2 { font-size: 13px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); margin: 0 0 8px; }
.fq-desc .quest-title { margin: 0 0 8px; font-size: 12px; color: var(--ink); line-height: 1.6; }
.fq-desc .quest-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fq-desc .quest-narrative { margin: 0 0 10px; font-size: 9px; color: var(--dim); line-height: 1.9; }
.fq-desc .quest-task { margin: 0 0 8px; font-size: 9px; color: var(--accent); line-height: 1.8; }
.fq-desc .quest-task::before { content: "▸ TASK: "; color: var(--dim); }
.fq-desc .xp { font-size: 9px; color: var(--gold); }
.fq-desc .xp::before { content: "★ "; }
.fq-desc.state-success { border-color: var(--success); box-shadow: 4px 4px 0 var(--success); }
.fq-desc.state-failure { border-color: var(--danger); box-shadow: 4px 4px 0 var(--danger); }
.fq-desc .result-msg { font-size: 10px; line-height: 1.9; }
.fq-desc.state-success .result-msg { color: var(--success); }
.fq-desc.state-failure .result-msg { color: var(--danger); }
.fq-empty { color: var(--dim); font-size: 10px; line-height: 1.9; }

.fq-actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 132px; }
.btn-done, .btn-done button {
  background: var(--success) !important; color: var(--bg) !important; border-color: #fff !important;
  font-size: 11px !important;
}
.btn-done:hover, .btn-done button:hover { background: var(--gold) !important; }
.btn-couldnt, .btn-couldnt button {
  background: var(--danger) !important; color: #fff !important; border-color: #fff !important;
  font-size: 9px !important;
}
.btn-couldnt:hover, .btn-couldnt button:hover { background: #ff7a7e !important; color: var(--bg) !important; }

/* ================= RIGHT: task list ================= */
.fq-right .panel-title { margin-bottom: 12px; }
.fq-tasklist { display: flex; flex-direction: column; gap: 10px; }
.fq-task-row { display: flex !important; gap: 6px !important; align-items: stretch !important;
  flex-wrap: nowrap !important; }
.fq-task-row .fq-task-item { flex: 1 1 auto !important; }
.fq-task-clear, .fq-task-clear button {
  flex: 0 0 auto !important; width: 40px !important; min-width: 40px !important;
  padding: 8px !important; color: var(--danger) !important; font-size: 11px !important;
}
.fq-task-clear:hover, .fq-task-clear button:hover { background: var(--danger) !important; color: #fff !important; }
.fq-task-item, .fq-task-item button {
  font-family: "Press Start 2P", monospace !important; font-size: 9px !important;
  text-align: left !important; color: var(--ink) !important; cursor: pointer;
  background: var(--bg2) !important; border: 3px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--shadow) !important; padding: 11px 12px !important;
  border-radius: 0 !important; width: 100% !important; line-height: 1.6; white-space: normal;
}
.fq-task-item:hover, .fq-task-item button:hover { border-color: var(--accent) !important; }
.fq-task-item.selected, .fq-task-item.selected button {
  border-color: var(--select) !important; box-shadow: 4px 4px 0 var(--select) !important;
  color: var(--select) !important; background: var(--panel) !important;
}
.fq-task-item.is-frog, .fq-task-item.is-frog button { border-color: var(--frog) !important; }
.fq-task-item.done, .fq-task-item.done button { opacity: 0.7; border-color: var(--success) !important; }
.fq-task-item.failed, .fq-task-item.failed button { opacity: 0.6; border-style: dashed !important; }

/* badges (reused in the description pane and task items) */
.badge { font-size: 8px; padding: 4px 6px; border: 2px solid currentColor; display: inline-block; }
.frog-badge { color: var(--frog); }
.bonus-badge { color: var(--accent); }
.group-badge { color: var(--gold); }

/* ================= BOTTOM: Frog Master chat bar ================= */
.fq-chatbar { display: flex !important; gap: 12px !important; align-items: stretch !important;
  margin-top: 16px !important; flex-wrap: nowrap !important; }
.fq-chatbar .fq-chat-input { flex: 1 !important; min-width: 0 !important; }
.fq-chatbar .fq-chat-send { width: 150px !important; flex: 0 0 auto !important; }
.compose textarea {
  width: 100%; resize: none; font-family: "Press Start 2P", monospace !important;
  font-size: 10px !important; line-height: 1.8 !important; color: var(--ink) !important;
  background: var(--bg2) !important; border: var(--border) solid var(--accent) !important;
  padding: 14px !important; box-shadow: inset 3px 3px 0 var(--shadow); border-radius: 0 !important;
}
.compose textarea:focus { outline: none; border-color: var(--gold) !important; box-shadow: inset 3px 3px 0 var(--shadow) !important; }
.fq-chat-hint { color: var(--dim); font-size: 8px; margin: 8px 2px 0; line-height: 1.8; }

/* ================= responsive: stack on narrow screens ================= */
@media (max-width: 1100px) {
  .fq-app-grid { grid-template-columns: 1fr !important; }
  .fq-logo { font-size: 16px; }
  .fq-detail { flex-direction: column; }
  .fq-actions { flex-direction: row; min-width: 0; }
}