/* ============================================================
   css/camp.css — EL CAMPAMENTO DE LOS PORTADORES y la CRÓNICA LEGIBLE (js/systems/camp.js)
   ============================================================ */
#camp{ position:fixed; inset:0; z-index:58; background:#070403; overflow:hidden; user-select:none; -webkit-user-select:none; }
#camp.hidden{ display:none; }
#camp .camp-art{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; background:transparent !important; }
#camp .camp-head{ position:absolute; left:calc(12px + env(safe-area-inset-left,0px)); top:calc(10px + env(safe-area-inset-top,0px)); right:170px; pointer-events:none; }
#camp .camp-k{ font-family:'Press Start 2P',monospace; font-size:0.62rem; letter-spacing:3px; color:#e0b060; text-shadow:0 2px 0 #000; }
#camp .camp-sub{ font-family:'VT323',monospace; font-size:1.05rem; color:#b8a07a; margin-top:4px; text-shadow:0 2px 0 #000; }
#camp.act-end .camp-sub{ color:#ffdcb0; }
#camp .camp-go{ position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); right:calc(10px + env(safe-area-inset-right,0px)); min-height:44px; min-width:130px;
  padding:6px 16px; font-size:1rem; z-index:3; }
/* los tres que hablan: el botón es invisible sobre su figura; el nombre flota arriba */
#camp .camp-who{ position:absolute; background:transparent; border:0; padding:0; cursor:pointer; z-index:2; -webkit-tap-highlight-color:transparent; }
#camp .camp-who .cw-n, #camp .camp-who .cw-r{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; text-shadow:0 2px 0 #000, 0 0 8px #000; pointer-events:none; }
#camp .camp-who .cw-n{ top:-26px; font-family:'Press Start 2P',monospace; font-size:0.46rem; letter-spacing:1px; color:var(--wc, #ffd98a); }
#camp .camp-who .cw-r{ top:-14px; font-family:'VT323',monospace; font-size:0.88rem; color:#b8a890; }
#camp .camp-who .cw-new{ position:absolute; left:50%; top:-40px; width:8px; height:8px; margin-left:-4px; background:var(--wc, #ffd98a); box-shadow:0 0 8px var(--wc, #ffd98a); display:none; animation:campBob 1.4s ease-in-out infinite; }
#camp .camp-who.has-new .cw-new{ display:block; }
#camp .camp-who.talking .cw-n{ text-decoration:underline; text-underline-offset:4px; }
#camp .camp-who:focus-visible{ outline:2px dashed var(--wc, #ffd98a); outline-offset:4px; }
@keyframes campBob{ 0%,100%{ transform:translateY(0); opacity:0.6; } 50%{ transform:translateY(-4px); opacity:1; } }
/* el cuadro de lo que se dice */
#camp .camp-box{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(8px + env(safe-area-inset-bottom,0px)); width:min(calc(100vw - 24px), 780px);
  padding:8px 14px 7px; z-index:2; background:linear-gradient(180deg, rgba(22,12,8,0.92), rgba(10,6,4,0.95)); border:2px solid rgba(176,128,64,0.6);
  box-shadow:0 0 18px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.6); }
