:root{--ink:#20211f;--muted:#767873;--line:#d8d4c9;--accent:#1e63d5;--surface:#fffdf4;--bg:#dce6e3;--mono:"DM Mono",monospace;--sans:"Noto Sans SC",sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--sans)}button{font:inherit;cursor:pointer}.topbar{height:64px;padding:0 30px;border-bottom:1px solid #d7d2c4;background:#fffbed url('assets/pipi-kraft-cream.png') center/cover no-repeat;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:20}.logo{color:var(--ink);text-decoration:none;font:600 22px/1 var(--sans);letter-spacing:-1px;display:inline-flex;align-items:center;gap:6px}.logo img{width:34px;height:34px;object-fit:contain}.room{font:13px var(--sans);display:flex;align-items:center;gap:8px;color:#4c4e49}.room b{font:11px var(--mono);font-weight:500;color:var(--muted);border-left:1px solid var(--line);padding-left:8px}.online{width:7px;height:7px;background:#56a76d;border-radius:50%}.actions{justify-self:end;display:flex;gap:9px}.actions button,.hint{border:1px solid #ccc8bc;color:#363833;background:#fffdf4cc;border-radius:7px;padding:8px 13px;font-size:12px;transition:.15s ease}.actions button:hover,.hint:hover{border-color:#9ea09b;background:#fffdf4}.actions .invite{background:var(--ink);border-color:var(--ink);color:#fff}.play-area{height:calc(100vh - 64px);min-height:520px;position:relative;overflow:hidden;background:#dce6e3 url('assets/pipi-kraft-blue.png') center/cover no-repeat}.instruction{position:absolute;top:30px;left:50%;transform:translateX(-50%);margin:0;color:#5f6660;font-size:13px;z-index:3}.puzzle-board{position:absolute;width:min(50vw,500px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-47%);background:#ededeb;border:1px solid #d7d8d4;box-shadow:0 4px 14px #1718160d}.board-image,.reference-image{width:100%;height:100%;background-image:linear-gradient(#ffffffb8,#ffffffb8),url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=85');background-size:cover;background-position:center}.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6}.counter{position:absolute;bottom:31px;right:30px;color:#5f6660;font:12px var(--mono)}.counter strong{color:var(--ink);font-weight:500}.puzzle-piece{position:absolute;aspect-ratio:1;z-index:5;cursor:grab;touch-action:none;filter:drop-shadow(1px 2px 2px #20211f2b);transition:filter .16s ease}.puzzle-piece:active{cursor:grabbing;filter:drop-shadow(3px 7px 5px #20211f32)}.puzzle-piece svg{width:100%;height:100%;overflow:visible;display:block}.puzzle-piece.placed{cursor:default;filter:drop-shadow(.5px 1px 1px #20211f28)}.puzzle-piece.hint{filter:drop-shadow(0 0 7px #1e63d5);animation:blink .7s ease-in-out 2}@keyframes blink{50%{opacity:.45}}.reference-modal{display:none;position:fixed;z-index:30;width:min(75vw,550px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffdf4 url('assets/pipi-kraft-cream.png') center/cover;padding:14px;box-shadow:0 12px 35px #17181633}.reference-modal.open{display:block}.reference-modal button{position:absolute;right:-13px;top:-13px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:#fffdf4;font-size:21px;line-height:20px}.toast{position:fixed;z-index:40;left:50%;bottom:27px;transform:translate(-50%,100px);background:var(--ink);color:#fff;border-radius:7px;padding:9px 13px;font-size:13px;transition:transform .18s ease}.toast.show{transform:translate(-50%,0)}@media(max-width:750px){.topbar{padding:0 16px;grid-template-columns:1fr auto}.room{display:none}.actions button:first-child{display:none}.play-area{min-height:470px}.puzzle-board{width:min(66vw,380px);top:48%}.instruction{top:22px}.counter{right:17px;bottom:27px}.hint{bottom:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.board-image,.reference-image{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('assets/potala-palace.png')}
.memory-note{position:absolute;width:185px;z-index:8;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;color:#555a54}.memory-note span{font-size:11px;white-space:nowrap}.memory-note textarea{width:100%;min-height:28px;max-height:54px;resize:none;overflow:hidden;border:0;background:transparent;padding:4px 0;color:#292b28;font:13px/1.4 var(--sans);text-align:right;outline:none}@media(max-width:750px){.memory-note{width:150px}.memory-note span{display:none}}
.puzzle-board{border-color:#b7b9b3;box-shadow:inset 0 0 0 7px #fffdf1a8,inset 0 0 0 8px #b9b8ad88,0 4px 14px #1718160d;transition:box-shadow .16s ease,border-color .16s ease}.puzzle-board.receiving{border-color:#79867d;box-shadow:inset 0 0 0 7px #fffdf1d0,inset 0 0 0 9px #7d8c8288,0 4px 14px #17181616}.puzzle-piece.placed{cursor:grab}
.upload-trigger{display:inline-flex;align-items:center;gap:4px;border:1px solid #ccc8bc;color:#363833;background:#fffdf4cc;border-radius:7px;padding:7px 10px;font-size:12px;cursor:pointer}.upload-trigger:hover{background:#fffdf4;border-color:#9ea09b}.upload-trigger img{width:18px;height:18px;object-fit:contain}.upload-trigger input{display:none}.invite-modal{display:none;position:fixed;z-index:30;left:50%;top:50%;width:min(390px,calc(100vw - 40px));transform:translate(-50%,-50%);background:#fffdf4 url('assets/pipi-kraft-cream.png') center/cover;border:1px solid #d0cab9;padding:28px 30px 25px;text-align:center;box-shadow:0 12px 35px #17181633}.invite-modal.open{display:block}.invite-modal>img{width:76px;height:76px;object-fit:contain;margin:-10px auto 4px}.invite-modal h2{margin:0;font-size:19px;font-weight:600}.invite-modal p{margin:8px 0 18px;color:#696d66;font-size:13px}.modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#686860;font-size:22px;cursor:pointer}.share-link{display:flex;border:1px solid #c9c7bc;background:#fffdf8;text-align:left}.share-link input{min-width:0;flex:1;border:0;background:transparent;padding:10px;color:#676960;font:11px var(--mono);outline:none}.share-link button,.share-native{border:0;background:#20211f;color:#fff;padding:8px 12px;font-size:12px;cursor:pointer}.share-native{margin-top:9px;width:100%;background:#e9e5d8;color:#353631}.share-native:hover{background:#ded9ca}@media(max-width:750px){.upload-trigger{font-size:0;padding:7px}.upload-trigger img{width:22px;height:22px}.actions{gap:6px}.invite-modal{padding:25px 22px}}
.upload-trigger img{width:24px;height:24px}.reference-action{display:inline-flex!important;align-items:center;gap:4px}.reference-action img{width:16px;height:16px;object-fit:contain}.puzzle-board{background:#eee9dc;border:7px solid #f6f0e2;outline:1px solid #a6a89f;outline-offset:-9px;box-shadow:0 7px 0 #cfc9ba,0 9px 0 #f7f1e5,0 11px 18px #17181616}.puzzle-board .board-image{box-shadow:inset 0 0 0 1px #fffdf4a8}.memory-note{width:245px;min-height:38px;align-items:center;padding:4px 11px;background:#fffbed75;backdrop-filter:blur(3px);border:1px solid #fffbed9c;border-radius:7px;color:#4c534d;box-shadow:0 2px 6px #5d63581c}.memory-note span{font-size:11px}.memory-note textarea{min-height:26px;padding:2px 0;color:#363b36;font-size:12px;text-align:center}.memory-note textarea:focus{background:#fffbed42}@media(max-width:750px){.reference-action{font-size:0!important;padding:6px!important}.reference-action img{width:18px;height:18px}.memory-note{width:190px;padding:3px 8px}}
.puzzle-board{background:transparent;border:0;outline:0;box-shadow:0 2px 9px #1718161a}.puzzle-board .board-image{box-shadow:none}.hint{display:none}.hint-cat{position:absolute;left:50%;bottom:18px;width:56px;height:56px;object-fit:contain;z-index:14;cursor:grab;touch-action:none;filter:drop-shadow(0 2px 2px #31332f25)}.hint-cat:active{cursor:grabbing}@media(max-width:750px){.hint-cat{width:46px;height:46px;bottom:12px}}
.puzzle-piece.hint{display:block!important;filter:drop-shadow(0 0 9px #ef6d5a99)!important;animation:blink .7s ease-in-out infinite}.paw-mark{display:none;position:absolute;inset:19%;width:62%;height:62%;object-fit:contain;pointer-events:none}.puzzle-piece.hint .paw-mark{display:block;opacity:.76;filter:brightness(1.25) drop-shadow(0 0 4px #fff9e6) drop-shadow(0 0 10px #ef6d5acc);animation:paw-pop .24s ease-out both}@keyframes paw-pop{from{opacity:0;transform:scale(.65)}to{opacity:.76;transform:scale(1)}}.hint-cat{position:absolute;left:calc(50% - 36px);bottom:18px;width:56px;height:56px;object-fit:contain;z-index:14;cursor:grab;touch-action:none;filter:drop-shadow(0 2px 2px #31332f25)}.hint-label{position:absolute;left:calc(50% + 28px);bottom:38px;z-index:13;color:#59615a;font-size:11px;white-space:nowrap;pointer-events:none}.hint-cat:active{cursor:grabbing}@media(max-width:750px){.hint-cat{left:calc(50% - 31px);width:46px;height:46px;bottom:12px}.hint-label{left:calc(50% + 24px);bottom:29px}}
.memory-note{width:190px;min-height:28px;padding:0!important;background:transparent!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}.memory-note textarea{width:100%;min-height:28px;max-height:54px;padding:3px 0!important;background:transparent!important;color:#303530b8;font-size:13px;text-align:center}.memory-note textarea::placeholder{color:#3c423ca0}.memory-note textarea:focus{background:transparent!important}@media(max-width:750px){.memory-note{width:160px;padding:0!important}}
.actions .upload-trigger,.actions .reference-action,.actions .invite{font-family:var(--sans)!important;font-size:14px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important}.actions .upload-trigger,.actions .reference-action{min-height:42px}.actions .invite{min-height:42px}
.actions{align-items:center}.actions .upload-trigger,.actions .reference-action,.actions .invite{height:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap}.actions .upload-trigger{gap:7px;padding:0 14px!important}.actions .reference-action{gap:7px;padding:0 14px!important}.actions .invite{padding:0 15px!important}@media(max-width:750px){.topbar{height:auto;min-height:64px;padding:9px 12px;display:block}.topbar .logo,.topbar .room{display:none}.actions{width:100%;justify-content:center;gap:6px}.actions .upload-trigger,.actions .reference-action,.actions .invite{flex:1 1 0;min-width:0;padding:0 7px!important;font-size:13px!important}.actions .upload-trigger img,.actions .reference-action img{width:20px;height:20px}.play-area{height:calc(100vh - 62px);min-height:490px}.memory-note{z-index:16}.hint-cat,.hint-label{z-index:16}}
.memory-note{z-index:4!important}.memory-note textarea{position:relative;z-index:1}
.reference-action img{width:24px!important;height:24px!important}.reference-action.is-active{background:#fffdf4!important;border-color:#9ea09b!important;box-shadow:inset 0 0 0 1px #e5a62355}
@media(max-width:750px),(max-aspect-ratio:3/4){.hint-cat{left:50%;bottom:62px!important;transform:translateX(-50%)}.hint-label{left:50%!important;bottom:38px!important;transform:translateX(-50%);text-align:center}}
.topbar{background:#d84e72 url('../postcard-paper-rose-magenta-v1.png') center/cover no-repeat;border-bottom-color:rgba(20,42,54,.42)}.play-area{background:#8ab9c5 url('../postcard-paper-teal-v1.png') center/cover no-repeat}.logo{font-family:"Noto Serif SC",serif;letter-spacing:-.08em}.actions button,.upload-trigger{border-radius:0!important;border-color:#142a36aa!important}.actions .invite{background:#142a36!important;border-color:#142a36!important}.puzzle-board{box-shadow:0 4px 14px #142a3633}.hint-label{font-family:"DM Mono","Noto Serif SC",serif;color:#6d4029;text-shadow:0 1px 1px #f6e4c566}
@media (max-width:1050px) and (min-width:751px){.topbar{padding:0 18px}.room{font-size:12px}.actions{gap:6px}.actions .upload-trigger,.actions .reference-action,.actions .invite{height:40px!important;min-height:40px!important;padding:0 10px!important;font-size:13px!important}.actions .upload-trigger img,.actions .reference-action img{width:20px!important;height:20px!important}.puzzle-board{max-width:56vw}}
.puzzle-piece.hint{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;filter:none!important;animation:none!important}.puzzle-piece.hint .paw-mark{opacity:.78;animation:paw-blink .8s ease-in-out infinite!important}@keyframes paw-blink{50%{opacity:.25;transform:scale(.88)}}
.actions .upload-trigger,.actions .reference-action,.actions .invite{position:relative;isolation:isolate;overflow:hidden;border:1px solid #142a36!important;box-shadow:none!important;transition:background .16s ease}.actions .upload-trigger::before,.actions .reference-action::before,.actions .invite::before{content:"";position:absolute;z-index:-1;inset:5px;border:1px solid rgba(20,42,54,.24);pointer-events:none}.actions .upload-trigger::after,.actions .reference-action::after,.actions .invite::after{position:absolute;right:6px;top:5px;font:8px "DM Mono",monospace;letter-spacing:.06em;color:#142a36;opacity:.62}.actions .upload-trigger::after{content:"01"}.actions .reference-action::after{content:"02"}.actions .invite::after{content:"03";color:#fffbed;opacity:.72}.actions .invite{background:#142a36!important;color:#fffbed!important}.actions .invite::before{border-color:rgba(255,251,237,.45)}.actions .upload-trigger:hover,.actions .reference-action:hover{background:#fffbed!important}.actions .invite:hover{background:#203f50!important}.actions .upload-trigger:active,.actions .reference-action:active,.actions .invite:active{transform:none;box-shadow:none!important}
@media(max-width:750px){.actions .upload-trigger::before,.actions .reference-action::before,.actions .invite::before{display:none!important}.actions .upload-trigger::after,.actions .reference-action::after,.actions .invite::after{right:4px;top:3px;font-size:7px}}
.actions .upload-trigger::before,.actions .reference-action::before,.actions .invite::before{display:none!important}
.actions .upload-trigger::after,.actions .reference-action::after,.actions .invite::after{display:none!important}
.back-home{font-size:14px!important;letter-spacing:0!important;gap:8px!important}.back-arrow{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;font:16px/1 "DM Mono",monospace}@media(max-width:750px){.topbar .back-home{display:inline-flex!important;margin:0 0 8px 2px;font-size:13px!important}.topbar{padding-top:10px!important}.topbar .actions{justify-content:flex-start}.topbar .actions .upload-trigger,.topbar .actions .reference-action,.topbar .actions .invite{flex:0 1 auto;min-width:0}.back-arrow{width:19px;height:19px;font-size:14px}}
.topbar .back-home{display:inline-flex!important;color:#142a36!important;text-decoration:none}.topbar .room{color:#fffbed!important;font-weight:600;text-shadow:0 1px 0 rgba(20,42,54,.28)}.topbar .room b{color:#fffbed!important;border-left-color:rgba(255,251,237,.75)!important}