/* ============================================================
   Képregény Építő – editor UI
   Vizuális nyelv: tus-fekete keretek, papírfehér felületek,
   klasszikus képregény-sárga (#FFD23F) kiemelés.
   ============================================================ */

:root {
  --ink: #1b1b1f;
  --paper: #ffffff;
  --desk: #e9e4d8;          /* munkaasztal háttér */
  --accent: #ffd23f;        /* képregény-sárga */
  --accent-soft: #fff3c4;
  --danger: #e05a4e;
  --border: 3px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --radius: 10px;
  --ui-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--ui-font);
  color: var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(27,27,31,.08) 1px, transparent 0) 0 0 / 18px 18px,
    var(--desk);
}

body { display: flex; flex-direction: column; }

/* ---------- Toolbar ---------- */
#toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--paper);
  border-bottom: var(--border);
}

.logo {
  font-family: "Bangers", "Comic Sans MS", cursive;
  font-size: 28px;
  letter-spacing: 2px;
  margin: 0 8px 0 0;
  text-shadow: 2px 2px 0 var(--accent);
}

.tb-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 18px;
  border-right: 2px dashed rgba(27,27,31,.25);
}
.tb-group:last-child { border-right: none; padding-right: 0; margin-left: auto; }

.tb-label { font-size: 13px; font-weight: 600; }

button {
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  background: var(--paper);
  border: var(--border);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
button:hover { background: var(--accent-soft); }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
button.primary { background: var(--accent); }
button.active { background: var(--accent); }
button:focus-visible { outline: 3px solid #4d6c96; outline-offset: 2px; }
button.danger { background: #ffd9d5; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Fő elrendezés ---------- */
#workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 250px 1fr 270px;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

aside, #canvas-area {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
}

aside {
  padding: 12px;
  overflow-y: auto;
}

aside h2 {
  font-family: "Bangers", "Comic Sans MS", cursive;
  font-size: 19px;
  letter-spacing: 1.5px;
  margin: 4px 0 8px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
}

aside section { margin-bottom: 22px; }

.hint { font-size: 12px; color: #666; margin: 0 0 8px; }

/* ---------- Asset böngésző ---------- */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.thumb {
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  cursor: pointer;
  text-align: center;
  transition: transform .06s ease;
}
.thumb:hover { background: var(--accent-soft); transform: translateY(-2px); }
.thumb.selected { background: var(--accent); }
.thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}
.thumb .thumb-label {
  font-size: 10px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.char-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.char-tabs button { padding: 5px 10px; font-size: 12px; }

.bubble-buttons { display: flex; flex-direction: column; gap: 8px; }
.bubble-buttons button { text-align: left; }

/* ---------- Canvas terület ---------- */
#canvas-area {
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
}

#canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
}

#stage {
  max-width: 100%;
  max-height: 100%;
  cursor: default;
  touch-action: none;
}
#stage.dragging { cursor: grabbing; }
#stage.resizing { cursor: nwse-resize; }

#status-bar {
  margin: 8px 0 0;
  font-size: 12px;
  color: #555;
  text-align: center;
  min-height: 15px;
}
#status-bar b { color: var(--ink); }

/* ---------- Tulajdonság panel ---------- */
.prop-group { margin-bottom: 16px; }
.prop-group > label,
.prop-group > .group-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.prop-row .val { font-size: 12px; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

input[type="range"] { flex: 1; accent-color: var(--ink); min-width: 0; }

textarea, select {
  width: 100%;
  font-family: var(--ui-font);
  font-size: 13px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 6px;
  background: #fff;
}
textarea { resize: vertical; min-height: 64px; font-family: "Comic Neue", "Comic Sans MS", cursive; font-weight: 700; }

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.btn-grid button { font-size: 12px; padding: 6px 6px; box-shadow: 2px 2px 0 var(--ink); }

.nudge-pad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 32px);
  gap: 4px;
  justify-content: center;
}
.nudge-pad button { padding: 0; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
.nudge-pad .spacer { visibility: hidden; }

.mini-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}

.kbd-help {
  font-size: 11px;
  color: #777;
  border-top: 2px dashed rgba(27,27,31,.2);
  padding-top: 8px;
  margin-top: 8px;
  line-height: 1.6;
}
.kbd-help kbd {
  background: #f1efe8;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
}

/* ---------- Reszponzív ---------- */
@media (max-width: 1050px) {
  #workspace { grid-template-columns: 210px 1fr 230px; }
}
@media (max-width: 860px) {
  #workspace { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; }
  aside { max-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}