/* Robbie The Robot — granatowa hala, edytor obok planszy i panele pod nią. */
:root {
  --bg: var(--playora-bg, #0a1220);
  --panel: var(--playora-panel, #101c2e);
  --panel-edge: var(--playora-panel-2, #22344e);
  --ink: var(--playora-text, #e8f1ff);
  --ink-dim: var(--playora-muted, #93a7c2);
  --line: #29405e;
  --accent: var(--playora-accent, #4cc9f0);
  --accent-2: #55dd88;
  --warn: #ffb703;
  --danger: var(--playora-danger, #ff6b6b);
  --radius: 14px;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1100px 620px at 12% -8%, #14294a 0%, transparent 60%),
    radial-gradient(900px 520px at 108% 6%, #0f2038 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}

.playora-nav { display: flex; gap: 12px; align-items: center; }
.playora-nav a {
  color: var(--ink); text-decoration: none; font: 600 13px system-ui, sans-serif;
  border: 1px solid var(--playora-border, #444); border-radius: 8px; padding: 8px 10px;
}
.playora-nav a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 620px) { .playora-nav { display: none; } }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 14px clamp(10px, 3vw, 28px) 0;
}
.brand { margin: 0; font-size: clamp(18px, 4vw, 24px); letter-spacing: .08em; }
.brand-accent { color: var(--accent); }
.score-board { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-count {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--ink-dim); white-space: nowrap;
}
.chip-count strong { color: var(--ink); font-size: 13px; }

main {
  flex: 1; width: 100%; max-width: 1180px; margin-inline: auto;
  padding: 10px clamp(10px, 3vw, 28px) 28px; min-width: 0;
}

.intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 8px 0 20px; }
.intro h1 { margin: 6px 0 10px; font-size: clamp(22px, 4.4vw, 38px); letter-spacing: -.02em; max-width: 26ch; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.intro-copy { margin: 0; color: var(--ink-dim); max-width: 62ch; }
.intro-stamp {
  flex: none; text-align: right; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 10px 14px; color: var(--accent); font-weight: 800; letter-spacing: .06em;
}
.intro-stamp small { display: block; width: fit-content; margin-left: auto; max-width: 21ch; text-align: right;
  color: var(--ink-dim); font-size: 10px; letter-spacing: .12em; margin-top: 4px; }
@media (max-width: 720px) { .intro { flex-direction: column; gap: 12px; } .intro-stamp { text-align: left; }
  .intro-stamp small { margin-left: 0; text-align: left; } }

.panel {
  background: linear-gradient(180deg, #13223a, #0e1827);
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  padding: clamp(12px, 2.4vw, 20px);
}
.panel-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.sidebar { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sidebar .mode-row { margin-bottom: 12px; }
.mode-row .btn.is-active, .mode-row .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.field { display: grid; gap: 6px; margin-bottom: 12px; min-width: 0; }
.field-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
select, input {
  font: inherit; color: var(--ink); background: #0c1626; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; width: 100%; min-width: 0;
}
input[type="range"] { padding: 0; accent-color: var(--accent); background: transparent; border: none; }
.read { font-size: 12px; color: var(--ink-dim); }
.btn {
  appearance: none; cursor: pointer; font: 600 14px system-ui, sans-serif; color: var(--ink);
  background: #15243a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #061723; }
.btn-small { padding: 7px 10px; font-size: 13px; }
.btn.full { width: 100%; }

.seed-line { margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); }
.seed-line strong { display: block; margin-top: 3px; font-size: 18px; letter-spacing: .16em; color: var(--accent); }
.counts { margin: 0; display: grid; gap: 8px; }
.counts div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.counts dt { font-size: 13px; color: var(--ink-dim); }
.counts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.share-note { margin: 0 0 10px; font-size: 13px; color: var(--ink-dim); }

/* ---------- plansza ---------- */
.arena-card { display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.arena-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.turn { margin: 0; font-weight: 700; }
.hint { margin: 0; color: var(--ink-dim); font-size: 13px; }
.board-wrap {
  position: relative; width: 100%; margin-inline: auto; display: flex; justify-content: center;
  background: #0b1424; border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-width: 0;
}
.board-controls, .preview-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-controls .btn { min-width: 44px; min-height: 40px; font-size: 18px; }
.board-controls #btnZoomReset { font-size: 13px; }
.board-zoom, #previewStatus { color: var(--ink-dim); font-size: 12px; }
.board-help { margin: -8px 0 0; font-size: 11px; color: var(--ink-dim); }
.preview-controls .btn[aria-pressed="true"] { border-color: var(--warn); color: var(--warn); }
#previewStatus { flex: 1 1 180px; }
#board { display: block; max-width: 100%; border-radius: 8px; }
.banner {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center;
  background: rgba(6, 14, 26, .86); border-radius: 12px; padding: 18px; z-index: 2;
}
.banner-title { margin: 0; font-size: clamp(16px, 3vw, 22px); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.banner[data-kind="halted"] .banner-title { color: var(--danger); }
.banner-text { margin: 0; font-size: clamp(16px, 3.2vw, 24px); font-weight: 800; }
.banner-stats, .banner-report { margin: 0; font-size: 13px; color: var(--ink-dim); }
.banner-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toast {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: #16263c; border: 1px solid var(--danger); color: #ffe9e9;
  border-radius: 10px; padding: 9px 14px; font-size: 14px; z-index: 4; max-width: 92%;
}

/* ---------- edytor bloków ---------- */
.editor {
  display: grid; gap: 12px; min-width: 0;
  background: linear-gradient(180deg, #101d31, #0c1725);
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  padding: clamp(12px, 2.4vw, 18px);
}
.editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.editor-head .panel-title { margin: 0; }
.program-status { margin: 0; font-size: 13px; color: var(--ink-dim); }
.program-status.is-good { color: var(--accent-2); }
.program-status.is-bad { color: var(--danger); }

.palette { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.palette-head { display: none; }
.palette-group {
  flex: 1 1 180px; min-width: 0; border: 1px dashed var(--line); border-radius: 12px;
  padding: 8px 10px 10px; background: rgba(12, 22, 38, .7);
}
.palette-title { margin: 0 0 7px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.palette-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; cursor: grab; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px;
  background: #16273f; color: var(--ink); font: 600 13px system-ui, sans-serif;
}
.chip:hover:not(:disabled) { border-color: var(--accent); }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.chip.is-dragging { opacity: .5; }
.chip-glyph { font-size: 20px; line-height: 1; color: var(--accent); font-weight: 900; }
.chip-fwd .chip-glyph, .chip-back .chip-glyph { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #0c4563; color: white; }
.chip-label { font-size: 12px; }
.tone-move .chip-glyph { color: var(--accent); }
.tone-tool .chip-glyph { color: var(--warn); }
.tone-logic .chip-glyph { color: #b388ff; }
.tone-call .chip-glyph { color: var(--accent-2); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-item { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #132234; }
.tab {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 7px 10px;
  background: transparent; color: var(--ink-dim); font: 600 12px system-ui, sans-serif;
}
.tab-item:has(.tab.is-active) { border-color: var(--accent); }
.tab.is-active { border-color: var(--accent); color: var(--ink); background: #173049; }
.tab.is-empty { opacity: .68; }
.tab-count { font-variant-numeric: tabular-nums; color: var(--accent); }
.tab-off { appearance: none; cursor: pointer; color: var(--danger); font-weight: 800; font-size: 18px; min-width: 34px; border: 0; border-left: 1px solid var(--line); background: #281e2c; }
.tab-off:hover, .tab-off:focus-visible { color: white; background: #a33145; }

ol.program, ol.block-body { list-style: none; margin: 0; padding: 0; min-width: 0; }
ol.program { display: grid; gap: 6px; padding: 6px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(8, 16, 28, .6); }
ol.block-body {
  display: grid; gap: 5px; margin: 6px 0 0; padding: 6px 6px 6px 12px;
  border-left: 3px solid #2f5f80; border-radius: 0 10px 10px 0; background: rgba(10, 20, 34, .7);
}
.block { min-width: 0; }
.block-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; background: #16273f;
}
.block-glyph { color: var(--accent); font-weight: 700; width: 1.1em; text-align: center; }
.block-label { font-weight: 600; font-size: 14px; }
.block-tool .block-glyph { color: var(--warn); }
.block-logic .block-glyph, .block-for .block-glyph, .block-while .block-glyph,
.block-if .block-glyph, .block-ifnot .block-glyph { color: #b388ff; }
.block-call .block-glyph { color: var(--accent-2); }
.block.is-wrap > .block-head { background: #1b2f4a; }
.block.is-active > .block-head { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(76, 201, 240, .35); }
.block.is-dragging { opacity: .45; }
.block-times { width: 68px; padding: 5px 6px; font-size: 13px; }
.block-cond, .block-fn { width: auto; flex: 1 1 140px; padding: 5px 8px; font-size: 13px; }
.block-remove {
  appearance: none; cursor: pointer; margin-left: auto; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--ink-dim);
  font: 700 15px system-ui, sans-serif; line-height: 1; padding: 2px 6px;
}
.block-remove:hover { color: var(--danger); border-color: var(--danger); }
.block-end { margin: 4px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.block-empty { margin: 0; font-size: 12px; color: var(--ink-dim); font-style: italic; padding: 3px 2px; }
.block-drop-marker { height: 3px; border-radius: 3px; background: var(--accent); list-style: none; }
.insert-row { list-style: none; }
.insert-button { width: 100%; min-height: 40px; border: 1px dashed #426482; border-radius: 9px; background: #10263c; color: var(--accent); font: 700 13px system-ui, sans-serif; cursor: pointer; }
.insert-button:hover, .insert-button:focus-visible { border-color: var(--accent); background: #17354e; }

.howto-card {
  width: 100%; min-width: 0; padding: 14px clamp(12px, 2vw, 20px); border: 1px dashed var(--line);
  border-radius: 12px; background: rgba(12, 22, 38, .74);
}
.howto-title { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.howto-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14px; color: var(--ink-dim); }
.howto-list b { color: var(--ink); }
.howto-list li::marker { color: var(--accent); }

.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 18px clamp(10px, 3vw, 28px);
  color: var(--ink-dim); font-size: 12px; letter-spacing: .08em;
}

/* Edytor jest po lewej, plansza w głównej kolumnie, a ustawienia i legenda
   leżą pod planszą. Reguły dotyczą tylko Robbiego, nie innych gier Playory. */
main, .topbar, .foot { max-width: 1480px; }
.robbie-layout, body.in-match .robbie-layout {
  grid-template-columns: minmax(320px, min(36%, 460px)) minmax(0, 1fr);
  grid-template-areas: "editor board" "howto howto";
  gap: 18px 22px;
  align-items: start;
}
.robbie-layout > .editor { grid-area: editor; min-width: 0; }
.robbie-layout > .board-column {
  grid-area: board; min-width: 0; display: grid; gap: 16px;
}
.robbie-layout > .howto-card { grid-area: howto; }
.board-column > .sidebar {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px; align-content: start;
}
.board-column > .sidebar .panel-modes { grid-row: span 2; }
.board-column > .sidebar .panel { min-width: 0; }
.board-column > .board-legend { margin-top: 0; }
.board-wrap { overflow-x: auto; justify-content: flex-start; }
.board-wrap { overflow-y: auto; max-height: min(75vh, 760px); overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
#board { max-width: none; margin-inline: auto; flex: none; }

@media (max-width: 950px) {
  .robbie-layout, body.in-match .robbie-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "editor" "board" "howto";
  }
}
@media (max-width: 620px) {
  .intro { display: none; }
  .topbar { padding-top: 8px; }
  .score-board { gap: 4px; }
  .chip-count { padding: 2px 7px; font-size: 10px; }
  .robbie-layout, body.in-match .robbie-layout {
    grid-template-areas: "arena" "editor" "sidebar" "legend" "howto";
    gap: 10px;
  }
  .robbie-layout > .board-column { display: contents; }
  .board-column > .arena-card { grid-area: arena; position: sticky; top: 0; z-index: 5; padding: 8px; border: 1px solid var(--panel-edge); border-radius: 12px; background: #0c1725; gap: 7px; box-shadow: 0 8px 20px #050b17aa; }
  .board-column > .sidebar { grid-area: sidebar; }
  .board-column > .board-legend { grid-area: legend; }
  .board-wrap { height: min(34vh, 290px); max-height: none; padding: 3px; }
  .arena-head .hint { display: none; }
  .turn { font-size: 12px; line-height: 1.2; }
  .board-help { display: none; }
  .board-controls .btn { min-height: 36px; }
  .preview-controls .btn { min-height: 40px; }
  #previewStatus { font-size: 11px; line-height: 1.2; }
  .editor { padding: 10px; }
  .palette-shell { display: none; position: fixed; z-index: 12; left: 0; right: 0; bottom: 0; max-height: 44dvh; overflow: auto; background: #101d31; border: 2px solid var(--accent); border-radius: 18px 18px 0 0; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px #030914cc; }
  .palette-shell.is-open { display: block; }
  .palette-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
  .palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .palette-group { grid-column: 1 / -1; padding: 7px; }
  .palette-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .chip { min-height: 62px; padding: 8px; cursor: pointer; }
  .chip-label { font-size: 13px; line-height: 1.15; text-align: left; }
  .block-head { min-height: 48px; }
  .block-remove { min-width: 42px; min-height: 40px; font-size: 23px; }
  .tab { min-height: 42px; }
  .tab-off { min-width: 42px; }
  .board-column > .sidebar { grid-template-columns: minmax(0, 1fr); }
  .board-column > .sidebar .panel-modes { grid-row: auto; }
}
.footer-muted { opacity: .6; }

@media (max-width: 520px) {
  .block-cond, .block-fn { flex: 1 1 100%; }
  .chip { flex: 1 1 46%; }
  .chip-label { font-size: 11px; }
}

/* ---------- legenda planszy ----------
   Kolory powtarzają paletę renderera (src/renderer.js) — jak zmiana w klatce,
   tak samo ma wyglądać kafelek w legendzie. */
.board-legend {
  margin-top: 14px; padding: 12px 14px 14px; border: 1px dashed var(--line);
  border-radius: 12px; background: rgba(12, 22, 38, .74);
}
.legend-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.legend-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px 14px;
}
.legend-list li { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 9px; min-width: 0; }
.legend-list li b { font-size: 13px; font-weight: 600; }
.legend-list li small { grid-column: 2; color: var(--ink-dim); font-size: 11px; line-height: 1.35; }
.legend-chip {
  grid-row: 1 / span 2; display: block; width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--panel);
}
.chip-robot { background: #61dcff; border-color: #14566e; box-shadow: inset 0 -6px 0 #14566e; }
.chip-wall { background: #34465d; border-color: #1a2738; box-shadow: inset 0 5px 0 #526782; }
.chip-exit { background: #123a2c; border-color: #76f2a1; box-shadow: inset 0 0 0 3px rgba(118, 242, 161, .45); }
.chip-crate { background: #f2bd56; border-color: #432b13; box-shadow: inset 0 0 0 3px #9b6829; }
.chip-key { background: #ffe080; border-color: #7c5014; box-shadow: inset 0 -5px 0 #7c5014; }
.chip-switch { background: #4a6a8f; border-color: #0d1726; box-shadow: inset 0 0 0 4px #0d1726, inset 0 0 0 6px #4a6a8f; }
.chip-pressed { background: #ffb703; border-color: #0d1726; box-shadow: inset 0 0 0 4px #0d1726, inset 0 0 0 6px #ffb703; }
.chip-door { background: #ff759b; border-color: #622039; box-shadow: inset 0 0 0 3px #622039; }
.chip-door-open { background: #36b77a; border-color: #123a2c; }
.chip-hole { background: #03070d; border-color: #e0a753; box-shadow: inset 0 0 0 2px #e0a753; }
.chip-hole-filled { background: linear-gradient(180deg, #f2bd56 0 55%, #03070d 55% 100%); border-color: #e0a753; }
.chip-lock { background: #9b7df0; border-color: #2b1d47; box-shadow: inset 0 0 0 3px #2b1d47; }
.chip-lock-open { background: #3ddc97; border-color: #2b1d47; }
.legend-rule { margin: 12px 0 0; font-size: 12px; color: var(--ink-dim); }
.legend-rule b { color: var(--ink); }
@media (max-width: 520px) {
  .legend-list { grid-template-columns: 1fr; }
}