#camp .camp-box.in{ animation:campIn .45s ease-out; }
@keyframes campIn{ from{ opacity:0; transform:translate(-50%, 6px); } to{ opacity:1; transform:translate(-50%, 0); } }
#camp .camp-box-who{ font-family:'Press Start 2P',monospace; font-size:0.46rem; letter-spacing:2px; margin-bottom:4px; }
#camp .camp-box-t{ font-family:'VT323',monospace; font-size:1.18rem; line-height:1.08; color:#f0e4d0; font-style:italic; }
#camp.act-card .camp-box{ border-color:rgba(255,190,110,0.8); cursor:pointer; }
#camp.act-card .camp-box-who{ color:#ffdcb0 !important; font-size:0.56rem; letter-spacing:3px; }
#camp.act-card .camp-box-t{ font-style:normal; color:#ffe9c8; }
#camp .camp-box-tip{ font-family:'VT323',monospace; font-size:0.9rem; color:#8a7658; margin-top:3px; text-align:right; }
@media (max-height:500px){
  /* mínimo del celular: 11 px (tools/audit/ui_layout.js) */
  /* el título no llega al centro: ahí flota el nombre del Hechicero (antes "PORTADORES" se le encimaba) */
  #camp .camp-head{ right:auto; max-width:calc(50vw - 96px); }
  #camp .camp-k{ font-size:0.6875rem; letter-spacing:1px; line-height:1.35; }
  #camp .camp-who .cw-n{ font-size:0.6875rem; letter-spacing:0; top:-30px; }
  #camp .camp-sub{ font-size:0.95rem; margin-top:2px; }
  #camp .camp-box{ padding:5px 10px 4px; }
  #camp .camp-box-t{ font-size:1.02rem; line-height:1.02; }
  #camp .camp-box-tip{ font-size:0.8rem; margin-top:1px; }
}

/* ---------- la Crónica al levantarla ---------- */
#chron-card{ position:fixed; left:50%; bottom:calc(8px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:46; width:min(calc(100vw - 32px), 460px);
  padding:9px 14px 8px; color:#3a2412; pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%, #f6e8c4, #e4cc96 70%, #cdb07a); border:2px solid #2a170a; box-shadow:0 0 0 2px #6b4a28, 0 6px 22px rgba(0,0,0,0.7); }
#chron-card.hidden{ display:none; }
#chron-card.in{ animation:ccIn .35s ease-out; }
#chron-card.out{ opacity:0; transition:opacity .3s; }
@keyframes ccIn{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%, 0); } }
/* mientras se lee la página, el cuadro de voz (mismo lugar, abajo al centro) espera */
body.chron-card-on #tut-panel{ opacity:0 !important; }
#chron-card .cc-k{ font-family:'Press Start 2P',monospace; font-size:0.44rem; letter-spacing:1px; color:#7a4a1c; }
#chron-card .cc-title{ font-family:var(--font-body); font-size:1.05rem; color:#3a1a08; margin:3px 0 2px; }
#chron-card .cc-t{ font-family:var(--font-body); font-size:0.86rem; line-height:1.3; }
#chron-card .cc-read{ pointer-events:auto; margin-top:6px; min-height:40px; padding:4px 12px; font-family:'VT323',monospace; font-size:1.05rem; color:#fff1d6;
  background:linear-gradient(180deg, #6b4a28, #3a2412); border:1px solid #2a170a; cursor:pointer; }
@media (max-height:500px){ #chron-card{ width:min(420px, calc(100vw - 360px)); padding:6px 11px 6px; } #chron-card .cc-title{ font-size:0.95rem; } #chron-card .cc-t{ font-size:0.8rem; line-height:1.22; } #chron-card .cc-read{ margin-top:4px; } }
#chron-read{ position:fixed; inset:0; z-index:62; background:rgba(5,3,2,0.86); overflow:auto; padding:calc(58px + env(safe-area-inset-top,0px)) 14px 18px; }
#chron-read.hidden{ display:none; }
#chron-read .cr-bar{ position:fixed; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(6px + env(safe-area-inset-top,0px)) 14px 6px;
  background:linear-gradient(180deg, rgba(10,6,4,0.96), rgba(10,6,4,0.7)); z-index:1; }
#chron-read .cr-crumb{ font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:2px; color:#e0b060; }
#chron-read .cr-close{ min-height:44px; padding:6px 14px; }
/* Códice › Crónicas › Voces del Campamento */
.cx-camp .cxp-camp-arena{ margin:12px 0 6px; font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:2px; color:#7a4a1c; border-bottom:1px solid rgba(107,74,40,0.4); padding-bottom:3px; }
.cx-camp .cxp-camp-line b{ font-family:'Press Start 2P',monospace; font-size:0.46rem; letter-spacing:1px; color:#5a2a0c; }
.cx-camp .cxp-camp-line i{ color:#8a6a48; font-size:0.9rem; }