/* Honey, I Cleaned the House! — UI */
:root {
  --ink: #22262e;
  --panel: rgba(255, 253, 248, 0.96);
  --accent: #3d6fb5;
  --good: #3a9e5a;
  --bad: #c94545;
  --warn: #c98a2a;
  --gold: #e8b923;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1420; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); }
canvas { cursor: crosshair; }

/* ---------- layout ---------- */
.ui-root { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.ui-root > * { position: absolute; }

/* ---------- approval bar ---------- */
.approval-wrap { top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.app-icon { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.app-bar { width: 260px; height: 18px; border-radius: 10px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); }
.app-fill { height: 100%; width: 50%; border-radius: 10px; transition: width .4s ease, background .4s; background: linear-gradient(90deg, #4a90d9, #7ec8f0); }
.app-bar.great .app-fill { background: linear-gradient(90deg, #e879a0, #ffd6e8); }
.app-bar.ok .app-fill { background: linear-gradient(90deg, #4a9e6a, #9fe8b0); }
.app-bar.low .app-fill { background: linear-gradient(90deg, #c98a2a, #f2d07a); }
.app-bar.bad .app-fill { background: linear-gradient(90deg, #b03030, #e07a5a); }
.app-text { font-weight: 800; font-size: 18px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); min-width: 30px; }

/* ---------- top left ---------- */
.top-left { top: 14px; left: 16px; display: flex; flex-direction: column; gap: 6px; }
.hbar { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 8px; }
.hbar-track { width: 110px; height: 10px; border-radius: 6px; background: rgba(0,0,0,.5); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.hbar-fill.soap { background: linear-gradient(90deg, #4a90d9, #7ec8f0); }
.clock { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 8px; }
.score { font-size: 14px; font-weight: 700; color: #ffe9a8; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 8px; }

/* ---------- mode banner ---------- */
.mode-banner { top: 52px; left: 50%; transform: translateX(-50%); background: rgba(20,30,50,.85); color: #fff; font-weight: 700; font-size: 14px; padding: 6px 16px; border-radius: 10px; letter-spacing: .04em; display: none; }

/* ---------- prompt ---------- */
.prompt { bottom: 78px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; background: rgba(15,20,30,.88); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.4); animation: promptIn .15s ease; }
@keyframes promptIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.prompt-key { background: var(--accent); border-radius: 7px; padding: 2px 10px; font-weight: 800; font-size: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.prompt.mess { background: rgba(80,25,25,.9); }
.prompt.mess .prompt-key { background: var(--bad); }

/* ---------- hold bar ---------- */
.hold-wrap { bottom: 122px; left: 50%; transform: translateX(-50%); width: 300px; display: none; }
.hold-fill-track { height: 14px; border-radius: 8px; background: rgba(0,0,0,.5); overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.hold-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7ec8f0, #b6f0e0); border-radius: 8px; transition: width .05s linear; }
.hold-text { text-align: center; color: #fff; font-weight: 700; font-size: 13px; margin-top: 4px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ---------- toasts ---------- */
.toasts { top: 96px; right: 16px; display: flex; flex-direction: column; gap: 8px; width: 340px; }
.toast { background: var(--panel); border-left: 5px solid var(--accent); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: toastIn .25s ease; transition: opacity .4s, transform .4s; }
.toast.good { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- achievements ---------- */
.achs { bottom: 16px; right: 16px; display: flex; flex-direction: column-reverse; gap: 10px; }
.ach-pop { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 16px 10px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.4); max-width: 380px; animation: achIn .4s cubic-bezier(.2,1.6,.4,1); transition: opacity .5s, transform .5s; }
.ach-pop.out { opacity: 0; transform: translateX(40px); }
@keyframes achIn { from { opacity: 0; transform: translateX(60px) scale(.8); } to { opacity: 1; transform: translateX(0) scale(1); } }
.ach-icon { font-size: 34px; }
.ach-name { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--gold); text-shadow: 0 1px 0 #fff; }
.ach-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.ach-desc { font-size: 12px; color: #555; }

/* ---------- request card ---------- */
.request-card { top: 96px; left: 16px; max-width: 320px; display: flex; gap: 10px; background: var(--panel); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: translateX(-120%); transition: transform .4s cubic-bezier(.2,1.2,.4,1); }
.request-card.show { transform: translateX(0); }
.rq-icon { font-size: 30px; }
.rq-text { font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ---------- flash ---------- */
.flash { top: 38%; left: 50%; transform: translate(-50%,-50%) scale(.6); font-size: 40px; font-weight: 900; opacity: 0; transition: opacity .15s, transform .15s; text-shadow: 0 3px 10px rgba(0,0,0,.5); pointer-events: none; }
.flash.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.flash.good { color: #9fe8b0; }
.flash.bad { color: #ff9a9a; }

/* ---------- minigames ---------- */
.mini-root { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,14,22,.72); pointer-events: auto; backdrop-filter: blur(3px); }
.mini-root:empty { display: none !important; background: none; pointer-events: none; }
.mini { width: min(760px, 94vw); background: var(--panel); border-radius: 16px; padding: 18px 20px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.mini-title { font-size: 20px; margin-bottom: 8px; }
.mini-hud { display: flex; justify-content: space-between; margin-bottom: 8px; }
.mini-count { font-size: 18px; font-weight: 800; color: var(--accent); }
.mini-timer { font-size: 22px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-arena { position: relative; height: 380px; background: linear-gradient(180deg, #dff0fb, #f2f9f4); border-radius: 12px; overflow: hidden; }
.mini-hint { margin-top: 10px; font-size: 12.5px; color: #555; line-height: 1.4; }
.mini-hint .warn { color: var(--bad); font-weight: 700; }
.mini-hint .good { color: var(--good); font-weight: 700; }
.mini-result { width: min(520px, 92vw); background: var(--panel); border-radius: 16px; padding: 28px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.5); margin-top: 10px; }
.mr-title { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.mr-sub { font-size: 15px; color: #444; margin-bottom: 18px; }

/* dishes bubbles */
.dishes-arena { background: linear-gradient(180deg, #e8f4fd 0%, #cfe8f7 100%); }
.bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(190,225,250,.75) 45%, rgba(120,175,225,.55) 100%); border: 2px solid rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; cursor: pointer; user-select: none; animation: bubbleFloat 3s ease-in-out infinite; box-shadow: inset -4px -6px 12px rgba(80,130,190,.35), 0 4px 10px rgba(0,0,0,.15); }
@keyframes bubbleFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -18px; } }
.bubble.gold { background: radial-gradient(circle at 32% 28%, #fff8d0, #ffe27a 50%, #f2c94c); border-color: #fff; }
.bubble.bomb { background: radial-gradient(circle at 32% 28%, #ffe3e3, #f2a0a0 50%, #d96a6a); border-color: #fff; color: #fff; }
.bubble.pop { animation: bubblePop .25s ease forwards !important; }
@keyframes bubblePop { to { transform: scale(1.6); opacity: 0; } }
.bubble.burst { animation: bubbleBurst .3s ease forwards !important; }
@keyframes bubbleBurst { 30% { transform: scale(1.2); } to { transform: scale(1.9); opacity: 0; } }
.dish-pile { position: absolute; bottom: 10px; right: 12px; width: 92px; height: 76px; background: linear-gradient(180deg, #fff, #dcd6c8); border: 3px solid #b0a898; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #6b4a2f; cursor: pointer; user-select: none; box-shadow: 0 4px 10px rgba(0,0,0,.2); text-align: center; }
.dish-pile.wob { animation: wob .3s ease; }
@keyframes wob { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* laundry */
.laundry-arena { background: linear-gradient(180deg, #eef4fb, #f7f3ec); }
.laundry-item { position: absolute; left: 50%; transform: translateX(-50%); font-size: 46px; text-align: center; cursor: default; user-select: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transition: filter .2s; }
.laundry-item .li-label { display: block; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.laundry-item.good { filter: drop-shadow(0 0 12px #4ae07a) brightness(1.3); }
.laundry-item.bad { filter: drop-shadow(0 0 12px #e04a4a) brightness(1.3); }
.laundry-bins { display: flex; gap: 10px; margin-top: 10px; }
.laundry-bin { flex: 1; background: var(--panel); border: 3px solid var(--bin, #888); border-radius: 12px; padding: 10px 6px; text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .05em; cursor: pointer; user-select: none; transition: transform .08s, box-shadow .08s; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.laundry-bin:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.15); }
.laundry-bin:hover { box-shadow: 0 3px 0 rgba(0,0,0,.15), 0 0 14px var(--bin); }

/* story */
.story { width: min(560px, 92vw); background: var(--panel); border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.story-title { font-size: 20px; font-weight: 900; margin-bottom: 14px; }
.story-card { background: #fff9e3; border: 2px solid #e8d9a8; border-left: 6px solid var(--gold); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; transform: rotate(-.6deg); }
.sc-t { font-size: 12px; font-weight: 800; color: #a8862a; letter-spacing: .08em; margin-bottom: 6px; }
.sc-b { font-size: 17px; font-weight: 600; font-style: italic; line-height: 1.4; }
.story-foot { font-size: 12px; color: #777; margin: 12px 0; }
.story-cont, .story-close { pointer-events: auto; }

/* ---------- buttons ---------- */
.btn { pointer-events: auto; font-family: inherit; font-size: 15px; font-weight: 800; padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer; background: var(--accent); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, background .2s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.big { font-size: 20px; padding: 14px 34px; margin-top: 18px; background: var(--good); }
.mr-btn { background: var(--accent); }

/* ---------- overlay (intro/pause/end) ---------- */
.overlay { inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8,11,18,.86); pointer-events: auto; backdrop-filter: blur(5px); z-index: 20; }
.panel { width: min(640px, 94vw); max-height: 92vh; overflow: auto; background: var(--panel); border-radius: 18px; padding: 30px 34px; text-align: center; box-shadow: 0 14px 50px rgba(0,0,0,.6); }
.intro-title { font-size: 40px; font-weight: 900; line-height: 1.15; background: linear-gradient(180deg, #3d6fb5, #7ec8f0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
.intro-title.small { font-size: 30px; }
.intro-sub { font-size: 15.5px; color: #444; line-height: 1.5; margin-bottom: 18px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 16px; text-align: left; }
.ig { font-size: 13.5px; background: #eef3f9; border-radius: 8px; padding: 8px 12px; }
.ig b { color: var(--accent); }
.intro-tip { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 6px; }
.hl { color: var(--accent); font-weight: 800; }
.intro-foot { margin-top: 14px; font-size: 12px; color: #999; font-style: italic; }
.end-rank { font-size: 24px; font-weight: 900; color: var(--gold); margin: 14px 0; text-shadow: 0 1px 0 #fff; }
.end-sub { font-size: 15px; color: #444; line-height: 1.5; }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 14px 0; text-align: left; font-size: 14.5px; }
.end-stats b { color: var(--accent); }
.end.win .intro-title { background: linear-gradient(180deg, #2a7e4a, #9fe8b0); -webkit-background-clip: text; background-clip: text; }
.end.lose .intro-title { background: linear-gradient(180deg, #8e2a2a, #e0a08a); -webkit-background-clip: text; background-clip: text; }

/* small screens */
@media (max-width: 720px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-title { font-size: 28px; }
  .toasts { width: 260px; }
  .request-card { max-width: 240px; }
}