:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden;
  font: 13px/1.4 system-ui, sans-serif; background: #000; color: #111; }
#app { position: fixed; inset: 0; cursor: grab; }
#app.grabbing { cursor: grabbing; }
#app.pointing { cursor: pointer; }
canvas { display: block; }

#bar {
  position: fixed; top: 12px; left: 12px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 10px; max-width: calc(100vw - 24px);
  background: rgba(255,255,255,.94); border: 1px solid #ddd; border-radius: 10px;
  padding: 8px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.35); z-index: 5;
}
#bar h1 { margin: 0 6px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
#bar button {
  font: inherit; padding: 5px 10px; border: 1px solid #c8ccd2; border-radius: 7px;
  background: #fff; cursor: pointer; color: #111;
}
#bar button.on { background: #111; color: #fff; border-color: #111; }

#hint {
  position: fixed; bottom: 12px; left: 12px; z-index: 5; color: #d7d9de;
  background: rgba(20,20,22,.72); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 6px 10px; font-size: 12px;
}
#status {
  position: fixed; bottom: 12px; right: 12px; z-index: 5; color: #d7d9de;
  background: rgba(20,20,22,.72); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; max-width: 46vw;
  white-space: pre-wrap;
}
#status.err { color: #ff9a9a; }

/* hover / tap info card */
#card {
  position: fixed; left: 0; top: 0; z-index: 8; display: none;
  pointer-events: none; max-width: 340px; padding: 10px 12px;
  background: #fff; border: 1px solid #dfe2e7; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45); color: #111;
}
#card .stand { font-weight: 700; font-size: 11px; color: #6b7280;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
#card .entry { display: flex; gap: 11px; align-items: flex-start; }
#card .entry + .entry { margin-top: 11px; padding-top: 11px; border-top: 1px solid #eef0f3; }
#card .chip { flex: 0 0 auto; width: 104px; height: 76px; background: #111;
  border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 8px; }
#card .chip img { max-width: 88px; max-height: 60px; display: block; }
#card .meta { min-width: 0; }
#card .name { font-weight: 600; font-size: 13px; color: #16181d; }
#card .badge { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: #eef2ff; color: #3b4fd8;
  text-transform: uppercase; letter-spacing: .04em; }
#card .badge.marca { background: #fff1e6; color: #c2410c; }
#card .badge.zona { background: #e8f7ee; color: #0f7b3f; }
#card .chip.zone { font-size: 30px; line-height: 1; }
#card .desc { margin: 5px 0 0; font-size: 12px; color: #4b5563; line-height: 1.4; }
#card .none { font-size: 12px; color: #6b7280; }

#loading { position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,.55); font-size: 15px; color: #fff; z-index: 10; }
#loading.on { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; }
#loading::before { content: ''; width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.22); border-top-color: #fff;
  animation: map-spin .8s linear infinite; }
@keyframes map-spin { to { transform: rotate(360deg); } }
#drop { position: fixed; inset: 0; z-index: 20; display: none; place-items: center;
  background: rgba(70,110,255,.18); border: 3px dashed #4a6cff; color: #fff; font-size: 18px; }
#drop.on { display: grid; }
#file { display: none; }

@media (max-width: 640px) {
  #card { left: 10px !important; right: 10px !important; top: auto !important;
    bottom: 10px !important; max-width: none; width: auto; }
  #hint { display: none; }
}

/* --- Presentation / TV mode: no chrome, no cursor --- */
html.tv #bar, html.tv #hint, html.tv #status, html.tv #card,
body.tv #bar, body.tv #hint, body.tv #status, body.tv #card { display: none !important; }
html.tv #app, body.tv #app { cursor: default; }
html.tv #loading { background: rgba(13,12,18,.85); }
html.tv, body.tv { background: #0d0c12; }