*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#190c1d;--pink:#ff8ac8;--hot:#ff4fa3;--purple:#8d70ff;--cream:#fff5fb;--ink:#2c122d;--border:#371337;--yellow:#fff26d;--green:#91ffdf;--window:#ffe5f4;--white:#fff}
html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Comic Sans MS",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
button{font:inherit;cursor:pointer}
.noise{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E")}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 12%,rgba(255,138,200,.65),transparent 28rem),radial-gradient(circle at 84% 80%,rgba(141,112,255,.55),transparent 30rem),linear-gradient(135deg,#160b1b,#40193a 55%,#120d1d);z-index:-3}
.floating-words{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.floating-words span{position:absolute;color:rgba(255,255,255,.13);font-size:clamp(28px,8vw,76px);font-weight:1000;letter-spacing:-.08em;text-transform:uppercase;animation:drift 12s ease-in-out infinite}
.floating-words span:nth-child(1){left:3%;top:8%;animation-delay:.1s}.floating-words span:nth-child(2){left:54%;top:12%;animation-delay:1s}.floating-words span:nth-child(3){left:9%;top:36%;animation-delay:2s}.floating-words span:nth-child(4){left:58%;top:42%;animation-delay:3s}.floating-words span:nth-child(5){left:18%;top:58%;animation-delay:4s}.floating-words span:nth-child(6){left:70%;top:72%;animation-delay:5s}.floating-words span:nth-child(7){left:2%;top:82%;animation-delay:6s}.floating-words span:nth-child(8){left:66%;top:26%;animation-delay:7s}.floating-words span:nth-child(9){left:30%;top:88%;animation-delay:8s}.floating-words span:nth-child(10){left:78%;top:5%;animation-delay:9s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-28px) rotate(7deg)}}
.ticker{position:fixed;left:0;width:100%;height:28px;background:var(--yellow);border-top:3px solid var(--border);border-bottom:3px solid var(--border);z-index:80;overflow:hidden;white-space:nowrap;font-weight:1000;font-size:13px}.ticker.top{top:0}.ticker.bottom{bottom:0}.ticker div{display:inline-block;padding-left:100%;animation:ticker 18s linear infinite}.ticker.bottom div{animation-direction:reverse;animation-duration:22s}@keyframes ticker{to{transform:translateX(-100%)}}
.app{width:min(470px,100%);margin:44px auto;padding:10px;border:3px solid rgba(255,255,255,.55);border-radius:34px;background:rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 0 28px rgba(255,255,255,.18);backdrop-filter:blur(14px);position:relative}
.screen{display:none;min-height:calc(100vh - 116px);border-radius:25px;padding:12px;padding-bottom:96px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(135deg,#ffc6e5,#cabaff 56%,#ffb0bd);background-size:28px 28px,28px 28px,cover}.screen.active{display:block}.screen.tall{min-height:820px}
.taskbar{height:36px;border:2px solid var(--border);border-radius:13px;background:linear-gradient(#fff,#ffd4ec);display:flex;align-items:center;justify-content:space-between;padding:0 10px;margin-bottom:16px;box-shadow:4px 4px 0 var(--border);font-size:12px;gap:8px;position:relative;z-index:20}.back{border:2px solid var(--border);border-radius:8px;background:#fff;font-weight:1000}
.window{border:3px solid var(--border);border-radius:18px;background:var(--window);box-shadow:8px 8px 0 var(--border),0 18px 55px rgba(40,0,40,.28);overflow:hidden;position:relative;z-index:5}.topbar{height:36px;background:linear-gradient(90deg,var(--hot),var(--purple));border-bottom:3px solid var(--border);color:#fff;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:1000;text-shadow:1px 1px 0 #000}.topbar span{margin-right:auto}.topbar i{width:13px;height:13px;border:2px solid var(--border);background:var(--yellow);border-radius:50%}.topbar i:nth-of-type(2){background:#ff93c7}.topbar i:nth-of-type(3){background:var(--green)}.body{padding:22px;background:radial-gradient(circle at top right,rgba(255,255,255,.85),transparent 12rem),var(--window)}
.label{margin:0 0 8px;color:#76536d;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.lead,p{line-height:1.55}.lead{font-size:17px;font-weight:900;color:#5b2850}h1{margin:0;font-size:clamp(64px,22vw,102px);line-height:.78;letter-spacing:-.09em;color:#4b1745;text-shadow:3px 3px 0 #fff,6px 6px 0 var(--pink);animation:glitch 4s steps(2,end) infinite}h2{margin:0 0 12px;font-size:clamp(34px,11vw,54px);line-height:.9;letter-spacing:-.07em;color:#4b1745;text-shadow:2px 2px 0 #fff}@keyframes glitch{0%,92%,100%{transform:translate(0)}94%{transform:translate(2px,-1px)}96%{transform:translate(-2px,1px)}}
.terminal{max-height:170px;overflow:auto;margin:18px 0;padding:14px;border:2px dashed var(--border);border-radius:14px;background:rgba(255,255,255,.65);font-family:"Courier New",monospace;font-size:12px}.terminal p{margin:6px 0}.meter-block{font-size:12px;font-weight:1000;text-transform:uppercase}.meter{height:21px;border:3px solid var(--border);border-radius:999px;background:#fff;overflow:hidden;box-shadow:3px 3px 0 var(--border);margin:7px 0 18px}.meter em{display:block;height:100%;width:89%;background:repeating-linear-gradient(45deg,var(--hot) 0 10px,var(--yellow) 10px 20px);animation:hue 1.5s linear infinite}@keyframes hue{to{filter:hue-rotate(360deg)}}
.main-btn,.icon-grid button,.choice-grid button,.control-grid button,.random-grid button,.alert button,.final-buttons button{border:3px solid var(--border);border-radius:14px;background:linear-gradient(#fff,#ffd7ef);color:var(--ink);font-weight:1000;box-shadow:4px 4px 0 var(--border);transition:.15s}.main-btn{padding:13px 18px;font-size:17px}.main-btn:hover,button:hover{filter:brightness(1.05)}button:active{transform:translate(3px,3px)!important;box-shadow:1px 1px 0 var(--border)!important}.floating{position:absolute;right:18px;bottom:18px;z-index:30}
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:20px;position:relative;z-index:8}.icon-grid button{min-height:83px;background:rgba(255,255,255,.5);font-size:27px;display:grid;place-items:center}.icon-grid small{font-size:11px}.mini-note,.scribble,.chaos-label{position:absolute;z-index:6;border:3px solid var(--border);background:var(--yellow);box-shadow:4px 4px 0 var(--border);border-radius:12px;padding:8px 10px;font-size:12px;font-weight:1000;max-width:175px}.note-a{left:16px;bottom:108px;transform:rotate(-7deg)}.note-b{right:16px;bottom:42px;transform:rotate(5deg)}.scribble{background:#fff;right:20px;top:142px;transform:rotate(9deg);font-family:"Comic Sans MS";color:#8c1a65}.s-a{animation:bob 2.2s infinite}
.choice-grid,.control-grid,.random-grid{display:grid;gap:10px;margin-top:16px}.choice-grid button,.control-grid button,.random-grid button{padding:14px;text-align:left}.choice-grid button:nth-child(even),.random-grid button:nth-child(odd){background:linear-gradient(#fff,#e7dcff);transform:rotate(.7deg)}.choice-grid button:nth-child(3n),.control-grid button:nth-child(odd){background:linear-gradient(#fff,#dffff5);transform:rotate(-.7deg)}
.card-pop{margin-top:18px;transform:rotate(-1deg)}.x{border:2px solid var(--border);background:#fff;border-radius:7px;font-weight:1000}.l1{left:22px;bottom:96px}
.l2{right:22px;bottom:138px}
.l3{left:22px;bottom:185px}
.chaos-label{
  animation:bob 2.8s infinite;
  z-index:4;
  opacity:.92;
  pointer-events:none;
}
.l2{animation-delay:.5s}
.l3{animation-delay:1s}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.output{min-height:130px;margin-top:16px;border:3px solid var(--border);border-radius:16px;background:#150c1b;color:#9cffdf;padding:15px;font-family:"Courier New",monospace;box-shadow:inset 0 0 20px rgba(145,255,223,.12),5px 5px 0 var(--border);white-space:pre-wrap}
.orbit{width:170px;height:170px;border:3px dashed var(--border);border-radius:50%;position:absolute;left:50%;bottom:70px;transform:translateX(-50%);animation:spin 9s linear infinite}.orbit span{position:absolute;background:#fff;border:2px solid var(--border);border-radius:999px;padding:4px 8px;font-size:11px;font-weight:1000}.orbit span:nth-child(1){left:50%;top:-14px}.orbit span:nth-child(2){right:-18px;top:50%}.orbit span:nth-child(3){left:50%;bottom:-14px}.orbit span:nth-child(4){left:-28px;top:50%}@keyframes spin{to{rotate:360deg}}
.scrap-title{text-align:center}.scrap-title p{font-weight:900}.scrap-board{min-height:640px;position:relative}.doodle{position:absolute;display:grid;place-items:center;border:3px solid var(--border);background:#fff;box-shadow:5px 5px 0 var(--border);border-radius:50% 45% 55% 40%;width:56px;height:50px;font-size:28px;z-index:9;animation:doodle 2.5s ease-in-out infinite}.d1{left:165px;top:18px}.d2{right:165px;top:185px;animation-delay:.2s}.d3{left:205px;top:310px;animation-delay:.4s}.d4{right:210px;top:365px;animation-delay:.6s}.d5{left:220px;bottom:170px;animation-delay:.8s}.d6{right:230px;bottom:250px;animation-delay:1s}.d7{left:258px;top:470px;animation-delay:1.2s}.d8{right:250px;bottom:90px;animation-delay:1.4s}@keyframes doodle{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -8px;rotate:6deg}}
.polaroid,.sticky,.receipt{position:absolute;border:3px solid var(--border);box-shadow:6px 6px 0 var(--border);background:#fff;border-radius:14px;font-weight:1000}.polaroid{width:138px;padding:9px;text-align:center}.polaroid div{height:100px;display:grid;place-items:center;border:2px solid var(--border);border-radius:10px;background:linear-gradient(135deg,#ffb3d8,#d9ccff);font-size:42px;margin-bottom:8px}.polaroid span{font-size:11px}.redhair{left:8px;top:18px;transform:rotate(-8deg)}.flowers{right:10px;top:60px;transform:rotate(7deg)}.sticky{width:150px;min-height:106px;padding:13px;background:var(--yellow);font-size:14px}.st1{left:32px;top:210px;transform:rotate(5deg)}.st2{right:16px;top:244px;background:#b7ffec;transform:rotate(-4deg)}.st3{left:5px;top:375px;background:#ffd1ed;transform:rotate(-7deg)}.st4{right:4px;top:405px;background:#eadfff;transform:rotate(6deg)}.receipt{left:50%;bottom:18px;transform:translateX(-50%) rotate(-1deg);width:235px;padding:14px;display:grid;gap:7px;font-family:"Courier New";font-size:12px}.receipt b{border-bottom:2px dashed var(--border);padding-bottom:6px;text-transform:uppercase}.tape{position:absolute;left:-32px;right:-32px;top:344px;transform:rotate(-12deg);border:3px solid var(--border);background:repeating-linear-gradient(45deg,var(--yellow) 0 14px,var(--hot) 14px 28px);padding:7px;text-align:center;font-weight:1000;box-shadow:4px 4px 0 var(--border)}.big-scribble{position:absolute;left:44px;bottom:138px;font-family:"Comic Sans MS";font-size:20px;transform:rotate(12deg);color:#7b165f}
.doodle-stage{min-height:300px;position:relative}.big-doodle{position:absolute;display:grid;place-items:center;gap:3px;width:92px;min-height:82px;border:3px solid var(--border);border-radius:22px;background:#fff8fd;box-shadow:5px 5px 0 var(--border);font-size:32px;font-weight:1000;animation:bob 2.8s infinite}.big-doodle small{font-size:10px;text-align:center}.house{left:8px;top:20px;transform:rotate(-7deg)}.spider{right:10px;top:40px;transform:rotate(8deg);animation-delay:.4s}.train{left:120px;top:95px;transform:rotate(3deg);animation-delay:.8s}.maths{right:50px;top:160px;transform:rotate(-5deg);animation-delay:1.1s}.rose{left:42px;top:190px;transform:rotate(6deg);animation-delay:1.4s}.bed{right:130px;top:240px;transform:rotate(-9deg);animation-delay:1.7s}
.alert{border:3px solid var(--border);background:#fff8fd;border-radius:15px;padding:14px;box-shadow:5px 5px 0 var(--border)}.alert button{padding:10px 13px;margin:0 7px 8px 0}.result,.answer{font-size:18px;font-weight:1000;color:#4b1745}.mini-popups{position:relative;min-height:360px;margin-top:18px}.mini{position:absolute;border:3px solid var(--border);background:#fff8fd;border-radius:14px;box-shadow:5px 5px 0 var(--border);padding:12px;width:170px;animation:bob 2.8s infinite}.mini b{display:block;font-size:19px}.mini span{color:#76536d;font-size:12px}.p1{left:4px;top:4px}.p2{right:2px;top:56px;animation-delay:.5s}.p3{left:42px;top:150px;animation-delay:.9s}.p4{right:24px;top:205px;background:#ffe16c;animation-delay:1.1s}.p5{left:18px;top:255px;background:#defff6;animation-delay:.3s}.p6{right:10px;top:310px;background:#ffd7ef;animation-delay:1.5s}
.promise{border:2px dashed var(--border);border-radius:16px;background:rgba(255,255,255,.65);padding:12px 14px;margin:16px 0}.final-buttons{display:grid;gap:11px}.final-buttons button{padding:13px}.end-chaos{min-height:145px;position:relative}.end-chaos span{position:absolute;border:3px solid var(--border);background:#fff;box-shadow:4px 4px 0 var(--border);border-radius:999px;padding:6px 10px;font-weight:1000;animation:bob 2.4s infinite}.end-chaos span:nth-child(1){left:20px;top:18px}.end-chaos span:nth-child(2){right:20px;top:10px;animation-delay:.3s}.end-chaos span:nth-child(3){left:92px;top:64px;animation-delay:.7s}.end-chaos span:nth-child(4){right:72px;top:62px;animation-delay:1s}.end-chaos span:nth-child(5){left:38px;top:105px;animation-delay:1.2s}.end-chaos span:nth-child(6){right:40px;top:112px;animation-delay:1.5s}footer{text-align:center;margin-top:18px;color:rgba(43,19,43,.65);font-size:12px;font-weight:1000}
.side-doodles{position:absolute;inset:0;pointer-events:none;z-index:40}.round-doodle{position:absolute;pointer-events:auto;width:44px;height:44px;border:3px solid var(--border);border-radius:50%;background:#fff;box-shadow:4px 4px 0 var(--border);font-size:22px;display:grid;place-items:center;animation:bob 3s infinite}.round-doodle:nth-child(1){left:-18px;top:120px}
.round-doodle:nth-child(2){right:-18px;top:210px;animation-delay:.4s}
.round-doodle:nth-child(3){left:-17px;top:350px;animation-delay:.9s}
.round-doodle:nth-child(4){right:-20px;top:430px;animation-delay:1.2s}
.round-doodle:nth-child(5){left:-16px;bottom:190px;animation-delay:.2s}
.round-doodle:nth-child(6){right:-16px;bottom:110px;animation-delay:1.6s}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.38);display:grid;place-items:center;padding:18px;z-index:120}.modal-window{width:min(390px,100%);border:3px solid var(--border);border-radius:18px;overflow:hidden;background:var(--window);box-shadow:9px 9px 0 var(--border),0 24px 90px rgba(0,0,0,.45)}
.toast-zone{position:fixed;right:12px;bottom:42px;display:grid;gap:10px;z-index:150;width:min(280px,calc(100% - 24px))}.toast{border:3px solid var(--border);background:#fff;border-radius:14px;padding:11px 13px;box-shadow:5px 5px 0 var(--border);font-weight:1000;animation:toastIn .25s ease,toastOut .35s ease 3.2s forwards}@keyframes toastIn{from{transform:translateX(40px);opacity:0}}@keyframes toastOut{to{transform:translateX(40px);opacity:0}}
.burst{position:fixed;z-index:200;pointer-events:none;font-weight:1000;color:white;text-shadow:2px 2px 0 var(--border);transition:transform 1.35s ease,opacity 1.35s ease}
.hidden{display:none!important}
@media(min-width:780px){.app{width:min(920px,100%)}.screen{min-height:760px;padding:18px}.window.hero,.final-window{width:min(670px,100%);margin-left:auto;margin-right:auto}.icon-grid{width:min(670px,100%);margin-left:auto;margin-right:auto}.choice-grid,.control-grid,.random-grid{grid-template-columns:repeat(2,1fr)}.window:not(.hero):not(.final-window):not(.card-pop){width:min(700px,100%);margin-left:auto;margin-right:auto}.card-pop{width:min(600px,100%);margin-left:auto;margin-right:auto}.scrap-board,.doodle-stage{width:min(700px,100%);margin:0 auto}.redhair{left:60px}.flowers{right:70px}.st1{left:110px}.st2{right:120px}.st3{left:70px}.st4{right:60px}}


/* v6 readability patch: keep chaos, stop it covering the actual website content */
#lore .window {
  z-index: 10;
}

#lore .chaos-label {
  max-width: 140px;
  transform: rotate(-3deg);
}

#lore .l1 {
  left: 22px;
  bottom: 96px;
}

#lore .l2 {
  right: 22px;
  bottom: 146px;
}

#lore .l3 {
  left: 22px;
  bottom: 198px;
}

@media (min-width: 780px) {
  #lore .chaos-label {
    opacity: .95;
  }

  #lore .l1 {
    left: 34px;
    bottom: 112px;
  }

  #lore .l2 {
    right: 34px;
    bottom: 178px;
  }

  #lore .l3 {
    left: 34px;
    bottom: 244px;
  }

  .round-doodle:nth-child(1),
  .round-doodle:nth-child(3),
  .round-doodle:nth-child(5) {
    left: -26px;
  }

  .round-doodle:nth-child(2),
  .round-doodle:nth-child(4),
  .round-doodle:nth-child(6) {
    right: -26px;
  }
}

@media (max-width: 520px) {
  .chaos-label {
    font-size: 10px;
    padding: 6px 8px;
    opacity: .82;
    max-width: 112px;
  }

  #lore .l1 {
    left: 14px;
    bottom: 82px;
  }

  #lore .l2 {
    right: 14px;
    bottom: 126px;
  }

  #lore .l3 {
    left: 14px;
    bottom: 170px;
  }

  .round-doodle {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .floating {
    right: 14px;
    bottom: 14px;
  }
}

/* keep fixed toast notifications from hiding the main continue buttons */
.toast-zone {
  bottom: 76px;
}


/* v7: make the final note impossible to miss */
.note-warning-screen {
  min-height: 980px;
}

.final-cta-panel {
  position: relative;
  z-index: 40;
  width: min(620px, calc(100% - 24px));
  margin: 28px auto 20px;
  border: 4px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 12rem),
    linear-gradient(135deg, #fff26d, #ff8ac8 55%, #d9ccff);
  box-shadow: 9px 9px 0 var(--border), 0 18px 50px rgba(40,0,40,.25);
  padding: 18px;
  text-align: center;
  animation: ctaShake 2.4s ease-in-out infinite;
}

.arrow-row {
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: .2em;
  color: #4b1745;
  text-shadow: 3px 3px 0 #fff;
  animation: arrowBounce 1s ease-in-out infinite;
}

.cta-kicker {
  margin: 6px 0 14px;
  font-size: 18px;
  font-weight: 1000;
  color: #4b1745;
}

.final-cta-btn {
  position: relative;
  display: block;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 18px 18px;
  font-size: clamp(18px, 4vw, 24px);
  background: linear-gradient(180deg, #fff, #ffd7ef);
  animation: notePulse 1.05s ease-in-out infinite;
}

.final-cta-btn::before,
.final-cta-btn::after {
  content: "♡";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--hot);
  text-shadow: 2px 2px 0 #fff;
}

.final-cta-btn::before {
  left: -34px;
}

.final-cta-btn::after {
  right: -34px;
}

.cta-small {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 1000;
  color: #5b2850;
}

.note-arrived {
  width: min(620px, 100%);
  margin: 8px auto 16px;
  border: 3px solid var(--border);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 1000;
  text-align: center;
  animation: notePulse 1.4s ease-in-out infinite;
}

.note-arrived span {
  color: var(--hot);
  font-size: 22px;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes notePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.08); }
}

@keyframes ctaShake {
  0%, 90%, 100% { transform: rotate(-1deg); }
  93% { transform: rotate(1.5deg) translateX(2px); }
  96% { transform: rotate(-1deg) translateX(-2px); }
}

@media (max-width: 520px) {
  .note-warning-screen {
    min-height: 1040px;
  }

  .final-cta-panel {
    margin-top: 24px;
    padding: 15px;
  }

  .arrow-row {
    font-size: 34px;
  }

  .cta-kicker {
    font-size: 16px;
  }

  .final-cta-btn::before,
  .final-cta-btn::after {
    display: none;
  }
}


/* v8: 30% less cringe pass */
.floating-words span {
  opacity: .72;
}

.ticker {
  opacity: .92;
}

.mini-note,
.chaos-label,
.scribble {
  opacity: .86;
}

.final-cta-panel {
  animation: none !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 12rem),
    linear-gradient(135deg, #fff8fd, #ffd7ef 55%, #eadfff) !important;
  box-shadow: 7px 7px 0 var(--border), 0 14px 36px rgba(40,0,40,.18) !important;
}

.arrow-row {
  font-size: 28px !important;
  opacity: .75;
  animation-duration: 1.6s !important;
}

.cta-kicker {
  font-size: 16px !important;
}

.final-cta-btn {
  animation: softPulse 1.8s ease-in-out infinite !important;
  font-size: clamp(17px, 3.2vw, 21px) !important;
  padding: 15px 18px !important;
}

.note-arrived {
  animation: none !important;
  background: #fff8fd !important;
}

@keyframes softPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.018); filter: brightness(1.03); }
}

h1 {
  animation-duration: 7s !important;
}

.end-chaos span {
  opacity: .82;
}


/* v9: all button result popups open in the middle of the screen */
.card-pop {
  display: none !important;
}

.modal {
  align-items: center;
  justify-items: center;
}

.modal-window {
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(70vh, 560px);
  overflow: auto;
  transform: scale(.96);
  animation: modalPop .18s ease forwards;
}

.modal .body {
  font-size: clamp(16px, 3.8vw, 19px);
}

.modal .body p {
  margin: 0;
}

.modal .topbar {
  position: sticky;
  top: 0;
  z-index: 2;
}

@keyframes modalPop {
  from {
    transform: scale(.9) translateY(18px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 520px) {
  .modal {
    padding: 14px;
  }

  .modal-window {
    width: calc(100vw - 28px) !important;
    max-height: 72vh;
  }
}

.modal .body p { white-space: pre-line; }


/* v10: move the final note CTA higher and keep nearby floating boxes out of the way */
#popups.note-warning-screen {
  min-height: 1060px;
}

#popups .final-cta-panel {
  margin-top: 18px !important;
  margin-bottom: 260px !important;
  position: relative;
  z-index: 60;
}

#popups .mini-popups {
  min-height: 510px;
  margin-top: 24px;
}

/* push mini boxes away from the central CTA zone */
#popups .p1 { left: 20px !important; top: 10px !important; }
#popups .p2 { right: 18px !important; top: 72px !important; }
#popups .p3 { left: 50px !important; top: 170px !important; }
#popups .p4 { right: 36px !important; top: 255px !important; }
#popups .p5 { left: 28px !important; top: 320px !important; }
#popups .p6 { right: 26px !important; top: 390px !important; }

/* keep CTA visually above everything else */
#popups .final-cta-btn {
  z-index: 70;
}

@media (min-width: 780px) {
  #popups.note-warning-screen {
    min-height: 980px;
  }

  #popups .final-cta-panel {
    margin-top: 14px !important;
    transform: translateY(-18px);
  }

  #popups .mini-popups {
    min-height: 480px;
  }

  #popups .p1 { left: 36px !important; top: 0 !important; }
  #popups .p2 { right: 36px !important; top: 70px !important; }
  #popups .p3 { left: 76px !important; top: 170px !important; }
  #popups .p4 { right: 72px !important; top: 250px !important; }
  #popups .p5 { left: 52px !important; top: 320px !important; }
  #popups .p6 { right: 52px !important; top: 385px !important; }
}

