:root{--ink:#f3edff;--muted:#a9afd1;--night:#12152e;--panel:#1c2143;--pink:#f16eab;--cyan:#6eddd2;--yellow:#f4df78;--leaf:#8bd17c;font-family:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
body{margin:0;min-width:320px;color:var(--ink);background:var(--night);background-image:radial-gradient(circle at 20% 10%,rgba(241,110,171,.18),transparent 30%),radial-gradient(circle at 80% 80%,rgba(110,221,210,.14),transparent 28%)}
button{font:inherit}
.shell{width:min(1160px,calc(100% - 44px));margin:auto;padding:24px 0 20px}
.topbar,.brand,.meta,footer{display:flex;align-items:center}
.topbar,footer{justify-content:space-between;gap:20px}
.topbar{padding-bottom:64px}
.brand{gap:10px;color:var(--ink);text-decoration:none;font:700 14px Arial,sans-serif;letter-spacing:.04em}
.mark{width:27px;height:27px;display:grid;place-items:center;background:var(--pink);color:#fff;border-radius:50% 50% 50% 4px;font:italic 20px Georgia}
.meta{gap:16px;font:700 10px Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.meta button{color:var(--ink);background:transparent;border:1px solid #3f4772;border-radius:20px;padding:9px 12px;font:700 10px Arial;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.intro{display:grid;grid-template-columns:1fr .78fr;gap:70px;align-items:end;margin-bottom:40px}
.eyebrow,.card-head,.mixer-title,.help,footer,.log-title{font:700 10px Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.eyebrow{color:var(--cyan);margin:0 0 18px}
.eyebrow:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-right:8px}
h1{font-size:clamp(52px,6.6vw,82px);line-height:.89;letter-spacing:-.065em;font-weight:400;margin:0 0 25px}
h1 em{color:var(--pink);font-style:italic}
.lead{max-width:445px;color:var(--muted);font-size:16px;line-height:1.6;margin:0}
.stats{display:flex;justify-content:space-between;border-top:1px solid #383f67;border-bottom:1px solid #383f67;padding:16px 0}
.stats div{border-left:2px solid var(--cyan);padding-left:12px;min-width:78px}
.stats small{display:block;color:var(--muted);font:700 9px Arial;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.stats strong{font-size:30px;font-weight:400}
.stats b{font:11px Arial;color:var(--muted);margin-left:3px}
.game-card{background:var(--panel);padding:20px;box-shadow:0 25px 70px rgba(0,0,0,.3);border:1px solid #303860}
.card-head{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;padding:0 3px 15px}
.card-head span:first-child{color:var(--cyan)}

.scene{height:clamp(350px,42vw,470px);position:relative;overflow:hidden;isolation:isolate;background:#bfe6cf}
.sky{position:absolute;inset:0 0 34%;background:linear-gradient(180deg,#8fd0e8,#d9f0d0)}
.sun{position:absolute;z-index:2;width:88px;height:88px;right:12%;top:9%;border-radius:50%;background:var(--yellow);box-shadow:0 0 50px rgba(244,223,120,.55)}
.cloud{position:absolute;z-index:2;background:#fff;border-radius:50px;opacity:.85}
.cloud:after{content:'';position:absolute;width:60%;height:140%;left:20%;top:-60%;background:inherit;border-radius:inherit}
.c1{width:90px;height:26px;left:8%;top:12%}
.c2{width:60px;height:18px;left:60%;top:20%}
.tree{position:absolute;bottom:24%;z-index:3}
.tree .trunk{position:absolute;bottom:0;left:50%;width:14px;height:60px;background:#7a5230;transform:translateX(-50%);border-radius:3px}
.tree .leaf{position:absolute;bottom:44px;left:50%;width:96px;height:96px;background:#4f9a54;border-radius:50%;transform:translateX(-50%)}
.t1{left:4%}
.t2{right:3%}
.t2 .leaf{background:#59a85d}
.grass{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,#5fae63,#3e8a45)}
.floor-glow{position:absolute;bottom:-30%;left:15%;width:70%;height:60%;border-radius:50%;background:radial-gradient(ellipse,#ffffff30,transparent 65%)}
.bubble{position:absolute;z-index:9;left:6%;top:8%;max-width:230px;padding:12px 15px;background:#fffdf2;color:#1c2143;border-radius:16px 16px 16px 3px;font:700 12px/1.35 Arial;box-shadow:0 8px 23px #11152e55;transform:rotate(-2deg)}
.bubble:after{content:'';position:absolute;bottom:-8px;left:18px;border-width:9px 9px 0 0;border-style:solid;border-color:#fffdf2 transparent transparent}

.mine{position:absolute;z-index:5;bottom:16%;left:50%;width:150px;height:272px;transform:translateX(-50%)}
.mine .hair-back{position:absolute;z-index:1;left:27px;top:1px;width:103px;height:202px;background:#805d4c;border-radius:48% 47% 35% 42%;transform:rotate(3deg)}
.mine .head{position:absolute;z-index:4;left:40px;top:5px;width:79px;height:91px}
.mine .face{position:absolute;top:12px;left:7px;width:65px;height:75px;background:#e9ad88;border-radius:46%}
.mine .hair-top,.mine .bangs{background:#805d4c}
.mine .hair-top{position:absolute;z-index:2;top:0;left:0;width:82px;height:54px;border-radius:52% 54% 35% 30%}
.mine .bangs{position:absolute;z-index:5;top:32px;left:5px;width:71px;height:29px;border-radius:8% 10% 50% 50%;clip-path:polygon(0 0,100% 0,92% 65%,77% 43%,64% 100%,48% 49%,31% 75%,17% 38%,0 66%)}
.mine .eye{position:absolute;top:44px;width:5px;height:6px;border-radius:50%;background:#163c43}
.mine .eye.l{left:20px}.mine .eye.r{right:20px}
.mine .nose{position:absolute;top:51px;left:31px;width:5px;height:7px;border-left:1px solid #b76f5b}
.mine .mouth{position:absolute;top:64px;left:27px;width:14px;height:6px;border-bottom:2px solid #c85948;border-radius:50%}
.mine .body{position:absolute;z-index:2;left:36px;bottom:17px;width:78px;height:108px;background:var(--pink);border-radius:44% 44% 22% 22%}
.mine .legs{position:absolute;z-index:1;bottom:0;left:36px;width:78px;height:137px;background:linear-gradient(90deg,#9ab39a 0 47%,transparent 47% 53%,#9ab39a 53%);border-radius:25px 25px 10px 10px}

.mine .arm{position:absolute;z-index:3;top:150px;width:44px;height:13px;background:#e9ad88;border-radius:8px}
.mine .arm.l{left:-32px}
.mine .arm.r{right:-32px}
.band{position:absolute;z-index:2;top:150px;left:-40px;width:230px;height:9px;border-radius:5px;background:linear-gradient(90deg,#e85f9c,#ff9dc6,#e85f9c);transform:scaleX(1);transform-origin:50% 50%;transition:transform .18s ease}
.band:before,.band:after{content:'';position:absolute;top:-3px;width:15px;height:15px;border-radius:50%;background:#e9ad88}
.band:before{left:-4px}
.band:after{right:-4px}

.kid{position:absolute;z-index:4;bottom:14%;left:16%;width:150px;height:272px;transform:translateX(-50%) scale(.58);transform-origin:50% 100%;transition:transform .4s ease}
.kid .hair-back{position:absolute;z-index:1;left:27px;top:1px;width:103px;height:202px;background:#e3a63a;border-radius:48% 47% 35% 42%;transform:rotate(3deg)}
.kid .head{position:absolute;z-index:4;left:40px;top:5px;width:79px;height:91px}
.kid .pig{position:absolute;top:6px;width:22px;height:22px;border-radius:50%;background:#e3a63a;z-index:1}
.kid .pig.l{left:-14px}
.kid .pig.r{right:-14px}
.kid .face{position:absolute;top:12px;left:7px;width:65px;height:75px;background:#e9ad88;border-radius:46%}
.kid .hair-top,.kid .bangs{background:#e3a63a}
.kid .hair-top{position:absolute;z-index:2;top:0;left:0;width:82px;height:54px;border-radius:52% 54% 35% 30%}
.kid .bangs{position:absolute;z-index:5;top:32px;left:5px;width:71px;height:29px;border-radius:8% 10% 50% 50%;clip-path:polygon(0 0,100% 0,92% 65%,77% 43%,64% 100%,48% 49%,31% 75%,17% 38%,0 66%)}
.kid .eye{position:absolute;top:44px;width:5px;height:6px;border-radius:50%;background:#163c43}
.kid .eye.l{left:20px}.kid .eye.r{right:20px}
.kid .nose{position:absolute;top:51px;left:31px;width:5px;height:7px;border-left:1px solid #b76f5b}
.kid .mouth{position:absolute;top:62px;left:24px;width:20px;height:9px;border-bottom:2px solid #c85948;border-radius:50%;transform:rotate(-6deg)}
.kid .tongue{position:absolute;top:70px;left:30px;width:11px;height:14px;background:#e15a6b;border-radius:0 0 8px 8px;transform-origin:50% 0;transform:scaleY(0);animation:tongueWag 1.6s ease-in-out infinite}
@keyframes tongueWag{0%,12%{transform:scaleY(0)}30%,55%{transform:scaleY(1)}75%,100%{transform:scaleY(0)}}
.kid .body{position:absolute;z-index:2;left:36px;bottom:17px;width:78px;height:108px;background:var(--cyan);border-radius:44% 44% 22% 22%}
.kid .legs{position:absolute;z-index:1;bottom:0;left:36px;width:78px;height:137px;background:linear-gradient(90deg,#e3a63a 0 47%,transparent 47% 53%,#e3a63a 53%);border-radius:25px 25px 10px 10px}
.scene.naughty .kid{transform:translateX(-50%) scale(.58) rotate(-4deg) translateY(-8px)}

.flying-band{position:absolute;z-index:8;width:60px;height:8px;border-radius:4px;background:linear-gradient(90deg,#e85f9c,#ff9dc6,#e85f9c);transition:transform .5s cubic-bezier(.3,.6,.4,1),opacity .2s ease .4s;opacity:1}
.kid.flinch{animation:flinch .4s ease}
@keyframes flinch{0%,100%{transform:translateX(-50%) scale(.58)}25%{transform:translateX(-50%) scale(.58) rotate(10deg)}75%{transform:translateX(-50%) scale(.58) rotate(-10deg)}}
/* kid flees to the left (she starts left of Mine already), Mine trails behind her the whole time - never overtakes */
.mine.chase{animation:chaseMine 1.6s ease-in forwards}
.kid.chase{animation:chaseKid 1.6s ease-in forwards}
@keyframes chaseKid{0%{transform:translateX(-50%) scale(.58)}20%{transform:translateX(-95%) scale(.58) translateY(-10px)}55%{transform:translateX(-190%) scale(.58) translateY(0)}100%{transform:translateX(-340%) scale(.58) translateY(-6px);opacity:0}}
@keyframes chaseMine{0%{transform:translateX(-50%)}18%{transform:translateX(-50%)}45%{transform:translateX(-95%) translateY(-10px)}80%{transform:translateX(-190%) translateY(0)}100%{transform:translateX(-270%) translateY(-6px);opacity:0}}

.tension-wrap{margin-top:16px}
.tension-track{position:relative;height:16px;background:#252b54;border:1px solid #3e4773}
.tension-zone{position:absolute;left:52%;width:32%;top:0;bottom:0;background:rgba(139,209,124,.35);border-left:1px solid var(--leaf);border-right:1px solid var(--leaf)}
.tension-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--pink);transition:width .15s linear}
.tension-labels{display:flex;justify-content:space-between;color:var(--muted);font:9px Arial;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}

.mixer{margin-top:18px}
.mixer-title{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-bottom:10px}
.mixer-title strong{color:var(--cyan);font:700 11px Arial;letter-spacing:.02em}
.sound-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.sound-pads button{min-height:80px;text-align:left;padding:12px;background:#252b54;border:1px solid #3e4773;color:var(--ink);cursor:pointer;transition:.15s}
.sound-pads button:hover,.sound-pads button.active{border-color:var(--cyan);background:#293660;transform:translateY(-2px)}
.sound-pads button:active{transform:translateY(0) scale(.98)}
.pad-icon{display:block;color:var(--pink);font-size:23px;height:27px}
.sound-pads strong{display:block;font-size:15px;font-weight:400}
.sound-pads small{display:block;color:var(--muted);font:10px Arial;margin-top:4px}
.hint{text-align:center;color:var(--muted);font:11px Arial;margin:12px 0}
.main-button{width:100%;height:49px;border:0;background:var(--pink);color:#fff;cursor:pointer;font:700 12px Arial;letter-spacing:.08em;text-transform:uppercase}
.main-button:hover{background:#ff8abd}
.main-button span:first-child{font-size:20px;color:var(--yellow);vertical-align:-2px;margin-right:8px}
.progress{height:3px;background:#343b66;margin-top:18px}
.progress span{display:block;height:100%;width:0;background:var(--cyan);transition:.2s}
.help{text-align:center;color:var(--muted);font-size:9px;margin:13px 0 0}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.notes article{min-height:90px;padding:18px 21px;border-top:1px solid #383f67;display:flex;gap:15px}
.symbol{font-size:23px;color:var(--yellow)}
h2{font-weight:400;font-size:15px;margin:0}
.notes p{color:var(--muted);font-size:13px;line-height:1.45;margin:7px 0 0}
.log{display:block;background:#1c214388}
.log-title{color:var(--cyan);font-size:9px;margin:0!important}
.log-title i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:7px}
#log{font-style:italic}
footer{border-top:1px solid #383f67;padding-top:17px;margin-top:24px;color:var(--muted);font-size:9px}

@media(max-width:800px){
  .shell{width:min(100% - 28px,560px);padding-top:18px}
  .topbar{padding-bottom:38px}
  .meta>span{display:none}
  .intro{display:block;margin-bottom:26px}
  .lead{font-size:15px;margin-bottom:24px}
  .stats{max-width:430px}
  .game-card{padding:15px 14px 18px}
  .scene{height:min(112vw,445px)}
  .bubble{left:4%;max-width:190px}
  .sun{right:8%;width:66px;height:66px}
}
@media(max-width:390px){
  .scene{height:370px}
  .mine{transform:translateX(-50%) scale(.85);transform-origin:50% 100%}
  .kid{transform:translateX(-50%) scale(.5);transform-origin:50% 100%}
  .sound-pads{grid-template-columns:1fr}
}