.fragment-shell{--paper:#f2e5c6;--brass:#d4b16d;--ink:#eaf4f2;min-height:100svh;min-height:100dvh;color:var(--ink);background:radial-gradient(at top,#345963,#142f39 80%);justify-content:center;display:flex}.fragment-game{width:100%;max-width:540px;height:100svh;height:100dvh;padding:max(10px,env(safe-area-inset-top)) 16px max(8px,env(safe-area-inset-bottom));background:linear-gradient(160deg,#ffffff03,#00000012);flex-direction:column;gap:8px;display:flex;overflow:hidden}.fragment-game button,.fragment-game a{-webkit-tap-highlight-color:transparent}:is(.fragment-game button:focus-visible,.fragment-game a:focus-visible){outline-offset:3px;outline:3px solid #ffe49b}.fragment-game button{cursor:pointer}.fragment-game button:disabled{cursor:default}.fragment-header{flex:none;align-items:center;gap:8px;height:50px;display:flex}.fragment-header>div:not(.fragment-tools){flex:1;min-width:0}.fragment-header p{letter-spacing:.13em;color:#e3c588;margin:0 0 3px;font:600 11px Georgia,serif}.fragment-header h1{letter-spacing:.06em;margin:0;font-size:20px;font-weight:600}.fragment-header a,.fragment-tools button{color:#ead2a0;background:linear-gradient(#ffffff15,#00000012);border:1px solid #75919677;border-radius:12px;place-items:center;width:42px;height:44px;display:grid;box-shadow:inset 0 1px #ffffff20,0 2px 3px #0003}.fragment-tools{gap:5px;display:flex}.fragment-tools button:disabled{opacity:.35}.fragment-header svg{width:21px;height:21px}.fragment-progress{color:#c8d7d5;flex:none;justify-content:space-between;align-items:center;height:22px;padding:0 4px;font-size:13px;display:flex}.fragment-progress span:last-child{color:#e9cb8f;align-items:center;gap:6px;display:flex}.fragment-board-area{flex:1;place-items:center;min-height:0;display:grid;container-type:size}.fragment-board{aspect-ratio:100/118;isolation:isolate;background:radial-gradient(#416875,#294f5e);border-radius:17px;width:min(100cqw,84.7458cqh);position:relative;box-shadow:inset 0 0 18px #061f3380,0 0 0 1px #9f805755,0 6px 12px #071c2677}.painting-fragment{aspect-ratio:1;transform-origin:50%;background:#ede2c8;border:3px solid #dbc795;border-radius:3px;padding:0;transition:filter .2s;display:block;position:absolute;box-shadow:1px 3px #b5a27f,3px 7px 8px #061b32b0,inset 0 0 0 1px #fff}.fragment-paint{filter:saturate(.82);background-image:url(/atelier-kingfisher.png);background-size:300% 300%;position:absolute;inset:0}.fragment-tint{background:linear-gradient(transparent 28%,color-mix(in srgb,var(--gem),transparent 45%) 55%,var(--gem));opacity:.87;position:absolute;inset:0}.painting-fragment.covered{filter:brightness(.68)saturate(.75)}.painting-fragment.accessible{border-color:#fff0c6}.painting-fragment.matching{border-color:#ffe49d}.painting-fragment.aimed{outline-offset:3px;outline:3px solid #ffe098;box-shadow:1px 3px #b5a27f,3px 7px 8px #061b32b0,0 0 15px #ffe2a466}.painting-fragment:disabled{opacity:1}.painting-fragment.collecting{pointer-events:none}.fragment-sockets{justify-content:center;align-items:center;gap:13%;display:flex;position:absolute;inset:44% 11% 10%}.fragment-socket{aspect-ratio:1;background:var(--gem);border:2px solid #f8de9c;border-radius:25%;width:37%;display:block;position:relative;box-shadow:inset 0 3px 6px #071d5290,0 2px 2px #07243180}.fragment-socket.filled{background:linear-gradient(135deg,#fff8 0 19%,transparent 20% 69%,#0004 70%),var(--gem);border-color:#fff5ba;box-shadow:inset 0 0 0 1px #fff7,0 3px 5px #0829399a}.fragment-socket.filled:after{content:"";background:linear-gradient(145deg,#fff3,#0000);border:1px solid #fff6;position:absolute;inset:18%}.fragment-socket.socket-aimed{outline-offset:3px;outline:2px solid #fff8d0}.fragment-status{color:#f3e1b9;text-align:center;flex-wrap:wrap;flex:none;justify-content:center;align-items:center;gap:2px 7px;min-height:44px;font-size:14px;line-height:1.3;display:flex}.fragment-status small{color:#c3d2d2;width:100%;min-height:15px;font-size:12px;display:block}.fragment-status button{color:#203b45;background:#e8cb8c;border-radius:9px;min-height:36px;padding:7px 12px}.fragment-waiting{background:linear-gradient(#9a764f,#735435);border:1px solid #c49b66;border-radius:13px;flex:none;justify-content:center;align-items:center;gap:20px;height:58px;padding:5px 16px;display:flex;box-shadow:inset 0 1px #f7ddb655,0 3px #423222}.fragment-waiting button{touch-action:none;background:#274652;border:0;border-radius:10px;place-items:center;width:68px;height:46px;padding:0;display:grid;box-shadow:inset 0 3px 5px #071a2599,0 1px #d9bb8177}.fragment-waiting svg{color:#a0afa766;width:21px}.fragment-waiting.receiving{outline-offset:2px;outline:2px solid #ffe39b}.fragment-waiting .fragment-gem{width:35px;height:35px}.fragment-stock{background:linear-gradient(#986e49,#65492f);border:1px solid #b99768;border-radius:14px;flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:103px;padding:7px;display:grid;box-shadow:inset 0 1px #f5dbb366,0 4px #443321}.fragment-pile{touch-action:none;background:#173943bb;border:0;border-radius:10px;min-width:0;position:relative;box-shadow:inset 0 3px 6px #10242c99}.fragment-pile.selected{outline-offset:1px;outline:2px solid #ffe5a1}.fragment-stack{border-radius:9px;position:absolute;inset:5px;overflow:hidden}.fragment-gem{background:linear-gradient(135deg,#fff9 0 18%,#ffffff10 19% 69%,#0004 70%),var(--gem);border:2px solid color-mix(in srgb,var(--gem),white 36%);border-radius:26%;display:block;position:relative;box-shadow:inset 0 1px 1px #fff8,inset 0 -3px #0003,0 3px 5px #0005}.fragment-gem:after{content:"";background:linear-gradient(140deg,#fff4,#0000);border:1px solid #fff5;border-radius:18%;position:absolute;inset:16%}.fragment-stack .fragment-gem{bottom:calc(2px + var(--depth) * 10px);width:48px;height:45px;filter:brightness(calc(1 - var(--depth) * .1));position:absolute;left:50%;transform:translate(-50%)}.fragment-footer{color:#9db6ba;flex:none;justify-content:space-between;align-items:center;min-height:22px;font-size:12px;display:flex}.fragment-footer a{color:#cbdbdc;align-items:center;min-height:24px;text-decoration:none;display:flex}.fragment-guide{z-index:80;pointer-events:none;width:100vw;height:100vh;position:fixed;inset:0;overflow:visible}.fragment-guide line{stroke:#fbe3a1;stroke-width:2.5px;stroke-dasharray:3 7;opacity:.85}.fragment-guide circle{fill:none;stroke:#fff6cf;stroke-width:2.5px}.painting-assembly{aspect-ratio:1;background:linear-gradient(130deg,#af8153,#705133);border:1px solid #d3b684;padding:8px;position:absolute;top:12%;left:5%;right:5%;box-shadow:0 5px #423226,0 10px 18px #051d3080}.painting-assembled-grid{aspect-ratio:1;background:#efe4c6;grid-template-columns:repeat(3,1fr);display:grid;position:relative;overflow:hidden}.painting-assembled-grid>span{aspect-ratio:1;animation:fragment-assemble .55s var(--arrival) cubic-bezier(.2,.7,.3,1) both;background-image:url(/atelier-kingfisher.png);background-size:300% 300%}.painting-assembled-grid>img{opacity:0;width:100%;height:100%;animation:.7s 1s forwards fragment-art-reveal;position:absolute;inset:0}.painting-assembly:after{content:"";pointer-events:none;background:linear-gradient(120deg,#0000 40%,#fff5 50%,#0000 60%);animation:1s 1.2s both fragment-finish-glint;position:absolute;inset:0}@keyframes fragment-assemble{0%{transform:translate(var(--dx),var(--dy)) scale(.7);opacity:0}to{opacity:1;transform:translate(0)scale(1)}}@keyframes fragment-art-reveal{to{opacity:1}}@keyframes fragment-finish-glint{0%{opacity:0;transform:translate(-20%)}40%{opacity:1}to{opacity:0;transform:translate(20%)}}@media (max-height:700px){.fragment-game{gap:5px;padding-top:7px}.fragment-header{height:44px}.fragment-header h1{font-size:18px}.fragment-progress{height:18px}.fragment-stock{height:87px}.fragment-stack .fragment-gem{width:44px;height:41px;bottom:calc(1px + var(--depth) * 8px)}.fragment-waiting{height:51px}.fragment-waiting button{height:41px}.fragment-status{min-height:39px;font-size:13px}}@media (max-height:540px){.fragment-game{height:auto;min-height:100dvh;overflow:visible}.fragment-board-area{flex:none;height:300px}}@media (prefers-reduced-motion:reduce){.painting-assembled-grid>span{animation:none}.painting-assembled-grid>img{opacity:1;animation:none}.painting-assembly:after{display:none}}