/* Monsters Exam Quest: the collection. My monsters, the Card Book and one card. Built on the parts in mq.css.
   Cards and creatures always keep their own shape (contain, 1795:2400 cards). Words sit on opaque or dark-scrimmed surfaces. */

/* ---- My monsters (frame 08). Full width: the shown monster's habitat fills the page.
   Wide: its card on the left, the creature in the middle, an ivory panel on the right, the monsters strip along the bottom. */
body[data-route="monsters"] #app{max-width:none;padding:0}
/* The header is --headerH tall plus its 1px rule */
.mb{--mbTop:calc(var(--headerH) + 1px)}
/* My monsters: the buddy first (art, card, how it grows), then Recently found, then every monster owned with search and type */
.mb{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s5);min-height:calc(100dvh - var(--mbTop));padding:var(--s5) max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut))) var(--s7);overflow:hidden}
.mb>.ui-scene{z-index:-2;position:fixed}
.mb-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,34,.45) 0%,rgba(7,11,34,.05) 18%,rgba(7,11,34,.35) 55%,rgba(7,11,34,.9) 100%)}
.mb-h{align-self:flex-start;padding:var(--s3) var(--s5);border-radius:var(--rC);background:rgba(7,11,34,.82)}
.mb-pack{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding:var(--s2) var(--s4) var(--s2) var(--s3);background:rgba(11,18,54,.95)}
.mb-pack img{width:44px;height:auto}
.mb-pack b{font:700 19px/1.25 var(--fD)}
.mb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);align-items:end;gap:var(--s5)}
.mb-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:var(--s4);min-width:0;height:clamp(300px,50vh,520px);pointer-events:none}
.mb-buddy{flex:1 1 auto;min-width:0;height:100%;object-position:50% 100%}
.mb-card{flex:0 0 auto;width:min(28%,200px);margin:0 0 var(--s3)}
.mb-card img{display:block;width:100%;height:auto;aspect-ratio:1795/2400;object-fit:contain;border-radius:3.5%;box-shadow:0 0 0 1px rgba(246,220,149,.5),0 26px 34px -16px rgba(0,0,0,.85)}
.mb-sheet{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s5)}
.mb-tag{gap:6px}
.mb-tag svg{width:16px;height:16px}
.mb-name{margin:2px 0 0;font:600 clamp(32px,3.2vw,44px)/1.05 var(--fH);letter-spacing:-.008em;color:var(--ink);overflow-wrap:anywhere}
.mb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:600 19px/1.3 var(--fD);color:var(--ink2)}
.mb-meta>span:last-child{color:var(--ink)}
.mb-pts{margin:0;font:600 17px/1.3 var(--fD);color:var(--ink2)}
.mb-pts b{font-size:22px;color:var(--ink)}
.mb-grow{align-self:stretch;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid #e6dcc6}
.mb-grow-h{margin:0;font:700 22px/1.2 var(--fD);color:var(--ink)}
.mb-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.mb-req{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;border:1px solid var(--hair);border-radius:var(--rK);background:var(--white)}
.mb-req-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid #8a93ad;color:#fff}
.mb-req.is-met .mb-req-ic{border-color:var(--ok);background:var(--ok)}
.mb-req-ic svg{width:22px;height:22px}
.mb-req-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mb-req-t b{font:700 19px/1.2 var(--fD);color:var(--ink)}
.mb-req-t small{font:500 16px/1.3 var(--fD);color:var(--ink2)}
.mb-req-n{flex:0 0 auto;font-size:28px;line-height:1;color:var(--ink)}
.mb-req .mq-tab{flex:0 0 auto;min-width:70px;justify-content:center}
.mb-req .mq-tab.is-not{background:var(--ivory2);color:var(--ink)}
.mb-still{margin:0;font:400 18px/1.45 var(--fR);color:var(--ink)}
.mb-act{align-self:stretch;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.mb-act2{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mb-act2>*{flex:1 1 150px}
/* Recently found and every monster owned: tiles with the earned form, its type and stage */
.mb-recent,.mb-all{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--rC);background:linear-gradient(180deg,#121d44f2,#0c1535f2);border:1px solid var(--navyLine);box-shadow:inset 0 1px #ffffff08}
.mb-sec-h{margin:0;font:600 24px/1.2 var(--fH);color:#fff}
.mb-sub-h{margin:var(--s2) 0 0;font:600 17px/1.2 var(--fD);color:var(--gold2)}
.mb-all-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.mb-count{margin:0;font:600 18px/1.3 var(--fD);color:var(--onDark2)}
.mb-count b{font-size:26px;line-height:1;color:#fff}
.mb-find{display:flex;flex-direction:column;gap:var(--s3)}
.mb-search{max-width:420px}
.mb-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.mb-tiles.is-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mb-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-height:48px;padding:12px 10px 14px;border:1px solid #a7b6d12e;border-radius:var(--rK);background:linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:inset 0 1px #ffffff08;color:#fff;text-decoration:none;text-align:center;transition:border-color var(--ctlSpeed),background var(--ctlSpeed)}
.mb-tile:hover{border-color:#e9cc85a1;background:#ffffff14}
.mb-thumb{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:12px;background:radial-gradient(circle at 50% 60%,rgba(232,196,106,.22),rgba(232,196,106,0) 70%)}
.mb-thumb img{width:100%;height:100%;object-fit:contain}
.mb-tile-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mb-tile-t b{font:700 18px/1.2 var(--fD);overflow-wrap:anywhere}
.mb-tile-t span{font:500 15px/1.3 var(--fD);color:var(--onDark2)}
.mb-badge{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--gold);color:var(--ink);font:700 13px/1.2 var(--fD);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mb-badge svg{width:13px;height:13px}
.mb-none{margin:0;padding:var(--s3) var(--s4);border-radius:var(--rK);background:#ffffff0d;font:500 18px/1.4 var(--fD);color:#eef0fb}
.mb-book-link{margin:0}
.mb.is-empty{display:flex}
.mb.is-empty>.ui-scene,.mb.is-empty .mb-scrim{position:absolute}
.mb-empty{align-self:flex-start;max-width:620px;padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.mb-empty p{margin:0;font:400 19px/1.45 var(--fR);color:var(--ink2)}
@media (max-width:1023px){
.mb{padding:var(--s4) var(--gut) calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s5));gap:var(--s4)}
.mb-hero{grid-template-columns:minmax(0,1fr)}
.mb-stage{height:clamp(220px,42vw,360px)}
}
@media (max-width:639px){
.mb-h{padding:var(--s2) var(--s4)}
.mb-card{width:min(32%,120px)}
.mb-stage{height:clamp(190px,56vw,250px);gap:var(--s2)}
.mb-sheet{padding:var(--s4)}
.mb-name{font-size:32px}
.mb-req{flex-wrap:wrap;gap:8px 12px}
.mb-req-t{flex-basis:calc(100% - 52px)}
.mb-req-n{margin-left:48px;font-size:26px}
.mb-act2>*{flex-basis:100%}
.mb-recent,.mb-all{padding:var(--s3)}
.mb-tiles,.mb-tiles.is-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.mb-thumb{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){.mb-tile{transition:none}}

/* ---- Card Book (the CardBook board): over the buddy's habitat, dimmed, with a gold glow behind the carousel. The page tucks
   under the header like Home. "5 of 228 found" and the My cards / Sets tabs; the carousel with its arrows beside it; the card's
   number, name and set; Slide through them; See it up close. */
body[data-route="artbook"] #app{max-width:none;padding:0}
.cb{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;margin-top:calc(-1 * var(--headerH));padding:var(--headerH) 0 36px;overflow:hidden;background:#050817;color:var(--ivory)}
.cb>.ui-scene{z-index:-3;background:#050817}
.cb>.ui-scene .ui-scene-img{object-position:center 44%}
.cb>.ui-scene .ui-scene-img.is-in{opacity:.32}
.cb-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.88) 0%,rgba(5,8,23,.6) 30%,rgba(5,8,23,.82) 72%,#050817 100%)}
.cb-glow{position:absolute;left:50%;top:44%;z-index:-1;width:1050px;height:560px;margin:-280px 0 0 -525px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(232,196,106,.18) 0%,rgba(232,196,106,0) 68%)}
.cb-top{width:100%;max-width:1216px;margin:0 auto;padding:4px clamp(20px,3.5vw,48px) 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.cb-h{margin:0;font:700 clamp(36px,4.4vw,52px)/1 var(--fH);letter-spacing:-.012em}
.cb-h:focus{outline:0}
.cb-n{font-size:1.22em;font-weight:800;color:var(--gold)}
.cb-tabs{display:flex;gap:24px}
.cb-tab{min-height:56px;min-width:var(--tap);padding:4px 2px 12px;border:0;border-bottom:3px solid transparent;background:none;color:#a9b4dc;font:600 19px/1.2 var(--fD);cursor:pointer;transition:color 130ms,border-color 130ms}
.cb-tab[aria-pressed="true"]{border-bottom-color:var(--gold);color:var(--ivory);font-weight:700}
.cb-tab:hover{color:var(--ivory)}
.cf-wrap{position:relative;width:100%;margin-top:10px}
.cf-stage{--k:1;position:relative;height:calc(430px * var(--k));perspective:1500px;touch-action:pan-y;cursor:grab;overflow:hidden;overflow:clip}
.cf-stage:focus-visible{outline:3px solid #ffd65c;outline-offset:-3px}
.cf-stage.is-drag{cursor:grabbing}
.cf-card{position:absolute;left:50%;top:50%;width:calc(250px * var(--k));margin:calc(-167px * var(--k)) 0 0 calc(-125px * var(--k));aspect-ratio:1795/2400;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;transition:transform 430ms cubic-bezier(.3,1.1,.4,1),opacity 430ms}
.cf-stage.is-drag .cf-card{transition:none}
.cf-card img{display:block;width:100%;height:100%;border-radius:12px;object-fit:contain}
.cf-card.is-center{cursor:zoom-in}
.cf-card.is-center img{box-shadow:0 26px 46px -18px rgba(0,0,0,.95)}
.cf-card.is-center .cf-gap img{box-shadow:none}
.cf-gap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:12px;background:rgba(255,250,240,.05);box-shadow:inset 0 0 0 2px rgba(169,180,220,.4)}
.cf-gap img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);opacity:.1;filter:grayscale(1)}
.cf-gap b{position:relative;font:800 calc(44px * var(--k))/1 var(--fH);color:rgba(169,180,220,.75)}
.cb-arrow{position:absolute;top:50%;z-index:200;width:54px;height:76px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:12px;background:rgba(5,8,23,.68);box-shadow:inset 0 0 0 1px rgba(246,220,149,.4);color:var(--gold2);cursor:pointer;transform:translateY(-50%);transition:background 130ms,transform 110ms}
.cb-arrow.is-prev{left:clamp(16px,3vw,44px)}
.cb-arrow.is-next{right:clamp(16px,3vw,44px)}
.cb-arrow svg{width:27px;height:27px;stroke-width:2.6}
.cb-arrow:hover{background:rgba(232,196,106,.28)}
.cb-arrow:active{transform:translateY(-50%) scale(.94)}
.cb-arrow[aria-disabled="true"]{opacity:.4;cursor:default}
.cb-info{width:100%;max-width:1216px;margin:0 auto;padding:18px clamp(20px,3.5vw,48px) 0;display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.cb-name{flex:0 0 auto;min-width:200px;display:flex;flex-direction:column}
.cb-no{margin:0;font:700 18px/1.2 var(--fH);letter-spacing:.05em;color:#a9b4dc}
.cb-title{display:block;margin-top:2px;font:700 28px/1.15 var(--fD);letter-spacing:-.008em}
.cb-sub{display:block;margin-top:3px;font:400 16px/1.35 var(--fD);color:#c9d2ee}
/* An edition card's gold tabs (main's Singapore edition); a long one wraps on a narrow phone rather than running past the edge. */
.cb-name>.mq-tab{align-self:flex-start;margin-top:8px;white-space:normal}
.cb-range{flex:999 1 280px;min-width:0;display:flex;flex-direction:column;gap:7px;font:400 15px/1.3 var(--fD);color:#a9b4dc}
.cb-range input{width:100%;height:var(--tap);margin:0;accent-color:#e8c46a}
.cb-go:empty{display:none}
.cb-close{flex:0 0 auto;min-height:60px;display:inline-flex;align-items:center;padding:13px 26px;border-radius:12px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 18px/1.2 var(--fD);text-decoration:none;box-shadow:inset 0 1px #fff,0 4px 0 rgba(72,82,122,.5)}
.cb-close:focus-visible,.cb-tab:focus-visible,.cb-arrow:focus-visible,.cb-slot:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
/* Sets: each family's three cards, a gap for each still to find */
.cb-sets{width:100%;max-width:1216px;margin:0 auto;padding:18px clamp(20px,3.5vw,48px) 0}
.cb-lead{margin:0 0 18px;font:400 19px/1.4 var(--fD);color:#c9d2ee}
.cb-set-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
.cb-set-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(169,180,220,.25)}
.cb-set.is-full .cb-set-top{border-bottom-color:rgba(246,220,149,.5)}
.cb-set-n{display:inline-flex;align-items:center;gap:10px;min-width:0}
.cb-set-n b{font:700 19px/1.2 var(--fD);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-dot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--p0,#d2e65a),var(--p1,#6f9a2c))}
.cb-set-tag{flex:0 0 auto;font:700 15px/1.2 var(--fD);color:#a9b4dc}
.cb-set.is-full .cb-set-tag{color:var(--gold2)}
.cb-slots{display:flex;gap:9px}
.cb-slot{position:relative;flex:1 1 0;min-width:0;display:block;aspect-ratio:1795/2400;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;transition:transform 150ms cubic-bezier(.3,1.3,.4,1)}
.cb-slot img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 18px -10px rgba(0,0,0,.9)}
button.cb-slot:hover{transform:translateY(-7px) scale(1.04)}
.cb-slot.is-gap{display:flex;align-items:center;justify-content:center;background:rgba(255,250,240,.05);box-shadow:inset 0 0 0 2px rgba(169,180,220,.4);cursor:default}
.cb-slot.is-gap b{font:800 28px/1 var(--fH);color:rgba(169,180,220,.75)}
@media (max-width:1023px){.cb-set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cb{padding-bottom:calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s5))}}
@media (max-width:639px){
.cf-stage{--k:.66}
/* On a phone the arrows sit under the cards, so they never cover the card beside the middle one */
.cf-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cf-stage{flex:1 1 100%}
.cb-arrow{position:static;width:64px;height:56px;transform:none}
.cb-arrow:active{transform:scale(.94)}
.cb-tabs{width:100%}
.cb-tab{flex:1 1 0}
.cb-name{flex:1 1 100%}
.cb-range{flex:1 1 100%}
.cb-go{flex:1 1 100%}
.cb-close{width:100%;justify-content:center}
.cb-set-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.cf-card{transition-duration:1ms}.cb-arrow,.cb-slot{transition:none}button.cb-slot:hover{transform:none}}
/* An empty Card Book */
.cb-empty{width:min(1120px,calc(100% - 2 * var(--gut)));margin:var(--s4) auto 0;padding:var(--s5);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5)}
.cb-empty h2{flex:1 1 320px}

/* ---- One card up close (the CardClose board): its own page in the card's habitat, the 3D card on the left with See the back
   and "come with me", the type, name, stat bars filling one after another, the two moves, and when it was found. */
body[data-route="monster"] #app{max-width:none;padding:0}
.cd{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;padding:32px clamp(16px,3.6vw,46px) 40px;overflow:hidden;background:#0b1236;color:#fff}
.cd>.ui-scene{z-index:-3;background:#0b1236}
.cd>.ui-scene .ui-scene-img{object-position:center 40%}
.cd>.ui-scene .ui-scene-img.is-in{opacity:.5}
.cd-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(96deg,rgba(5,8,23,.5) 0%,rgba(5,8,23,.18) 24%,rgba(6,12,30,.68) 56%,rgba(6,12,30,.9) 100%),linear-gradient(180deg,rgba(5,8,23,.62) 0%,rgba(5,8,23,0) 20%,rgba(5,8,23,0) 74%,rgba(5,8,23,.8) 100%)}
.cd-glow{position:absolute;left:32%;top:46%;z-index:-1;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--p0,#d2e65a) 0%,rgba(255,255,255,0) 60%);opacity:.3}
.cd-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cd-backlink{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:9px 16px;border:1px solid rgba(149,169,214,.45);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font:700 16px/1.2 var(--fD);text-decoration:none}
.cd-backlink svg{width:20px;height:20px;color:var(--gold2);stroke-width:2.4}
.cd-backlink:hover{background:rgba(255,255,255,.14)}
.cd-no{margin:0;font:700 22px/1.2 var(--fH);letter-spacing:.06em;color:#a9b4dc}
.cd-where{margin:0;display:inline-flex;align-items:center;gap:10px;font:700 15px/1.2 var(--fD);letter-spacing:.04em;text-transform:uppercase;color:#c9d2ee}
.cd-where img{width:18px;height:24px;object-fit:contain}
button.cd-backlink{cursor:pointer}
/* One card up close over a pack (closeUp): the whole screen, scrolling rather than shrinking */
.cd-layer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;overscroll-behavior:contain;background:#0b1236;color:#fff}
.cd-layer::backdrop{background:#0b1236}
.cd-layer .cd{min-height:100%}
.cd-main{flex:1 1 auto;margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px}
.cd-left{flex:0 0 auto;width:min(420px,100%);display:flex;flex-direction:column;align-items:center;--cw:min(390px,78vw)}
.cd-act{margin-top:42px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px}
.cd-turn,.cd-come{min-height:56px;display:inline-flex;align-items:center;gap:11px;padding:11px 22px;border-radius:12px;font:700 17px/1.2 var(--fD);cursor:pointer;transition:background 120ms,transform 110ms,border-color 120ms}
.cd-turn{border:1px solid rgba(246,220,149,.5);background:rgba(232,196,106,.14);color:var(--gold2)}
.cd-turn svg{width:20px;height:20px;stroke-width:2.6}
.cd-turn:hover{background:rgba(232,196,106,.24);border-color:var(--gold)}
.cd-come{border:1px solid rgba(255,255,255,.8);background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink)}
.cd-turn:active,.cd-come:active{transform:translateY(1px)}
.cd-with{margin:0;min-height:56px;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:12px;background:rgba(126,208,140,.16);box-shadow:inset 0 0 0 2px #7ed08c;color:#bdefc7;font:700 17px/1.2 var(--fD)}
.cd-with svg{width:22px;height:22px;stroke-width:3}
.cd-tip{font:400 15px/1.3 var(--fD);color:#a9b4dc}
.cd-right{flex:1 1 420px;min-width:0;max-width:560px}
.cd-type{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cd-type .mq-tab{white-space:normal}
.cd-type .mq-type{min-height:36px;padding:5px 16px 5px 5px}
.cd-h{margin:12px 0 0;font:700 clamp(40px,4.4vw,56px)/1 var(--fH);letter-spacing:-.01em;overflow-wrap:anywhere}
.cd-h:focus{outline:0}
.cd-stage{margin:8px 0 0;font:600 17px/1.3 var(--fD);color:#c3cbea}
.cd-hint{margin:12px 0 0;font:400 19px/1.45 var(--fD);color:#c3cbea}
.cd-stats{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:470px}
.cd-stats li{display:flex;align-items:center;gap:14px}
.cd-stat-n{flex:0 0 92px;font:700 16px/1.2 var(--fD);color:#c3cbea}
.cd-track{position:relative;flex:1 1 auto;height:14px;border-radius:12px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.cd-fill{position:relative;display:block;width:var(--w);height:100%;border-radius:12px;animation:cd-grow 820ms cubic-bezier(.16,.84,.3,1) var(--d) both}
.cd-fill.is-hp{background:linear-gradient(90deg,#4f9a5d,#7ed08c)}
.cd-fill.is-attack{background:linear-gradient(90deg,#c23a12,#ffb562)}
.cd-fill.is-defence{background:linear-gradient(90deg,#1f6fbf,#a6dcff)}
.cd-fill.is-speed{background:linear-gradient(90deg,#b07ccc,#f0d6fa)}
@keyframes cd-grow{from{width:0}to{width:var(--w)}}
/* the shine runs along each bar as it fills, clipped to the bar */
.cd-fill::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-repeat:no-repeat;animation:cd-shine 900ms ease-out var(--d) both}
@keyframes cd-shine{from{background-position:110% 0}to{background-position:-10% 0}}
.cd-stat-v{flex:0 0 46px;text-align:right;font:800 25px/1 var(--fH);animation:cd-num 420ms cubic-bezier(.2,1.1,.4,1) var(--d) both}
@keyframes cd-num{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cd-moves{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;max-width:490px}
.cd-move{flex:1 1 210px;padding:14px 16px;border:1px solid rgba(246,220,149,.3);border-radius:12px;background:rgba(255,255,255,.06)}
.cd-move p{margin:0 0 4px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cd-move p b:first-child{font:700 18px/1.25 var(--fD)}
.cd-move p .mq-num{font:800 23px/1 var(--fH);color:var(--gold2)}
.cd-move span{font:400 15px/1.45 var(--fR);color:#c3cbea}
.cd-found{margin:22px 0 0;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:rgba(7,11,34,.7);border:1px solid rgba(149,169,214,.3);font:400 16px/1.35 var(--fD);color:#c3cbea}
.cd-found img{width:30px;height:40px;object-fit:contain}
.cd-back{display:block;width:var(--cw);height:auto;aspect-ratio:1795/2400;border-radius:3.5%;object-fit:contain;box-shadow:0 0 0 1px rgba(246,220,149,.4),0 26px 34px -18px rgba(0,0,0,.9)}
.cd-backlink:focus-visible,.cd-turn:focus-visible,.cd-come:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
/* The card's words in See it bigger */
.cd-dl{margin:0}
.cd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "m m";align-items:baseline;gap:2px var(--s4);padding:10px 0;border-top:1px solid #e6dcc6}
.cd-row dt{grid-area:k;font:700 17px/1.3 var(--fD);color:var(--ink2)}
.cd-v{grid-area:v;margin:0;font-size:32px;line-height:1;color:var(--ink)}
.cd-m{grid-area:m;margin:0;display:flex;flex-direction:column;gap:2px}
.cd-m b{font:700 19px/1.25 var(--fD);color:var(--ink)}
.cd-m span{font:400 17px/1.45 var(--fR);color:var(--ink2)}
.cz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:600 18px/1.3 var(--fD);color:var(--ink)}
@media (max-width:899px){.cd-main{flex-direction:column;align-items:stretch}.cd-left{width:100%}.cd-right{max-width:none}.cd-act{margin-top:28px}.cd-glow{left:50%;top:30%}}
@media (max-width:639px){.cd{padding:20px 16px 32px}.cd-no{font-size:18px}.cd-where{font-size:13px;text-align:right}.cd-where-x{display:none}.cd-backlink{white-space:nowrap}.cd-turn,.cd-come{flex:1 1 100%;justify-content:center}.cd-tip{display:none}}
@media (prefers-reduced-motion:reduce){.cd-fill,.cd-fill::after,.cd-stat-v{animation:none}.cd-turn,.cd-come{transition:none}}

/* ---- See it bigger: the canonical 720px card, whole, beside (or above) its details */
.ui-dialog.cz-dialog{width:min(1140px,calc(100vw - 24px))}
.cz{display:grid;grid-template-columns:minmax(0,auto) minmax(280px,1fr);align-items:start;gap:var(--s4)}
.cz-card{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 140px);aspect-ratio:1795/2400;object-fit:contain;border-radius:3.5%;justify-self:center}
.cz-info{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
@media (max-width:820px){.cz{grid-template-columns:minmax(0,1fr)}.cz-card{width:100%;max-height:none}}

/* Tapping a found card (Jon, 25 Oct): the rest fall away, the page's words and arrows fade, a burst of gold light opens behind
   the card as it rises and turns, and a view transition carries it to its own page, where it lands as the big card. */
.cf-burst{position:absolute;left:50%;top:50%;z-index:0;width:min(78vw,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,rgba(255,240,190,.95) 0%,rgba(246,220,149,.55) 18%,rgba(232,196,106,.22) 40%,rgba(232,196,106,0) 66%);mix-blend-mode:screen;transform:translate(-50%,-50%) scale(.15);opacity:0}
.cb.is-launching .cb-arrow,.cb.is-launching .cb-info,.cb.is-launching .cb-tabs,.cb.is-launching .cb-top{opacity:0;transition:opacity .28s ease}
.cb.is-launching .cf-card.is-center{z-index:300 !important}
::view-transition-group(mq-card){animation-duration:.62s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
@media (prefers-reduced-motion:reduce){.cf-burst{display:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}
.cb.is-launching .cf-stage{overflow:visible}