:root{--primary: #76c5b3;--primaryHover: #70c9b4;--primaryShadow: #2d6155;--secondary: #8accf0;--pagePadding: 24px;--actionsHeight: 96px;--footerHeight: 64px;--background: #f4f4f4;--text: #222}[data-theme=dark]{--primary: #558a78;--primaryHover: #457464;--primaryShadow: #1e3a33;--secondary: #4d64a5;--background: #4b5258;--text: #f4f4f4}@media (max-width: 768px){:root{--pagePadding: 16px;--actionsHeight: 64px;--footerHeight: 32px}}@font-face{font-family:Readson;src:url(/fonts/readson.woff2) format("woff2");font-weight:400;font-style:normal}:root,button{font-family:Readson,sans-serif}h1,h2,p{margin:0;font-weight:400;text-align:center}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] p{text-shadow:3px 3px 2px rgba(0,0,0,.2)}h1{font-size:64px}h2{font-size:24px;margin-bottom:16px}@media (max-width: 768px){h1{font-size:32px}h2{font-size:18px}}@keyframes match{0%{transform:rotateY(180deg) scale(1);z-index:2}50%{transform:rotateY(180deg) scale(1.3);z-index:2}to{transform:rotateY(180deg) scale(1);z-index:2}}@keyframes shine{0%{background-position:-100% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:.8;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}*{box-sizing:border-box}body{margin:0;max-height:100dvh;max-width:100vw;background-color:var(--background);color:var(--text);-webkit-user-select:none;user-select:none}#root{min-height:100dvh;display:flex;flex-direction:column;align-items:center}#root main{display:flex;flex:1;padding:var(--pagePadding);align-items:center;flex-direction:column}.actions{height:var(--actionsHeight);display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}.theme-transition{transition:background-color .15s ease,color .15s ease}.button{background-color:var(--primaryShadow);color:var(--text);-webkit-user-select:none;user-select:none;border:none;border-radius:12px;padding:0;outline-offset:4px;-webkit-tap-highlight-color:transparent}.button .front{transition:all .15s ease;display:block;padding:12px 24px;border-radius:12px;font-size:24px;background-color:var(--primary);transform:translateY(-6px)}.button:hover:not(:disabled) .front{cursor:pointer;background-color:var(--primaryHover)}.button:active:not(:disabled) .front{transform:translateY(0)}@media (max-width: 768px){.button{font-size:16px}}.board{--boardHeight: calc( 100dvh - var(--actionsHeight) - var(--footerHeight) - var(--pagePadding) * 2 - 16px );--boardPaddingY: 96px;--boardGap: 24px;position:relative;display:grid;gap:var(--boardGap);grid-template-columns:repeat(var(--tileGridX),1fr)}.board.s{--tileGridX: 4;--tileGridY: 3}.board.m{--boardGap: 16px;--tileGridX: 8;--tileGridY: 4}.board.l{--boardGap: 12px;--tileGridX: 10;--tileGridY: 5}.board .tile{--tileHeight: calc( (var(--boardHeight) - (var(--boardGap) * (var(--tileGridY) - 1))) / var(--tileGridY) );--tileWidth: calc( (100vw - var(--boardPaddingY) * 2 - (var(--boardGap) * (var(--tileGridX) - 1))) / var(--tileGridX) );--size: min(var(--tileHeight), var(--tileWidth));--fontSize: calc(var(--size) * .6);height:var(--size);width:var(--size);font-size:var(--fontSize)}@media (orientation: portrait){.board{--boardPaddingY: 16px}.board.s{--boardGap: 12px;--tileGridX: 3;--tileGridY: 4}.board.m{--boardGap: 4px;--tileGridX: 4;--tileGridY: 8}.board.l{--boardGap: 4px;--tileGridX: 5;--tileGridY: 10}}footer{display:flex;align-items:center;justify-content:center;width:100vw;height:var(--footerHeight)}@media (max-width: 768px){footer p{font-size:10px}}.settings-section{padding:24px}.settings-section .tiles{display:flex;align-items:center;justify-content:center;gap:24px}.settings-section .tiles .tile{height:192px;width:192px;transition:all .15s ease-in-out}.settings-section .tiles .tile.selected{background-color:var(--primary);font-size:96px}.settings-section .tiles .tile.selected.board-size{font-size:36px}.settings-section .tiles .tile.inactive{filter:grayscale(100%);font-size:72px}.settings-section .tiles .tile.inactive.board-size{font-size:24px}@media (max-width: 768px){.settings-section .tiles{flex-wrap:wrap;gap:8px}.settings-section .tiles .tile{height:96px;width:96px}.settings-section .tiles .tile.selected{font-size:48px}.settings-section .tiles .tile.selected.board-size{font-size:18px}.settings-section .tiles .tile.inactive{font-size:36px}.settings-section .tiles .tile.inactive.board-size{font-size:14px}}.tile{position:relative;cursor:pointer;border-radius:16px;box-shadow:0 2px 8px -1px #0000004d;color:var(--text);display:flex;justify-content:center;align-items:center;background-color:var(--secondary);transform-style:preserve-3d;transition:transform .4s cubic-bezier(.455,.03,.515,.955);-webkit-tap-highlight-color:transparent}.tile.flipped{transform:rotateY(180deg)}.tile.matched{background-color:var(--primary);animation:match .4s cubic-bezier(.455,.03,.515,.955)}.tile .front,.tile .back{position:absolute;backface-visibility:hidden}.tile .back{transform:rotateY(180deg)}.win-animation{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;z-index:9999;background-color:#0009}.win-animation .win-text{font-size:min(15dvh,15vw);background:linear-gradient(90deg,gold,#fff,gold);background-size:200% auto;color:transparent;-webkit-background-clip:text;background-clip:text;animation:shine 2s linear infinite;text-align:center}.win-animation .trophy{font-size:min(20dvh,20vw);animation:pulse 1.2s infinite}
