/* Starlit: shared tokens and the interface kit.
   --px is the size of one art pixel on the home page; --u is the same idea
   for every other screen, --half is the art pixel of the small avatars drawn
   at about half that, and --big is the pixel of large text, about one and a
   half times --u. All are set by ui.js so art and lettering land on whole
   device pixels wherever that matters.
   Every word is set in a pixel font. Their em is ten pixels, so a font size
   of calc(10*var(--u)) draws one font pixel per interface pixel. */
@font-face{font-family:'Starlit Slab';src:url('./assets/fonts/starlit-slab.woff') format('woff');font-display:block}
@font-face{font-family:'Starlit Label';src:url('./assets/fonts/starlit-label.woff') format('woff');font-display:block}
@font-face{font-family:'Starlit Text';src:url('./assets/fonts/starlit-text.woff') format('woff');font-display:block}

:root{
  --px:2px;--u:2px;--half:1px;--big:3px;
  --fs:calc(10*var(--u));--fs-xl:calc(10*var(--big));
  --page:#201d3f;--header:#1e1b37;--outer:#110f22;--panel:#33284c;--panel-2:#42335f;--well:#1b1830;--ink:#15122b;--line:#5d4d7c;
  --text:#f4f0fa;--muted:#b9abd6;--dim:#7a6a86;
  --gold:#f5d066;--gold-soft:#f4d8b3;--gold-deep:#b9853a;--cream:#f5cc9d;--lilac:#dccbf5;--lavender:#ce9aed;--violet:#7a42a7;
  --good:#8fd05a;--bad:#ff8094;--online:#7fae08;
  --slab:'Starlit Slab',ui-monospace,'Courier New',monospace;
  --label:'Starlit Label',ui-monospace,'Courier New',monospace;
  /* Sentences. The system fonts only stand in for characters the pixel font does not have. */
  --body:'Starlit Text','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,Arial,sans-serif;
  color-scheme:dark;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--outer)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--outer);color:var(--text);font:var(--fs)/1.4 var(--body);letter-spacing:0;
  font-synthesis:none;-webkit-font-smoothing:none;font-smooth:never}
strong,b{font-weight:400}
small{font-size:1em}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted)}
:focus-visible{outline:calc(1*var(--u)) dashed var(--gold);outline-offset:calc(2*var(--u))}

/* Pixel lettering. Sizes are whole multiples of ten art pixels' worth. */
.slab,.label,h1,h2,.btn,.tag{font-weight:400;text-transform:uppercase;-webkit-font-smoothing:none;font-smooth:never}
.slab,h1,h2,.btn{font-family:var(--slab)}
.label,.tag{font-family:var(--label)}
h1{font-size:calc(20*var(--u));line-height:1.1;letter-spacing:calc(1*var(--u));color:var(--gold-soft);text-shadow:0 calc(2*var(--u)) var(--ink)}
h2{font-size:calc(10*var(--u));line-height:1.3;letter-spacing:calc(1*var(--u));color:var(--gold)}
.tag{font-size:calc(10*var(--u));line-height:1;letter-spacing:calc(1*var(--u));color:var(--muted)}

/* Art. Every image is true pixel art and must never be smoothed. */
.spr,.px,.frame,.avatar img,.pet img{image-rendering:pixelated;image-rendering:crisp-edges}
.spr{position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.px{display:block;flex:none}
.star-box{display:inline-grid;place-items:center;width:var(--box);height:var(--box);flex:none}
.icon{display:inline-block;flex:none;width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));background:var(--art) center/100% 100% no-repeat;image-rendering:pixelated}

/* Nine-slice frames traced from the mockup. `framed` paints one behind an
   element; padding stays free of the corner size. */
.framed{position:relative;isolation:isolate}
.framed:before,.frame{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:calc(var(--c)*var(--u)) solid transparent;
  border-image:var(--frame) var(--c) fill/calc(var(--c)*var(--u)) stretch;image-rendering:pixelated}
