/* The Swamp: the welcome / hatching screen shown before you have a goblin (body.unhatched).
   Hand-drawn look on plain paper: marker-lettered title, an egg wobbling in a scribbled nest, a few pencil doodles.
   Loaded last, so it can take over the whole screen: the plain header and banners are hidden here and come back
   the moment a goblin hatches. Colors are fixed (not light/dark themed) so the page always looks like paper. */
body.unhatched{background:#fffdf6}
body.unhatched .top,body.unhatched #demoBanner,body.unhatched #seasonBanner{display:none}
body.unhatched .mid{position:relative;padding:0;margin:0 -14px}
body.unhatched #error{position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top,0px));left:14px;right:14px;margin:0;background:#fff3f0;color:#3a0d0d;border-color:#b8473a}

.swampstart{position:relative;flex:1 0 auto;min-height:100%;padding:0;overflow:hidden;isolation:isolate;color:#22301c;
  background-color:#fffdf6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.swampstart[hidden]{display:none}
.swampstart .swampart{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
.swampwrap{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:max(28px,calc(env(safe-area-inset-top,0px) + 18px)) 18px max(18px,calc(env(safe-area-inset-bottom,0px) + 14px));text-align:center}

/* title and tagline: hand-lettered SVG (Permanent Marker / Gochi Hand outlines). The real text stays for screen readers. */
.swamphead{margin-top:2vh}
.swamptitle{margin:0;line-height:0;font-size:0}
.swampstart .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.swamplogo{display:block;width:min(92vw,420px);height:auto;max-height:min(24vh,214px);margin:0 auto;overflow:visible}
.swamptag{max-width:24em;margin:4px auto 0;line-height:0}
.swamptagart{display:block;width:min(86vw,350px);height:auto;margin:0 auto}

/* the egg in its nest, between the title and the form. Only the egg moves. */
.swampegg{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:150px;width:100%}
.swampegg svg{width:min(56vw,240px);height:auto;max-height:27vh;overflow:visible}
.swampegg .eggbody{transform-origin:100px 150px;animation:eggwobble 3.2s ease-in-out infinite}
@keyframes eggwobble{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-7deg)}74%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}86%{transform:rotate(2deg)}}

