:root{
  --green:#78c440;--green-d:#4f9a22;--green-l:#a9e07d;
  --sky:#8fd3ff;--yellow:#ffd23f;--orange:#ff8a3d;--pink:#ff6fb5;--purple:#8e6cf0;--blue:#3aa0ff;--red:#ff5a5a;--teal:#2dd4bf;
  --ink:#233;--paper:#fff;
  --font:"Fredoka","Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#1b2530;font-family:var(--font);color:var(--ink);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
#tablet{width:1180px;height:720px;transform-origin:center center;position:absolute;left:50%;top:50%}
#bumper{position:absolute;inset:0;border-radius:60px;background:linear-gradient(160deg,#8fd75a,#5aae2b 55%,#3f8b1c);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 4px 10px rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.25)}
#bumper .brand{position:absolute;left:0;right:0;top:14px;text-align:center;font-weight:800;color:#fff;font-size:22px;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
#bumper .brand span{color:#ffd23f}
.btn-power{position:absolute;right:120px;top:-6px;width:60px;height:12px;background:#356f16;border-radius:6px}
.btn-vol{position:absolute;right:220px;top:-6px;width:90px;height:12px;background:#356f16;border-radius:6px}
.cam-front{position:absolute;left:50%;top:26px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#123;box-shadow:inset 0 0 4px #6cf}
.home-btn{position:absolute;left:50%;bottom:14px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#d9d9d9);box-shadow:0 3px 6px rgba(0,0,0,.35);cursor:pointer}
.home-btn:active{transform:scale(.95)}
#screen{position:absolute;left:78px;top:60px;width:1024px;height:600px;background:#000;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 4px #111}
#screen>div{position:absolute;inset:0}
/* boot */
#boot{background:radial-gradient(circle at 50% 40%,#7fd04a,#2f7a15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:50}
#boot .frog{font-size:120px;animation:hop 1s infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
#boot .logo{font-size:44px;color:#fff;font-weight:800;text-shadow:0 3px 0 rgba(0,0,0,.3)}
#boot .logo b{color:#ffd23f;margin-left:2px}
#boot .bar{width:300px;height:14px;background:rgba(0,0,0,.3);border-radius:7px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:#ffd23f;animation:fill 2.2s forwards}
@keyframes fill{to{width:100%}}
/* app view */
#appview{background:#fff;display:flex;flex-direction:column;z-index:5}
#appbar{height:56px;flex:0 0 56px;background:linear-gradient(#7fd04a,#5aae2b);display:flex;align-items:center;gap:12px;padding:0 12px;color:#fff;font-weight:800;font-size:22px;box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:2}
#ab-title{flex:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
#ab-gems{background:rgba(0,0,0,.25);padding:4px 12px;border-radius:20px;font-size:18px}
.ab-btn{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#4f9a22;font-size:22px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.ab-btn:active{transform:translateY(2px);box-shadow:none}
#appmount{flex:1;position:relative;overflow:hidden}
#appmount>.app{position:absolute;inset:0;overflow:hidden}
/* drawer */
#drawer{background:linear-gradient(#5aae2b,#3f8b1c);z-index:20;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
#drawer.open{transform:translateY(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;color:#fff;font-size:26px;font-weight:800}
.drawer-head button{width:56px;height:40px;border-radius:20px;border:0;background:#fff;color:#4f9a22;font-size:20px;cursor:pointer}
#drawer-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:18px 10px;padding:8px 24px 24px;align-content:start}
.app-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.app-icon .bubble{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:52px;box-shadow:0 6px 0 rgba(0,0,0,.25),inset 0 -8px 0 rgba(0,0,0,.15),inset 0 6px 0 rgba(255,255,255,.35);transition:transform .1s}
.app-icon:active .bubble{transform:scale(.92)}
.app-icon .label{color:#fff;font-weight:700;font-size:14px;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.4);max-width:130px;line-height:1.1}
.app-icon .new{position:absolute;top:-4px;right:14px;font-size:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));animation:twinkle 1s infinite alternate}
@keyframes twinkle{from{transform:scale(.9)}to{transform:scale(1.15)}}
/* toast / reward */
#toast{pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:80px;z-index:60}
#toast span{background:rgba(0,0,0,.75);color:#fff;padding:10px 22px;border-radius:30px;font-size:20px;font-weight:700;opacity:0;transform:translateY(20px);transition:all .3s}
#toast span.show{opacity:1;transform:translateY(0)}
#reward{z-index:61;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
#reward .card{background:#fff;border-radius:30px;padding:30px 50px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pop .4s}
#reward .card .big{font-size:80px}
#reward .card h2{margin:6px 0;color:var(--green-d);font-size:34px}
#reward .card p{font-size:22px;margin:0 0 14px}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
#lockshade{z-index:70;background:rgba(0,0,0,.85);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;gap:16px;text-align:center}
/* profiles */
#profiles{z-index:30;background:linear-gradient(#8fd3ff,#d7f0ff 60%,#78c440 60%,#4f9a22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
#profiles h1{color:#fff;font-size:40px;margin:0;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.doors{display:flex;gap:40px}
.door{width:150px;height:240px;border-radius:70px 70px 8px 8px;background:linear-gradient(#c4783a,#8d4f1e);border:8px solid #5b2f0e;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;color:#fff;font-weight:800;font-size:20px;text-shadow:0 2px 0 rgba(0,0,0,.4);box-shadow:0 12px 0 rgba(0,0,0,.25);transition:transform .15s}
.door:hover{transform:translateY(-8px)}
.door .knob{position:absolute;right:16px;top:130px;width:16px;height:16px;border-radius:50%;background:#ffd23f}
.door .face{font-size:72px;position:absolute;top:30px}
.door.add{background:linear-gradient(#ddd,#aaa);border-color:#777}
/* shared widget kit for apps */
.btn{border:0;border-radius:24px;padding:12px 26px;font-family:var(--font);font-weight:800;font-size:22px;color:#fff;background:var(--green);box-shadow:0 5px 0 rgba(0,0,0,.25);cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.yellow{background:var(--yellow);color:#5b3a00}.btn.orange{background:var(--orange)}.btn.pink{background:var(--pink)}.btn.purple{background:var(--purple)}.btn.blue{background:var(--blue)}.btn.red{background:var(--red)}.btn.teal{background:var(--teal)}
.btn.big{font-size:30px;padding:18px 40px;border-radius:40px}
.btn.round{width:64px;height:64px;border-radius:50%;padding:0;font-size:30px}
.btn:disabled{opacity:.5;cursor:default}
.panel{background:rgba(255,255,255,.92);border-radius:24px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.title{font-size:36px;font-weight:800;color:var(--green-d);text-align:center;margin:0 0 10px}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;text-align:center}
.row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.card{background:#fff;border-radius:20px;padding:16px;box-shadow:0 6px 0 rgba(0,0,0,.15);cursor:pointer;transition:transform .1s}
.card:active{transform:scale(.95)}
.tile{width:90px;height:90px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.2);cursor:pointer}
.tile.sel{background:var(--yellow)}
.tile.ok{background:var(--green-l)}
.tile.bad{background:#ffb3b3}
input.kid,textarea.kid{font-family:var(--font);font-size:24px;padding:10px 16px;border:3px solid var(--green);border-radius:16px;outline:0;background:#fff;color:var(--ink);user-select:text;-webkit-user-select:text}
.progress{height:16px;background:rgba(0,0,0,.15);border-radius:8px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--yellow);transition:width .3s}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.bounce{animation:bounce .5s}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:5px}

/* ============ mobile / iOS ============ */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-touch-callout:none}
#stage{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* full-bleed: drop the decorative bumper when the viewport is small */
body.bare #tablet{width:1024px;height:600px}
body.bare #bumper{border-radius:0;background:#000;box-shadow:none}
body.bare #screen{left:0;top:0;border-radius:0;box-shadow:none}
body.bare .brand,body.bare .home-btn,body.bare .btn-power,body.bare .btn-vol,body.bare .cam-front{display:none}
/* floating home pill replaces the hardware button in full-bleed mode */
#hw-float{position:fixed;z-index:90;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.82);color:#4f9a22;font-size:22px;box-shadow:0 3px 10px rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;cursor:pointer}
body.bare #hw-float{display:flex}
body.rot #hw-float{transform:rotate(90deg)}