@media (max-width: 520px) {
  #popups.note-warning-screen {
    min-height: 1100px;
  }

  #popups .final-cta-panel {
    margin-top: 12px !important;
    margin-bottom: 240px !important;
  }

  #popups .mini-popups {
    min-height: 520px;
  }

  #popups .p1 { left: 10px !important; top: 8px !important; }
  #popups .p2 { right: 10px !important; top: 82px !important; }
  #popups .p3 { left: 16px !important; top: 185px !important; }
  #popups .p4 { right: 14px !important; top: 278px !important; }
  #popups .p5 { left: 12px !important; top: 355px !important; }
  #popups .p6 { right: 12px !important; top: 430px !important; }
}


/* v11: dedicated note-gate page so the final note cannot be missed */
#popups.note-warning-screen {
  min-height: 860px !important;
}

#popups .mini-popups {
  min-height: 390px !important;
}

#popups .floating {
  font-size: 18px;
  padding: 15px 18px;
  animation: softPulse 1.4s ease-in-out infinite;
}

.note-gate-screen {
  min-height: calc(100vh - 116px);
  display: none;
  place-items: center;
}

.note-gate-screen.active {
  display: grid;
}

.note-gate-screen .taskbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
}

.note-gate-wrap {
  width: min(680px, 100%);
  margin: 74px auto 20px;
  position: relative;
  z-index: 20;
}

