* { box-sizing: border-box; }
:root {
  --ink:#222;
  --brand:#1f6feb;
  --paper:#fff;
  --bg:#eef3ff;
  --accent:#ffd54f;
}
:root.dark {
  --paper:#1e1e1e;
  --bg:#121212;
  --ink:#f2f2f2;
}

@media print {
  header, .palette, .guide, .toolbar { display:none !important; }
  body { background:white; }
  #panelGrid { grid-template-columns: repeat(3, 1fr); gap:12px; }
  .panel { break-inside: avoid; box-shadow:none; }
}
body {
  margin:0; font-family: 'Comic Sans MS', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
}
body {
  font-family: 'Comic Neue', system-ui, sans-serif;
}

header { background: linear-gradient(135deg, var(--brand), #0a4ed3); color:white; padding: 16px 20px; text-align:center; }
header .subtitle { margin:6px 0 0; opacity:.95; }
footer { text-align:center; padding:10px; color:#555; }

.layout { display:grid; grid-template-columns: 280px 1fr 300px; gap:14px; padding:14px; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  aside.palette, aside.guide { order:1; }
  section.panels { order:0; }
}

.palette, .guide {
  background: var(--paper); border:2px solid #000; border-radius:14px; padding:14px;
  box-shadow: 4px 4px 0 #000;
}
.palette h2, .guide h2 { margin: 4px 0 8px; }
.hint { font-size: 12px; color:#666; margin-top: -6px; }

.grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
.grid img {
  width:100%; height:70px; object-fit: contain; background:white; border:2px solid #000; border-radius:10px; cursor:pointer;
}
.buttons { display:flex; flex-wrap: wrap; gap:8px; margin-bottom: 10px; }
.btn {
  background:#fff; border:2px solid #000; border-radius: 10px; padding:6px 10px; cursor:pointer;
  box-shadow: 2px 2px 0 #000; font-weight:600;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.btn.danger { background:#ffe5e5; }

.panels { background: var(--paper); border:2px solid #000; border-radius:14px; padding:10px; box-shadow:4px 4px 0 #000; }
.toolbar { display:flex; gap:8px; align-items:center; padding:8px; }
.toolbar.top { border-bottom:2px dashed #000; }
.toolbar.bottom { border-top:2px dashed #000; }
.spacer { flex:1; }
.hidden { display:none; }

#panelGrid {
  display:grid; grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap:12px; padding:12px;
}
.panel {
  background:white; border:3px solid #000; border-radius:12px; position:relative;
  height:280px; overflow:hidden; outline:none; box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 0 0 6px #fff;
}
.panel.selected { box-shadow: 0 6px 16px rgba(0,0,0,.2), inset 0 0 0 6px var(--accent); }
.panel.selected {
  transform: scale(1.01);
  transition: transform 0.15s ease;
}

.panel .panel-label {
  position:absolute; top:6px; left:6px; background: #000; color:#fff; width:26px; height:26px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size: 14px;
}
.panel .item, .panel .bubble, .panel .bg {
  position:absolute; user-select:none; touch-action:none; cursor:move;
}
.panel .bg { inset:0; width:100%; height:100%; object-fit: cover; pointer-events:none; filter: saturate(1.1) contrast(1.05); }
.panel .bubble {
  min-width:80px; min-height:40px; padding:8px 10px; border:3px solid #000; border-radius:14px; background: rgba(255,255,255,.92);
  font-weight:700; line-height:1.12;
}
.bubble.speech { border-radius: 20px; }
.bubble.thought { border-style: dashed; }
.bubble.shout { background:#fffa90; box-shadow: inset 0 0 0 3px #000; border-radius: 4px; transform: rotate(-1deg); }
.bubble.caption { background:#e3f2fd; border-style: dotted; font-weight:600; }

.item.selected, .bubble.selected { outline: 3px dashed var(--brand); outline-offset: 0; }

.note { font-size: 12px; color:#444; }

#uploadAsset {
  width: 100%;
  padding: 6px;
  border: 2px dashed #000;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}