/* the hatch card: a paper card with a wobbly inked border */
.swampcard{width:100%;max-width:420px;padding:14px 14px 10px;text-align:left;background:#fff;
  border:2.5px solid #22301c;border-radius:22px 8px 20px 10px/10px 20px 8px 22px;box-shadow:4px 5px 0 rgba(34,48,28,.18)}
.swampcard .how{margin:0 2px 10px;font-size:13.5px;line-height:1.4;color:#3d4a35}
.swampcard form.hatchrow{display:grid;gap:10px}
.swampcard .lab{color:#22301c}
.swampcard #hatchName{width:100%;font:700 20px/1.2 var(--sans);padding:12px 15px;background:#fffdf6;color:#22301c;
  border:2px solid #22301c;border-radius:14px 6px 12px 8px/8px 12px 6px 14px}
.swampcard #hatchName::placeholder{color:#8a9480}
.swampcard #hatchName:focus{outline:3px solid #3fcf9e;outline-offset:1px}
.swampcard #hatchBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:13px 18px;cursor:pointer;
  font:900 21px/1 "Arial Black","Arial Bold",system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#22301c;background:#b6ec3a;
  border:2.5px solid #22301c;border-radius:16px 8px 18px 6px/6px 18px 8px 16px;box-shadow:3px 4px 0 #22301c;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.swampcard #hatchBtn:active{transform:translate(3px,4px);box-shadow:0 0 0 #22301c}
.swampcard #hatchBtn[disabled]{opacity:.6;cursor:default}
.swampcard #hatchBtn:focus-visible{outline:3px solid #3fcf9e;outline-offset:3px}
.swampcard #hatchBtn svg{width:24px;height:28px;flex:none}
.swampcard .sub-details{margin-top:10px;color:#3d4a35;font-size:14px}
.swampcard .sub-details summary{cursor:pointer;text-align:center;padding:8px 4px;color:#1f8f6c;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.swampcard .sub-details input{font:16px/1.3 var(--sans);padding:11px 14px;border-radius:12px;border:1.5px solid #22301c;background:#fffdf6;color:#22301c}
.swampcard .sub-details .btn{min-height:46px;border-radius:12px;font-weight:700}

@media (prefers-reduced-motion:reduce){.swampstart *{animation:none!important}}
@media (min-height:760px){.swamphead{margin-top:4vh}}
@media (min-width:700px){.swamphead{margin-top:1vh}.swampegg svg{max-height:24vh}}
/* short phones (and the keyboard open): keep the title, egg and Hatch button on one screen */
@media (max-height:720px){
  .swampwrap{padding-top:max(14px,calc(env(safe-area-inset-top,0px) + 10px));gap:2px}
  .swamphead{margin-top:0}
  .swamplogo{max-height:21vh}
  .swamptagart{width:min(80vw,300px)}
  .swampegg{min-height:90px}
  .swampegg svg{max-height:21vh}
  .swampcard{padding:12px 12px 6px}
  .swampcard .how{display:none}
  .swampcard .sub-details{margin-top:4px}
}

/* Jay, Oct 15: no demo-mode badge or banner up top */
#modeBadge,#demoBanner{display:none!important}

/* Jay, Oct 15: "demo" tag under the title, and the top sparkles are murky swamp bubbles now */
.swampdemo{margin:10px auto 8px;padding:0;text-align:center;line-height:1;font:900 22px/1 "Arial Black","Helvetica Neue",Impact,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#b6e35a;-webkit-text-stroke:1.6px #22301c;paint-order:stroke fill;
  text-shadow:3px 3px 0 #22301c;transform:rotate(-3deg)}
/* each bubble and its shine move as one group, so the shine never slides off; every bubble bobs, offset so they don't sync */
.swbub .bb{transform-box:fill-box;transform-origin:center;animation:swbub 3.6s ease-in-out infinite}
.swbub .bb:nth-child(2){animation-delay:-.6s}.swbub .bb:nth-child(3){animation-delay:-1.2s}.swbub .bb:nth-child(4){animation-delay:-1.8s}
.swbub .bb:nth-child(5){animation-delay:-2.4s}.swbub .bb:nth-child(6){animation-delay:-3s}.swbub .bb:nth-child(7){animation-delay:-.9s}
@keyframes swbub{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.08)}}

/* Gobloween decor in the pen strip (app.js GOBLOWEEN_DECOR): edges only, behind every goblin, no taps */
/* Holiday overlays are off, including for an older app.js already open in a browser. */
.pendecor{display:none!important;position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.pendecor[hidden]{display:none}
.pendecor .gw{position:absolute;display:block;overflow:visible}
.pendecor .web.l{left:0;top:0}.pendecor .web.r{right:0;top:0}
.pendecor .lights{left:38px;right:38px;top:0;width:calc(100% - 76px);height:18px}
.pendecor .bats{right:44px;top:14px;opacity:.85}
.pendecor .bat{transform-box:fill-box;transform-origin:center;animation:gwflap 1.8s ease-in-out infinite alternate}
.pendecor .bat.b2{animation-delay:-.7s}.pendecor .bat.b3{animation-delay:-1.2s}
@keyframes gwflap{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-3px) scaleY(.7)}}
.pendecor .jack.l{left:6px;bottom:3px}.pendecor .jack.r{right:6px;bottom:3px}
.pendecor .glow{animation:gwglow 2.4s ease-in-out infinite alternate}
@keyframes gwglow{from{fill:#f2d55a}to{fill:#ffb347}}
@media (prefers-reduced-motion:reduce){.pendecor *{animation:none!important}}

/* Jay, Oct 15 night: keep the goblin-time chip (top right, world.css .wxhud) clear of all Gobloween decor.
   No right-corner cobweb, the lights stop short of the chip, and the bats hang on the left side. */
.pendecor .web.r{display:none}
.pendecor .lights{left:38px;right:96px;width:auto}
.pendecor .bats{right:auto;left:46px;top:16px}