.note-gate-window {
  width: min(620px, 100%);
  margin: 0 auto;
  text-align: center;
  transform: rotate(-.6deg);
}

.note-gate-window h2 {
  font-size: clamp(48px, 12vw, 82px);
}

.gate-text {
  font-size: clamp(17px, 4vw, 21px);
  font-weight: 900;
  color: #4b1745;
  max-width: 500px;
  margin: 0 auto 16px;
}

.gate-arrows {
  font-size: clamp(38px, 10vw, 62px);
  font-weight: 1000;
  color: #4b1745;
  text-shadow: 3px 3px 0 white;
  letter-spacing: .18em;
  animation: arrowBounce .85s ease-in-out infinite;
  margin: 6px 0 10px;
}

.note-gate-btn {
  display: block;
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 20px 18px !important;
  font-size: clamp(23px, 6vw, 34px) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fff, #ffd1eb) !important;
  animation: noteGatePulse 1.1s ease-in-out infinite !important;
}

.gate-small {
  margin: 18px auto 0;
  max-width: 440px;
  color: #6b4a63;
  font-size: 14px;
  font-weight: 900;
}

.gate-sticker {
  position: absolute;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 1000;
  z-index: 30;
  animation: bob 2.6s ease-in-out infinite;
}

.g1 {
  left: 4%;
  top: 18%;
  background: #fff8fd;
  color: var(--hot);
  font-size: 28px;
}

