*,*::before,*::after{
  box-sizing:border-box;
  font-family:"Rubik",Arial,sans-serif !important;
}

html,body{margin:0;min-height:100%}
[hidden]{display:none!important}
button,input{font:inherit}
.app.dinnerbone{transform:rotate(180deg)}

@view-transition{navigation:auto}
.page-shell{view-transition-name:page-shell}
::view-transition-group(page-shell){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(page-shell){animation:page-out .14s ease both}
::view-transition-new(page-shell){animation:page-in .18s .06s ease both}

@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}

body.landing-page{
  min-height:100dvh;
  display:grid;
  place-items:center;
}

.app.landing{
  max-width:560px;
  min-height:260px;
  margin:0;
}

.app.landing .header{
  min-height:260px;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center;
  gap:14px;
  padding:32px;
  border-bottom:0;
}

.app.landing .brand{display:none}
.app.landing .search{order:1;width:min(420px,100%);flex:none}
.app.landing .header-links{
  order:2;
}

.app:not(.landing) .header{gap:8px!important;padding:8px 12px!important}

.header-links a{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #27272a;
  border-radius:6px;
  background:#111113;
  color:#a1a1aa;
  transition:border-color .15s,background .15s,color .15s;
}

.header-links a:hover{border-color:#3f3f46;background:#18181b;color:#fff}
.header-links svg{width:14px;height:14px}

.app.landing.waiting{position:relative;overflow:hidden}
.app.landing.waiting .header{opacity:0;pointer-events:none}
.app.landing.waiting .profile-loading{
  position:absolute;
  z-index:5;
  inset:0;
  min-height:0;
  opacity:1;
  animation:profile-dissolve .18s ease both;
}

@keyframes profile-dissolve{
  from{opacity:0}
  to{opacity:1}
}

.search button svg{width:15px;height:15px}

.profile-loading{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:#0a0a0b;
}

.profile-loading strong{color:#e4e4e7;font-size:12px;font-weight:500}
.profile-loading>span:last-child{color:#52525b;font-size:8px}
.profile-loading.failed .loading-ring{border-color:#3f1d24;border-top-color:#f87171;animation:none}
.profile-loading.failed strong{color:#f87171}
.profile-loading.unused .loading-ring,
.profile-loading.unused>span:last-child{display:none}
.profile-loading.unused strong{color:#a1a1aa}

.loading-ring{
  width:24px;
  height:24px;
  margin-bottom:3px;
  border:2px solid #27272a;
  border-top-color:#d946ef;
  border-radius:50%;
  animation:loading-turn .7s linear infinite;
}

@keyframes loading-turn{to{transform:rotate(360deg)}}

.profile{
  min-height:54px;
  display:flex;
  align-items:center;
  padding:10px 16px!important;
  background:#0a0a0b!important;
}

#name{font-size:22px;font-weight:600}
.collection-grid{display:block;padding:13px 16px;background:#09090a!important}
.hats-panel,.tags-panel{padding:0!important;background:transparent!important}
.collection-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:14px}

.presence-dot{
  position:relative;
  width:8px;
  height:8px;
  flex:0 0 auto;
  padding:0;
  border:0;
  border-radius:999px;
  background:#52525b;
  cursor:help;
}

.presence-dot.online{
  background:#4ade80;
}

.presence-dot::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:50;
  left:50%;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:min(250px,80vw);
  padding:6px 8px;
  transform:translate(-50%,3px);
  border:1px solid #3f3f46;
  border-radius:5px;
  background:#18181b;
  color:#f4f4f5;
  font-size:10px;
  font-weight:500;
  line-height:1.3;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s,transform .12s;
}

.presence-dot:hover::after,
.presence-dot:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.section-title{
  display:flex;
  align-items:center;
  gap:6px;
  color:#a1a1aa;
  font-size:9px;
  font-weight:600;
}
.section-title svg{width:12px;height:12px;color:#71717a}

.hats,.tags{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.hats{gap:6px 5px;padding-top:7px}
#hats{flex-wrap:nowrap;overflow:hidden}
.tags{gap:4px;padding-top:7px}
.hats-empty{color:#52525b;font-size:10px}

.hat-pages{
  display:grid;
  grid-template-columns:24px auto 24px;
  align-items:center;
  gap:6px;
  width:max-content;
  margin:5px auto 0;
  color:#71717a;
  font-size:8px;
  font-weight:600;
}

.hat-pages[hidden]{display:none}
.hat-pages button{
  width:24px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid #27272a;
  border-radius:5px;
  background:#111113;
  padding:0;
  color:#a1a1aa;
  cursor:pointer;
}
.hat-pages span{min-width:36px;text-align:center;white-space:nowrap}
.hat-pages button:hover{border-color:#3f3f46;background:#18181b;color:#fff}
.hat-pages button:disabled{border-color:#1f1f22;background:#0d0d0f;color:#3f3f46;cursor:default}

.tag{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  max-width:100%;
  padding:3px 7px;
  overflow-wrap:anywhere;
  border:1px solid color-mix(in srgb,var(--tag-color) 72%,#fff 8%);
  border-radius:5px;
  background:color-mix(in srgb,var(--tag-color) 54%,#09090b 46%);
  color:#fafafa;
  font-size:8px;
  font-weight:650;
  line-height:1.1;
}

.tag.none{--tag-color:#27272a;color:#71717a}

.hat{
  width:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}

.hat-art{
  position:relative;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:4px;
  border:1px solid #2f2f34;
  border-radius:7px;
  background:#151517;
}

.hat.rare .hat-art{border-color:transparent}

.hat.rare .hat-art::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-1px;
  border:1px solid #ff334f;
  border-radius:7px;
  box-shadow:0 0 8px rgb(255 51 79 / .25);
  pointer-events:none;
  animation:rare-rainbow 3.2s linear infinite,rare-breathe 1.35s ease-in-out infinite alternate;
}

.hat-art img,.hat-art .null-trail{position:relative;z-index:1}
.hat img{width:100%;height:100%;object-fit:contain}

@keyframes rare-rainbow{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(360deg)}
}

@keyframes rare-breathe{
  from{opacity:.72}
  to{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .hat.rare .hat-art::before{animation:none}
  .loading-ring{animation:none}
}

.hat-name{
  width:52px;
  color:#d4d4d8;
  font-size:7px;
  font-weight:650;
  line-height:1.15;
  text-align:center;
  text-transform:lowercase;
  overflow-wrap:anywhere;
}

.hat-count{
  min-height:8px;
  color:#5f5f68;
  font-size:6px;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}

.null-trail{width:100%;height:100%;border-radius:3px;background:#7e22ce}

.leaderboard{
  display:block;
  width:100%!important;
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  border:0;
  border-radius:0;
}

.head,.row{
  min-width:360px;
  display:grid;
  grid-template-columns:minmax(142px,1fr) 62px 86px 70px;
  align-items:center;
}

.row{
  min-height:31px;
  background:#0a0a0b;
}

.row:nth-child(even){background:#0c0c0e}
.row:hover{background:#121215}
.head{min-height:28px}
.head>div:nth-child(3){font-size:8px}
.head>div,.row>div{padding:0 10px}
.head>div:nth-child(n+2),.row>div:nth-child(n+2){text-align:center}
.map{color:#e4e4e7;font-size:10px;font-weight:600}
.level,.completed,.spot{color:#a1a1aa;font-size:9px;font-weight:600;text-align:center}
.completed{display:flex;align-items:center;justify-content:center;align-self:stretch}
.completed svg{width:14px;height:14px;stroke-width:2.4}
.completed.yes{color:#4ade80}
.completed.no{color:#f87171}
.spot{color:#d4d4d8}
.spot.none{color:#52525b}
.error{margin-top:3px;color:#f87171;font-size:8px;font-weight:400}

.skeleton{
  position:relative;
  display:inline-block;
  width:38px;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#202024;
}

.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,#3f3f46,transparent);
  animation:loading 1s infinite;
}

@keyframes loading{to{transform:translateX(100%)}}
.status.bad{color:#f87171}

@media(min-width:640px){
  .head,.row{grid-template-columns:minmax(240px,1fr) 82px 98px 82px}
  .head>div,.row>div{padding:0 13px}
}

@media(min-width:768px){
  .collection-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px;align-items:start;gap:24px}
  .collection-details{display:contents}
}

@media(max-width:639px){
  .collection-details{grid-template-columns:1fr;gap:18px}
}