.frame{z-index:0}
.f-panel{--frame:url('./assets/art/frame-panel.png');--c:12}
.f-chip{--frame:url('./assets/art/frame-chip-gold.png');--c:5}
.f-chip-lilac{--frame:url('./assets/art/frame-chip-lilac.png');--c:5}
.f-chip-small{--frame:url('./assets/art/frame-chip-small.png');--c:4}
.f-cream{--frame:url('./assets/art/frame-btn-cream.png');--c:8}
.f-lavender{--frame:url('./assets/art/frame-btn-lavender.png');--c:8}
.f-violet{--frame:url('./assets/art/frame-btn-violet.png');--c:6}
.f-input{--frame:url('./assets/art/frame-input.png');--c:4}
.f-input-gold{--frame:url('./assets/art/frame-input-gold.png');--c:4}

/* Padding keeps text clear of the frame's stepped corners. */
.panel{padding:calc(9*var(--u)) calc(12*var(--u))}
.panel--tight{padding:calc(8*var(--u)) calc(12*var(--u))}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:calc(6*var(--u));flex-wrap:wrap;margin-bottom:calc(6*var(--u))}
.row{display:flex;gap:calc(5*var(--u));align-items:center;flex-wrap:wrap}
.row--end{justify-content:flex-end}

.btn{--frame:url('./assets/art/frame-btn-violet.png');--c:6;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:calc(4*var(--u));
  min-height:calc(24*var(--u));padding:0 calc(10*var(--u)) calc(1*var(--u));font-size:calc(10*var(--u));line-height:1;letter-spacing:calc(1*var(--u));color:#fbe9c4;text-decoration:none;white-space:nowrap;
  transition:transform .08s steps(2),filter .08s steps(2)}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;border:calc(var(--c)*var(--u)) solid transparent;border-image:var(--frame) var(--c) fill/calc(var(--c)*var(--u)) stretch;image-rendering:pixelated}
