/* ============================================================
   Guardianes del Reino · interfaz versus adaptable a pantalla
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fraunces:wght@600;700&display=swap');
:root { font-family: 'DM Sans', Arial, sans-serif; color: #f3f0e5; background: #101815; --blue: #53a8e8; --purple: #c38af2; --panel: #1d2924; --muted: #aeb8aa; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-width: 320px; margin: 0; overflow: hidden; }
body { background: radial-gradient(ellipse at 18% 0%, #263c30, #101815 60%); }
button { color: inherit; font: inherit; cursor: pointer; }

/* Encabezado bajo y distribución a pantalla completa */
.app { display: flex; width: 100%; height: 100dvh; flex-direction: column; gap: 8px; padding: 8px 10px; }
.topbar { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 4px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.eyebrow { margin: 0; color: #bdac7d; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
h1 { margin: 0; color: #f5e8c5; font: 700 21px Fraunces, Georgia, serif; }
.match-status { display: flex; align-items: center; gap: 8px; color: #cbd3c6; font-size: 11px; }
.match-status b { color: #f0d787; letter-spacing: .12em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #90c975; box-shadow: 0 0 8px #90c975; }
.layout { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 245px; gap: 9px; }
.map-column { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid #465347; border-radius: 11px; background: #1d2924; }
.map-heading { display: flex; min-height: 32px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; background: #222f29; color: #e8dfc6; font-size: 11px; }
.map-heading span { max-width: 65%; color: var(--muted); font-size: 9px; text-align: right; }
.canvas-wrap { position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; background: #71894e; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#toast { position: absolute; bottom: 12px; left: 50%; max-width: 90%; transform: translate(-50%, 10px); padding: 8px 12px; border: 1px solid #68745d; border-radius: 8px; background: #111a17ed; color: #fff1d1; font-size: 11px; line-height: 1.35; opacity: 0; pointer-events: none; text-align: center; transition: .2s; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
.map-footer { display: flex; min-height: 27px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; color: #aeb8aa; font-size: 9px; }

/* Recursos y controles en la columna derecha */
.sidebar { display: flex; min-height: 0; flex-direction: column; gap: 8px; overflow-y: auto; padding: 9px; border: 1px solid #465347; border-radius: 11px; background: var(--panel); scrollbar-color: #64734e #202c26; }
/* Panel para crear una sala de dos jugadores o unirse con su código. */
.online-card { display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; padding: 9px; border: 1px solid #3d4a3e; border-radius: 9px; background: #202c26; }
.online-card h2 { margin: 0 0 2px; color: #eadbb1; font: 600 13px Fraunces, Georgia, serif; }
.online-label { color: #aeb8aa; font-size: 9px; }
.online-card input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #465448; border-radius: 6px; background: #111a17; color: #f3f0e5; font: inherit; font-size: 10px; }
.online-buttons { display: flex; }
.online-card button { min-height: 30px; padding: 5px 7px; border: 1px solid #637548; border-radius: 6px; background: #33452f; color: #edf0dc; font-size: 9px; font-weight: 700; }
.online-card button:hover:not(:disabled) { border-color: #c5a861; background: #43593b; }
.online-card button:disabled { opacity: .5; cursor: wait; }
.join-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 5px; }
.online-card p { min-height: 22px; margin: 2px 0 0; color: #b9c7ab; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.resource-panel, .card { padding: 9px; border: 1px solid #3d4a3e; border-radius: 9px; background: #202c26; }
.resource-panel h2, .card h2, .actions h2 { margin: 0 0 7px; color: #eadbb1; font: 600 13px Fraunces, Georgia, serif; }
.team-resources { padding: 7px 8px; border-radius: 7px; background: #26342c; }
.team-resources + .team-resources { margin-top: 6px; }
.team-resources h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; color: #e7e2d3; font-size: 10px; }
.team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.purple-team .team-dot { background: var(--purple); }
.team-resources div { display: flex; justify-content: space-between; padding: 2px 0; color: #bec7b8; font-size: 10px; }
.team-resources b { color: #f2eddd; font-variant-numeric: tabular-nums; }
.player-tabs { display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; gap: 6px; }
.player-tabs button { padding: 7px 4px; border: 1px solid #465448; border-radius: 7px; background: #26342c; color: #c7d0c3; font-size: 11px; font-weight: 700; }
.player-tabs button.active[data-player="blue"] { border-color: var(--blue); background: #244052; color: #d9efff; }
.player-tabs button.active[data-player="purple"] { border-color: var(--purple); background: #3c2d4b; color: #f4e1ff; }
/* Botón independiente para activar o quitar la niebla durante la partida. */
.fog-toggle { min-height: 32px; flex: 0 0 auto; padding: 6px 8px; border: 1px solid #52634f; border-radius: 7px; background: #26342c; color: #e7e2d3; font-size: 10px; font-weight: 700; }
.fog-toggle:hover, .sound-toggle:hover { border-color: #a9ce6d; background: #334537; }
.settings-row { display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; gap: 6px; }
.sound-toggle { min-height: 32px; flex: 0 0 auto; padding: 6px 8px; border: 1px solid #52634f; border-radius: 7px; background: #26342c; color: #e7e2d3; font-size: 10px; font-weight: 700; }
.sound-toggle[aria-pressed="false"] { border-color: #4c5148; color: #aab0a4; }
.card { padding: 8px 9px; }
.card p { margin: 4px 0; color: #bec7b8; font-size: 10px; line-height: 1.4; }
.selection-card { min-height: 58px; flex: 0 0 auto; }
.selection-title { margin-bottom: 3px; font-size: 11px; font-weight: 700; }
.selection-sub { color: #b6c0ae; font-size: 9px; line-height: 1.35; }
.construction-progress { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #eadbb1; font-size: 9px; }
.construction-progress span { height: 6px; flex: 1; overflow: hidden; border-radius: 5px; background: #111a17; }
.construction-progress i { display: block; height: 100%; border-radius: inherit; background: #a9ce6d; }
.actions { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 2px; }
.actions h2 { margin: 0 2px 2px; }
.action-button { display: flex; min-height: 38px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 5px 7px; border: 1px solid #4a5947; border-radius: 7px; background: #2b3a30; text-align: left; }
.action-button:hover:not(:disabled) { border-color: #c5a861; background: #3a4e3b; }
.action-button:disabled { opacity: .43; cursor: not-allowed; }
.action-name { color: #f1ead6; font-size: 10px; font-weight: 700; }
.action-cost { display: block; margin-top: 2px; color: #d5c188; font-size: 8px; line-height: 1.3; }
.action-price { margin-left: 3px; color: #ecd18a; font-size: 8px; white-space: nowrap; }
.reset-button { min-height: 31px; flex: 0 0 auto; padding: 6px; border: 1px solid #594840; border-radius: 7px; background: #372c28; color: #d8b8a6; font-size: 10px; }
.reset-button:hover { background: #51382e; }
.reset-button:disabled { opacity: .45; cursor: not-allowed; }

/* En pantallas medianas, el panel se pone bajo el mapa */
@media (max-width: 850px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .app { min-height: 100dvh; height: auto; }
  .layout { grid-template-columns: 1fr; }
  .map-column { height: min(62dvh, 680px); min-height: 300px; }
  .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .resource-panel, .actions, .reset-button { grid-column: 1 / -1; }
  .actions { max-height: none; }
}
@media (max-width: 520px) {
  .app { gap: 6px; padding: 6px; }
  .topbar { min-height: 38px; }
  .brand { display: block; }
  .eyebrow { font-size: 7px; }
  h1 { font-size: 17px; }
  .match-status { gap: 4px; font-size: 9px; }
  .map-heading { font-size: 10px; }
  .map-footer { min-height: 34px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 8px; }
  .map-column { height: auto; min-height: 0; }
  .canvas-wrap { aspect-ratio: 16 / 9; flex: 0 0 auto; }
  .sidebar { display: flex; }
}






/* Tablets en horizontal: el mapa conserva espacio y el panel lateral se desplaza con el dedo. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 1280px) and (min-height: 420px) {
  html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
  .app { width: 100%; height: 100dvh; min-height: 0; }
  .layout { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(270px, 31vw); grid-template-rows: minmax(0, 1fr); }
  .map-column { width: 100%; height: auto; min-height: 0; }
  .sidebar {
    display: flex; width: 100%; min-width: 0; min-height: 0; height: 100%; max-height: 100%; flex-direction: column;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
  .sidebar > * { flex-shrink: 0; }
  .actions { min-height: auto; flex: 0 0 auto; overflow: visible; }
  .settings-row { width: 100%; }
}