:root{--ink:#26383c;--muted:#66777a;--cream:#fff9ed;--pink:#f6758e;--teal:#72b2a7;--gold:#f4c65e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:#edf7f4}body{background:radial-gradient(circle at 8% 20%,#fff7d8 0 7%,transparent 7.5%),radial-gradient(circle at 92% 42%,#d9f0ec 0 9%,transparent 9.5%),#edf7f4}button,a{font:inherit}.account-shell{width:min(1120px,100%);margin:auto;padding-bottom:70px}.account-header{height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px clamp(15px,3vw,32px)}.account-header a{text-decoration:none;font-weight:900}.back{justify-self:start;color:#536a6c}.account-brand img{width:175px;display:block}.work-link{justify-self:end;padding:11px 16px;border-radius:999px;background:var(--pink);color:white;box-shadow:0 4px 0 #c95069}.account-hero{margin:18px clamp(15px,3vw,32px) 25px;padding:clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:32px;background:linear-gradient(130deg,#3f8587,#6daf9e);color:white;box-shadow:0 11px 0 #2f6f73,0 22px 40px rgba(46,89,84,.2)}.eyebrow{margin:0 0 5px;font-size:11px;letter-spacing:.16em;font-weight:1000}.account-hero h1{margin:0 0 9px;font-size:clamp(34px,5vw,58px);line-height:1}.account-hero p:last-child{max-width:600px;margin:0;line-height:1.5;color:#e5f7f2}.total-balance{min-width:235px;display:flex;align-items:center;gap:14px;padding:17px 20px;border-radius:22px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.32)}.peb-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:48% 52% 45% 55%;background:linear-gradient(145deg,#ffe48f,#e9ad43);color:#654b23;border:4px solid #ca8d2d;box-shadow:inset 0 2px 2px #fff5c7,0 3px 0 #9c6c28;font-size:24px;font-weight:1000;transform:rotate(-6deg)}.total-balance div{display:grid}.total-balance small{font-size:9px;font-weight:1000;letter-spacing:.08em}.total-balance strong{font-size:38px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 clamp(15px,3vw,32px) 25px}.balance-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:25px;border-radius:26px;border:4px solid;box-shadow:0 8px 0}.spend-card{background:#fff3d9;border-color:#edcb8e;box-shadow-color:#d7ae66}.save-card{background:#e2f3ef;border-color:#93c9bf;box-shadow-color:#70aa9e}.card-icon{width:68px;height:68px;display:grid;place-items:center;border-radius:21px;background:rgba(255,255,255,.72);font-size:35px}.balance-card small{font-size:10px;letter-spacing:.09em;font-weight:1000;color:#6c7775}.balance-card h2{margin:2px 0;font-size:42px}.balance-card p{margin:0;color:#687472;font-size:13px}.goal-panel{margin:0 clamp(15px,3vw,32px);padding:clamp(22px,4vw,38px);border-radius:30px;background:#fffaf0;border:3px solid #e5d6b8;box-shadow:0 9px 0 #d8c5a2}.goal-copy{text-align:center}.goal-copy h2{margin:0 0 7px;font-size:clamp(27px,4vw,39px)}.goal-copy>p:last-child{max-width:610px;margin:0 auto 25px;color:var(--muted);line-height:1.5}.active-goal{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding:25px;border-radius:25px;background:linear-gradient(120deg,#f8e9ff,#e6d6fa);border:3px solid #cdb2e6}.goal-emoji{width:110px;height:110px;display:grid;place-items:center;border-radius:32px;background:white;font-size:60px;box-shadow:0 6px 0 #c7afdb;animation:goalBob 3.5s ease-in-out infinite}.goal-details small{font-size:10px;letter-spacing:.1em;font-weight:1000;color:#745d86}.goal-details h3{margin:3px 0 6px;font-size:29px}.goal-details p{margin:0 0 10px;color:#64586c}.progress-track{height:17px;border-radius:99px;background:rgba(255,255,255,.75);overflow:hidden;border:2px solid #bd9bd5}.progress-track div{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8d68b2,#f27491);transition:width .5s ease}.goal-details>span{display:block;margin-top:8px;color:#6c5e72;font-size:12px;font-weight:900}.goal-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.goal-option{display:grid;gap:5px;place-items:center;padding:14px 8px;border:3px solid #e2d6c0;border-radius:18px;background:white;color:var(--ink);cursor:pointer;transition:.16s}.goal-option:hover,.goal-option:focus-visible{transform:translateY(-4px);border-color:#ed849a}.goal-option.selected{border-color:#ed718b;background:#fff0f3;box-shadow:0 4px 0 #dda0ad}.goal-option span{font-size:31px}.goal-option strong{font-size:13px}.goal-option small{color:#76817f}.money-tip{display:flex;gap:14px;align-items:center;margin:26px clamp(15px,3vw,32px) 0;padding:18px 22px;border-radius:20px;background:#fff3c9;border:3px solid #ecd186}.money-tip>span{font-size:31px}.money-tip p{margin:3px 0 0;color:#6e6859;line-height:1.45}@keyframes goalBob{50%{transform:translateY(-5px) rotate(2deg)}}@media(max-width:720px){.account-header{height:68px}.account-brand img{width:130px}.work-link{font-size:12px;padding:9px}.account-hero{align-items:flex-start;flex-direction:column}.total-balance{width:100%}.account-grid{grid-template-columns:1fr}.active-goal{grid-template-columns:1fr;text-align:center}.goal-emoji{margin:auto}.goal-options{grid-template-columns:1fr 1fr}}@media(max-width:430px){.back{font-size:0}.back:before{content:"←";font-size:18px}.account-brand img{width:120px}.balance-card{grid-template-columns:58px 1fr;padding:19px}.card-icon{width:58px;height:58px}.goal-panel{padding:20px 13px}}@media(prefers-reduced-motion:reduce){.goal-emoji{animation:none}.progress-track div,.goal-option{transition:none}}

.visit-pet{display:inline-flex;align-items:center;justify-content:center;margin-top:13px;padding:11px 16px;border-radius:999px;background:#4d8d6b;box-shadow:0 4px 0 #32634a;color:white;text-decoration:none;font-size:13px;font-weight:1000}.visit-pet[hidden]{display:none}.completed-goal-list>a{display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid #82b991;border-radius:16px;background:#e8f5ea;color:#294f3a;text-decoration:none;transition:transform .15s}.completed-goal-list>a:hover,.completed-goal-list>a:focus-visible{transform:translateY(-3px)}.completed-goal-list>a img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(52,73,52,.18))}.completed-goal-list>a i{font-style:normal;font-size:25px}.completed-goal-list>a strong{font-size:12px}
.pet-reserve{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 10px;border:2px dashed #6fa596;border-radius:12px;background:rgba(255,255,255,.5);color:#416c61;font-size:11px;font-weight:1000}.pet-reserve[hidden]{display:none}.pet-reserve strong{white-space:nowrap}.pet-reserve b{font-size:15px}
.pet-reserve button{min-height:32px;padding:5px 9px;border:0;border-radius:999px;background:#5d9a80;color:#fff;font-size:9px;font-weight:1000;cursor:pointer}.pet-reserve button:disabled{opacity:.48;cursor:not-allowed}.goal-ongoing,.goal-dialog-ongoing{margin:10px 0 0!important;padding:8px 10px;border:2px solid #82b79a;border-radius:12px;background:#e4f2e7;color:#416452!important;font-size:10px!important;font-weight:900;line-height:1.35}.goal-ongoing[hidden],.goal-dialog-ongoing[hidden]{display:none}.completed-goal-list>a:not(.completed-pet){display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid #d6b36b;border-radius:16px;background:#fff3c8;color:#5f492a;text-decoration:none;transition:transform .15s}.completed-goal-list>a:not(.completed-pet):hover,.completed-goal-list>a:not(.completed-pet):focus-visible{transform:translateY(-3px)}.completed-goal-list>a:not(.completed-pet) i{font-style:normal;font-size:25px}.completed-goal-list>a:not(.completed-pet) strong{font-size:12px}

/* Pet goals use the real characters, at one consistent visual scale. */
.active-goal{grid-template-columns:150px 1fr}
.goal-visual{width:145px;height:145px;display:grid;place-items:end center;border-radius:32px;background:radial-gradient(circle at 50% 68%,#fff 0 47%,#eee0fa 48% 100%);box-shadow:0 6px 0 #c7afdb;overflow:hidden;animation:goalBob 3.5s ease-in-out infinite}
.goal-visual img{width:92%;height:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 5px rgba(73,52,89,.2))}
.goal-options{grid-template-columns:repeat(4,1fr);gap:14px}
.goal-option{grid-template-rows:125px auto auto;gap:6px;padding:12px 8px 14px;border-radius:22px;min-height:188px}
.goal-option img{width:100%;height:125px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 4px rgba(53,67,55,.18))}
.goal-option strong{font-size:14px}
.goal-option small{text-align:center}
.goal-option.special:not(.selected){border-color:#ddb65f;background:#fff8df}.goal-option.special small{color:#805f24;font-weight:1000}
.goal-option:disabled{cursor:default;opacity:.75}
.goal-dialog-visual{width:150px;height:150px;margin:0 auto 10px;display:grid;place-items:end center;border-radius:32px;background:#f2e7fb;overflow:hidden}
.goal-dialog-visual img{width:94%;height:94%;object-fit:contain;object-position:center bottom}

@media(max-width:720px){.goal-visual{margin:auto}.goal-options{grid-template-columns:repeat(3,1fr)}.goal-option{grid-template-rows:95px auto auto;min-height:164px}.goal-option img{height:95px}}
@media(max-width:520px){.goal-options{grid-template-columns:1fr}.goal-option{grid-template-columns:100px 1fr;grid-template-rows:auto auto;min-height:112px;text-align:left}.goal-option img{grid-row:1 / 3;width:100px;height:90px}.goal-option strong,.goal-option small{justify-self:start}}
@media(prefers-reduced-motion:reduce){.goal-visual{animation:none}}
[data-motion="reduced"] .goal-emoji,[data-motion="reduced"] .goal-visual{animation:none!important}[data-motion="reduced"] .progress-track div,[data-motion="reduced"] .goal-option{transition:none!important}

.playtest-tools{margin:22px clamp(15px,3vw,32px) 0;border:2px solid #c8d9d5;border-radius:18px;background:rgba(255,255,255,.72);color:#536b69}.playtest-tools summary{min-height:48px;display:flex;align-items:center;padding:10px 15px;font-size:12px;font-weight:1000;cursor:pointer;touch-action:manipulation}.playtest-tools>div{padding:0 15px 15px}.playtest-tools p{margin:0 0 10px;font-size:12px;line-height:1.45}.playtest-tools button{min-height:44px;padding:9px 13px;border:2px solid #a75c60;border-radius:12px;background:#fff4f1;color:#8c3f45;font-weight:1000;cursor:pointer}
.reset-dialog{width:min(520px,calc(100% - 24px));padding:26px;border:5px solid #d6a168;border-radius:26px;background:#fffaf0;color:var(--ink);box-shadow:0 25px 80px rgba(37,50,48,.3)}.reset-dialog::backdrop{background:rgba(29,44,42,.65);backdrop-filter:blur(4px)}.reset-dialog h2{margin:3px 0 10px;font-size:clamp(25px,5vw,35px)}.reset-dialog label{display:grid;gap:5px;margin:16px 0;font-weight:1000}.reset-dialog input{min-height:48px;padding:8px 12px;border:3px solid #91b8ae;border-radius:12px;font-size:22px}.reset-error{min-height:20px;color:#a33f47;font-size:12px;font-weight:900}.reset-dialog .goal-dialog-actions button{min-height:48px}

/* Existing account symbols are now tactile objects; their cards stay
   informational and no new action boxes are added. */
.account-coin,.balance-card .card-icon{position:relative;margin:0;padding:0;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.account-coin{color:inherit;font-weight:1000}
.account-coin:focus-visible,.balance-card .card-icon:focus-visible{outline:4px solid #266e82;outline-offset:3px}
.account-shell .account-coin.toy-active{animation:accountCoinFlip .62s cubic-bezier(.2,.75,.24,1)!important}
.account-shell .spend-card .card-icon.toy-active{animation:accountKiteFly .72s cubic-bezier(.2,.78,.22,1)!important}
.save-card .card-icon::after{content:"P";position:absolute;z-index:2;left:50%;top:-9px;width:22px;height:22px;display:grid;place-items:center;border:2px solid #b47b24;border-radius:50%;background:linear-gradient(145deg,#ffe995,#e8ad44);box-shadow:inset 0 2px #fff6c8,0 3px 4px rgba(75,52,22,.24);color:#654819;font-size:10px;font-weight:1000;opacity:0;pointer-events:none;transform:translate(-50%,-18px) rotate(-20deg)}
.account-shell .save-card .card-icon.toy-active{animation:accountPigBounce .7s cubic-bezier(.2,.82,.22,1)!important}
.account-shell .save-card .card-icon.toy-active::after{animation:accountCoinDrop .7s ease-in forwards}
@keyframes accountCoinFlip{0%,100%{transform:rotateY(0) translateY(0)}42%{transform:rotateY(180deg) translateY(-9px);filter:brightness(1.18)}75%{transform:rotateY(330deg) translateY(0)}}
@keyframes accountKiteFly{0%,100%{transform:translate(0,0) rotate(0)}28%{transform:translate(8px,-16px) rotate(9deg)}58%{transform:translate(-7px,-9px) rotate(-8deg)}82%{transform:translate(3px,-3px) rotate(3deg)}}
@keyframes accountPigBounce{0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(4px) scale(1.08,.92)}72%{transform:translateY(-5px) scale(.97,1.04)}}
@keyframes accountCoinDrop{0%{opacity:0;transform:translate(-50%,-22px) rotate(-25deg)}18%{opacity:1}72%{opacity:1;transform:translate(-50%,28px) rotate(18deg) scale(.82)}100%{opacity:0;transform:translate(-50%,35px) scale(.45)}}
@media(prefers-reduced-motion:reduce){.account-shell .save-card .card-icon.toy-active::after{animation:none;opacity:.8;transform:translate(-50%,10px)}}
[data-motion="reduced"] .account-shell .save-card .card-icon.toy-active::after{animation:none;opacity:.8;transform:translate(-50%,10px)}

/* First Day uses the account objects already on the page: the pig receives the
   saved coin and the real pet-goal track answers with light and movement. */
.account-shell.first-day-arrival .save-card{animation:firstDaySaveGlow 1.25s ease-in-out 2}
.active-goal.first-day-arrival{animation:firstDayGoalArrive 1.2s cubic-bezier(.2,.82,.22,1) 2;box-shadow:0 0 0 6px rgba(255,224,105,.38),0 12px 30px rgba(118,79,145,.22)}
.active-goal.first-day-arrival .goal-visual{animation:firstDayPetCheer .75s cubic-bezier(.2,.84,.22,1.18) 2}
.active-goal.first-day-arrival #goal-progress{filter:brightness(1.18);box-shadow:0 0 14px #ffdb70}
@keyframes firstDaySaveGlow{50%{transform:translateY(-4px);filter:brightness(1.08);box-shadow:0 9px 0 #70aa9e,0 0 24px #ffe48d}}
@keyframes firstDayGoalArrive{45%{transform:translateY(-5px) scale(1.015)}75%{transform:translateY(0) scale(.995)}}
@keyframes firstDayPetCheer{36%{transform:translateY(-10px) rotate(-3deg)}68%{transform:translateY(0) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.account-shell.first-day-arrival .save-card,.active-goal.first-day-arrival,.active-goal.first-day-arrival .goal-visual{animation:none!important}.account-shell.first-day-arrival .save-card,.active-goal.first-day-arrival{outline:5px solid #ffe083;outline-offset:3px}}
[data-motion="reduced"] .account-shell.first-day-arrival .save-card,[data-motion="reduced"] .active-goal.first-day-arrival,[data-motion="reduced"] .active-goal.first-day-arrival .goal-visual{animation:none!important}

/* Every payday now arrives spatially: the shared motion layer sends the
   earned coins to these two existing account cards. */
.balance-card.payday-arrival{animation:paydayCardReceive .86s cubic-bezier(.18,.82,.22,1.15)}
.balance-card.payday-arrival .card-icon{animation:paydayIconReceive .72s .18s cubic-bezier(.18,.82,.22,1.15)}
.save-card.payday-arrival{animation-delay:.12s}
@keyframes paydayCardReceive{0%,100%{translate:0 0;scale:1}44%{translate:0 -5px;scale:1.015}72%{translate:0 1px;scale:.997}}
@keyframes paydayIconReceive{0%,100%{rotate:0deg;scale:1}35%{rotate:-5deg;scale:1.12}68%{rotate:4deg;scale:.98}}
@media(prefers-reduced-motion:reduce){.balance-card.payday-arrival,.balance-card.payday-arrival .card-icon{animation:none!important;outline:4px solid #f0c85d;outline-offset:3px}}
[data-motion="reduced"] .balance-card.payday-arrival,[data-motion="reduced"] .balance-card.payday-arrival .card-icon{animation:none!important;outline:4px solid #f0c85d;outline-offset:3px}

/* Keep the pet-goal route comfortably tappable on iPad. */
.visit-pet{min-height:44px}

/* The account now lives in Peblet Bank's illustrated planning room. The
   artwork stays behind the existing real account controls, with a restrained
   wash and glassy panels keeping every balance readable on iPad. */
html{background:#dbe9de}
body{position:relative;isolation:isolate;background:transparent;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#dbe9de url('/peblet-account-planning-room.webp') center top/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(250,246,225,.2),rgba(233,244,235,.58) 38%,rgba(225,239,229,.82) 100%);pointer-events:none}
.account-header{margin:10px clamp(10px,2vw,24px) 0;height:72px;padding:10px clamp(15px,3vw,28px);border:2px solid rgba(255,255,255,.64);border-radius:24px;background:rgba(255,250,235,.86);box-shadow:0 8px 24px rgba(43,61,48,.16);backdrop-filter:blur(10px)}
.account-hero{background:linear-gradient(130deg,rgba(47,115,117,.96),rgba(91,160,139,.95));backdrop-filter:blur(5px)}
.balance-card,.goal-panel,.completed-panel,.activity-panel,.money-tip{backdrop-filter:blur(10px)}
.spend-card{background:rgba(255,243,217,.94)}
.save-card{background:rgba(226,243,239,.94)}
.goal-panel{background:rgba(255,250,240,.94)}
.completed-panel,.activity-panel{background:rgba(255,252,244,.93)}
.money-tip{background:rgba(255,243,201,.94)}
@media(max-width:720px){body::before{background-position:54% top}.account-header{height:68px;margin:7px 8px 0}.account-hero{margin-top:12px}}
@media(prefers-reduced-transparency:reduce){body::after{background:rgba(232,243,234,.94)}.account-header,.balance-card,.goal-panel,.completed-panel,.activity-panel,.money-tip{backdrop-filter:none}}

/* Interest stays attached to the Save account so the reward reads as money
   growth, not as a separate prize system. */
.save-card>div{min-width:0}.interest-progress{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}.interest-progress span{font-size:12px;font-weight:900;color:#3f6b61}.interest-progress button{min-height:44px;padding:8px 13px;border:0;border-radius:999px;background:#418a70;box-shadow:0 4px 0 #2b6550;color:#fff;font-size:12px;font-weight:1000;cursor:pointer}.interest-progress button[hidden]{display:none}.interest-dialog{width:min(540px,calc(100% - 24px));padding:clamp(22px,4vw,34px);border:5px solid #78b39d;border-radius:30px;background:linear-gradient(#f6fff9,#e6f5ed);box-shadow:0 25px 80px rgba(29,59,49,.45);color:var(--ink);text-align:center}.interest-dialog::backdrop{background:rgba(25,48,42,.62);backdrop-filter:blur(5px)}.interest-dialog h2{margin:3px 0 9px;font-size:clamp(29px,5vw,42px)}.interest-dialog>p{line-height:1.45}.interest-coin{width:92px;height:92px;display:grid;place-items:center;margin:0 auto 12px;border:6px solid #bc842b;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4a9,#f4c65e 54%,#d99a35);box-shadow:inset 0 5px #fff7c7,0 8px 0 #986527,0 12px 22px rgba(77,53,24,.25);color:#6d491f;font-size:42px;font-weight:1000}.interest-maths{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:20px 0;padding:16px;border:3px solid #9acbb7;border-radius:20px;background:#fff}.interest-maths span,.interest-maths b{font-size:clamp(15px,3vw,20px)}.interest-maths strong{color:#2e7f5e;font-size:clamp(25px,4vw,36px)}.interest-note{font-size:12px;color:#61766e}.interest-dialog .goal-dialog-actions button{min-height:48px}.goal-option[data-goal-locked]{opacity:.72}.goal-option[data-goal-locked] small{font-weight:1000}
@media(max-width:720px){.interest-progress{align-items:flex-start;flex-direction:column}.interest-progress button{width:100%}.interest-maths{grid-template-columns:1fr}.interest-maths b{font-size:14px}}