/* La Scialuppa · Giochi di bordo. Mismo sistema que la web: amarillo del cartel con dibujitos, bandas gris pizarra
   con tiza, rojo del logo, Patrick Hand SC + Nunito Sans. Radio: 6px en tarjetas, píldora en botones. */
:root {
  --yellow: #F3D01F; --yellow-l: #F8E36A; --ink: #33363B; --slate: #3C4149; --ivory: #F6F1E4; --white: #FFFDF7; --red: #B8202A; --muted: #4F5359;
  --band: radial-gradient(90% 70% at 10% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%), radial-gradient(70% 60% at 100% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 70%), url('../img/bg/marinaio-chalk.svg') #3C4149;
  --band-size: auto, auto, 320px 320px, auto;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --z-top: 10; --z-play: 20; --z-over: 30; --z-sheet: 40;
  --hand: 'Patrick Hand SC', 'Nunito Sans', sans-serif; --sans: 'Nunito Sans', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--yellow); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 45% at 12% 8%, rgba(255,245,170,.85), rgba(255,245,170,0) 70%), radial-gradient(55% 40% at 95% 30%, rgba(242,150,40,.3), rgba(242,150,40,0) 70%), radial-gradient(60% 40% at 25% 78%, rgba(255,236,120,.65), rgba(255,236,120,0) 70%), url('../img/bg/marinaio-ink.svg');
  background-size: auto, auto, auto, 320px 320px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.top { position: sticky; top: 0; z-index: var(--z-top); background: var(--band); background-size: var(--band-size); border-bottom: 3px solid var(--yellow); padding: calc(10px + var(--safe-t)) clamp(14px, 4vw, 40px) 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .brand { display: flex; align-items: center; min-height: 44px; }
.top .brand img { height: 44px; width: auto; display: block; }
.top .tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(246,241,228,.35); background: transparent; color: var(--ivory); cursor: pointer; font-weight: 700; font-size: 14px; transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out); }
.icon-btn:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--ivory); } .mc:not(.up):hover .mc-in { transform: translateY(-3px); } }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .flag { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lang-box { position: relative; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; border-radius: 10px; background: var(--white); box-shadow: 0 16px 40px rgba(51,54,59,.3); display: grid; gap: 2px; transform-origin: top right; transition: opacity 160ms ease, transform 180ms var(--ease-out); }
.lang-panel[data-open="false"] { opacity: 0; transform: scale(.96) translateY(-4px); pointer-events: none; }
.lang-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-weight: 600; text-align: left; cursor: pointer; }
.lang-opt[aria-current="true"] { background: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .lang-opt:hover { background: rgba(243,208,31,.35); } }
.lang-opt img { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* ---------- portada ---------- */
main { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px) calc(56px + var(--safe-b)); }
.intro { display: grid; gap: 14px; max-width: 640px; }
.intro h1 { margin: 0; font: 400 clamp(46px, 9vw, 84px)/.95 var(--hand); letter-spacing: -.01em; text-wrap: balance; }
.intro p { margin: 0; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: pretty; max-width: 48ch; }
.intro p.season { display: inline-flex; color: var(--ivory); max-width: none; line-height: 1.3; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-self: start; margin-top: 6px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--ink); font-size: 14px; font-weight: 600; }
.season img { width: 22px; height: 22px; flex: none; }
.season span { display: inline; }
.intro p.season b { color: var(--yellow); font-weight: 800; }

.prize { margin-top: 26px; display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 6px; background: var(--white); box-shadow: 0 10px 28px rgba(51,54,59,.14); max-width: 640px; }
.prize img { width: 44px; height: 44px; flex: none; }
.prize strong { display: block; font: 400 24px/1 var(--hand); color: var(--red); }
.prize p { margin: 4px 0 0; }