.g2 {
  right: 4%;
  top: 28%;
  transform: rotate(5deg);
}

.g3 {
  left: 8%;
  bottom: 14%;
  transform: rotate(-5deg);
  background: #dffff5;
}

.gate-floor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
}

.gate-floor span {
  border: 3px solid var(--border);
  background: rgba(255,255,255,.78);
  box-shadow: 4px 4px 0 var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
}

@keyframes noteGatePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.08); }
}

@media (max-width: 520px) {
  .note-gate-wrap {
    margin-top: 70px;
  }

  .note-gate-window .body {
    padding: 20px 16px;
  }

  .gate-sticker {
    font-size: 11px;
    padding: 6px 9px;
  }

  .g1 {
    font-size: 22px;
    left: -2%;
    top: 14%;
  }

  .g2 {
    right: -3%;
    top: 25%;
  }

  .g3 {
    left: 0;
    bottom: 10%;
  }

  .gate-small {
    font-size: 12px;
  }
}


/* v13: dancing monkey added to the final note */
.monkey-note {
  width: min(220px, 80%);
  margin: 18px auto 20px;
  border: 3px solid var(--border);
  border-radius: 18px;
  background: #fff8fd;
  box-shadow: 6px 6px 0 var(--border);
  padding: 12px;
  text-align: center;
  transform: rotate(-2deg);
  animation: monkeyBob 1.8s ease-in-out infinite;
}

.monkey-note img {
  display: block;
  width: min(150px, 100%);
  height: auto;
  margin: 0 auto 8px;
  image-rendering: pixelated;
}

