@layer reset,base,components;@layer reset{*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,p{margin:0}}@layer base{:root{color-scheme:light dark;--bg: light-dark(#fbfbfa, #16161a);--surface: light-dark(#ffffff, #1f1f25);--fg: light-dark(#1c1b19, #e8e8ea);--fg-muted: light-dark(#5f5e5b, #a1a1aa);--border: light-dark(#e3e2df, #2e2e36);--accent: light-dark(#8b2f1d, #e0714f);--space: 1rem;--measure: 64rem;--radius: .5rem}html{height:100%}body{height:100%;display:flex;flex-direction:column;background-color:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}main,#app,#outlet{flex:1;display:flex;flex-direction:column;min-height:0}#outlet{width:100%;max-width:var(--measure);margin-inline:auto}a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}}@layer components{nav-bar{display:block;flex:none;background-color:var(--surface);border-bottom:1px solid var(--border)}nav-bar #mainContainer{width:100%;max-width:var(--measure);margin-inline:auto;padding:calc(var(--space) * .75) var(--space);display:flex;align-items:center}nav-bar #navlinkContainer{display:flex;gap:calc(var(--space) * 1.5);margin:auto}nav-bar a{color:var(--fg-muted);text-decoration:none;font-weight:500;padding-block:.25rem;border-bottom:2px solid transparent;transition:color .12s ease,border-color .12s ease}nav-bar a:hover{color:var(--fg)}nav-bar a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}}@layer components{about-view{display:flex;flex-direction:column;gap:var(--space);align-items:start;min-height:0;padding-block:calc(var(--space) * 2);padding-inline:var(--space);max-width:46rem}about-view:before{content:"";width:3.5rem;height:3px;border-radius:999px;background-color:var(--accent)}about-view p{max-width:60ch;color:var(--fg-muted);font-size:clamp(1.0625rem,.95rem + .6vw,1.25rem);line-height:1.7;text-wrap:pretty;margin:0}about-view p:first-of-type{color:var(--fg);font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);line-height:1.45;letter-spacing:-.01em;text-wrap:balance}about-view strong{color:var(--accent);font-weight:600}about-view a{text-underline-offset:.2em;text-decoration-thickness:1px;transition:text-decoration-color .12s ease}about-view a:hover{text-decoration-color:transparent}@media(prefers-reduced-motion:no-preference){about-view{transition:opacity .26s ease,translate .26s ease;opacity:1;translate:0 0}@starting-style{about-view{opacity:0;translate:0 .75rem}}}}@layer components{home-view{display:flex;flex-direction:column;gap:var(--space);align-items:start;flex:1;min-height:0}home-view h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}home-view p{max-width:42ch;color:var(--fg-muted);font-size:1.125rem;text-wrap:pretty}}@layer components{spinner-view{--alliance-deep: #0b1628;--alliance-mid: #1b3457;--alliance-metal: #cdab5c;--horde-deep: #140708;--horde-mid: #4a1a12;--horde-metal: #c07a3c;--wheel-ink: #f4e9cd;display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;width:100%}spinner-view #spinnerContainer{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--space);align-items:center;justify-items:center;width:min(80%,34rem,max(15rem,100dvh - 13rem));margin:auto}spinner-view #spinnerButtonContainer{display:contents}spinner-view #spinnerContainer:before,spinner-view #spinnerContainer:after{content:"";position:absolute;top:0;left:50%;z-index:1;width:1.25rem;height:.9rem;background-color:var(--accent);clip-path:polygon(50% 100%,0 0,100% 0);transform:translate(-50%);pointer-events:none}spinner-view #spinnerContainer:before{grid-column:1 / 2;grid-row:1 / 2;background-color:var(--alliance-metal)}spinner-view #spinnerContainer:after{grid-column:2 / 3;grid-row:1 / 2;background-color:var(--horde-metal)}spinner-view #spinnerLeft,spinner-view #spinnerRight{--slice: calc(360deg / var(--item-count, 1));position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--border)}spinner-view #spinnerLeft{--wheel-metal: var(--alliance-metal);background:radial-gradient(circle at 50% 40%,var(--alliance-mid) 0%,var(--alliance-deep) 72%);border-color:var(--alliance-metal)}spinner-view #spinnerRight{--wheel-metal: var(--horde-metal);background:radial-gradient(circle at 50% 40%,var(--horde-mid) 0%,var(--horde-deep) 72%);border-color:var(--horde-metal)}spinner-view #spinnerLeft:after,spinner-view #spinnerRight:after{content:"";position:absolute;inset:13%;border-radius:50%;border:1px solid color-mix(in srgb,var(--wheel-metal) 32%,transparent);pointer-events:none}spinner-view #spinnerButtonElemLeft,spinner-view #spinnerButtonElemRight{width:100%;font:inherit;font-weight:500;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding-block:calc(var(--space) * .5);padding-inline:var(--space);cursor:pointer;transition:border-color .12s ease,color .12s ease,transform 80ms ease}spinner-view #spinnerButtonElemLeft:hover,spinner-view #spinnerButtonElemRight:hover{color:var(--accent);border-color:var(--accent)}spinner-view #spinnerButtonElemLeft:active,spinner-view #spinnerButtonElemRight:active{transform:translateY(1px)}spinner-view button:disabled{opacity:.5;cursor:not-allowed}spinner-view .spinnerItem{position:absolute;inset:0;transform:rotate(calc((var(--index) + .5) * var(--slice)));display:flex;align-items:flex-start;justify-content:center;padding-top:calc(var(--space) * .5);font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;color:var(--wheel-ink);text-shadow:0 1px 2px rgb(0 0 0 / .6)}spinner-view .spinnerItem:before{content:"";position:absolute;left:50%;top:0;width:1px;height:50%;background-color:color-mix(in srgb,var(--wheel-metal) 45%,transparent);transform-origin:bottom left;transform:rotate(calc(var(--slice) / -2))}@media(width<32rem){spinner-view{padding-block:var(--space)}spinner-view #spinnerContainer{grid-template-columns:1fr;grid-template-rows:repeat(4,auto);width:min(90%,20rem,max(11rem,50dvh - 7rem));gap:calc(var(--space) * .75)}spinner-view #spinnerLeft{grid-row:1}spinner-view #spinnerButtonElemLeft{grid-row:2}spinner-view #spinnerRight{grid-row:3}spinner-view #spinnerButtonElemRight{grid-row:4}spinner-view #spinnerButtonElemLeft,spinner-view #spinnerButtonElemRight{min-height:44px}spinner-view #spinnerContainer:before{grid-column:1 / 2;grid-row:1 / 2}spinner-view #spinnerContainer:after{grid-column:1 / 2;grid-row:3 / 4}}}@layer components{card-component{display:contents;width:min(90vw,26rem)}card-component #cardDialog{padding:0;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--surface);color:var(--fg);max-height:90dvh;overflow:hidden}card-component #cardDialog::backdrop{background-color:#0009}card-component #cardContainer{display:flex;flex-direction:column;max-height:90dvh;min-height:0}card-component #cardImage{display:block;width:100%;min-height:0;aspect-ratio:15 / 22;object-fit:contain;background-color:var(--bg)}card-component #cardFooter{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space);padding:calc(var(--space) * .75) var(--space);border-top:1px solid var(--border)}card-component #cardLabel{font-weight:600}card-component #cardCloseButton{flex:none;min-height:44px;padding-inline:var(--space);border:1px solid var(--border);border-radius:calc(var(--radius) * .75);background-color:transparent;color:var(--fg-muted);font:inherit;font-weight:500;cursor:pointer;transition:color .12s ease,border-color .12s ease}card-component #cardCloseButton:hover{color:var(--fg);border-color:var(--fg-muted)}@media(prefers-reduced-motion:no-preference){card-component #cardDialog{transition:opacity .16s ease,translate .16s ease,overlay .16s allow-discrete,display .16s allow-discrete;opacity:1;translate:0 0}card-component #cardDialog::backdrop{transition:opacity .16s ease,overlay .16s allow-discrete,display .16s allow-discrete;opacity:1}@starting-style{card-component #cardDialog{opacity:0;translate:0 1rem}card-component #cardDialog::backdrop{opacity:0}}card-component #cardDialog:not([open]){opacity:0;translate:0 1rem}card-component #cardDialog:not([open])::backdrop{opacity:0}}}
/*# sourceMappingURL=main.css.map */