/* Monsters Exam Quest: Who's playing and Adding a child (the WhosPlaying and AddAChild boards). A setting-up screen: nothing
   to navigate to yet, so no header, no tab bar and no save strip, and one quiet way to Grown-ups at the foot. */
body[data-mode="whos"] #app{max-width:none;padding:0}
body[data-mode="whos"] .app-header,body[data-mode="whos"] .app-tabbar,body[data-mode="whos"] .save-strip{display:none}
.wp{position:relative;min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:#050817;color:#fffaf0}
.wp-bg{position:absolute;inset:0;opacity:.42}
.wp-bg .ui-scene-img{object-position:center 40%}
.wp-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,23,.8) 0%,rgba(5,8,23,.46) 32%,rgba(5,8,23,.9) 78%,#050817 100%)}
.wp-glow{position:absolute;left:50%;top:56%;width:1000px;height:520px;margin:-260px 0 0 -500px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(232,196,106,.16) 0%,rgba(232,196,106,0) 68%);pointer-events:none}
.wp-main{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1100px;margin:0 auto;box-sizing:border-box;padding:48px clamp(16px,4vw,56px) 0}
.wp-logo{display:block;width:186px;height:auto;margin:0 auto}
.wp-h{margin:30px 0 0;text-align:center;font:700 clamp(38px,4.6vw,54px)/1.04 var(--fH);letter-spacing:-.01em}
.wp-h:focus{outline:0}
.wp-msg{margin:14px 0 0;text-align:center;font:600 17px/1.45 var(--fD);color:#f6dc95}
.wp-msg:empty{display:none}
.wp-list{margin:44px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:30px}

/* A child's card: their name and stars on a coloured bar, their buddy in its habitat, their year and cards found. */
.wp-pick{--w:268px;width:var(--w);container-type:inline-size;padding:0;border:0;border-radius:22px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;box-shadow:0 26px 44px -22px rgba(0,0,0,.95);transform:rotate(var(--r,0deg));transition:transform 180ms cubic-bezier(.25,1.3,.4,1),box-shadow 180ms}
.wp-pick>span{display:block}
.wp-pick:hover,.wp-pick:focus-visible{transform:translateY(-20px) rotate(0deg) scale(1.03);box-shadow:0 34px 54px -22px rgba(0,0,0,.95),0 0 0 3px #e8c46a}
.wp-pick:active{transform:translateY(-12px) scale(1.01)}
.wp-pick:focus-visible{outline:none}
.wp-top{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border:3px solid var(--edge);border-bottom:0;border-radius:22px 22px 0 0;background:var(--bar)}
.wp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 clamp(18px,9.7cqw,26px)/1.15 var(--fD);letter-spacing:-.01em;color:#0b1236}
.wp-stars{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;color:#0b1236}
.wp-stars .ui-icon{width:19px;height:19px;fill:#0b1236;stroke:none}
.wp-stars b{font:800 clamp(19px,9.3cqw,25px)/1 var(--fN)}
.wp-art{position:relative;height:91.8cqw;overflow:hidden;border-inline:3px solid var(--edge);background:#0d1b2a}
.wp-scene{position:absolute;inset:0}
.wp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,23,.1),rgba(5,8,23,.55))}
.wp-buddy{position:absolute;left:50%;bottom:6px;width:73.9cqw;height:73.9cqw;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.65))}
.wp-pack{position:absolute;left:50%;top:50%;width:29cqw;height:auto;transform:translate(-50%,-50%) rotate(-4deg);filter:drop-shadow(0 10px 12px rgba(0,0,0,.7))}
.wp-scene.is-study{opacity:.5}
.wp-foot{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border:3px solid var(--edge);border-top:0;border-radius:0 0 22px 22px;background:rgba(5,8,23,.92);font:500 clamp(13px,5.6cqw,15px)/1.3 var(--fD);color:#a9b4dc}

/* Add a child: a dashed place in the hand, behind the passcode. */
.wp-add{width:196px;height:268px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:2px dashed rgba(169,180,220,.45);border-radius:22px;background:rgba(255,255,255,.04);color:#a9b4dc;font-family:var(--fD);cursor:pointer;transition:border-color 140ms,background 140ms}
.wp-add .ui-icon{width:40px;height:40px;stroke:#a9b4dc}
.wp-add-t{font:700 18px/1.2 var(--fD)}
.wp-add-s{font:400 14px/1.3 var(--fD)}
.wp-add:hover,.wp-add:focus-visible{border-color:rgba(246,220,149,.75);background:rgba(232,196,106,.1)}
.wp-add:focus-visible{outline:3px solid #ffd65c;outline-offset:4px}
.wp-foot-row{position:relative;z-index:1;display:flex;justify-content:flex-end;width:100%;max-width:1100px;margin:0 auto;box-sizing:border-box;padding:24px clamp(16px,4vw,56px) 34px}
.wp-grown{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border:0;border-radius:12px;background:none;color:#a9b4dc;font:600 16px/1.2 var(--fD);cursor:pointer}
.wp-grown .ui-icon{width:20px;height:20px;stroke:#e8c46a}
.wp-grown:hover{color:#fff}
.wp-grown:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}

/* Cards are dealt in, the newest last; a child just added deals in on their own. */
.wp-deal{animation:wp-deal 760ms cubic-bezier(.17,.84,.3,1) both}
.wp-list.is-settled .wp-deal:not(.is-fresh){animation:none}
@keyframes wp-deal{from{transform:translateY(190px) rotate(var(--fr,0deg)) scale(.9);opacity:0}to{transform:translateY(0) rotate(var(--r,0deg)) scale(1);opacity:1}}

/* Phones: two cards side by side, everything inside them scaled to the card. */
@media (max-width:639px){
  .wp-main{padding-top:32px}
  .wp-logo{width:150px}
  .wp-h{margin-top:20px}
  .wp-list{margin-top:28px;gap:16px}
  .wp-pick{--w:min(268px,calc((100vw - 48px)/2))}
  .wp-top{padding:9px 11px}
  .wp-foot{padding:8px 11px;flex-wrap:wrap;gap:2px 8px}
  .wp-add{width:var(--w,min(268px,calc((100vw - 48px)/2)));height:auto;min-height:150px}
  .wp-pick:hover,.wp-pick:focus-visible{transform:translateY(-8px) scale(1.02)}
}

/* Adding a child, one step at a time over Who's playing. */
.ac-back{position:fixed;inset:0;z-index:20;background:rgba(5,8,23,.74)}
.ac-sheet{position:fixed;z-index:21;left:50%;top:50%;width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;box-sizing:border-box;transform:translate(-50%,-50%);display:flex;flex-direction:column;padding:22px 22px 24px;border-radius:22px;background:#0a0f2b;box-shadow:inset 0 0 0 1px rgba(169,180,220,.26),0 30px 60px -20px rgba(0,0,0,.9);color:#fffaf0}
.ac-sheet:has(.ac-step.is-now){box-shadow:inset 0 0 0 2px #e8c46a,0 30px 60px -20px rgba(0,0,0,.9);background:linear-gradient(rgba(232,196,106,.07),rgba(232,196,106,.07)),#0a0f2b}
.ac-step{margin:0 0 3px;font:700 13px/1.3 var(--fD);letter-spacing:.14em;text-transform:uppercase;color:#8e9bd0}
.ac-step.is-now{color:#e8c46a}
.ac-h{margin:0 0 4px;font:700 22px/1.2 var(--fH)}
.ac-h:focus{outline:0}
.ac-lead{margin:0 0 18px;font:400 15px/1.5 var(--fD);color:#a9b4dc}
.ac-dots{display:flex;justify-content:center;gap:10px;margin-bottom:18px}
.ac-dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(169,180,220,.45)}
.ac-dot.is-on{background:#e8c46a;box-shadow:none}
.ac-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ac-key{min-height:62px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(169,180,220,.26);color:#fffaf0;font:800 26px/1 var(--fN);cursor:pointer}
.ac-key.is-fn{color:#8e9bd0}
.ac-key .ui-icon{width:26px;height:26px}
.ac-key.is-blank{background:none;box-shadow:none}
.ac-key:hover{background:rgba(255,255,255,.1)}
.ac-key:active{transform:translateY(1px)}
.ac-key:focus-visible,.ac-cancel:focus-visible,.ac-go:focus-visible,.ac-seg-b:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.ac-say{margin:14px 0 0;font:600 15px/1.45 var(--fD);color:#f6dc95}
.ac-say:empty{display:none}
.ac-small{margin:16px 0 0;font:400 14px/1.45 var(--fD);color:#8e9bd0}
.ac-field{display:block;margin-bottom:16px}
.ac-field>span{display:block;margin-bottom:7px;font:600 14px/1.3 var(--fD);color:#8e9bd0}
.ac-field input{width:100%;box-sizing:border-box;min-height:56px;padding:12px 16px;border:0;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(169,180,220,.26);color:#fffaf0;font:600 19px/1.2 var(--fD)}
.ac-field input:focus{outline:3px solid #ffd65c;outline-offset:2px}
.ac-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.07)}
.ac-seg-b{min-height:48px;padding:10px 20px;border:0;border-radius:12px;background:transparent;color:#8e9bd0;font:700 16px/1.2 var(--fD);cursor:pointer}
.ac-seg-b[aria-pressed="true"]{background:#16224c;color:#fff}
.ac-note{margin:2px 0 0;padding:13px 15px;border-radius:12px;background:rgba(7,11,34,.6);font:400 14px/1.55 var(--fD);color:#c9d2ee}
.ac-act{display:flex;flex-direction:column;gap:8px;padding-top:18px}
.ac-go{min-height:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:#0b1236;font:700 19px/1.2 var(--fD);box-shadow:inset 0 1px #fff,0 4px 0 rgba(72,82,122,.5);cursor:pointer}
.ac-go:active{transform:translateY(2px);box-shadow:inset 0 1px #fff,0 2px 0 rgba(72,82,122,.5)}
.ac-go[aria-busy="true"]{opacity:.7;cursor:progress}
.ac-cancel{align-self:center;min-height:48px;margin-top:8px;padding:0 16px;border:0;border-radius:12px;background:none;color:#c9d2ee;font:600 16px/1.2 var(--fD);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ac-act .ac-cancel{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .wp-deal{animation:none}
  .wp-pick{transition:none}
  .wp-pick:hover,.wp-pick:focus-visible{transform:rotate(var(--r,0deg))}
}