/* Interfaz clasica: bordes de ventana, acciones claras y lectura comoda. */
:root { --ui-ink: #18232e; --ui-muted: #46515c; --ui-surface: #e4e3df; --ui-blue: #000080; }
body { font-size: 13px; color: var(--ui-ink); }
:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
.topbar { min-height: 34px; }
.view-switcher { gap: 4px; }
.view-tab { min-height: 36px; padding-inline: 14px; font-size: 12px; }
.view-tab.is-active { min-height: 38px; }
.toolbar { gap: 8px; }
.diff-btn, .toolbar-actions .chip-btn { min-height: 32px; font-size: 12px; }
.panel-head h2, .hq-panel-head h3 { font-size: 14px; }
.panel-sub, .hq-panel-head p, .hq-limit { font-size: 12px; color: var(--ui-muted); }
.power-list { gap: 5px; }
.power-card { min-height: 53px; }
.power-name { font-size: 12px; }
.power-state { font-size: 11px; }
.power-desc { line-height: 1.35; }
.hud { padding-block: 6px 18px; }
.status-bar { min-height: 30px; padding: 5px 8px; font-size: 12px; }
.modal-card { padding: 10px; }
.modal-head { margin-bottom: 10px; }
.modal-head h2 { font-size: 16px; }
.modal-sub { font-size: 12px; }
.modal-card--hq { width: min(100%, 1020px); }
.hq-summary { gap: 6px; }
.hq-stat { padding: 7px 9px; }
.hq-stat span { font-size: 11px; }
.hq-stat strong { font-size: 16px; }
.hq-tabs { gap: 4px; padding: 4px; }
.hq-tab { min-height: 34px; padding-inline: 12px; font-size: 12px; }
.hq-tab.is-active { color: #000080; background: #f0f0ed; }
.hq-panel-head { align-items: center; margin-bottom: 10px; }
.hq-panel-head h3 { margin-bottom: 3px; }
.hq-limit { padding: 7px 9px; }
.upgrade-grid { display: flex; flex-direction: column; gap: 18px; }
.store-group { min-width: 0; }
.store-group-title { margin: 0 0 7px; color: #000080; font-size: 13px; }
.store-grid, .skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.upgrade-card, .skill-card { min-width: 0; padding: 12px; gap: 10px; background: #dededb; }
.store-card-head { display: flex; align-items: center; gap: 9px; }
.store-card-head h4 { font-size: 14px; line-height: 1.3; }
.store-card-head .upgrade-icon, .store-card-head .skill-icon { width: 34px; height: 34px; flex: none; font-size: 17px; }
.store-level { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; }
.store-description, .store-bot-effect { min-width: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
.store-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.store-comparison > div { min-width: 0; padding: 7px 8px; border: 1px solid #a3a3a0; background: #ececea; }
.store-comparison span { display: block; margin-bottom: 3px; color: var(--ui-muted); font-size: 11px; }
.store-comparison strong { display: block; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.store-comparison > div:last-child strong { color: #000080; }
.store-card-action { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: auto; }
.store-card-action button { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.store-card-action small { color: #704000; font-size: 11px; }
.store-complete { color: #005b18; font-size: 12px; font-weight: 700; }
.spec-mode-btn, .spectator-toolbar-actions .chip-btn, .spec-chip-btn { font-size: 12px; }
.extractor-copy strong { font-size: 13px; }
.extractor-copy span, .extractor-charge { font-size: 12px; }
.spectator-board-head h3, .spec-card-name { font-size: 13px; }
.spectator-board-foot, .spec-card-bar-info, .spec-card-thought, .thought-bubble p { font-size: 12px; }
.help-block, .help-powers article, .help-progression p { line-height: 1.45; }
.help-powers p, .help-progression p, .history-list, .records-summary { font-size: 12px; }
@media (max-width: 760px) {
  .topbar { min-height: 42px; }
  .top-actions .icon-btn, .top-actions .ghost-btn { width: 38px; height: 38px; min-height: 38px; }
  .top-actions .coin-chip { min-height: 38px; }
  .view-tab, .view-tab.is-active { min-height: 44px; }
  .store-grid, .skill-grid { grid-template-columns: minmax(0, 1fr); }
  .store-card-action button { width: 100%; min-height: 44px; }
  .hq-tab { min-height: 44px; }
  .hq-panel-head { gap: 8px; }
  .hq-panel-head button { min-height: 44px; }
  .power-card { min-height: 56px; }
  .power-name, .power-state { font-size: 12px; }
  .spec-card-action-btn, .spec-card-diff-select { min-height: 44px; }
}
@media (max-width: 380px) {
  .top-actions .icon-btn, .top-actions .ghost-btn { width: 34px; }
  .store-comparison { grid-template-columns: minmax(0, 1fr); }
}

.power-desc { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: #38414a; font-size: 11px; }
.skill-icon { color: #000080; }

/* Una sola placa de radiografia: la zona es legible y no tapa el cursor. */
.board { position: relative; }
.board-frame.is-xray { outline: none; border-color: var(--shadow) var(--white) var(--white) var(--shadow); }
.board-frame.is-xray .board-viewport, body.is-xray .board { cursor: crosshair; }
#board .cell.is-peek { outline: none !important; animation: none; box-shadow: none !important; }
#board .cell .peek { background: linear-gradient(145deg, #f4fafb, #d8ebee); box-shadow: inset 0 0 0 1px #abc5ca; color: #17394b; text-shadow: none; animation: none; font-size: calc(var(--cell) * 0.56); }
#board .cell .peek[data-kind="mine"] { color: #172f39; background: linear-gradient(145deg, #e5f1f2, #bad7da); box-shadow: inset 0 0 0 1px #92b8bf; }
#board .cell .peek[data-kind="mine"] .icon { width: 55%; height: 55%; }
#board .cell .peek[data-kind="empty"] { color: transparent; }
.xray-lens { position: absolute; z-index: 6; pointer-events: none; border: 2px solid #165d79; box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 0 0 1px rgba(255,255,255,.7); }

/* Los tableros se escalan dentro de su espacio: nunca tienen barras de desplazamiento. */
.board-viewport, .spec-card-board-wrap, .spectator-board-wrap { max-height: none; overflow: visible; }
.spectator-multi-grid { align-items: start; }

/* Vision X: cristal verde translucido con lectura de monitor y barrido suave. */
#board .cell.is-peek { background: var(--face) !important; }
#board .cell .peek {
  inset: 1px;
  background: repeating-linear-gradient(0deg, rgba(2,32,13,.08) 0 1px, transparent 1px 4px), rgba(2,52,21,.83);
  box-shadow: inset 1px 1px rgba(194,255,207,.28), inset -1px -1px rgba(0,20,6,.55);
  color: #aaffb8;
  font-family: Consolas, "Courier New", monospace;
  text-shadow: 0 0 5px rgba(91,255,136,.7);
}
#board .cell .peek[data-kind="mine"] {
  background: repeating-linear-gradient(0deg, rgba(2,32,13,.1) 0 1px, transparent 1px 4px), rgba(0,36,13,.88);
  color: #daffe0;
  box-shadow: inset 1px 1px rgba(194,255,207,.35), inset -1px -1px rgba(0,20,6,.65);
}
#board .cell .peek[data-kind="mine"] .icon { width: 60%; height: 60%; filter: drop-shadow(0 0 3px rgba(108,255,154,.75)); }
#board .cell .peek[data-kind="empty"] { color: transparent; }
.xray-lens { border: 2px solid #43ec78; box-shadow: inset 0 0 0 1px rgba(5,58,20,.8), 0 0 6px rgba(27,218,88,.4); overflow: hidden; }
.xray-lens::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 45%, rgba(144,255,179,.19) 49%, rgba(144,255,179,.28) 50%, transparent 53%); background-size: 100% 220%; animation: xray-sweep 2.4s linear infinite; }
.power-timer-strip[data-mode="xray"] { background: #d9eedb; color: #153b20; }
.power-timer-strip[data-mode="xray"] strong { color: #07521b; }
.power-timer-strip[data-mode="xray"] .power-timer-track i { background: #138b3d; }
@keyframes xray-sweep { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
@media (prefers-reduced-motion: reduce) { .xray-lens::after { animation: none; } }

/* La nitidez y el alcance se desbloquean con la ultima mejora. */
.board-frame.is-xray { --xray-blur: 2.6px; --xray-dim: .5; --xray-veil: .34; }
.board-frame.is-xray[data-xray-level="1"] { --xray-blur: 2.1px; --xray-dim: .58; --xray-veil: .27; }
.board-frame.is-xray[data-xray-level="2"] { --xray-blur: 1.6px; --xray-dim: .66; --xray-veil: .2; }
.board-frame.is-xray[data-xray-level="3"] { --xray-blur: 1.1px; --xray-dim: .74; --xray-veil: .12; }
.board-frame.is-xray[data-xray-level="4"] { --xray-blur: 0px; --xray-dim: 1; --xray-veil: 0; }
#board .cell .peek-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; filter: blur(var(--xray-blur)) brightness(var(--xray-dim)); }

#board .cell .peek::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #001007; opacity: var(--xray-veil); }

/* Solo la casilla apuntada se revela antes de la mejora 3x3. */
#board .cell .peek.is-focus .peek-content { filter: none; }
#board .cell .peek.is-focus::after { opacity: 0; }
#board .cell .peek[data-kind="obscured"] { background: repeating-linear-gradient(0deg, rgba(5,37,18,.2) 0 1px, transparent 1px 4px), #071b0d; box-shadow: inset 1px 1px rgba(194,255,207,.1), inset -1px -1px #001006; }

#board .cell .peek[data-kind="obscured"] .peek-content::before { content: ""; width: 40%; height: 20%; background: rgba(115,255,156,.18); border-radius: 50%; filter: blur(4px); }

/* La recompensa anima el numero, no la posicion del tablero ni del boton. */
#coinCount, #hqCoins { display: inline-block; transform-origin: center; }
.coin-reward-pulse { animation: coin-reward-pulse .55s cubic-bezier(.2,.8,.2,1); }
.coin-reward-popup { position: fixed; z-index: 510; pointer-events: none; color: #fff4a0; background: #634600; border: 1px solid #fff4a0; padding: 2px 6px; font: bold 14px Consolas, monospace; white-space: nowrap; box-shadow: 1px 1px 0 #000; animation: coin-reward-rise .9s ease-out forwards; }
@keyframes coin-reward-pulse { 0%,100% { transform: scale(1); color: inherit; } 30% { transform: scale(1.42); color: #9a5700; } 55% { transform: scale(1.1); color: #000; } }
@keyframes coin-reward-rise { 0% { opacity: 0; transform: translate(-50%, 5px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .coin-reward-pulse, .coin-reward-popup { animation: none; } .coin-reward-popup { transform: translateX(-50%); } }

/* Habilidades de bots: carga legible y pulso breve sobre la casilla utilizada. */
.spec-card-skill-pip { min-height: 20px; gap: 4px; }
.spec-card-skill-pip.is-equipped { color: #163b20; }
.spec-card-skill-pip.is-equipped span { font-size: 8px; white-space: nowrap; }
.spec-bot-card.is-using-skill { animation: bot-skill-card .65s ease-out; }
.spec-mini-board .cell.is-bot-skill-target { position: relative; z-index: 1; outline: 2px solid var(--bot-skill-color, #65a5ff); box-shadow: 0 0 0 2px #fff, 0 0 10px var(--bot-skill-color, #65a5ff); animation: bot-skill-cell .65s ease-out; }
@keyframes bot-skill-card { 25%, 70% { box-shadow: 0 0 0 2px var(--bot-skill-color), 0 0 14px color-mix(in srgb, var(--bot-skill-color) 55%, transparent); } }
@keyframes bot-skill-cell { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.7); } }

/* Controles de compra junto a su habilidad, sin abrir otra ventana. */
.power-purchase-row { display: grid; grid-template-columns: minmax(0,1fr) 96px; gap: 4px; align-items: stretch; }
.power-buy-inline { font: bold 11px Tahoma, sans-serif; padding: 4px; cursor: pointer; }
.power-buy-inline:disabled { cursor: default; opacity: .65; }
.power-card.is-locked { opacity: .55; }
.spec-card-arsenal { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; width: 100%; }
.spec-card-skill-pip { min-width: 0; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .spec-bot-card.is-using-skill, .spec-mini-board .cell.is-bot-skill-target { animation: none; } }