/* Memory Match — game-specific styles (shared tokens come from /assets/css/game.css) */
.link-btn{background:none;border:0;padding:0;color:var(--sky);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left}
.link-btn:hover{text-decoration:underline}
.hide-xs{display:inline}
.msg{min-height:1.6em;margin:12px 0 0;text-align:center;font-weight:700}
.msg.ok{color:#a7f3d0}.msg.bad{color:#fda4af}.msg.hint{color:var(--gold)}
.shake{animation:fcshake .35s}
@keyframes fcshake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.fc-item{display:flex;align-items:center;gap:6px;background:var(--bg);border:2px solid var(--hard);border-radius:10px;padding:4px 6px}
.fc-item.cur{border-color:var(--sky)}
.fc-item input[type=text]{flex:1;min-width:0;border:0;background:transparent;padding:6px 4px;border-radius:6px;font-weight:700;font-size:.9rem}
.fc-item input[type=text]:focus{outline:2px solid var(--sky);border:0}
.fc-item input.warn{outline:2px dashed var(--gold)}
.fc-thumb{width:40px;height:40px;flex:none;border-radius:8px;border:2px solid var(--hard);background:var(--panel2);cursor:pointer;padding:0;overflow:hidden;display:grid;place-items:center;font-size:1.4rem;color:var(--muted)}
.fc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fc-thumb:hover{filter:brightness(1.12)}
.fc-item .mini{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center}
.fc-item .mini:hover:not(:disabled){background:var(--panel2);color:var(--text)}
.fc-item .mini:disabled{opacity:.25;cursor:default}
.fc-item .mini.del:hover{background:var(--rose);color:#fff}
.fc-none{text-align:center;color:var(--muted);padding:14px 6px;font-size:.9rem}
.top-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.88rem}
.top-list li{display:flex;justify-content:space-between;gap:8px;color:var(--soft)}
.top-list li:nth-child(1) b{color:var(--gold)}
.btn.danger{background:#3b0a14;color:#fecdd3}.btn.danger:hover{background:var(--rose);color:#fff}
.mm-app{position:relative}
.mm-stage{padding:16px}
.mm-stats{gap:8px}

/* ---- pick a tile design ---- */
.mm-skins{display:flex;gap:8px;flex-wrap:wrap}
.mm-skin{width:46px;height:56px;border-radius:9px;border:3px solid var(--hard);cursor:pointer;padding:0;position:relative;box-shadow:var(--shadow-sm);background:linear-gradient(150deg,var(--b1),var(--b2));transition:transform .12s}
.mm-skin::after{content:'';position:absolute;inset:5px;border:2px solid rgba(255,255,255,.55);border-radius:5px}
.mm-skin:hover{transform:translateY(-2px)}
.mm-skins{max-width:100%}
.mm-skin[aria-checked=true]{outline:3px solid var(--gold);outline-offset:2px}

/* ---- the table ---- */
.mm-boardwrap{position:relative;margin:4px auto 0;width:100%}
.mm-board{--b1:#3b82f6;--b2:#1e3a8a;--ink:#dbeafe;--felt1:#1f7a4d;--felt2:#0d4129;--wood1:#9a6b3d;--wood2:#5c3a1b;
  position:relative;border-radius:24px;padding:clamp(12px,3vw,26px);
  background:radial-gradient(ellipse at 50% 25%,var(--felt1),var(--felt2) 78%);
  box-shadow:0 0 0 4px var(--hard),inset 0 0 0 9px var(--wood1),inset 0 0 0 12px var(--wood2),inset 0 0 0 13px rgba(255,255,255,.18),inset 0 14px 70px rgba(0,0,0,.5),0 10px 0 -2px rgba(0,0,0,.35);}
.mm-board::before{content:'';position:absolute;inset:13px;border-radius:14px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1L1 -1M0 6L6 0M5 7L7 5' stroke='%23fff' stroke-opacity='.07' stroke-width='1.4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 5L1 7M0 0L6 6M5 -1L7 1' stroke='%23000' stroke-opacity='.10' stroke-width='1.4'/%3E%3C/svg%3E");background-size:6px 6px}
.mm-board[data-skin=sunset]{--b1:#fb923c;--b2:#9a3412;--ink:#ffedd5;--felt1:#5b2a1c;--felt2:#2a0f09;--wood1:#c08a4a;--wood2:#6b4318}
.mm-board[data-skin=ocean]{--b1:#2dd4bf;--b2:#115e59;--ink:#ccfbf1;--felt1:#1d4f8a;--felt2:#0a2347;--wood1:#8aa1b8;--wood2:#3c5068}
.mm-board[data-skin=royal]{--b1:#a78bfa;--b2:#4c1d95;--ink:#ede9fe;--felt1:#7a1f3d;--felt2:#3a0a1c;--wood1:#d4af37;--wood2:#7a5c10}
.mm-board[data-skin=slate]{--b1:#94a3b8;--b2:#1e293b;--ink:#f1f5f9;--felt1:#334155;--felt2:#0f172a;--wood1:#cbd5e1;--wood2:#64748b}
.mm-skin[data-skin=classic]{--b1:#3b82f6;--b2:#1e3a8a}.mm-skin[data-skin=sunset]{--b1:#fb923c;--b2:#9a3412}.mm-skin[data-skin=ocean]{--b1:#2dd4bf;--b2:#115e59}
.mm-skin[data-skin=royal]{--b1:#a78bfa;--b2:#4c1d95}.mm-skin[data-skin=slate]{--b1:#94a3b8;--b2:#1e293b}
.mm-board[data-skin=candy]{--b1:#f9a8d4;--b2:#be185d;--ink:#fdf2f8;--felt1:#4a1d5c;--felt2:#1e0a2a;--wood1:#f0abfc;--wood2:#86198f}
.mm-board[data-skin=forest]{--b1:#4ade80;--b2:#14532d;--ink:#dcfce7;--felt1:#3f2a1a;--felt2:#1a0f08;--wood1:#a3865a;--wood2:#5a4426}
.mm-board[data-skin=crimson]{--b1:#f87171;--b2:#7f1d1d;--ink:#fee2e2;--felt1:#1e293b;--felt2:#0b1120;--wood1:#94a3b8;--wood2:#475569}
.mm-board[data-skin=gold]{--b1:#fde047;--b2:#a16207;--ink:#fefce8;--felt1:#1e3a5f;--felt2:#0b1a30;--wood1:#d4af37;--wood2:#7a5c10}
.mm-skin[data-skin=candy]{--b1:#f9a8d4;--b2:#be185d}.mm-skin[data-skin=forest]{--b1:#4ade80;--b2:#14532d}.mm-skin[data-skin=crimson]{--b1:#f87171;--b2:#7f1d1d}.mm-skin[data-skin=gold]{--b1:#fde047;--b2:#a16207}

.mm-grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(6px,1.6vw,14px);margin:0 auto;width:min(100%,calc(var(--cols,4) * 150px),calc((var(--gic-maxh) - 30px) * var(--cols,4) / var(--rows,3)));perspective:1100px}

/* ---- a tile ---- */
.mm-tile{position:relative;aspect-ratio:var(--tile-ar,1);padding:0;border:0;background:none;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;color:inherit}
.mm-tile:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.mm-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.1,.2,1.2)}
.mm-tile.up .mm-in{transform:rotateY(180deg)}
.mm-tile:not(.up):not(:disabled):hover .mm-in{transform:translateY(-3px)}   /* one transform (not the separate translate property): less repainting of the 3D layers */
.mm-tile:not(.up):not(:disabled):active .mm-in{transform:translateY(1px)}
.mm-tile:disabled{cursor:default}
.mm-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:3px solid var(--hard);box-shadow:0 4px 0 var(--hard),0 8px 14px rgba(0,0,0,.4)}

/* back: ornamental pattern + medallion */
.mm-back{background:
  linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 2px,transparent 2px 9px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.10) 0 2px,transparent 2px 9px),
  linear-gradient(150deg,var(--b1),var(--b2))}
.mm-back::before{content:'';position:absolute;inset:7%;border:2px solid rgba(255,255,255,.65);border-radius:9px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),0 0 0 2px rgba(0,0,0,.2)}
.mm-back::after{content:'';position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;translate:-50% -50%;background:var(--ink);opacity:.92;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 4l9 21 22-8-8 22 21 9-21 9 8 22-22-8-9 21-9-21-22 8 8-22-21-9 21-9-8-22 22 8zM50 30a20 20 0 100 40 20 20 0 000-40zm0 8l4 8 9 1-6 6 2 9-9-4-9 4 2-9-6-6 9-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 4l9 21 22-8-8 22 21 9-21 9 8 22-22-8-9 21-9-21-22 8 8-22-21-9 21-9-8-22 22 8zM50 30a20 20 0 100 40 20 20 0 000-40zm0 8l4 8 9 1-6 6 2 9-9-4-9 4 2-9-6-6 9-1z'/%3E%3C/svg%3E") center/contain no-repeat}

/* tile patterns */
.mm-back{container-type:size}
.mm-board[data-pat=dots] .mm-back{background:linear-gradient(155deg,rgba(255,255,255,.3),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(255,255,255,.28) 0 2.5px,transparent 3px) 0 0/14px 14px,linear-gradient(150deg,var(--b1),var(--b2))}
.mm-board[data-pat=stripes] .mm-back{background:linear-gradient(155deg,rgba(255,255,255,.3),rgba(255,255,255,0) 42%),repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 7px,transparent 7px 16px),linear-gradient(150deg,var(--b1),var(--b2))}
.mm-board[data-pat=plain] .mm-back{background:linear-gradient(155deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),linear-gradient(150deg,var(--b1),var(--b2))}
/* one shared picture on every tile back (one image file, decoded once) */
.mm-board.has-img .mm-back{background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),var(--tile-img) center/cover no-repeat,linear-gradient(150deg,var(--b1),var(--b2))}
.mm-board.has-img .mm-back::after,.mm-board.has-num .mm-back::after{display:none}
.mm-board.has-img .mm-back::before{border-color:rgba(255,255,255,.8)}
/* numbers / letters */
.mm-num{position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:84%;font:800 46cqw/1 'Baloo 2',system-ui,sans-serif;color:var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.35);pointer-events:none}
.mm-num[data-l="2"]{font-size:38cqw}.mm-num[data-l="3"]{font-size:30cqw}
.mm-board.has-img .mm-num{background:rgba(15,23,42,.62);color:#fff;border-radius:999px;padding:.05em .38em;text-shadow:none}
.mm-tag{position:absolute;left:6%;top:5%;min-width:20%;padding:0 .35em;text-align:center;font:800 17cqw/1.25 'Baloo 2',system-ui,sans-serif;color:#fff;background:rgba(15,23,42,.72);border-radius:999px;pointer-events:none;z-index:1}

/* front: cream card */
.mm-front{transform:rotateY(180deg);background:linear-gradient(160deg,#fffef8,#f1e9d2);color:#0f172a;container-type:size;display:grid;place-items:center}
.mm-front::before{content:'';position:absolute;inset:5%;border:2px solid rgba(15,23,42,.14);border-radius:9px;pointer-events:none}
.mm-pic{position:absolute;inset:11%;display:grid;place-items:center}
.mm-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.mm-pic .e{font-size:min(60cqh,60cqw);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mm-word{position:absolute;inset:9% 8%;display:grid;place-items:center;text-align:center;font:800 17cqw/1.05 'Baloo 2',system-ui,sans-serif;word-break:break-word;overflow-wrap:anywhere;hyphens:auto}
.mm-word.l1{font-size:25cqw}.mm-word.l2{font-size:19cqw}.mm-word.l3{font-size:14.5cqw}.mm-word.l4{font-size:11cqw}.mm-word.l5{font-size:8.5cqw}

/* matched */
.mm-tile.done{cursor:default}
.mm-tile.done .mm-front{border-color:#34d399;box-shadow:0 4px 0 #065f46,0 0 0 3px rgba(52,211,153,.55),0 0 22px 4px rgba(52,211,153,.55)}
.mm-tile.done .mm-front::after{content:'';position:absolute;top:5%;right:5%;width:24%;aspect-ratio:1/1;height:auto;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.8l4.4 4.4 8.6-9.4' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68% no-repeat,#10b981;border:2px solid #065f46;box-shadow:0 1px 3px rgba(0,0,0,.35);-webkit-transform:translateZ(0);transform:translateZ(0)}
.mm-tile.pop .mm-in{animation:mmpop .5s .35s}
.mm-tile.miss .mm-front{animation:mmmiss .45s .4s}
@keyframes mmpop{40%{transform:rotateY(180deg) scale(1.1)}}
@keyframes mmmiss{25%{translate:-5px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.mm-tile.ghost{visibility:hidden;pointer-events:none}

/* ready overlay */

.msg.ok{color:#a7f3d0}.msg.bad{color:#fda4af}.msg.hint{color:var(--gold)}

/* big screens / fullscreen: scale the "ready" / how-to-play card so it reads from across the room */

/* full screen: the board only */
html.gic-fs .mm-app{max-width:none;padding:8px 10px}
html.gic-fs .layout{grid-template-columns:minmax(0,1fr)}
html.gic-fs .mm-stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px 54px 4px 4px}
html.gic-fs .mm-grid{width:100%}

@media(max-width:520px){.hide-xs{display:none}.mm-face{border-width:2px;border-radius:10px;box-shadow:0 3px 0 var(--hard)}.mm-board{border-radius:16px}}
/* 1.75.0: cards are dealt onto the table, a miss glows red, a win ripples across the board. Only translate / scale / opacity move (cheap on an old iPad). */
.mm-grid.deal .mm-tile{animation:mmdeal .42s cubic-bezier(.2,.9,.3,1.12) var(--d,0ms) backwards}
@keyframes mmdeal{from{translate:0 -34px;scale:.72;opacity:0}to{translate:0 0;scale:1;opacity:1}}
.mm-grid.wave .mm-tile{animation:mmwave .7s ease-in-out var(--d,0ms) 1}
@keyframes mmwave{40%{translate:0 -12px;scale:1.07}}
.mm-tile.miss .mm-front{border-color:#fb7185;box-shadow:0 4px 0 #9f1239,0 0 0 3px rgba(251,113,133,.5),0 0 18px 3px rgba(251,113,133,.45)}
@media(prefers-reduced-motion:reduce){.mm-in{transition:none}.mm-tile.pop .mm-in,.mm-tile.miss .mm-front{animation:none}}
html[data-theme=light] .msg.ok{color:#047857}html[data-theme=light] .msg.bad{color:#be123c}html[data-theme=light] .msg.hint{color:#b45309}
html[data-theme=light] .btn.danger{background:var(--rose);color:#fff}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.grid2{grid-template-columns:1fr}}

/* ---- PLAY-FIRST (1.43.0): PHONE = FULL SCREEN. A phone, a small window or a touch tablet gets the same play-first rules as real full screen
        (these are copies of the html.gic-fs rules above, scoped to html.gic-phone; to change the look, change both). ---- */
html.gic-phone body .mm-app{max-width:none;padding:0 10px 8px}
html.gic-phone body .layout{grid-template-columns:minmax(0,1fr)}
html.gic-phone body .mm-stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px}
html.gic-phone body .mm-grid{width:100%}


/* ---- 1.43.2: phone held sideways. The top row would eat a tenth of a short screen, so the stats go in a column on the left and the New game button
        in a column on the right (under the "..." button). The board takes the whole height. ---- */
@media (orientation:landscape) and (max-height:560px){
  html.gic-phone body .mm-app{padding:0 4px}
  html.gic-phone body #stage.mm-stage{padding:4px 52px 4px 104px}
  html.gic-phone body .mm-stage .stage-head{display:contents}
  html.gic-phone body .mm-stage .mm-stats{position:fixed;left:6px;top:6px;bottom:6px;width:92px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;margin:0;padding:0;z-index:5}
  html.gic-phone body .mm-stage .mm-stats .status{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border-radius:12px;font-size:1rem;line-height:1.15;text-align:center;white-space:normal}
  html.gic-phone body .mm-stage .stage-head>.row:last-child{position:fixed;right:6px;top:calc(var(--ph-btn) + 12px);display:flex;flex-direction:column;gap:6px;margin:0;z-index:5}
  html.gic-phone body .mm-stage .msg{position:fixed;left:104px;right:52px;bottom:6px;margin:0;pointer-events:none;z-index:4;text-shadow:0 1px 4px rgba(0,0,0,.7)}
  html.gic-phone body .mm-stage .msg:empty{display:none}
}
@media (orientation:landscape) and (max-height:560px){
  html.gic-phone body .mm-stage .mm-stats .status{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
  html.gic-phone body .mm-stage .mm-stats .status.ok{background:rgba(16,185,129,.22);border-color:rgba(16,185,129,.5)}
}

/* 1.43.19: sideways: tighter gaps, bigger tiles (the tile shape may get wider so the board fills the space between the stat boxes and the buttons) */
@media (orientation:landscape) and (max-height:560px){
  html.gic-phone body .mm-grid{gap:6px}
  html.gic-phone body .mm-board{padding:8px}
}