.monkey-note span {
  display: block;
  font-size: 12px;
  font-weight: 1000;
  color: #5b2850;
}

@keyframes monkeyBob {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-5px); }
}


/* v14: Doodle Jump mini-game page */
.doodle-game-screen {
  min-height: 920px;
}

.doodle-window {
  width: min(650px, 100%);
  margin: 0 auto;
}

.doodle-intro {
  font-weight: 900;
  color: #4b1745;
}

.game-wrap {
  width: min(330px, 100%);
  margin: 16px auto 10px;
  position: relative;
  border: 4px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #fefaff, #dffff5);
  box-shadow: 7px 7px 0 var(--border);
  overflow: hidden;
}

#doodleCanvas {
  display: block;
  width: 100%;
  height: auto;
  background:
    linear-gradient(90deg, rgba(58,19,55,.08) 1px, transparent 1px),
    linear-gradient(rgba(58,19,55,.08) 1px, transparent 1px),
    linear-gradient(180deg, #fff8fd, #e4dcff);
  background-size: 24px 24px, 24px 24px, cover;
}

.game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,248,253,.88);
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  z-index: 5;
}

.game-overlay b {
  font-size: 34px;
  color: #4b1745;
  letter-spacing: -.06em;
}

.game-overlay span {
  font-weight: 900;
  color: #5b2850;
}

.game-overlay button,
.mobile-controls button {
  border: 3px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(#fff, #ffd7ef);
  box-shadow: 4px 4px 0 var(--border);
  font-weight: 1000;
  padding: 12px 18px;
}

.game-hud {
  width: min(330px, 100%);
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 1000;
  font-size: 14px;
}

.mobile-controls {
  width: min(330px, 100%);
  margin: 8px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mobile-controls button {
  font-size: 24px;
  padding: 12px;
}

.doodle-message {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: #5b2850;
}

.doodle-continue {
  display: block;
  width: min(330px, 100%);
  margin: 14px auto 0;
}

.doodle-continue.locked {
  opacity: .55;
  filter: grayscale(.35);
  pointer-events: none;
}

.doodle-lore-card {
  position: absolute;
  z-index: 4;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
  animation: bob 2.8s ease-in-out infinite;
}

.dl1 { left: 20px; bottom: 130px; transform: rotate(-6deg); }
.dl2 { right: 18px; bottom: 190px; transform: rotate(5deg); animation-delay: .5s; }
.dl3 { left: 44px; bottom: 250px; transform: rotate(3deg); animation-delay: 1s; background: #dffff5; }

@media (min-width: 780px) {
  .doodle-game-screen {
    min-height: 900px;
  }
}

@media (max-width: 520px) {
  .doodle-game-screen {
    min-height: 930px;
  }
  .doodle-lore-card {
    font-size: 10px;
    padding: 6px 9px;
  }
}


/* v15: hero ick button + GD modal */
.ick-btn {
  display: block;
  margin-top: 12px;
  border: 3px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(#fff, #fff26d);
  color: var(--ink);
  font-weight: 1000;
  box-shadow: 4px 4px 0 var(--border);
  padding: 11px 14px;
  transform: rotate(-1deg);
}

.gd-modal-window {
  width: min(680px, calc(100vw - 28px)) !important;
}

.gd-body {
  text-align: center;
}

.gd-img {
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin: 12px auto 16px;
  border: 3px solid var(--border);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--border);
}

.gd-body p {
  font-weight: 900;
  color: #4b1745;
}

.gd-small {
  font-size: 13px;
  color: #6b4a63 !important;
}

/* v15: Instagram emoji pong page */
.pong-screen {
  min-height: 920px;
}

.pong-window {
  width: min(650px, 100%);
  margin: 0 auto;
}

.pong-intro {
  font-weight: 900;
  color: #4b1745;
}

.pong-wrap {
  width: min(330px, 100%);
  margin: 16px auto 10px;
  position: relative;
  border: 4px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff8fd, #e4dcff);
  box-shadow: 7px 7px 0 var(--border);
  overflow: hidden;
}

#pongCanvas {
  display: block;
  width: 100%;
  height: auto;
  background:
    radial-gradient(circle at top left, rgba(255,79,163,.20), transparent 9rem),
    radial-gradient(circle at bottom right, rgba(141,112,255,.20), transparent 9rem),
    linear-gradient(180deg, #fff8fd, #eadfff);
}

.pg1 { left: 20px; bottom: 130px; transform: rotate(-6deg); background: #ffd7ef; }
.pg2 { right: 18px; bottom: 190px; transform: rotate(5deg); animation-delay: .5s; }
.pg3 { left: 44px; bottom: 250px; transform: rotate(3deg); animation-delay: 1s; background: #dffff5; }

@media (max-width: 520px) {
  .gd-modal-window {
    width: calc(100vw - 28px) !important;
  }

  .pong-screen {
    min-height: 930px;
  }
}


/* v17: prevent mobile text selection during games */
.mobile-controls,
.mobile-controls button,
.game-wrap,
.pong-wrap,
#doodleCanvas,
#pongCanvas,
.game-overlay,
.game-overlay button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#doodleCanvas,
#pongCanvas {
  touch-action: none;
}

.mobile-controls button {
  font-size: 0 !important;
  position: relative;
  height: 58px;
  display: grid;
  place-items: center;
}

.mobile-controls button::before {
  font-size: 30px;
  line-height: 1;
  font-weight: 1000;
  color: var(--ink);
}

#moveLeftBtn::before,
#pongLeftBtn::before {
  content: "‹";
}

#moveRightBtn::before,
#pongRightBtn::before {
  content: "›";
}

/* v17: dedicated enter screen */
.enter-screen {
  min-height: calc(100vh - 116px);
}

.enter-window {
  width: min(650px, 100%);
  margin: 46px auto 0;
  text-align: center;
  transform: rotate(-.5deg);
}

.enter-title {
  font-size: clamp(70px, 20vw, 120px);
  margin-bottom: 18px;
}

.enter-message {
  width: min(500px, 100%);
  margin: 0 auto 22px;
  border: 3px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  box-shadow: 5px 5px 0 var(--border);
  padding: 16px;
}

.enter-message p {
  margin: 0 0 10px;
  font-weight: 900;
  color: #4b1745;
}

.enter-message p:last-child {
  margin-bottom: 0;
}

.enter-btn {
  display: block;
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 18px !important;
  font-size: clamp(20px, 5vw, 28px) !important;
  animation: softPulse 1.55s ease-in-out infinite;
}

.enter-small {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 900;
  color: #6b4a63;
}

.enter-float {
  position: absolute;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
  z-index: 8;
  animation: bob 2.8s ease-in-out infinite;
}

.ef1 {
  left: 22px;
  bottom: 160px;
  transform: rotate(-6deg);
}

.ef2 {
  right: 20px;
  bottom: 230px;
  transform: rotate(5deg);
  animation-delay: .5s;
}

.ef3 {
  left: 46px;
  top: 112px;
  background: #dffff5;
  transform: rotate(4deg);
  animation-delay: 1s;
}

@media (min-width: 780px) {
  .enter-window {
    margin-top: 70px;
  }
}

@media (max-width: 520px) {
  .enter-window {
    margin-top: 34px;
  }

  .enter-message {
    padding: 14px;
  }

  .enter-float {
    font-size: 10px;
    padding: 6px 9px;
  }

  .ef1 {
    left: 12px;
    bottom: 122px;
  }

  .ef2 {
    right: 12px;
    bottom: 178px;
  }

  .ef3 {
    left: 18px;
    top: 94px;
  }
}


/* v18: move little toast popups to top-right so they don't block DALEJ buttons */
.toast-zone {
  top: 46px !important;
  right: 12px !important;
  bottom: auto !important;
  align-content: start;
}

.toast {
  animation: toastTopIn .25s ease, toastTopOut .35s ease 3.2s forwards !important;
}

@keyframes toastTopIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}

@keyframes toastTopOut {
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .toast-zone {
    top: 40px !important;
    right: 8px !important;
    width: min(245px, calc(100% - 16px)) !important;
  }

  .toast {
    font-size: 12px;
    padding: 9px 11px;
  }
}


/* v20: ridiculous Yeat finish page */
.finish-btn {
  display: block;
  width: min(330px, 100%);
  margin: 18px auto 0;
  background: linear-gradient(#fff, #fff26d) !important;
  animation: softPulse 1.35s ease-in-out infinite;
}

.yeat-screen {
  min-height: 960px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,242,109,.35), transparent 18rem),
    radial-gradient(circle at 80% 70%, rgba(255,79,163,.35), transparent 20rem),
    linear-gradient(135deg, #0b0712, #301139 55%, #15091d) !important;
  color: white;
  overflow: hidden;
}

.yeat-warning {
  width: min(700px, 100%);
  margin: 18px auto;
  border: 4px solid var(--border);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 1000;
  text-align: center;
  font-size: clamp(16px, 4vw, 24px);
  animation: noteGatePulse .85s ease-in-out infinite;
  position: relative;
  z-index: 12;
}

.yeat-window {
  width: min(650px, 100%);
  margin: 0 auto 22px;
  transform: rotate(-1deg);
  position: relative;
  z-index: 10;
}

.yeat-body {
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(255,242,109,.35), transparent 10rem),
    radial-gradient(circle at bottom right, rgba(255,79,163,.28), transparent 12rem),
    #180d20 !important;
  color: white;
}

