:root{
  --bg1:#fff7ed;
  --bg2:#eef2ff;
  --ink:#243041;
  --muted:#64748b;
  --panel:rgba(255,255,255,.86);
  --solid:#fffdf8;
  --pink:#f472b6;
  --blue:#60a5fa;
  --green:#34d399;
  --yellow:#fbbf24;
  --purple:#a78bfa;
  --shadow:0 22px 60px rgba(48,52,75,.18);
  --soft:0 12px 30px rgba(48,52,75,.12);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(251,191,36,.28),transparent 26%),
    radial-gradient(circle at 84% 14%,rgba(96,165,250,.22),transparent 28%),
    radial-gradient(circle at 50% 94%,rgba(52,211,153,.16),transparent 30%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
button,select{font:inherit}
button{
  border:0;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
button:not(:disabled):hover{transform:translateY(-1px)}
button:disabled{opacity:.55;cursor:not-allowed}
.app-shell{
  width:min(1180px,100%);
  min-height:100%;
  margin:0 auto;
  padding:18px;
}
.game-header{
  margin:0 auto 16px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.78);
  border-radius:30px;
  box-shadow:var(--soft);
  backdrop-filter:blur(14px);
}
.brand-block{display:flex;align-items:center;gap:12px;min-width:0}
.brand-icon{
  width:56px;height:56px;border-radius:20px;
  display:grid;place-items:center;
  font-size:2rem;
  background:linear-gradient(145deg,#fde68a,#fb7185);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.48),var(--soft);
}
h1{margin:0;font-size:clamp(1.45rem,2vw,2.35rem);letter-spacing:-.055em}
.brand-block p{
  margin:2px 0 0;
  color:var(--muted);
  font-weight:900;
  font-size:.85rem;
  letter-spacing:.22em;
}
.top-stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.stat{
  min-width:82px;
  padding:9px 11px;
  background:rgba(255,253,248,.9);
  border:1px solid rgba(100,116,139,.14);
  border-radius:18px;
  text-align:center;
}
.stat span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}
.stat strong{display:block;margin-top:2px;font-size:1.08rem}
.header-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.primary-btn,.soft-btn{
  border-radius:16px;
  padding:11px 14px;
  font-weight:900;
}
.primary-btn{
  color:#fff;
  background:linear-gradient(135deg,#fb7185,#ec4899);
  box-shadow:0 12px 26px rgba(236,72,153,.22);
}
.soft-btn{
  color:var(--ink);
  background:rgba(255,253,248,.92);
  border:1px solid rgba(100,116,139,.14);
}
.game-layout{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(260px,330px);
  gap:18px;
  align-items:start;
}
.game-card,.side-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.78);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--soft);
  backdrop-filter:blur(14px);
}
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.section-head h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}
.section-head span,.instructions,.side-card li,.tip-box,.theme-picker span{
  color:var(--muted);
  font-weight:800;
  line-height:1.45;
}
.theme-picker{display:grid;gap:6px;margin:0;min-width:150px}
.theme-picker span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.theme-select{
  width:100%;
  border:1px solid #e1d8ca;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  color:#253047;
  font-weight:900;
}
.mini-game{
  height:520px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  border:2px solid rgba(100,116,139,.14);
  margin:12px 0;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.35),0 18px 38px rgba(48,52,75,.12);
  user-select:none;
  touch-action:manipulation;
  isolation:isolate;
}
.mini-game.mini-running{
  outline:3px solid rgba(255,255,255,.65);
  outline-offset:-7px;
}
.mini-score{
  position:absolute;
  left:14px;
  top:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  font-weight:900;
  z-index:30;
  box-shadow:0 8px 20px rgba(30,40,60,.12);
}
.wake-pill{min-width:145px}
.wake-bar-shell{
  position:absolute;
  z-index:30;
  left:14px;
  right:120px;
  top:58px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.wake-bar-shell span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#34d399,#fbbf24,#fb7185,#ef4444);
  transition:width .15s ease;
}
.mini-time-bar{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  overflow:hidden;
  z-index:32;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.mini-time-bar span{
  display:block;
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa,#34d399);
  transform-origin:left center;
}
.theme-badge{
  position:absolute;
  right:16px;
  top:14px;
  z-index:22;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.65);
  color:#253047;
  font-size:.78rem;
  font-weight:900;
  box-shadow:0 8px 20px rgba(30,40,60,.12);
  pointer-events:none;
}
.theme-decor{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.theme-decor span{
  position:absolute;
  display:grid;
  place-items:center;
  font-size:2rem;
  line-height:1;
  filter:drop-shadow(0 8px 10px rgba(30,40,60,.12));
}
.room-scene{position:absolute;inset:0;z-index:4}
.window-frame{
  position:absolute;
  top:72px;
  right:46px;
  width:124px;
  height:112px;
  border-radius:18px;
  background:rgba(255,255,255,.6);
  border:5px solid rgba(255,255,255,.8);
  box-shadow:inset 0 0 0 4px rgba(160,174,192,.18);
  overflow:hidden;
}
.window-frame::before,
.window-frame::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.75);
}
.window-frame::before{left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%)}
.window-frame::after{left:0;right:0;top:50%;height:5px;transform:translateY(-50%)}
.window-glow{position:absolute;inset:0}
.wall-art{
  position:absolute;
  top:100px;
  width:72px;
  height:72px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:rgba(255,255,255,.55);
  box-shadow:0 10px 22px rgba(30,40,60,.1);
}
.wall-art.left{left:46px}
.wall-art.right{right:196px}
.shelf{
  position:absolute;
  left:44px;
  top:184px;
  width:148px;
  height:18px;
  border-radius:999px;
  background:rgba(106,64,38,.55);
  box-shadow:0 10px 16px rgba(59,36,19,.12);
}
.shelf span{
  position:absolute;
  top:-26px;
  font-size:1.65rem;
}
.shelf span:nth-child(1){left:12px}
.shelf span:nth-child(2){left:58px}
.shelf span:nth-child(3){left:108px}
.bed{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  width:min(430px,78%);
  height:178px;
}
.pillow{
  position:absolute;
  left:24px;
  top:16px;
  width:120px;
  height:64px;
  border-radius:26px;
  background:#fff5fb;
  box-shadow:0 12px 18px rgba(30,40,60,.08), inset 0 -6px 0 rgba(255,255,255,.75);
}
.blanket{
  position:absolute;
  inset:34px 0 0;
  border-radius:34px 34px 28px 28px;
  background:linear-gradient(180deg,#fda4af 0%,#fb7185 50%,#f472b6 100%);
  box-shadow:0 20px 30px rgba(244,114,182,.25);
}
.blanket::before{
  content:"";
  position:absolute;
  inset:12px 16px auto;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
}
.cat-wrap{
  position:absolute;
  left:50%;
  top:40px;
  transform:translateX(-50%);
  width:220px;
  text-align:center;
  z-index:2;
}
.cat-shadow{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:124px;
  height:28px;
  border-radius:999px;
  background:rgba(30,40,60,.14);
  filter:blur(3px);
}
.cat-face{
  position:relative;
  z-index:2;
  font-size:82px;
  line-height:1;
  filter:drop-shadow(0 10px 8px rgba(30,40,60,.15));
  animation:catBreath 2.6s ease-in-out infinite;
}
.cat-wrap.cat-alert .cat-face{animation:catWiggle .35s ease-in-out infinite alternate}
.cat-wrap.cat-danger .cat-face{animation:catShake .22s ease-in-out infinite alternate}
.cat-mood{
  position:relative;
  z-index:2;
  margin-top:4px;
  font-size:.92rem;
  font-weight:900;
  color:#fff8fc;
  text-shadow:0 2px 8px rgba(30,40,60,.18);
}
.sleep-bubble{
  position:absolute;
  right:-10px;
  top:-10px;
  z-index:3;
  padding:8px 11px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 20px rgba(30,40,60,.12);
  font-size:.82rem;
  font-weight:900;
  color:#475569;
  animation:floaty 2.1s ease-in-out infinite;
}
.rug{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(340px,66%);
  height:72px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);
}
.lamp,.plant{
  position:absolute;
  bottom:68px;
  font-size:2.1rem;
  z-index:4;
  filter:drop-shadow(0 8px 8px rgba(30,40,60,.12));
}
.lamp{right:50px}
.plant{left:56px}
.noise-layer{
  position:absolute;
  inset:0;
  z-index:18;
}
.noise-item{
  position:absolute;
  width:72px;
  height:72px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 28px rgba(30,40,60,.14);
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
.noise-item:active{transform:translate(-50%,-50%) scale(.94)}
.noise-item .noise-emoji{position:relative;z-index:2}
.noise-item .noise-pulse{
  position:absolute;
  inset:-10px;
  border-radius:28px;
  border:4px solid rgba(251,113,133,.45);
  animation:pulse 1s ease-out infinite;
}
.noise-item .noise-bar{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  height:6px;
  border-radius:999px;
  background:rgba(226,232,240,.9);
  overflow:hidden;
}
.noise-item .noise-bar span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#34d399,#fbbf24,#fb7185,#ef4444);
  transform-origin:left center;
}
.noise-item.urgent{box-shadow:0 18px 34px rgba(239,68,68,.22)}
.noise-item.danger{box-shadow:0 20px 36px rgba(239,68,68,.28); animation:shake 0.17s linear infinite alternate}
.hit-pop{
  position:absolute;
  z-index:40;
  transform:translate(-50%,-50%);
  color:#253047;
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  animation:popFloat .7s ease forwards;
  pointer-events:none;
  box-shadow:0 10px 20px rgba(30,40,60,.12);
}
.miss-flash{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  background:rgba(248,113,113,.15);
  animation:flash .35s ease;
}
.mini-message{
  position:absolute;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(30,41,59,.20);
  backdrop-filter:blur(4px);
}
.mini-message.hidden{display:none}
.mini-message>div{
  width:min(360px,100%);
  text-align:center;
  background:rgba(255,253,248,.96);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow);
}
.mini-message h3{margin:0 0 8px;font-size:1.7rem;letter-spacing:-.03em}
.mini-message p{margin:0 0 16px;color:var(--muted);font-weight:800;line-height:1.45}
.instructions{text-align:center;margin:14px 0 0}
.side-card h2{margin:0 0 12px}
.side-card ol{margin:0;padding-left:22px}
.side-card li{margin:10px 0}
.tip-box{margin-top:18px;padding:15px;border-radius:18px;background:rgba(255,253,248,.78);border:1px solid rgba(100,116,139,.12)}

