/* Flipside Games Studios: estética de los 90 (ventanas gris, escritorio turquesa, píxeles).
   No depende del tema claro/oscuro del resto del sitio. */

/* ---------- Ventanas y botones (también en la tarjeta de la portada) ---------- */
.win{background:#c0c0c0;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080,inset 1px 1px #dfdfdf,7px 7px 0 rgba(0,0,0,.45);padding:3px;color:#000;font:400 1.3rem/1.2 'VT323','DotGothic16',monospace}
.wt{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:3px 4px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font:400 .62rem/1.5 'Press Start 2P','DotGothic16',monospace;cursor:grab;user-select:none;touch-action:none}
.wb{display:flex;gap:2px}
.wb i{display:grid;place-items:center;width:1.15rem;height:1.05rem;background:#c0c0c0;color:#000;border:1px solid;border-color:#fff #000 #000 #fff;font:700 .7rem monospace;font-style:normal;cursor:default}
.wbody{margin-top:3px;padding:1rem 1.1rem;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;line-height:1.25}
.wbody p{margin:0 0 .8rem;font-size:1.4rem}
.wbody h3{font:400 .8rem/1.6 'Press Start 2P','DotGothic16',monospace;margin:0 0 .3rem;color:#000080}
.wbody small{color:#555;font-size:1.1rem}
.px{display:inline-block;padding:.25rem 1rem;background:#c0c0c0;color:#000;font:400 1.2rem/1.2 'VT323','DotGothic16',monospace;text-decoration:none;text-transform:none;letter-spacing:0;border:2px solid;border-color:#fff #000 #000 #fff;border-radius:0;box-shadow:inset -1px -1px #808080,inset 1px 1px #dfdfdf;clip-path:none;cursor:pointer}
.px:hover{background:#d4d4d4;color:#000}
.px:active{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px #808080}
.win.shake{animation:shake .4s}
@keyframes shake{25%{translate:-6px 0}75%{translate:6px 0}}

/* ---------- Tarjeta en la portada ---------- */
.fsteaser{padding-block:3rem 5rem}
.fsteaser .win{max-width:46rem;margin-inline:auto;rotate:-1deg;transition:rotate .3s}
.fsteaser .win:hover{rotate:0deg}
.fs-new{float:right;color:#e00;font:400 .8rem 'Press Start 2P',monospace;animation:fsblink 1s steps(2) infinite}
.fs-h{margin:0 0 .8rem;font:400 clamp(1.3rem,3.6vw,2rem)/1.4 'Press Start 2P','DotGothic16',monospace;letter-spacing:0;color:transparent;background:linear-gradient(180deg,#ff3bac,#6b2cff);-webkit-background-clip:text;background-clip:text}
.fs-h::after{display:none}
.fs-h small{display:block;font:400 1.5rem 'VT323','DotGothic16',monospace;color:#000080;-webkit-text-fill-color:#000080;letter-spacing:.2em}
@keyframes fsblink{50%{opacity:0}}

/* ---------- Página Flipside ---------- */
.fs{position:relative}
.fs-desk{position:relative;overflow:hidden;padding-bottom:4rem;background:#008080 radial-gradient(#00a3a3 1.2px,transparent 1.6px) 0 0/10px 10px;color:#fff;font-family:'VT323','DotGothic16',monospace}
.fs-desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);animation:flick 5s steps(2) infinite}
@keyframes flick{50%{opacity:.8}}
.fs-mq{overflow:hidden;background:#000;color:#ffe14d;padding:.55rem 0;font:400 .7rem 'Press Start 2P','DotGothic16',monospace}
.fs-mq div{display:flex;width:max-content;animation:tick 40s linear infinite}
.fs-mq span{padding-right:3rem;white-space:nowrap}
.fs-stripe{height:14px;background:repeating-linear-gradient(-45deg,#ffe14d 0 12px,#111 12px 24px)}
.fs-logo{margin:3rem 0 0;text-align:center;font:400 clamp(2rem,8vw,5rem)/1.1 'Press Start 2P','DotGothic16',monospace;color:transparent;background:linear-gradient(180deg,#fff 0%,#ffe14d 40%,#ff3bac 62%,#6b2cff 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(4px 4px 0 #000) drop-shadow(-2px -2px 0 #000);transform:rotate(-2deg) skewX(-6deg);animation:fsbob 3s ease-in-out infinite}
.fs-logo span{display:block}
.fs-logo small{display:block;margin-top:1rem;font:400 clamp(1.4rem,4vw,2.4rem) 'VT323','DotGothic16',monospace;letter-spacing:.4em;-webkit-text-fill-color:#fff;color:#fff}
@keyframes fsbob{50%{transform:rotate(-2deg) skewX(-6deg) translateY(-8px)}}
.fs-sub{max-width:42rem;margin:1.6rem auto 0;padding-inline:1.5rem;text-align:center;font-size:1.7rem;text-shadow:2px 2px 0 #000}
.fs .star{position:absolute;color:#fff;font-size:1.5rem;pointer-events:none;animation:twinkle 2.2s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2;transform:scale(.6)}}
.fs-wins{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:2rem 1.75rem;max-width:70rem;margin:0 auto;padding:3rem 1.5rem 2rem}
.w-about{grid-column:span 7}.w-amp{grid-column:span 5}.w-last{grid-column:span 7}.w-links{grid-column:span 5}.w-crew{grid-column:1/-1}
.fs-wins .win:nth-child(odd){rotate:-.4deg}.fs-wins .win:nth-child(even){rotate:.5deg}
.fs-links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fs-links .px{display:block;text-align:center}
.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{display:block;margin-bottom:.3rem;border:2px solid #000;image-rendering:pixelated}
.fs-crew small{display:block}
.fs-badges{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:0 1.5rem 2rem}
.fs-badges span{padding:.35rem .7rem;background:#000;color:#0f0;border:2px solid #fff;font:400 .6rem 'Press Start 2P',monospace}

/* ---------- Reproductor estilo Winamp ---------- */
.amp{padding:.7rem;background:#111;color:#0f0;border:2px solid;border-color:#000 #808080 #808080 #000;font-family:'VT323',monospace}
.amp-d b{display:block;overflow:hidden;white-space:nowrap;font-size:1.4rem;font-weight:400}
.amp.on .amp-d b{animation:ampscroll 9s linear infinite}
@keyframes ampscroll{from{text-indent:100%}to{text-indent:-100%}}
.amp-eq{display:flex;align-items:flex-end;gap:2px;height:2rem;margin:.4rem 0}
.amp-eq i{width:7px;height:20%;background:linear-gradient(#f33,#ff0,#0f0)}
.amp.on .amp-eq i{animation:eq .8s ease-in-out infinite}
.amp-c{display:flex;gap:.5rem;align-items:center}
.amp-v{flex:1;margin:0;padding:0;border:0;background:none;accent-color:#0f0}

/* ---------- Barra de tareas ---------- */
.fs-bar{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:.6rem;padding:4px;background:#c0c0c0;border-top:2px solid #fff;box-shadow:0 -2px 0 #dfdfdf;color:#000;font:400 1.25rem 'VT323','DotGothic16',monospace}
.fs-startwrap{position:relative}
.fs-start b{color:#e00}
.fs-menu{position:absolute;left:0;bottom:calc(100% + 4px);display:grid;min-width:17rem;background:#c0c0c0;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.fs-menu[hidden]{display:none}
.fs-menu a{padding:.5rem 1rem;color:#000;text-decoration:none;font-size:1.35rem}
.fs-menu a:hover{background:#000080;color:#fff}
.fs-task,.fs-clock{padding:.1rem 1rem;border:2px solid;border-color:#808080 #fff #fff #808080}
.fs-task{flex:1;max-width:14rem}.fs-clock{margin-left:auto}

/* Con la página retro abierta, los controles flotantes suben para no tapar la barra */
.fs-on .player,.fs-on #totop{bottom:3.9rem}
.fs-on::after{display:none}

@media (max-width:900px){
  .fs-wins{grid-template-columns:1fr}
  .fs-wins .win{grid-column:1/-1;rotate:0deg}
}