/* Memoria: only what /app.css does not already give */
.tiles.three{--cols:3;--rows:1;--gx:34px;--t:min(300px,calc((100cqw - 2 * var(--gx)) / 3),calc(100cqh - 12px));align-content:center;padding-bottom:40px}
.phone .tiles.three{--cols:1;--rows:3;--gy:26px;--t:min(230px,100cqw,calc((100cqh - 12px - 2 * var(--gy)) / 3));padding-bottom:0}
.phone .tiles.three .tile .name{font-size:26px}
.phone .tiles.three .tile .lvl{font-size:15px}
.phone .tiles.three .tile .art{width:40%}
.say[hidden]{visibility:hidden}
.bar .pill{display:flex;align-items:center;gap:6px;font:500 24px/1 var(--font);background:var(--surface);border:2px solid var(--line);border-radius:999px;height:var(--ctl);padding:0 20px;flex:none;box-shadow:0 var(--lip) 0 var(--line);white-space:nowrap}
.phone .bar .pill{font-size:20px;padding:0 14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the board: the grid is sized in game.js to fill it */
.board{flex:1;min-height:0;display:grid;place-items:center;padding:20px 28px 28px;margin:0}
.phone .board{padding:14px 16px 22px}
.grid{display:grid;justify-content:center;align-content:center}
.board>.grid{width:auto;height:auto}

/* a card: blue back, white front; it turns over */
.mc{position:relative;border:0;padding:0;background:none;cursor:pointer;perspective:900px;border-radius:18px;font-family:inherit}
.mc .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 560ms var(--spring)}
.mc.up .in{transform:rotateY(180deg)}
.mc .fc{position:absolute;inset:0;border-radius:18px;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.mc .bk{--c:var(--t-blu);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 90%,#000) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),inset 0 -6px 0 var(--t-blu-lip)}
.mc .ft{transform:rotateY(180deg);background:var(--surface);border:3px solid var(--line);box-shadow:inset 0 -5px 0 var(--line)}
.mc .ft img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.2))}
.mc .ft .t{font:500 var(--fs,26px)/1.1 var(--font);color:var(--ink);text-align:center;padding:0 6%}
.mc .tick{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;background:var(--verde);color:#fff;display:none;place-items:center;box-shadow:0 3px 0 var(--verde-lip)}
.mc .tick svg{width:19px;height:19px;stroke-width:3.5}
.mc.ok .ft{border-color:var(--verde);box-shadow:inset 0 -5px 0 var(--verde)}
.mc.ok .tick{display:grid}
.mc.ok{cursor:default}
.mc:focus-visible{outline:4px solid var(--sole);outline-offset:4px}
@media (hover:hover){ .mc:not(.up):hover .in{transform:translateY(-4px)} }
.phone .mc .tick{width:22px;height:22px;top:4px;right:4px}
.phone .mc .tick svg{width:14px;height:14px}

.rec{font:500 26px/1.2 var(--font);color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .mc .in{transition:none}
}