@font-face{font-family:'MarioUI';src:url('../assets/MarioFontTTF.ttf') format('truetype');font-display:block}
html,body{margin:0;padding:0}
body{background:#5c94fc;font-family:'MarioUI',ui-monospace,monospace;-webkit-font-smoothing:none}
a{color:#1b4fd8}
a:hover{color:#d02a1e}
img,div{image-rendering:pixelated}
@keyframes drift{from{transform:translateX(-24vw)}to{transform:translateX(124vw)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spin8{from{background-position-x:-192px}to{background-position-x:0}}

.tab-btn{cursor:pointer;display:flex;align-items:center;gap:9px;font:20px 'MarioUI';letter-spacing:1px;border:5px solid #17161d;border-bottom-width:0;background:#c9a95f;color:#fdf3d7;text-shadow:2px 2px 0 rgba(23,22,29,.55);padding:9px 16px;transform:translateY(4px)}
.tab-btn.active{background:#fdf3d7;color:#17161d;text-shadow:none;padding:11px 18px 13px;transform:translateY(0)}
.tab-btn:hover{filter:brightness(1.08)}
.tab-chip{width:26px;height:26px;background:url('../assets/option.png') 0 0/640px 128px}
.tab-badge{font:14px 'MarioUI';opacity:.85}

.discord-btn{width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font:19px 'MarioUI';letter-spacing:1px;padding:11px 16px;border:5px solid #17161d;background:#5865f2;color:#fff;text-shadow:2px 2px 0 #17161d;box-shadow:0 6px 0 rgba(23,22,29,.45)}
.discord-btn:hover{filter:brightness(1.1)}
.discord-btn:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(23,22,29,.45)}
.discord-btn[disabled]{cursor:progress;filter:grayscale(.5)}
.discord-btn::before{content:'';width:24px;height:24px;flex:none;background:#fff;-webkit-mask:var(--discord-mark) center/contain no-repeat;mask:var(--discord-mark) center/contain no-repeat}

.logout-btn{cursor:pointer;font:13px 'MarioUI';letter-spacing:1px;padding:4px 9px;border:3px solid #17161d;background:#c9a95f;color:#fdf3d7;text-shadow:1px 1px 0 rgba(23,22,29,.55)}
.logout-btn:hover{background:#d02a1e}

.auth-gate{display:grid;justify-items:center;gap:14px;text-align:center;padding:40px 20px;border:4px dashed #c9a95f;background:#fff8e2}
.auth-gate .discord-btn{width:auto;min-width:270px}
.auth-gate-icon{width:44px;height:44px;background:url('../assets/qblock.png') center/contain no-repeat;animation:bob 2.4s steps(2,end) infinite}

/* The gated history content sets its own inline `display`, and the gate
   itself gets `display:grid` from .auth-gate - both outrank the `hidden`
   attribute's UA-default `display:none`, even though JS toggles `hidden`
   correctly. Only an author rule with !important can beat an inline style. */
.auth-gate[hidden],
#history-content[hidden],
#profile-loading[hidden],
#profile-card[hidden]{display:none!important}

#auth-error{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;max-width:min(92vw,460px);font:15px/1.45 'MarioUI';color:#fff;background:#d02a1e;border:5px solid #17161d;box-shadow:6px 6px 0 rgba(9,8,20,.45);padding:11px 15px;text-align:center}

.back-link{display:inline-block;font:15px 'MarioUI';letter-spacing:1px;color:#fdf3d7;text-decoration:none;background:#17161d;border:4px solid #fff;padding:5px 12px}
.back-link:hover{color:#ffd83d;background:#2b2937}

.map-link{display:inline-flex;align-items:center;gap:9px;font:17px 'MarioUI';letter-spacing:1px;color:#17161d;text-decoration:none;background:#ffd83d;border:4px solid #17161d;padding:7px 14px;box-shadow:0 5px 0 rgba(23,22,29,.45)}
.map-link:hover{color:#17161d;filter:brightness(1.07)}
.map-link:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(23,22,29,.45)}
.map-link::after{content:'';width:22px;height:22px;background:url('../assets/option.png') -66px 0/640px 128px}

.here-card{display:flex;flex-wrap:wrap;align-items:center;gap:14px;border:4px solid #17161d;background:#ffe9a8;box-shadow:6px 6px 0 rgba(23,22,29,.25);padding:13px 15px}

.board-row{text-decoration:none;color:inherit;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border:4px solid #17161d;background:#fff;box-shadow:5px 5px 0 rgba(23,22,29,.22)}
.board-row:hover{filter:brightness(1.05)}

/* Narrow screens cannot fit a tier name inside its scale segment, and the
   trailing open-end tick collides with the one before it. The cards underneath
   already name every tier and repeat every range. */
@media (max-width:640px){.scale-label,.scale-tick-end{display:none}}

:root{--discord-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M524.5 69.8a1.5 1.5 0 0 0-.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0-1.9.9 337.5 337.5 0 0 0-14.9 30.6 447.8 447.8 0 0 0-134.4 0 309.5 309.5 0 0 0-15.1-30.6 1.9 1.9 0 0 0-1.9-.9 483.7 483.7 0 0 0-119.6 37.1 1.7 1.7 0 0 0-.8.7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 480.1a1.9 1.9 0 0 0 2.1-.7A348 348 0 0 0 208.1 430.4a1.9 1.9 0 0 0-1-2.6 321.2 321.2 0 0 1-45.9-21.9 1.9 1.9 0 0 1-.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9.2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1-.2 3.1 301.4 301.4 0 0 1-45.9 21.8 1.9 1.9 0 0 0-1 2.6 391 391 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1.7A486 486 0 0 0 610.7 405.8a1.9 1.9 0 0 0 .8-1.4c12.2-126.9-20.6-237-87-334.6zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.6-23.4 59.2-52.8 59.2zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.3-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.6-23.1 59.2-52.8 59.2z'/%3E%3C/svg%3E")}