*{box-sizing:border-box}:root{--ink: #38245f;--muted: #9284aa;--panel: rgba(255, 255, 255, .82);--purple: #6e2ee8;--lilac: #e8d9ff;--gold: #ffb800;--cyan: #62d9ff;--game-width: min(390px, 100vw);--game-height: min(844px, 100dvh)}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:radial-gradient(circle at 50% 0%,#ffdcf0e6,#fff0 34%),linear-gradient(180deg,#ffeaf6,#eaf8ff 54%,#dcd7ff);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{position:relative;display:grid;place-items:center}button{border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.top-bar,.closet-panel,.toast{position:absolute;left:50%;transform:translate(-50%);z-index:5}.top-bar{top:max(28px,env(safe-area-inset-top));width:min(390px,calc(100vw - 24px));display:flex;align-items:center;justify-content:space-between;pointer-events:none}.top-bar>*{pointer-events:auto}.eyebrow{margin:0 0 3px;color:#b35cff;font-size:10px;font-weight:950;letter-spacing:.22em;text-transform:uppercase}h1{margin:0;color:var(--purple);font-size:24px;line-height:.96;letter-spacing:-.04em;text-shadow:0 2px 0 rgba(255,255,255,.85)}.coin-bar{display:flex;align-items:center;gap:7px;min-width:126px;padding:7px 8px;border:4px solid #ffcf3b;border-radius:999px;color:#773b12;background:#fff2b9;box-shadow:0 7px #ffb20033,inset 0 2px #ffffffb3;font-size:14px;font-weight:950}.coin-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e4e4ea;font-size:13px;box-shadow:inset 0 -2px #4138552e}.coin-value{flex:1}.coin-add{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;background:#ffaf10;font-size:20px;font-weight:950;line-height:1;box-shadow:inset 0 -2px #894a0038}.character-area{position:absolute;top:92px;left:50%;width:var(--game-width);height:var(--game-height);overflow:hidden;transform:translate(-50%);background:linear-gradient(180deg,#ffe7d2,#ffcbd4 36%,#f28bcc);box-shadow:0 26px 90px #5d3c8c1f}#stage{position:absolute;top:0;right:0;bottom:0;left:0}#stage canvas{width:100%!important;height:100%!important;display:block}.closet-panel{bottom:0;width:min(430px,calc(100vw - 20px));min-height:326px;padding:14px 14px 16px;border:4px solid rgba(240,214,255,.95);border-bottom:0;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#fffffff0,#fdf2ffdb),radial-gradient(circle at 20% 0%,rgba(255,255,255,.8),transparent 40%);box-shadow:0 -14px 44px #7c3aed2e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.category-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:58px;gap:8px;overflow-x:auto;padding:0 2px 10px;scrollbar-width:none;scroll-snap-type:x proximity}.category-tabs::-webkit-scrollbar,.item-grid::-webkit-scrollbar{display:none}.tab{display:grid;place-items:center;gap:3px;min-height:54px;border-radius:18px;color:#8f81a9;background:#ffffffc2;box-shadow:0 8px 16px #60468214,inset 0 -2px #e4d4f5e6;font-size:10px;font-weight:950;scroll-snap-align:start}.tab-icon{font-size:17px;line-height:1}.tab-label{max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab.is-active{color:#fff;background:linear-gradient(180deg,#ffca2c,#f2a900);box-shadow:0 6px #d67e0038,inset 0 2px #ffffff94}.closet-body{display:grid;grid-template-columns:1fr 68px;gap:10px;align-items:start}.item-zone{min-width:0}.item-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-auto-rows:76px;gap:8px;overflow:hidden}.item-card{display:grid;place-items:center;min-width:0;padding:7px 4px 6px;border:3px solid rgba(241,226,255,.95);border-radius:17px;color:var(--ink);background:#ffffffb8;box-shadow:inset 0 -3px #eee2ffbf}.item-card.is-active{border-color:#ffb30f;background:#fffef8;box-shadow:0 5px #ff9f0a29,inset 0 2px #ffffffe6}.item-card--empty{opacity:.42;pointer-events:none}.swatch,.asset-thumb{width:48px;height:48px;border-radius:15px}.swatch{background:radial-gradient(circle at 32% 24%,#fff 0 12%,var(--accent) 13% 32%,var(--swatch) 33% 100%);box-shadow:0 7px 13px #50327821}.asset-thumb{display:block;background-repeat:no-repeat;background-color:#ffffff61;box-shadow:0 7px 13px #5032781a}.asset-thumb--img{object-fit:contain;padding:1px}.item-card strong{max-width:58px;overflow:hidden;color:#776895;font-size:9px;font-weight:950;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;height:44px;color:#9b8aaf;font-size:14px;font-weight:950}.page-btn{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;color:#c29cff;background:#ffffffbd;font-size:24px;font-weight:950;box-shadow:inset 0 -2px #ecdcffe6}.page-btn:disabled{opacity:.42}.action-rail{display:grid;gap:8px}.action-btn{display:grid;place-items:center;gap:2px;min-height:48px;border-radius:16px;color:#6d39c8;font-size:10px;font-weight:950;box-shadow:inset 0 -3px #5c379324,0 6px 14px #66428c21}.action-icon{font-size:16px;line-height:1}.action-btn--random{background:linear-gradient(180deg,#fff7ad,#ffd84b)}.action-btn--save{background:linear-gradient(180deg,#ffe9ff,#dda9ff)}.action-btn--photo{background:linear-gradient(180deg,#bff5ff,#61d4f5)}.action-btn--reset{background:linear-gradient(180deg,#ffd5df,#ff7d94);color:#fff}.saved-looks{display:flex;align-items:center;gap:8px;min-height:28px;overflow-x:auto;padding:2px 0 0;scrollbar-width:none}.saved-looks::-webkit-scrollbar{display:none}.saved-label{color:#9d8ab6;font-size:11px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.saved-chip{flex:0 0 auto;padding:7px 10px;border-radius:999px;color:#6d39c8;background:#ffffffc7;font-size:11px;font-weight:950}.toast{top:112px;display:flex;align-items:center;justify-content:center;gap:7px;width:min(320px,calc(100vw - 32px));padding:10px 14px;border-radius:999px;opacity:0;color:#fff;background:#6d39c8d9;box-shadow:0 12px 34px #6d39c833;font-size:14px;font-weight:950;transition:opacity .18s ease,transform .18s ease;transform:translate(-50%) translateY(-8px);pointer-events:none}.toast-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#6d39c8;background:#fff}.toast.is-visible{opacity:1;transform:translate(-50%) translateY(0)}.photo-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#2a18408a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.photo-card[hidden]{display:none}.photo-card__frame{display:grid;gap:12px;width:min(330px,100%)}.photo-card img{width:100%;border:8px solid white;border-radius:28px;box-shadow:0 20px 80px #00000052}.photo-card button{padding:14px 18px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--purple),#f15bb5);font-weight:950}@media(max-height:880px){.top-bar{top:max(12px,env(safe-area-inset-top))}.character-area{top:0}.closet-panel{min-height:306px;padding-bottom:max(14px,env(safe-area-inset-bottom))}.toast{top:78px}}