@keyframes catBreath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(2px) scale(1.02)}
}
@keyframes catWiggle{
  from{transform:rotate(-3deg)}
  to{transform:rotate(3deg)}
}
@keyframes catShake{
  from{transform:translateX(-3px) rotate(-5deg)}
  to{transform:translateX(3px) rotate(5deg)}
}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes pulse{
  from{opacity:.9;transform:scale(.92)}
  to{opacity:0;transform:scale(1.2)}
}
@keyframes shake{
  from{transform:translate(-50%,-50%) rotate(-3deg)}
  to{transform:translate(-50%,-50%) rotate(3deg)}
}
@keyframes popFloat{
  from{opacity:0;transform:translate(-50%,-20%) scale(.8)}
  20%{opacity:1}
  to{opacity:0;transform:translate(-50%,-110%) scale(1.08)}
}
@keyframes flash{
  from{opacity:0}
  30%{opacity:1}
  to{opacity:0}
}

#miniGame[data-theme="cozy"]{
  border-color:#f9a8d4;
  background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 58%,#ffd5dd 58%,#fda4af 100%);
}
#miniGame[data-theme="cozy"] .window-glow{background:linear-gradient(180deg,#bfdbfe,#dbeafe)}

#miniGame[data-theme="sunny"]{
  border-color:#fcd34d;
  background:linear-gradient(180deg,#fef3c7 0%,#fde68a 48%,#fef3c7 48%,#fdba74 100%);
}
#miniGame[data-theme="sunny"] .window-glow{background:linear-gradient(180deg,#93c5fd,#e0f2fe)}

