/* ============================================================
   CONTRATÁ YA — Jugá: "Arreglalo Ya" (todo con prefijo .arr-)
   ============================================================ */
.arr-caja { position: relative; background: #D7E6F4; }
.arr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.arr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--texto); color: var(--cal); -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.arr button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.arr svg { display: block; }
.arr [hidden] { display: none !important; }

/* HUD */
.arr-hud { flex: 0 0 auto; background: var(--azul); color: #fff; padding: 8px 10px 7px;
  display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.arr-puntaje { font: 700 26px/1 var(--dato); letter-spacing: -.02em; }
.arr-hud-der { display: flex; gap: 6px; align-items: center; }
.arr-vidas { display: flex; gap: 2px; }
.arr-vidas svg { width: 20px; height: 20px; fill: #FF6B5E; transition: transform .2s, opacity .2s; }
.arr-vidas svg.arr-ido { fill: rgba(255,255,255,.22); transform: scale(.8); }
.arr-ibtn { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14) !important; display: grid; place-items: center; }
.arr-ibtn svg { width: 18px; height: 18px; fill: #fff; }
.arr-chips { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; font: 600 11px/1 var(--dato); }
.arr-chip { background: rgba(255,255,255,.14); padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.arr-chip.arr-x2 { background: var(--plomo); color: var(--cal); }
.arr-chip.arr-x3 { background: #FF6B5E; color: #fff; }
.arr-chip.arr-meta-ok { background: #2E9E4F; color: #fff; }

/* Tablero */
.arr-tablero { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr); gap: 10px 10px; padding: 20px 10px 12px; touch-action: none;
  background: linear-gradient(180deg, #5FA3D6 0, #5FA3D6 8px, #8FC1E3 8px, #8FC1E3 12px, #F2E3C2 12px, #F2E3C2 15px, #D7E6F4 15px); }
.arr-casa { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 9px;
  outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .12s; text-align: left; }
.arr-techo { flex: 0 0 20%; background: var(--arr-techo, #C45C48); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin: 0 -3px; }
.arr-frente { position: relative; flex: 1; background: var(--arr-pared, #F4E9D8); border-radius: 0 0 7px 7px; border-bottom: 3px solid rgba(0,0,0,.12); }
.arr-puerta { position: absolute; bottom: 0; left: 12%; width: 18%; height: 48%; background: #0B1620; border-radius: 3px 3px 0 0; opacity: .85; }
.arr-ventana { position: absolute; top: 14%; left: 9%; width: 26%; height: 28%; background: #BFD7EE; border: 2px solid #fff; border-radius: 3px; }
.arr-num { position: absolute; left: 5px; top: 3px; font: 700 9px var(--dato); color: rgba(0,0,0,.35); }
.arr-casa.arr-sel { outline-color: var(--plomo); }
.arr-casa.arr-sel .arr-frente { box-shadow: inset 0 0 0 3px var(--plomo); }
.arr-globo { position: absolute; right: 5%; top: 8%; height: 84%; aspect-ratio: 1 / 1; max-width: 62%; background: #fff; border-radius: 12px;
  border: 3px solid var(--arr-c, #999); display: none; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(16,24,32,.18); transform: scale(.6); opacity: 0; transition: transform .18s cubic-bezier(.3,1.6,.5,1), opacity .15s; }
.arr-casa.arr-con .arr-globo { display: flex; }
.arr-casa.arr-visto .arr-globo { transform: scale(1); opacity: 1; }
.arr-globo svg { width: 64%; height: 64%; }
.arr-rot { font: 800 10px/1 var(--display); color: var(--cal); margin-top: 1px; text-transform: uppercase; letter-spacing: .02em; }
.arr-barra { position: absolute; left: 5px; right: 5px; bottom: -7px; height: 8px; background: rgba(16,24,32,.18); border-radius: 8px; overflow: hidden; display: none; }
.arr-casa.arr-con .arr-barra { display: block; }
.arr-barra i { display: block; height: 100%; width: 100%; background: #2E9E4F; transform-origin: 0 50%; border-radius: 8px; }
.arr-barra.arr-medio i { background: var(--plomo); }
.arr-barra.arr-poco i { background: var(--coral); }
.arr-urg { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: var(--coral); color: #fff;
  font: 800 9px/1 var(--display); padding: 4px 6px; border-radius: 99px; white-space: nowrap; display: none; letter-spacing: .04em; }
.arr-casa.arr-urgente .arr-urg { display: block; animation: arr-lat .6s ease-in-out infinite alternate; }
.arr-casa.arr-urgente .arr-frente { box-shadow: inset 0 0 0 3px var(--coral); }
@keyframes arr-lat { to { transform: translateX(-50%) scale(1.08); } }
.arr-casa.arr-falla .arr-frente { animation: arr-rojo .18s linear 4 alternate; }
@keyframes arr-rojo { to { background: #FF6B5E; } }
.arr-casa.arr-mal { animation: arr-sacudir .3s; }
@keyframes arr-sacudir { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.arr-casa.arr-ok .arr-frente::after { content: ""; position: absolute; inset: 0; border-radius: 0 0 7px 7px;
  background: radial-gradient(circle, rgba(46,158,79,.55), transparent 70%); animation: arr-fade .45s forwards; }
@keyframes arr-fade { from { opacity: 1; } to { opacity: 0; } }
.arr-gota { animation: arr-gota 1s ease-in infinite; }
@keyframes arr-gota { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
.arr-bulbo { animation: arr-parpadeo 1.1s steps(1) infinite; }
@keyframes arr-parpadeo { 0%, 40%, 60% { opacity: 1; } 35%, 55%, 80% { opacity: .25; } }
.arr-humo { animation: arr-humo 1.2s ease-out infinite; }
@keyframes arr-humo { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(-3px, -6px); opacity: 0; } }
.arr-flota { position: absolute; left: 0; top: 0; font: 800 18px/1 var(--display); color: #1E7A3C; pointer-events: none; opacity: 0;
  text-shadow: 0 1px 0 #fff, 0 0 6px #fff; white-space: nowrap; z-index: 2; }
.arr-flota.arr-va { animation: arr-flota .8s ease-out forwards; }
.arr-flota.arr-malo { color: var(--coral); font-size: 14px; }
@keyframes arr-flota {
  0% { opacity: 0; transform: translate(var(--arr-x), var(--arr-y)) scale(.7); }
  15% { opacity: 1; transform: translate(var(--arr-x), calc(var(--arr-y) - 6px)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--arr-x), calc(var(--arr-y) - 46px)) scale(1); } }

/* Herramientas: una fila, se reparte entre las visibles */
.arr-herr { flex: 0 0 auto; background: var(--azul-2); padding: 8px 8px 9px; display: grid;
  grid-template-columns: repeat(var(--arr-n, 4), 1fr); gap: 6px; touch-action: none; }
.arr-tool { height: 60px; min-width: 0; border-radius: 12px; background: #fff !important; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; border-bottom: 4px solid var(--arr-c) !important; transition: transform .08s, background .12s; }
.arr-tool svg { width: 30px; height: 30px; color: var(--arr-c); }
.arr-tool span { font: 700 9.5px/1 var(--display); color: var(--cal-2); text-transform: uppercase; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.arr-tool:active { transform: scale(.94); }
.arr-tool.arr-sel { background: var(--plomo) !important; transform: translateY(-3px); }
.arr-tool.arr-sel svg { color: var(--cal); }
.arr-tool.arr-nueva { animation: arr-nueva .5s 3; }
@keyframes arr-nueva { 50% { transform: scale(1.12); } }

/* Avisos y capas */
.arr-toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8); background: var(--azul); color: #fff;
  font: 800 17px/1.2 var(--display); padding: 12px 16px; border-radius: 14px; opacity: 0; pointer-events: none; text-align: center;
  transition: opacity .2s, transform .2s; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 88%; }
.arr-toast.arr-ver { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.arr-toast small { display: block; font: 600 12px var(--texto); margin-top: 4px; opacity: .92; }
.arr-capa { position: absolute; inset: 0; z-index: 10; background: #D7E6F4; overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.arr-titulo { font: 900 30px/1 var(--display); color: var(--azul); margin: 0; letter-spacing: -.02em; }
.arr-titulo b { color: var(--plomo); }
.arr-como { margin: 0; padding: 12px 14px; background: #fff; border-radius: 14px; list-style: none; display: grid; gap: 8px;
  font-size: 14px; line-height: 1.35; border: 1px solid var(--linea); }
.arr-como li { display: flex; gap: 10px; }
.arr-como b { color: var(--azul); }
.arr-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--plomo); font: 800 12px/22px var(--display); text-align: center; color: var(--cal); }
.arr-capa .jugar-premio { margin: 0; }
.arr-btn { display: block; width: 100%; padding: 15px; border-radius: 14px; background: var(--plomo) !important; color: var(--cal) !important;
  font: 900 19px/1 var(--display) !important; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 4px 0 #B98700; }
.arr-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #B98700; }
.arr-btn.arr-sec { background: #fff !important; box-shadow: 0 3px 0 var(--linea); font-size: 15px !important; padding: 12px; }
.arr-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.arr-mejor { font: 600 13px var(--dato); color: var(--cal-2); }
.arr-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.arr-fin-tit { text-align: center; font: 800 19px var(--display); color: var(--azul); }
.arr-gran { font: 800 50px/1 var(--dato); color: var(--azul); text-align: center; letter-spacing: -.03em; }
.arr-record { text-align: center; font: 800 13px var(--display); color: var(--plomo-texto); text-transform: uppercase; letter-spacing: .08em; }
.arr-ganaste { text-align: center; font: 800 16px var(--display); color: #fff; background: #2E9E4F; border-radius: 12px; padding: 10px; }
.arr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.arr-stat { background: #fff; border-radius: 12px; padding: 9px 12px; border: 1px solid var(--linea); }
.arr-stat b { display: block; font: 700 19px var(--dato); color: var(--cal); }
.arr-stat span { font-size: 12px; color: var(--cal-2); }
.arr-caja-txt { background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid var(--linea); font-size: 14px; }
.arr-pausa { position: absolute; inset: 0; z-index: 9; background: rgba(14,76,138,.88); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: #fff; padding: 24px; }
.arr-pausa > b { font: 900 28px var(--display); }
.arr-pausa .arr-btn { max-width: 260px; }