:root{--bg: #f4f3f0;--surface: #ffffff;--surface-2: #f0efeb;--border: #e4e2dc;--text: #1c1b19;--muted: #6f6c66;--accent: #2f5c43;--ok: #3f7d5b;--due: #b7791f;--overdue: #c2412d;--radius: 14px;--shadow: 0 1px 2px rgb(0 0 0 / .04), 0 2px 8px rgb(0 0 0 / .04);font-family:Inter,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;background:var(--bg);touch-action:manipulation}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;border-radius:10px;padding:.65rem 1rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background-color .15s ease,transform .1s;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.5;cursor:not-allowed}button:active{transform:scale(.98)}.app{max-width:1200px;margin:0 auto;padding:24px 16px 96px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(96px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.scoreboard{display:flex;gap:16px;margin-bottom:32px}.player{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex:1;cursor:pointer;transition:border-color .15s ease}.player-avatar-wrapper{position:relative;display:flex}.player-streak{display:flex;position:absolute;border-radius:50%;background-color:var(--border);padding:2px;font-size:15px;top:-13px;left:-12px;width:35px;height:35px;align-items:center;justify-content:center}.player-avatar{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--player-color);color:#fff;font-size:1.3rem;font-weight:600}.player-info{flex:1;min-width:0}.player-info h2{margin:0;font-size:1.05rem;font-weight:600}.player-title,.xp-text{margin:2px 0;color:var(--muted);font-size:.82rem}.xp-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:8px}.xp-fill{height:100%;background:var(--player-color);transition:width .4s ease}.player-week{text-align:right}.player-week strong{display:block;font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.player-week span{font-size:.75rem;color:var(--muted)}.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 760px){.room-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 340px){.room-grid{grid-template-columns:1fr}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:16px;background:#1c1b1966;animation:fade .15s ease-out}.modal{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface);border-radius:var(--radius);box-shadow:0 12px 40px #0000002e}.modal h3{margin:0;font-size:1.2rem;font-weight:600}.form{display:flex;flex-direction:column;gap:16px}.chip-group{display:flex;flex-wrap:wrap;gap:6px}.chip-group button{padding:.5rem .9rem;border:1px solid var(--border);border-radius:999px;font-size:.9rem}.chip-group button.selected{background:color-mix(in srgb,var(--accent) 12%,white);border-color:var(--accent);color:var(--accent);font-weight:500}.reward-preview{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg);border:1px dashed var(--border);border-radius:12px}.reward-preview-name{margin:0;font-weight:600}.reward-preview-cost{margin:2px 0 0;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:.8rem;font-weight:600;color:var(--muted)}.field input{font:inherit;color:inherit;padding:.7rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:208px;overflow-y:auto;padding:6px;border:1px solid var(--border);border-radius:10px}.icon-picker button{aspect-ratio:1;padding:0;color:var(--muted);border:1px solid transparent}.icon-picker button.selected{background:color-mix(in srgb,var(--accent) 12%,white);border-color:var(--accent);color:var(--accent)}.form-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px}.form-actions>:first-child:not(.btn-secondary){margin-right:auto}.btn-danger-ghost{color:var(--overdue);font-weight:500}.btn-danger{background:var(--overdue);color:#fff;font-weight:600}.delete-confirm{display:inline-flex;align-items:center;gap:8px}.delete-warning{font-size:.8rem;color:var(--overdue)}.icon-btn{padding:6px;color:var(--muted);border-radius:8px}.card-edit-btn{position:absolute;top:12px;right:12px}.chore-top-right{display:flex;align-items:center;gap:4px}.btn-secondary{background:var(--surface-2);font-weight:500}@keyframes fade{0%{opacity:0}}.room-card,.reward-card{display:flex;position:relative;min-height:180px;padding:20px;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s ease}.reward-card.used{opacity:.5}.room-card--overdue{background-color:color-mix(in srgb,var(--overdue) 30%,white)}.room-card--due{background-color:color-mix(in srgb,var(--due) 30%,white)}.room-card--done{background-color:color-mix(in srgb,var(--ok) 30%,white)}.room-card-icon,.reward-card-icon{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2)}.room-card-body,.reward-card-cost{display:flex;flex-direction:column;gap:2px}.room-card-name,.reward-card-name{margin:0;font-size:1.15rem;font-weight:600;padding-top:10px}.room-card-meta{display:flex;align-items:center;gap:8px;padding-top:20px}.room-card-meta .room-card-due,.room-card-meta .room-card-overdue,.room-card-meta .room-card-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0px;color:var(--surface);font-size:.75rem;background-color:var(--due);padding:5px;border-radius:12px;text-align:center;gap:5px;width:60px;height:60px;font-weight:600}.room-card-meta .room-card-ok{background-color:var(--ok)}.room-card-meta .room-card-overdue{background-color:var(--overdue)}.room-card-meta .room-card-due p,.room-card-meta .room-card-overdue p,.room-card-meta .room-card-ok p{padding:0;margin:0}.room-card-arrow{position:absolute;top:20px;right:18px;color:var(--muted)}.room-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.room-header h2{flex:1;margin:0;display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}.back-btn{padding:.55rem .9rem .55rem .6rem;background:var(--surface);border:1px solid var(--border);font-weight:500}.right-btn{margin-left:auto;font-weight:600;background-color:var(--accent);color:var(--bg)}.empty{color:var(--muted)}.chore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.chore{--status-color: var(--ok);position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}.chore:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--status-color)}.chore--due{--status-color: var(--due)}.chore--overdue{--status-color: var(--overdue)}.chore-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.chore-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2)}.chore-points{font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.chore h3{margin:0;font-size:1rem;font-weight:600}.chore-meta,.chore-last{margin:0;color:var(--muted);font-size:.82rem}.chore-due{margin:6px 0 4px;font-size:.85rem;font-weight:600;color:var(--status-color)}.shop-btn{background-color:var(--surface);bottom:0;right:0;padding:20px;display:flex;border-top:1px solid var(--border);box-shadow:var(--shadow);width:fit-content}.shop-btn-label{display:none;font-weight:600}.done-btn{margin-top:auto;background:var(--accent);color:#fff;font-weight:500}.who-did-it{margin-top:auto;display:flex;gap:6px}.who-did-it button{flex:1;color:#fff;font-weight:500;padding:.65rem .5rem}.who-did-it .cancel{flex:none;background:var(--surface-2);color:var(--text)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);display:flex;align-items:center;gap:16px;padding:10px 10px 10px 18px;background:var(--text);color:#fff;border-radius:12px;box-shadow:0 8px 24px #0000002e;font-size:.9rem;animation:pop .2s ease-out}.toast button{background:#ffffff1f;color:#fff;font-weight:500}@keyframes pop{0%{transform:translate(-50%,12px);opacity:0}}@media (hover: hover){.player:hover{border-color:var(--accent)}.room-card:hover{border-color:#cfccc4}.chip-group button:not(.selected):hover,.icon-picker button:not(.selected):hover{background:var(--surface-2);color:var(--text)}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.btn-secondary:hover{background:var(--border)}.btn-danger-ghost:hover{background:color-mix(in srgb,var(--overdue) 10%,white)}.done-btn:not(:disabled):hover{background:#4d8365}}@media (max-width: 640px){.app{padding-top:max(16px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.player{flex-direction:column;align-items:stretch;gap:8px;padding:14px 12px;text-align:center}.player-avatar-wrapper{align-self:center}.player-avatar{width:44px;height:44px;font-size:1.1rem}.player-title{font-size:.75rem}.xp-text{display:none}.player-week{text-align:center}.player-week strong{display:inline;font-size:1.3rem}.player-week span{margin-left:4px}.shop-btn{order:3;grid-column:1 / -1;width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius)}.shop-btn-label{display:inline}.room-header{flex-wrap:wrap;gap:10px;margin-bottom:16px}.room-header h2{order:3;flex-basis:100%;font-size:1.25rem}.right-btn{padding:.55rem .85rem;font-size:.9rem}.room-grid{gap:10px}.room-card,.reward-card{min-height:0;padding:14px;gap:6px}.room-card-icon,.reward-card-icon{width:40px;height:40px}.room-card-name,.reward-card-name{font-size:1rem;padding-top:4px}.room-card-meta{flex-wrap:wrap;gap:6px;padding-top:8px}.room-card-meta .room-card-due,.room-card-meta .room-card-overdue,.room-card-meta .room-card-ok{width:44px;height:44px;gap:2px;border-radius:10px;font-size:.7rem}.room-card-meta svg{width:18px;height:18px}.room-card-arrow{top:14px;right:12px}.chore-grid{grid-template-columns:1fr;gap:10px}.chore{padding:14px 14px 14px 18px}.reward-grid{grid-template-columns:repeat(2,1fr)}.reward-card>button:not(.card-edit-btn),.reward-card .who-did-it{align-self:stretch}.reward-card .who-did-it{flex-wrap:wrap}.reward-card .who-did-it button{min-width:0;font-size:.85rem;padding:.55rem .4rem}.reward-card-name{padding-right:28px}.modal-backdrop{place-items:end stretch;padding:0}.modal{width:100%;max-height:92dvh;padding:20px 16px max(20px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation:sheet-up .22s ease-out}.icon-picker{max-height:168px}.form-actions>*{flex:1}.toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));justify-content:space-between;transform:none;animation:toast-up .2s ease-out}}@keyframes sheet-up{0%{transform:translateY(100%)}}@keyframes toast-up{0%{transform:translateY(12px);opacity:0}}.house-code{min-height:100dvh;display:grid;place-items:center;padding:16px}.house-code p{margin:0}.sync-badge{position:fixed;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow)}.sync-badge--synced .sync-badge-label{display:none}.sync-badge--offline{color:var(--due)}.sync-badge--syncing svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}