.btn:hover:not(:disabled){transform:translateY(calc(-1*var(--u)));filter:brightness(1.1)}
.btn:active:not(:disabled){transform:translateY(calc(1*var(--u)));filter:brightness(.92)}
.btn--primary{--frame:url('./assets/art/frame-btn-cream.png');--c:8;color:#221a3c;min-height:calc(28*var(--u));padding-bottom:calc(3*var(--u))}
.btn--ghost,.btn--bad{--frame:url('./assets/art/frame-chip-gold.png');--c:5;color:var(--gold-soft);font-family:var(--label);min-height:calc(21*var(--u));padding:0 calc(8*var(--u))}
.btn--bad{color:var(--bad)}
.btn:disabled{filter:saturate(.3) brightness(.7);cursor:not-allowed}
.link{color:var(--muted);text-decoration:underline;text-underline-offset:.2em;padding:calc(2*var(--u))}
.link:hover{color:var(--text)}
.link--bad{color:var(--bad)}

input,select,textarea{background:var(--well);border:calc(1*var(--u)) solid var(--line);border-radius:0;padding:calc(3*var(--u)) calc(5*var(--u));min-width:0;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:calc(1*var(--u)) solid var(--gold);outline-offset:0}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
.notice{display:flex;gap:calc(5*var(--u));align-items:center;padding:calc(5*var(--u)) calc(6*var(--u));margin-bottom:calc(6*var(--u));background:var(--well);border:calc(1*var(--u)) solid var(--line)}
.notice--bad{color:#ffd0d6;background:#3a1a2e;border-color:var(--bad)}
.spinner{display:inline-block;width:calc(6*var(--u));height:calc(6*var(--u));flex:none;background:var(--gold);animation:blink .8s steps(2) infinite}
.tier-badge{background:var(--tier);color:var(--ink);padding:calc(2*var(--u)) calc(3*var(--u)) calc(1*var(--u));white-space:nowrap;font:calc(10*var(--u))/1 var(--label);text-transform:uppercase;-webkit-font-smoothing:none}

/* Avatar: the scholar and its owl, drawn in code (lib/avatar-sprites.js) as pictures one image pixel to a square.
   --w and --h are a picture's size in squares and --a the size of a square, so every square covers whole pixels. */
.avatar,.pet{--a:var(--u);position:relative;display:inline-block;flex:none;width:calc(var(--w)*var(--a));height:calc(var(--h)*var(--a))}
.avatar img,.pet img{position:absolute;inset:0;display:block;width:100%;height:100%}
.avatar--idle .avatar__top{animation:bob 1.6s steps(2) infinite}
.pet--idle{animation:hop 2.6s steps(1) infinite}
.is-cheering{animation:cheer .5s steps(4)}
.is-wincing{animation:wince .35s steps(4)}

/* Dialogs */
#modal-root{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:calc(8*var(--u));overflow:auto;background:#0b0a1ccc;animation:fade .15s steps(3)}
.dialog{width:min(calc(300*var(--u)),100%);padding:calc(10*var(--u)) calc(12*var(--u));animation:pop .22s steps(4)}
.dialog--wide{width:min(calc(380*var(--u)),100%)}
.dialog__head{display:flex;justify-content:space-between;align-items:center;gap:calc(6*var(--u));margin-bottom:calc(6*var(--u))}
.dialog__tools{display:flex;gap:calc(4*var(--u));flex:none}
.dialog__close{min-width:calc(21*var(--u));padding:0}
.dialog p+p,.dialog p+ul,.dialog ul+p{margin-top:calc(5*var(--u))}
.dialog__foot{display:flex;gap:calc(5*var(--u));justify-content:flex-end;flex-wrap:wrap;margin-top:calc(8*var(--u))}
.soon{display:grid;justify-items:center;text-align:center;gap:calc(6*var(--u))}
.soon__art{display:flex;align-items:flex-end;justify-content:center;gap:calc(2*var(--u));min-height:calc(40*var(--u))}
.help{list-style:decimal;padding-left:calc(12*var(--u));display:grid;gap:calc(4*var(--u))}
.field{display:grid;gap:calc(2*var(--u))}
.field>span{color:var(--muted)}
textarea{width:100%;resize:vertical}

#toast{position:fixed;left:50%;bottom:calc(20*var(--u));transform:translateX(-50%);z-index:2100;max-width:calc(100vw - 28px);padding:calc(6*var(--u)) calc(9*var(--u));animation:rise .25s steps(4)}

.fx-flash{position:fixed;inset:0;z-index:1500;pointer-events:none;background:#d7a8ff;animation:fx-soft .3s steps(4) forwards}
.fx-flash--big{animation:fx-big .6s steps(6) forwards}
.fx-flash--gold{background:#ffd76a;animation:fx-gold .6s steps(6) forwards}

@keyframes blink{50%{opacity:.35}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{opacity:0;transform:translateY(calc(6*var(--u)))}}
@keyframes rise{from{opacity:0;transform:translate(-50%,calc(4*var(--u)))}}
@keyframes bob{50%{transform:translateY(calc(1*var(--a)))}}
@keyframes hop{0%,82%,100%{transform:none}86%,94%{transform:translateY(calc(-2*var(--a)))}90%{transform:translateY(calc(-3*var(--a)))}}
@keyframes cheer{25%{transform:translateY(calc(-4*var(--a)))}50%{transform:translateY(calc(-6*var(--a)))}75%{transform:translateY(calc(-3*var(--a)))}}
@keyframes wince{25%{transform:translateX(calc(-2*var(--a)))}50%{transform:translateX(calc(2*var(--a)))}75%{transform:translateX(calc(-1*var(--a)))}}
@keyframes fx-soft{0%{opacity:.35}to{opacity:0}}
@keyframes fx-big{0%{opacity:.8;background:#fff}25%{opacity:.6;background:#ff8fd0}45%{opacity:.2;background:#ffd76a}60%{opacity:.35;background:#201d3f}to{opacity:0}}
@keyframes fx-gold{0%{opacity:.8;background:#fff}25%{opacity:.6;background:#fff3c4}45%{opacity:.3;background:#ffd76a}60%{opacity:.3;background:#4a3410}to{opacity:0}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.fx-flash{display:none!important}.snore{opacity:1!important}}