*{box-sizing:border-box}html,body{margin:0;background:#020208;color:#fff;font-family:Consolas,monospace;overflow:hidden}body{min-height:100vh;display:grid;place-items:center}.hidden{display:none!important}
#intro{width:100vw;height:100vh;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#181832,#05050d 48%,#000 80%)}.logo h1{font-size:clamp(55px,9vw,100px);margin:20px 0 5px}.logo h1 b{color:#ffe135}.logo p{color:#00eaff;letter-spacing:4px}.start{margin-top:30px;padding:12px 18px;border:2px solid #00eaff;background:#000c;text-shadow:2px 2px #ff3bd5;animation:b 1s steps(2) infinite}.logo small{display:block;margin-top:18px;color:#888}@keyframes b{50%{opacity:.3}}
.mini{width:130px;height:130px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px;transform:rotate(45deg);border:9px solid #111;border-radius:50%;overflow:hidden;background:#111}.mini i:nth-child(1){background:#e52e36}.mini i:nth-child(2){background:#22c55e}.mini i:nth-child(3){background:#2589e8}.mini i:nth-child(4){background:#f0cf24}
#wrap{width:min(96vw,900px);border:2px solid #00eaff;box-shadow:0 0 30px #00eaff55}header,footer{display:flex;justify-content:space-between;padding:12px 16px;background:#09091b;color:#bff7ff}header strong{color:#ff58df}header b{color:#ffe600}footer{justify-content:center;font-size:13px}
#area{min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#15152d,#05050d 55%,#020208);position:relative}#status{height:38px;margin-bottom:8px;font-size:23px;font-weight:bold;color:#ffe135;letter-spacing:2px}
#simon{width:min(76vw,500px);aspect-ratio:1;position:relative;border-radius:50%;background:#111;border:16px solid #0b0b0d;box-shadow:0 0 0 4px #333,0 16px 45px #000;overflow:hidden}.pad{position:absolute;width:49%;height:49%;border:0;cursor:pointer;filter:brightness(.58);transition:filter .06s}.pad.active{filter:brightness(1.75) saturate(1.3);box-shadow:inset 0 0 50px #fff9}.red{left:0;top:0;background:#e52e36;border-radius:100% 8px 8px 8px}.green{right:0;top:0;background:#22c55e;border-radius:8px 100% 8px 8px}.blue{left:0;bottom:0;background:#2589e8;border-radius:8px 8px 8px 100%}.yellow{right:0;bottom:0;background:#f0cf24;border-radius:8px 8px 100% 8px}
#center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,#292930,#0b0b0e 72%);border:10px solid #111;box-shadow:0 0 0 3px #444;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}#center b{font-size:24px}#center strong{font-size:34px;color:#ffe135;letter-spacing:2px}#display{margin-top:8px;background:#160202;border:2px inset #551515;color:#ff4545;font-size:24px;padding:2px 9px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 35px;margin-top:20px;color:#cfd8ff}.paused:after{content:"PAUSA";position:absolute;inset:0;background:#000c;color:#ffe600;font-size:55px;font-weight:bold;display:grid;place-items:center;z-index:20}@media(max-height:780px){#area{min-height:calc(100vh - 92px)}#simon{width:min(62vh,480px)}}
#intro{width:100vw;height:100vh;background:#000;display:flex;align-items:center;justify-content:center;position:relative}
#intro img{width:100%;height:100%;object-fit:contain}
#intro .start{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);padding:12px 20px;background:#000d;border:2px solid #00eaff;color:#fff;font-size:18px;white-space:nowrap;text-shadow:2px 2px #ff3bd5;animation:b 1s steps(2) infinite}

/* PIKY'S GAMES MOBILE · SIMON v1 */
.touch-only{display:none!important}
#board,.simon,.pad,.sector,.color{touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media (hover:none) and (pointer:coarse){
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior:none}
  body{touch-action:manipulation}
  .pc-only{display:none!important}
  .touch-only{display:inline!important}
  .arcade,.screen,.game,#game{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  /* Simon es naturalmente táctil: los cuatro colores son los botones */
  .simon,#board{
    max-width:min(92vw,72dvh)!important;
    max-height:min(92vw,72dvh)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* SIMON MOBILE v2 · centro más compacto */
@media (hover:none) and (pointer:coarse){
  .center,.hub,.center-circle,.simon-center{
    transform:scale(.78);
    transform-origin:center center;
  }
}

/* SIMON MOBILE v3 · tipografía central compacta */
@media (hover:none) and (pointer:coarse){
  #center b{font-size:15px!important;line-height:1.05}
  #center strong{font-size:21px!important;line-height:1;letter-spacing:1px!important}
  #display{font-size:18px!important;margin-top:6px!important;padding:1px 7px!important}
}