/* Tile Match: a compact board and an earned pattern passport. */
body[data-sg-page="tile-match"] .wrap{max-width:1060px;padding:16px 18px 88px}
body[data-sg-page="tile-match"] .hero{padding:0 0 18px;text-align:left;position:relative}
body[data-sg-page="tile-match"] .hero h1{font-size:2.9rem;color:#123c5a;letter-spacing:-.035em}
.hero h1 span{color:#e6a22d;font-size:.85em;display:inline-block;transform:rotate(12deg)}
body[data-sg-page="tile-match"] .eyebrow{font-size:.68rem;letter-spacing:.09em;color:#895612;background:none;border:0;padding:0;margin:0 0 5px}
body[data-sg-page="tile-match"] .hero .sub{color:#38617a;font-size:.94rem}
.play-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:24px;align-items:start}
.play-stage{min-width:0;background:#fffdf4;border:2px solid #fff;border-radius:28px;padding:18px;box-shadow:0 10px 0 #72c8df33,0 14px 35px #26788a15}
body[data-sg-page="tile-match"] .controls{gap:6px;flex-wrap:nowrap;margin:0}
body[data-sg-page="tile-match"] .controls .pill{padding:8px 12px;min-height:44px;white-space:nowrap;font-size:.86rem;box-shadow:none;border-width:2px}
.controls [data-difficulty]{flex:1}.controls .reset,#pauseButton{width:44px;flex:none;font-size:1.4rem!important;padding:4px!important}
body[data-sg-page="tile-match"] .pill{color:#135779;text-decoration:none;min-height:44px}
body[data-sg-page="tile-match"] .pill.active{background:#087da8;color:white;border-color:#08648d}
body[data-sg-page="tile-match"] .pill:focus-visible,.collection button:focus-visible{outline:3px solid #7c3aed;outline-offset:3px}
body[data-sg-page="tile-match"] .hud{margin:12px 0 6px;gap:4px}
body[data-sg-page="tile-match"] .stat{border:0;background:transparent;box-shadow:none;padding:0 3px;line-height:1.25}
body[data-sg-page="tile-match"] .stat strong{font-size:1.2rem;color:#176481}
body[data-sg-page="tile-match"] .stat span{font-size:.6rem;color:#466273;letter-spacing:.02em;white-space:nowrap}
body[data-sg-page="tile-match"] .msg{font-size:.85rem;border:0;background:transparent;padding:8px 2px;margin:0;min-height:42px;color:#234c66;display:grid;place-items:center}
body[data-sg-page="tile-match"] .board-wrap{border:2px solid #e6c16b;background:linear-gradient(150deg,#f9e6a8,#faefd0 52%,#d5f3eb);padding:10px;border-radius:22px;margin:0;box-shadow:inset 0 0 0 4px #ffffff66}
body[data-sg-page="tile-match"] #board{gap:8px;max-width:480px}
body[data-sg-page="tile-match"] .tile-back{background:radial-gradient(circle at 25% 18%,#64d5e6,transparent 52%),linear-gradient(145deg,#0da3bf,#00769c);border:2px solid #8bdce6;box-shadow:inset 0 -5px 0 #006b8c40,0 3px 0 #94671524}
body[data-sg-page="tile-match"] .tile-back::before{border:1px solid #b3f6f099;border-radius:50%;inset:13%;transform:rotate(45deg)}
.tile-back::after{content:'';position:absolute;inset:25%;border:1px solid #c6fff6a0;transform:rotate(45deg)}
body[data-sg-page="tile-match"] .tile-front{border-width:2px}
body[data-sg-page="tile-match"] .tile.matched .tile-front{box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #16a085;border-color:#16a085}
.board-hint{font-size:.72rem;text-align:center;color:#40647b;margin:10px 0 0;font-weight:800}
.discovery{background:linear-gradient(155deg,#fffdf6,#ffffff);border:2px solid #fff;border-radius:28px;padding:20px;box-shadow:0 10px 0 #72c8df22;position:relative}
.discovery-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.discovery-heading strong{background:#e1f5eb;color:#1d664d;border-radius:20px;padding:5px 10px;font-size:.83rem;white-space:nowrap}
.discovery-art{height:162px;width:162px;margin:20px auto 16px;position:relative;transform:rotate(-5deg);padding:9px;background:#fff;border:1px solid #e8d4a4;border-radius:28px;box-shadow:0 7px 0 #c5a46122}
.discovery-art canvas{width:100%;height:100%;border-radius:20px}.art-seal{position:absolute;right:-13px;bottom:-7px;background:#ffc95d;border:4px solid #fff9ea;width:47px;height:47px;display:grid;place-items:center;border-radius:50%;font-size:1.7rem;color:#9f631d}
.discovery h2{font-size:1.2rem;line-height:1.15;margin:0 0 8px;color:#174c62}.discovery p{font-size:.91rem;line-height:1.5;color:#416477;margin:0 0 16px;font-weight:750}
.collection{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.collection button{border:2px solid #c2e1dc;min-width:44px;min-height:44px;aspect-ratio:1;background:#eaf4f0;border-radius:12px;padding:4px;color:#54776c;font-size:1.2rem;cursor:pointer}.collection button[disabled]{cursor:default;border-style:dashed}.collection button[aria-pressed="true"]{border-color:#077aa1;box-shadow:0 0 0 2px #b0e4ed}.collection canvas{display:block;width:100%;height:100%;border-radius:6px}.discovery .save-note{font-size:.69rem;margin:12px 0 0;color:#58717a}
body[data-sg-page="tile-match"] .overlay{z-index:1500;padding:12px;background:#0c354bb8}
body[data-sg-page="tile-match"] .overlay-card{max-width:470px;width:100%;max-height:calc(100dvh - 24px);overflow:auto;border:3px solid #efc963;padding:22px;margin:0;border-radius:28px}
body[data-sg-page="tile-match"] .overlay-emoji{font-size:2.4rem;color:#d69516;margin:0}
body[data-sg-page="tile-match"] .overlay-card h2{font-size:1.5rem;margin:5px 0 10px}
body[data-sg-page="tile-match"] .overlay-stats{color:#2d657b;line-height:1.4;font-size:.95rem}
.recall{background:#f2f8ef;border-radius:18px;padding:12px;margin:16px 0;color:#245845}.recall p{font-size:.85rem;margin:0 0 10px;font-weight:800}#recallChoices{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}#recallChoices .pill{padding:8px 12px;border-width:2px;font-size:.85rem}#recallFeedback{margin:10px 0 0;min-height:35px;font-size:.8rem}
.finish-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.finish-actions .pill{font-size:.85rem;padding:10px 13px;border-width:2px}.finish-actions a{display:grid;place-items:center}
body[data-sg-page="tile-match"] .guide{margin-top:28px}body[data-sg-page="tile-match"] .guide article{box-shadow:none;border:1px solid #c1e2ef}
@media(max-width:760px){
body[data-sg-page="tile-match"] .wrap{padding:10px 10px 84px}.play-layout{display:block}.play-stage{padding:10px;border-radius:21px}.discovery{margin-top:16px;padding:16px}.discovery-art{float:left;width:110px;height:110px;margin:15px 18px 16px 0}.discovery h2{margin-top:18px}.collection{clear:both;grid-template-columns:repeat(5,1fr)}.collection button{max-height:64px}.discovery .save-note{clear:both}
body[data-sg-page="tile-match"] .hero{padding:0 4px 10px}.hero .eyebrow{font-size:.56rem!important;letter-spacing:.065em!important}body[data-sg-page="tile-match"] .hero h1{font-size:1.85rem}body[data-sg-page="tile-match"] .hero .sub{font-size:.75rem;margin:4px 0 0}body[data-sg-page="tile-match"] .controls .pill{padding:7px 6px;font-size:.76rem}body[data-sg-page="tile-match"] .hud{margin:8px 0 0}body[data-sg-page="tile-match"] .stat strong{font-size:1.05rem}body[data-sg-page="tile-match"] .stat span{font-size:.52rem}body[data-sg-page="tile-match"] .msg{font-size:.76rem;min-height:38px;padding:5px 1px}body[data-sg-page="tile-match"] .board-wrap{padding:7px;border-radius:16px}body[data-sg-page="tile-match"] #board{gap:5px}.board-hint{font-size:.64rem;margin:7px 0 0}.tile-face{border-radius:10px!important}.tile-back::before{inset:15%!important}
}
@media(max-height:650px) and (max-width:760px){body[data-sg-page="tile-match"] .hero .sub{display:none}body[data-sg-page="tile-match"] .hero{padding-bottom:6px}body[data-sg-page="tile-match"] .hero h1{font-size:1.5rem}body[data-sg-page="tile-match"] .hero .eyebrow{display:none}body[data-sg-page="tile-match"] .play-stage{padding:8px}body[data-sg-page="tile-match"] .hud{margin-top:5px}body[data-sg-page="tile-match"] #board{max-width:260px}.board-hint{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.hero h1 span,.discovery-art{transform:none}.tile-inner{transition:none!important}}
html[data-sg-calm="true"] .tile-inner{transition:none!important}

/* Keep the finished artwork readable while its frame settles. */
body[data-sg-page="tile-match"] .overlay-card{animation:none;opacity:1;transform:none}
#recallCanvas{display:block;width:70px;height:70px;border-radius:14px;margin:0 auto 8px}
@media(max-height:650px){body[data-sg-page="tile-match"] .overlay-card{padding:13px}.recall{margin:10px 0;padding:10px}#recallCanvas{width:52px;height:52px}body[data-sg-page="tile-match"] .overlay-emoji{display:none}.finish-actions{gap:5px}}

body[data-sg-page="tile-match"] .overlay.show{animation:none;opacity:1}