:root{--gold:#f7d58b;--blue:#0e376a;--cream:#fff1c7;--atlas:url('assets/magical-ui.png')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#081d39;color:var(--cream);font-family:Georgia,serif}body{min-height:100dvh;display:grid;place-items:center;background-image:linear-gradient(#04162ba6,#04162ba6),url('assets/citadela-approved.webp');background-size:cover;background-position:center;background-attachment:fixed}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}button:focus-visible,input:focus-visible{outline:4px solid #b7fffb;outline-offset:3px}button:disabled{cursor:default}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.game{position:relative;width:min(100vw,150dvh);aspect-ratio:3/2;container-type:inline-size}.game-skin{width:100%;height:100%;display:block;pointer-events:none}.mobile-brand{display:none}.categories{position:absolute;left:6.51%;top:31.25%;width:17.78%;height:34.4%;display:grid;grid-template-rows:repeat(4,1fr);gap:1.1cqw}.nav-sprite{background:var(--atlas);border:0;padding:0;border-radius:2cqw;background-size:562.64% 1264.2%;background-position-x:7.92%;transition:filter .15s,transform .15s}.categories .nav-sprite:nth-child(1){background-position-y:33.83%}.categories .nav-sprite:nth-child(2){background-position-y:43.37%}.categories .nav-sprite:nth-child(3){background-position-y:52.81%}.categories .nav-sprite:nth-child(4){background-position-y:62.46%}.nav-sprite:hover{filter:brightness(1.2)}.categories .active:not(:first-child){box-shadow:0 0 15px #44fff4,inset 0 0 12px #44fff4}.categories:has(.active:not(:first-child)) .nav-sprite:first-child{filter:saturate(.5) brightness(.7)}#my-colors{position:absolute;left:7.03%;top:67.78%;width:16.75%;height:11.3%;padding:0;border:0;background:none}.progress-title{position:absolute;inset:0 0 auto;font-size:1.7cqw;visibility:hidden}.collection-track{position:absolute;left:1.8%;top:37%;width:97%;height:25%;padding:1px;overflow:hidden;border-radius:20px}#collection-fill{display:block;height:100%;width:0%;background:linear-gradient(#d5ffff,#1de7da 40%,#19919f);border-radius:20px;box-shadow:0 0 15px #7ffaf6;transition:width .4s}#collection-count{position:absolute;top:74%;left:28%;width:44%;font-size:1.8cqw;background:#073071;text-shadow:0 2px 1px #09284b;line-height:1.2}.parents{position:absolute;left:6.51%;top:81.05%;width:17.78%;height:7.8%;background-position-y:88%}.catalog{position:absolute;left:27.5%;top:24.8%;width:65.6%;height:63.2%;border-radius:1.5cqw}.catalog-title{display:none}.grid{position:absolute;inset:1.0% .64% 1.0%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));column-gap:.58cqw;row-gap:.55cqw}.art-card{border:0;padding:0;position:relative;min-width:0;min-height:0;background:var(--atlas);background-size:var(--size-x) var(--size-y);background-position:var(--position-x) var(--position-y);border-radius:1.4cqw;transition:transform .16s,filter .16s;isolation:isolate;box-shadow:0 2px 3px #001b3155}.art-card:hover{transform:scale(1.025);filter:brightness(1.07);z-index:2}.art-card:active{transform:scale(.97)}.card-progress{position:absolute;left:8%;width:84%;bottom:24%;height:5px;background:#073563b3;border:1px solid #ffdb80a8;border-radius:20px;overflow:hidden;pointer-events:none}.card-progress>span{display:block;background:linear-gradient(90deg,#2fdfcc,#d1ffe9);height:100%;width:var(--progress,0%)}.card-percent{position:absolute;right:5%;top:6%;background:#09355bdd;border:1px solid #e9c77e;border-radius:20px;font-family:system-ui,sans-serif;font-size:clamp(10px,1cqw,16px);padding:2px 7px}.complete .card-percent{background:#167154;color:#fff5ca}.catalog.filtered{background:linear-gradient(135deg,#0b3564,#07213e);border:2px solid #b6ae8a}.catalog.filtered .grid{align-content:start;grid-auto-rows:23.8%;grid-template-rows:repeat(4,minmax(0,1fr))}.pager{position:absolute;left:49.6%;top:89.1%;width:19.3%;height:5.3%;display:flex;align-items:center;justify-content:space-between;gap:5%;font-size:2cqw}.pager button{height:100%;aspect-ratio:1;background:transparent;border:0;padding:0;color:transparent}.pager button:disabled{opacity:.6}.pager button:focus-visible{border-radius:15px}.pager span{background:linear-gradient(#0c418e,#083479);text-align:center;flex:1;line-height:1.4}#empty{padding:8%;text-align:center;font-size:1.8cqw}#empty h2{font-size:2.5cqw}dialog{color:var(--cream);border:3px solid #e2ba6e;border-radius:28px;background:radial-gradient(ellipse at top,#22578c,#0d294c 75%);box-shadow:inset 0 0 0 2px #624416,0 20px 90px #001128b8;padding:34px;max-height:94dvh;width:min(94vw,510px);overflow:auto}dialog::backdrop{background:#01172cc4;backdrop-filter:blur(7px)}.gold,.blue{min-height:46px;border:2px solid #e9c37b;border-radius:14px;padding:11px 18px;font-family:system-ui,sans-serif;font-weight:750;font-size:15px;box-shadow:inset 0 2px 1px #fff7,0 3px 0 #031426}.gold{background:linear-gradient(#ffe7a7,#ecb753);color:#4d2b06}.blue{background:linear-gradient(#195291,#0b3063);color:#fff4d8}.gold:hover,.blue:hover{filter:brightness(1.1)}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:30px;min-width:44px;min-height:44px}h2{font-size:30px;margin:14px 0}p{line-height:1.6;color:#d1e2f1}.small-label{font:700 12px system-ui,sans-serif;letter-spacing:2px;color:#93dddc}#account{text-align:center}.account-crystal{height:135px;width:135px;margin:0 auto;background:var(--atlas);background-size:768px 512px;background-position:-42px -46px;border-radius:50%}form{text-align:left;font:14px/1.6 system-ui,sans-serif}form>label{display:block}input[type=email]{width:100%;padding:12px 14px;display:block;margin:7px 0 20px;background:#f7fbff;border:2px solid #a9c2d7;border-radius:12px;color:#153855}.check{display:flex;gap:10px;margin-bottom:20px}.check input{width:20px;height:20px;flex-shrink:0;accent-color:#16a6a6}form .gold{width:100%}.demo-note{font-size:12px;text-align:center;color:#bdd2e4}.logout{display:block;margin:18px auto 0}#editor{width:min(1050px,98vw);height:96dvh;max-height:96dvh;padding:0;display:none;overflow:hidden}#editor[open]{display:flex;flex-direction:column}.editor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #ba9d60}.editor-top strong{font-size:19px;text-align:center}.editor-top button{font-size:13px}.editor-foot{display:flex;justify-content:center;align-items:center;gap:25px;padding:7px 12px 12px;font:12px system-ui,sans-serif;color:#b8d4e4}.editor-foot button{min-width:46px;padding:8px 14px;min-height:40px}#paint-frame{border:0;width:100%;flex:1;min-height:0;background:transparent}.story-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.story-card{border:2px solid #d6b775;border-radius:18px;overflow:hidden;background:#fdf3db;color:#0e3752;padding:0;text-align:center}.story-card img{width:100%;height:160px;object-fit:contain;background:white;display:block}.story-card strong{display:block;padding:10px 8px;font-size:16px}.story-card small{display:block;background:#eac878;padding:6px;font:12px system-ui,sans-serif}#stories-dialog{text-align:center;width:min(650px,94vw)}#toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;padding:13px 20px;border:1px solid #e5c07d;border-radius:16px;background:#0b365a;z-index:50;font:14px/1.4 system-ui,sans-serif;text-align:center}#toast.show{display:block}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}
@media(max-width:800px){body{display:block;background-image:linear-gradient(#08306455,#061d43aa),url('assets/citadela-approved.webp')}.game{width:100%;min-height:100dvh;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;padding:8px 12px 16px;gap:10px}.game-skin{display:none}.mobile-brand{display:block;width:min(86vw,480px);aspect-ratio:610/179;background:var(--atlas);background-size:251.8% 572.1%;background-position:56.4% 0%;flex-shrink:0}.categories{position:static;width:100%;height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;gap:5px;order:1}.nav-sprite{border-radius:13px;aspect-ratio:273/81;min-height:44px;background-size:562.64% 1264.2%;background-position-x:7.92%}.catalog{position:relative;inset:auto;width:100%;height:auto;min-height:0;background:linear-gradient(120deg,#0a3874ec,#071e47e8);border:3px solid #d8ad5f;border-radius:20px;padding:10px;order:3;box-shadow:inset 0 0 0 2px #ffe4a444,0 6px 0 #052749}.catalog-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 2px 10px}.catalog-title h2{font-size:clamp(16px,3.5vw,25px);margin:0}.catalog-title span{font:700 10px system-ui,sans-serif;background:#ffdd8a;color:#483b1c;border-radius:14px;padding:5px 9px;white-space:nowrap}.grid,.catalog.filtered .grid{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:9px;align-content:start;min-height:0}.art-card{aspect-ratio:244/155;border-radius:12px;min-height:0}.card-progress{height:4px}.card-percent{font-size:10px;top:4%;padding:1px 5px}.pager{position:static;order:4;height:48px;width:210px;gap:10px;font-size:21px}.pager button{background:linear-gradient(#1874ba,#07437d);border:2px solid #efcd85;border-radius:15px;box-shadow:inset 0 0 0 2px #756542,0 3px 0 #00274d;color:#ffdb75;min-width:48px}.pager button:disabled{filter:saturate(.3);opacity:.6}.pager span{border:2px solid #d4b36a;border-radius:12px;padding:6px 12px}.parents{position:static;width:160px;min-height:46px;height:46px;order:5;background-size:562.64% 1264.2%;margin-top:0}#my-colors{position:relative;inset:auto;width:100%;height:33px;order:2;display:flex;gap:10px;align-items:center;background:#082a55db;border:1px solid #d4bc7b;border-radius:20px;padding:6px 12px;font-size:13px}.progress-title{position:static;visibility:visible;font-size:13px;white-space:nowrap}.collection-track{position:static;flex:1;width:auto;height:12px;background:#001a36;border:1px solid #baa476;padding:0}#collection-count{position:static;width:auto;background:none;font-size:15px;white-space:nowrap}#empty{font-size:16px;padding:25px 15px}#empty h2{font-size:24px}.catalog.filtered{border:3px solid #d8ad5f}.editor-top{padding:10px;gap:7px;flex-wrap:wrap}.editor-top strong{font-size:14px;order:3;width:100%}.editor-top button{font-size:12px;padding:10px 12px}.editor-top #show-stories{margin-left:auto}.editor-foot{gap:15px;padding:5px 10px 8px}.editor-foot span{font-size:10px}#editor{border-radius:18px}.story-card img{height:130px}dialog{padding:30px 20px}dialog h2{font-size:26px}}
@media(max-width:440px){.game{padding:6px 8px 12px;gap:8px}.categories{grid-template-columns:repeat(2,1fr);gap:6px}.nav-sprite{max-height:46px;background-size:562.64% 1264.2%;aspect-ratio:auto}.catalog{padding:8px}.grid{gap:6px}.catalog-title{margin-bottom:8px}.card-progress{height:3px;left:10%;width:80%}.art-card{border-radius:9px}.mobile-brand{width:82vw;max-height:100px}.parents{width:150px}.game .catalog-title span{font-size:9px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(min-width:801px){.nav-sprite{background:none}.nav-sprite:hover{box-shadow:inset 0 0 25px #8dfff96b}.categories:has(.active:not(:first-child)) .nav-sprite:first-child{background:#06275f66;filter:none}.pager span{position:absolute;left:27%;width:46%;font-size:1.9cqw;border-radius:6px}.pager button{position:absolute;left:0;width:18%}.pager #next{left:auto;right:0}#collection-count{background:linear-gradient(90deg,#0a347977,#0a3479,#0a347977);border-radius:10px}}
@media(max-width:800px){.mobile-brand{aspect-ratio:610/196;background-size:251.8% 522.45%;max-height:none;mask-image:linear-gradient(#000 90%,transparent)}}
@media(min-width:801px){.catalog:not(.filtered) .art-card{background:none;box-shadow:none}#game[data-pages="1"] #page-count{opacity:0}#game[data-completed="0"] #collection-count{opacity:0}}
/* Character artwork is the exact approved kids PNG, never the UI render's reinterpretation. */
.card-art{position:absolute;left:2.7%;right:2.7%;top:3.1%;bottom:23.1%;overflow:hidden;border-radius:.7cqw .7cqw 0 0;background:#fbf0d7;pointer-events:none}.card-art img{display:block;width:100%;height:100%;object-fit:contain}.card-progress{z-index:2}.card-percent{z-index:3}.card-art:has(img[src$="-thumb.webp"]){background:#fffaf0}@media(max-width:800px){.card-art{border-radius:7px 7px 0 0}}
.card-art img{object-fit:cover;object-position:center 35%}.card-art:has(img[src$="-thumb.webp"]) img{object-fit:contain}
.art-card[data-art="pebble"] .card-art img{object-position:center 75%}.art-card[data-art="veyra"] .card-art img{object-position:center 82%}.art-card[data-art="voltus"] .card-art img{object-position:center 65%}
/* Atelier v3: use nearly the entire display for the paper and discoverable tools. */
#editor{width:min(1680px,99vw);height:98dvh;max-height:98dvh;background:#0b2e53;border-radius:22px}.editor-top{padding:7px 12px;min-height:54px;flex-shrink:0}.editor-top strong{font-size:17px}.editor-top .blue{min-height:40px;padding:7px 15px}.editor-foot{height:37px;min-height:37px;padding:3px 10px 5px;flex-shrink:0}.editor-foot .blue{min-height:28px;height:28px;padding:2px 12px}.editor-foot span{font-size:11px}#paint-frame{display:block}@media(max-width:650px){#editor{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border-width:0}.editor-top{padding:4px 7px;min-height:44px;flex-wrap:nowrap}.editor-top strong{font-size:11px;order:0;width:auto;flex:1}.editor-top .blue{font-size:10px;min-height:36px;padding:5px 8px}.editor-foot{height:30px;min-height:30px;padding:0 7px 3px}.editor-foot span{font-size:9px}.editor-foot .blue{height:25px;min-height:25px;border-width:1px}}
#editor{max-width:99vw}@media(max-width:650px){#editor{max-width:100vw}}
@media(max-height:500px) and (min-width:651px){#editor{height:100dvh;max-height:100dvh;max-width:100vw;width:100vw;margin:0;border:0;border-radius:0}.editor-top{min-height:38px;height:38px;padding:3px 8px}.editor-top .blue{min-height:30px;padding:3px 10px}.editor-top strong{font-size:13px}.editor-foot{display:none}}