.yeat-body .label {
  color: #fff26d;
}

.yeat-body h2 {
  color: white;
  text-shadow: 3px 3px 0 #ff4fa3, 6px 6px 0 #371337;
  font-size: clamp(46px, 14vw, 92px);
}

.yeat-sub {
  color: #fff;
  font-weight: 1000;
  font-size: clamp(17px, 4vw, 22px);
}

.yeat-audio-btn {
  display: block;
  width: min(390px, 100%);
  margin: 14px auto 0;
  background: linear-gradient(#fff26d, #ff8ac8) !important;
  font-size: clamp(16px, 4vw, 22px);
}

.yeat-audio-btn.stop {
  background: linear-gradient(#fff, #dffff5) !important;
  font-size: 15px;
}

.yeat-gallery {
  width: min(740px, 100%);
  margin: 26px auto 0;
  min-height: 460px;
  position: relative;
  z-index: 8;
}

.yeat-card {
  position: absolute;
  width: 150px;
  min-height: 108px;
  border: 4px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,215,239,.96));
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--border);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  animation: yeatCard 2.2s ease-in-out infinite;
}

.yeat-card b {
  font-size: 25px;
  letter-spacing: -.06em;
}

.yeat-card span {
  font-size: 12px;
  font-weight: 1000;
  color: #5b2850;
}

.yc1 { left: 2%; top: 0; transform: rotate(-8deg); }
.yc2 { right: 5%; top: 22px; transform: rotate(7deg); animation-delay: .2s; }
.yc3 { left: 30%; top: 85px; transform: rotate(-2deg); animation-delay: .4s; }
.yc4 { left: 6%; top: 190px; transform: rotate(5deg); animation-delay: .6s; }
.yc5 { right: 8%; top: 205px; transform: rotate(-6deg); animation-delay: .8s; }
.yc6 { left: 36%; top: 285px; transform: rotate(4deg); animation-delay: 1s; }
.yc7 { left: 0; top: 350px; transform: rotate(-3deg); animation-delay: 1.2s; }
.yc8 { right: 2%; top: 355px; transform: rotate(6deg); animation-delay: 1.4s; }

@keyframes yeatCard {
  0%, 100% { translate: 0 0; filter: hue-rotate(0); }
  50% { translate: 0 -10px; filter: hue-rotate(35deg); }
}

.yeat-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.yeat-rain span {
  position: absolute;
  font-weight: 1000;
  color: rgba(255,255,255,.12);
  font-size: clamp(36px, 10vw, 90px);
  letter-spacing: -.08em;
  animation: yeatRain 5s linear infinite;
}

.yeat-rain span:nth-child(1) { left: 3%; top: -10%; animation-delay: 0s; }
.yeat-rain span:nth-child(2) { left: 28%; top: -20%; animation-delay: .5s; }
.yeat-rain span:nth-child(3) { left: 62%; top: -12%; animation-delay: 1s; }
.yeat-rain span:nth-child(4) { left: 82%; top: -25%; animation-delay: 1.5s; }
.yeat-rain span:nth-child(5) { left: 12%; top: -30%; animation-delay: 2s; }
.yeat-rain span:nth-child(6) { left: 42%; top: -18%; animation-delay: 2.5s; }
.yeat-rain span:nth-child(7) { left: 70%; top: -32%; animation-delay: 3s; }
.yeat-rain span:nth-child(8) { left: 20%; top: -15%; animation-delay: 3.5s; }
.yeat-rain span:nth-child(9) { left: 52%; top: -28%; animation-delay: 4s; }
.yeat-rain span:nth-child(10) { left: 88%; top: -10%; animation-delay: 4.5s; }

@keyframes yeatRain {
  to {
    transform: translateY(115vh) rotate(20deg);
  }
}

@media (max-width: 520px) {
  .yeat-screen {
    min-height: 1040px;
  }

  .yeat-gallery {
    min-height: 560px;
  }

  .yeat-card {
    width: 128px;
    min-height: 94px;
  }

  .yeat-card b {
    font-size: 21px;
  }

  .yc3 { left: 26%; top: 105px; }
  .yc4 { left: 3%; top: 220px; }
  .yc5 { right: 3%; top: 230px; }
  .yc6 { left: 30%; top: 345px; }
  .yc7 { left: 4%; top: 455px; }
  .yc8 { right: 4%; top: 460px; }
}


/* v21: real Yeat audio + green final page theme */
.yeat-screen {
  background:
    radial-gradient(circle at 18% 16%, rgba(111, 255, 0, .35), transparent 18rem),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 153, .28), transparent 22rem),
    linear-gradient(135deg, #030802, #0e2b0c 50%, #061307) !important;
}

