:root {
  --bg:        #0f1117;
  --bg2:       #161b27;
  --bg3:       #1e2433;
  --border:    #2a3448;
  --text:      #c8d0e0;
  --dim:       #7a8499;
  --accent:    #4a8eff;
  --green:     #00cc88;
  --cell-size: 320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  height: 100vh;
  overflow: hidden;
}

/* ── Lobby ──────────────────────────────────────────── */

#lobby-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

#lobby-overlay.hidden { display: none; }

#lobby-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#lobby-box h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: var(--text);
}

.lobby-field input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
}

.lobby-field input:focus { border-color: var(--accent); }

.lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#btn-join {
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
}

#btn-join:hover { opacity: 0.85; }

#character-picker {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.char-card img { height: 80px; width: auto; border-radius: 4px; }

.char-card-label {
  font-size: 11px;
  color: var(--dim);
  text-transform: capitalize;
}

.char-card:hover:not(.taken) { border-color: var(--accent); }
.char-card.selected { border-color: var(--accent); background: rgba(74, 142, 255, 0.1); }
.char-card.taken { opacity: 0.35; pointer-events: none; }

#lobby-error {
  font-size: 12px;
  color: #ff6b6b;
  text-align: center;
  min-height: 16px;
}

/* ── App layout ─────────────────────────────────────── */

#app {
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-rows: 40px 1fr auto 180px;
  height: 100vh;
}

/* ── Top bar ────────────────────────────────────────── */

#top-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

#game-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 4px;
  flex-shrink: 0;
}

#btn-party, #btn-tile, #btn-reset {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
}

#btn-party:hover, #btn-tile:hover { border-color: var(--accent); background: #1e2d4a; }
#btn-reset:hover { border-color: #ff6b6b; background: #2d1414; }
#btn-tile.active { border-color: var(--accent); background: #1e2d4a; }

#player-tags {
  display: flex;
  gap: 6px;
  flex: 1;
}

.player-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px 2px 8px;
  font-size: 12px;
}

.player-tag.me { border-color: var(--green); }

.player-tag.disconnected { opacity: 0.4; }

.ptag-name { color: var(--text); }
.ptag-hand { font-size: 10px; color: var(--dim); }

/* ── Map panel ──────────────────────────────────────── */

#map-panel {
  grid-row: 2;
  grid-column: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

#map-grid {
  display: grid;
  gap: 3px;
}

.map-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: var(--bg);
  border-radius: 4px;
}

.map-cell.fog {
  border: 1px dashed var(--border);
  opacity: 0.4;
}

.map-cell.revealed {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.map-cell.revealed img:not(.token) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.map-cell.revealed.error { background: var(--bg3); }
.map-cell.current { outline: 2px solid var(--accent); outline-offset: 2px; }

.map-cell.move-target::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--green);
  background: rgba(0, 204, 136, 0.12);
  pointer-events: none;
  border-radius: 4px;
}

.token {
  width: calc(var(--cell-size) * 0.12);
  height: calc(var(--cell-size) * 0.12);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: var(--bg2);
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.my-token {
  pointer-events: auto;
  cursor: grab;
  border-color: var(--green);
}

.my-token:active {
  cursor: grabbing;
}

.my-token.move-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Right panel ────────────────────────────────────── */

#right-panel {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
}

#actions-section {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}

#event-section {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  min-height: 0;
}

.panel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--dim);
  margin-bottom: 6px;
}

#hand-header .panel-label { margin-bottom: 0; }

#actions-heading {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  min-height: 18px;
}

#action-list { display: flex; flex-direction: column; gap: 5px; }

.action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  width: 100%;
  color: var(--text);
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}

.action-btn:hover:not(:disabled) { background: #263450; border-color: var(--accent); }
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.action-btn img {
  width: 221px;
  height: 100px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--bg2);
}

.action-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--dim);
}

.dir-label { color: var(--accent); font-weight: 600; text-transform: capitalize; }
.event-tag { color: var(--green); }
.action-value { color: var(--green); font-weight: 700; }

#event-display img { width: 100%; border-radius: 4px; display: block; margin-bottom: 8px; }
#event-display p { font-size: 11px; line-height: 1.65; color: var(--dim); white-space: pre-wrap; }

.empty-msg { font-size: 11px; color: var(--dim); font-style: italic; }

