*{box-sizing:border-box} :root{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:#3a3350;background:#d7e2c9}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at top,#f5f5e7,#d7e2c9);user-select:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #a568ba;outline-offset:3px}#app{position:relative;width:min(100%,500px);height:100dvh;min-height:580px;max-height:950px;padding:16px 18px 20px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 20% 30%,#f2f4e4,#dce7cd)}header{display:flex;align-items:center;justify-content:space-between;gap:10px}.icon{width:44px;height:44px;border:2px solid #3a3350;border-radius:50%;background:#fffaf0;font-size:24px;box-shadow:0 3px #3a335022}.brand{font-size:24px;font-weight:950;letter-spacing:-1px}.brand span{font-size:11px;letter-spacing:2px;background:#3a3350;color:#fffaf0;padding:5px 7px;border-radius:7px;vertical-align:middle;margin-left:4px}.status{display:flex;justify-content:space-between;margin-top:21px;font-size:11px;font-weight:850;letter-spacing:1.5px}.meter{height:5px;background:#3a335015;border-radius:5px;margin-top:9px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:#6d9c75;transition:width .3s}#instruction{text-align:center;font-size:13px;color:#686479;margin:14px 0 2px}#field{position:relative;flex:1;min-height:220px;margin:2px 0 10px;background-image:radial-gradient(#89a77444 1px,transparent 1px);background-size:34px 34px;border-radius:30px}.tile{position:absolute;width:18%;height:15%;padding:0;border:2px solid #645a77;border-radius:18px;background:#fffaf0;box-shadow:0 4px 0 #4d43573b;transition:filter .15s,transform .15s,opacity .15s;display:grid;place-items:center}.tile img{width:120%;height:120%;object-fit:contain;pointer-events:none;max-height:100px}.tile:disabled{filter:brightness(.77) saturate(.55);cursor:default}.tile:not(:disabled):hover{transform:translateY(-3px);background:#fffdf6}.tile:not(:disabled):active{transform:scale(.94)}footer{flex:none;padding-top:4px}.tray-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.4px;font-weight:850;margin:0 5px 9px}#tray{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:9px 7px;background:#c6ceb6;border:2px solid #a5b294;border-radius:17px;box-shadow:inset 0 3px 0 #3a335015}.slot{aspect-ratio:.84;border-radius:9px;background:#ecf0df;box-shadow:inset 0 2px 1px #3a335012;display:grid;place-items:center;min-width:0}.slot img{width:135%;height:100%;object-fit:contain;pointer-events:none;animation:land .18s ease-out}.slot.match{background:#ffe5a0;animation:clear .24s ease-in forwards}#note{text-align:center;font-size:11px;color:#686479;margin:10px 0 0;min-height:16px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#3a335044;backdrop-filter:blur(6px);padding:22px;z-index:10}.overlay[hidden]{display:none}article{width:100%;max-width:370px;background:#fffaf0;border:3px solid #3a3350;border-radius:30px;padding:30px 26px 24px;text-align:center;box-shadow:0 12px #3a335026}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:850;color:#8d7352}h1{font-size:52px;line-height:.95;letter-spacing:-2px;margin:20px 0 0;text-shadow:0 3px #e9b45f}h1 em{font-style:normal;font-size:42px;color:#9672b0;letter-spacing:-1px;text-shadow:none}#mascots{display:flex;justify-content:center;margin:5px 0;height:90px}#mascots img{width:90px;margin:0 -9px;object-fit:contain}#message{font-size:14px;line-height:1.6;color:#686077}.primary,.secondary{display:block;width:100%;border:2px solid #3a3350;border-radius:14px;font-weight:850;padding:13px;margin-top:15px;background:#efc16d;box-shadow:0 4px #3a335023}.secondary{background:transparent;box-shadow:none;margin-top:10px;padding:10px}.secondary[hidden]{display:none}.fine{font-size:10px;line-height:1.6;color:#817988;margin:18px 0 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes land{from{transform:translateY(-14px) scale(.8)}to{transform:none}}@keyframes clear{to{transform:scale(.65);opacity:0}}@media(min-width:600px){#app{height:min(94dvh,900px);border:2px solid #b6c3a8;border-radius:30px;box-shadow:0 25px 60px #35433322}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* Only genuinely covered tiles dim; animation locks do not flash the whole field. */
.tile:disabled{filter:none}.tile.covered{filter:brightness(.77) saturate(.55)}
.slot img{animation:none}
.flying-poteto{position:fixed;z-index:100;pointer-events:none;object-fit:contain;transform-origin:0 0;will-change:transform}
/* Explicitly hide collected tiles: .tile's display:grid overrides the browser's hidden rule. */
.tile[hidden]{display:none}
/* Slot geometry is independent of image intrinsic size. */
.slot{position:relative;min-height:0;align-self:start}
.slot img{position:absolute;left:50%;top:0;transform:translateX(-50%);width:135%;height:100%;max-width:none;object-fit:contain}
/* Keep the complete character inside its card at every iframe aspect ratio. */
.tile{overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-width:0;min-height:0;object-fit:contain;display:block}

/* Preserve the accepted portrait composition in every host iframe. */
html,body{width:100%;height:100%;overflow:hidden}
#app{position:fixed;left:50%;top:50%;width:500px;height:900px;min-height:0;max-height:none;padding:16px 18px 20px;border:2px solid #b6c3a8;border-radius:30px;transform:translate(-50%,-50%) scale(var(--game-scale,1));transform-origin:center}
.tile img{inset:auto;left:50%;top:50%;width:120%;height:120%;transform:translate(-50%,-50%)}