@font-face{font-family:Fredoka;src:url(../../../fonts/Fredoka.ttf)format("truetype");font-weight:300 700;font-display:swap}@font-face{font-family:Nunito;src:url(../../../fonts/Nunito.ttf)format("truetype");font-weight:200 1000;font-display:swap}:root{--sea-deep:#0f3b5c;--sea:#1b6fa8;--shallows:#34b2cf;--sand-wet:#d9b57c;--screen-scale:1;--text:#f4f6fb;--muted:#b8c2d6;--faint:#7e8aa3;--ink:#1d140e;--gold:#ffd54d;--sea-light:#3aa4e0;--sand:#f2d69e;--good:#6ee07a;--bad:#ff6b60;--surface-top:#22416b;--surface:#162c4c;--surface-bottom:#0c1b31;--surface-raised:#2a4a76;--inset-top:#07101e;--inset-bottom:#0d1b30;--bevel:#ffffff57;--edge:#ffffff1a;--edge-dark:#0000004d;--lip:#050d1a;--drop:#00000061;--scrim:#020814;--rarity-common:#c9d2e3;--rarity-rare:#4fb3ff;--rarity-epic:#b57bff;--rarity-legendary:#ff6a4d;--button-primary-top:#ffe27a;--button-primary-bottom:#f5b532;--button-primary-lip:#b77a12;--button-secondary-top:#4c95db;--button-secondary-bottom:#2f6fb1;--button-secondary-lip:#1b4673;--button-confirm-top:#5ccb6e;--button-confirm-bottom:#23894a;--button-confirm-lip:#145a2f;--button-danger-top:#ff8a78;--button-danger-bottom:#d9473b;--button-danger-lip:#8e2620;--button-ghost-top:#ffffff29;--button-ghost-bottom:#ffffff0f;--button-ghost-lip:#040c1896;--button-hud-top:#395780;--button-hud-bottom:var(--surface);--button-hud-lip:var(--lip);--button-disabled-top:#5a6478;--button-disabled-bottom:#434c5e;--button-disabled-lip:#262c38;--disabled-fade:68%;--font-display:"Fredoka", "Trebuchet MS", system-ui, sans-serif;--font-body:"Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--type-display:700 52px/1.1 var(--font-display);--type-title:700 32px/1.15 var(--font-display);--type-heading:600 22px/1.25 var(--font-display);--type-label-l:600 19px/1.2 var(--font-display);--type-label-m:600 16px/1.2 var(--font-display);--type-label-s:600 13px/1.2 var(--font-display);--type-body:700 15px/1.4 var(--font-body);--type-small:700 13px/1.35 var(--font-body);--type-caption:800 11px/1.3 var(--font-body);--type-number-xl:900 40px/1 var(--font-body);--type-number-l:900 28px/1 var(--font-body);--type-number-m:900 20px/1 var(--font-body);--type-number-s:900 14px/1 var(--font-body);--space-xs:4px;--space-s:8px;--space-m:12px;--space-l:16px;--space-xl:24px;--space-xxl:32px;--radius-m:12px;--radius-l:16px;--radius-xl:22px;--shadow-panel:0 6px 0 var(--lip), 0 18px 30px var(--drop);--shadow-card:0 5px 0 var(--lip), 0 10px 16px var(--drop);--bevel-border:linear-gradient(180deg, var(--bevel), var(--edge) 30%, var(--edge) 65%, var(--edge-dark));--inset-face:linear-gradient(180deg, var(--inset-top), var(--inset-bottom));--inset-edges:inset 0 2px 0 #0000008c, inset 0 0 0 1.5px #ffffff0a;--field-edges:inset 0 2px 0 #00000073, inset 0 -1.5px 0 #ffffff29, inset 0 0 0 1.5px #ffffff29;--focus-ring:3px solid var(--gold);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width>=1700px) and (height>=950px){:root{--screen-scale:1.25}}@media (width>=2300px) and (height>=1300px){:root{--screen-scale:1.6}}*{box-sizing:border-box}html,body{background:var(--sea-deep);height:100%;color:var(--text);font:var(--type-body);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;margin:0}html{scroll-padding-block:var(--space-xl)}button,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:var(--focus-ring);outline-offset:3px}.page{isolation:isolate;flex-direction:column;min-height:100%;display:flex;position:relative}:where(.page)>main{z-index:1;width:100%;max-width:1120px;padding:max(var(--space-l), env(safe-area-inset-top)) max(var(--space-l), env(safe-area-inset-right)) var(--space-xxl) max(var(--space-l), env(safe-area-inset-left));gap:var(--space-l);flex-direction:column;flex:1;margin:0 auto;display:flex;position:relative}@media (height<=520px){:where(.page)>main{padding-top:max(var(--space-s), env(safe-area-inset-top))}}:where(.page) .columns{gap:var(--space-l);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);display:grid}.scale-with-screen{zoom:var(--screen-scale)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.display{font:var(--type-display);letter-spacing:.04em;color:var(--gold);text-shadow:0 .015em 0 color-mix(in srgb, var(--gold) 88%, var(--ink)), 0 .03em 0 color-mix(in srgb, var(--gold) 80%, var(--ink)), 0 .045em 0 color-mix(in srgb, var(--gold) 72%, var(--ink)), 0 .06em 0 color-mix(in srgb, var(--gold) 64%, var(--ink)), 0 .075em 0 color-mix(in srgb, var(--gold) 52%, var(--ink)), 0 .09em 0 color-mix(in srgb, var(--gold) 40%, var(--ink)), 0 .105em 0 var(--ink), 0 .2em .24em #00000073;margin:0;position:relative}.display .gloss{background:linear-gradient(180deg, #fff8d6 8%, var(--gold) 52%, var(--button-primary-bottom) 92%);color:#0000;text-shadow:none;pointer-events:none;-webkit-background-clip:text;background-clip:text;position:absolute;inset:0}.title{font:var(--type-title);color:var(--gold);text-shadow:0 3px 0 color-mix(in srgb, currentColor 40%, var(--ink));margin:0}.heading{font:var(--type-heading);color:var(--gold);text-shadow:0 2px 0 color-mix(in srgb, currentColor 40%, var(--ink));margin:0}.caption{font:var(--type-caption);text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}.panel{--face:linear-gradient(180deg, var(--surface-top), var(--surface) 45%, var(--surface-bottom));border-radius:var(--radius-xl);padding:var(--space-l);background:var(--face) padding-box, var(--bevel-border) border-box, var(--face) border-box;box-shadow:var(--shadow-panel);border:2px solid #0000}.inset{border-radius:var(--radius-m);background:var(--inset-face);box-shadow:var(--inset-edges)}.scroll-fade{--fade-length:24px;overscroll-behavior:contain;scroll-padding-block:var(--fade-length);position:relative;overflow-y:auto}@property --fade-above{syntax:"<length>";inherits:false;initial-value:0}@property --fade-below{syntax:"<length>";inherits:false;initial-value:0}@supports (animation-timeline:scroll()){.scroll-fade{-webkit-mask-image:linear-gradient(180deg, transparent, #000 var(--fade-above), #000 calc(100% - var(--fade-below)), transparent);mask-image:linear-gradient(180deg, transparent, #000 var(--fade-above), #000 calc(100% - var(--fade-below)), transparent);animation:linear both scroll-fade;animation-timeline:scroll(self)}}@keyframes scroll-fade{0%{--fade-above:0px;--fade-below:var(--fade-length)}10%{--fade-above:var(--fade-length)}90%{--fade-below:var(--fade-length)}to{--fade-above:var(--fade-length);--fade-below:0px}}.chip{border:1.5px solid var(--edge);border-top-color:var(--bevel);border-bottom-color:var(--edge-dark);border-radius:var(--radius-m);background:linear-gradient(180deg, var(--surface-top), var(--surface-bottom));box-shadow:0 3px 0 var(--lip), 0 6px 10px #0000004d}.card{--face:linear-gradient(180deg, var(--surface-raised), color-mix(in srgb, var(--surface-raised), var(--surface)) 40%, var(--surface));--border:var(--bevel-border);border-radius:var(--radius-l);background:var(--face) padding-box, var(--border) border-box, var(--face) border-box;box-shadow:var(--shadow-card);border:2px solid #0000}.card.gold{--face:linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 76%, var(--gold)), color-mix(in srgb, var(--surface-raised), var(--surface)) 40%, var(--surface));--border:linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, white), var(--gold) 35%, color-mix(in srgb, var(--gold) 65%, var(--lip)));box-shadow:0 0 20px 1px color-mix(in srgb, var(--gold) 50%, transparent), 0 5px 0 color-mix(in srgb, var(--gold) 28%, var(--lip)), 0 10px 16px var(--drop)}.card.spotlit{--spot:color-mix(in srgb, var(--sea-light) 34%, transparent);background:radial-gradient(ellipse 60% 46% at 50% 38%, var(--spot), transparent 72%), var(--face) padding-box, var(--border) border-box, var(--face) border-box}.card.spotlit.gold{--spot:color-mix(in srgb, var(--gold) 30%, transparent)}.list-row{border-radius:var(--radius-m);background:linear-gradient(180deg, var(--surface-raised), var(--surface));box-shadow:inset 0 1.5px 0 #ffffff1f, 0 3px 0 var(--lip)}.list-row.gold{background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 24%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-raised), var(--surface));box-shadow:inset 0 0 0 2px var(--gold), inset 0 3.5px 0 #ffffff29, 0 3px 0 color-mix(in srgb, var(--gold) 30%, var(--lip)), 0 0 14px color-mix(in srgb, var(--gold) 35%, transparent)}.medallion{--tint:var(--gold);--on-tint:var(--ink);--face:linear-gradient(180deg, color-mix(in srgb, var(--tint) 55%, white), color-mix(in srgb, var(--tint) 92%, var(--ink)));aspect-ratio:1;background:var(--face) padding-box, linear-gradient(180deg, #ffffffb3, var(--edge) 30%, var(--edge) 65%, color-mix(in srgb, var(--tint) 50%, var(--ink))) border-box, var(--face) border-box;width:40px;box-shadow:0 4px 0 color-mix(in srgb, var(--tint) 55%, var(--ink)), 0 8px 12px var(--drop);color:var(--on-tint);border:2px solid #0000;border-radius:50%;flex:none;place-items:center;display:inline-grid}.button{--tone-top:var(--button-secondary-top);--tone-bottom:var(--button-secondary-bottom);--tone-lip:var(--button-secondary-lip);--tone-label:var(--text);--face-top:var(--tone-top);--face-bottom:var(--tone-bottom);--face-lip:var(--tone-lip);--label:var(--tone-label);--lip-depth:4px;--fill-top:var(--face-top);--fill-bottom:var(--face-bottom);--glow:0 0 transparent;--lip-shadow:0 calc(var(--lip-depth) + 3px) 8px #0000004d, 0 var(--lip-depth) 0 var(--face-lip);--sink:0px;--scale:1;--fill:linear-gradient(180deg, var(--fill-top), var(--fill-bottom));justify-content:center;align-items:center;gap:var(--space-s);border-radius:var(--radius-m);background:var(--fill) padding-box, linear-gradient(180deg, #ffffff80, var(--edge) 30%, var(--edge) 65%, color-mix(in srgb, var(--face-lip) 70%, transparent)) border-box, var(--fill) border-box;min-height:36px;box-shadow:var(--glow), var(--lip-shadow);color:var(--label);font:var(--type-label-m);text-shadow:0 1.5px #0000004d;white-space:nowrap;-webkit-user-select:none;user-select:none;transform:translateY(var(--sink)) scale(var(--scale));border:2px solid #0000;padding:5px 14px;text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out;display:inline-flex}.button.primary{--tone-top:var(--button-primary-top);--tone-bottom:var(--button-primary-bottom);--tone-lip:var(--button-primary-lip);--tone-label:var(--ink);text-shadow:none}.button.confirm{--tone-top:var(--button-confirm-top);--tone-bottom:var(--button-confirm-bottom);--tone-lip:var(--button-confirm-lip)}.button.danger{--tone-top:var(--button-danger-top);--tone-bottom:var(--button-danger-bottom);--tone-lip:var(--button-danger-lip)}.button.hud{--tone-top:var(--button-hud-top);--tone-bottom:var(--button-hud-bottom);--tone-lip:var(--button-hud-lip)}.button.ghost{--tone-top:var(--button-ghost-top);--tone-bottom:var(--button-ghost-bottom);--tone-lip:var(--button-ghost-lip);background:var(--fill) padding-box;border-color:#ffffff4d #ffffff24 #ffffff24}.button.small{--lip-depth:3px;min-height:28px;font:var(--type-label-s);border-radius:9px;padding:3px 10px}.button.large{--lip-depth:5px;min-height:46px;font:var(--type-label-l);border-radius:14px;padding:8px 20px}.button:focus-visible:not(:disabled){--fill-top:color-mix(in srgb, var(--face-top), white 16%);--fill-bottom:color-mix(in srgb, var(--face-bottom), white 10%);--glow:0 calc(var(--lip-depth) / 2) 14px 1px color-mix(in srgb, var(--gold) 50%, transparent);--scale:1.04}@media (hover:hover){.button:hover:not(:disabled){--fill-top:color-mix(in srgb, var(--face-top), white 16%);--fill-bottom:color-mix(in srgb, var(--face-bottom), white 10%);--glow:0 calc(var(--lip-depth) / 2) 14px 1px color-mix(in srgb, var(--gold) 50%, transparent);--scale:1.04}}.button:active:not(:disabled){--fill-top:var(--face-bottom);--fill-bottom:color-mix(in srgb, var(--face-top) 40%, var(--face-bottom));--glow:0 0 transparent;--lip-shadow:0 2px 4px #0000004d, 0 1px 0 var(--face-lip);--sink:calc(var(--lip-depth) - 1px);--scale:.97}.button:disabled{--face-top:color-mix(in srgb, var(--tone-top), var(--button-disabled-top) var(--disabled-fade));--face-bottom:color-mix(in srgb, var(--tone-bottom), var(--button-disabled-bottom) var(--disabled-fade));--face-lip:color-mix(in srgb, var(--tone-lip), var(--button-disabled-lip) var(--disabled-fade));--label:color-mix(in srgb, var(--tone-label) 55%, transparent);--lip-shadow:0 calc(var(--lip-depth) / 2) 0 var(--face-lip);text-shadow:none;cursor:not-allowed}.keycap{min-width:20px;height:20px;color:var(--ink);font:var(--type-caption);text-shadow:none;white-space:nowrap;background:linear-gradient(#fff,#d6dceb);border:1px solid #ffffff73;border-radius:6px;justify-content:center;align-items:center;padding:0 6px;display:inline-flex;box-shadow:0 2px #66738c}@media (hover:none) and (pointer:coarse){.button .keycap{display:none}}.pill{--tint:var(--muted);align-items:center;gap:var(--space-xs);padding:1px var(--space-s);border:1px solid color-mix(in srgb, var(--tint) 40%, transparent);background:color-mix(in srgb, var(--tint) 16%, transparent);color:var(--tint);font:var(--type-small);white-space:nowrap;border-radius:999px;display:inline-flex}.badge{--tint:var(--gold);--on-tint:var(--ink);background:linear-gradient(180deg, color-mix(in srgb, var(--tint), white 25%), var(--tint));min-width:18px;height:18px;box-shadow:0 2px 0 color-mix(in srgb, var(--tint) 45%, var(--ink));color:var(--on-tint);font:var(--type-caption);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:3px;padding:0 6px;display:inline-flex}.good{--tint:var(--good)}.bad{--tint:var(--bad);--on-tint:var(--text)}.gold{--tint:var(--gold)}.sea{--tint:var(--sea-light);--on-tint:var(--text)}.sand{--tint:var(--sand)}.orchid{--tint:var(--rarity-epic);--on-tint:var(--text)}.field{min-width:0;height:40px;padding:0 var(--space-m);border-radius:var(--radius-m);background:var(--inset-face);box-shadow:var(--field-edges);color:var(--text);font:var(--type-label-l);border:0;transition:box-shadow .12s ease-out}.field::placeholder{color:var(--muted);opacity:.8}.field:focus{box-shadow:var(--field-edges), inset 0 0 0 2px var(--gold), 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent);outline:none}.pop-in{animation:pop-in .32s cubic-bezier(.2, .9, .3, 1.15) var(--delay,0s) backwards}@keyframes pop-in{0%{opacity:0;transform:translateY(10px)scale(.92)}}.bob{animation:2.4s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-8px)rotate(-6deg)}}@media (prefers-reduced-motion:reduce){.pop-in,.bob{animation:none}}
