:root{--bg-z0:#171625;--bg-z1:#1f1d35;--bg-z2:#2b2845;--bg-z2-40:#2b2845ee;--bg-z2-60:#2b2845cc;--bg-z3:#412968;--bg-z3-40:#412968ee;--bg-z4:#413e57;--bg-z5:#65418b;--gold:#fbcb7a;--gold-darker:#9b754f;--color-dark:#9893af;--color-light:#f0f0f1;--app-width:400px}html{height:100%}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100vh;color:var(--accent-grey);background:var(--bg-z0);flex-direction:column;justify-content:center;align-items:center;font-size:1.1rem;display:flex}a{color:var(--bg-z5);text-align:center;cursor:pointer;text-decoration:none}*{box-sizing:border-box;margin:0;padding:0}h1{text-align:center;letter-spacing:1.5px;color:var(--color-light);font-size:1.8rem;position:relative}h1:before{content:"";background:radial-gradient(circle,#fbcb7a 0%,#9b754f 48%,#2b2845 100%);width:40px;height:3px;position:absolute;top:calc(50% - 2.5px);left:30px}h1:after{content:"";background:radial-gradient(circle,#fbcb7a 0%,#9b754f 48%,#2b2845 100%);width:40px;height:3px;position:absolute;top:50%;right:30px}button{cursor:pointer;color:var(--gold);background-color:var(--bg-z3);border:1px solid var(--gold);letter-spacing:1.5px;border-radius:4px;justify-content:center;align-items:center;height:60px;padding:8px;font-size:1.2rem;font-weight:700;display:flex;position:relative}button img{width:auto;height:90%;margin-left:-20px;margin-right:8px}button:disabled{opacity:.35;cursor:not-allowed}button:before{content:"";border:1px solid var(--gold-darker);border-radius:4px;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:5px;left:5px}label{white-space:nowrap;justify-content:left;align-items:center;font-weight:500;display:flex}label,input{height:32px;opacity:unset;border-radius:4px}input{border:1px solid var(--bg-z4);background:var(--bg-z1);width:100%;color:var(--color-light);text-align:center;padding:8px}input:focus,input:active{border:2px solid var(--bg-z3);outline:var(--bg-z3)}.main-container{width:var(--app-width);background:var(--bg-z1);border:1px solid var(--bg-z4);background-image:url(/bg-castle.png);background-position:50%;background-size:cover;border-bottom:none;border-radius:8px 8px 0 0;flex-direction:column;height:auto;min-height:600px;display:flex}@media screen and (max-width:768px){.main-container{margin-top:24px}}.spacer{width:550px;height:16px}.use-font{font-family:"Jersey 25",sans-serif;font-style:normal;font-weight:400}.dark-text{color:var(--bg-z0)}.bg-dark{background:var(--bg-z1)!important;color:var(--color-light)!important}.color-dark{color:var(--color-dark)}.color-light{color:var(--color-light)}.avatar-row{flex-direction:column;justify-content:center;align-items:center;display:flex}.avatar-row a{margin-top:8px}.avatar-wrap{display:flex;position:relative}.level-badge{border:3px solid var(--gold-darker);background:var(--gold-darker);color:#fff;text-align:center;border-radius:999px;min-width:34px;padding:2px 6px;font-size:22px;line-height:1.1;position:absolute;bottom:-4px;right:-4px}.avatar{border:4px solid var(--gold-darker);border-radius:50%;grid-column:2/4;width:128px}.navbar{height:80px;width:var(--app-width);background-color:var(--bg-z2-40);border:1px solid var(--bg-z4);border-radius:0 0 8px 8px;grid-template-columns:repeat(5,1fr);margin-bottom:24px;padding:8px;display:grid}.navbar a,.navbar .item>button{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}:is(.navbar a,.navbar .item>button) img{width:40px;height:40px}.navbar .item>button{color:var(--bg-z5);font:inherit;letter-spacing:normal;background:0 0;border:none;padding:0}.navbar .item>button img{margin:0}.navbar .item>button:before{content:none}.drawer-backdrop{z-index:100;background:#0009;justify-content:center;display:flex;position:fixed;inset:0}.drawer{width:var(--app-width);background:var(--bg-z2-60);max-width:100%;height:100%;color:var(--color-light);padding:16px;overflow-y:auto}.drawer h2{color:var(--gold);margin:12px 0 4px}.drawer a{height:auto;color:var(--color-light);border-bottom:1px solid var(--bg-z4);flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:4px 8px;font-size:1.2rem;text-decoration:none;display:flex}.drawer a img{width:32px;height:32px}.drawer .drawer-close{margin-left:auto;display:block}.overlay{background-color:var(--bg-z2-60);color:var(--color-light);flex-direction:column;height:100%;min-height:600px;padding:16px;display:flex}