.yeat-screen .taskbar {
  background: linear-gradient(#f2ffe9, #b8ff80) !important;
}

.yeat-warning {
  background: linear-gradient(135deg, #b7ff00, #62ff72) !important;
  color: #071306 !important;
}

.yeat-window .topbar {
  background: linear-gradient(90deg, #21b000, #98ff1f) !important;
  color: #071306 !important;
  text-shadow: none !important;
}

.yeat-body {
  background:
    radial-gradient(circle at top left, rgba(142,255,80,.35), transparent 10rem),
    radial-gradient(circle at bottom right, rgba(0,255,132,.24), transparent 12rem),
    #061307 !important;
}

.yeat-body h2 {
  color: #d6ff7a !important;
  text-shadow: 3px 3px 0 #0f7d00, 6px 6px 0 #071306 !important;
}

.yeat-body .label,
.yeat-sub {
  color: #d6ff7a !important;
}

.yeat-autoplay-note {
  width: min(430px, 100%);
  margin: 12px auto 14px;
  border: 3px solid #071306;
  border-radius: 16px;
  background: rgba(214,255,122,.14);
  color: #eaffc9 !important;
  box-shadow: 5px 5px 0 #071306;
  padding: 12px;
  font-weight: 1000;
}

.yeat-audio-btn.stop {
  background: linear-gradient(#d6ff7a, #7bff55) !important;
  color: #071306 !important;
}

.yeat-card {
  border-color: #071306 !important;
  box-shadow: 7px 7px 0 #071306 !important;
  background: linear-gradient(135deg, rgba(236,255,216,.98), rgba(151,255,122,.96)) !important;
}

.yeat-card span {
  color: #163b0e !important;
}

.yeat-img-card {
  overflow: hidden;
  padding: 8px !important;
}

.yeat-img-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  display: block;
  border: 3px solid #071306;
  border-radius: 12px;
  margin-bottom: 7px;
}

.yeat-img-card span {
  display: block;
  font-size: 11px;
}

.yeat-rain span {
  color: rgba(182,255,90,.16) !important;
}

@media (max-width: 520px) {
  .yeat-img-card img {
    height: 96px;
  }
}


/* v22: cleaner Yeat page */
.yeat-autoplay-note {
  display: none !important;
}

.yeat-main-title {
  font-size: clamp(82px, 22vw, 160px) !important;
  line-height: .75 !important;
  letter-spacing: -.12em !important;
  margin: 8px 0 6px !important;
}

.sorry-sub {
  display: inline-block;
  border: 4px solid #071306;
  border-radius: 999px;
  background: #d6ff7a;
  color: #071306 !important;
  box-shadow: 6px 6px 0 #071306;
  padding: 8px 14px;
  transform: rotate(-2deg);
  animation: yeatCard 1.6s ease-in-out infinite;
}

.sorry-bg-text {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%) rotate(-7deg);
  width: 140%;
  text-align: center;
  font-size: clamp(58px, 16vw, 150px);
  line-height: .8;
  font-weight: 1000;
  letter-spacing: -.11em;
  color: rgba(214, 255, 122, .12);
  text-shadow: 4px 4px 0 rgba(0,0,0,.18);
  z-index: 0;
  pointer-events: none;
}

.yeat-window {
  margin-bottom: 8px !important;
}

.yeat-gallery.image-gallery {
  margin-top: 4px !important;
  transform: translateY(-16px);
}

.yeat-card {
  animation-duration: 1.8s !important;
}

@media (min-width: 780px) {
  .yeat-gallery.image-gallery {
    transform: translateY(-28px);
    min-height: 420px;
  }
}

@media (max-width: 520px) {
  .sorry-bg-text {
    top: 120px;
    font-size: clamp(50px, 18vw, 90px);
  }

  .yeat-gallery.image-gallery {
    transform: translateY(-10px);
  }

  .yeat-main-title {
    font-size: clamp(76px, 25vw, 120px) !important;
  }
}


/* v23: aggressive flying Yeat assets + more inventor of music text */
.aggressive-yeat-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
  overflow: hidden;
}

.fly-yeat {
  position: absolute;
  width: clamp(82px, 18vw, 180px);
  height: auto;
  border: 3px solid #071306;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #071306;
  object-fit: cover;
  opacity: .95;
  filter: saturate(1.35) contrast(1.08);
}

.fy1 { top: 12%; left: -28%; animation: flyAcrossA 2.4s linear infinite; }
.fy2 { top: 26%; right: -32%; animation: flyAcrossB 2.8s linear infinite .15s; }
.fy3 { top: 44%; left: -34%; animation: flyAcrossA 3.1s linear infinite .35s; }
.fy4 { top: 62%; right: -36%; animation: flyAcrossB 2.5s linear infinite .55s; }
.fy5 { top: 76%; left: -30%; animation: flyAcrossA 2.7s linear infinite .8s; }
.fy6 { top: 8%; right: -38%; animation: flyAcrossB 3.2s linear infinite 1.05s; }
.fy7 { top: 34%; left: -36%; animation: flyAcrossA 2.2s linear infinite 1.3s; }
.fy8 { top: 52%; right: -33%; animation: flyAcrossB 2.9s linear infinite 1.55s; }
.fy9 { top: 86%; left: -40%; animation: flyAcrossA 3.4s linear infinite 1.8s; }
.fy10 { top: 18%; right: -44%; animation: flyAcrossB 2.35s linear infinite 2s; }

@keyframes flyAcrossA {
  0% { transform: translateX(0) rotate(-22deg) scale(.75); }
  50% { transform: translateX(72vw) rotate(18deg) scale(1.12); }
  100% { transform: translateX(145vw) rotate(42deg) scale(.85); }
}

@keyframes flyAcrossB {
  0% { transform: translateX(0) rotate(22deg) scale(.8); }
  50% { transform: translateX(-72vw) rotate(-18deg) scale(1.18); }
  100% { transform: translateX(-145vw) rotate(-44deg) scale(.86); }
}

.inventor-spam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.inventor-spam span {
  position: absolute;
  white-space: nowrap;
  font-weight: 1000;
  letter-spacing: -.08em;
  color: rgba(214, 255, 122, .20);
  text-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-size: clamp(32px, 8vw, 88px);
  animation: inventorSlide 5s linear infinite;
}

.inventor-spam span:nth-child(1) { top: 8%; left: -80%; animation-delay: 0s; }
.inventor-spam span:nth-child(2) { top: 24%; left: -100%; animation-delay: .8s; }
.inventor-spam span:nth-child(3) { top: 42%; left: -90%; animation-delay: 1.6s; }
.inventor-spam span:nth-child(4) { top: 58%; left: -140%; animation-delay: 2.4s; }
.inventor-spam span:nth-child(5) { top: 74%; left: -110%; animation-delay: 3.2s; }
.inventor-spam span:nth-child(6) { top: 88%; left: -90%; animation-delay: 4s; }

@keyframes inventorSlide {
  to { transform: translateX(210vw) rotate(-3deg); }
}

.inventor-line {
  width: min(520px, 100%);
  margin: 12px auto 4px;
  border: 3px solid #071306;
  border-radius: 999px;
  background: rgba(214, 255, 122, .20);
  color: #d6ff7a !important;
  box-shadow: 5px 5px 0 #071306;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 1000;
  text-transform: uppercase;
}

.yeat-window,
.yeat-warning,
.yeat-gallery {
  position: relative;
  z-index: 20;
}

@media (max-width: 520px) {
  .fly-yeat {
    width: clamp(74px, 26vw, 125px);
  }

  .aggressive-yeat-layer {
    z-index: 17;
  }

  .inventor-spam span {
    font-size: clamp(28px, 11vw, 58px);
  }
}


/* v24: Yeat page becomes a different dark green rave page */
.yeat-screen {
  min-height: 100vh !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(74,255,0,.55), transparent 17rem),
    radial-gradient(circle at 82% 34%, rgba(0,255,132,.35), transparent 18rem),
    radial-gradient(circle at 55% 88%, rgba(214,255,122,.25), transparent 16rem),
    linear-gradient(135deg, #010501 0%, #062606 42%, #020b02 100%) !important;
  color: #d6ff7a !important;
  overflow: hidden !important;
  font-family: Impact, "Arial Black", system-ui, sans-serif !important;
}

.yeat-screen .taskbar { display: none !important; }

.yeat-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 0 94%, rgba(214,255,122,.20) 95%),
    linear-gradient(90deg, transparent 0 94%, rgba(214,255,122,.12) 95%);
  background-size: 38px 38px;
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}

