:root {
  --c1: #fff;
  --c2: #ccc;
  --c3: #aaa;
  --c4: #666;
  --c5: #444;
  --c6: #222;
  --c7: #111;
  --c8: #000;
  --font: monospace;
  --fs: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--c8); color:var(--c2); font-family:var(--font); font-size:var(--fs); }

/* --- inputs --- */

button {
  background:var(--c6); border:1px solid var(--c5); color:var(--c3);
  font:var(--fs) var(--font); padding:4px 10px; cursor:pointer;
}
button:hover { background:var(--c5); }
button:disabled { background:var(--c7); color:var(--c5); cursor:not-allowed; }

input[type="text"] {
  background:var(--c8); color:var(--c2); border:1px solid var(--c5);
  padding:4px 8px; font:var(--fs) var(--font); outline:none;
}
input[type="text"]:focus { border-color:var(--c4); }

input[type="range"] {
  -webkit-appearance:none; appearance:none;
  height:12px; background:var(--c6); border:1px solid var(--c5); outline:none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; background:var(--c4); cursor:pointer;
}
input[type="range"]::-moz-range-thumb {
  width:12px; height:12px; background:var(--c4); border:none; cursor:pointer;
}

a { color:var(--c3); }
a:hover { color:var(--c2); }

/* --- layout: canvas + panels (game, watch) --- */

#gameCanvas { position:absolute; top:0; left:0; background:var(--c7); cursor:grab; }
#gameCanvas.dragging { cursor:grabbing; }

.panel { position:fixed; background:var(--c7); border:1px solid var(--c5); min-width:180px; }
.panel-header { padding:4px 8px; background:var(--c6); border-bottom:1px solid var(--c5); cursor:move; user-select:none; }
.panel-body { padding:8px; display:flex; flex-direction:column; gap:8px; }
#panel { bottom:7px; left:7px; }
#gamePanel { top:7px; left:7px; }
#infoPanel { top:7px; right:7px; }
#hintsPanel { bottom:7px; right:7px; }

.hint-section { display:flex; flex-direction:column; gap:2px; }
.hint-title { color:var(--c3); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.hint-text { color:var(--c4); font-size:12px; line-height:1.5; }

/* --- kv table (game panel) --- */

.kv-table { border-collapse:collapse; width:100%; }
.kv-table td { padding:1px 6px 1px 0; }
.kv-table td:first-child { color:var(--c4); white-space:nowrap; }
.kv-table td:last-child { color:var(--c4); }

/* --- slider row --- */

.slider-row { display:grid; grid-template-columns:50px 1fr 36px; align-items:center; gap:6px; }
.slider-row label { color:var(--c3); }
.slider-row .value { text-align:right; color:var(--c3); }
#infoPanel .slider-row { grid-template-columns:50px 80px 36px; }

/* --- object info (game, watch) --- */

#objectInfo { color:var(--c4); }
#objectInfo table { border-collapse:collapse; }
#objectInfo td { padding:1px 6px 1px 0; }
#objectInfo td:first-child { color:var(--c4); }
#objectInfo tr.name-row td { color:var(--c4); }
#objectTable { display:none; }
#noSelection { color:var(--c4); }

/* --- game: controls --- */

#ap-bar-container { display:flex; gap:2px; height:18px; }
.ap-segment { flex:1; border:1px solid var(--c5); }
.ap-segment.filled { background:rgba(34,34,34,0.7); }
.ap-segment.empty { background:transparent; }
#controlGrid { display:block; margin:0 auto; cursor:pointer; }
#panel { background: transparent; }
#panel .panel-body { background: rgba(17,17,17,0.7); }
#delete-game-btn { display:none; }

.lock-label {
  display:flex; align-items:center; justify-content:flex-end;
  gap:6px; color:var(--c3); cursor:pointer; user-select:none;
}
.retro-checkbox { display:none; }
.retro-checkbox-box { display:inline-block; width:14px; height:14px; border:1px solid var(--c5); background:var(--c6); }
.retro-checkbox:checked + .retro-checkbox-box { background:var(--c4); }

/* --- watch --- */

#player-label { color:var(--c4); }

/* --- index: layout --- */

.section { margin-bottom:16px; }
#name-section { background:var(--c7); border:1px solid var(--c5); padding:8px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
#name-section label { color:var(--c3); white-space:nowrap; }
#name-section input[type="text"] { width:200px; }
#toggle-new-game { margin-bottom:8px; }

.form-container { background:var(--c7); border:1px solid var(--c5); padding:12px; display:none; margin-bottom:16px; max-width:500px; }
.form-container.visible { display:block; }
.form-row { display:grid; grid-template-columns:140px 1fr 50px; align-items:center; gap:8px; margin-bottom:6px; }
.form-row label { color:var(--c3); }
.form-row .val { color:var(--c3); text-align:right; }
.form-row input[type="range"] { width:100%; }

.form-title { color:var(--c4); margin-bottom:8px; }
.form-error { color:var(--c2); margin-top:6px; min-height:14px; }
.form-submit { margin-top:8px; }

#join-name-input { width:100%; }

/* --- index: game table --- */

table { border-collapse:collapse; width:100%; max-width:900px; }
th { text-align:left; color:var(--c4); border-bottom:1px solid var(--c5); padding:4px 8px 4px 0; font-weight:normal; }
td { padding:4px 8px 4px 0; border-bottom:1px solid var(--c6); }
tr.game-row { cursor:pointer; }
tr.game-row:hover td { background:var(--c7); }
.status-WAITING { color:var(--c3); }
.status-RUNNING { color:var(--c2); }
.status-FINISHED { color:var(--c4); }