/* Fresi & Mori · páginas de la web (guías y mini-juego). Mismos colores y tipografías que el juego. */
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/fonts/nunito-latin-800-normal.woff2) format("woff2")}
:root{--bg:#FFF6F8;--card:#fff;--ink:#3A1F35;--soft:#765670;--pink:#E04F95;--rose:#C72B61;--line:#F3DCE6;--gold:#FFE27A;--violet:#7B4FD6;
  --display:"Baloo 2","Arial Rounded MT Bold",sans-serif;--body:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:700 17px/1.6 var(--body)}
a{color:var(--rose)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* cabecera */
.top{background:linear-gradient(120deg,#8A55D8 0%,#C2479F 48%,#F0558C 100%);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.brand{font:800 1.6rem/1 var(--display);color:#fff;text-decoration:none;white-space:nowrap;
  text-shadow:2px 0 0 #5B1A4A,-2px 0 0 #5B1A4A,0 2px 0 #5B1A4A,0 -2px 0 #5B1A4A,0 4px 0 #A81B50}
.brand .a{color:var(--gold);font-size:.78em}.brand .m{color:#FFC2D4}
.lang{color:#fff;font-weight:800;text-decoration:none;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:4px 12px;font-size:.9rem;white-space:nowrap}
.hero{background:linear-gradient(120deg,#8A55D8 0%,#C2479F 48%,#F0558C 100%);color:#fff;padding:8px 0 96px}
.crumbs{font-size:.85rem;opacity:.85;margin:0 0 6px}.crumbs a{color:#fff}
h1{font:800 clamp(2rem,6.5vw,3rem)/1.05 var(--display);margin:.1em 0 .25em;text-wrap:balance}
.lead{font-size:1.1rem;margin:0;max-width:640px;opacity:.95}
.hero p{color:#fff}

/* tarjeta del juego */
.play{background:var(--card);border-radius:28px;box-shadow:0 18px 50px rgba(90,20,70,.18);padding:18px 16px 20px;margin:-76px auto 8px;max-width:560px;position:relative}
.fm-sets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.fm-sets button,.fm-actions button{font:800 .92rem var(--body);color:var(--ink);background:#FBEFF4;border:2px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.fm-sets button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
.fm-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--soft);margin:0 2px 8px}
.fm-time{font-variant-numeric:tabular-nums}
.fm-board{--n:6;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(3px,1vw,6px);width:100%;max-width:440px;margin:0 auto;
  background:#F7E3EC;padding:clamp(5px,1.4vw,9px);border-radius:18px;touch-action:manipulation}
.fm-c{aspect-ratio:1;border:0;border-radius:clamp(6px,1.6vw,11px);background:#fff;box-shadow:inset 0 -3px 0 #F1DCE6;padding:6%;cursor:pointer;display:grid;place-items:center;min-width:0}
.fm-c svg{width:100%;height:100%;animation:fmPop .25s cubic-bezier(.3,1.7,.5,1)}
.fm-c.g{background:#FFF4CF;box-shadow:inset 0 0 0 2px #F2C451,inset 0 -3px 0 #F2C451;cursor:default}
.fm-c.g svg{animation:none}
.fm-c.x{box-shadow:inset 0 0 0 3px #E5304F;background:#FFE3E8}
.fm-c.r{box-shadow:inset 0 0 0 3px #8A55D8}
.fm-c.h{box-shadow:inset 0 0 0 3px #19A974;background:#E3F8EF;animation:fmPulse .9s ease-in-out 2}
.fm-c:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.fm-board.won .fm-c svg{animation:fmCheer .6s ease-in-out both}
.fm-msg{min-height:3.2em;margin:10px 4px 6px;text-align:center;font-weight:800;color:var(--soft)}
.fm-msg.bad{color:#C8203F}.fm-msg.ok{color:#14895E}.fm-msg.tip{color:#5B3FB0}
.fm-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fm-cta,.cta{display:block;text-align:center;margin:14px auto 0;max-width:420px;background:linear-gradient(180deg,#FF6F98,#E5306A);color:#fff;text-decoration:none;
  font:800 1.15rem var(--display);padding:13px 18px;border-radius:999px;box-shadow:0 6px 0 #A81B50,0 12px 24px rgba(168,27,80,.3)}
.fm-cta:active,.cta:active{transform:translateY(3px);box-shadow:0 3px 0 #A81B50}
@keyframes fmPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes fmPulse{50%{transform:scale(1.07)}}
@keyframes fmCheer{40%{transform:translateY(-12%) rotate(-6deg)}70%{transform:translateY(0) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.fm-c svg,.fm-c.h,.fm-board.won .fm-c svg{animation:none}}

/* texto */
main section{margin:34px 0}
h2{font:800 1.7rem/1.15 var(--display);color:var(--rose);margin:0 0 .4em}
h3{font:800 1.2rem/1.2 var(--display);margin:1.2em 0 .3em}
p,li{color:#4A2D45}
.rules{list-style:none;padding:0;display:grid;gap:10px}
.rules li{background:#fff;border-radius:18px;padding:12px 14px 12px 56px;position:relative;box-shadow:0 4px 14px rgba(90,20,70,.07)}
.rules li::before{content:attr(data-n);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;font:800 1rem/30px var(--display);text-align:center}
.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(90,20,70,.07);font-size:.95rem}
.compare th,.compare td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{background:#FBEFF4;font-weight:800}
.tablewrap{overflow-x:auto}
details{background:#fff;border-radius:16px;padding:12px 16px;margin:8px 0;box-shadow:0 4px 14px rgba(90,20,70,.07)}
summary{font-weight:800;cursor:pointer;color:var(--ink)}
details p{margin:.5em 0 0}
.note{font-size:.85rem;color:var(--soft)}
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:0;list-style:none}
.more a{display:block;background:#fff;border-radius:16px;padding:12px 14px;text-decoration:none;font-weight:800;box-shadow:0 4px 14px rgba(90,20,70,.07)}
.more a span{display:block;font-weight:700;font-size:.85rem;color:var(--soft)}
footer{background:#3A1F35;color:#F6DDE9;margin-top:48px;padding:26px 0 34px;font-size:.9rem}
footer a{color:#FFC2D4}
footer p{color:#F6DDE9}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px}