/* ── Bottom panel ───────────────────────────────────── */

#bottom-panel {
  grid-row: 4;
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

#character-panel {
  flex-shrink: 0;
  align-self: stretch;
}


#character-panel img {
  height: 160px;
  width: auto;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.deck-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.health-display {
  font-size: 22px;
  font-weight: 700;
  color: #ff6b6b;
  flex-shrink: 0;
}

.reshuffle-row {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

.reshuffle-input {
  width: 52px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  padding: 4px 6px;
  text-align: center;
  outline: none;
  align-self: stretch;
}
.reshuffle-input:focus { border-color: var(--accent); }
.reshuffle-input::-webkit-inner-spin-button { opacity: 1; }

.reshuffle-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
  align-self: stretch;
}
.reshuffle-btn:hover { background: #1e2d4a; border-color: var(--accent); }

.reshuffle-cards-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}

#btn-discard-mode {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}
#btn-discard-mode:hover { border-color: #ff6b6b; color: #ff6b6b; }
#btn-discard-mode.active { border-color: #ff6b6b; color: #ff6b6b; background: #2d1414; }

.hand-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hand-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.hand-header-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.discard-top-input {
  width: 42px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  padding: 2px 4px;
  text-align: center;
}

#btn-discard-top {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}
#btn-discard-top:hover:not(:disabled) { border-color: #ff9a3c; color: #ff9a3c; }
#btn-discard-top:disabled { opacity: 0.4; cursor: default; }

#btn-change-hp {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}
#btn-change-hp:hover { border-color: #6bcb77; color: #6bcb77; }

.hand-input-label {
  font-size: 10px;
  color: var(--dim);
  white-space: nowrap;
}

/* ── Party drawer ────────────────────────────────────── */

#party-drawer {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  z-index: 20;
}

#party-drawer.hidden { display: none; }

#party-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.char-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.char-slot img {
  height: 120px;
  width: auto;
  border-radius: 4px;
  object-fit: cover;
}

.char-name {
  font-size: 11px;
  color: var(--dim);
  text-align: center;
}

.char-piles {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--dim);
}

.char-hand {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Inventory ───────────────────────────────────────── */

.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 6px;
}

.inv-weight {
  font-size: 10px;
  color: var(--dim);
}

.inv-weight-over {
  color: #ff6b6b;
}

.inv-items {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 20px;
}

.inv-tile {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.inv-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inv-weight-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}

.inv-tile-removable {
  cursor: pointer;
}

.inv-tile-removable:hover {
  border-color: #ff6b6b;
}

/* ── Confirm overlay ─────────────────────────────────── */

#confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
}

#confirm-overlay.hidden { display: none; }

#confirm-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(320px, 90vw);
}

#confirm-box p {
  font-size: 13px;
  color: var(--text);
  text-align: center;
}

#confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#btn-confirm-yes {
  background: #3d1414;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
  border-radius: 5px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s;
}

#btn-confirm-yes:hover { background: #5a1a1a; }

#btn-confirm-no {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 7px 18px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

#btn-confirm-no:hover { background: #263450; }

#deck-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
}

.pile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pile-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.pile-count { font-size: 11px; color: var(--text); }

.card-back-visual {
  width: 44px;
  height: 62px;
  background: linear-gradient(135deg, #1a356e 0%, #0d1f42 100%);
  border: 2px solid #2a4a8e;
  border-radius: 5px;
  transition: opacity 0.2s;
}

.card-back-empty {
  width: 80px;
  height: 80px;
  border: 1.5px dashed var(--border);
  border-radius: 5px;
}

#hand-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

#inventory-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


#controls-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: flex-end;
}

#inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

#inventory-cards {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.inv-card {
  position: relative;
}

.inv-card-weight {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}

#hand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

#hand-cards {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.card {
  width: 130px;
  height: 130px;
  background: var(--bg3);
  border: 1.5px solid #2a4a7e;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  pointer-events: none;
}

.char-hand .card {
  width: 70px;
  height: 70px;
}

#modal-cards .card {
  width: 325px;
  height: 325px;
}

#modal-cards .card.facedown {
  cursor: default;
  border-color: var(--border);
}

