/* Baloo 2 (SIL Open Font License 1.1, see OFL.txt beside this file), served from the game itself so school web
   filters can't block it. The same files and rules Google Fonts gave for weights 500 to 800 (version v23), less the
   Devanagari subset the game never shows. */
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/baloo2-vietnamese-C4ZonJY6.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/baloo2-latin-ext-Dz43yst_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/baloo2-latin-B_TVFhwJ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/baloo2-vietnamese-C4ZonJY6.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/baloo2-latin-ext-Dz43yst_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/baloo2-latin-B_TVFhwJ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/baloo2-vietnamese-C4ZonJY6.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/baloo2-latin-ext-Dz43yst_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/baloo2-latin-B_TVFhwJ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/baloo2-vietnamese-C4ZonJY6.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/baloo2-latin-ext-Dz43yst_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/baloo2-latin-B_TVFhwJ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --navy:#062864; --violet:#7A5EE0; --blue:#1192EF; --aqua:#46E0D2; --gold:#FFD54A;
  --paper:#F4F1FF; --ink:#0B1640; --night:#020818;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#EEEAFF; } }
:root[data-theme="dark"]{ --paper:#EEEAFF; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--night)}
html,body{height:100%;margin:0}
body{
  background:var(--night);color:var(--paper);overflow:hidden;
  font-family:"Baloo 2",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
#stage{position:relative;width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.dragging{cursor:grabbing}
#nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:18px;z-index:var(--z-notice);background:var(--night)}
#nogl[hidden]{display:none}
button{font:inherit;color:inherit}

/* HUD */
#hud{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;z-index:var(--z-hud);pointer-events:none}
#hud > *{pointer-events:auto}
.hudl{display:flex;align-items:center;gap:10px;min-width:0}
.hudbtn{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid rgba(122,94,224,.7);background:rgba(6,40,100,.62);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s}
.hudbtn svg{width:17px;height:17px;display:block}
.hudbtn:hover{border-color:var(--aqua)}
.hudbtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.place{font-weight:700;font-size:16px;line-height:1.1;text-shadow:0 1px 8px rgba(2,8,24,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place small{display:block;font-weight:500;font-size:13px;color:#C9C2F5}
.hudr{display:flex;align-items:center;gap:10px}
.slots{display:flex;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(6,20,70,.62);border:2px solid rgba(122,94,224,.55);cursor:pointer}
.slots:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.slot{width:18px;height:18px;border-radius:50%;position:relative;opacity:.32;transition:opacity .5s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.slot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px dotted transparent}
.slot.met{opacity:1}
.slot.met::after{border-color:var(--aqua)}
.slot.now{opacity:.75;animation:slotpulse 1.6s ease-in-out infinite}
.slot.got{animation:slotgot .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes slotpulse{50%{transform:scale(1.18)}}
@keyframes slotgot{0%{transform:scale(.2)}60%{transform:scale(1.6)}100%{transform:scale(1)}}

.sound{display:flex;align-items:center;gap:8px;padding:2px 10px 2px 2px;border-radius:999px;background:rgba(6,20,70,.62);border:2px solid rgba(122,94,224,.55)}
.sndbtn{width:32px;height:32px;border-radius:50%;border:0;background:rgba(122,94,224,.35);display:grid;place-items:center;cursor:pointer;padding:0}
.sndbtn:hover{background:rgba(70,224,210,.35)}
.sndbtn:focus-visible,.vol:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sndbtn svg{width:19px;height:19px;display:block}
.sound .x{display:none}
.sound.muted .x{display:inline}
.sound.muted .waves{display:none}
.vol{width:80px;accent-color:var(--aqua);cursor:pointer;margin:0}
.sound.muted .vol{opacity:.45}
@media (max-width:640px){ .vol{display:none} .sound{padding:2px} .place small{display:none} }

/* Objective */
#goal{position:absolute;top:62px;left:50%;transform:translateX(-50%);width:min(92vw,620px);text-align:center;z-index:var(--z-goal);pointer-events:none;
  font-size:clamp(17px,4vw,23px);font-weight:700;line-height:1.2;text-wrap:balance;text-shadow:0 2px 12px rgba(2,8,24,.85)}
#goal b{color:var(--gold);font-weight:800}
#goal.pop{animation:goalpop .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes goalpop{from{opacity:0;transform:translate(-50%,-12px) scale(.95)}to{opacity:1;transform:translateX(-50%)}}
.talking #goal{opacity:0}
#goal{transition:opacity .3s}
#goal .tip{display:block;font-size:clamp(14px,3.4vw,16px);font-weight:600;color:#DCD6FF;margin-top:2px}

/* Speech bubbles pinned to birds */
#bubbles{position:absolute;inset:0;z-index:var(--z-hud-low);pointer-events:none;overflow:hidden}
.bub{position:absolute;left:0;top:0;will-change:transform}
.bub span{display:block;transform:translate(-50%,-100%);white-space:nowrap;padding:.18em .8em .12em;border-radius:16px;
  background:var(--paper);color:var(--ink);font-weight:800;font-size:clamp(14px,3.4vw,18px);box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:bubin .45s cubic-bezier(.3,1.6,.5,1)}
.bub span::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--paper)}
.bub.out span{animation:bubout .35s forwards}
@keyframes bubin{from{opacity:0;transform:translate(-50%,-70%) scale(.5)}}
@keyframes bubout{to{opacity:0;transform:translate(-50%,-130%) scale(.8)}}

/* Talk prompt */
#prompt{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-hud-top);
  border:0;border-radius:999px;cursor:pointer;background:var(--gold);color:var(--ink);font-weight:800;font-size:19px;padding:.42em 1.3em .34em;
  box-shadow:0 5px 0 #C79A16,0 10px 24px rgba(0,0,0,.35);transition:opacity .25s,transform .25s}
#prompt{white-space:nowrap}
#prompt[hidden]{display:none}
@media (max-width:480px){ .slot{width:14px;height:14px} .slots{gap:4px;padding:5px 7px} }
#prompt kbd{font:inherit;font-size:14px;margin-left:.5em;padding:0 .45em;border-radius:6px;background:rgba(11,22,64,.14)}
#prompt:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
#prompt:active{transform:translate(-50%,3px);box-shadow:0 2px 0 #C79A16}

/* Dialogue */
#dialog{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(94vw,660px);z-index:var(--z-dialog);
  padding:22px 24px 18px;border-radius:26px;background:linear-gradient(165deg,rgba(11,46,120,.96) 0%,rgba(42,31,114,.96) 100%);
  border:2px solid rgba(122,94,224,.75);box-shadow:0 18px 50px rgba(0,0,0,.45);cursor:pointer;animation:dlgin .45s cubic-bezier(.3,1.4,.5,1)}
#dialog[hidden]{display:none}
@keyframes dlgin{from{opacity:0;transform:translate(-50%,24px)}}
#dialog .who{position:absolute;top:-15px;left:22px;display:flex;align-items:center;gap:8px;padding:.1em .9em .05em .35em;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:800;font-size:17px}
#dialog .who i{width:20px;height:20px;border-radius:50%;display:block}
#dialog .who em{font-style:normal;font-weight:600;opacity:.75}
#dialog .txt{font-size:clamp(17px,4.2vw,21px);font-weight:600;line-height:1.38;min-height:2.8em}
#dialog .more{position:absolute;right:18px;bottom:10px;width:0;height:0;border:8px solid transparent;border-right:0;border-left:12px solid var(--aqua);animation:more 1s ease-in-out infinite}
#dialog.typing .more{opacity:0}
@keyframes more{50%{transform:translateX(5px)}}

/* Area banner */
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;z-index:var(--z-goal);pointer-events:none;opacity:0}
#banner.on{animation:banner 3.4s ease forwards}
#banner h2{margin:0;font-size:clamp(34px,9vw,64px);line-height:1;font-weight:800;text-shadow:0 4px 26px rgba(2,8,24,.85)}
#banner p{margin:6px 0 0;font-size:clamp(16px,4vw,21px);font-weight:600;color:#DCD6FF;text-shadow:0 2px 12px rgba(2,8,24,.9)}
#banner .dots{display:flex;justify-content:center;gap:9px;margin:12px 0 0}
#banner .dots i{width:8px;height:8px;border-radius:50%;background:var(--aqua)}
#banner .dots i:nth-child(even){background:var(--gold)}
@keyframes banner{0%{opacity:0;transform:translateY(16px)}15%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

#fade{position:absolute;inset:0;background:var(--night);z-index:var(--z-fade);opacity:1;pointer-events:none;transition:opacity .6s}
#fade.clear{opacity:0}

/* Overlay cards */
#overlay{position:absolute;inset:0;z-index:var(--z-card);display:flex;overflow-y:auto;padding:20px;background:rgba(2,8,24,.55);transition:opacity .35s,visibility 0s}
#overlay.hide{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}   /* (once faded, not drawn at all: its glows and shine kept painting behind the game) */
.card{
  width:min(100%,460px);margin:auto;text-align:center;padding:26px 26px 28px;border-radius:30px;
  background:linear-gradient(165deg,#0B2E78 0%,#2A1F72 100%);
  border:2px solid rgba(122,94,224,.65);box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:cardin .6s cubic-bezier(.3,1.4,.5,1);
}
.card.wide{width:min(100%,640px)}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
.portrait{width:112px;height:112px;margin:0 auto 6px;border-radius:50%;border:3px dotted var(--aqua);display:grid;place-items:center;background:radial-gradient(circle,#1B2F86 0%,transparent 70%);animation:spin 40s linear infinite}
.portrait svg{width:70px;height:auto;display:block;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.card h1{margin:4px 0 8px;font-size:clamp(28px,7vw,40px);line-height:1.02;font-weight:800;text-wrap:balance}
.card p{margin:0 0 12px;font-size:17px;line-height:1.45;font-weight:500;color:#DCD6FF}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:left;margin:14px auto 16px;max-width:340px;font-size:16px;color:#DCD6FF}
.keys kbd{font:inherit;font-weight:700;color:var(--paper);background:rgba(122,94,224,.35);border-radius:8px;padding:0 .5em;white-space:nowrap;justify-self:end}
.go{
  margin-top:8px;border:0;border-radius:999px;cursor:pointer;
  background:var(--gold);color:var(--ink);font-size:20px;font-weight:800;padding:.5em 1.6em .42em;
  box-shadow:0 5px 0 #C79A16;transition:transform .12s,box-shadow .12s;
}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #C79A16}
.go:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
.go.secondary{background:none;color:var(--paper);border:2px solid rgba(255,255,255,.35);box-shadow:none}
.btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.reset{background:none;border:0;color:#9C93D8;font-size:13px;text-decoration:underline;cursor:pointer;margin-top:10px;padding:4px}
.reset:focus-visible{outline:2px solid var(--gold)}

/* Bird book */
.book{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px;text-align:left}
@media (max-width:520px){ .book{grid-template-columns:1fr} }
.entry{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:18px;background:rgba(6,20,70,.6);border:2px solid rgba(122,94,224,.5)}
.entry .badge{width:40px;height:40px;border-radius:50%;margin-top:2px;outline:2px dotted var(--aqua);outline-offset:3px}
.entry h3{margin:0;font-size:18px;line-height:1.15}
.entry h3 span{display:block;font-size:14px;font-weight:600;color:var(--aqua)}
.entry p{margin:3px 0 0;font-size:14px;line-height:1.35;color:#C9C2F5}
.entry.unmet{opacity:.5}
.entry.unmet .badge{background:rgba(255,255,255,.12) !important;outline-color:rgba(255,255,255,.3)}

/* Touch controls */
#touch{position:absolute;inset:0;z-index:var(--z-hud);pointer-events:none;display:none}
#touch.on{display:block}
#stick{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));width:128px;height:128px;border-radius:50%;
  border:2px dotted rgba(70,224,210,.75);background:rgba(6,20,70,.45);pointer-events:auto;touch-action:none}
#stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(122,94,224,.85);border:2px solid var(--paper);transition:transform .08s}
#flybtn{position:absolute;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));width:92px;height:92px;border-radius:50%;
  border:2px solid var(--paper);background:rgba(122,94,224,.8);pointer-events:auto;touch-action:none;display:grid;place-items:center;font-weight:800;font-size:16px;cursor:pointer}
#flybtn svg{width:44px;height:30px;display:block;margin-bottom:-4px}
#flybtn.held{background:var(--aqua);color:var(--ink)}
#touch.on ~ #prompt{bottom:calc(150px + env(safe-area-inset-bottom,0px))}


/* ---------- language ---------- */
.yw{white-space:nowrap}
.y1{color:var(--aqua);font-weight:800}
ruby.y2{color:var(--aqua);font-weight:800;ruby-position:over}
ruby.y2 rt{font-size:.52em;font-weight:600;color:#C9C2F5;letter-spacing:.02em}
.y3{color:var(--gold);font-weight:800;border-bottom:2px dotted rgba(255,213,74,.6);cursor:help;position:relative}
.y3.peek::after,.y3:hover::after,.y3:focus-visible::after{content:attr(data-en);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);padding:.1em .55em;border-radius:10px;background:var(--paper);color:var(--ink);font-size:.7em;font-weight:700;white-space:nowrap;pointer-events:none}
#dialog .txt{line-height:1.75}
#dialog .who em{margin-left:.25em}
#dialog .who ruby rt{color:var(--ink);opacity:.7}
#dialog .who .y1,#dialog .who .y2,#dialog .who .y3{color:var(--ink)}

/* word-lights and path labels */
#tags{position:absolute;inset:0;z-index:var(--z-hud-low);pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;will-change:transform;visibility:hidden}
.tag span{display:block;transform:translate(-50%,-100%);white-space:nowrap;padding:.12em .7em .08em;border-radius:999px;font-weight:800;font-size:clamp(14px,3.4vw,18px);
  background:rgba(6,30,70,.72);border:2px solid var(--aqua);color:var(--paper);text-shadow:0 1px 6px rgba(2,8,24,.8);box-shadow:0 0 18px rgba(70,224,210,.45)}
.tag.review span{border-color:var(--gold);box-shadow:0 0 18px rgba(255,213,74,.5);min-width:2em;text-align:center}
.tag.exit span{border-color:var(--gold);background:rgba(40,28,6,.7);font-size:clamp(13px,3vw,16px)}
.tag.exit span i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:.45em;vertical-align:.1em;animation:slotpulse 1.4s ease-in-out infinite}

/* fluency chip */
.flu{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 12px;border-radius:999px;border:2px solid rgba(122,94,224,.55);background:rgba(6,20,70,.62);color:var(--paper);cursor:pointer;font:inherit;font-weight:800;font-size:14px;position:relative;pointer-events:auto}
.flu:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.flu .bar{width:54px}
.flu .due{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:12px;display:grid;place-items:center}
.flu .due[hidden]{display:none}
.bar{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--aqua),var(--gold));transition:width .6s}
.bar.big{height:10px;margin:6px 0 4px}
.hudr{pointer-events:auto}
@media (max-width:640px){ .flu .bar{display:none} .flu{padding:0 10px} }
@media (max-width:560px){ #hud .slots{display:none} .hudr{flex:none;gap:6px} .opt kbd{display:none} .mapsvg .node text{font-size:3.6px} }

/* cards: teach, quiz, book, map */
.twgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 8px}
.tw{padding:12px 10px;border-radius:18px;background:rgba(6,20,70,.6);border:2px solid rgba(70,224,210,.5)}
.tw b{display:block;font-size:22px;color:var(--aqua);line-height:1.15}
.tw span{display:block;font-size:15px;color:#C9C2F5;margin-top:2px}
.card.quiz{width:min(100%,520px)}
.qhead{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#9C93D8;margin-bottom:6px}
.qask{margin:4px 0 4px !important}
.qword{font-size:clamp(32px,9vw,46px);font-weight:800;color:var(--aqua);line-height:1.1;margin:4px 0 16px;text-wrap:balance}
.qword.en{color:var(--paper)}
.qword.qhear .say{font-size:44px;padding:.15em .5em;border-radius:20px}   /* (listen: the word heard only) */
.qtype{display:flex;gap:10px;margin:0 0 10px}
.qtype .qin{flex:1;min-width:0;border:2px solid rgba(122,94,224,.6);background:rgba(6,20,70,.6);color:var(--aqua);border-radius:18px;padding:12px 14px;font:inherit;font-size:22px;font-weight:800}
.qtype .qin:focus{outline:2px solid var(--gold)}
.qtype .go{margin:0}
.qdunno{margin:0 0 6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:440px){ .opts{grid-template-columns:1fr} }
.opt{display:flex;align-items:center;gap:10px;text-align:left;border:2px solid rgba(122,94,224,.6);background:rgba(6,20,70,.6);color:var(--paper);border-radius:18px;padding:12px 14px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:transform .12s,border-color .2s,background .2s}
.opt.y{color:var(--aqua)}
.opt kbd{font:inherit;font-size:12px;color:#9C93D8;border:1px solid rgba(156,147,216,.5);border-radius:6px;padding:0 .4em;flex:none}
.opt:hover:not(:disabled){border-color:var(--aqua);transform:translateY(-2px)}
.opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.opt.right{border-color:#5fe08a;background:rgba(40,140,80,.45);color:var(--paper)}
.opt.wrong{border-color:#ff7b7b;background:rgba(160,40,60,.45)}
.opt:disabled{cursor:default}
.qfeed p{margin:14px 0 2px !important}
.qfeed b{color:var(--aqua)}
.fl{margin:10px auto 6px;max-width:440px;text-align:left}
.flstages{display:flex;justify-content:space-between;gap:4px;font-size:12px;font-weight:700;color:#7d74b8}
.flstages span.on{color:#C9C2F5}
.flstages span.now{color:var(--gold)}
.fl small{font-size:13px;color:#9C93D8}
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(6,20,70,.6);margin:0 0 8px}
.tabs button{border:0;border-radius:999px;padding:.35em 1em;background:none;color:#C9C2F5;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.tabs button.on{background:var(--violet);color:var(--paper)}
.words{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px;text-align:left}
@media (max-width:520px){ .words{grid-template-columns:1fr} }
.wgroup{padding:10px 12px;border-radius:18px;background:rgba(6,20,70,.6);border:2px solid rgba(122,94,224,.5)}
.wgroup.unmet{opacity:.5}
.wgroup h3{margin:0 0 4px;font-size:15px;color:var(--gold)}
.wrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;font-size:14px;padding:2px 0}
.wrow b{color:var(--aqua)}
.wrow span:not(.dots){color:#C9C2F5}
.dots{display:inline-flex;gap:2px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15)}
.dots i.on{background:var(--gold)}
.mapsvg{width:100%;height:auto;display:block;margin:6px 0 4px}
.mapsvg .land{fill:#10245e;stroke:rgba(122,94,224,.6);stroke-width:.5;stroke-dasharray:1 1.2}
.mapsvg .river{fill:none;stroke:#1d6fa8;stroke-width:1.4;stroke-linecap:round;opacity:.7}
.mapsvg path.link{fill:none;stroke:rgba(255,255,255,.18);stroke-width:.7;stroke-dasharray:1.2 1.2}
.mapsvg path.link.open{stroke:var(--gold);opacity:.8;stroke-dasharray:none;stroke-width:.8}
.mapsvg .node text{font-size:3.2px;font-weight:700;fill:#7d74b8;text-anchor:middle}
.mapsvg .node.open text{fill:var(--paper)}
.mapsvg .node.open{cursor:pointer}
.mapsvg .node.open:hover .disc,.mapsvg .node.open:focus-visible .disc{stroke:var(--aqua);stroke-width:1}
.mapsvg .node:focus{outline:none}
.mapsvg .disc{stroke:rgba(255,255,255,.5);stroke-width:.5}
.mapsvg .node.done .disc{stroke:var(--aqua)}
.mapsvg .ring{fill:none;stroke:var(--gold);stroke-width:.6;stroke-dasharray:1.2 1}
.mapsvg .tick{fill:none;stroke:var(--aqua);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cutscenes and Gibamyeri ---------- */
#cine{position:absolute;inset:0;z-index:var(--z-card);cursor:pointer}
#cine[hidden]{display:none}
#cine .bar{position:absolute;left:0;right:0;height:11vh;background:#02040c;border-radius:0;animation:barin .9s ease-out}
#cine .bar.top{top:0}#cine .bar.bot{bottom:0}
@keyframes barin{from{height:0}}
#cine .cap{position:absolute;left:50%;bottom:calc(11vh + 18px);transform:translateX(-50%);width:min(calc(100% - 40px),760px);text-align:center;
  font-size:clamp(17px,4.2vw,24px);line-height:1.45;font-weight:700;color:var(--paper);text-shadow:0 2px 12px rgba(2,4,12,.95),0 0 2px rgba(2,4,12,.9);opacity:0}
#cine .cap.on{animation:capin 1.1s ease-out forwards}
@keyframes capin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
#cine .cap b{color:var(--gold)}
#cine .cap .yw-c{color:var(--aqua);font-style:normal;font-weight:800}
#cine .cap .credits{display:block;font-size:.95em}
#cine .cap .credits small{font-size:.7em;font-weight:600;color:#C9C2F5}
#cine .skip{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));top:calc(11vh + 12px);border:2px solid rgba(255,255,255,.5);background:rgba(2,4,12,.5);color:var(--paper);border-radius:999px;padding:.3em 1em;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.cinema #hud,.cinema #goal,.cinema #prompt,.cinema #moves,.cinema #energy,.cinema #tags,.cinema #touch,.cinema #dialog{opacity:0 !important;pointer-events:none !important}
.gib{font-family:Yawbam;font-weight:400;font-feature-settings:'liga' 1,'calt' 1,'rlig' 1;line-height:1.6;letter-spacing:.05em}
.gword{display:block;color:var(--gold);font-size:30px;margin-top:2px}
.wrow .gword{display:block;margin:1px 0 2px;font-size:22px;line-height:1.5}
.entry .gword{display:inline-block;font-size:24px;margin-left:.4em}
.tw .gword{font-size:30px}
.gib.piece{display:inline-block;color:var(--gold);font-size:42px;line-height:1}
.gib.piece.big{font-size:96px}
.gib.piece.kV.big,.gib.piece.kH.big,.gib.piece.kF.big{font-size:150px}
.gbig{width:150px;height:150px;margin:6px auto 4px;border-radius:50%;background:radial-gradient(circle,#6a4a30,#3a2818);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 24px rgba(0,0,0,.6),0 0 30px rgba(255,213,74,.25)}
.gexw{margin:8px auto 2px;padding:6px 14px;border-radius:16px;background:rgba(58,40,24,.6);display:inline-block}
.gexw .gib{display:block;font-size:44px;color:var(--gold);line-height:1.5}
.gexw .gex{margin:0 !important}
.gtile .gib.piece{font-size:34px;height:48px;display:grid;place-items:center}
.gtile .gib.piece.kV,.gtile .gib.piece.kH,.gtile .gib.piece.kF{font-size:72px;overflow:hidden}
.gtile b{font-size:11px;line-height:1.2;text-align:center}
.gtitle{font-size:44px;color:var(--gold);margin:-6px 0 4px;line-height:1.4}
.card p.ph{font-style:italic;opacity:.75}
.gsound b{font-size:1.2em;color:var(--gold)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:10px 0}
.gtile{display:grid;place-items:center;gap:2px;padding:8px 4px;border-radius:14px;background:rgba(58,40,24,.7);border:2px solid rgba(255,213,74,.5);color:var(--gold);overflow:hidden}
.gtile b{color:var(--paper)}
.gtile.off{background:rgba(6,20,70,.5);border-color:rgba(122,94,224,.4);color:#7d74b8}
.gtile.off span{font-size:28px;font-weight:800;height:48px;line-height:48px}

/* ---------- minimap ---------- */
#minimap{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));width:150px;height:150px;z-index:var(--z-hud-top);cursor:pointer;transition:opacity .3s}
#minimap::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px dotted var(--aqua);opacity:.75;animation:spin 40s linear infinite;pointer-events:none}
#minimap::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(122,94,224,.75);box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 0 18px rgba(6,20,70,.6);pointer-events:none}
#mini{display:block;width:100%;height:100%;border-radius:50%;background:rgba(6,20,70,.62)}
#minimap .lbl{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);z-index:1;padding:0 10px;border-radius:999px;background:rgba(6,20,70,.9);border:2px solid rgba(122,94,224,.7);
  font:700 11px/18px "Baloo 2",ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:var(--paper);white-space:nowrap;pointer-events:none}
#minimap:focus-visible{outline:none}#minimap:focus-visible::after{border-color:var(--gold)}
.touchmode #minimap{left:auto;right:calc(20px + env(safe-area-inset-right,0px));bottom:auto;top:calc(124px + env(safe-area-inset-top,0px));width:100px;height:100px}
.touchmode #minimap .lbl{font-size:10px;line-height:16px;bottom:-11px}
.talking #minimap,.fighting #minimap,.cinema #minimap{opacity:0;pointer-events:none}
@media (max-height:520px){ #minimap{width:112px;height:112px} }
/* ---------- fight scene ---------- */
#battle{position:absolute;inset:0;z-index:var(--z-hud);pointer-events:none}
#battle[hidden]{display:none}
#battle .bars{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(calc(100% - 28px),760px);display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
#battle .bars>div{display:grid;gap:4px}
#battle .bars b{font-size:clamp(14px,3.6vw,19px);color:var(--paper);text-shadow:0 2px 8px rgba(2,8,24,.8)}
#battle .p2{text-align:right}
#battle .hb{display:block;height:16px;border-radius:999px;background:rgba(6,20,70,.75);border:2px solid var(--paper);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35)}
#battle .hb i{display:block;height:100%;transition:width .25s}
#battle .p1 .hb i{background:linear-gradient(90deg,#ff7b9c,#ffd54a 60%,#7cf0a8)}
#battle .p2 .hb{direction:rtl}
#battle .p2 .hb i{background:linear-gradient(270deg,#ff6b86,#ffb86b)}
#battle .vs{font-weight:800;font-size:clamp(18px,4.6vw,26px);color:var(--gold);text-shadow:0 2px 10px rgba(2,8,24,.9)}
#battle .big{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;text-align:center;font-weight:800;font-size:clamp(40px,11vw,76px);line-height:1;color:var(--gold);
  text-shadow:0 4px 0 #8a5a00,0 8px 24px rgba(2,8,24,.8);white-space:nowrap}
#battle .big small{display:block;font-size:.42em;color:var(--paper);text-shadow:0 2px 10px rgba(2,8,24,.9);margin-top:.25em}
#battle .big.on{animation:bigin 1.1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes bigin{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}35%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#battle .hint{position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);text-align:center;font-size:13px;font-weight:700;color:#C9C2F5;text-shadow:0 1px 6px rgba(2,8,24,.9)}
.touchmode #battle .hint{bottom:auto;top:calc(116px + env(safe-area-inset-top,0px))}
.fighting #goal,.fighting #prompt,.fighting #tags,.fighting #energy,.fighting #hud .hudr{opacity:0;pointer-events:none}

/* ---------- energy, moves, enemies ---------- */
#energy{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:var(--z-hud-top);display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 9px;border-radius:999px;background:rgba(6,20,70,.62);border:2px solid rgba(122,94,224,.55);color:#ff8aa6;transition:opacity .3s}
#energy svg{width:18px;height:18px;display:block}
.ebar{display:block;width:130px;height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.ebar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff7b9c,#ffd54a 60%,#7cf0a8);transition:width .25s}
#energy.low{border-color:#ff6b86;animation:lowpulse 1s ease-in-out infinite}
#energy.low .ebar i{background:#ff6b86}
@keyframes lowpulse{50%{box-shadow:0 0 0 4px rgba(255,90,120,.35)}}
#flash{position:absolute;inset:0;z-index:var(--z-flash);pointer-events:none;opacity:0;box-shadow:inset 0 0 140px 30px rgba(255,40,70,.75)}
#flash.on{animation:flash .45s ease-out}
@keyframes flash{from{opacity:1}to{opacity:0}}
#moves{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:var(--z-hud-top);display:flex;gap:12px;transition:opacity .3s}
.mv{position:relative;width:60px;height:60px;border-radius:50%;border:2px solid var(--paper);background:rgba(122,94,224,.82);color:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;touch-action:none;
  box-shadow:0 6px 16px rgba(0,0,0,.35);animation:mvin .5s cubic-bezier(.3,1.6,.5,1)}
.mv svg{width:28px;height:28px;display:block;position:relative;z-index:1}
.mv .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(2,8,24,.7) var(--p,0%),transparent 0)}
.mv kbd{position:absolute;right:-6px;bottom:-6px;z-index:2;font:inherit;font-size:12px;font-weight:800;background:var(--gold);color:var(--ink);border-radius:8px;padding:0 .4em}
.mv:active{transform:scale(.92)}
.mv:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@keyframes mvin{from{transform:scale(0)}}
.talking #moves,.talking #energy{opacity:0;pointer-events:none}
.touchmode #moves{bottom:calc(136px + env(safe-area-inset-bottom,0px));right:calc(26px + env(safe-area-inset-right,0px));gap:10px;flex-direction:column}
.touchmode #prompt{bottom:calc(216px + env(safe-area-inset-bottom,0px)) !important}
.touchmode .mv{width:56px;height:56px}
.touchmode .mv kbd{display:none}
.touchmode #energy{bottom:calc(160px + env(safe-area-inset-bottom,0px));left:calc(18px + env(safe-area-inset-left,0px))}
.touchmode #energy .ebar{width:96px}
.tag.foe span{border-color:#ff6b86;background:rgba(60,10,20,.7);box-shadow:0 0 14px rgba(255,90,120,.4)}
.tag.foe.small span{font-size:12px;padding:.05em .55em;opacity:.85}
.tag.frog .hp{display:inline-flex;gap:3px;margin-left:.5em;vertical-align:.05em}
.tag.frog .hp i{width:9px;height:9px;border-radius:50%;background:#ff6b86}
.tag.frog .hp i.off{background:rgba(255,255,255,.2)}
.tag.item span{border-color:#fff1b0;background:rgba(50,40,10,.65);box-shadow:0 0 16px rgba(255,241,176,.45)}
.newmove{font-size:clamp(30px,8vw,42px);font-weight:800;color:var(--gold);margin:4px 0 8px}
.keyhint kbd{font:inherit;font-weight:800;background:var(--gold);color:var(--ink);border-radius:6px;padding:0 .45em}
.diff{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(6,20,70,.6);margin:0 0 10px}
.diff button{border:0;border-radius:999px;padding:.3em .95em;background:none;color:#C9C2F5;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.diff button.on{background:var(--violet);color:var(--paper)}
.diff .lbl{align-self:center;padding:0 .6em 0 .7em;font-size:13px;font-weight:700;color:#9C93D8}
.diff button:focus-visible{outline:2px solid var(--gold)}
.jobs{display:grid;gap:10px;margin:10px 0 6px;text-align:left}
.job{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:18px;background:rgba(6,20,70,.6);border:2px solid rgba(255,213,74,.45)}
.job .badge{width:36px;height:36px;border-radius:50%;outline:2px dotted var(--aqua);outline-offset:3px;margin-top:2px}
.job h3{margin:0;font-size:17px;line-height:1.2}
.job h3 span{display:block;font-size:13px;font-weight:600;color:var(--aqua)}
.job p{margin:4px 0 0 !important;font-size:15px !important}
.job p b{color:var(--gold)}
.card p.small{font-size:14px;color:#9C93D8}
.mapsvg .job{fill:var(--gold);stroke:var(--ink);stroke-width:.4}

@media (prefers-reduced-motion: reduce){
  .portrait,.portrait svg,.slot.now,#dialog .more{animation:none}
}

/* ---------- forms, paint and the hollow ---------- */
.hudbtn.me{position:relative;color:var(--gold)}
.hudbtn.me.dot::after{content:'';position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--night,#0B1640);animation:slotpulse 1.4s ease-in-out infinite}
.me{display:grid;gap:10px;margin:12px 0 6px}
.me .go{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}
.me .go small{font-size:13px;font-weight:600;opacity:.75}
.forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0 8px}
.form{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-items:center;text-align:left;padding:10px;border-radius:18px;border:2px solid rgba(122,94,224,.55);background:rgba(6,20,70,.6);color:var(--paper);font:inherit;cursor:pointer}
.form .badge{grid-row:span 2;width:32px;height:32px;border-radius:50%;border:2px solid var(--paper)}
.form b{font-size:15px;line-height:1.1}
.form span{font-size:12px;line-height:1.25;color:#C9C2F5}
.form:hover:not(:disabled){border-color:var(--aqua)}
.form.cur{border-color:var(--gold);box-shadow:0 0 14px rgba(255,213,74,.35)}
.form.locked{opacity:.45;cursor:default}
.form.locked .badge{filter:grayscale(1)}
#overlay.docked{background:transparent;pointer-events:none;padding:12px}
#overlay.docked .card{pointer-events:auto;padding:16px 18px;overflow:auto}
/* wide screens: the paint panel sits on the right, Goomp Goomp on the left */
@media (min-width:821px){
  #overlay.docked{align-items:center;justify-content:flex-end}
  #overlay.docked .card{margin:0 8px 0 0;width:440px;max-height:calc(100% - 90px)}
  #overlay.docked .card .sws{gap:5px;flex-wrap:nowrap}
  #overlay.docked .sw{width:30px;height:30px}
}
/* narrow screens: a compact panel along the bottom, Goomp Goomp above it */
@media (max-width:820px){
  #overlay.docked{align-items:flex-end;justify-content:center}
  #overlay.docked .card{margin:0 auto 4px;width:min(100%,560px);max-height:46vh;padding:12px 14px}
  #overlay.docked .card.paint h2{font-size:18px}
  #overlay.docked .card.paint .small{display:none}
  #overlay.docked .prow{margin:5px 0;grid-template-columns:48px 1fr;gap:6px}
  #overlay.docked .prow b{font-size:13px}
  #overlay.docked .sws{gap:4px;flex-wrap:nowrap}
  #overlay.docked .sw{width:26px;height:26px;border-width:2px;flex:none}
  #overlay.docked .pats button{padding:.2em .7em;font-size:12px}
  #overlay.docked .card .btns{margin-top:6px}
}
.card.paint h2{margin:0 0 4px;font-size:22px}
.prow{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;margin:8px 0;text-align:left}
.prow b{font-size:14px}
.sws{display:flex;flex-wrap:wrap;gap:7px}
.sw{width:32px;height:32px;border-radius:50%;border:3px solid rgba(244,241,255,.35);background:var(--c);cursor:pointer;padding:0}
.sw.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--night,#0B1640),0 0 12px rgba(255,213,74,.6)}
.sw.locked{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 4px,transparent 4px 8px);border-style:dashed;cursor:help}
.pats{display:flex;flex-wrap:wrap;gap:6px}
.pats button{border:2px solid rgba(122,94,224,.55);background:rgba(6,20,70,.6);color:var(--paper);border-radius:999px;padding:.25em .9em;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.pats button.on{border-color:var(--gold);color:var(--gold)}
#hollowUI{position:absolute;inset:0;z-index:var(--z-activity);pointer-events:none}
#hollowUI[hidden]{display:none}
#hollowUI>*{pointer-events:auto}
.inhollow #hud,.inhollow #goal,.inhollow #prompt,.inhollow #moves,.inhollow #energy,.inhollow #minimap,.inhollow #tags,.inhollow #landbtn{opacity:0 !important;pointer-events:none !important}
/* (inside the hollow you can walk and hop: the stick and the hop button stay) */
/* the hollow's controls: its own things in honey wood (the room's plaque; Book, Remember and the pouch, top right), the
   game's own in glass (Leave and Pause, top left); the stick and hop keep their corners */
#hollowUI .hplaque{position:absolute;left:50%;top:0;transform:translateX(-50%);text-align:center;pointer-events:none;max-width:calc(100% - 420px);min-width:260px}
#hollowUI .hcord{position:absolute;top:0;width:3px;height:16px;background:linear-gradient(#e0a83a,#8a5a14)}
#hollowUI .hcord.l{left:28px}#hollowUI .hcord.r{right:28px}
#hollowUI .hboard{position:relative;margin-top:14px;padding:6px 30px 5px;border-radius:14px 14px 18px 18px;border:3px solid #6a3e1c;
  background:repeating-linear-gradient(92deg,rgba(90,50,20,0) 0 14px,rgba(90,50,20,.12) 14px 16px),linear-gradient(180deg,#d9a76a 0%,#b97c42 55%,#9a6232 100%);
  box-shadow:inset 0 2px 0 rgba(255,235,190,.6),inset 0 -3px 0 rgba(70,36,12,.45),0 6px 14px rgba(0,0,0,.45)}
#hollowUI .hboard:before,#hollowUI .hboard:after{content:'';position:absolute;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe8a0,#b07a20);box-shadow:0 1px 1px rgba(0,0,0,.5)}
#hollowUI .hboard:before{left:10px}#hollowUI .hboard:after{right:10px}
#hollowUI .hboard h2{margin:0;font-size:21px;line-height:1.15;color:#fff3d6;letter-spacing:.02em;text-shadow:0 -1px 0 rgba(60,30,8,.9),0 0 10px rgba(255,200,110,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hollowUI .hboard small{display:block;font-size:12px;font-weight:800;color:#4a2a10;letter-spacing:.05em;text-transform:uppercase}
#hollowUI .hsys{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));height:38px;border-radius:999px;display:flex;align-items:center;gap:6px;padding:0 13px;font:inherit;font-weight:800;font-size:14px;color:#fff;cursor:pointer;
  background:rgba(24,14,62,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(201,188,247,.5)}
#hollowUI .hsys svg{width:18px;height:18px}
#hollowUI .hleave{left:calc(12px + env(safe-area-inset-left,0px))}
#hollowUI .hpause{left:calc(112px + env(safe-area-inset-left,0px));padding:0 10px}
#hollowUI .hbadges{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));display:flex;gap:16px}
#hollowUI .hwb{position:relative;width:62px;height:62px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:inherit;
  background:radial-gradient(circle at 50% 38%,#e2b47a,#b97c42 62%,#8a5530);border:3px solid #d6a640;
  box-shadow:inset 0 0 0 3px #6a3e1c,inset 0 3px 6px rgba(255,235,190,.5),0 5px 10px rgba(0,0,0,.45);transition:transform .12s}
#hollowUI .hwb:active{transform:scale(.94)}
#hollowUI .hwb.on{border-color:#ffe08a;box-shadow:inset 0 0 0 3px #6a3e1c,0 0 16px rgba(255,213,74,.8),0 5px 10px rgba(0,0,0,.45)}
#hollowUI .hwb svg,#hollowUI .hwb img{width:44px;height:44px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
#hollowUI .hwb img{width:50px;height:50px;object-fit:contain}
#hollowUI .hwb span{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:800;color:#fff3d6;text-shadow:0 1px 2px #3a1c08,0 0 4px #3a1c08}
#hollowUI .hwb b{position:absolute;top:-5px;right:-5px;background:#ffd54a;color:#1a1240;border-radius:999px;font-size:12px;line-height:18px;padding:0 6px;border:2px solid #6a3e1c}
#hollowUI .hsel{position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(40,28,6,.8);border:2px solid var(--gold);max-width:calc(100% - 16px)}
#hollowUI .hsel span{font-weight:700;color:var(--gold);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#hollowUI .hsel button{border:2px solid rgba(255,213,74,.6);background:rgba(6,20,70,.7);color:var(--paper);border-radius:999px;min-width:38px;height:34px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;padding:0 .7em}
#hollowUI .htip{position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));border-radius:16px;padding:7px 16px;font-weight:700;font-size:15px;text-align:center;color:#fff;
  background:rgba(24,14,62,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(201,188,247,.5);pointer-events:none}
#hollowUI .htip i{font-style:normal;color:#ffe08a}
#hollowUI .htip small{font-weight:500;opacity:.85}
#hollowUI .hprompt{top:38%;font-size:17px;animation:cardin .4s cubic-bezier(.3,1.4,.5,1)}
#hollowUI .hplacing .hsys{left:calc(12px + env(safe-area-inset-left,0px));z-index:2}
#hollowUI .hplacing .htip{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:min(520px,calc(100% - 300px))}   /* (low, between the stick and hop: the spots are up on the walls) */
#hollowUI .hpouch{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(10,6,30,.45)}
#hollowUI .hpin{width:min(680px,100%);max-height:calc(100% - 96px);overflow:auto;border-radius:24px;padding:10px 14px 8px;color:#fff;text-align:center;
  background:rgba(24,14,62,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(201,188,247,.5);box-shadow:0 0 30px rgba(150,110,255,.35);animation:cardin .35s cubic-bezier(.3,1.4,.5,1)}
#hollowUI .hpin h3{margin:0 0 6px;font-size:18px}
#hollowUI .hpwrap{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center}
#hollowUI .hpslot{position:relative;overflow:hidden;height:170px;border-radius:18px;background:radial-gradient(circle at 50% 60%,rgba(255,213,74,.25),rgba(0,0,0,0) 65%)}
#hollowUI .hpslot canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#hollowUI .hplist{display:flex;flex-wrap:wrap;gap:7px;max-height:170px;overflow:auto;justify-content:center;padding:2px}
#hollowUI .hpi{border-radius:14px;padding:4px 10px;min-width:88px;background:rgba(6,20,70,.55);border:2px solid rgba(122,94,224,.5);color:#fff;font:inherit;cursor:pointer;line-height:1.15}
#hollowUI .hpi b{display:block;font-size:15px}#hollowUI .hpi small{font-size:11px;opacity:.8}
#hollowUI .hpi.sel{border-color:#ffd54a;box-shadow:0 0 12px rgba(255,213,74,.5)}
#hollowUI .hpbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
#hollowUI .hpbtns .go{margin:0;font-size:16px;padding:.3em 1.2em}
#hollowUI .hpin .reset{margin:4px 0 0}
#hollowUI .hpempty{margin:6px 0;color:#E6E1FF}
.hpouchopen #stick,.hpouchopen #flybtn{visibility:hidden}
@media (max-width:720px){
  #hollowUI .hplaque{max-width:calc(100% - 24px);top:auto;bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  #hollowUI .hpwrap{grid-template-columns:1fr}
  #hollowUI .hpslot{height:120px}
}
@media (max-height:460px){
  #hollowUI .hboard{padding:4px 26px 3px;margin-top:10px}#hollowUI .hboard h2{font-size:18px}#hollowUI .hboard small{font-size:11px}
  #hollowUI .hwb{width:54px;height:54px}#hollowUI .hwb svg{width:38px;height:38px}#hollowUI .hwb img{width:44px;height:44px}#hollowUI .hbadges{gap:12px}
  #hollowUI .hsel,#hollowUI .htip{top:calc(84px + env(safe-area-inset-top,0px))}
  #hollowUI .hpslot{height:130px}#hollowUI .hplist{max-height:130px}
}

#errNote{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-alert);max-width:min(92vw,620px);padding:10px 16px;border-radius:14px;background:rgba(90,10,30,.92);border:2px solid #ff6b86;color:#fff;font:600 14px/1.4 "Baloo 2",system-ui,sans-serif;text-align:center}
#errNote[hidden]{display:none}
.card h2.sub{margin:16px 0 6px;font-size:19px;color:var(--gold)}

/* ---------- the map: parchment, ink and vines ---------- */
.card.mapcard{width:min(100%,1040px);height:min(100%,780px);max-height:calc(100dvh - 40px);margin:auto;padding:0;background:none;border:none;box-shadow:none;position:relative;display:flex;flex-direction:column;text-align:center}
.mapcard .paper{flex:1;min-height:0;display:flex;flex-direction:column;padding:2.2% 3% 2%;
  background:radial-gradient(ellipse at 20% 15%,rgba(255,250,230,.55),transparent 45%),radial-gradient(ellipse at 85% 80%,rgba(150,105,50,.22),transparent 55%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(120,80,30,.35) 100%),var(--paperTex);
  background-size:auto,auto,auto,256px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.mtitle{align-self:center;position:relative;margin:2px 0 4px;padding:.18em 2.2em;background:linear-gradient(#b84a2a,#8a321c);color:#fbefd8;font-weight:800;font-size:clamp(18px,2.6vw,26px);letter-spacing:.04em;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.mapsvg2{flex:1;min-height:0;width:100%;display:block}
.mapsvg2 .land{fill:#cdd8a2;stroke:#6a4a2a;stroke-width:.7}
.mapsvg2 .landh{fill:url(#hatch)}
.mapsvg2 .shore{fill:none;stroke:rgba(106,74,42,.35);stroke-width:.35;stroke-dasharray:1.2 1.2}
.mapsvg2 .river2{fill:none;stroke:#6aa0b4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.mapsvg2 .trail{fill:none;stroke:rgba(90,62,34,.3);stroke-width:.6;stroke-dasharray:.9 1.6}
.mapsvg2 .trail.open{stroke:#7a4a24;stroke-width:1;stroke-dasharray:2.4 1.2}
.mapsvg2 .pdisc{stroke:#3a2614;stroke-width:.7}
.mapsvg2 .plock{fill:rgba(90,62,34,.18);stroke:rgba(90,62,34,.55);stroke-width:.5;stroke-dasharray:.8 .6}
.mapsvg2 .pq{font:800 3.6px 'Baloo 2',sans-serif;fill:rgba(90,62,34,.7);text-anchor:middle}
.mapsvg2 .plabel{font:700 3.25px 'Baloo 2',sans-serif;fill:#3a2614;text-anchor:middle;paint-order:stroke;stroke:#efe2bf;stroke-width:1.3px;stroke-linejoin:round}
.mapsvg2 .ptick{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round}
.mapsvg2 .pjob circle{fill:#ffd54a;stroke:#5a3e22;stroke-width:.5}
.mapsvg2 .pjob text{font:900 3.6px 'Baloo 2',sans-serif;fill:#5a2a10;text-anchor:middle}
.mapsvg2 .pjob{animation:jobbob 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes jobbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.8px)}}
.mapsvg2 .pdone circle{fill:#3a9a5a;stroke:#fff;stroke-width:.45}
.mapsvg2 .pdone path{fill:none;stroke:#fff;stroke-width:.65;stroke-linecap:round;stroke-linejoin:round}
.mapsvg2 .plabel.cur{font-weight:900;fill:#8a321c}
.mfoot .mkey{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:13px;opacity:.9}
.mfoot .mkey span{display:inline-flex;align-items:center;gap:5px}
.mfoot .mkey i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:900 12px 'Baloo 2',sans-serif;font-style:normal}
.mfoot .kjob{background:#ffd54a;color:#5a2a10;border:1.5px solid #5a3e22}
.mfoot .kdone{background:#3a9a5a;color:#fff;border:1.5px solid #fff;box-shadow:0 0 0 1px #3a6a4a}
.mfoot .kq{background:rgba(90,62,34,.15);color:rgba(90,62,34,.8);border:1.5px dashed rgba(90,62,34,.55)}
@media (max-width:640px){ .mfoot .mkey{display:none} }
.mapsvg2 .here{fill:none;stroke:#b84a2a;stroke-width:.8;stroke-dasharray:1.6 1;animation:spin 12s linear infinite;transform-box:fill-box;transform-origin:center}
.mapsvg2 .pn.open{cursor:pointer}
.mapsvg2 .pn.open:hover .pdisc,.mapsvg2 .pn.open:focus-visible .pdisc{stroke:#b84a2a;stroke-width:1.2}
.mapsvg2 .pn:focus{outline:none}
.mapsvg2 .pn-n{font:800 3.4px 'Baloo 2',sans-serif;fill:#5a3e22;text-anchor:middle}
.mfoot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;color:#4a3420;font-size:14px;padding-top:4px}
.mfoot .mstage b{color:#8a321c}
.mfoot .mhint{flex:1;text-align:center;opacity:.8}
.mfoot .go{padding:.35em 1.2em;font-size:16px}
@media (max-width:640px){ .mfoot .mhint{display:none} .mfoot{justify-content:center} }
/* vines on the corners of the map and the book */
.vines{position:absolute;inset:-14px;pointer-events:none;z-index:2}
.vines .v{position:absolute;width:clamp(110px,18vw,210px);height:clamp(110px,18vw,210px)}
.vines .v svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.vines .tl{left:0;top:0}.vines .tr{right:0;top:0;transform:scaleX(-1)}.vines .bl{left:0;bottom:0;transform:scaleY(-1)}.vines .br{right:0;bottom:0;transform:scale(-1,-1)}

/* ---------- the book: leather, paper pages and ribbon bookmarks ---------- */
.card.bookcard{width:min(100%,1000px);height:min(100%,760px);max-height:calc(100dvh - 40px);margin:auto;padding:30px 0 0;background:none;border:none;box-shadow:none;display:flex;flex-direction:column;text-align:left;position:relative}
.ribbons{position:absolute;top:0;left:9%;right:9%;display:flex;gap:10px;justify-content:flex-start;z-index:3}
.rib{position:relative;border:none;padding:6px 12px 14px;min-width:84px;color:#fff;font:800 14px 'Baloo 2',sans-serif;background:var(--rc);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transform:translateY(8px);transition:transform .2s;filter:brightness(.85);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
.rib:hover{transform:translateY(4px);filter:none}
.rib.on{transform:translateY(0);filter:none;padding-bottom:20px}
.cover{position:relative;flex:1;min-height:0;display:flex;padding:20px 22px 34px;border-radius:14px 18px 18px 14px;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.08),transparent 50%),linear-gradient(135deg,#5a3420,#3a2014 60%,#2a160c);
  box-shadow:0 22px 50px rgba(0,0,0,.55),inset 0 0 0 3px #b8862a,inset 0 0 0 6px #3a2014,inset 0 0 0 7px rgba(184,134,42,.6)}
.spread{position:relative;flex:1;min-height:0;display:flex;border-radius:4px;
  background:linear-gradient(90deg,rgba(120,80,30,.18),transparent 4%,transparent 96%,rgba(120,80,30,.18)),var(--paperTex);background-size:auto,256px;box-shadow:0 0 0 1px rgba(90,60,30,.4),3px 3px 0 #d8c8a0,6px 6px 0 #c8b890}
.pagearea{position:relative;flex:1;min-height:0;overflow:hidden;margin:18px 26px 14px}
.flow{height:100%;column-fill:auto;transition:transform .5s cubic-bezier(.4,.1,.2,1);color:#3a2614;font-size:15px}
.spine{position:absolute;left:50%;top:0;bottom:0;width:60px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,transparent,rgba(90,60,30,.22) 42%,rgba(60,40,20,.38) 50%,rgba(90,60,30,.22) 58%,transparent)}
.turn{position:absolute;bottom:6px;width:36px;height:28px;border-radius:999px;border:2px solid #b8862a;background:#3a2014;color:#ffd54a;font:800 20px/1 'Baloo 2',sans-serif;cursor:pointer;z-index:3}
.turn.prev{left:24px}.turn.next{right:24px}
.turn:disabled{opacity:.3;cursor:default}
.folio{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:#e8d8b0;font-size:13px;pointer-events:none}
.bfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 6px 0}
.bfoot .flu-line,.bfoot>div:first-child{flex:1;min-width:220px}
.bfoot .btns{margin:0}
/* what goes on the pages */
.flow .bh{margin:0 0 6px;font-size:22px;color:#8a321c;border-bottom:2px solid rgba(138,50,28,.25);break-after:avoid}
.flow .bh4{margin:10px 0 3px;font-size:15px;color:#5a3e22;break-after:avoid;font-style:italic}
.flow .bp{margin:0 0 10px;color:#5a4430;font-size:14px}
.flow .bw{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;padding:3px 0;border-bottom:1px dashed rgba(90,62,34,.2);break-inside:avoid}
.flow .bw b{color:#1f4a5a;font-size:16px}
.flow .bw span{color:#5a4430;font-size:14px}
.flow .bw.unmet b{color:rgba(90,62,34,.4)}
.flow .bw .gib,.flow .bw svg{grid-column:1/-1;height:20px}
.flow .bent{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(90,62,34,.2);break-inside:avoid}
.flow .bent b{display:block;font-size:16px;color:#1f4a5a}
.flow .bent small{display:block;font-size:12px;color:#8a6a48}
.flow .bent p{margin:2px 0 0;font-size:13px;color:#4a3420}
.flow .bent.unmet{opacity:.55}
.flow .bb{width:30px;height:30px;border-radius:50%;border:2px solid #3a2614}
.flow .bgib{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;break-inside:avoid}
.flow .gt{display:grid;place-items:center;gap:2px;padding:6px 2px;border:1px solid rgba(90,62,34,.3);border-radius:10px;background:rgba(255,250,230,.4);font-size:11px;color:#5a4430}
.flow .gt svg{width:34px;height:34px}
.flow .gt.off span{font-size:24px;color:rgba(90,62,34,.35)}
.flow .dots i{background:rgba(90,62,34,.2)}
.flow .dots i.on{background:#b8862a}
@media (max-width:640px){
  .card.bookcard{padding-top:26px}
  .ribbons{left:4%;right:4%;gap:5px}
  .rib{min-width:0;flex:1;font-size:12px;padding:5px 4px 12px}
  .cover{padding:14px 12px 34px}
  .pagearea{margin:12px 14px 10px}
}

.mapsvg2 .sea{fill:none;stroke:rgba(120,175,190,.32);stroke-width:12;stroke-linejoin:round}
@media (max-width:640px){
  .card.mapcard{height:auto}
  .mapcard .paper{flex:none;padding:16px 10px 12px}
  .mapsvg2{flex:none;height:auto}
  .mapsvg2 .plabel{font-size:4.7px;stroke-width:1.5px}
  .mapsvg2 .pdisc{r:5.4}
  .bfoot{padding-top:6px;gap:6px}
  .bfoot .btns{display:flex;gap:8px;width:100%}
  .bfoot .btns .go{flex:1;padding:.4em .6em;font-size:15px}
  .bfoot .flu-line,.bfoot>div:first-child{min-width:0}
}

/* ---------- the pause menu: spirit light, sparkles and vines ---------- */
.card.pausecard{position:relative;width:min(100%,880px);max-height:calc(100dvh - 40px);margin:auto;padding:30px 30px 24px;display:grid;grid-template-columns:1.05fr 1fr;gap:10px 30px;align-items:center;text-align:center;overflow:visible;
  background:radial-gradient(ellipse at 25% 30%,rgba(70,224,210,.22),transparent 55%),radial-gradient(ellipse at 80% 75%,rgba(201,188,247,.2),transparent 55%),linear-gradient(160deg,#0a2a70 0%,#22186a 55%,#160f4a 100%);
  border:2px solid rgba(70,224,210,.45);box-shadow:0 0 0 1px rgba(255,213,74,.25),0 0 50px rgba(70,224,210,.25),0 24px 60px rgba(0,0,0,.55)}
.pzglow{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.pzspirit{position:absolute;inset:0;width:100%;height:100%}
.pzspirit path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:60 30;opacity:.55;filter:drop-shadow(0 0 4px rgba(70,224,210,.8));animation:pzflow 9s linear infinite}
.pzspirit path:nth-child(3){animation-duration:13s;animation-direction:reverse}
.pzspirit path:nth-child(4){animation-duration:11s;opacity:.35}
@keyframes pzflow{to{stroke-dashoffset:-360}}
.motes span{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 8px 2px var(--c);opacity:0;animation:pzmote var(--d) ease-in-out var(--dl) infinite}
@keyframes pzmote{0%{opacity:0;transform:translateY(20px) scale(.6)}25%{opacity:.9}60%{opacity:.5;transform:translateY(-30px) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(.4)}}
.pausecard .vines{inset:-16px}
.pausecard .vines .v{width:clamp(90px,14vw,160px);height:clamp(90px,14vw,160px)}
.pzl,.pzr{position:relative;z-index:1;min-width:0}
.pzring{position:relative;width:118px;height:118px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(70,224,210,.35),rgba(27,47,134,.5) 55%,transparent 72%)}
.pzring::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px dotted var(--aqua);animation:spin 26s linear infinite}
.pzring::after{content:'';position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(255,213,74,.6);animation:spin 18s linear infinite reverse}
.pzowl{width:84px;height:92px;animation:pzbob 3.2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(70,224,210,.6))}
.pzowl svg{width:100%;height:100%}
@keyframes pzbob{50%{transform:translateY(-5px)}}
.pausecard h1{margin:4px 0 0;font-size:clamp(24px,3.4vw,32px);background:linear-gradient(90deg,#9fffe8,#FFD54A);-webkit-background-clip:text;background-clip:text;color:transparent}
.pzwhere{margin:2px 0 6px;color:#C9C2F5;font-weight:700}
.pzstats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 8px;font-size:14px;color:#C9C2F5}
.pzstats b{color:var(--gold);font-size:17px}
.pausecard .flu-line,.pausecard .fluency{margin:4px 0 10px}
.pzbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.pzbtns .go{width:100%;padding:.5em .6em;font-size:16px}
.pzbtns .go:first-child{grid-column:1/-1;font-size:19px}
.pztabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(6,20,70,.6);border:1px solid rgba(122,94,224,.5);margin-bottom:10px}
.pztabs button{border:0;border-radius:999px;padding:.32em 1.1em;background:none;color:#C9C2F5;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.pztabs button.on{background:linear-gradient(90deg,#2a9c96,#46E0D2);color:#06122a}
.pzpane{padding:14px 16px;border-radius:20px;background:rgba(6,16,54,.55);border:1px solid rgba(70,224,210,.25);text-align:left}
.pzpane h3{margin:0 0 8px;font-size:16px;color:var(--gold);text-align:center}
.pzrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(201,188,247,.15)}
.pzrow:last-child{border-bottom:0}
.pzrow>span{font-weight:700;color:#C9C2F5;font-size:14px}
.pzrow .diff{margin:0}
.pzrow .diff .lbl{display:none}
.pzrow .diff button{padding:.28em .8em;font-size:13px}
.pzsel{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;padding:.4em 2.2em .4em 1em;background:rgba(6,20,70,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C9C2F5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9em center/10px 6px;color:var(--paper);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.pzsel:focus-visible{outline:2px solid var(--gold)}
.pzsel option{background:#1a1650;color:#fff}
.pzctl{font-size:13px;max-height:min(46vh,330px);overflow:auto}
.pzctl ul,.pzctl .keys{margin:0;padding:0}
.pausecard .reset{margin-top:12px}
@media (max-width:760px){
  .card.pausecard{grid-template-columns:1fr;padding:18px 16px 16px;gap:8px;width:min(100%,460px)}
  .pzring{width:76px;height:76px}.pzowl{width:54px;height:60px}
  .pausecard h1{font-size:22px}
  .pzbtns .go{font-size:14px;padding:.4em .5em}.pzbtns .go:first-child{font-size:17px}
  .pzpane{padding:10px 12px}
  .pzrow{padding:4px 0}
  .pzctl{max-height:30vh}
}
@media (max-height:620px) and (min-width:761px){ .pzring{width:80px;height:80px}.pzowl{width:56px;height:62px} .card.pausecard{padding:20px 24px 16px} }
@media (prefers-reduced-motion:reduce){ .motes span,.pzspirit path,.pzring::before,.pzring::after,.pzowl{animation:none} .motes span{opacity:.6} }

.pzbtns{grid-template-columns:repeat(3,1fr)}
.pzbtns .go:first-child{grid-column:1/-1}
.pzbtns .go{font-size:15px;padding:.45em .4em;white-space:nowrap}
@media (max-width:760px){ .pzbtns .go{font-size:13px} }
/* short screens, like a phone held sideways */
@media (max-height:560px){
  .card.pausecard{grid-template-columns:1fr 1fr;width:min(100%,820px);padding:12px 18px 10px;gap:6px 18px}
  .pzring,.pausecard .fluency,.pausecard .flu-line{display:none}
  .pausecard h1{font-size:20px;margin:0}
  .pzwhere{margin:0 0 2px;font-size:13px}
  .pzstats{margin:0 0 4px;font-size:12px}
  .pzbtns{gap:6px}
  .pzbtns .go{font-size:13px;padding:.3em .4em}.pzbtns .go:first-child{font-size:15px}
  .pztabs{margin-bottom:6px}
  .pzpane{padding:6px 10px}
  .pzrow{padding:2px 0}
  .pzctl{max-height:52vh}
  .pausecard .reset{margin-top:4px}
  .pausecard .vines .v{width:80px;height:80px}
}
@media (max-width:420px){ .pzrow .diff button{padding:.26em .55em;font-size:12px} .pzrow>span{font-size:13px} }

/* ---------- the forms screen ---------- */
.card.formscard{position:relative;width:min(100%,960px);max-height:calc(100dvh - 40px);margin:auto;padding:24px 26px 20px;display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:12px 26px;text-align:left;overflow:visible;
  background:radial-gradient(ellipse at 22% 35%,rgba(70,224,210,.22),transparent 55%),radial-gradient(ellipse at 80% 75%,rgba(201,188,247,.18),transparent 55%),linear-gradient(160deg,#0a2a70 0%,#22186a 55%,#160f4a 100%);
  border:2px solid rgba(70,224,210,.45);box-shadow:0 0 0 1px rgba(255,213,74,.25),0 0 50px rgba(70,224,210,.25),0 24px 60px rgba(0,0,0,.55)}
.formscard .vines{inset:-16px}.formscard .vines .v{width:clamp(90px,13vw,150px);height:clamp(90px,13vw,150px)}
.fleft,.fright{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column}
.pvslot{position:relative;flex:1;min-height:200px;max-height:42vh;border-radius:22px;background:radial-gradient(circle at 50% 62%,rgba(70,224,210,.28),rgba(10,20,60,.2) 60%,transparent 75%)}
.pvslot::after{content:'';position:absolute;inset:8% 14%;border-radius:50%;border:2px dotted rgba(70,224,210,.45);animation:spin 30s linear infinite;pointer-events:none}
.pvcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.finfo{padding:4px 2px 0}
.fname b{display:block;font-size:24px;color:var(--gold);line-height:1.1}
.fname small{color:#C9C2F5;font-size:14px;font-weight:700}
.fab{margin:4px 0 8px;color:#E6E1FF;font-size:14px;min-height:2.6em}
.fbars{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-bottom:6px}
.fbar{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:6px;font-size:12px;color:#C9C2F5;font-weight:700}
.fbar i{height:7px;border-radius:9px;background:rgba(6,20,70,.7);overflow:hidden}
.fbar b{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#46E0D2,#FFD54A)}
.fpow{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.fpow em{font-style:normal;font-size:12px;font-weight:800;color:#06122a;background:var(--gold);border-radius:999px;padding:.15em .7em}
.fgo .go{width:100%}
.fright h1{margin:0;font-size:clamp(22px,3vw,30px);background:linear-gradient(90deg,#9fffe8,#FFD54A);-webkit-background-clip:text;background-clip:text;color:transparent}
.fsub{margin:2px 0 10px;color:#C9C2F5;font-size:13px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px;align-content:start;min-height:0;overflow:auto;padding:2px}
.ftile{display:grid;justify-items:center;gap:3px;padding:7px 3px 6px;border-radius:16px;border:2px solid rgba(122,94,224,.45);background:rgba(6,20,70,.55);color:var(--paper);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.ftile i{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper)}
.ftile span{font-size:11px;font-weight:700;line-height:1.1;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftile:hover{transform:translateY(-2px);border-color:var(--aqua)}
.ftile.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(255,213,74,.45)}
.ftile.cur::after{content:'you';position:absolute;transform:translate(22px,-6px);font-size:10px;font-weight:800;background:var(--aqua);color:#06122a;border-radius:999px;padding:0 .5em}
.ftile{position:relative}
.ftile.locked i{filter:grayscale(1) brightness(.6)}
.ftile.locked span{opacity:.6}
.fright .btns{margin-top:10px}
@media (max-width:760px){
  .card.formscard{grid-template-columns:1fr;padding:14px 14px 12px;gap:8px;width:min(100%,480px)}
  .pvslot{flex:none;height:30vh;min-height:150px}
  .fname b{font-size:20px}
  .fab{min-height:0;margin:2px 0 6px;font-size:13px}
  .fbars{gap:3px 10px}
  .fright h1{display:none}.fsub{display:none}
  .fgrid{grid-template-columns:repeat(6,1fr);gap:5px}
  .ftile{padding:4px 1px;border-radius:12px}.ftile i{width:28px;height:28px}.ftile span{display:none}
  .ftile.cur::after{transform:translate(12px,-4px)}
  .fright .btns{margin-top:6px}
}
@media (max-height:560px){
  .card.formscard{grid-template-columns:.9fr 1.1fr;padding:10px 16px;gap:6px 16px}
  .pvslot{max-height:none;min-height:110px}
  .fbars{display:none}
  .fright h1{display:none}.fsub{display:none}
  .ftile span{display:none}.fgrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
}
.ftile span{white-space:normal;font-size:10.5px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.3em}
@media (max-width:760px){ .ftile span{display:none} }
@media (max-height:560px){ .ftile span{display:none} }
@media (max-width:760px){ .fgo .go{font-size:16px;padding:.45em .6em} }

/* ---------- the main menu ---------- */
.card.mainmenu{position:relative;width:min(100%,920px);max-height:calc(100dvh - 40px);margin:auto;padding:30px 34px 26px;display:grid;grid-template-columns:1fr 1.1fr;gap:12px 34px;align-items:center;text-align:center;overflow:visible;
  background:radial-gradient(ellipse at 25% 40%,rgba(70,224,210,.26),transparent 55%),radial-gradient(ellipse at 85% 80%,rgba(255,213,74,.12),transparent 55%),linear-gradient(160deg,#0a2a70 0%,#22186a 55%,#160f4a 100%);
  border:2px solid rgba(70,224,210,.45);box-shadow:0 0 0 1px rgba(255,213,74,.3),0 0 70px rgba(70,224,210,.3),0 24px 60px rgba(0,0,0,.55)}
.mainmenu .vines{inset:-18px}.mainmenu .vines .v{width:clamp(100px,16vw,190px);height:clamp(100px,16vw,190px)}
.mml,.mmr{position:relative;z-index:1;min-width:0}
.mmring{width:min(190px,26vh);height:min(190px,26vh)}
.mmring .pzowl{width:68%;height:74%}
.mmgib{font-size:28px;color:var(--gold);margin:4px 0 0;text-shadow:0 0 12px rgba(255,213,74,.6)}
.mmtitle{margin:2px 0 0;font-size:clamp(28px,4.4vw,46px);line-height:1.05;background:linear-gradient(90deg,#9fffe8,#FFD54A 60%,#ffb86a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(70,224,210,.35))}
.mmsub{margin-top:6px;display:inline-block;padding:.1em 1em;border-radius:999px;border:1px solid rgba(70,224,210,.45);color:#9fffe8;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.mmtag{margin:0 0 12px;color:#E6E1FF;font-size:15px;line-height:1.5}
.mmstats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;font-size:14px;color:#C9C2F5}
.mmstats b{color:var(--gold);font-size:17px}
.mmbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mmbtns .go{width:100%;padding:.5em .6em;font-size:16px}
.mmbtns .go.big,.mmbtns .go:only-child{grid-column:1/-1;font-size:21px;padding:.55em}
.mmbtns .go:nth-child(4):last-child{grid-column:1/-1}
.mmdiff{margin-top:12px;justify-content:center;gap:14px;border:0}
.mmhow{max-height:min(48vh,360px);margin-bottom:10px}
@media (max-width:760px){
  .card.mainmenu{grid-template-columns:1fr;padding:18px 16px 16px;gap:8px;width:min(100%,460px)}
  .mmring{width:min(120px,18vh);height:min(120px,18vh)}
  .mmgib{font-size:22px}
  .mmtitle{font-size:28px}
  .mmtag{font-size:13px;margin-bottom:8px}
  .mmbtns .go{font-size:14px;padding:.42em .5em}.mmbtns .go.big{font-size:18px}
  .mmhow{max-height:40vh}
}
@media (max-height:560px){
  .card.mainmenu{grid-template-columns:.8fr 1.2fr;padding:12px 20px;gap:6px 18px}
  .mmring{width:90px;height:90px}.mmgib{display:none}
  .mmtitle{font-size:24px}.mmsub{margin-top:2px}
  .mmtag{display:none}
  .mmbtns .go{font-size:13px;padding:.32em .4em}.mmbtns .go.big{font-size:16px}
  .mmdiff{margin-top:6px}
  .mmhow{max-height:58vh}
}

/* the trailer fills the screen while it plays */
#promoCv{position:fixed;inset:0;width:100vw;height:100vh;object-fit:contain;background:#000;z-index:var(--z-promo)}
#promoCv[hidden]{display:none}
body.promoing #overlay,body.promoing #hud,body.promoing #errNote{visibility:hidden}

/* ---------- Fly Home: practising your words ---------- */
.inflyhome #hud,.inflyhome #goal,.inflyhome #prompt,.inflyhome #moves,.inflyhome #energy,.inflyhome #minimap,.inflyhome #touch,.inflyhome #tags,.inflyhome #bubbles{opacity:0 !important;pointer-events:none !important}
#fhUI{position:absolute;inset:0;z-index:var(--z-activity);pointer-events:none}
#fhUI[hidden]{display:none}
#fhUI button{pointer-events:auto}
.fhtop{position:absolute;left:0;right:0;top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:14px;padding:0 14px}
.fhx{width:38px;height:38px;border-radius:50%;border:2px solid rgba(122,94,224,.7);background:rgba(6,20,70,.75);color:var(--paper);font:800 16px/1 'Baloo 2',sans-serif;cursor:pointer}
.fhprog{flex:1;max-width:420px;margin:0 auto;display:grid;gap:4px;text-align:center;color:#C9C2F5;font-weight:700;font-size:13px}
.fhprog i{display:block;height:8px;border-radius:9px;background:rgba(6,20,70,.7);overflow:hidden}
.fhprog b{display:block;height:100%;background:linear-gradient(90deg,#46E0D2,#FFD54A);transition:width .6s}
.fhlives{display:flex;gap:4px}
.fhf{width:16px;height:26px;background:linear-gradient(#F4F1FF,#C9BCF7);clip-path:polygon(50% 0,90% 30%,70% 100%,30% 100%,10% 30%);filter:drop-shadow(0 0 4px rgba(201,188,247,.8))}
.fhask{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:min(92vw,640px);padding:10px 22px;border-radius:22px;text-align:center;
  background:rgba(6,20,70,.8);border:2px solid rgba(70,224,210,.45);box-shadow:0 0 24px rgba(70,224,210,.25);color:var(--paper);font-size:clamp(17px,2.6vw,24px);font-weight:700}
.fhask:empty{display:none}
.fhask b{color:var(--gold)}
.fhask .dots{display:block;margin-bottom:2px}
.fhgib{display:block;font-size:42px;color:var(--gold);margin-top:4px;text-shadow:0 0 12px rgba(255,213,74,.6)}
.fhsay{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(92vw,620px);padding:8px 18px;border-radius:999px;text-align:center;font-weight:700;opacity:0;transition:opacity .3s;color:var(--paper)}
.fhsay.on{opacity:1}.fhsay.good{background:rgba(20,110,100,.85)}.fhsay.bad{background:rgba(110,30,60,.85)}
.fhsay b{color:var(--gold)}
.fhlabels{position:absolute;inset:0;overflow:hidden}
.fhlab{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;will-change:transform;transition:opacity .35s}
.fhlab .c{display:block;transform:translateX(-50%)}
.fhlab .pill{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:.25em .9em .22em .4em;border-radius:999px;background:rgba(6,40,100,.88);border:2px solid rgba(122,94,224,.9);font-size:clamp(15px,2.4vw,21px);font-weight:700;color:var(--paper);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s,border-color .2s}
.fhlab .pill kbd{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,213,74,.9);color:#06122a;font:800 13px/1 'Baloo 2',sans-serif}
.fhlab:hover .pill,.fhlab:focus-visible .pill{border-color:var(--aqua);transform:translateY(-3px) scale(1.06)}
.fhlab.waiting .pill{opacity:0;transform:scale(.3)}
.fhlab.pop .pill{animation:labelpop .55s cubic-bezier(.3,1.6,.5,1)}
.fhlab.right .pill{background:var(--aqua);border-color:var(--aqua);color:#06122a}
.fhlab.wrong .pill{background:#8C2F45;border-color:#FF8FA0}
.fhlab.reveal .pill{border-color:var(--aqua);box-shadow:0 0 18px rgba(70,224,210,.8)}
.fhlab.leave{opacity:0;pointer-events:none}
@keyframes labelpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.fhbot{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.fhdrop{border:2px solid rgba(255,213,74,.6);background:rgba(6,20,70,.8);color:var(--gold);border-radius:999px;padding:.35em 1.1em;font:800 14px 'Baloo 2',sans-serif;cursor:pointer}
.fhdrop:disabled{opacity:.4;cursor:default}
.fhkeys{color:#9C93D8;font-size:12px}
/* the practice page and results */
.card.practise .pwhelp{margin-bottom:10px;text-align:left;font-size:14px;line-height:1.45}
.card.practise .pwhelp p{margin:4px 0;color:#E6E1FF}
.pwhead{margin:0 0 8px;color:#E6E1FF;font-size:15px}
.pwhead b{color:var(--gold);font-size:18px}
.pwlist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:min(30vh,220px);overflow:auto;padding:2px}
.pwchip{display:grid;justify-items:center;gap:1px;padding:6px 10px;border-radius:14px;background:rgba(6,20,70,.6);border:1px solid rgba(122,94,224,.5)}
.pwchip b{color:#E6E1FF;font-size:15px}.pwchip small{color:#9C93D8;font-size:11px}
.pwchip.due{border-color:var(--gold);box-shadow:0 0 10px rgba(255,213,74,.35)}
.pwchip.due b{color:var(--gold)}
.fhrows{display:grid;gap:4px;max-height:min(46vh,340px);overflow:auto;text-align:left}
.fhrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 10px;align-items:center;padding:6px 10px;border-radius:12px;background:rgba(6,20,70,.55)}
.fhrow b{color:var(--gold)}.fhrow span{color:#C9C2F5;font-size:13px}.fhrow em{font-style:normal;font-size:12px;font-weight:800;color:#9fffe8}
.fhrow.miss em{color:#ffb0c0}
.flow .bw.due{background:linear-gradient(90deg,rgba(255,213,74,.28),transparent);border-radius:6px}
.flow .bw.due b{color:#8a5a00}
.flow .bdue{background:rgba(255,213,74,.18);border-radius:8px;padding:6px 8px}
.flow .bprac{border:1px solid #b8862a;background:#f6e6b8;color:#5a3e22;border-radius:999px;padding:0 .7em;font:800 12px 'Baloo 2',sans-serif;cursor:pointer;margin-left:6px}
@media (max-width:760px){ .fhask{top:calc(64px + env(safe-area-inset-top,0px));font-size:17px} .fhrow{grid-template-columns:auto 1fr auto} .fhrow .dots{display:none} }
@media (max-width:760px){
  .card.practise .mmring,.card.practise .mml .mmtag{display:none}
  .card.practise .mmtitle{font-size:24px}
  .card.practise .pwhelp{font-size:12.5px;line-height:1.35;padding:8px 10px;margin-bottom:6px}
  .card.practise .pwhelp p{margin:3px 0}
  .card.practise .pwhelp h3{font-size:14px;margin-bottom:2px}
  .card.practise .pwlist{max-height:17vh}
  .card.practise .pwchip{padding:4px 8px}
  .card.practise .pwhead{font-size:14px;margin-bottom:4px}
  .card.fhres .mmring{display:none}
  .card.fhres .fhrows{max-height:34vh}
}
@media (max-height:620px){ .card.practise .mmring,.card.practise .mml .mmtag{display:none} .card.practise .pwlist{max-height:20vh} }
@media (max-width:760px){ .card.practise .pwhelp p{font-size:12.5px;line-height:1.35} .card.practise .mmbtns .go{padding:.38em .5em} }
@media (max-width:760px){ .fhlab .pill{white-space:normal;max-width:26vw;text-align:center;font-size:14px;padding:.25em .6em .22em .3em;gap:5px} .fhlab .pill kbd{display:none} }

/* hearing words */
[data-say]{cursor:pointer}
.yw[data-say]:hover{text-decoration:underline dotted;text-underline-offset:3px}
button.say{border:0;background:none;padding:0 .15em;margin:0;font-size:.85em;line-height:1;cursor:pointer;vertical-align:middle;filter:saturate(.8);opacity:.85}
button.say:hover{opacity:1;transform:scale(1.15)}
.flow button.say{font-size:.75em}

/* Mother Emu */
#starsCv{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-stars);touch-action:none;cursor:pointer}
#starsCv[hidden]{display:none}
.instars #hud,.instars #goal,.instars #prompt,.instars #moves,.instars #energy,.instars #minimap,.instars #touch,.instars #tags,.instars #bubbles{opacity:0 !important;pointer-events:none !important}
.emuring{display:grid;place-items:center;background:radial-gradient(circle,#2a2a5a,#0a0a24)}
.emuglyph{font-family:Yawbam,serif;font-size:44px;color:#ffd54a;text-shadow:0 0 14px rgba(255,213,74,.7)}
.gtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-height:min(52vh,380px);overflow:auto}
.gtile{display:grid;justify-items:center;padding:6px 2px;border-radius:10px;background:rgba(10,8,30,.6);border:1px solid rgba(122,94,224,.35)}
.gtile .gib{font-size:30px;color:rgba(200,180,150,.3)}
.gtile small{font-size:10px;color:#8a82c0;text-align:center;line-height:1.1}
.gtile.lit{border-color:rgba(255,213,74,.6);box-shadow:0 0 10px rgba(255,213,74,.25)}
.gtile.lit .gib{color:#ffd54a;text-shadow:0 0 8px rgba(255,213,74,.6)}
.gtile.lit small{color:#e8e1ff}
@media (max-width:760px){ .gtiles{grid-template-columns:repeat(4,1fr)} .card.emumenu .mmring{display:none} }

/* the Remembering */
.remembering #bubbles,.remembering #minimap,.remembering #tags{opacity:0 !important;pointer-events:none !important}
#remBars{position:absolute;inset:0;z-index:var(--z-remember);pointer-events:none}
#remBars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .9s cubic-bezier(.3,.7,.3,1)}
#remBars i:first-child{top:0}#remBars i:last-child{bottom:0}
#remBars.on i{height:11vh}
#remCard{position:absolute;left:0;right:0;bottom:calc(13vh + 10px);z-index:var(--z-remember-card);display:flex;justify-content:center;pointer-events:none;text-align:center}
#remCard[hidden]{display:none}
#remCard .rem-in{opacity:0;transform:translateY(18px) scale(.94)}
#remCard.on .rem-in{animation:remIn 1.1s cubic-bezier(.2,.8,.2,1) forwards}
#remCard.out .rem-in{animation:remOut .6s ease forwards}
#remCard .rem-gib{font-size:clamp(28px,4vw,44px);color:#ffd54a;text-shadow:0 0 14px rgba(255,213,74,.8);letter-spacing:.06em}
#remCard h2{margin:0;font:800 clamp(40px,7vw,84px)/1 'Baloo 2',ui-rounded,sans-serif;background:linear-gradient(180deg,#fffbe8 10%,#ffd54a 55%,#ffb04a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px var(--c2,#ffd54a)) drop-shadow(0 4px 0 rgba(0,0,0,.35))}
#remCard p{margin:.1em 0 0;font:800 clamp(18px,2.6vw,30px) 'Baloo 2',sans-serif;color:#f4f1ff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#remCard small{display:block;margin-top:.2em;font-size:clamp(12px,1.5vw,16px);color:#c9c2f5;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@keyframes remIn{0%{opacity:0;transform:translateY(18px) scale(.94);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes remOut{to{opacity:0;transform:translateY(-10px) scale(1.03)}}

/* the dilly bag */
.card.satchel .sbscroll{max-height:min(58vh,440px);overflow:auto;padding-right:4px;text-align:left}
.sbh{margin:10px 0 6px;font:800 13px 'Baloo 2',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9fffe8}
.sbh:first-child{margin-top:0}
.sbitem{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 10px;margin-bottom:5px;border-radius:14px;background:rgba(6,20,70,.6);border:1px solid rgba(122,94,224,.4)}
.sbitem .sbico{grid-row:1/3}
.sbitem b{color:#f4f1ff;font-size:15px}.sbitem small{grid-column:2;color:#9c93d8;font-size:12px}
.sbitem em{grid-row:1/3;grid-column:3;font-style:normal;font-weight:800;font-size:12px;color:#06122a;background:#ffd54a;border-radius:999px;padding:.15em .7em}
.sbitem .sbeat{grid-row:1/3;grid-column:3;padding:.3em 1.1em;font-size:14px}
.sbitem.none{opacity:.55}
.sbico .ico{width:40px;height:40px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.sbempty{color:#9c93d8;font-size:13px;margin:0 0 6px}
.sbtreas{display:grid;gap:8px}
.sbtreas b{display:block;color:#e6e1ff;font-size:13px;margin-bottom:3px}
.sbrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sbrow small{color:#9c93d8;font-size:12px}.sbrow small b{display:inline;color:#ffd54a;font-size:14px}
.sbpig{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.4);box-shadow:inset 0 -4px 6px rgba(0,0,0,.3)}
.sbfeather{width:16px;height:30px;background:linear-gradient(var(--c2),var(--c1));clip-path:polygon(50% 0,92% 34%,70% 100%,30% 100%,8% 34%);filter:drop-shadow(0 0 3px rgba(255,255,255,.3))}
.sbnrg{display:grid;gap:4px;justify-items:center;margin-top:8px;font-weight:800;font-size:13px;color:#ffb0c0}
.sbnrg i{display:block;width:160px;height:10px;border-radius:999px;background:rgba(6,20,70,.7);overflow:hidden;border:1px solid rgba(255,140,170,.5)}
.sbnrg i b{display:block;height:100%;background:linear-gradient(90deg,#ff6a8a,#ffd54a,#7aff9a)}
@media (max-width:760px){ .card.satchel .mmring{display:none} .card.satchel .sbscroll{max-height:48vh} }

#perf{position:absolute;left:12px;top:calc(64px + env(safe-area-inset-top,0px));z-index:var(--z-notice);padding:8px 12px;border-radius:12px;background:rgba(4,10,40,.82);border:1px solid rgba(70,224,210,.5);color:#cfe;font:600 12px/1.45 ui-monospace,Consolas,monospace;pointer-events:none}
#perf b{font-size:18px;color:#9fffe8}
#perf[hidden]{display:none}

/* Gali X / Minyang mali? bubbles */
.gali{position:absolute;left:0;top:0;z-index:var(--z-goal);pointer-events:none;will-change:transform}
.gali[hidden]{display:none}
.gali>div{transform:translate(-50%,-100%)}
.gali .gsay{padding:.35em .9em;border-radius:16px;background:rgba(6,20,70,.86);border:2px solid rgba(70,224,210,.6);color:#f4f1ff;font-weight:700;font-size:clamp(14px,1.9vw,18px);white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.gali.ask .gsay{border-color:#ffd54a}
.gali .gsay.good{border-color:#46e0d2;background:rgba(10,80,74,.9)}.gali .gsay.bad{border-color:#ff8fa0;background:rgba(90,24,48,.9)}
.gali .gopts{display:flex;gap:6px;justify-content:center;margin-top:6px;transform:translate(-50%,-100%)}
.gali .gopts button{pointer-events:auto;display:flex;align-items:center;gap:6px;border:2px solid rgba(122,94,224,.9);background:rgba(6,40,100,.92);color:#f4f1ff;border-radius:999px;padding:.25em .8em .25em .35em;font:800 clamp(13px,1.7vw,16px) 'Baloo 2',sans-serif;cursor:pointer}
.gali .gopts button:hover{border-color:#46e0d2;transform:translateY(-2px)}
.gali .gopts kbd{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffd54a;color:#06122a;font:800 12px/1 'Baloo 2',sans-serif}
.gali.in>div{animation:galiIn .35s cubic-bezier(.3,1.5,.5,1)}
.gali.out{opacity:0;transition:opacity .35s}
@keyframes galiIn{from{opacity:0;transform:translate(-50%,-80%) scale(.7)}}
/* picking from the dilly bag */
.card.bagive{text-align:center}
.bgask{display:flex;gap:14px;align-items:center;justify-content:center;text-align:left}
.bgbadge{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.bgask small{color:#9c93d8;font-size:13px}
.bgword{font:800 clamp(30px,5vw,44px)/1.1 'Baloo 2',sans-serif;color:#ffd54a;display:flex;align-items:center;gap:8px}
.bgword em{font-style:normal;font-size:.55em;color:#e6e1ff}
.bghint{display:block;margin-top:2px}
.bgtell{margin:12px 0 8px;color:#e6e1ff}
.bgtiles{display:grid;grid-template-columns:repeat(3,minmax(70px,96px));gap:10px;justify-content:center}
.bgtile{position:relative;aspect-ratio:1;border-radius:18px;border:2px solid rgba(122,94,224,.6);background:radial-gradient(circle at 50% 40%,rgba(40,60,140,.9),rgba(10,20,60,.95));cursor:pointer;display:grid;place-items:center;padding:8px}
.bgtile .ico{width:100%;height:100%}
.bgtile:hover{border-color:#46e0d2;transform:translateY(-3px)}
.bgtile i{position:absolute;right:6px;bottom:4px;font:800 13px 'Baloo 2',sans-serif;font-style:normal;color:#ffd54a}
.bgtile.glow{border-color:#ffd54a;box-shadow:0 0 18px rgba(255,213,74,.7)}
.bgmsg{min-height:1.6em;margin-top:10px;font-weight:700;color:#ffb0c0}

/* the Forgetting */
#wangalFx{position:absolute;inset:0;z-index:var(--z-flash);pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(120,120,135,0) 35%,rgba(70,70,84,.55) 75%,rgba(40,40,52,.85) 100%);transition:opacity .3s}
#gl{transition:filter .3s}
.tag.wisp span{background:rgba(60,60,72,.85);border-color:rgba(200,200,215,.6);color:#e8e8f0}
.bgframe{font-size:.62em;color:#9fffe8;margin-right:.2em}
.gali .gsay.wispq{border-color:#b8b8c8;background:rgba(40,40,56,.9);text-align:center}
.gali .gsay.wispq b{font-size:1.3em;color:#e8e8f4}.gali .gsay.wispq small{display:block;font-size:.75em;color:#b8b8cc}

/* wisps: easier to see, and to tap */
.tag.wisp{pointer-events:auto;cursor:pointer;border:0;background:none;padding:0}
.tag.wisp span{font-size:18px;min-width:30px;min-height:30px;display:inline-grid;place-items:center;border-radius:50%;background:rgba(70,66,96,.92);border:2px solid #d8d0ff;box-shadow:0 0 14px rgba(216,208,255,.8);animation:wispPulse 1.4s ease-in-out infinite}
@keyframes wispPulse{50%{box-shadow:0 0 22px rgba(216,208,255,1);transform:scale(1.12)}}
/* a wisp's question stays put on screen */
.gali.fixed{position:fixed;left:50%;top:auto;bottom:24%;transform:none!important;z-index:var(--z-activity)}
.gali.fixed>div,.gali.fixed .gopts{transform:translateX(-50%)}
.gali.fixed .gsay{font-size:clamp(16px,2.2vw,22px)}
.gali.fixed .gopts button{font-size:clamp(15px,1.9vw,19px);padding:.35em .9em .35em .4em}

/* ---------- a phone held sideways: short and wide ----------
   Everything moves to the edges in a single layer, so nothing overlaps
   and the middle of the screen is left for the game. */
@media (orientation: landscape) and (max-height: 500px) {
  .touchmode #hud{top:calc(6px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));gap:8px}
  .touchmode .hudl{gap:6px;flex:1 1 auto;min-width:0}
  .touchmode .hudr{gap:6px;flex:none}
  .touchmode .hudbtn{width:32px;height:32px}
  .touchmode .hudbtn svg{width:15px;height:15px}
  .touchmode .place{font-size:13px}
  .touchmode .place small,.touchmode #hud .slots,.touchmode .vol{display:none}
  .touchmode .flu{height:32px;font-size:12px;padding:0 10px}
  .touchmode .flu .bar{display:none}
  .touchmode .sound{padding:1px}
  .touchmode #goal{top:calc(44px + env(safe-area-inset-top,0px));width:min(56vw,520px);font-size:16px}
  .touchmode #goal .tip{font-size:12px}
  .touchmode #energy{top:calc(46px + env(safe-area-inset-top,0px));bottom:auto;left:calc(10px + env(safe-area-inset-left,0px));padding:3px 8px;transform:scale(.85);transform-origin:left top}
  .touchmode #energy .ebar{width:78px}
  .touchmode #minimap{top:calc(58px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:auto;width:78px;height:78px}
  .touchmode #minimap .lbl{font-size:9px;line-height:14px;bottom:-9px}
  .touchmode #stick{left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:104px;height:104px}
  .touchmode #stick i{width:44px;height:44px;margin:-22px 0 0 -22px}
  .touchmode #flybtn{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:70px;height:70px}
  .touchmode #flybtn svg{width:34px;height:23px}
  .touchmode #moves{flex-direction:row;right:calc(92px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:8px}
  .touchmode .mv{width:48px;height:48px}
  .touchmode .mv svg{width:22px;height:22px}
  .touchmode #prompt{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  .touchmode #battle .hint{top:calc(44px + env(safe-area-inset-top,0px))}
  /* you don't move while talking: the dialogue gets the whole bottom of the screen */
  .talking .touchmode #stick,.talking .touchmode #flybtn,.touchmode.talking #stick,.touchmode.talking #flybtn{opacity:0;pointer-events:none}
  #banner{top:31%}
  #banner h2{font-size:clamp(26px,7vh,40px)}
  #banner p{font-size:14px;margin-top:4px}
  #banner .dots{margin-top:6px}
}

/* ---------- reveals: gifts and finds, glowing in the middle ---------- */
#reveal{position:absolute;inset:0;z-index:var(--z-card);display:grid;place-items:center;pointer-events:none;padding:16px}
#reveal[hidden]{display:none}
#reveal .rv{position:relative;pointer-events:auto;width:min(92vw,440px);padding:24px 24px 20px;border-radius:28px;text-align:center;color:var(--paper);
  background:radial-gradient(circle at 50% 28%,rgba(70,50,150,.97),rgba(10,18,60,.97) 70%);border:2px solid rgba(255,213,74,.85);box-shadow:0 0 0 6px rgba(255,213,74,.12),0 18px 60px rgba(0,0,0,.55),0 0 60px rgba(255,213,74,.25);overflow:hidden}
#reveal .rv.in{animation:rvIn .55s cubic-bezier(.3,1.6,.5,1)}
#reveal.out .rv{animation:rvOut .3s ease forwards}
#reveal .rays{position:absolute;left:50%;top:78px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,213,74,.32) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 12%,transparent 62%);mask:radial-gradient(circle,#000 12%,transparent 62%);animation:spin 16s linear infinite}
#reveal .sparks span{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffd54a 35%,transparent 70%);animation:rvTwinkle var(--d) ease-in-out infinite;animation-delay:var(--dl);pointer-events:none}
#reveal .rvicon{position:relative;width:104px;height:104px;margin:0 auto 10px;filter:drop-shadow(0 0 18px rgba(255,213,74,.85));animation:rvBob 2.2s ease-in-out infinite}
#reveal .rvicon .ico,#reveal .rvicon svg{width:100%;height:100%}
#reveal .rvmany{display:flex;gap:4px;justify-content:center;align-items:center;height:100%}
#reveal .rvmany i{display:block;width:44px;height:44px}
#reveal .rvyug{position:relative;font-size:clamp(20px,3.4vw,26px);color:#9fffe8;margin-bottom:2px}
#reveal h2{position:relative;margin:0;font-size:clamp(22px,3.8vw,30px);line-height:1.15;color:var(--gold);text-shadow:0 2px 14px rgba(0,0,0,.5)}
#reveal p{position:relative;margin:8px 0 0;font-size:15px;color:#DCD6FF;line-height:1.4}
#reveal .rvbtns{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
#reveal .rvbtns button{font-size:15px;padding:.5em 1.1em}
#reveal .rvbtns .ghost{border:2px solid rgba(201,194,245,.5);background:rgba(6,20,70,.5);color:var(--paper);border-radius:999px;font:inherit;font-weight:700;cursor:pointer}
/* a find: smaller, higher up, and it fades by itself */
#reveal.quick{place-items:start center;padding-top:22vh}
#reveal.quick .rv{width:auto;min-width:240px;max-width:min(80vw,380px);padding:14px 22px 14px;cursor:pointer}
#reveal.quick .rays{top:50px;width:260px;height:260px;margin:-130px 0 0 -130px}
#reveal.quick .rvicon{width:64px;height:64px;margin-bottom:4px}
#reveal.quick h2{font-size:18px;color:#F4F1FF}
#reveal.quick .rvyug{font-size:22px;color:var(--gold)}
@keyframes rvIn{from{opacity:0;transform:scale(.6) translateY(20px)}}
@keyframes rvOut{to{opacity:0;transform:scale(.9) translateY(-10px)}}
@keyframes rvBob{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes rvTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.2)}}
@media (max-height:500px){
  #reveal .rv{padding:14px 18px 14px}
  #reveal .rvicon{width:64px;height:64px;margin-bottom:4px}
  #reveal h2{font-size:20px}
  #reveal p{font-size:13px;margin-top:4px}
  #reveal .rvbtns{margin-top:10px}
  #reveal.quick{padding-top:14vh}
}
@media (prefers-reduced-motion:reduce){ #reveal .rays,#reveal .rvicon,#reveal .sparks span{animation:none} #reveal .sparks span{opacity:.7} }
/* short screens (a phone held sideways): cards stay compact and always fit */
@media (max-height:500px){
  .card{padding:14px 20px;max-height:calc(100dvh - 16px);overflow-y:auto}
  .card h1{font-size:24px;margin:2px 0 6px}
  .card p{font-size:14px;margin-bottom:8px;line-height:1.35}
  .newmove{font-size:26px;margin:2px 0 6px}
  .card .btns{margin-top:8px}
}
#reveal .rvicon::before{content:'';position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,246,214,.95) 0,rgba(255,226,140,.55) 45%,rgba(255,213,74,0) 72%);z-index:-1}
#reveal .rvicon{isolation:isolate}

/* ---------- Jinir: his challenge, the Forgetting he casts, and its questions ---------- */
.card.jinircard{background:linear-gradient(165deg,#2a1418 0%,#140a14 100%);border-color:rgba(255,90,40,.6);box-shadow:0 0 50px rgba(255,60,20,.25),0 20px 60px rgba(0,0,0,.6)}
.card.jinircard h1{color:#ff9a6a}
.card.jinircard .ghost{border:2px solid rgba(255,154,106,.5);background:rgba(40,10,10,.6);color:var(--paper);border-radius:999px;font:inherit;font-weight:700;padding:.5em 1.2em;cursor:pointer}
#magicFx{position:absolute;inset:0;z-index:var(--z-hud-low);pointer-events:none;opacity:0;transition:opacity 1.2s;background:radial-gradient(ellipse at center,rgba(60,0,0,0) 30%,rgba(60,6,6,.55) 70%,rgba(20,0,4,.9) 100%)}
#magicFx.on{opacity:1;animation:magicPulse 2.4s ease-in-out infinite}
@keyframes magicPulse{50%{filter:brightness(1.25)}}
#finalq{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-finalq);width:min(94vw,560px);padding:14px 16px 12px;border-radius:22px;text-align:center;
  background:linear-gradient(165deg,rgba(40,12,16,.95),rgba(14,6,20,.96));border:2px solid rgba(255,110,50,.75);box-shadow:0 0 40px rgba(255,60,20,.35),0 14px 40px rgba(0,0,0,.6);color:var(--paper)}
#finalq[hidden]{display:none}
#finalq.in{animation:rvIn .4s cubic-bezier(.3,1.6,.5,1)}
#finalq .fqtop{display:flex;flex-direction:column;align-items:center;gap:2px}
#finalq .fqw{font-size:clamp(24px,4vw,32px);color:#ffd8a0}
#finalq small{font-size:14px;color:#ffc0a0}
#finalq .fqlisten{font-size:30px;width:60px;height:60px;border-radius:50%;border:2px solid #ffb08a;background:rgba(80,20,10,.7);cursor:pointer}
#finalq .fqopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#finalq .fqopts button{display:flex;align-items:center;gap:8px;padding:.55em .8em;border-radius:14px;border:2px solid rgba(255,154,106,.6);background:rgba(60,16,16,.85);color:var(--paper);font:800 16px 'Baloo 2',sans-serif;cursor:pointer;text-align:left}
#finalq .fqopts button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
#finalq .fqopts button.right{border-color:#46e0d2;background:rgba(10,80,74,.9)}
#finalq .fqopts button.wrong{border-color:#ff8fa0;background:rgba(110,20,40,.9)}
#finalq kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#ff9a6a;color:#1a0808;font:800 12px 'Baloo 2',sans-serif}
#finalq .fqtime{height:6px;border-radius:999px;background:rgba(255,255,255,.12);margin-top:10px;overflow:hidden}
#finalq .fqtime i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3a10,#ffb040);transition:width .1s linear}
#finalq .fqres{margin-top:4px;font-weight:700}
#finalq .fqres.good{color:#9fffe8}#finalq .fqres.bad{color:#ffb0c0}
@media (max-height:500px){ #finalq{padding:8px 12px 8px;bottom:8px} #finalq .fqw{font-size:22px} #finalq .fqopts{margin-top:6px;gap:6px} #finalq .fqopts button{padding:.35em .6em;font-size:14px} }

/* ---------- skills ---------- */
.xpfloat{position:absolute;transform:translate(-50%,-50%);font:800 16px 'Baloo 2',sans-serif;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none;white-space:nowrap;animation:xpUp 1.5s ease-out forwards;z-index:var(--z-hud)}
@keyframes xpUp{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-50px}}
.card.nameit{text-align:center}
.card.nameit .niicon{width:84px;height:84px;margin:0 auto 4px;filter:drop-shadow(0 0 12px rgba(159,255,232,.5))}
.card.nameit .niicon .ico{width:100%;height:100%}
.card.nameit .niopts{display:grid;gap:8px;margin-top:10px}
.card.nameit .niopts button{display:flex;align-items:center;gap:10px;justify-content:center;font:800 20px 'Baloo 2',sans-serif}
.card.nameit .niopts button.right{border-color:#46e0d2;background:rgba(10,80,74,.9)}
.card.nameit .niopts button.wrong{border-color:#ff8fa0;background:rgba(110,20,40,.9)}
.card.nameit kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--gold);color:#06122a;font:800 12px 'Baloo 2',sans-serif}
.card.nameit .nimsg{min-height:1.5em;margin-top:10px;font-weight:700}
.sbskill{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:14px;background:rgba(6,20,70,.45);margin-bottom:8px}
.sbskill .sbico{flex:none;width:40px;height:40px}
.sbskill .skmain{flex:1;min-width:0}
.sbskill b em{font-style:normal;color:var(--gold);margin-left:6px;font-size:.9em}
.skbar{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:4px 0}
.skbar b{display:block;height:100%;border-radius:999px}
.skwords{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.skwords span{font-size:13px;padding:1px 8px;border-radius:999px;background:rgba(70,224,210,.16);color:#9fffe8;cursor:pointer}
.skwords .sknext{background:none;color:#9c93d8;cursor:default}
/* ---------- treasure trails ---------- */
.card.trailcard{background:linear-gradient(165deg,#2a2210 0%,#1a1430 100%);border-color:rgba(255,213,74,.6)}
.trailcard .trtop{display:flex;gap:12px;align-items:center;justify-content:center;text-align:left}
.trailcard .trtop .ico{width:52px;height:52px}
.trailcard .trtop small{color:#e8d8a8}
.trailcard .trtop h1{margin:0}
.trailcard .trclue{margin:12px auto;padding:14px 16px;border-radius:16px;background:rgba(255,236,190,.1);border:1px dashed rgba(255,213,74,.5);max-width:420px}
.trailcard .trclue p{margin:4px 0;font-size:clamp(22px,3.6vw,30px);font-weight:800;color:var(--gold)}
.trailcard .trclue.trgib p{font-size:clamp(28px,5vw,40px)}
.trailcard .trhow{font-size:14px;color:#DCD6FF}
.trailcard .trhint{margin:6px auto 0;max-width:420px;text-align:left;font-size:14px;color:#e8d8a8}
.trailcard .trhint summary{cursor:pointer;color:var(--aqua);font-weight:700}
/* the top bar never collides: the word bar shrinks to fit (showing as many words as there is room for) */
.hudl{flex:0 1 auto}
.hudr{min-width:0;flex:0 1 auto}
#hud .slots{min-width:0;flex:0 1 auto;overflow:hidden}
#hud .slot{flex:none}

/* fish portraits: a strip of 24 views, played like a flip-book so the fish turns gently */
.fishpic{position:relative;width:100%;height:100%;overflow:hidden}
/* the strip slides by whole frames: 24 positions, one for each frame (each step moves exactly 1/24 of the strip) */
.fishpic i{position:absolute;left:0;top:0;width:2400%;height:100%;background-size:100% 100%;background-repeat:no-repeat;animation:fishTurn 3s steps(24,jump-none) infinite alternate}
@keyframes fishTurn{from{transform:translateX(0)}to{transform:translateX(-95.8333%)}}
.card.nameit .niicon.isfish{width:220px;height:132px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
#reveal .rvicon:has(.fishpic){width:180px;height:108px}
#reveal.quick .rvicon:has(.fishpic){width:120px;height:72px}
.sbico.isfish{width:64px!important}
@media (max-height:500px){ .card.nameit .niicon.isfish{width:160px;height:96px} }
@media (prefers-reduced-motion:reduce){ .fishpic i{animation:none} }

/* new jobs: the message card, and question cards */
.card.msgcard{text-align:center}
.msgcard .mclbl{color:#DCD6FF;margin:0 0 6px}
.msgcard .mcyug{font:800 clamp(26px,4.4vw,38px) 'Baloo 2',sans-serif;color:var(--gold);margin:6px 0;text-shadow:0 0 18px rgba(255,213,74,.35)}
.msgcard .mcen{color:#9c93d8;margin:0 0 14px}
.card.nameit .nisub{color:#DCD6FF;margin:2px 0 4px}

/* the terrain map */
.mapsvg2.terrain .haze{fill:#efe2bf;opacity:.86}
.mapsvg2.terrain .trail{stroke:rgba(70,44,20,.55);stroke-width:.55;stroke-dasharray:.9 1.4}
.mapsvg2.terrain .trail.open{stroke:#5a2e10;stroke-width:.8;stroke-dasharray:2 1}
.mapsvg2.terrain .pdisc{stroke:#fff;stroke-width:.9}
.mapsvg2.terrain .plabel{fill:#2a1a0a;stroke:#f4ead0;stroke-width:1.2px}
.mapsvg2.terrain .msea{font:700 3.4px 'Baloo 2',sans-serif;letter-spacing:1.4px;fill:#2e5a7a;opacity:.7;text-anchor:middle}

/* ---------- signing in (58-account) ---------- */
#acct{position:fixed;inset:0;z-index:var(--z-account);display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse at 50% 30%,#2a2560 0%,#120f2e 70%);font-family:inherit}
#acct[hidden]{display:none}
#acct .acard{width:min(440px,100%);max-height:100%;overflow:auto;background:rgba(30,26,70,.92);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:26px 24px 22px;color:#f4f0ff;box-shadow:0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;text-align:center}
#acct .atitle{font-weight:800;letter-spacing:.02em;color:#ffd166;font-size:15px}
#acct h2{margin:0;font-size:24px;line-height:1.2}
#acct p{margin:0;opacity:.92;line-height:1.45}
#acct .anote{font-size:14px;opacity:.75}
#acct form{display:flex;flex-direction:column;gap:10px;margin:0}
#acct input{font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;text-align:center;outline:none}
#acct input:focus{border-color:#ffd166;background:rgba(255,255,255,.12)}
#acct .anames{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:46vh;overflow:auto}
#acct .anames .go{margin:0}
#acct .aadd{flex-direction:row}
#acct .aadd input{flex:1;font-size:16px}
#acct .aerr{min-height:1.2em;color:#ffb4a8;font-size:14px}
#acct .alink{color:#bfe4ff;font-size:14px}
#acct a.go{text-decoration:none;display:block}
#acct button[disabled]{opacity:.6}
.acctline{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:14px;opacity:.95}
.acctline .go.small{padding:6px 12px;font-size:13px;margin:0;text-decoration:none}

/* ---------- the classroom (59-classroom): "Eyes on your teacher", "See you at school!" ---------- */
.classwall{position:fixed;inset:0;z-index:var(--z-classwall);display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(14,12,40,.86);backdrop-filter:blur(4px)}
.classwall[hidden]{display:none}
.classwall .cwcard{width:min(460px,100%);background:rgba(30,26,70,.95);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:28px 24px;color:#f4f0ff;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.classwall .atitle{font-weight:800;color:#ffd166;font-size:15px;margin-bottom:8px}
.classwall h2{margin:0 0 8px;font-size:28px}
.classwall p{margin:0;opacity:.9;line-height:1.45}
#acct .acode{font-size:34px;font-weight:800;letter-spacing:.08em;color:#ffd166;background:rgba(255,255,255,.07);border:1px dashed rgba(255,209,102,.6);border-radius:14px;padding:12px 8px;user-select:all}

/* a support from the teacher: larger text and buttons (59-classroom) */
.gg-big #overlay .card,.gg-big #hud,.gg-big #goal,.gg-big #touch,.gg-big #bubbles,.gg-big #moves,.gg-big #acct .acard{zoom:1.2}

/* the Land button: above the wings, only in the air in Controlled Flight. (It sits in #touch, which lets taps through to
   the game: like the stick and the wings it takes its own taps back, pointer-events:auto; without that it never worked.) */
#landbtn{position:absolute;right:calc(36px + env(safe-area-inset-right,0px));bottom:calc(136px + env(safe-area-inset-bottom,0px));width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(30,26,70,.72);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 11px/1 'Baloo 2',system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
#landbtn[hidden]{display:none}
#landbtn svg{width:22px;height:22px;margin-bottom:1px}
/* (touch: beside the wings, level with them; the moves stand above the wings. Only a phone held sideways has room
   above its smaller wings. Before, the sideways place applied upright too, and put Land under the wings: a tap on
   Land was a tap on Fly.) */
.touchmode #landbtn{right:calc(126px + env(safe-area-inset-right,0px));bottom:calc(44px + env(safe-area-inset-bottom,0px))}
@media (orientation: landscape) and (max-height: 500px) {
  .touchmode #landbtn{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(90px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
}
.talking .touchmode #landbtn,.touchmode.talking #landbtn{opacity:0;pointer-events:none}

/* ---------- the first night's tutorial (60-tutorial) ---------- */
#tutcard,#tipcard{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:var(--z-tutorial);width:min(560px,calc(100% - 24px));pointer-events:none}
#tutcard[hidden],#tipcard[hidden]{display:none}
#tutcard .tcard,#tipcard .tcard{pointer-events:auto;position:relative;background:rgba(30,26,70,.93);border:2px solid rgba(255,211,77,.75);border-radius:22px;padding:16px 20px 16px 64px;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.4);display:flex;flex-wrap:wrap;align-items:center;gap:10px;animation:tutin .35s ease-out}
#tutcard .tcard.praise{border-color:#7ad8a0;background:rgba(26,70,52,.93)}
#tutcard p,#tipcard p{margin:0;flex:1 1 100%;font-size:clamp(19px,2.6vw,25px);font-weight:700;line-height:1.3}
#tutcard .treplay,#tipcard .treplay{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#ffd166;cursor:pointer}
#tutcard .treplay svg,#tipcard .treplay svg{width:24px;height:24px}
#tutcard .go,#tipcard .go{margin:0}
#tutcard .tskip{font-size:14px}
@keyframes tutin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.tutglow{animation:tutglow 1.1s ease-in-out infinite !important;position:relative;z-index:var(--z-tutglow)}
@keyframes tutglow{0%,100%{box-shadow:0 0 0 0 rgba(255,211,77,.9),0 0 18px 4px rgba(255,211,77,.55)}50%{box-shadow:0 0 0 10px rgba(255,211,77,0),0 0 30px 10px rgba(255,211,77,.8)}}
#tutcard p.yug{color:var(--aqua);font-size:clamp(24px,3.2vw,32px);font-weight:800}

/* ---------- the journey between places (62-journey): only transforms and opacity move, so it stays smooth while a place is built ---------- */
#journey{position:fixed;inset:0;z-index:var(--z-journey);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s;pointer-events:none;color:#fff;font-family:'Baloo 2',system-ui,sans-serif}
#journey.on{opacity:1;visibility:visible;transition:opacity .5s ease;pointer-events:auto}
#journey:not(.on) *{animation-play-state:paused}   /* (hidden: its stars, hills and dots stop) */
#journey .jsky{position:absolute;inset:0;background:linear-gradient(180deg,var(--top) 0%,var(--bot) 78%)}
#journey .jstars{position:absolute;inset:0}
#journey .jstars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);animation:jtw 3s ease-in-out infinite}
@keyframes jtw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
#journey .jmoon{position:absolute;right:9%;top:24%;width:min(9vw,78px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fffbe9,#e9e3c6 60%,#cfc6a2);box-shadow:0 0 40px 12px rgba(255,250,220,.35),0 0 120px 40px rgba(200,210,255,.15)}
#journey .jglow{position:absolute;left:-10%;right:-10%;bottom:18%;height:55%;background:radial-gradient(ellipse at 50% 100%,rgba(255,170,90,.75),rgba(255,120,120,.25) 45%,transparent 70%)}
#journey .jsun{position:absolute;right:12%;width:min(10vw,84px);aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 34px 16px color-mix(in srgb,var(--sun) 80%,transparent),0 0 110px 50px color-mix(in srgb,var(--sun) 45%,transparent),0 0 260px 120px color-mix(in srgb,var(--sun) 20%,transparent)}
#journey .jland.sea .jl-near{height:46%}
#journey .jland{position:absolute;left:0;right:0;bottom:0;height:52%}
#journey .jl{position:absolute;left:0;bottom:0;width:200%;height:100%;will-change:transform;animation:jdrift linear infinite}
#journey .jl-far{height:78%;bottom:16%;animation-duration:70s;opacity:.95}
#journey .jl-mid{height:72%;bottom:4%;animation-duration:34s}
#journey .jl-near{height:58%;animation-duration:15s}
#journey .jl-svg{width:100%;height:100%;display:block}
@keyframes jdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#journey .jwater{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,color-mix(in srgb,var(--bot) 70%,#3a7aa8),color-mix(in srgb,var(--bot) 25%,#123a5a));overflow:hidden}
#journey .jland.sea .jwater{height:58%;background:linear-gradient(180deg,color-mix(in srgb,var(--bot) 45%,#2a9db0),color-mix(in srgb,var(--bot) 15%,#0f5c78))}
#journey .jland.lake .jl-near{height:30%}
#journey .jwater i{position:absolute;height:2px;border-radius:2px;background:rgba(255,255,255,.55);will-change:transform,opacity;animation:jglint 4s ease-in-out infinite}
@keyframes jglint{0%,100%{opacity:0;transform:translateX(0) scaleX(.6)}50%{opacity:.9;transform:translateX(-30px) scaleX(1)}}
#journey .jflight{position:absolute;left:0;right:0;top:40%;height:20%}
#journey .jpath{position:absolute;left:5%;right:5%;top:45%;height:20px}
#journey .jpath i{position:absolute;top:50%;left:calc(var(--i) * 7.1%);width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#ffd34d;box-shadow:0 0 10px 3px rgba(255,211,77,.7);opacity:.15;animation:jdot 1.6s linear infinite;animation-delay:calc(var(--i) * .1s)}
@keyframes jdot{0%,100%{opacity:.12;transform:scale(.6)}25%{opacity:1;transform:scale(1.15)}55%{opacity:.3;transform:scale(.8)}}
#journey .jfetch{position:absolute;left:50%;top:calc(45% + 34px);transform:translateX(-50%);width:min(320px,70vw);text-align:center;font-size:14px;font-weight:700;color:#c9c2f5;text-shadow:0 1px 6px rgba(0,0,0,.7)}
#journey .jfetch[hidden]{display:none}
#journey .jftrack{display:block;height:6px;margin-bottom:6px;border-radius:999px;background:rgba(4,8,30,.6);border:1px solid rgba(70,224,210,.5);overflow:hidden}
#journey .jftrack i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#46e0d2,#bfffe8 50%,#ffd54a);transform-origin:left;transform:scaleX(.02);transition:transform .25s ease}
#journey .jfetch.unknown .jftrack i{opacity:.5}
#journey .jtext{position:absolute;left:0;right:0;top:9%;text-align:center;padding:0 20px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
#journey .jverb{font-size:clamp(14px,1.9vw,18px);letter-spacing:.24em;text-transform:uppercase;color:#ffd166;font-weight:700;animation:jrise .7s ease-out both}
#journey h2{margin:.15em 0 .1em;font-size:clamp(34px,6vw,64px);line-height:1.05;font-weight:800;animation:jrise .7s .08s ease-out both}
#journey .jsub{margin:0;font-size:clamp(16px,2.2vw,22px);opacity:.92;animation:jrise .7s .16s ease-out both}
@keyframes jrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#journey .jword{position:absolute;right:max(4%,16px);bottom:7%;width:min(330px,calc(100% - 32px));padding:14px 18px 16px;border-radius:20px;background:rgba(18,14,44,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid rgba(255,211,77,.55);box-shadow:0 14px 40px rgba(0,0,0,.4);text-align:center;animation:jrise .7s .35s ease-out both}
#journey .jwlbl{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#ffd166;font-weight:700}
#journey .jwy{display:inline-flex;align-items:center;gap:10px;margin:4px 0 0;padding:2px 10px;border:none;background:none;color:var(--aqua);font:800 clamp(30px,4.4vw,42px)/1.2 'Baloo 2',system-ui,sans-serif;cursor:pointer}
#journey .jwy svg{width:26px;height:26px;color:#ffd166;flex:none}
#journey .jwg{font-size:clamp(26px,3.6vw,34px);color:#ffd166;line-height:1.3;text-shadow:0 0 12px rgba(255,211,77,.45)}
#journey .jwe{font-size:18px;opacity:.9;margin-top:2px}
#journey.inside .jfire{position:absolute;left:-20%;right:-20%;bottom:-30%;height:90%;background:radial-gradient(ellipse at 50% 70%,rgba(255,160,60,.55),rgba(200,90,30,.25) 40%,transparent 70%);animation:jfire 3.2s ease-in-out infinite alternate}
@keyframes jfire{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
#journey .jmotes i{position:absolute;bottom:-4%;width:6px;height:6px;border-radius:50%;background:#ffcf6a;box-shadow:0 0 10px 3px rgba(255,190,90,.6);animation:jmote 9s linear infinite}
@keyframes jmote{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}100%{transform:translateY(-105vh) translateX(30px);opacity:0}}
@media (max-width:640px){#journey .jword{left:50%;right:auto;transform:translateX(-50%);bottom:5%;animation:none}#journey .jflight{top:36%}}
@media (prefers-reduced-motion:reduce){#journey .jl,#journey .jwater i,#journey .jmotes i,#journey .jfire{animation:none}}

/* ---------- Say it (64-speak): the microphone, and hearing yourself ---------- */
.micwrap{display:inline-flex;align-items:center;gap:6px;margin-left:6px;vertical-align:middle}
.mic{--lvl:0;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#2a3a6a;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .2s}
.mic svg{width:22px;height:22px}
.mic.rec{background:#d8443a;border-color:#ffb0a8;box-shadow:0 0 0 calc(4px + var(--lvl) * 14px) rgba(216,68,58,.35);animation:micpulse 1s ease-in-out infinite}
@keyframes micpulse{50%{transform:scale(1.06)}}
.me{border:none;border-radius:999px;padding:7px 12px;background:#7ad8a0;color:#123a24;font:800 14px/1 'Baloo 2',system-ui,sans-serif;cursor:pointer}
.me[hidden]{display:none}
.micnote{margin:10px 0 0;font-size:14px;opacity:.85}
.teach .tw .micwrap{margin:6px 0 0}
/* ---------- Make a sentence (65-sentences) ---------- */
.sentence .sbask{font-size:clamp(22px,3vw,30px);font-weight:800;margin:6px 0 14px;text-align:center}
.sbrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:76px;padding:10px;border-radius:18px;background:rgba(255,255,255,.06)}
.sbrow.wrong{animation:sbshake .45s ease-in-out}
.sbrow.right .sbslot{border-color:#7ad8a0;background:rgba(122,216,160,.25);box-shadow:0 0 18px rgba(122,216,160,.5)}
@keyframes sbshake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.sbslot{min-width:96px;min-height:64px;padding:8px 12px;border-radius:14px;border:2px dashed rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sbslot.full{border-style:solid;border-color:#ffd166;background:rgba(255,209,102,.15)}
.sbpool{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.sbtile{min-width:96px;min-height:64px;padding:8px 12px;border-radius:14px;border:2px solid rgba(255,255,255,.3);background:#2a3a6a;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sbtile b,.sbslot b{font-size:22px;color:var(--aqua);font-weight:800}
.sbtile small,.sbslot small{font-size:12px;opacity:.8}
.sbtile.gone{visibility:hidden;border-color:transparent;background:none}
.sbtile.hint{border-color:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.4);animation:micpulse 1s ease-in-out infinite}
.sbhelp{text-align:center;opacity:.8;margin:8px 0}
.sbsaid{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px;font-size:24px;font-weight:800;color:var(--aqua)}

/* ---------- Gibamyeri practice (66-gibtree) ---------- */
.gibpractice .gbig{margin:8px auto 14px}
.gpword{font-size:clamp(58px,9vw,90px);color:#ffd166;text-align:center;line-height:1.35;margin:8px 0 14px;text-shadow:0 0 18px rgba(255,209,102,.45)}
.gibpractice .opt small{opacity:.75;margin-left:6px;color:var(--paper)}
.gibpractice .sbtile .gib,.gibpractice .sbslot .gib{font-size:44px;color:#ffd166;line-height:1.2}
.gibpractice .gprow{min-height:92px}
.gibpractice .sbtile,.gibpractice .sbslot{min-width:84px;min-height:80px}
#tutcard.low,#tipcard.low{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px))}

/* ---------- Part II (68-part2) ---------- */
#p2flash{position:fixed;inset:0;background:#fffbe8;pointer-events:none;z-index:var(--z-alert);opacity:0;transition:opacity .6s ease}
#p2flash.on{opacity:1;transition:opacity .55s ease-in}
#p2flash.off{opacity:0;transition:opacity 1.3s ease-out}
.p2card .p2who{font-weight:800;color:#ffd166;letter-spacing:.04em;text-transform:uppercase;font-size:14px;margin-bottom:6px}
.p2card .p2said{font-size:clamp(22px,3.2vw,30px);line-height:1.35;margin:4px 0 14px}
.p2card .p2narr{font-size:18px;line-height:1.5;font-style:italic;opacity:.92}
.p2card .p2title{font-size:clamp(52px,9vw,96px);letter-spacing:.06em;margin:8px 0 6px;text-shadow:0 4px 24px rgba(255,209,102,.35)}
body.p2 #moves{display:none}
#overlay.p2low{background:linear-gradient(to top,rgba(2,8,24,.6),rgba(2,8,24,0) 45%)}
#overlay.p2low .card{margin:auto auto 2vh;padding:16px 24px 18px}
@media (prefers-reduced-motion: reduce){#p2flash,#p2flash.on,#p2flash.off{transition:opacity .2s}}

/* ---------- the title screen: the title card's picture, the menu in the space on its right ---------- */
#overlay.art{padding:0;align-items:center;justify-content:flex-end;
  background:url(./title-gully-BeryWHE6.jpg) left center/auto 100% no-repeat,linear-gradient(90deg,#4b4f57,#2b2a3c)}
/* (a screen wider than the picture, such as a phone held sideways: a wider copy, the picture itself whole and unchanged
   with a soft mirrored strip of its forest beyond its right edge, so no bare strip shows under the menu; nothing is cut
   off, as the title and the Gibamyeri are part of the picture. The loading screen matches.) */
@media (orientation:landscape) and (min-aspect-ratio:1921/1080){ #overlay.art{background-image:url(./title-gully-wide--w-F2TqK.jpg),linear-gradient(90deg,#4b4f57,#2b2a3c)} }
.card.mainmenu.art{position:relative;z-index:1;width:clamp(270px,26vw,400px);max-height:calc(100dvh - 24px);margin:0 clamp(16px,4vw,72px) 0 auto;
  padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;overflow:visible;text-align:center;background:none;border:0;box-shadow:none}
/* the menu itself: frosted glass; under it, Goomp Goomp Books' emblem, from the title card */
.card.art .mmpanel{align-self:stretch;min-height:0;padding:22px 20px 16px;display:flex;flex-direction:column;align-items:stretch;gap:10px;overflow:auto;
  background:rgba(24,14,62,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,188,247,.45);border-radius:24px;box-shadow:0 0 40px rgba(150,110,255,.35),0 18px 50px rgba(0,0,0,.4)}
.card.mainmenu.art{animation:none}.card.art .mmpanel{animation:cardin .6s cubic-bezier(.3,1.4,.5,1)}   /* (the card itself never moves: the player chip is fixed to the screen's corner) */
.card.art .mmlist .go:last-child:nth-child(odd){grid-column:1/-1}   /* (in two columns, an odd one out spans both) */
.card.art .mmwarn{margin:0;font-size:15px;line-height:1.45;color:#FFE3E3;text-align:center}
.card.art .mmwarn b{color:#fff}
.card.art .mmdiff{margin:4px 0 2px;justify-content:center;gap:12px;border:0;flex-wrap:wrap}
.card.art .mmclass{border:1px solid rgba(255,213,74,.45);background:rgba(255,213,74,.1);border-radius:14px;padding:6px 10px;font-size:13px;color:#FFF3C8}
.card.art .mmclass .acctline{margin:2px 0;font-size:13px}
/* the player chip: top corner; opened, the account buttons */
.mmchip{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;text-align:right}
.mmchip summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:999px;cursor:pointer;color:#fff;font-weight:800;font-size:15px;
  background:rgba(24,14,62,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(201,188,247,.5)}
.mmchip summary::-webkit-details-marker{display:none}
.mmchip summary::after{content:'';width:7px;height:7px;border:solid #D6CCFF;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.mmchip[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.mmav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#b998ff,#7442ea);font-size:16px}
.mmname{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmname small{display:block;font-size:11px;font-weight:600;color:#cfc6f5;line-height:1.1}   /* (a free trial's days left; the Founders' word has its own) */
.mmchipm{margin-top:8px;padding:12px;min-width:220px;display:flex;flex-direction:column;gap:7px;text-align:center;border-radius:16px;
  background:rgba(24,14,62,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(201,188,247,.45);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.mmchipm p{margin:0 0 2px;font-size:14px;color:#E6E1FF}
.mmchipm .go{margin:0;width:100%;font-size:14px;padding:.35em .8em;text-decoration:none;color:#fff;box-sizing:border-box}
.card.art .mmbooks{flex:none;width:min(96%,440px);aspect-ratio:440/144;margin-top:-18px;background:url(./books-badge-URpYmSCy.png) center/contain no-repeat;pointer-events:none}
.card.mainmenu.art.mmwide{width:clamp(300px,36vw,560px)}
.card.art .go:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:3px}
.mmvh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card.art .mmplay{margin:0;font-size:clamp(30px,3.4vw,46px);padding:.3em .5em .24em;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#b998ff,#7442ea);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 5px 0 #4b25a8,0 0 30px rgba(170,120,255,.75);
  animation:mmglow 2.8s ease-in-out infinite}
.card.art .mmplay:active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 0 #4b25a8,0 0 30px rgba(170,120,255,.75)}
@keyframes mmglow{50%{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 5px 0 #4b25a8,0 0 48px rgba(200,165,255,1)}}
.card.art .mmnote{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 12px;font-size:14px;color:#E6E1FF;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.card.art .mmnote b{color:var(--gold)}
.card.art .mmupdate{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(255,209,102,.14);border:1px solid rgba(255,209,102,.55);text-align:center}
.card.art .mmupdate b{color:var(--gold);font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.card.art .mmupdate .go{margin:0;padding:.3em 1.1em;font-size:15px}
.card.art .mmlist{display:flex;flex-direction:column;gap:8px}
.card.art .mmlist .go,.card.art .mmback{margin:0;width:100%;font-size:17px;padding:.4em .6em;background:rgba(255,255,255,.07);color:#fff;border:2px solid rgba(255,255,255,.3);box-shadow:none}
.card.art .mmlist .go:hover{background:rgba(185,152,255,.25);border-color:rgba(214,196,255,.7)}
.card.art .mmh{margin:0;font-size:24px;color:#fff}
.card.art .pzpane{max-height:none;overflow:visible;text-align:left}   /* (the panel scrolls instead) */
.card.art .acctline{font-size:13px}
.card.art .reset{margin:0;color:#D6CCFF}
/* a phone held sideways: smaller, the options in two columns */
@media (max-height:520px) and (orientation:landscape){
  .card.mainmenu.art.mmwide{width:clamp(300px,50vw,520px)}
  .card.mainmenu.art{width:clamp(250px,34vw,380px);margin-right:clamp(12px,3vw,40px);gap:0}
  .card.art .mmpanel{padding:12px 12px 8px;gap:6px}
  .card.art .mmbooks{width:min(80%,275px);margin-top:-14px}
  .card.art .mmplay{font-size:26px}
  .card.art .mmnote{font-size:12px}
  .card.art .mmlist{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .card.art .mmlist .go,.card.art .mmback{font-size:13px;padding:.32em .4em}

}
/* upright: the tall title card (assets/title), the menu in the open space among the trees, under the title; the card has the
   emblem at its foot already */
@media (orientation:portrait){
  #overlay.art{align-items:flex-start;justify-content:center;background:url(./title-gully-portrait-DarH-bMP.jpg) center top/auto 100% no-repeat,#211d33}   /* (the whole card, its height the screen's: a tall phone loses a little of each side, a tablet has a band each side) */
  .card.mainmenu.art,.card.mainmenu.art.mmwide{width:min(calc(100% - 32px),400px);max-height:none;margin:25dvh auto 16px}   /* (just under the subtitle, which ends at 23.5% of the card) */
  .card.art .mmbooks{display:none}
  .card.art .mmpanel{padding:10px 10px 8px;gap:6px;background:rgba(24,14,62,.42)}
  .card.art .mmplay{font-size:26px}
  .card.art .mmnote{font-size:12px}
  .card.art .mmlist{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .card.art .mmlist .go{font-size:13.5px;padding:.3em .4em}
  .card.art .mmpanel > .reset{display:none}   /* (the promo maker: a computer's) */
  .card.art .pzpane{max-height:none}
}

/* ---------- signing in, making an account, paying: purple and blue glass over the title card ---------- */
/* (where the main menu sits: on the right of the wide card, under the title on the tall one) */
#acct{justify-content:flex-end;padding-right:clamp(16px,4vw,72px);background:linear-gradient(90deg,rgba(14,10,40,.1) 40%,rgba(14,10,40,.5)),url(./title-gully-BeryWHE6.jpg) left center/cover no-repeat,#1d1a2e}
/* (wider than the picture: its wider copy at the screen's height, as the title screen, so the title and the Gibamyeri are never cut) */
@media (orientation:landscape) and (min-aspect-ratio:1921/1080){ #acct{background:linear-gradient(90deg,rgba(14,10,40,.1) 40%,rgba(14,10,40,.5)),url(./title-gully-wide--w-F2TqK.jpg) left center/auto 100% no-repeat,#1d1a2e} }
#acct .acard{width:clamp(320px,30vw,440px)}
@media (orientation:portrait){
  #acct{justify-content:center;align-items:flex-start;padding:24dvh 16px 16px;background:linear-gradient(rgba(14,10,40,.1),rgba(14,10,40,.45)),url(./title-gully-portrait-DarH-bMP.jpg) center top/auto 100% no-repeat,#211d33}
  #acct .acard{width:min(440px,100%)}
}
#acct .acard{background:linear-gradient(160deg,rgba(74,52,170,.55),rgba(32,58,150,.45));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(201,188,247,.5);box-shadow:0 0 44px rgba(150,110,255,.4),0 20px 60px rgba(0,0,0,.45);animation:cardin .5s cubic-bezier(.3,1.4,.5,1)}
#acct .atitle{color:#E6DCFF;letter-spacing:.06em}
#acct .go{margin:0}
#acct .go.big{color:#fff;background:linear-gradient(180deg,#b998ff,#7442ea);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 4px 0 #4b25a8,0 0 24px rgba(170,120,255,.6)}
#acct .go.secondary{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);color:#fff}
#acct .go small{display:block;font-size:13px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.82);margin-top:2px}   /* (a button's hint, under its label) */
#acct .agrown{margin:6px 0 0;font-size:14px;color:rgba(244,240,255,.8);text-align:center}
#acct .agrown .alink{background:none;border:0;padding:2px 4px;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
#acct input{background:rgba(10,8,40,.35);border-color:rgba(201,188,247,.35)}
#acct input:focus{border-color:#b998ff;background:rgba(10,8,40,.5);box-shadow:0 0 0 3px rgba(185,152,255,.3)}
#acct .aerr{color:#ffd0c8}
#acct .alink,#acct .acheck a{color:#cfe6ff}
#acct .aq{font-size:30px;font-weight:800;color:#fff;margin:4px 0}
#acct .acheck{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:14px;line-height:1.4;color:#E6E1FF}
#acct .acheck input{width:20px;height:20px;flex:none;margin:1px 0 0;padding:0;accent-color:#9a6cf2}
#acct .aevery{display:inline-flex;align-self:center;padding:3px;border-radius:999px;background:rgba(10,8,40,.4);border:1px solid rgba(201,188,247,.3)}
#acct .aevery button{font:inherit;font-weight:800;font-size:14px;border:0;border-radius:999px;padding:.35em 1.1em;background:none;color:#D6CCFF;cursor:pointer}
#acct .aevery button.on{background:#7a4cf0;color:#fff}
#acct .aplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
#acct .aplan{font:inherit;display:flex;flex-direction:column;gap:4px;align-items:center;padding:14px 10px;border-radius:16px;cursor:pointer;color:#fff;
  background:rgba(10,8,40,.35);border:2px solid rgba(201,188,247,.3);transition:border-color .15s,box-shadow .15s}
#acct .aplan b{font-size:20px}
#acct .aplan .aprice{font-size:24px;font-weight:800;color:#FFE6A8}
#acct .aplan .aprice small{font-size:13px;font-weight:600;color:#E6E1FF}
#acct .aplan.on{border-color:#b998ff;box-shadow:0 0 0 3px rgba(185,152,255,.35),0 0 24px rgba(170,120,255,.45)}
#acct .apay{min-height:120px;padding:4px 2px;text-align:left}

/* ---------- the birds' daily games (74-daily) ---------- */
.card.daily{width:min(100%,600px)}
.daily .dbird{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;background:linear-gradient(135deg,var(--b0) 50%,var(--b1) 50%);border:3px solid var(--paper);box-shadow:0 0 18px rgba(255,213,74,.4)}
.daily .dbird.sm{width:28px;height:28px;margin:0;border-width:2px;flex:none}
.daily .dby{margin:-4px 0 8px;color:var(--gold);font-weight:700}
.daily .dnote{color:#ffe08a;font-weight:700;font-size:15px}
.daily .dhead{display:flex;align-items:center;gap:10px;margin:-6px 0 6px;font-size:17px}
.daily .dhead b{flex:1;text-align:left}.daily .dhead span{color:#C9C2F5;font-weight:700}
.daily .dx{border:0;background:rgba(255,255,255,.1);color:var(--paper);width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}
.daily .dask{margin:4px 0 10px;font-size:17px}
.daily .dy{color:#ffe08a}
.daily .dfeed{min-height:1.6em;margin-top:10px;color:#E6E1FF}
.daily .dhear{border:2px solid rgba(70,224,210,.6);background:rgba(6,20,70,.6);color:var(--paper);border-radius:999px;padding:.35em 1.1em;font:inherit;font-weight:700;cursor:pointer;margin-bottom:10px}
.daily .dhear.sm{padding:.1em .6em;margin:0 0 0 6px;font-size:13px}
.daily .dopts,.daily .dtiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.daily .dopt,.daily .dtile,.daily .dbin,.daily .dcell{border:2px solid rgba(122,94,224,.6);background:rgba(6,20,70,.6);color:var(--paper);border-radius:16px;padding:12px 10px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:transform .12s,border-color .2s,background .2s}
.daily .dtile small,.daily .dcell small,.daily .dcard1 small{display:block;font-size:12px;font-weight:500;opacity:.8}
.daily .right{border-color:#46E0D2 !important;background:rgba(70,224,210,.25) !important}
.daily .wrong{border-color:#ff8a9a !important;background:rgba(255,90,120,.2) !important;animation:dshake .3s}
@keyframes dshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.daily .dseq{display:flex;gap:8px;justify-content:center;margin-bottom:8px}.daily .dseq i{width:14px;height:14px;border-radius:50%;border:2px solid #C9C2F5}.daily .dseq i.on{background:#46E0D2;border-color:#46E0D2}
.daily .dgrid{display:grid;gap:9px}.daily .dgrid.c2{grid-template-columns:repeat(2,1fr)}.daily .dgrid.c3{grid-template-columns:repeat(3,1fr)}.daily .dgrid.c4{grid-template-columns:repeat(4,1fr)}.daily .dgrid.c5{grid-template-columns:repeat(5,1fr)}
.daily .dcell{min-height:74px;display:grid;place-items:center;font-size:16px;padding:8px 6px}
.daily .dcell.hid{background:linear-gradient(135deg,#4f7a3a,#2f5226);border-color:#6a9a4a}.daily .dcell.hid span{visibility:hidden}
.daily .dcard1{margin:6px auto 14px;width:min(100%,280px);padding:16px;border-radius:18px;background:rgba(255,213,74,.12);border:2px solid var(--gold);font-size:26px;font-weight:800;cursor:pointer}
.daily .dbins{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.daily .dbin{flex:1;min-width:130px;font-size:16px}
.daily .dtarget{font-size:18px;margin:4px 0 12px}.daily .dtarget b{color:#ffe08a}
.daily .dflash{display:block;width:min(100%,320px);height:130px;margin:0 auto;border-radius:24px;border:3px solid rgba(255,213,74,.6);background:rgba(6,20,70,.6);color:#fff;font:inherit;font-size:34px;font-weight:800;cursor:pointer;transition:transform .12s}
.daily .dflash.pop{transform:scale(1.06)}
@media (max-width:520px){ .daily .dopts,.daily .dtiles{grid-template-columns:1fr} .daily .dgrid.c4,.daily .dgrid.c5{grid-template-columns:repeat(3,1fr)} }

/* ---------- the birds' games in 3D (75-birdgames): Fly Home's look, its own layer ---------- */
#bgUI{position:absolute;inset:0;z-index:var(--z-activity);pointer-events:none}
#bgUI[hidden]{display:none}
#bgUI button{pointer-events:auto}
.inbirdgame #hud,.inbirdgame #goal,.inbirdgame #prompt,.inbirdgame #moves,.inbirdgame #energy,.inbirdgame #minimap,.inbirdgame #touch,.inbirdgame #tags,.inbirdgame #bubbles,.inbirdgame #landbtn{opacity:0 !important;pointer-events:none !important}
.bgscore{min-width:54px;text-align:right;color:#ffe08a;font-weight:800;font-size:15px}
.bghear{margin-left:6px;border:2px solid rgba(70,224,210,.6);background:rgba(6,20,70,.6);color:var(--paper);border-radius:999px;width:34px;height:30px;font:inherit;cursor:pointer;vertical-align:middle}
.fhlab.show .pill{background:rgba(70,40,10,.9);border-color:#ffd54a}.fhlab.show small{font-weight:500;opacity:.85;font-size:.8em}
.fhlab.post .pill{min-width:44px;justify-content:center;padding:.2em .7em}
.fhlab.fish .pill{padding:.15em .75em;font-size:clamp(14px,2.1vw,18px)}
.fhlab.fish .c::after{content:'';display:block;width:2px;height:22px;margin:0 auto;background:linear-gradient(rgba(122,94,224,.9),rgba(122,94,224,0))}
.fhsay .bgtime{font-style:normal;color:#9fffe8;font-weight:800;margin-right:4px}
/* the tester's menu (76-tester.js) */
.card.tester .tbirds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 38vh; overflow: auto; margin: 6px 0 }
.card.tester .tbirds .go { flex: 0 0 auto; padding: 6px 12px; font-size: .9em; margin: 0 }
.card.tester .t3d b { color: #ffd76a; font-size: .75em; margin-left: 4px }
.card.tester .tnote { color: #b9f3b0 }
.card.tester #tCode { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.25); color: #fff; width: min(260px, 80%) }

/* first-time tips (77-tips): the tutorial's card (above), a glow that leaves the thing where it is, and a line inside a card */
#tipcard{z-index:var(--z-tip)}
#tipcard p{flex:1 1 auto}
.tipglow{animation:tutglow 1.1s ease-in-out infinite !important;border-radius:999px}
.tiphint{display:flex;align-items:center;gap:10px;margin:4px auto 10px;max-width:520px;padding:8px 14px 8px 8px;border-radius:16px;background:rgba(255,211,77,.12);border:1.5px solid rgba(255,211,77,.6);color:#fff;font-weight:700;font-size:clamp(15px,2.1vw,19px);line-height:1.3;text-align:left;animation:tutin .35s ease-out}
.tiphint .treplay{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#ffd166;cursor:pointer;display:grid;place-items:center}
.tiphint .treplay svg{width:22px;height:22px}
#tipcard.low{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* a short screen (a phone on its side): a slimmer card, "Got it" beside the words */
@media (max-height:520px){
  #tipcard{top:calc(58px + env(safe-area-inset-top,0px));width:min(620px,calc(100% - 200px))}
  #tipcard.low{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  #tipcard .tcard{flex-wrap:nowrap;padding:8px 12px 8px 54px;border-radius:18px}
  #tipcard .treplay{left:8px;width:38px;height:38px}
  #tipcard p{font-size:16px;line-height:1.25}
  #tipcard .go{padding:6px 16px;font-size:16px;flex:none}
}
/* the account's border on the title screen (78-borders): the picture moves in, the branch lies round it */
#overlay.art.bordered{padding:var(--bi,0px);background-origin:content-box;background-clip:content-box;background-color:#120c06}
#acctBorder{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;overflow:hidden}
#overlay:not(.art) #acctBorder{display:none}
#acctBorder.on{opacity:1}
#acctBorder .bstill,#acctBorder .bmove{position:absolute;inset:0}
#acctBorder .bstill{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}   /* (only the still pieces: nothing moving under the shadow, so it is drawn once) */
#acctBorder img,#acctBorder .bshine,#acctBorder .bmv{position:absolute;display:block}
#acctBorder .bmv img,#acctBorder .bflut{position:absolute;inset:0;width:100%;height:100%}
#acctBorder .bribbon{position:absolute;left:50%;top:0;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
#overlay.bordered .mmchip{top:calc(env(safe-area-inset-top,0px) + var(--bi) + 6px);right:calc(env(safe-area-inset-right,0px) + var(--bi) + 8px)}   /* (fixed to the screen: past the phone's camera strip too, as the page is) */
/* the Founders' gold shimmer: a gleam that sweeps across the screen, seen only on the gilt (each piece's shine mask) */
#acctBorder .bshine{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,250,225,0) 44%,rgba(255,250,225,.95) 50%,rgba(255,250,225,0) 56%) no-repeat;background-size:calc(var(--W) * 3) var(--H);
  animation:bshine 7s ease-in-out infinite}
@keyframes bshine{0%{background-position:calc(-2 * var(--W) - var(--L)) calc(-1 * var(--T))}55%,100%{background-position:calc(-1 * var(--L)) calc(-1 * var(--T))}}
/* the fig's silver flecks: three groups, a third of a cycle apart */
#acctBorder .bspark{mix-blend-mode:screen;opacity:0;animation:bspark 6s linear infinite}
@keyframes bspark{0%{opacity:0}25%{opacity:.13}37.5%{opacity:.62}50%{opacity:1}62.5%{opacity:.62}75%{opacity:.13}100%{opacity:0}}
/* the gum leaf stirs; the banksia glows; the fig's bird looks round (snapped, as birds do) */
#acctBorder .bleaf{animation:bleaf 6s ease-in-out infinite}
#acctBorder .bflut{animation:bflut 2.3s ease-in-out infinite}
@keyframes bleaf{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes bflut{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
#acctBorder .bglow{mix-blend-mode:screen;animation:bglow 7s ease-in-out infinite}
@keyframes bglow{0%,100%{opacity:0}50%{opacity:.55}}
#acctBorder .bh{opacity:0;animation:10s step-end infinite}
#acctBorder .bh-head0{animation-name:bh0}#acctBorder .bh-head35{animation-name:bh35}#acctBorder .bh-head70{animation-name:bh70}#acctBorder .bh-headm30{animation-name:bhm30}
@keyframes bh0{0%{opacity:1}35%{opacity:0}58%{opacity:1}80%{opacity:0}89%{opacity:1}100%{opacity:1}}
@keyframes bh35{0%{opacity:0}35%{opacity:1}37.5%{opacity:0}56%{opacity:1}58%{opacity:0}100%{opacity:0}}
@keyframes bh70{0%{opacity:0}37.5%{opacity:1}56%{opacity:0}100%{opacity:0}}
@keyframes bhm30{0%{opacity:0}80%{opacity:1}89%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  #acctBorder .bshine,#acctBorder .bspark,#acctBorder .bglow{display:none}
  #acctBorder .bleaf,#acctBorder .bflut,#acctBorder .bh{animation:none}
  #acctBorder .bh-head0{opacity:1}
}
/* the Founders' chip: gold, with "Founder" under the name */
.mmchip summary.founder{background:linear-gradient(180deg,rgba(40,24,70,.9),rgba(20,10,40,.9));border:1.5px solid #f2d68a;box-shadow:0 0 0 3px rgba(20,10,40,.6),0 0 0 4.5px #b88a2e,0 0 22px rgba(255,210,120,.45);color:#fff3d6}
.mmchip summary.founder .mmav{background:radial-gradient(circle at 35% 30%,#fff6c8,#f0c860 45%,#a8761c 100%);color:#3a250c}
.mmchip summary.founder .mmname small{display:block;font-size:10px;letter-spacing:.18em;color:#f2d68a;text-transform:uppercase;line-height:1;margin-top:-2px}
.card.tester .tbirds .go.on{border-color:var(--gold);color:var(--gold)}
/* (a screen near the title card's own shape: the picture, moved in, still fills its space) */
@media (orientation:landscape) and (max-aspect-ratio:19/10){ #overlay.art.bordered{background-size:cover,auto} }
#acctBorder::before{content:'';position:absolute;inset:0;border:var(--bi,0px) solid #120c06}   /* (the strip round the picture: dark, under the branch, so nothing behind shows through) */
/* the title screen's language: the line above Play, and Switch language (content/languages.js) */
.card.art .mmlang{margin:0;font-size:15px;color:#E6E1FF;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.card.art .mmlang b{color:var(--gold)}
.card.art .mmlink{background:none;border:0;padding:0 2px;color:#BFE9FF;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.card.art .mmlangs{display:flex;flex-direction:column;gap:7px}
.card.art .mmlg{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;border:1.5px solid rgba(255,255,255,.28);border-radius:14px;padding:7px 12px;background:rgba(255,255,255,.06);color:#fff;font:inherit;cursor:pointer}
.card.art .mmlg b{font-size:18px}
.card.art .mmlg small{grid-column:1;font-size:13px;color:#D6CCFF}
.card.art .mmlg i{grid-row:1/3;grid-column:2;font-style:normal;font-weight:800;font-size:14px;padding:4px 12px;border-radius:999px;background:rgba(185,152,255,.3)}
.card.art .mmlg.on{border-color:var(--gold);background:rgba(255,213,74,.12)}
.card.art .mmlg.on i{background:var(--gold);color:#2a1a08}
.card.art .mmsoon{margin:0;font-size:14px;color:#D6CCFF;font-style:italic}
@media (max-height:520px) and (orientation:landscape){
  .card.art .mmlang,.card.art .mmsoon{font-size:12px}
  .card.art .mmlg{padding:4px 10px}.card.art .mmlg b{font-size:15px}.card.art .mmlg small{font-size:11px}.card.art .mmlg i{font-size:11px;padding:2px 8px}
}