#miniGame[data-theme="rainy"]{
  border-color:#93c5fd;
  background:linear-gradient(180deg,#e0f2fe 0%,#dbeafe 54%,#d6d3d1 54%,#cbd5e1 100%);
}
#miniGame[data-theme="rainy"] .window-glow{background:linear-gradient(180deg,#94a3b8,#cbd5e1)}

#miniGame[data-theme="night"]{
  border-color:#a78bfa;
  background:linear-gradient(180deg,#312e81 0%,#4338ca 52%,#1e1b4b 52%,#0f172a 100%);
}
#miniGame[data-theme="night"] .window-glow{background:linear-gradient(180deg,#1d4ed8,#60a5fa)}
#miniGame[data-theme="night"] .wake-pill,
#miniGame[data-theme="night"] .theme-badge{color:#312e81}
#miniGame[data-theme="night"] .cat-mood{color:#f8fafc}
#miniGame[data-theme="night"] .wall-art,
#miniGame[data-theme="night"] .window-frame,
#miniGame[data-theme="night"] .sleep-bubble{background:rgba(255,255,255,.9)}

#miniGame[data-theme="pink"]{
  border-color:#f9a8d4;
  background:linear-gradient(180deg,#fdf2f8 0%,#fce7f3 52%,#fbcfe8 52%,#f9a8d4 100%);
}
#miniGame[data-theme="pink"] .window-glow{background:linear-gradient(180deg,#fecdd3,#fce7f3)}

@media(max-width:920px){
  .game-header{grid-template-columns:1fr}
  .top-stats{justify-content:flex-start}
  .header-actions{justify-content:flex-start}
  .game-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  .app-shell{padding:10px}
  .game-header,.game-card,.side-card{border-radius:22px}
  .brand-icon{width:48px;height:48px;border-radius:17px;font-size:1.6rem}
  .top-stats{display:grid;grid-template-columns:repeat(2,1fr)}
  .stat{min-width:0}
  .header-actions{display:grid;grid-template-columns:1fr 1fr 1fr}
  .primary-btn,.soft-btn{padding:10px 11px}
  .section-head{display:grid}
  .theme-picker{min-width:0}
  .mini-game{height:460px;border-radius:22px}
  .wake-bar-shell{right:14px}
  .window-frame{right:20px;top:88px;width:98px;height:90px}
  .wall-art{width:58px;height:58px;font-size:1.55rem}
  .wall-art.left{left:18px;top:102px}
  .wall-art.right{right:130px;top:120px}
  .shelf{left:18px;top:182px;width:126px}
  .bed{width:88%;height:166px;bottom:82px}
  .cat-face{font-size:72px}
  .cat-wrap{width:190px;top:42px}
  .cat-mood{font-size:.84rem}
  .sleep-bubble{right:-2px;top:-8px;font-size:.72rem}
  .rug{width:78%}
  .lamp{right:18px}
  .plant{left:16px}
  .noise-item{width:64px;height:64px;font-size:1.8rem}
}