/* the brand's pixel font (Silkscreen, OFL licence), bundled so the game works offline; see the end of this file */
  @font-face { font-family: 'Silkscreen'; font-weight: 400; font-display: swap; src: url(../fonts/Silkscreen-Regular.woff2) format('woff2'); }
  @font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: swap; src: url(../fonts/Silkscreen-Bold.woff2) format('woff2'); }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; height: 100%; overflow: hidden; background: #4aa8e8;
    font-family: system-ui, 'Segoe UI', sans-serif; color: #fff;
    user-select: none; -webkit-user-select: none;
  }
  [hidden] { display: none !important; }
  #game {
    position: fixed; inset: 0; width: 100%; height: 100%; display: block;
    touch-action: none; cursor: crosshair;
  }
  button {
    font: inherit; font-weight: 600; color: #fff; background: #2f6fd6;
    border: 0; border-bottom: 3px solid #1d4ea3; border-radius: 8px;
    padding: 6px 12px; cursor: pointer;
  }
  button:hover { background: #3d7fe8; }
  button:active { transform: translateY(1px); border-bottom-width: 2px; }
  button:disabled { background: #566074; border-bottom-color: #3c4454; cursor: default; }

  #hud { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
  #top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px; }
  #info, #btns { pointer-events: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  #info span {
    background: rgba(18, 22, 32, .8); border-radius: 8px; padding: 6px 12px; font-weight: 700;
  }
  /* the gems, halfway down the right edge, styled like the inventory: its blue panel and border, the gem in a slot
     tile; click them to open the Shop */
  #gems {
    position: fixed; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: auto;
    display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
    font-size: 16px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97));
    border: 3px solid #8fdcff; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  /* the Legendary Wizard's window: the legendary items he sets quests for, as small cards */
  .wizardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
  .wizardcard {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; text-align: center; border-radius: 12px;
    background: rgba(8, 40, 66, .6); border: 2px solid #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, .25);
  }
  .wizardcard .shoppic { width: 56px; height: 56px; }
  .wizardcard .shopname { font-size: 13px; }
  .wizardcard .shopbuy { font-size: 12px; padding: 4px 8px; }
  /* the tutorial's steps, on the left, in the inventory's style */
  .tutpanel {
    position: fixed; left: 10px; top: 50%; transform: translateY(-50%); width: min(270px, 42vw); pointer-events: auto;
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97));
    border: 3px solid #8fdcff; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .tutpanel small { color: #ffd23f; font-weight: 800; font-size: 11px; letter-spacing: 1px; }
  .tutpanel b { font-size: 19px; }
  .tutpanel p { margin: 0; font-size: 14px; line-height: 1.4; color: #e3f4ff; }
  .tutdots { display: flex; gap: 5px; margin-top: 4px; }
  .tutdots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(8, 40, 66, .7); border: 2px solid #0c3858; }
  .tutdots i.done { background: #8fdcff; }
  .tutdots i.on { background: #ffd23f; border-color: #fff; }
  .tutskip { align-self: flex-start; margin-top: 4px; padding: 4px 10px; font-size: 12px; }
  #gems:hover { background: linear-gradient(rgba(36, 118, 168, .97), rgba(18, 74, 116, .98)); }
  #gems:active { transform: translateY(calc(-50% + 1px)); }
  #gems .gemslot {
    width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .16);
  }
  #gems .gemslot .icon { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
  #spacer { flex: 1; }
  #touch { display: flex; justify-content: space-between; padding: 0 12px 8px; }
  #touch div { display: flex; gap: 10px; }
  #touch button {
    pointer-events: auto; width: 64px; height: 64px; font-size: 26px; border-radius: 50%;
    background: rgba(18, 22, 32, .55); border: 2px solid rgba(255, 255, 255, .5); touch-action: none;
  }
  #inv {
    --slot: min(60px, calc((100vw - 50px) / 8));
    position: relative; pointer-events: auto; align-self: center; max-width: 100vw;
    background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97));
    border: 3px solid #8fdcff; border-bottom: 0; border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
  }
  /* pull tab sitting on top of the panel */
  #invtoggle {
    position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
    width: 84px; height: 25px; padding: 0; font-size: 13px; line-height: 20px;
    background: rgb(24, 96, 140); border: 3px solid #8fdcff; border-bottom: 0; border-radius: 12px 12px 0 0;
  }
  #invtoggle { cursor: ns-resize; touch-action: none; }
  #invtoggle:hover { background: rgb(36, 118, 168); }
  #invtoggle:active { transform: translateX(-50%); }
  #invhead { display: flex; align-items: center; gap: 8px; padding: 6px 8px 0; min-height: 24px; }
  #invname {
    flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
  #invname small { color: #bfe8ff; font-weight: 400; margin-left: 8px; }
  #invtabs { display: flex; gap: 4px; }
  #invtabs button { padding: 3px 10px; font-size: 13px; background: #2a79ad; border-bottom-color: #0e3d60; }
  #invtabs button.on { background: #f2a81d; border-bottom-color: #a86a08; }
  #inv:not(.open) #invtabs { display: none; }
  #invbody { display: flex; gap: 8px; padding: 6px 8px 8px; align-items: flex-start; }
  #slots {
    flex: none; display: grid; grid-template-columns: repeat(8, var(--slot)); gap: 4px;
    height: var(--slot); overflow: hidden;
  }
  /* the visible height is set from script (rows dragged open); the rest scrolls */
  #inv.open #slots { overflow-y: auto; }
  .slot {
    position: relative; width: var(--slot); height: var(--slot); padding: 0; border-radius: 10px;
    background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .16);
    display: flex; align-items: center; justify-content: center;
  }
  button.slot { transition: transform .08s ease-out, box-shadow .12s, border-color .12s; }
  /* plain slots light up under the pointer; held, worn, legendary and moderator slots keep their own colours */
  button.slot:not(.sel):not(.worn):not(.legend):not(.mod):hover { background: linear-gradient(#8ad4f7, #52a9de); }
  button.slot:hover { filter: brightness(1.06); }
  button.slot:active { transform: scale(.93); border-bottom-width: 2px; }   /* a quick press-in */
  .slot.empty { background: rgba(8, 40, 66, .55); border-color: rgba(8, 34, 56, .7); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
  .slot.sel {
    background: linear-gradient(#d8f2ff, #8fd0f5); border-color: #fff;
    box-shadow: 0 0 0 2px #ffd83d, 0 0 10px rgba(255, 216, 61, .8);
  }
  .slot.worn { background: linear-gradient(#8ff0b0, #3fbb74); border-color: #0d5230; }
  .slot.legend {
    background: linear-gradient(#fff0a0, #f29a1d); border-color: #7a4300;
    animation: legend 1.4s ease-in-out infinite alternate;
  }
  @keyframes legend {
    from { box-shadow: 0 0 3px rgba(255, 190, 40, .5), inset 0 2px 0 rgba(255, 255, 255, .5); }
    to { box-shadow: 0 0 14px rgba(255, 190, 40, 1), inset 0 2px 0 rgba(255, 255, 255, .5); }
  }
  .legendname { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 170, 30, .8); }
  /* moderator items: the staff purple of the Overseer's Badge */
  .slot.mod {
    background: linear-gradient(#e9dcff, #8a3cf0); border-color: #2a0f4a;
    animation: modglow 1.6s ease-in-out infinite alternate;
  }
  @keyframes modglow {
    from { box-shadow: 0 0 3px rgba(199, 125, 255, .5), inset 0 2px 0 rgba(255, 255, 255, .5); }
    to { box-shadow: 0 0 14px rgba(199, 125, 255, 1), inset 0 2px 0 rgba(255, 255, 255, .5); }
  }
  .modname { color: #c77dff; text-shadow: 0 0 6px rgba(160, 80, 255, .8); }
  .icon { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; flex: none; }
  .slot .icon { width: 80%; height: 80%; }
  .slot .icon, #detail .icon { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
  .slot small, .slot i, .slot b {
    position: absolute; font-style: normal; font-weight: 800; color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000;
  }
  .slot small { right: 4px; bottom: 1px; font-size: 14px; }
  .slot i { left: 4px; top: 1px; font-size: 10px; opacity: .85; }
  .slot b { right: 4px; top: 0; font-size: 13px; }
  #detail {
    width: 210px; flex: none; background: rgba(8, 40, 66, .7); border: 2px solid #0c3858; border-radius: 10px;
    padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  }
  #detail .icon { width: 48px; height: 48px; }
  #detail .head { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; }
  #detail p { margin: 0; color: #d3ecfa; line-height: 1.4; }
  @media (max-width: 760px) {
    #invbody { flex-direction: column-reverse; align-items: stretch; }
    #detail { width: auto; }
  }

  #menu {
    position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px; padding: 16px; text-align: center; overflow-y: auto;
  }
  #menu h1 {
    margin: 0; font-size: clamp(40px, 9vw, 84px); letter-spacing: 2px; color: #fff;
    text-shadow: 0 4px 0 #2c7a3a, 0 8px 18px rgba(0, 0, 0, .35);
  }
  #menu p { margin: 0; font-size: 17px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
  /* the world menu: a panel with rows, a label on the left and its contents on the right: the world name (a long
     rounded box, press Enter) with the square category button beside it, then the lists of worlds, each row
     underlined */
  .worldpanel {
    width: min(760px, 94vw); display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; text-align: left;
    background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97));
    border: 3px solid #8fdcff; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .worldrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
  .worldrow + .worldrow { border-top: 2px solid rgba(143, 220, 255, .25); }
  .worldlabel { flex: none; width: 140px; text-align: left; font-weight: 800; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
  #worldname {
    flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 20px; padding: 11px 20px;
    border-radius: 999px; text-transform: uppercase; outline: none;
  }
  .catpick { position: relative; flex: none; }
  #menu #catbtn { width: 50px; height: 50px; padding: 0; font-size: 24px; line-height: 1; border-radius: 12px; }
  #menu #catbtn.on { background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
  #catmenu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 210px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(rgba(24, 96, 140, .99), rgba(13, 60, 96, .99)); border: 3px solid #8fdcff; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }
  #menu .catitem { text-align: left; font-size: 15px; padding: 8px 12px; border-radius: 10px; border-width: 2px; }
  #menu .catitem.on { background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
  #menu .catoff { background: rgba(12, 56, 88, .7); }
  .worldlist { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  #menu .worldchip { font-size: 15px; padding: 6px 14px; border-radius: 10px; }
  .worldnone { color: #bfe6ff; font-size: 14px; }
  @media (max-width: 600px) {
    .worldrow { flex-wrap: wrap; gap: 8px; }
    .worldlabel { width: 100%; }
  }

  #modal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 12px;
  }
  #sheet {
    position: relative; background: #1c2230; border: 3px solid #3c465c; border-radius: 12px;
    padding: 18px; width: min(520px, 100%); max-height: 100%; overflow-y: auto;
  }
  #sheet h2 { margin: 0 0 12px; }
  #close { position: absolute; top: 10px; right: 10px; background: #8a3340; border-bottom-color: #5e222c; }
  .row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #2d3547;
  }
  .row .grow { flex: 1; text-align: left; }
  .row small { display: block; color: #9aa6bd; font-weight: 400; }
  .recipe { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid #2d3547; font-size: 14px; }
  .recipe b { color: #ffd83d; }
  .muted { color: #9aa6bd; }
  #sheet ul { margin: 0; padding-left: 20px; line-height: 1.7; text-align: left; }
  kbd { background: #2a3142; border: 1px solid #4a566f; border-radius: 4px; padding: 0 5px; font: inherit; font-size: 13px; }

  /* chat: styled like the inventory but hanging from the top edge, with its pull tab underneath */
  #chat {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: auto;
    width: min(720px, calc(100vw - 200px)); min-width: 260px;
    background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97));
    border: 3px solid #8fdcff; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  #chatlog {
    height: 96px; overflow-y: auto; padding: 6px 10px 2px; font-size: 14px; line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); overflow-wrap: anywhere;
  }
  #chatlog.collapsed { padding: 0; overflow: hidden; }
  #chatlog .sys { color: #ffe9a8; }
  #chatlog .pm { color: #ffb0e0; }   /* private messages (/msg) */
  #chatlog .me b { color: #9fe3ff; }
  #chatlog .other b { color: #b6f5a8; }   /* other players in the world */
  #chatform { display: flex; gap: 6px; padding: 4px 8px 8px; }
  #chatinput {
    flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 5px 9px; border-radius: 8px;
    border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); color: #ffffff; outline: none;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
  }
  #chatinput::placeholder { color: rgba(220, 240, 255, .7); }
  #chatinput:focus { border-color: #ffd83d; background: rgba(111, 196, 238, .38); }
  #chatform button { padding: 4px 12px; font-size: 13px; background: #f2a81d; border-bottom-color: #a86a08; }
  #chattoggle {
    position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
    width: 84px; height: 25px; padding: 0; font-size: 13px; line-height: 20px; cursor: ns-resize; touch-action: none;
    background: rgb(24, 96, 140); border: 3px solid #8fdcff; border-top: 0; border-radius: 0 0 12px 12px;
  }
  #chattoggle:hover { background: rgb(36, 118, 168); }
  #chattoggle:active { transform: translateX(-50%); }
  @media (max-width: 760px) { #chat { top: 50px; width: calc(100vw - 16px); min-width: 0; } }

  /* slim rounded scrollbars in the game's blue style, for the inventory, chat, shop and any other scrolling panel */
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: rgba(6, 34, 58, .6); border-radius: 8px; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #9fe0ff, #4aa3dc); border-radius: 8px;
    border: 3px solid rgba(6, 34, 58, .6);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #c2ecff, #62b6ea); }
  ::-webkit-scrollbar-thumb:active { background: linear-gradient(90deg, #ffe08a, #f2a81d); }
  ::-webkit-scrollbar-button { display: none; }
  ::-webkit-scrollbar-corner { background: transparent; }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: #5fb4e6 rgba(6, 34, 58, .6); }
  }

/* inventory: drop amount and button */
#detail .droprow { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
#detail .droprow input {
  width: 64px; padding: 4px 6px; border-radius: 6px; border: 2px solid #2b1d14;
  background: #fff8ec; color: #2b1d14; font: inherit;
}
/* drop confirmation */
#content .confirmbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#content .confirmbtns .secondary { background: #8a8f99; }
/* ---- start screens: start (Play / About / Options), about, options, login */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 16px; text-align: center; overflow-y: auto;
}
.screen[hidden], #menu[hidden] { display: none; }
.logo { margin: 0; line-height: 0; }
/* the Valthros wordmark (branding/WordMark.png, 1024x264, drawn large): shown smaller than it is, so it is scaled
   smoothly rather than pixel by pixel */
.logo img { width: min(600px, 90vw); height: auto; filter: drop-shadow(0 6px 10px rgba(10, 20, 45, .45)); }
.logo.small img { width: min(420px, 84vw); }
.tagline { margin: 0; font-size: 17px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.startbtns { display: flex; flex-direction: column; gap: 10px; width: min(260px, 80vw); margin-top: 10px; }
.startbtns button, .screen .big { font-size: 20px; padding: 12px 18px; }
.startbtns .big { font-size: 26px; padding: 14px 18px; background: #3fae4a; border-bottom-color: #23772c; }
.card {
  width: min(400px, 100%); padding: 20px; border-radius: 14px; text-align: left;
  background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97)); border: 3px solid #8fdcff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 12px;
}
.card h2 { margin: 0; text-align: center; }
.card p { margin: 0; line-height: 1.5; }
.card .muted { opacity: .75; text-align: center; }
.card .back { align-self: center; min-width: 120px; }
.card .secondary, #userbar .secondary { background: #8a8f99; border-bottom-color: #5c6068; }
.optrow { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.optrow span { width: 70px; }
.optrow input[type=range] { flex: 1; accent-color: #ffd83d; }
.optrow input[type=checkbox] { width: 20px; height: 20px; accent-color: #3fae4a; }
.optrow b { width: 44px; text-align: right; }
.authtabs { display: flex; gap: 6px; }
.authtabs button { flex: 1; background: rgba(12, 56, 88, .6); border-bottom-color: #0c3858; opacity: .75; }
.authtabs button.active { background: #3f97cf; opacity: 1; }
#auth-form { display: flex; flex-direction: column; gap: 10px; }
#auth-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
#auth-form label[hidden] { display: none; }
#auth-form input {
  font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 8px; outline: none; color: #fff;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
#auth-form input:focus { border-color: #ffd83d; background: rgba(111, 196, 238, .38); }
#auth-error { min-height: 1.2em; color: #ffb3b3; font-weight: 700; font-size: 14px; }
#auth-error.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#auth-submit { background: #3fae4a; border-bottom-color: #23772c; }
#userbar { display: flex; align-items: center; gap: 8px; justify-content: center; }
#userbar button { font-size: 13px; padding: 4px 10px; }
/* ---- start, login and world screens styled like the in-game UI: buttons like inventory slots (light blue with a
   navy border and a shine), the main action orange like the chat's Send button, panels like the inventory */
.screen button, #menu button {
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; border-bottom-width: 4px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.screen button:hover, #menu button:hover { background: linear-gradient(#8ad4f7, #52a9de); }
.screen button:active, #menu button:active { transform: translateY(1px); border-bottom-width: 3px; }
/* the main action: Play, Login / Create Account, Enter World */
.startbtns .big, #auth-submit {
  background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08;
}
.startbtns .big:hover, #auth-submit:hover { background: linear-gradient(#ffd270, #f7b53a); }
/* the social links in the bottom-left corner of the start screen: square arcade keys in the game's button style (the
   panels' blue, a light blue border, a thick navy bottom edge), with pixel-art icons (see socials.js). Hovering
   lights them gold like the Play button; pressing pushes them down like a key. */
.socials { position: fixed; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100vw - 32px); z-index: 2; }
.socials a {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(#6fc4ee, #3f97cf); border: 3px solid #0c3858; border-bottom-width: 6px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #8fdcff, 0 4px 10px rgba(0, 0, 0, .35);
  image-rendering: pixelated; transition: transform .08s;
}
.socials a:hover { background: linear-gradient(#ffd270, #f2a81d); border-color: #a86a08; }
.socials a:active { transform: translateY(3px); border-bottom-width: 3px; }
.socials a:focus-visible { outline: 3px solid #ffd23a; outline-offset: 3px; }
.socials svg { width: 28px; height: 28px; }
/* the client version, in small letters in the start screen's bottom-right corner */
.clientversion {
  position: fixed; right: 16px; bottom: 14px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #e8f6ff; text-shadow: 0 1px 0 #0c3858, 0 0 6px rgba(12, 56, 88, .6); opacity: .9;
}
/* quieter buttons: Log out, Back, inactive tabs */
.card .secondary, #userbar .secondary, .authtabs button {
  background: rgba(12, 56, 88, .7); border-color: #0c3858; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12); opacity: 1;
}
.card .secondary:hover, #userbar .secondary:hover, .authtabs button:hover { background: rgba(20, 80, 120, .8); }
.authtabs button.active { background: linear-gradient(#6fc4ee, #3f97cf); }
/* the start buttons sit in a panel like the inventory */
.startbtns {
  padding: 16px; border-radius: 14px; border: 3px solid #8fdcff;
  background: linear-gradient(rgba(24, 96, 140, .92), rgba(13, 60, 96, .94)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
/* world name box like the chat box */
#worldname {
  color: #fff; background: rgba(13, 60, 96, .55); border: 3px solid #0c3858;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
#worldname::placeholder { color: rgba(220, 240, 255, .7); }
#worldname:focus { border-color: #ffd83d; }
/* options: skin tone swatches and a preview of the character */
.skinrow { align-items: center; }
#opt-body { display: flex; flex-direction: column; gap: 12px; }
.optskins { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.optskins button.skin, .screen .optskins button.skin {
  height: 30px; padding: 0; border: 2px solid #0c3858; border-bottom-width: 2px; border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}
.optskins button.skin.on, .screen .optskins button.skin.on { border-color: #fff; box-shadow: 0 0 0 2px #ffd83d, 0 0 8px rgba(255, 216, 61, .8); }
.optpreview {
  width: 64px; height: 64px; image-rendering: pixelated; border-radius: 10px;
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858;
}
#sheet .optrow { margin-bottom: 12px; }

/* inventory details: amount box and the Drop / Trash / Info / Store buttons */
#detail .invamount {
  width: 100%; margin-top: 6px; padding: 4px 8px; border-radius: 8px; font: inherit; color: #fff; outline: none;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28);
}
#detail .invamount:focus { border-color: #ffd83d; }
#detail .detailbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
#detail .detailbtns button {
  padding: 6px 4px; font-size: 13px; border: 2px solid #0c3858; border-bottom-width: 3px; border-radius: 8px;
  background: linear-gradient(#6fc4ee, #3f97cf); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
#detail .detailbtns button:hover { background: linear-gradient(#8ad4f7, #52a9de); }
#detail .detailbtns .trash { background: linear-gradient(#e0606f, #b23a4a); border-color: #5e222c; }
#detail .detailbtns .trash:hover { background: linear-gradient(#ec7482, #c44857); }
#detail .detailbtns .store { background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
#detail .detailbtns .store:hover { background: linear-gradient(#ffd270, #f7b53a); }
#detail .detailbtns button:disabled { background: rgba(12, 56, 88, .6); color: rgba(255, 255, 255, .45); box-shadow: none; cursor: not-allowed; }
#content .confirmbtns .danger { background: #c44857; border-bottom-color: #7a2632; }
/* item info window */
.infohead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.infoicon { width: 72px !important; height: 72px !important; background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; border-radius: 12px; padding: 6px; }
.infoname { font-size: 20px; font-weight: 800; }
.infofacts { display: flex; flex-direction: column; margin-top: 8px; }
.inforow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #2d3547; }
.inforow span { opacity: .8; }
/* the Drop / Trash / Info / Store column beside the slots (replaces the details panel) */
#detail { width: auto; padding: 6px; gap: 0; align-self: flex-start; }
#detail .detailbtns { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#detail .detailbtns button { width: 76px; padding: 7px 4px; }
#inv:not(.open) #detail { padding: 3px; }
#inv:not(.open) #detail .detailbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
#inv:not(.open) #detail .detailbtns button { width: 58px; padding: 2px 2px; font-size: 11px; border-bottom-width: 2px; }
#content .optrow .invamount {
  width: 90px; margin: 0; padding: 5px 8px; border-radius: 8px; font: inherit; color: #fff; outline: none;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
#content .optrow .invamount:focus { border-color: #ffd83d; }
#content .optrow span { width: auto; white-space: nowrap; }
@media (max-width: 760px) {
  #detail .detailbtns, #inv:not(.open) #detail .detailbtns { display: grid; grid-template-columns: repeat(4, 1fr); }
  #detail .detailbtns button, #inv:not(.open) #detail .detailbtns button { width: auto; }
}
/* opening or closing the inventory with a click slides it; dragging follows the pointer directly */
#slots.slide { transition: height .2s ease-out; }
/* backpack: count in the header, and locked slots past the backpack size */
#invname .bagcount { margin-left: 10px; padding: 1px 7px; border-radius: 6px; background: rgba(8, 40, 66, .6); color: #bfe6ff; }
#invname .bagcount.full { background: #b23a4a; color: #fff; }
.slot.empty.locked {
  background: repeating-linear-gradient(45deg, rgba(8, 34, 56, .55) 0 6px, rgba(8, 34, 56, .3) 6px 12px);
  border-color: rgba(8, 34, 56, .5); opacity: .55;
}
/* amount boxes: no up/down arrows, you just type the number */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* the Escape menu */
.pausebtns { display: flex; flex-direction: column; gap: 8px; width: min(260px, 100%); margin: 4px auto 0; }
.pausebtns button {
  font-size: 18px; padding: 10px 14px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; border-bottom-width: 4px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.pausebtns button:hover { background: linear-gradient(#8ad4f7, #52a9de); }
.pausebtns .resume { background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
.pausebtns .resume:hover { background: linear-gradient(#ffd270, #f7b53a); }
.pausebtns .exit { background: linear-gradient(#e0606f, #b23a4a); border-color: #5e222c; }
.pausebtns .exit:hover { background: linear-gradient(#ec7482, #c44857); }
.pausehint { text-align: center; margin: 10px 0 0; }
/* the Escape menu window looks like the inventory panel */
#sheet.pausesheet {
  width: auto; padding: 16px; border-radius: 14px; border: 3px solid #8fdcff;
  background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
#sheet.pausesheet .pausebtns { width: 240px; margin: 0; }
#close[hidden] { display: none; }
/* the Escape menu: two panels like the inventory (the buttons, and the world's name under them) */
#sheet.pausesheet { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
#sheet.pausesheet #content { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pausepanel {
  padding: 16px; border-radius: 14px; border: 3px solid #8fdcff;
  background: linear-gradient(rgba(24, 96, 140, .96), rgba(13, 60, 96, .97)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
#sheet.pausesheet .pausebtns { width: 272px; margin: 0; }
.pauseworld { padding: 10px 16px; text-align: center; font-size: 16px; }
.pauseworld span { opacity: .8; }
/* ---- the Shop: categories on the left, product cards on the right */
#sheet.shopsheet {
  width: min(1040px, 96vw); height: min(640px, 92vh); display: flex; flex-direction: column; padding: 16px;
  border-radius: 14px; border: 3px solid #8fdcff; background: linear-gradient(rgba(24, 96, 140, .97), rgba(13, 60, 96, .98));
}
#sheet.shopsheet #content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#sheet.shopsheet h2 { margin: 0 0 6px; }
.shopgems { position: absolute; top: 18px; right: 64px; margin: 0; font-weight: 800; color: #ffd8e4; }
.shoplayout { display: flex; gap: 14px; flex: 1; min-height: 0; }
.shopside {
  width: 180px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 12px;
  background: rgba(8, 40, 66, .55); border: 2px solid #0c3858;
}
.shopcat {
  padding: 14px 10px; font-size: 16px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; border-bottom-width: 4px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.shopcat:hover { background: linear-gradient(#8ad4f7, #52a9de); }
.shopcat.on { background: linear-gradient(#d8f2ff, #8fd0f5); color: #0c3858; text-shadow: none; box-shadow: 0 0 0 2px #ffd83d, 0 0 10px rgba(255, 216, 61, .6); }
.shopcat.irl { margin-top: auto; background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
.shopcat.irl.on { background: linear-gradient(#ffe39a, #ffc24a); color: #5a3a00; }
.shopmain {
  flex: 1; min-width: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; align-content: start; padding: 2px 6px 2px 2px;
}
.shopnote { grid-column: 1 / -1; margin: 0; }
.shopcard {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px;
  background: rgba(8, 40, 66, .55); border: 2px solid #0c3858;
}
.shopcard.legend { border-color: #ffd23f; box-shadow: 0 0 10px rgba(255, 210, 63, .35); }
.shoppic {
  height: 130px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}
.shoppic .icon { width: 96px; height: 96px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }
.shopname { font-weight: 800; font-size: 16px; }
.shopcard small { color: #cfe8f7; line-height: 1.35; flex: 1; }
.shopbuy {
  padding: 8px; font-size: 15px; color: #fff; background: linear-gradient(#ffc24a, #f2a81d); border: 2px solid #a86a08;
  border-bottom-width: 4px; border-radius: 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.shopbuy:hover { background: linear-gradient(#ffd270, #f7b53a); }
.shopbuy:disabled { background: rgba(12, 56, 88, .7); border-color: #0c3858; color: rgba(255, 255, 255, .6); cursor: default; }
@media (max-width: 700px) {
  .shoplayout { flex-direction: column; }
  .shopside { width: auto; flex-direction: row; flex-wrap: wrap; }
  .shopcat.irl { margin-top: 0; }
}
/* gem amounts: the gem picture in front of the number */
.gemamount { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.gemamount .gemicon { width: 22px; height: 22px; margin: -4px 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.shopgems.gemamount { display: flex; font-size: 16px; }
.shopgems .gemicon { width: 26px; height: 26px; }
/* the Shop's product list: a slim scroll handle with no dark track behind it */
.shopmain { scrollbar-width: thin; scrollbar-color: #6fc4ee transparent; }
.shopmain::-webkit-scrollbar { width: 8px; }
.shopmain::-webkit-scrollbar-track { background: transparent; }
.shopmain::-webkit-scrollbar-thumb { border-radius: 6px; border: 0; }
/* the gem is drawn in the upper part of its picture, so it is nudged down to sit on the same line as the number */
.gemamount { line-height: 1; }
.gemamount .gemicon { display: block; position: relative; top: 3px; }
.gemamount > span { display: block; }
/* options: room for the longer labels */
.optrow span { width: 110px; flex: none; }
/* country picker: a small rounded button (flag, name, arrow) that opens a rounded list with a search box, in the
   inventory's blue; flags are pixel art, kept crisp, with a thin dark border */
.flagicon { width: 27px; height: 18px; image-rendering: pixelated; border: 2px solid rgba(12, 20, 32, .9); border-radius: 3px; flex: none; }
.countrypick { position: relative; }
.countrypick .countrybtn {
  display: flex; align-items: center; gap: 8px; width: 190px; padding: 5px 10px 5px 6px; border-radius: 12px;
  background: linear-gradient(#2a79ad, #1d5e8a); border: 2px solid #8fdcff; border-bottom-width: 2px; font-size: 14px;
}
.countrypick .countrybtn:hover { background: linear-gradient(#3489c0, #22699a); }
.optrow .countrybtn .countryname { flex: 1; width: auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countrybtn i { font-style: normal; opacity: .8; }
.countrylist {
  position: fixed; z-index: 50; width: 260px; padding: 8px; border-radius: 14px;
  background: linear-gradient(rgba(24, 96, 140, .98), rgba(13, 60, 96, .99)); border: 3px solid #8fdcff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.countrysearch {
  width: 100%; margin-bottom: 6px; padding: 7px 10px; border-radius: 10px; font: inherit; font-size: 14px; color: #fff;
  background: rgba(8, 40, 66, .7); border: 2px solid #0c3858; outline: none;
}
.countrysearch::placeholder { color: #8fb8d4; }
.countrysearch:focus { border-color: #ffd83d; }
.countryitems { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.countrylist .countryitem {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 2px solid transparent;
  background: transparent; font-size: 14px; font-weight: 600; text-align: left;
}
.optrow .countryitem span { width: auto; flex: 1; }
.countrylist .countryitem:hover { background: rgba(143, 220, 255, .18); }
.countrylist .countryitem.on { background: rgba(242, 168, 29, .25); border-color: #f2a81d; }
.countrynone { padding: 10px; color: #bfe6ff; text-align: center; }
.profilename .flagicon { width: 27px; height: 18px; margin-right: 8px; vertical-align: -1px; }

/* the level badge next to the gems: the level and a little bar of XP to the next level */
/* the profile window (from the wrench by the name) */
.profilehead { margin-bottom: 10px; }
.profilename { font-size: 22px; font-weight: 800; }
.profilelevel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.profilelevel b { color: #ffd23f; font-size: 16px; }
.profilebar { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .45); overflow: hidden; border: 1px solid rgba(143, 220, 255, .5); }
.profilebar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb31a, #ffe066); }
.profilesub { margin: 12px 0 6px; font-weight: 700; }
.profileworn { display: flex; flex-wrap: wrap; gap: 6px; }
.profileworn .slot { --slot: 52px; width: 52px; height: 52px; }
/* ---- every window (profile, item info, help, options, confirmations) in the inventory's style: the blue
   gradient with the light blue border, lighter dividers, and a close button like the inventory's buttons */
#sheet {
  background: linear-gradient(rgba(24, 96, 140, .97), rgba(13, 60, 96, .98));
  border: 3px solid #8fdcff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
#sheet .row, #sheet .inforow { border-top-color: rgba(143, 220, 255, .22); }
#sheet .muted { color: #bfe6ff; opacity: .85; }
#sheet h2 { text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
#close {
  background: linear-gradient(#e0606f, #b23a4a); border: 2px solid #5e222c; border-bottom-width: 4px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3);
}
#close:hover { background: linear-gradient(#ec7482, #c44857); }
#sheet kbd { background: rgba(8, 40, 66, .7); border-color: #4a8ab8; }
/* plain buttons inside windows look like the inventory's buttons */
#content > button, #content .row > button, #content .confirmbtns button:not(.danger):not(.secondary) {
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; border-bottom-width: 4px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
#content .confirmbtns .danger { background: linear-gradient(#e0606f, #b23a4a); border: 2px solid #5e222c; border-bottom-width: 4px; border-radius: 10px; }
#content .confirmbtns .secondary { background: rgba(12, 56, 88, .75); border: 2px solid #0c3858; border-bottom-width: 4px; border-radius: 10px; }
/* the profile's worn items sit on the inventory's slot style already; its bar gets the light border */
.profilebar { border-color: rgba(143, 220, 255, .6); }
/* ---- the profile, laid out like the sketch: a wide window, the name and level bar top left, Select Titles, facts */
#sheet.profilesheet { width: min(900px, 94vw); min-height: min(460px, 86vh); padding: 26px 30px; }
.profiletop { width: min(320px, 100%); margin-bottom: 22px; }
.profilename { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.profiletop .profilebar { height: 10px; }
.profilexp { margin-top: 6px; color: #cfe8f7; font-size: 14px; }
.profilexp b { color: #ffd23f; }
.profiletitles {
  display: block; width: 220px; padding: 10px 14px; font-size: 16px; margin-bottom: 22px; color: #fff;
  background: linear-gradient(#ffc24a, #f2a81d); border: 2px solid #a86a08; border-bottom-width: 4px; border-radius: 10px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.profiletitles:hover { background: linear-gradient(#ffd270, #f7b53a); }
.profilefacts { display: flex; flex-direction: column; gap: 8px; }
.profilefact { display: flex; gap: 10px; font-size: 15px; }
.profilefact span { color: #bfe6ff; }
/* choosing a title */
.titlelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
#content .titlecard {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; border-radius: 10px;
  background: rgba(8, 40, 66, .55); border: 2px solid #0c3858; box-shadow: none; color: #fff;
}
#content .titlecard:hover { background: rgba(20, 80, 120, .6); }
#content .titlecard.on { border-color: #ffd83d; box-shadow: 0 0 10px rgba(255, 216, 61, .45); }
.titlepreview { font-weight: 800; font-size: 16px; text-shadow: -1px -1px 0 #0c1420, 1px -1px 0 #0c1420, -1px 1px 0 #0c1420, 1px 1px 0 #0c1420; }
.titlecard small { color: #bfe6ff; }
#content .titleback { display: block; margin: 0 auto; }
/* options: the eye colour swatches (9) in rows of 5 */
.optrow.skinrow .optskins { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }

/* ---- the lock window (Wrench a lock): the access list and the add form */
.locklist { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; max-height: 220px; overflow-y: auto; }
.lockrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); }
.lockrow .grow { flex: 1; font-weight: 700; }
.lockadd { display: flex; gap: 8px; }
/* the text box looks like the chat's: a translucent blue box that turns gold when typing in it */
.lockadd input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); color: #ffffff; outline: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
.lockadd input::placeholder { color: rgba(220, 240, 255, .7); }
.lockadd input:focus { border-color: #ffd83d; background: rgba(111, 196, 238, .38); }
.lockadd button { padding: 4px 14px; font-size: 14px; background: #f2a81d; border-bottom-color: #a86a08; }

/* the Royal Lock's options in its window */
.royalopts { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.royalbtn { flex: 1; min-width: 140px; background: #3a6a8a; border-bottom-color: #1e4058; }
.royalbtn.on { background: #3ec84a; border-bottom-color: #1e7a28; }

/* ---- the Admin Panel (it uses the Shop's layout: tabs on the left, the tab's contents on the right) */
.adminmain { display: flex; flex-direction: column; gap: 8px; }
.adminbar { display: flex; gap: 8px; align-items: center; }
.adminbar .grow { flex: 1; }
.admininput {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); color: #ffffff; outline: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
.admininput::placeholder { color: rgba(220, 240, 255, .7); }
.admininput:focus { border-color: #ffd83d; background: rgba(111, 196, 238, .38); }
.adminrow .admininput { flex: 0 1 140px; }
.adminchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adminchip { padding: 3px 10px; font-size: 13px; background: #2a5a7a; border-bottom-color: #163a52; }
.adminchip.on { background: #f2a81d; border-bottom-color: #a86a08; }
.admingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.adminitem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: rgba(255,255,255,.08); border-bottom-color: rgba(0,0,0,.25); }
.adminitem canvas, .adminitem img { width: 32px; height: 32px; image-rendering: pixelated; }
.adminitem small { font-size: 11px; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.adminitem.legend { box-shadow: inset 0 0 0 2px #ffd23f; }
.adminitem.mod { box-shadow: inset 0 0 0 2px #c77dff; }
.adminhave { position: absolute; top: 3px; right: 5px; font-size: 11px; color: #ffd83d; }
.adminplayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.adminplayer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; background: rgba(255,255,255,.08); border-bottom-color: rgba(0,0,0,.25); text-align: left; }
.adminplayer.on { box-shadow: inset 0 0 0 2px #ffd83d; }
.adminplayer small { opacity: .75; font-size: 11px; }
.adminpanelbox { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.18); }
.adminpanelbox h3 { margin: 4px 0 0; }
.adminrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adminrow > span { min-width: 140px; font-weight: 700; }
.adminrow .grow { flex: 1; }
.adminbtn { padding: 4px 12px; font-size: 13px; background: #f2a81d; border-bottom-color: #a86a08; }
.adminbtn.danger { background: #d8434a; border-bottom-color: #8a1e24; }

/* the Display Shelf's window: its four compartments */
.shelfgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shelfslot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.22); min-height: 90px; justify-content: center; }
.shelfslot .icon { width: 36px; height: 36px; image-rendering: pixelated; }
.shelfempty { cursor: pointer; border: 2px dashed rgba(143, 220, 255, .35); }
.shelfempty:hover { border-color: #ffd83d; background: rgba(255, 216, 61, .08); }
.shelfplus { font-size: 26px; line-height: 1; color: #8fdcff; }
.shelfpick { max-height: 50vh; overflow-y: auto; margin-bottom: 10px; }

/* the World Scanner 5000's window: the totals across the top */
.scanstats { display: flex; gap: 8px; flex-wrap: wrap; }
.scanstat { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.22); }
.scanstat b { font-size: 22px; color: #5af0a0; }
.scanstat small { opacity: .8; }

/* ---- brand typography (from brand.html's Typography & Letterforms): the Silkscreen pixel font in two strengths.
   It has capitals only, so chat, descriptions, item bios and anything typed stay in the plain font. */
:root { --pixel: 'Silkscreen', monospace; --navy: #1a284a; }
/* headlines: the blue gradient letters (light blue on top, royal blue, dark blue at the bottom) with a hard navy
   outline and a navy drop shadow. The outline is made of drop-shadow filters (text-shadow would paint over the
   gradient), so the edges stay pixel-sharp. */
.card h2, #sheet h2, .adminpanelbox h3 {
  font-family: var(--pixel); font-weight: 700; letter-spacing: 1px; line-height: 1.2;
  background: linear-gradient(180deg, #c8e4ff 0%, #94c3f4 35%, #5088c5 65%, #2d558a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(2px 0 0 var(--navy)) drop-shadow(-2px 0 0 var(--navy)) drop-shadow(0 2px 0 var(--navy))
    drop-shadow(0 -2px 0 var(--navy)) drop-shadow(0 3px 0 rgba(10, 20, 45, .8));
}
.card h2, #sheet h2 { font-size: 28px; }
#sheet h2 { padding-right: 48px; }   /* clear of the close button */
#sheet.shopsheet h2 { font-size: 28px; }
.adminpanelbox h3 { font-size: 16px; }
/* the pixel font, plain: white (or the element's own colour) with a hard navy outline - buttons, tabs, labels,
   names and numbers */
button, #invname, #gems, .worldlabel, #worldname, .clientversion, .tutpanel small, .tutpanel b, .shopname, .infoname,
.profilename, .profilelevel b, .pauseworld, .slot small, .slot i, .slot b, .scanstat b, .optrow span, .optrow b,
.inforow, .profilefact, #auth-form label, .gemamount, .titlepreview, .wizardcard .shopname, #userbar {
  font-family: var(--pixel); font-weight: 400; letter-spacing: .5px;
}
/* the bold cut is chunkier, like the brand's letters: for buttons, headings and names */
button, .worldlabel, .tutpanel b, .shopname, .infoname, .profilename, .scanstat b { font-weight: 700; }
button, #invname, #gems, .worldlabel, .tutpanel b, .shopname, .infoname, .profilename, .pauseworld, .scanstat b, .clientversion {
  text-shadow: -2px 0 0 var(--navy), 2px 0 0 var(--navy), 0 -2px 0 var(--navy), 0 2px 0 var(--navy),
    -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 4px 0 rgba(10, 20, 45, .6);
}
/* the pixel letters are wide: sizes picked so labels still fit their buttons */
.startbtns button, .screen .big { font-size: 20px; }
.startbtns .big { font-size: 28px; }
.pausebtns button { font-size: 16px; }
.shopcat { font-size: 14px; }
.shopname { font-size: 14px; line-height: 1.3; }
.shopbuy { font-size: 14px; }
.worldlabel { font-size: 14px; letter-spacing: 1px; }
#worldname { font-size: 18px; }
#menu .worldchip { font-size: 14px; }
#menu .catitem { font-size: 13px; }
#invtabs button { font-size: 12px; }
#invname { font-size: 13px; }
#detail .detailbtns button { font-size: 11px; letter-spacing: 0; }
#inv:not(.open) #detail .detailbtns button { font-size: 9px; }
#chatform button { font-size: 12px; }
.infoname { font-size: 18px; }
.profilename { font-size: 22px; }
.clientversion { font-size: 10px; letter-spacing: 1px; }
.slot small { font-size: 12px; }
.slot b { font-size: 11px; }
.slot i { font-size: 8px; }
/* small labels get a 1px outline so the tiny letters aren't swallowed by it */
#detail .detailbtns button, #invtabs button, #chatform button, .clientversion, #menu .catitem, #userbar button {
  text-shadow: -1px 0 0 var(--navy), 1px 0 0 var(--navy), 0 -1px 0 var(--navy), 0 1px 0 var(--navy), 0 2px 0 rgba(10, 20, 45, .6);
}
#gems { font-size: 18px; }
/* the slot numbers and close button keep their own outlines; the X and arrows aren't letters */
.slot small, .slot i, .slot b { text-shadow: -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 0 3px 0 #000; }
#close, #invtoggle, #chattoggle, #touch button, #catbtn { font-family: system-ui, 'Segoe UI', sans-serif; }
/* lists of names that can be long stay in the readable font */
.countrypick button, .countrypick span, .countrylist button, .countrylist span, .adminitem, .adminplayer, #content .titlecard small { font-family: system-ui, 'Segoe UI', sans-serif; letter-spacing: 0; }
/* ---- the start screen: the logo and floating buttons in the middle (no panel behind them), the update notes on the
   left and the item of the day on the right (js/ui/start-screen.js). Everything grows with big screens. */
#start:not([hidden]) {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  column-gap: 3vw; padding: 24px 3vw 96px;
}
.startcenter { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#start .logo img { width: clamp(420px, 36vw, 860px); max-width: 90vw; }
#start .tagline { font-size: clamp(16px, 1.1vw, 22px); }
.startbtns {
  width: clamp(280px, 20vw, 440px); max-width: 86vw; padding: 0; margin-top: 8px; gap: 12px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.startrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#start .startbtns button {
  font-size: clamp(16px, 1.1vw, 22px); padding: .7em .6em;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 6px 0 rgba(8, 30, 52, .55), 0 10px 22px rgba(10, 20, 45, .35);
  transition: transform .08s, filter .12s;
}
#start .startbtns .big { font-size: clamp(26px, 2vw, 40px); padding: .55em .6em; }
#start .startbtns button:hover { transform: translateY(-2px); filter: brightness(1.05); }
#start .startbtns button:active { transform: translateY(2px); }

/* the side boards, in the inventory's style */
.startside {
  width: clamp(300px, 22vw, 420px); padding: 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: linear-gradient(rgba(24, 96, 140, .92), rgba(13, 60, 96, .94)); border: 3px solid #8fdcff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.sidehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid rgba(143, 220, 255, .25); }
.sidehead b {
  font-family: var(--pixel); font-weight: 700; font-size: clamp(16px, 1.1vw, 21px); color: #ffd23f; letter-spacing: 1px;
  text-shadow: -2px 0 0 var(--navy), 2px 0 0 var(--navy), 0 -2px 0 var(--navy), 0 2px 0 var(--navy), 0 4px 0 rgba(10, 20, 45, .6);
}
.sidehead small { font-family: var(--pixel); font-size: clamp(11px, .7vw, 14px); color: #bfe6ff; }
.newslist { display: flex; flex-direction: column; gap: 8px; }
.newsrow { display: flex; gap: 10px; align-items: center; }
.newspic {
  width: clamp(44px, 2.6vw, 58px); height: clamp(44px, 2.6vw, 58px); flex: none; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.newspic .icon { width: 72%; height: 72%; }
.newstext { display: flex; flex-direction: column; min-width: 0; }
.newstext b {
  font-family: var(--pixel); font-weight: 700; font-size: clamp(13px, .8vw, 17px); letter-spacing: .5px;
  text-shadow: -1px 0 0 var(--navy), 1px 0 0 var(--navy), 0 -1px 0 var(--navy), 0 1px 0 var(--navy);
}
.newstext small { font-size: clamp(13px, .8vw, 17px); line-height: 1.3; color: #d3ecfa; }
.featpic {
  height: clamp(150px, 10vw, 220px); display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(#6fc4ee, #3f97cf); border: 2px solid #0c3858; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.featpic.legend { background: linear-gradient(#fff0a0, #f29a1d); border-color: #7a4300; animation: legend 1.4s ease-in-out infinite alternate; }
.featpic .icon { width: clamp(112px, 7vw, 160px); height: clamp(112px, 7vw, 160px); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); animation: featbob 2.4s ease-in-out infinite; }
@keyframes featbob { 50% { transform: translateY(-6px); } }
.featname {
  font-family: var(--pixel); font-weight: 700; font-size: clamp(15px, 1vw, 19px); text-align: center;
  text-shadow: -2px 0 0 var(--navy), 2px 0 0 var(--navy), 0 -2px 0 var(--navy), 0 2px 0 var(--navy);
}
.featdesc {
  text-align: center; font-size: clamp(13px, .8vw, 17px); line-height: 1.35; color: #d3ecfa;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.featprice { font-size: 18px; font-weight: 800; }
.feattimer { font-family: var(--pixel); font-size: clamp(11px, .7vw, 14px); color: #ffd23f; text-align: center; letter-spacing: .5px; }
/* narrower screens: only the middle */
@media (max-width: 1200px) {
  #start:not([hidden]) { display: flex; }
  .startside { display: none; }
}
/* the changelog board: three groups (New, Changes, Fixes), each with a small coloured pixel title; the new items are
   tiles in two columns (picture and name), the changes and fixes short lines with a square bullet */
.changelog { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6fc4ee transparent; }
.loggroup { display: flex; flex-direction: column; gap: 6px; }
.logtitle {
  align-self: flex-start; padding: 2px 8px; border-radius: 5px; border: 2px solid rgba(0, 0, 0, .3);
  font-family: var(--pixel); font-weight: 700; font-size: clamp(10px, .65vw, 13px); letter-spacing: 1px; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.loggroup.new .logtitle { background: #3fae4a; border-color: #1e6a26; }
.loggroup.change .logtitle { background: #3f97cf; border-color: #0c3858; }
.loggroup.fix .logtitle { background: #f2a81d; border-color: #a86a08; }
.logtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.logtile {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 8px;
  background: rgba(8, 40, 66, .55); border: 2px solid #0c3858;
}
.logtile .icon { width: clamp(22px, 1.4vw, 28px); height: clamp(22px, 1.4vw, 28px); }
.logtile span {
  min-width: 0; line-height: 1.15;
  font-family: var(--pixel); font-size: clamp(10px, .62vw, 13px); letter-spacing: .3px; color: #fff;
  text-shadow: -1px 0 0 var(--navy), 1px 0 0 var(--navy), 0 -1px 0 var(--navy), 0 1px 0 var(--navy);
}
.loglist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.loglist li { position: relative; padding-left: 14px; font-size: clamp(12px, .78vw, 15px); line-height: 1.35; color: #e3f4ff; }
.loglist li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; background: #8fdcff; box-shadow: 1px 1px 0 var(--navy); }
.loggroup.fix .loglist li::before { background: #ffd23f; }
/* the board titles stay on one line (the month or version goes under it when there isn't room) */
.sidehead { flex-wrap: wrap; }
.sidehead b { white-space: nowrap; font-size: clamp(14px, .95vw, 19px); }
/* ---- screen transitions: a screen's contents ease in each time it opens (an animation restarts whenever an element
   goes from hidden to shown), so About, Options, the login and the world menu don't just pop up */
@keyframes cardin { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } }
@keyframes slideleft { from { opacity: 0; transform: translateX(-28px); } }
@keyframes slideright { from { opacity: 0; transform: translateX(28px); } }
.screen:not([hidden]) .card { animation: cardin .34s cubic-bezier(.2, .9, .3, 1.15) both; }
#start:not([hidden]) .startcenter { animation: fadeup .4s ease-out both; }
#start:not([hidden]) #startnews { animation: slideleft .45s .05s ease-out both; }
#start:not([hidden]) #startfeatured { animation: slideright .45s .05s ease-out both; }
#menu:not([hidden]) > * { animation: fadeup .38s ease-out both; }
#menu:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
#menu:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) .card, #start:not([hidden]) .startcenter, #start:not([hidden]) .startside, #menu:not([hidden]) > * { animation: none; }
}
/* registering, step 2: the email code form, laid out like the login form; the code box is big and spaced out */
#auth-verify { display: flex; flex-direction: column; gap: 10px; }
#auth-verify[hidden], #auth .authtabs[hidden] { display: none; }
#auth-verify label { display: flex; flex-direction: column; gap: 4px; font-family: var(--pixel); font-size: 14px; }
.verifytext { margin: 0; line-height: 1.45; color: #e3f4ff; }
#verify-code {
  font-family: var(--pixel); font-size: 28px; letter-spacing: 10px; text-align: center; padding: 8px 10px; border-radius: 8px;
  outline: none; color: #fff; border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
#verify-code:focus { border-color: #ffd83d; background: rgba(111, 196, 238, .38); }
#verify-error { min-height: 1.2em; margin: 0; color: #ffb3b3; font-weight: 700; font-size: 14px; }
#verify-error.shake { animation: shake .35s; }
#verify-submit { background: linear-gradient(#ffc24a, #f2a81d); border-color: #a86a08; }
#verify-submit:hover { background: linear-gradient(#ffd270, #f7b53a); }
.verifyrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.verifyrow button { font-size: 12px; }
/* Options: the 2-Step Login switch (state, button, and the password box that appears to confirm a change) */
.tfa { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 2px solid rgba(143, 220, 255, .22); }



.tfaok { padding: 6px 12px; font-size: 13px; }
.tfainfo { color: #bfe6ff; font-size: 13px; line-height: 1.4; }
.tfaform { display: flex; gap: 6px; flex-wrap: wrap; }
.tfaform[hidden] { display: none; }
.tfapass {
  flex: 1; min-width: 140px; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; color: #fff; outline: none;
  border: 2px solid #0c3858; background: rgba(111, 196, 238, .28); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
.tfapass:focus { border-color: #ffd83d; }
.tfaform button { padding: 6px 10px; font-size: 12px; }
.tfaerr { color: #ffb3b3; font-weight: 700; font-size: 13px; min-height: 0; }
/* "2-Step Login" with its button right beside it: green Turn on, red Turn off; wins over the general button styles */
.tfatop { display: flex; align-items: center; gap: 14px; }
.tfaname { font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.tfa button.tfabtn, .screen .tfa button.tfabtn, #content .tfa button.tfabtn {
  padding: 7px 14px; font-size: 13px; border-radius: 10px;
  background: linear-gradient(#5fd36a, #3fae4a); border: 2px solid #1e6a26; border-bottom-width: 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.tfa button.tfabtn:hover, .screen .tfa button.tfabtn:hover { background: linear-gradient(#6fdd7a, #46b852); }
.tfa button.tfabtn.on, .screen .tfa button.tfabtn.on, #content .tfa button.tfabtn.on {
  background: linear-gradient(#e0606f, #b23a4a); border-color: #5e222c;
}
.tfa button.tfabtn.on:hover, .screen .tfa button.tfabtn.on:hover { background: linear-gradient(#ec7482, #c44857); }
.tfainfo[hidden] { display: none; }
/* the confirm step under the 2-Step Login button: what the change does, the password box and Continue / Cancel */
.tfadesc { flex-basis: 100%; margin: 2px 0 2px; font-size: 13px; line-height: 1.45; color: #d3ecfa; }
.tfa .tfapass { font-family: var(--pixel); font-size: 14px; letter-spacing: 1px; padding: 8px 12px; }
.tfa .tfapass::placeholder { font-family: var(--pixel); font-size: 12px; letter-spacing: 1px; color: rgba(225, 242, 255, .75); text-transform: uppercase; }
.tfa button.tfaok, .screen .tfa button.tfaok, #content .tfa button.tfaok {
  padding: 7px 16px; font-size: 13px; background: linear-gradient(#ffc24a, #f2a81d); border: 2px solid #a86a08; border-bottom-width: 4px; border-radius: 10px;
}
.tfa button.tfaok:hover, .screen .tfa button.tfaok:hover { background: linear-gradient(#ffd270, #f7b53a); }
.tfa .tfapass { flex-basis: 100%; }
.tfaform button { flex: 1; }
/* ---- buttons that move when hovered or pressed (pressed ones sink a little and their bottom edge gets thinner; the
   start buttons lift on hover) could slide out from under the pointer when it was near their top or bottom edge, and
   the click was lost. While hovered or pressed, an invisible margin around the button keeps the pointer on it. */
button, .socials a { position: relative; }
button::after, .socials a::after { content: ''; position: absolute; inset: 0; }
button:active::after, .socials a:active::after { inset: -8px -4px; }
#start .startbtns button:hover::after { inset: -6px -2px; }
/* ---- the loading screen after logging in (js/game/online.js): the logo, a bar, what's loading, and Back */
#loading:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.loadbox { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(560px, 90vw); }
#loading .logo img { width: clamp(320px, 30vw, 640px); max-width: 88vw; }
.loadtrack {
  width: 100%; height: 22px; padding: 3px; border-radius: 12px;
  background: rgba(12, 56, 88, .75); border: 3px solid #8fdcff; box-shadow: 0 4px 0 rgba(8, 30, 52, .55), 0 8px 18px rgba(10, 20, 45, .35);
}
#loadbar {
  width: 0; height: 100%; border-radius: 7px; transition: width .25s ease-out;
  background: linear-gradient(#ffd270, #f2a81d); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45);
}
#loadtext {
  margin: 0; min-height: 1.4em; text-align: center; font-family: var(--pixel); font-size: 15px; letter-spacing: .5px;
  text-shadow: -2px 0 0 var(--navy), 2px 0 0 var(--navy), 0 -2px 0 var(--navy), 0 2px 0 var(--navy), 0 3px 0 rgba(10, 20, 45, .6);
}
#loadtext.error { color: #ffb3b3; font-family: system-ui, 'Segoe UI', sans-serif; font-weight: 700; }
.loadbtns { display: flex; gap: 10px; }
.loadbtns button { min-width: 130px; padding: 9px 16px; font-size: 14px; }
#loading .secondary { background: rgba(12, 56, 88, .8); border-color: #0c3858; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12); }
#loading .secondary:hover { background: rgba(20, 80, 120, .9); }
#loading:not([hidden]) .loadbox { animation: fadeup .4s ease-out both; }
/* the line under the world lists: entering a world, or why it couldn't be entered */
#menunote { margin: 0; text-align: center; font-family: var(--pixel); font-size: 14px; color: #ffe9a8; text-shadow: 0 2px 0 rgba(10, 20, 45, .7); }