:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#2a1730;background-color:#fff0f6;--bg: #fff0f6;--bg2: #f5e9ff;--fg: #2a1730;--muted: rgba(42, 23, 48, .72);--card: rgba(255, 255, 255, .72);--card2: rgba(255, 255, 255, .58);--border: rgba(255, 77, 157, .22);--shadow: 0 14px 34px rgba(255, 77, 157, .14);--accent: #ff4d9d;--accent2: #a855f7;--danger: #ff5c7a;--ring: rgba(255, 77, 157, .42);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}a{font-weight:500;color:var(--accent2);text-decoration:inherit}a:hover{color:var(--accent)}body{margin:0;min-width:320px;min-height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;color:var(--fg);background:radial-gradient(900px 520px at 10% 12%,rgba(255,77,157,.22),transparent 60%),radial-gradient(860px 540px at 90% 18%,rgba(168,85,247,.18),transparent 62%),radial-gradient(920px 560px at 50% 100%,rgba(255,183,213,.26),transparent 64%),linear-gradient(180deg,var(--bg),var(--bg2))}#root{height:100dvh}button{border-radius:14px;border:1px solid rgba(255,77,157,.22);padding:.62em 1.05em;font-size:.98em;font-weight:650;font-family:inherit;background:linear-gradient(135deg,#ffffffdb,#ffffff9e);color:var(--fg);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease;min-height:44px;box-shadow:0 8px 18px #ff4d9d1f}button:hover{border-color:#ff4d9d73;transform:translateY(-1px);filter:saturate(1.02)}button:focus,button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}input[type=file]{font-size:14px;color:var(--muted)}@media(prefers-reduced-motion:reduce){button{transition:none}}.app{height:100dvh;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px);display:flex;flex-direction:column;gap:12px;position:relative}.app:before{content:"";position:absolute;inset:-120px;pointer-events:none;background:radial-gradient(240px 180px at 18% 10%,rgba(255,77,157,.14),transparent 60%),radial-gradient(220px 160px at 82% 16%,rgba(168,85,247,.12),transparent 62%),radial-gradient(260px 200px at 50% 88%,rgba(255,183,213,.18),transparent 64%);filter:blur(.2px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:16px;background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);box-shadow:var(--shadow)}.brand .title{font-size:18px;font-weight:700}.brand .meta{margin-top:2px;font-size:12px;color:var(--muted)}.actions{display:flex;gap:8px}.layout{flex:1;min-height:0;display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:900px)and (orientation:landscape){.layout{grid-template-columns:1fr 360px}}.boardPanel{position:relative;min-height:0}.boardWrap{height:100%;display:grid;place-items:center}.board{width:min(92vw,72vh,900px);aspect-ratio:1 / 1;display:grid;border-radius:18px;overflow:hidden;background:var(--card2);border:1px solid var(--border);box-shadow:0 18px 44px #ff4d9d1f}@media(min-width:900px)and (orientation:landscape){.board{width:min(62vw,78vh,980px)}}.slot{position:relative;border-right:1px solid rgba(255,77,157,.12);border-bottom:1px solid rgba(255,77,157,.12)}.slot:nth-child(n){-webkit-user-select:none;user-select:none}.slot.hint{outline:3px solid rgba(255,77,157,.9);outline-offset:-3px}.slot.wrong{outline:3px solid rgba(255,92,122,.72);outline-offset:-3px}.piece{width:100%;height:100%}.piece.fixed{filter:saturate(.98)}.piece.movable{cursor:grab}.piece.movable:active{cursor:grabbing}.piece.hint{outline:3px solid rgba(255,77,157,.9);outline-offset:-3px}.emptyMark{width:100%;height:100%;background:linear-gradient(135deg,#ffffffa8,#ffffff52),radial-gradient(180px 140px at 50% 50%,rgba(255,77,157,.08),transparent 60%)}.boardOverlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;border-radius:18px;background:#ff4d9d24;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.boardOverlay.done{background:#ff4d9d2e}.doneCard{width:min(520px,90%);border-radius:16px;padding:16px;background:#ffffffc7;border:1px solid rgba(255,77,157,.22);box-shadow:0 18px 48px #ff4d9d2e}.doneCard.celebrate{animation:celebratePop .42s ease-out both;background:radial-gradient(240px 180px at 10% 0%,rgba(255,77,157,.18),transparent 60%),radial-gradient(240px 180px at 90% 10%,rgba(168,85,247,.16),transparent 62%),#ffffffd1}@keyframes celebratePop{0%{transform:translateY(8px) scale(.98);filter:saturate(.98)}60%{transform:translateY(-2px) scale(1.02);filter:saturate(1.06)}to{transform:translateY(0) scale(1);filter:saturate(1)}}@media(prefers-reduced-motion:reduce){.doneCard.celebrate{animation:none}}.doneTitle{font-size:20px;font-weight:800}.doneMeta{margin-top:6px;color:var(--muted)}.doneActions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.sidePanel{min-height:0;display:flex;flex-direction:column;gap:12px}.panelCard{border-radius:16px;padding:12px;background:var(--card);border:1px solid var(--border);box-shadow:0 12px 30px #ff4d9d1a}.row+.row{margin-top:10px}.fieldLabel{font-size:12px;color:var(--muted);margin-bottom:6px}.seg{display:flex;gap:8px}.seg button{flex:1;padding:10px 0;border-radius:12px}.segOn{border:1px solid transparent;background:linear-gradient(135deg,#ff4d9d2e,#a855f724) padding-box,linear-gradient(135deg,#ff4d9da6,#a855f78c) border-box}.segOff{opacity:.85}.file{width:100%}.thumbs{display:flex;gap:8px;overflow:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.thumb{width:64px;height:64px;border-radius:14px;padding:0;overflow:hidden;border:1px solid rgba(255,77,157,.22);flex:0 0 auto}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumbOn{outline:3px solid rgba(255,77,157,.9);outline-offset:0}.trayCard{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}.trayTitle{font-size:13px;color:var(--muted)}.tray{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-right:2px}@media(min-width:900px)and (orientation:landscape){.tray{grid-template-columns:repeat(3,minmax(0,1fr))}}.trayPiece{aspect-ratio:1 / 1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,77,157,.22);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.trayPiece.hint{outline:3px solid rgba(255,77,157,.9);outline-offset:0}.trayPiece.dragging{opacity:.2}.trayEmpty{grid-column:1 / -1;padding:10px;border-radius:12px;background:#ffffff8c;text-align:center;opacity:.85}.dragLayer{position:fixed;z-index:50;pointer-events:none;transform:translateZ(0)}.dragPiece{width:100%;height:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,77,157,.32);box-shadow:0 18px 44px #ff4d9d38}.modal{position:fixed;inset:0;z-index:80;background:#1a0a186b;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px);display:grid;place-items:center}.modalCard{width:min(960px,100%);height:min(760px,100%);border-radius:18px;overflow:hidden;background:#ffffffd6;border:1px solid rgba(255,77,157,.25);display:flex;flex-direction:column}.modalTop{padding:10px 12px;display:flex;align-items:center;justify-content:space-between}.modalTitle{font-weight:700}.modalBody{flex:1;min-height:0;display:grid;place-items:center;padding:12px}.previewImg{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;background:#ffffff8c}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translate(-50%);z-index:90;padding:10px 14px;border-radius:999px;background:#ffffffd6;border:1px solid rgba(255,77,157,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;box-shadow:0 18px 50px #ff4d9d2e}.fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:85}