/* Flipside OS: al entrar a #/flipside el sitio entero cambia de aspecto (body.fs-on).
   Aquí están el "skin" global y los estilos de los apartados internos. */

/* ---------- Pantalla de arranque ---------- */
#boot{position:fixed;inset:0;z-index:400;display:none;place-content:center;justify-items:center;gap:1.2rem;background:#000;color:#fff;font:400 1.6rem 'VT323','DotGothic16',monospace;text-align:center}
#boot.go{display:grid;animation:bootout .4s 1.5s steps(4) forwards}
#boot p{margin:0}
.b-logo{font:400 3.2rem 'Press Start 2P',monospace;color:#ffe14d;text-shadow:4px 4px 0 #ff3bac}
.b-bar{display:flex;gap:3px;padding:3px;border:2px solid #fff;width:min(16rem,70vw)}
.b-bar i{flex:1;height:1rem;background:#1084d0;opacity:0;animation:bblock .05s forwards;animation-delay:calc(var(--k) * .11s + .2s)}
@keyframes bblock{to{opacity:1}}
@keyframes bootout{to{opacity:0;visibility:hidden}}

/* ---------- Enlaces de navegación: Loopz o Flipside según dónde estés ---------- */
nav .ml,nav .fl,.f-row .ml,.f-row .fl{display:contents}
nav .fl,.f-row .fl{display:none}
body.fs-on nav .ml,body.fs-on .f-row .ml{display:none}
body.fs-on nav .fl,body.fs-on .f-row .fl{display:contents}

/* ---------- Skin global ---------- */
body.fs-on{
  --black:#008080;--panel:#c0c0c0;--text:#000;--muted:#404040;--line:#808080;--edge:#808080;--red:#ff3bac;--red-l:#c4007a;--latte:#000080;--coffee:#c0c0c0;
  --field:#fff;--on-text:#fff;--hl:#000080;--hl-on:#fff;--nav:#c0c0c0;--stage:#fff;--body-text:#000;
  --display:'Press Start 2P','DotGothic16',monospace;--sans:'VT323','DotGothic16',monospace;--tag:'VT323','DotGothic16',monospace;
  color:#000;font-family:var(--sans);font-size:1.3rem;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M2 2v16l4-4 3 7 3-1-3-7h6z' fill='white' stroke='black' stroke-width='1.5'/></svg>") 2 2,auto}
html:has(body.fs-on){background:#008080 radial-gradient(#00a3a3 1.2px,transparent 1.6px) 0 0/10px 10px;scrollbar-color:#c0c0c0 #008080}
html:has(body.fs-on)::-webkit-scrollbar{width:16px;background:#dfdfdf}
html:has(body.fs-on)::-webkit-scrollbar-thumb{background:#c0c0c0;border:2px solid;border-color:#fff #000 #000 #fff}
body.fs-on ::selection{background:#000080;color:#fff}
body.fs-on .bg{display:none}
body.fs-on::after{display:block;inset:0;opacity:.45;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);animation:flick 5s steps(2) infinite}
body.fs-on #prog{height:8px;background:repeating-linear-gradient(90deg,#000080 0 10px,transparent 10px 12px)}

/* Barra superior */
body.fs-on nav{background:#c0c0c0;border-bottom:2px solid #000;box-shadow:inset 0 2px #fff,inset 0 -2px #808080;backdrop-filter:none}
body.fs-on .brand{font:400 .78rem 'Press Start 2P','DotGothic16',monospace;color:#000080}
body.fs-on .logo{image-rendering:pixelated}
body.fs-on a.l{clip-path:none;background:none;color:#000;font:400 1.15rem 'VT323','DotGothic16',monospace;text-transform:none;letter-spacing:0;padding:.1rem .6rem}
body.fs-on a.l:hover,body.fs-on a.l[aria-current]{background:#000080;color:#fff}
body.fs-on .lang button[aria-pressed="true"]{background:#000080;color:#fff;text-decoration:none}

/* Botones y campos */
body.fs-on button{clip-path:none;border-radius:0;background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080,inset 1px 1px #dfdfdf;font:400 1.15rem/1.2 'VT323','DotGothic16',monospace;text-transform:none;letter-spacing:0;padding:.2rem .9rem}
body.fs-on button:hover{background:#d4d4d4;color:#000}
body.fs-on button:active{border-color:#000 #fff #fff #000}
body.fs-on button.go,body.fs-on button[aria-pressed="true"]{background:#000080;color:#fff}
body.fs-on button.link{background:none;border:0;box-shadow:none;color:#000080;text-decoration:underline;padding:0}
body.fs-on input,body.fs-on textarea,body.fs-on select{background:#fff;color:#000;border:2px solid;border-color:#808080 #fff #fff #808080;border-radius:0;font:400 1.2rem 'VT323','DotGothic16',monospace}
body.fs-on #auth .av{background:#ff3bac;color:#000}
body.fs-on #gear svg{filter:none}

/* Diálogos, reproductor, cookies y avisos */
body.fs-on dialog{background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
body.fs-on .dh{clip-path:none;padding:.35rem .7rem;background:linear-gradient(90deg,#000080,#1084d0)}
body.fs-on .dh h3{font:400 .8rem/1.6 'Press Start 2P','DotGothic16',monospace;color:#fff}
body.fs-on dialog label,body.fs-on .card label{color:#000;font:400 1.15rem 'VT323','DotGothic16',monospace;text-transform:none;letter-spacing:0}
body.fs-on dialog input,body.fs-on dialog select,body.fs-on dialog textarea{color:#000;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;padding:.3rem .5rem}
body.fs-on .player,body.fs-on .ck{background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080,4px 4px 0 rgba(0,0,0,.4);clip-path:none}
body.fs-on .player .mi small,body.fs-on .ck p{color:#404040}
body.fs-on .ck h3,body.fs-on .mi b{font:400 .8rem 'Press Start 2P','DotGothic16',monospace;color:#000080}
body.fs-on .toast{background:#ffffe1;color:#000;border:1px solid #000;clip-path:none;font:400 1.15rem 'VT323','DotGothic16',monospace;text-transform:none}
body.fs-on #totop{background:#c0c0c0;color:#000}
body.fs-on .skel i{background:#c0c0c0;clip-path:none;animation:none}

/* Pie */
body.fs-on footer{margin-top:0;background:#c0c0c0;color:#000;border-top:2px solid #fff;box-shadow:inset 0 2px #dfdfdf}
body.fs-on .f-mark{font:400 clamp(2rem,9vw,5rem)/1.1 'Press Start 2P','DotGothic16',monospace;color:#000080;-webkit-text-stroke:0;text-shadow:3px 3px 0 #ff3bac}
body.fs-on .f-row{color:#000}
body.fs-on .social a{clip-path:none;background:#c0c0c0;color:#000;font:400 1.15rem 'VT323','DotGothic16',monospace;text-transform:none;letter-spacing:0;padding:.15rem .8rem;border:2px solid;border-color:#fff #000 #000 #fff}
body.fs-on .social a:hover{background:#000080;color:#fff;transform:none}

/* ---------- Escritorio: iconos ---------- */
.fs-icons{position:relative;z-index:2;list-style:none;margin:2.5rem auto 0;padding:0 1.5rem;max-width:62rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:1.4rem .6rem}
.fs-icons a{display:grid;justify-items:center;gap:.4rem;padding:.5rem;color:#fff;text-decoration:none;font-size:1.4rem;text-shadow:1px 1px 0 #000;border:1px dashed transparent}
.fs-icons a:hover,.fs-icons a:focus-visible{background:#000080;border-color:#ffe14d;outline:0}
.fs-icons svg{width:3.4rem;height:3.4rem;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.4));transition:transform .15s steps(2)}
.fs-icons a:hover svg{transform:translateY(-4px)}
.w-sys{grid-column:span 5}
.fs-sys{list-style:none;margin:0;padding:0}
.fs-sys li{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px dotted #808080;font-size:1.4rem}
.fs-sys b{color:#000080}

/* ---------- Explorador: marco de cada apartado ---------- */
.fs-top{position:relative;z-index:2;text-align:center;padding:2rem 1rem 0}
.fs-mini{margin:0;font:400 clamp(1.4rem,4vw,2.4rem)/1.2 'Press Start 2P','DotGothic16',monospace;color:transparent;background:linear-gradient(180deg,#fff,#ffe14d 45%,#ff3bac);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(3px 3px 0 #000)}
.fs-mini a{color:inherit;text-decoration:none}
.fs-exp{position:relative;z-index:2;max-width:64rem;width:calc(100% - 3rem);margin:1.5rem auto 0}
.fs-tool{display:flex;gap:.6rem;align-items:center;padding:4px 2px}
.fs-addr{flex:1;padding:.1rem .6rem;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;font-size:1.2rem;white-space:nowrap;overflow:hidden}
.fs-stat{margin-top:3px;padding:.1rem .6rem;border:1px solid;border-color:#808080 #fff #fff #808080;font-size:1.1rem}
.wbody h4{margin:1.3rem 0 .6rem;font:400 .7rem 'Press Start 2P','DotGothic16',monospace;color:#000080}
.wbody a:not(.px):not(.fs-box){color:#0000ee}

/* Acerca de */
.fs-collab{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.2rem 0 .4rem}
.fs-collab b{font:400 1.2rem 'Press Start 2P',monospace}
.fs-box{padding:.7rem 1rem;background:#c0c0c0;color:#000;text-decoration:none;font:400 .72rem 'Press Start 2P',monospace;border:2px solid;border-color:#fff #000 #000 #fff}
.fs-box.f{background:#ff3bac}.fs-box.j{background:#ffe14d}
a.fs-box:hover{background:#000080;color:#fff}

/* Juegos: cartuchos */
.fs-carts{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.6rem}
.cart{position:relative;padding:1.3rem 1.2rem 1.5rem;background:linear-gradient(#b8b8b8,#8f8f8f);border:3px solid #000;box-shadow:inset 0 0 0 3px #d8d8d8,5px 5px 0 rgba(0,0,0,.3)}
.cart h3{margin:0 0 .5rem;font:400 .85rem/1.6 'Press Start 2P','DotGothic16',monospace;color:#000080}
.cart-co{position:absolute;top:-.8rem;right:.8rem;padding:.3rem .5rem;background:#e00;color:#fff;font:400 .6rem 'Press Start 2P',monospace}
.cart.empty{display:grid;place-items:center;text-align:center;background:#dcdcdc;border-style:dashed;box-shadow:none}
.cart.empty b{font:400 2.4rem 'Press Start 2P',monospace;color:#808080}

/* Dev-log */
.fs-post{padding:.9rem 0;border-top:2px dotted #808080}.fs-post:first-of-type{border-top:0}
.fs-post h3{margin:0 0 .2rem;font:400 .8rem/1.6 'Press Start 2P','DotGothic16',monospace;color:#000080}
.fs-note0{margin:0 0 .8rem;padding:.4rem .8rem;background:#ffffe1;border:1px solid #000}

/* Equipo */
.fs-crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1rem}
.fs-crew img,.ph1{display:block;width:64px;height:64px;margin-bottom:.3rem;border:2px solid #000;image-rendering:pixelated;object-fit:cover}
.ph1{display:grid;place-items:center;background:#ffe14d;font:400 1.2rem 'Press Start 2P',monospace}
.fs-crew small{display:block;color:#404040}
.fs-uc{margin-bottom:1rem;padding:1rem;border:3px solid #000;background:repeating-linear-gradient(-45deg,#ffe14d 0 14px,#fff 14px 28px)}
.fs-uc b{display:inline-block;padding:.2rem .6rem;background:#000;color:#ffe14d;font:400 .8rem 'Press Start 2P',monospace;animation:fsblink 1s steps(2) infinite}
.fs-uc p{margin:.6rem 0 0}

/* Rocola grande */
.amp.big{padding:1rem}
.amp-pl{list-style:none;margin:.6rem 0;padding:0;background:#000;border:1px solid #0a0}
.amp-pl li{display:flex;justify-content:space-between;gap:1rem;padding:.2rem .5rem;font-size:1.3rem;color:#0f0}
.amp.big .amp-eq{height:4rem}.amp.big .amp-eq i{width:9px}

/* Libro de visitas */
.gb-form{margin-bottom:1.2rem;padding:.8rem;background:#dfdfdf;border:2px solid;border-color:#fff #808080 #808080 #fff}
.gb-form h3{margin:0 0 .6rem;font:400 .8rem 'Press Start 2P','DotGothic16',monospace;color:#000080}
.gb-form label{display:block;margin-top:.4rem}
.gb-form input,.gb-form textarea{width:100%;margin:0 0 .4rem}
.gb-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.gb{display:flex;gap:.8rem;padding:.7rem;background:#ffffe1;border:1px solid #000}
.gb p{margin:.2rem 0;overflow-wrap:anywhere}.gb small{color:#555}

/* Arcade: Snake */
.snake{display:grid;justify-items:center;gap:.8rem}
.sn-hud{display:flex;gap:2rem;font-size:1.5rem}
.sn-wrap{position:relative;border:4px solid #000;box-shadow:6px 6px 0 rgba(0,0,0,.4)}
.sn-wrap canvas{display:block;width:min(320px,80vw);height:auto;aspect-ratio:1;image-rendering:pixelated;background:#001a00}
.sn-o{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;background:rgba(0,26,0,.85);color:#0f0;font:400 1rem/1.6 'Press Start 2P','DotGothic16',monospace;text-align:center}
.sn-o[hidden]{display:none}
.sn-pad{display:grid;justify-items:center;gap:4px}.sn-pad div{display:flex;gap:4px}
.sn-pad .px{min-width:3rem}
.sn-h{margin:0;font-size:1.15rem;color:#555;text-align:center}
@media (hover:hover) and (pointer:fine){.sn-pad{display:none}}