/* Cliente del teléfono: video a pantalla completa, controles del juego encima (touch.css, el mismo
   CSS de src/mobile) y la tarjeta de marca del juego (index.html del juego, #boot) para portada, fila,
   carga y fin. */
:root { --ink: #140a1e; --y: #ffe600; --tx: #fbf7ee; --red: #c8321e;
  --ui: 'Bahnschrift', 'Arial Narrow', 'Roboto Condensed', 'Ubuntu Condensed', 'Ubuntu', 'Segoe UI', system-ui, sans-serif; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--tx); font-family: var(--ui);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
.hidden { display: none !important; }

#v { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
#taps { position: fixed; inset: 0; z-index: 5; touch-action: none; }

/* ---- tarjeta de marca ---- */
.card { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: linear-gradient(180deg, #6f8db3 0%, #8fa3bb 26%, #a9b6c2 44%, #d6c7b4 64%, #f2c494 78%, #e9b98a 100%); }
.card::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, rgba(20, 10, 30, 0), rgba(20, 10, 30, .7)); pointer-events: none; }
.card > * { position: relative; z-index: 1; }
.card.over { background: rgba(20, 10, 30, .55); }
.card.over::after { display: none; }
.logo { width: min(440px, 80vw); height: auto; filter: drop-shadow(0 8px 14px rgba(20, 10, 30, .45)); }
.tag { margin: 2px 0 10px; padding: 4px 14px 4px 10px; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--y); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tag b { color: var(--red); }
.panel { position: relative; width: min(520px, 92vw); box-sizing: border-box; padding: 16px 22px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(34, 18, 44, .94), rgba(20, 10, 30, .96)); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.panel::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--y); }
.panel h2 { margin: 2px 0 6px; font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: .02em; text-transform: uppercase; color: var(--y); }
.panel p { margin: 0 0 10px; font-size: 15px; line-height: 1.3; }
.panel .big { font-size: 40px; font-weight: 900; color: var(--y); line-height: 1; }
.curb { position: absolute; left: 22px; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--y) 0 12px, #1c1a19 12px 24px); opacity: .9; }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn { min-height: 44px; padding: 8px 26px; border: 0; font: 900 20px var(--ui); font-style: italic; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.btn.go { color: var(--ink); background: var(--y); box-shadow: inset 0 -4px 0 rgba(150, 80, 0, .4); }
.btn.ghost { color: var(--tx); background: rgba(251, 247, 238, .14); font-size: 15px; }
.rot { display: none; margin-top: 10px !important; font-size: 13px !important; color: var(--y); }
@media (orientation: portrait) { .rot { display: block; } }
.by { margin-top: 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(251, 247, 238, .8); }
@media (max-height: 480px) { .logo { width: min(300px, 50vw); } .panel { padding: 10px 18px 16px; } .panel h2 { font-size: 20px; } .panel p { font-size: 14px; } .panel .big { font-size: 32px; } .by { margin-top: 4px; } }

.spin { display: flex; gap: 6px; justify-content: center; margin: 4px 0 12px; }
.spin i { width: 12px; height: 12px; background: var(--y); transform: skewX(-13deg); animation: sp 1s ease-in-out infinite; }
.spin i:nth-child(2) { animation-delay: .15s; } .spin i:nth-child(3) { animation-delay: .3s; }
@keyframes sp { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- en juego ---- */
.net { position: fixed; left: 50%; bottom: max(4px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 35; display: flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 9px; background: rgba(20, 10, 30, .5); font: 700 11px var(--ui); letter-spacing: .04em; color: rgba(251, 247, 238, .85); pointer-events: none; }
.net b { width: 8px; height: 8px; border-radius: 50%; background: #57f000; }
.net.mid b { background: #ffd23f; } .net.bad b { background: #ff1f3d; }
.warn { position: fixed; left: 50%; top: max(56px, calc(env(safe-area-inset-top) + 50px)); translate: -50% 0; z-index: 36; padding: 6px 14px; border: 2px solid var(--y);
  background: rgba(20, 10, 30, .85); font: 800 14px var(--ui); white-space: nowrap; pointer-events: none; }
.quit { position: fixed; left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); z-index: 36; min-height: 34px; padding: 4px 14px;
  border: 2px solid rgba(251, 247, 238, .55); border-radius: 6px; background: rgba(20, 10, 30, .7); color: var(--tx); font: 800 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; }
/* los controles del juego viven sobre el video (z-index 30 en touch.css) */
.tc6 { z-index: 30; }