.games { list-style: none; margin: clamp(32px, 5vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(18px, 3vw, 28px); }
.game { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 6px; overflow: hidden; background: var(--band); background-size: var(--band-size); color: var(--ivory); box-shadow: 0 14px 34px rgba(51,54,59,.28); animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.game .scene { position: relative; aspect-ratio: 16 / 8; background: #2B2F35; }
.game .scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game .body { padding: 18px clamp(16px, 3vw, 24px) 20px; display: grid; gap: 6px; align-content: start; }
.game h2 { margin: 0; font: 400 clamp(30px, 4vw, 38px)/1 var(--hand); color: var(--ivory); }
.game .tag { margin: 0; color: rgba(246,241,228,.86); font-size: 15px; }
.game .lead { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--yellow); font-weight: 700; min-height: 22px; }
.game .lead img { width: 20px; height: 20px; }
.game .lead.is-loading { color: transparent; }
.game .lead.is-loading::after { content: ''; position: absolute; width: 150px; height: 12px; border-radius: 6px; background: rgba(246,241,228,.14); }
.game .acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; font: 800 15px/1 var(--sans); letter-spacing: .2px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.btn:active { transform: scale(.97); }
.btn-y { background: var(--yellow); color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn-g { background: transparent; color: var(--ivory); border: 1.5px solid rgba(246,241,228,.45); }
.btn-d { background: var(--ink); color: var(--yellow); }
.btn-l { background: transparent; color: var(--ink); border: 1.5px solid rgba(51,54,59,.35); }
.btn-r { background: var(--red); color: #FFFFFF; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
@media (hover: hover) and (pointer: fine) {
  .btn-y:hover { background: var(--yellow-l); }
  .btn-g:hover { border-color: var(--ivory); }
  .btn-d:hover { background: #24272B; }
  .btn-l:hover { border-color: var(--ink); }
  .btn-r:hover { background: #A11B24; }
}
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.rules { margin: 30px 0 0; max-width: 60ch; font-size: 14px; color: var(--muted); }
.local-note { margin: 18px 0 0; display: inline-block; padding: 8px 14px; border-radius: 6px; background: rgba(51,54,59,.1); font-size: 13.5px; font-weight: 600; }

/* ---------- pantalla de juego ---------- */
.play { position: fixed; inset: 0; z-index: var(--z-play); display: grid; grid-template-rows: auto 1fr; background: var(--ink); overscroll-behavior: none; touch-action: none; }
.hud { position: relative; background: var(--band); background-size: var(--band-size); color: var(--ivory); padding: calc(8px + var(--safe-t)) 10px 8px; display: grid; grid-template-columns: 44px 1fr auto 44px; align-items: center; gap: 10px; border-bottom: 3px solid var(--yellow); }
.hud .hbtn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(246,241,228,.35); background: transparent; color: var(--ivory); display: grid; place-items: center; cursor: pointer; transition: transform 140ms var(--ease-out); }
.hud .hbtn:active { transform: scale(.94); }
.hud .hbtn svg { width: 20px; height: 20px; }
.hud .sc { display: grid; line-height: 1; min-width: 0; }
.hud .sc b { font: 400 34px/1 var(--hand); color: var(--yellow); font-variant-numeric: tabular-nums; }
.hud .sc small { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; opacity: .8; }
.hud .side { display: flex; align-items: center; gap: 14px; }
.hud .stat { display: grid; justify-items: end; line-height: 1.05; }
.hud .stat b { font: 400 24px/1 var(--hand); font-variant-numeric: tabular-nums; }
.hud .stat small { font-size: 11px; font-weight: 700; opacity: .75; }
.hud .lives { display: flex; gap: 3px; }
.hud .lives i { width: 22px; height: 22px; background: url('../img/ui/ring.svg') center / contain no-repeat; transition: opacity 200ms ease, transform 260ms var(--ease-out); }
.hud .lives i.off { opacity: .22; transform: scale(.8); }
.hud .timebar { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: rgba(0,0,0,.35); }
.hud .timebar span { display: block; height: 100%; background: var(--yellow); transform-origin: left; }
.hud .timebar.low span { background: var(--red); }
.arena { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.arena canvas.stage { position: absolute; inset: 0; display: block; touch-action: none; }

/* tarjetas encima del juego */
.veil { position: absolute; inset: 0; z-index: var(--z-over); display: grid; place-items: center; padding: 20px; background: rgba(28,30,34,.55); transition: opacity 200ms ease; }
.veil[data-show="false"] { opacity: 0; pointer-events: none; }
.card { width: min(420px, 100%); border-radius: 6px; background: var(--white); color: var(--ink); padding: 24px 22px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; gap: 12px; transition: transform 260ms var(--ease-out), opacity 200ms ease; }
.veil[data-show="false"] .card { transform: translateY(10px) scale(.98); opacity: 0; }
.card h2 { margin: 0; font: 400 40px/1 var(--hand); }
.card .sub { margin: 0; color: var(--muted); }
.how { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.how li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font-size: 15.5px; line-height: 1.35; }
.how img { width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: var(--yellow); }
.card .row { display: flex; gap: 10px; flex-wrap: wrap; }
.card .row .btn { flex: 1 1 auto; }
.card .sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(51,54,59,.06); font-weight: 700; font-size: 14px; }
.card .sound-row .btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
.go { position: absolute; inset: 0; z-index: var(--z-over); display: grid; place-items: center; pointer-events: none; font: 400 clamp(64px, 16vw, 120px)/1 var(--hand); color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.25); }
.go.on { animation: go 700ms var(--ease-out) both; }
@keyframes go { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1.04); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }

/* hoja de fin de partida */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #F9E273 0%, #F3D01F 38%, #EEC516 100%); color: var(--ink); padding: 10px clamp(18px, 4vw, 28px) calc(22px + var(--safe-b)); box-shadow: 0 -20px 50px rgba(0,0,0,.35); transition: transform 460ms var(--ease-drawer); }
.sheet[data-show="false"] { transform: translateY(105%); transition-duration: 240ms; }
.sheet .grab { position: relative; width: 40px; height: 4px; border-radius: 4px; background: rgba(51,54,59,.3); margin: 0 auto 12px; }
.sheet .in { position: relative; max-width: 520px; margin: 0 auto; display: grid; gap: 14px; }
/* fondo animado del fin de partida: rayos de sol que giran, dibujitos, dos olas que se mueven, confeti si hay récord */
.sh-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: url('../img/bg/marinaio-ink.svg') 0 0 / 320px 320px; }
.sh-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 45% at 20% 0%, rgba(255,250,200,.7), rgba(255,250,200,0) 70%); }
.sh-bg .rays { position: absolute; left: 50%; top: -70vh; width: 180vh; height: 180vh; margin-left: -90vh; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.26) 0 7deg, rgba(255,255,255,0) 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 30%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 30%, transparent 62%); animation: rays 70s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.sh-bg .wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 46px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='46' viewBox='0 0 200 46'><path d='M0 22 C25 6 50 6 75 22 S125 38 150 22 S200 6 200 22 V46 H0z' fill='%23fffdf7'/></svg>") repeat-x 0 0 / 200px 46px; opacity: .45; animation: wave 22s linear infinite; }
.sh-bg .wave.w2 { height: 34px; opacity: .22; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='34' viewBox='0 0 200 34'><path d='M0 16 C25 2 50 2 75 16 S125 30 150 16 S200 2 200 16 V34 H0z' fill='%2333363b'/></svg>"); background-size: 200px 34px; animation-duration: 31s; animation-direction: reverse; }
@keyframes wave { to { transform: translateX(-200px); } }
.sh-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-board h3 { margin: 6px 0 8px; font: 400 24px/1 var(--hand); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sh-board h3::before { content: ''; width: 22px; height: 22px; background: url('../img/ui/coppa.svg') center / contain no-repeat; }
.sh-board .lb { padding: 6px; border-radius: 12px; background: rgba(255,253,247,.55); }
.sh-board .lb li:nth-child(odd) { background: rgba(255,253,247,.6); }
.sh-board .lb li.skel { background: rgba(255,253,247,.4); }
.sh-board .lb li.me { background: var(--ink); color: var(--ivory); box-shadow: 0 6px 16px rgba(51,54,59,.25); }
.res-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.res-top h2 { margin: 0; font: 400 26px/1 var(--hand); color: var(--ink); opacity: .75; }
.big { font: 400 clamp(64px, 18vw, 88px)/.9 var(--hand); font-variant-numeric: tabular-nums; }
.big small { font: 700 14px/1 var(--sans); color: var(--muted); margin-left: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 13.5px; box-shadow: 0 4px 12px rgba(51,54,59,.25); animation: badge 600ms var(--ease-out) both; }
.badge img { filter: invert(1) sepia(1) saturate(4) hue-rotate(10deg); }
@keyframes badge { from { transform: scale(.7) rotate(-8deg); opacity: 0; } }
.best-line { margin: 0; color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; font-size: 14px; }
.field input { width: 100%; height: 52px; padding: 0 16px; border-radius: 10px; border: 1.5px solid rgba(51,54,59,.45); background: #FFFFFF; color: var(--ink); font: 600 18px var(--sans); transition: border-color 160ms ease, box-shadow 160ms ease; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,253,247,.9); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field .hint { font-size: 13px; color: var(--muted); }
.field .err { font-size: 14px; font-weight: 700; color: var(--red); min-height: 0; }
.rank-line { margin: 0; font: 400 26px/1.15 var(--hand); }
.note { margin: 0; font-size: 13.5px; color: var(--muted); }

/* clasificación */
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: r; }
.lb li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 8px; font-weight: 700; }
.lb li:nth-child(odd) { background: rgba(51,54,59,.05); }
.lb .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 18px/1 var(--hand); color: var(--muted); }
.lb li:nth-child(1) .n { background: var(--yellow); color: var(--ink); }
.lb li:nth-child(2) .n { background: #DADDE0; color: var(--ink); }
.lb li:nth-child(3) .n { background: #EBC9A6; color: var(--ink); }
.lb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .pt { font: 400 22px/1 var(--hand); font-variant-numeric: tabular-nums; }
.lb li.me { background: var(--ink); color: var(--ivory); }
.lb li.me .pt { color: var(--yellow); }
.lb li.skel { background: rgba(51,54,59,.06); }
.lb li.skel span { display: block; height: 12px; border-radius: 6px; background: rgba(51,54,59,.1); }
.lb-empty { margin: 0; padding: 22px 12px; text-align: center; color: var(--muted); font-weight: 600; }

/* diálogo de clasificación */
dialog.board { width: min(560px, calc(100% - 24px)); max-height: min(760px, calc(100dvh - 24px)); margin: auto; padding: 0; border: 0; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden; }
dialog.board[open] { display: grid; grid-template-rows: auto auto 1fr; animation: pop 220ms var(--ease-out); }
dialog.board::backdrop { background: rgba(28,30,34,.55); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.bd-head { background: var(--band); background-size: var(--band-size); color: var(--ivory); padding: 16px 16px 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bd-head h2 { margin: 0; font: 400 34px/1 var(--hand); }
.bd-head p { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.bd-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 6px; padding: 12px 14px 0; }
.bd-tabs button { min-height: 42px; padding: 0 10px; border-radius: 999px; border: 1.5px solid rgba(51,54,59,.25); background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; }
.bd-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.bd-body { overflow: auto; padding: 12px 14px 18px; display: grid; gap: 12px; align-content: start; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(51,54,59,.08); }
.seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 4px rgba(51,54,59,.2); }

/* ---------- memory ---------- */
.mem { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, var(--c, 72px)); grid-auto-rows: var(--c, 72px); gap: 10px; place-content: center; padding: 16px; background: var(--band); background-size: var(--band-size); perspective: 900px; }
.mem::before { content: ''; position: absolute; inset: 0; background: url('../img/logo/logo-ivory.svg') center 14% / min(78%, 560px) no-repeat; opacity: .16; pointer-events: none; }
.mem > * { position: relative; }
.mem.hidden { visibility: hidden; }
.mc { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; animation: deal 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 28ms); -webkit-tap-highlight-color: transparent; }
@keyframes deal { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.mc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 380ms var(--ease-out); }
.mc.up .mc-in { transform: rotateY(180deg); }
.mc-back, .mc-front { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2.5px solid var(--ink); }
.mc-back { background: radial-gradient(circle at 50% 50%, transparent 0 26%, var(--yellow) 26% 30%, transparent 30%), url('../img/bg/ico-barca-chalk.svg') center / 34% no-repeat, linear-gradient(160deg, #545B65, #3E444C); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.25); }
.mc-front { transform: rotateY(180deg); background: linear-gradient(160deg, #FFFFFF, #F6F1E4); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 0 rgba(0,0,0,.2), 0 8px 14px rgba(0,0,0,.22); }
.mc-front::before { content: ''; position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--tint); }
.mc-front img { position: relative; width: 60%; height: 60%; }
.mc:active .mc-in { transition-duration: 120ms; }
.mc.no .mc-front { animation: shake 320ms ease both; }
@keyframes shake { 25% { transform: rotateY(180deg) translateX(-4px); } 75% { transform: rotateY(180deg) translateX(4px); } }
.mc.ok .mc-front { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 4px 0 rgba(0,0,0,.2); }
.mem.win .mc { animation: win 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes win { 40% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .game, .mc { animation: none; }
  .mc-in { transition: none; }
  .mc-back { transition: opacity 150ms ease; }
  .mc.up .mc-in { transform: none; }
  .mc.up .mc-back { opacity: 0; }
  .mc .mc-front { transform: none; opacity: 0; transition: opacity 150ms ease; }
  .mc.up .mc-front { opacity: 1; }
  .mc.no .mc-front, .mem.win .mc { animation: none; }
  .sheet, .card, .lang-panel { transition-duration: 150ms; transition-property: opacity; }
  .sh-bg .rays, .sh-bg .wave, .badge { animation: none; }
  .sheet[data-show="false"] { transform: none; opacity: 0; pointer-events: none; }
  .go.on { animation: fade 700ms ease both; }
  @keyframes fade { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
}
@media (max-width: 520px) {
  .top .brand img { height: 38px; }
  .icon-btn .lbl { display: none; }
  .hud .sc b { font-size: 30px; }
}
.bd-head p::first-letter { text-transform: uppercase; }
/* En ordenador el juego va en una columna como la de un móvil grande: mismas reglas y sensaciones para todos */
@media (min-width: 700px) {
  .play { grid-template-columns: minmax(0, 620px); justify-content: center; background: var(--band); background-size: var(--band-size); }
  .play .hud { border-radius: 0 0 0 0; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
  .play .arena { box-shadow: 0 0 60px rgba(0,0,0,.45); }
}