*{box-sizing:border-box} :root{font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;color:#705d64;background:#fff8f2;font-synthesis:none}body{margin:0;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;color:inherit}button:focus-visible{outline:3px solid #638eae;outline-offset:3px}button:active{transform:scale(.97)}#app{height:100svh;height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));max-width:480px;margin:auto;display:flex;flex-direction:column}body{background:radial-gradient(ellipse at 0% 20%,#ffe7ef,transparent 55%),radial-gradient(ellipse at 100% 90%,#dff1f5,transparent 55%),#fff8f2}.home,.result,.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;text-align:center}.eyebrow{font-size:11px;letter-spacing:.22em;color:#9c8790;font-weight:700}h1{font-size:30px;line-height:1.5;margin:0;font-weight:800;letter-spacing:.05em}h1 small{font-size:22px;display:block}p{margin:0;font-size:13px;line-height:1.8}.portrait{width:min(60vw,230px);height:min(29dvh,250px);object-fit:cover;border:7px solid white;border-radius:44% 44% 35% 35%;box-shadow:0 12px 30px #b989a322;transform:rotate(-3deg)}.primary,.secondary{min-height:48px;width:100%;border-radius:18px;padding:12px 20px;font-weight:700}.primary{background:#efa9bf;color:#563e49;box-shadow:0 5px 0 #da91a7}.secondary{background:#fff9;border:1px solid #e7d6d9}.actions{width:min(100%,300px);display:grid;gap:12px}.online{display:grid;grid-template-columns:1fr 1fr;gap:10px}.online button{font-size:13px;background:#e3f1f3}.online small{display:block;font-size:10px;margin-top:4px;font-weight:400}.footnote{font-size:11px;color:#9c8790}header{display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px}header h2{font-size:15px;margin:0}#settings{font-size:26px;background:white;border-radius:14px;min-width:44px;min-height:44px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 12px;flex:none}.stat{background:#fff9;border:1px solid #fff;border-radius:16px;text-align:center;padding:8px 4px}.stat small{display:block;font-size:10px;color:#9b858f;margin-bottom:3px}.stat strong{font-size:18px;font-variant-numeric:tabular-nums}.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;width:100%;min-height:0;flex:1;max-height:calc((100vw - 32px) * 1.22);align-self:center}.slot{position:relative;min-height:0;min-width:0;display:grid;place-items:center;perspective:700px}.ghost{position:absolute;opacity:.14;font-size:25px}.card{padding:0;width:100%;height:100%;position:relative;background:transparent;border-radius:11px;transition:opacity .4s,transform .4s}.card-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.65,.3,1)}.card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid white;border-radius:10px;overflow:hidden;background:#e7cfde;box-shadow:0 2px 5px #aa849522}.face img{width:100%;height:100%;object-fit:cover;display:block}.front{transform:rotateY(180deg)}.back:after{content:'✦';position:absolute;bottom:1px;right:3px;color:white;font-size:12px}.slot:nth-child(3n) .face{border-color:#c4e3e9}.slot:nth-child(3n + 1) .face{border-color:#f2c0d0}.card.matched{opacity:0;transform:translateY(-8px) scale(.9);pointer-events:none}.burst{position:absolute;font-size:28px;pointer-events:none;animation:pop .85s both}.game-note{text-align:center;font-size:11px;color:#a18c95;margin-top:10px;flex:none}.countdown{position:fixed;inset:0;display:grid;place-items:center;background:#fff8f2c9;z-index:5;font-size:70px;font-weight:800;color:#c67998;pointer-events:all}.countdown span{animation:pop .7s both}.loading .paws{font-size:30px;display:flex;gap:14px}.paws span{animation:walk 1s infinite}.paws span:nth-child(2){animation-delay:.2s}.paws span:nth-child(3){animation-delay:.4s}progress{width:230px;accent-color:#e99db7;height:12px}.result .results{background:#fff9;border:1px solid white;border-radius:22px;padding:18px;width:min(100%,300px);display:grid;gap:12px}.results div{display:flex;justify-content:space-between;font-size:13px}.results strong{font-size:18px}dialog{border:1px solid white;border-radius:24px;padding:24px;color:#705d64;background:#fff8f2;width:min(88vw,340px);box-shadow:0 15px 60px #705d6433}dialog::backdrop{background:#705d6466}dialog h2{font-size:20px;margin:0 0 20px}dialog button{margin-top:12px}dialog .toggle{display:flex;align-items:center;justify-content:space-between;min-height:48px;width:100%;border-radius:12px;background:#fff;padding:10px}dialog .toggle span{background:#cce6e8;border-radius:20px;padding:5px 12px}.landscape{display:none}.landscape span{font-size:44px}@media(orientation:landscape) and (max-height:600px){.landscape{position:fixed;inset:0;background:#fff8f2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;gap:15px}dialog{visibility:hidden}}@media(max-height:650px){#app{padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:calc(5px + env(safe-area-inset-bottom))}.stats{margin:5px 0 7px}.stat{padding:5px}.game-note{margin-top:5px}.home,.result{gap:10px}h1{font-size:25px}.portrait{height:24dvh}.actions{gap:9px}}@keyframes pop{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.2)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}@keyframes walk{50%{transform:translateY(-10px);opacity:.4}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


#players{grid-template-columns:repeat(auto-fit,minmax(75px,1fr));font-size:12px}#online-note{margin:4px 0 8px}#controls:empty{display:none}#controls{align-self:center;margin-bottom:12px}form{display:grid;gap:16px;width:min(100%,300px)}input{display:block;width:100%;font:inherit;padding:12px;border:1px solid #e7d6d9;border-radius:12px;margin-top:8px}#online-board:empty{display:none}