#modal-cards .card[draggable="true"] { cursor: grab; }
#modal-cards .card.dragging { opacity: 0.4; }
#modal-cards .card.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.card.chain-inactive,
#modal-cards .card.chain-inactive { opacity: 0.5; border: 6px dashed #ff6b6b; }
.card.selectable { cursor: pointer; border-color: var(--accent); }
.card.selectable:hover { background: #1e2d4a; }
.card.selected { background: #0a2a1a; border-color: var(--green); }
.card.discardable { cursor: pointer; }
.card.discardable:hover { background: #2d1414; border-color: #ff6b6b; }
.card.zoomable { cursor: zoom-in; }
.card.zoomable:hover { border-color: var(--accent); background: #1e2d4a; }

.card-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
}
.card-zoom-overlay img {
  max-height: 80vh;
  max-width: 80vw;
  border-radius: 8px;
  pointer-events: none;
}

.card-zoom-overlay.pile-zoom {
  align-items: flex-start;
  padding: 48px 32px;
  overflow-y: auto;
  cursor: default;
}
.pile-zoom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 95vw;
  margin: 0 auto;
  cursor: default;
}
.pile-zoom-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--dim);
}
.pile-zoom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 325px);
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.pile-zoom-grid .card {
  width: 325px;
  height: 325px;
}

.pile-img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  transition: box-shadow 0.15s;
}
.pile-img.clickable { cursor: pointer; }
.pile-img.clickable:hover { box-shadow: 0 0 0 2px var(--accent); }

.pile-btn { color: var(--dim); cursor: default; font-size: 10px; }
.pile-btn.clickable { color: var(--accent); cursor: pointer; }
.pile-btn.clickable:hover { text-decoration: underline; }

/* ── Resolution panel ───────────────────────────────── */

#resolution-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  height: 400px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

#resolution-panel.hidden { display: none; }

#modal-cards {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  flex-shrink: 0;
  padding: 4px 0;
}

#res-info-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#modal-info {
  font-size: 12px;
  color: var(--dim);
  text-align: center;
}

#modal-symbols {
  font-size: 11px;
  color: var(--accent);
  text-align: center;
  min-height: 14px;
}

#modal-hint {
  font-size: 11px;
  color: var(--green);
  text-align: center;
  min-height: 16px;
}

#modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

#modal-buttons button {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}

#modal-buttons button:hover:not(:disabled) { background: #263450; }
#modal-buttons button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Replace section ────────────────────────────────── */

#replace-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

#replace-section.hidden { display: none; }

#replace-target {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  min-height: 14px;
}

#replace-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#replace-num {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 7px;
  outline: none;
}

#replace-num:focus { border-color: var(--accent); }

#replace-suffix {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
}

#replace-suffix:focus { border-color: var(--accent); }

#btn-replace {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

#btn-replace:hover { background: #263450; border-color: var(--accent); }

.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

#add-item-row {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}

#add-item-input {
  flex: 1;
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  padding: 3px 6px;
}

#btn-add-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

#btn-add-item:hover { border-color: var(--text); color: var(--text); }

#btn-upload-tile {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

#btn-upload-tile:hover { background: #263450; border-color: var(--accent); }

/* ── Upload overlay ─────────────────────────────────── */

#upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
}

#upload-overlay.hidden { display: none; }

#upload-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, 92vw);
}

#upload-pw-row input,
#upload-tile-id {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}

#upload-pw-row input:focus,
#upload-tile-id:focus { border-color: var(--accent); }

#upload-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#upload-file-label {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.1s;
}

#upload-file-label:hover { border-color: var(--accent); }
#upload-file { display: none; }

#upload-file-name {
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#upload-fields { display: flex; gap: 8px; }
#upload-tile-id { flex: 1; min-width: 0; }

#upload-suffix {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

#upload-suffix:focus { border-color: var(--accent); }

#upload-overwrite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}

#upload-actions { display: flex; gap: 8px; }

#btn-upload-submit {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}

#btn-upload-submit:hover:not(:disabled) { opacity: 0.85; }
#btn-upload-submit:disabled { opacity: 0.4; cursor: not-allowed; }

#btn-upload-close {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}

#btn-upload-close:hover { background: #263450; }

#upload-status {
  font-size: 12px;
  min-height: 16px;
  color: var(--dim);
}

#upload-output {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  font-size: 10px;
  color: var(--dim);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

#upload-output.hidden { display: none; }