* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; font-family:"Segoe UI", "Heebo", "Assistant", Arial, sans-serif; }
body { background:linear-gradient(180deg,#8ED8FF 0%,#C9F0FF 45%,#EAF9E4 100%); color:#4A3428; direction:rtl; }
button { font-family:inherit; border:none; cursor:pointer; }

#sky { position:fixed; inset:0; pointer-events:none; z-index:0; }
.sun { position:absolute; top:18px; left:26px; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFF3B0, #FFD93D); box-shadow:0 0 34px #FFE98A; }
.cloud { position:absolute; background:#fff; border-radius:40px; opacity:.85; }
.cloud::before,.cloud::after{ content:""; position:absolute; background:#fff; border-radius:50%; }
.c1 { top:52px; right:12%; width:84px; height:26px; animation:drift 26s linear infinite; }
.c1::before{ top:-14px; right:14px; width:32px; height:32px;} .c1::after{ top:-9px; right:44px; width:24px; height:24px;}
.c2 { top:110px; right:55%; width:64px; height:20px; animation:drift 34s linear infinite reverse; }
.c2::before{ top:-11px; right:11px; width:24px; height:24px;} .c2::after{ top:-7px; right:33px; width:18px; height:18px;}
.c3 { top:170px; right:80%; width:50px; height:16px; opacity:.6; animation:drift 40s linear infinite; }
.c3::before{ top:-8px; right:9px; width:18px; height:18px;} .c3::after{ top:-5px; right:25px; width:14px; height:14px;}
@keyframes drift { from { transform:translateX(0);} to { transform:translateX(-40px);} }
#grass { position:fixed; left:0; right:0; bottom:0; height:12vh; z-index:0;
  background:linear-gradient(180deg,#8FD77F,#5FB55A); border-radius:50% 50% 0 0/26px 26px 0 0; }

#app { position:relative; z-index:1; height:100dvh; max-width:520px; margin:0 auto; }
.screen { display:none; height:100%; padding:14px 18px calc(12vh + 14px); flex-direction:column; align-items:center; text-align:center; }
.screen.on { display:flex; }
.screen.center { justify-content:center; gap:10px; }

.app-title { font-size:56px; font-weight:800; color:#E8641C; text-shadow:0 3px 0 #fff; letter-spacing:1px; }
.app-sub { font-size:17px; font-weight:700; color:#5D7A52; margin-top:-4px; }
.home-top { margin-top:8px; }
.fox-stage { width:200px; height:200px; margin:2px auto; }
.fox-stage.big { width:min(62vw,260px); height:min(62vw,260px); }
.fox-stage.room { background:radial-gradient(ellipse at 50% 82%, #FFE9C9 0%, #FFF7EC 70%); border-radius:24px; border:3px solid #FFD9A8; }

.garden { display:flex; gap:8px; justify-content:center; align-items:flex-end; min-height:52px; margin:4px 0; }
.garden .flower { width:34px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.garden.big .flower { width:42px; height:54px; }

.btn-big { font-size:24px; font-weight:800; color:#fff; background:linear-gradient(180deg,#FF9F43,#F2711C);
  padding:14px 34px; border-radius:60px; box-shadow:0 5px 0 #D15A10, 0 8px 14px rgba(0,0,0,.18);
  min-height:60px; min-width:min(78vw,320px); margin-top:6px; }
.btn-big:active { transform:translateY(3px); box-shadow:0 2px 0 #D15A10; }
.btn-big + .btn-text { margin-top:16px; }
.btn-mid { font-size:17px; font-weight:700; color:#4A3428; background:#fff; padding:11px 18px; border-radius:40px;
  box-shadow:0 3px 0 #D8D2C4; min-height:52px; min-width:56px; }
.btn-mid:active { transform:translateY(2px); box-shadow:0 1px 0 #D8D2C4; }
.btn-mid.soft { background:#EAF6E4; }
.btn-mid.care { background:#FFF0F3; color:#B23A5B; }
.btn-mid.ghost { background:rgba(255,255,255,.75); }
.btn-text { background:none; color:#6C7F63; font-size:15px; font-weight:700; padding:10px; text-decoration:underline; min-height:44px; }
.btn-icon { font-size:22px; background:rgba(255,255,255,.85); border-radius:50%; width:48px; height:48px; }
.home-row { display:flex; gap:10px; margin-top:10px; }
.stars-line { font-size:18px; font-weight:800; color:#B8860B; margin-top:8px; }
/* בית: ריווח נדיב בין הכפתורים (משוב 11.11) */
#screen-home .garden { margin:10px 0 8px; }
#screen-home .btn-big { margin-top:14px; }
#screen-home .home-row { margin-top:22px; }
#screen-home .stars-line { margin-top:16px; }

.screen-title { font-size:30px; font-weight:800; color:#E8641C; text-shadow:0 2px 0 #fff; margin-top:6px; }
.plan-hint { font-size:16px; font-weight:700; color:#5D7A52; margin-bottom:6px; }
.plan-list { list-style:none; width:100%; max-width:360px; overflow-y:auto; overflow-x:hidden; min-height:0; -webkit-overflow-scrolling:touch; flex:1 1 auto; scroll-padding-bottom:14px; }
.plan-list li:last-child { margin-bottom:14px; }
.plan-list li { background:rgba(255,255,255,.92); border-radius:16px; padding:9px 14px; margin:5px 0;
  font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; box-shadow:0 2px 0 #E3DCCB; }
.plan-list li .emoji { font-size:22px; }

.ex-top { width:100%; display:flex; justify-content:space-between; align-items:center; }
.ex-progress { display:flex; gap:5px; flex-wrap:wrap; max-width:70%; }
.ex-progress .dot { width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #C9BFA9; }
.ex-progress .dot.done { background:#7BC96F; border-color:#5FA847; }
.ex-progress .dot.now { background:#FFC53D; border-color:#E8A100; }
.ex-name { font-size:30px; font-weight:800; color:#E8641C; text-shadow:0 2px 0 #fff; margin-top:2px; }
.ex-instr { font-size:19px; font-weight:700; color:#4A3428; }
.ex-dad { font-size:15px; font-weight:700; color:#7A5CFF; min-height:20px; }
.timer-ring { position:relative; width:76px; height:76px; border-radius:50%; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 #E3DCCB; margin:2px 0; }
.timer-ring span { font-size:26px; font-weight:800; color:#E8641C; }
.ex-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.cheer-text { font-size:34px; font-weight:800; color:#E8641C; text-shadow:0 2px 0 #fff; }
.sum-text { font-size:19px; font-weight:700; }
.sum-flower { min-height:60px; display:flex; justify-content:center; }

.shop { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:380px; margin-top:6px; }
.shop .item { background:rgba(255,255,255,.94); border-radius:18px; padding:10px; box-shadow:0 3px 0 #E3DCCB;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
.shop .item .emo { font-size:34px; }
.shop .item .nm { font-size:16px; font-weight:800; }
.shop .item .pr { font-size:14px; font-weight:700; color:#B8860B; }
.shop .item button { font-size:15px; font-weight:800; border-radius:30px; padding:8px 18px; min-height:44px; min-width:100px;
  background:linear-gradient(180deg,#FFC53D,#F0A500); color:#5B3B00; box-shadow:0 3px 0 #C98A00; }
.shop .item button.owned { background:#EAF6E4; color:#4C7A3F; box-shadow:0 3px 0 #B9D8AC; }
.shop .item button.equipped { background:#7BC96F; color:#fff; box-shadow:0 3px 0 #5FA847; }

.card { background:rgba(255,255,255,.94); border-radius:20px; padding:14px 16px; width:100%; max-width:420px;
  margin:8px 0; box-shadow:0 3px 0 #E3DCCB; text-align:right; }
.card h3 { font-size:18px; color:#E8641C; margin-bottom:6px; }
.safety { padding-right:18px; font-size:15px; font-weight:600; line-height:1.5; }
.safety li { margin:5px 0; }
.seg { display:flex; gap:8px; margin-bottom:10px; }
.seg button { flex:1; font-size:16px; font-weight:800; padding:10px; min-height:52px; border-radius:14px;
  background:#F1EDE1; color:#6C6250; }
.seg button.on { background:linear-gradient(180deg,#FF9F43,#F2711C); color:#fff; }

.overlay { position:fixed; inset:0; background:rgba(40,60,40,.45); z-index:10; display:flex;
  align-items:center; justify-content:center; padding:24px; }
.overlay.hidden { display:none; }
.overlay-card { background:#FFFDF6; border-radius:26px; padding:22px; max-width:360px; width:100%;
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.overlay-card h2 { font-size:26px; color:#E8641C; margin-bottom:8px; }
.overlay-card p { font-size:18px; font-weight:700; line-height:1.45; }
.overlay-buttons { display:flex; flex-direction:column; gap:10px; margin-top:16px; }

@media (max-height:650px) {
  .app-title{font-size:44px;} .fox-stage{width:150px;height:150px;}
  .fox-stage.big{width:min(52vw,200px);height:min(52vw,200px);}
  .ex-name{font-size:26px;} .screen-title{font-size:26px;}
  .btn-big{font-size:21px;min-height:56px;}
}
#ex-img { object-fit:contain; border-radius:18px; }
.img-ph { display:flex; align-items:center; justify-content:center; font-size:64px; background:#F4FAFF; border-radius:18px; }
.timer-ring.ready { cursor:pointer; background:#E8641C; box-shadow:0 4px 0 #B34A10; width:auto; min-width:76px; padding:0 20px; border-radius:38px; }
.timer-ring.ready span { font-size:19px; color:#fff; line-height:1.1; white-space:nowrap; }
.timer-ring.ready:active { transform:translateY(2px); box-shadow:0 2px 0 #B34A10; }
#screen-room, #screen-parent { overflow-y:auto; justify-content:flex-start; padding-bottom:16px; }
#screen-room .fox-stage.room, #screen-parent .card, #screen-room .shop { flex-shrink:0; }
.btn-text { background:rgba(255,255,255,.85); border-radius:20px; padding:6px 18px; }
.ex-demo { position:relative; width:min(74vw,300px); flex-shrink:0; }
#screen-exercise { overflow-y:auto; justify-content:flex-start; gap:4px; padding-bottom:12px; }
@media (max-height:700px) {
  .ex-demo { width:min(52vw,200px); }
  .human-stage { height:min(52vw,200px); }
  .ex-name { font-size:24px; }
  .ex-instr { font-size:16px; margin:2px 0; }
  .timer-ring { width:64px; height:64px; }
  .timer-ring.ready { min-width:64px; }
  .btn-mid { font-size:15px; padding:8px 14px; }
}
.human-stage { width:100%; height:min(74vw,300px); background:#F2FAFF; border-radius:20px; border:3px solid #D8ECFA; }
.fox-stage.mini { position:absolute; bottom:-6px; right:-10px; width:76px; height:76px; margin:0; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
@media (min-height:760px) {
  #screen-home { justify-content:space-evenly; padding-bottom:calc(16vh + 14px); }
  #screen-home .fox-stage { width:min(66vw,280px); height:min(66vw,280px); }
  #screen-home .garden .flower { width:44px; height:56px; }
}
#ex-video { object-fit:contain; background:#F2FAFF; }
/* Permanent wardrobe and optional care. No timers or penalties in the room. */
.room-hero { position:relative; flex-shrink:0; }
#screen-room .room-hero .fox-stage { width:210px; height:210px; margin:0; }
#room-poops { position:absolute; bottom:8px; left:10px; font-size:22px; letter-spacing:7px; }
#care-fx { position:absolute; top:35px; left:14px; font-size:30px; pointer-events:none; }
#care-fx.pop { animation:care-pop 1.7s ease-out; }
@keyframes care-pop { 0% { opacity:0; transform:translateY(30px) scale(.5); } 20%{opacity:1;} 100%{opacity:0;transform:translateY(-20px) scale(1.3);} }
#care-feedback { min-height:42px; font-size:15px; font-weight:700; margin:6px 0; max-width:360px; }
.care-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; max-width:380px; flex-shrink:0; }
.care-button { border-radius:17px; min-height:91px; padding:7px 2px; background:#fff; box-shadow:0 3px 0 #BFDCDD; color:#4A3428; display:flex; flex-direction:column; align-items:center; gap:3px; }
.care-icon { font-size:25px; }.care-button strong{font-size:15px;}.care-button small{font-size:11px;}
.wardrobe-heading{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:380px;margin-top:19px;gap:12px;}.wardrobe-heading h3{font-size:22px;}.wardrobe-heading span{font-size:14px;font-weight:700;}
.room-hint { font-size:13px; margin:5px 0 9px; max-width:360px; }
#btn-outfit { min-height:44px; font-size:14px; margin:4px 0; flex-shrink:0; }
.shop-filters { display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:380px;width:100%;margin:10px 0;flex-shrink:0; }
.shop-filters button{min-height:44px;min-width:57px;padding:7px 12px;border-radius:22px;background:#fff;color:#5D6454;font-weight:700;}.shop-filters button.on{background:#497D64;color:white;}
.shop .item { position:relative;border:2px solid #73AE7B;min-height:245px;padding:8px 6px; }
.shop .item.rarity-rare{border-color:#679BCD;}.shop .item.rarity-epic{border-color:#A27CC3;}.shop .item.rarity-legend{border-color:#E6AA51;background:#FFF7E8;}
.rarity-label{position:absolute;top:6px;right:9px;font-size:11px;font-weight:700;color:#607750;}
.item-preview{height:140px;width:140px;max-width:100%;margin:0 auto;}.item-preview svg{overflow:visible;}
.shop .item .nm{font-size:15px;min-height:22px;}.shop .item .pr{margin:3px 0 7px;}
.shop .item button{padding:8px 10px;font-size:14px;max-width:100%;}
#screen-room > .btn-text[data-nav]{margin:18px 0;min-height:44px;flex-shrink:0;}
@media(max-height:700px){#screen-room .room-hero .fox-stage{width:170px;height:170px;}#care-feedback{min-height:36px;margin:4px 0;font-size:14px;}.care-button{min-height:83px;}.care-icon{font-size:22px;}}