.yeat-screen::after {
  content: "INVENTOR OF MUSIC • INVENTOR OF MUSIC • INVENTOR OF MUSIC •";
  position: absolute;
  left: -10%;
  bottom: 18px;
  width: 130%;
  white-space: nowrap;
  font-size: clamp(22px, 5vw, 60px);
  font-weight: 1000;
  letter-spacing: -.06em;
  color: rgba(214,255,122,.20);
  transform: rotate(-4deg);
  animation: yeatBottomCrawl 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes yeatBottomCrawl { to { transform: translateX(-35%) rotate(-4deg); } }

.yeat-warning {
  margin: 0 auto !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #d6ff7a !important;
  color: #061307 !important;
  box-shadow: 0 7px 0 #071306 !important;
  padding: 16px 10px !important;
  font-size: clamp(22px, 6vw, 64px) !important;
  letter-spacing: -.06em;
  text-transform: uppercase;
  position: relative;
  z-index: 40;
}

.sorry-bg-text {
  top: 92px !important;
  color: rgba(214,255,122,.16) !important;
  font-size: clamp(62px, 17vw, 180px) !important;
  z-index: 1 !important;
}

.yeat-window {
  width: min(760px, calc(100% - 24px)) !important;
  margin: 42px auto 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 45 !important;
}

.yeat-window .topbar { display: none !important; }

.yeat-body {
  background: rgba(0,0,0,.55) !important;
  border: 3px solid #d6ff7a !important;
  border-radius: 28px !important;
  box-shadow: 0 0 34px rgba(214,255,122,.38), inset 0 0 28px rgba(214,255,122,.14) !important;
  backdrop-filter: blur(8px);
  padding: clamp(22px, 5vw, 42px) !important;
}

.yeat-body .label { display: none !important; }

.yeat-main-title {
  color: #d6ff7a !important;
  font-size: clamp(100px, 26vw, 230px) !important;
  letter-spacing: -.10em !important;
  line-height: .72 !important;
  text-shadow: 0 0 18px rgba(214,255,122,.8), 8px 8px 0 #000 !important;
  margin: 0 !important;
}

.sorry-sub {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: clamp(28px, 7vw, 72px) !important;
  letter-spacing: -.05em;
  padding: 0 !important;
  text-shadow: 4px 4px 0 #0f7d00, 0 0 16px rgba(214,255,122,.7);
  animation: yeatTextPunch .9s steps(2, end) infinite !important;
}

@keyframes yeatTextPunch {
  0%, 100% { transform: translate(0,0) rotate(-1deg); }
  50% { transform: translate(4px,-3px) rotate(1deg); }
}

.inventor-line {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #d6ff7a !important;
  font-size: clamp(16px, 4vw, 34px) !important;
  letter-spacing: -.04em;
  animation: inventorFlash .55s steps(2, end) infinite;
}

@keyframes inventorFlash { 50% { opacity: .35; transform: scale(1.03); } }

.yeat-audio-btn.stop {
  border: 3px solid #d6ff7a !important;
  border-radius: 999px !important;
  background: #061307 !important;
  color: #d6ff7a !important;
  box-shadow: 0 0 22px rgba(214,255,122,.55) !important;
  text-transform: uppercase;
}

.yeat-gallery.image-gallery {
  width: min(920px, calc(100% - 18px)) !important;
  margin: -4px auto 0 !important;
  min-height: 340px !important;
  transform: none !important;
  z-index: 35 !important;
}

.yeat-img-card {
  padding: 0 !important;
  background: transparent !important;
  border: 3px solid #d6ff7a !important;
  border-radius: 18px !important;
  box-shadow: 0 0 22px rgba(214,255,122,.5), 6px 6px 0 #000 !important;
  overflow: hidden !important;
}

.yeat-img-card img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  filter: saturate(1.45) contrast(1.12);
}

.yeat-img-card span { display: none !important; }

.yeat-card:not(.yeat-img-card) {
  background: #d6ff7a !important;
  border-radius: 0 !important;
  color: #061307 !important;
  transform: skew(-8deg) !important;
}

.aggressive-yeat-layer { z-index: 50 !important; }

.fly-yeat {
  border-color: #d6ff7a !important;
  border-radius: 8px !important;
  box-shadow: 0 0 18px rgba(214,255,122,.7), 6px 6px 0 #000 !important;
}

.inventor-spam { z-index: 3 !important; }
.inventor-spam span { color: rgba(214,255,122,.30) !important; }

/* v24: THE END page */
.end-screen {
  min-height: 100vh !important;
  display: none;
  place-items: center;
  border-radius: 0 !important;
  background: radial-gradient(circle at center, rgba(255,255,255,.10), transparent 16rem), linear-gradient(135deg, #050505, #151515) !important;
  color: white;
  text-align: center;
}

.end-screen.active { display: grid; }

.end-wrap { width: min(720px, calc(100% - 28px)); }

.end-card {
  border: 3px solid white;
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 38px rgba(255,255,255,.16);
  padding: clamp(28px, 7vw, 60px);
}

.end-card p {
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .12em;
}

.end-card h2 {
  color: white !important;
  font-family: Impact, "Arial Black", system-ui, sans-serif !important;
  font-size: clamp(76px, 18vw, 170px) !important;
  text-shadow: none !important;
  margin: 0 0 12px !important;
}

.end-card span { color: rgba(255,255,255,.82); font-weight: 900; }

.end-small {
  margin: 18px 0;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 800;
}

.end-restart {
  background: #fff !important;
  color: #111 !important;
}

@media (max-width: 520px) {
  .yeat-gallery.image-gallery { min-height: 420px !important; }
  .yeat-img-card img { height: 112px !important; }
  .yeat-warning { font-size: clamp(20px, 7vw, 38px) !important; }
}


/* v25: small final nudge on THE END screen */
.end-nudge {
  width: max-content;
  max-width: 100%;
  margin: 20px auto 10px;
  border: 3px solid white;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: white;
  box-shadow: 5px 5px 0 rgba(255,255,255,.25);
  padding: 10px 16px;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 1000;
  transform: rotate(-2deg);
  animation: endNudge 1.7s ease-in-out infinite;
}

@keyframes endNudge {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-5px); }
}


/* v29: time warning popup on start/enter page */
.time-popup-window {
  width: min(480px, calc(100vw - 28px)) !important;
  transform: rotate(-1deg);
}

.time-popup-body {
  text-align: center;
}

.time-popup-body h2 {
  font-size: clamp(48px, 14vw, 82px);
}

.time-popup-body p {
  font-weight: 900;
  color: #4b1745;
  font-size: clamp(16px, 4vw, 20px);
  margin: 0 0 18px;
}

.time-popup-body .main-btn {
  display: block;
  width: min(280px, 100%);
  margin: 0 auto;
}