* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 20px;
}

main {
  width: 100%;
  height: calc(100vh - 40px);
  min-width: 1100px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto calc(100vh - 40px) 212px;
      grid-template-columns: auto calc(100vh - 40px) 212px;
  grid-gap: 20px;
}

main #left-column {
  display: -ms-grid;
  display: grid;
  grid-gap: 20px;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  height: calc(100vh - 40px);
}

main #right-column {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  height: calc(100vh - 40px);
}

* {
  font-family: 'Montserrat';
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.8);
  outline: none;
}

body {
  background-image: url("/assets/scale.png");
}

.gui-area {
  background-color: rgba(18, 18, 18, 0.8);
  background: -webkit-gradient(linear, right top, left bottom, from(rgba(18, 18, 18, 0.95)), to(rgba(18, 18, 18, 0.8)));
  background: linear-gradient(to left bottom, rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.8));
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 16px black;
          box-shadow: 0 0 16px black;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

h2 {
  font-size: 10px;
}

i {
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

i:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#login {
  height: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#login .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  gap: 20px;
}

#login .container h1 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 1 / 1 / span 1 / span 2;
  font-size: 24px;
  text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 20px 35px rgba(0, 0, 0, 0.8);
  color: white;
}

#login .container .errors {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 3 / 1 / span 1 / span 2;
  padding: 20px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

#login .login {
  padding: 20px;
}

#login .login h2 {
  margin-bottom: 20px;
}

#login .login input {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border: none;
  padding: 10px;
  margin-top: 10px;
}

#login .login input[type=submit] {
  background: rgba(3, 173, 222, 0.9);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  opacity: 0.9;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

#login .login input[type=submit]:hover {
  opacity: 1.0;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

#login .highscores {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
}

#login .highscores h2 {
  display: block;
  padding: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
}

#login .highscores .top-fisherman {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 50% 50%;
      grid-template-rows: 50% 50%;
}

#login .highscores .top-fisherman .fisherman {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: url("/assets/player.gif");
  background-repeat: no-repeat;
  background-position: 90%;
  background-size: 50%;
  -webkit-box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8);
          box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

#login .highscores .top-fisherman .fisherman label {
  display: block;
  opacity: 0.6;
  text-shadow: 0 0 3px black;
  font-size: 10px;
}

#login .highscores .top-fisherman .fisherman label.name {
  font-size: 12px;
  opacity: 1.0;
}

#login .highscores .top-fisherman .fisherman:nth-child(2), #login .highscores .top-fisherman .fisherman:nth-child(3) {
  background-color: rgba(0, 0, 0, 0.3);
}

#gameboard {
  position: relative;
  width: calc(100vh - 40px);
  height: calc(100vh - 40px);
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#gameboard .tiles {
  position: relative;
  top: 0;
  left: 0;
  width: calc(48px * 13);
  height: calc(48px * 13);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (48px)[13];
      grid-template-columns: repeat(13, 48px);
  -ms-grid-rows: (48px)[13];
      grid-template-rows: repeat(13, 48px);
}

#gameboard .tiles .tile {
  position: relative;
}

#gameboard .tiles .tile .item {
  background: url("/assets/map/spritemap.png") 0 0;
  background-size: 144px;
  width: 48px;
  height: 48px;
  position: absolute;
}

#gameboard .tiles .tile .splash, #gameboard .tiles .tile #lure {
  position: absolute;
  z-index: 1000;
}

#gameboard .tiles .tile.has-player {
  cursor: pointer;
}

#gameboard .tiles .tile:hover {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7);
          box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7);
}

#gameboard .weather {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2000;
}

#gameboard .weather img {
  opacity: 0;
}

#gameboard .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3000;
}

#gameboard .overlay .casting-area {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
}

#gameboard .hud {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 4000;
}

#gameboard .hud div {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

.hud .time, .hud .controls {
  position: absolute;
  padding: 5px;
  font-size: 10px;
}

.hud .time span, .hud .controls span {
  display: inline-block;
  font-size: 18px;
  padding: 0 5px;
}

.hud .controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  bottom: 0;
  width: 100%;
}

.hud .controls div {
  font-size: 10px;
}

.weather img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

button {
  color: white;
  background-color: black;
  opacity: 0.7;
  border: none;
  border-radius: 5px;
  padding: 10px;
  height: auto;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease-in-out,-webkit-transform;
  transition: opacity 0.3s ease-in-out,-webkit-transform;
  transition: transform,opacity 0.3s ease-in-out;
  transition: transform,opacity 0.3s ease-in-out,-webkit-transform;
}

button:hover {
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
  opacity: 0.9;
  -webkit-transition: opacity 0.3s ease-in-out,-webkit-transform;
  transition: opacity 0.3s ease-in-out,-webkit-transform;
  transition: transform,opacity 0.3s ease-in-out;
  transition: transform,opacity 0.3s ease-in-out,-webkit-transform;
}

#caught-fish {
  display: none;
  place-items: center;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: all;
}

#caught-fish .dialogue {
  margin-top: -148px;
}

#caught-fish .dialogue .top {
  display: -ms-grid;
  display: grid;
  gap: 20px;
  -ms-grid-columns: 1fr auto 1fr;
      grid-template-columns: 1fr auto 1fr;
  margin-bottom: 10px;
}

#caught-fish .dialogue .bottom {
  font-size: 10px;
  text-align: center;
}

#caught-fish .dialogue .bottom #caught-fish-name {
  font-size: 14px;
}

#caught-fish .dialogue .bottom #caught-fish-weight {
  font-size: 12px;
}

#caught-fish .dialogue .bottom #caught-fish-comment {
  padding-top: 10px;
}

#caught-fish.active {
  opacity: 1;
}

#gameboard.clear {
  -webkit-filter: none;
          filter: none;
  -webkit-transition: -webkit-filter 15s ease-in-out 5s;
  transition: -webkit-filter 15s ease-in-out 5s;
  transition: filter 15s ease-in-out 5s;
  transition: filter 15s ease-in-out 5s, -webkit-filter 15s ease-in-out 5s;
}

#gameboard.clear .weather img {
  opacity: 0;
  -webkit-transition: opacity 10s ease-in-out;
  transition: opacity 10s ease-in-out;
}

#gameboard.rainy {
  -webkit-filter: saturate(50%);
          filter: saturate(50%);
  -webkit-transition: -webkit-filter 15s ease-in-out;
  transition: -webkit-filter 15s ease-in-out;
  transition: filter 15s ease-in-out;
  transition: filter 15s ease-in-out, -webkit-filter 15s ease-in-out;
}

#gameboard.rainy .weather img {
  opacity: 1;
  -webkit-transition: opacity 10s ease-in-out 10s;
  transition: opacity 10s ease-in-out 10s;
}

#gameboard .tiles {
  -webkit-transition: -webkit-filter 15s ease-in-out 5s;
  transition: -webkit-filter 15s ease-in-out 5s;
  transition: filter 15s ease-in-out 5s;
  transition: filter 15s ease-in-out 5s, -webkit-filter 15s ease-in-out 5s;
}

#gameboard .tiles.h00, #gameboard .tiles.h01, #gameboard .tiles.h02, #gameboard .tiles.h03 {
  -webkit-filter: brightness(0.37) saturate(0.8);
          filter: brightness(0.37) saturate(0.8);
}

#gameboard .tiles.h04 {
  -webkit-filter: brightness(0.44) saturate(0.8);
          filter: brightness(0.44) saturate(0.8);
}

#gameboard .tiles.h05 {
  -webkit-filter: brightness(0.51) saturate(0.8);
          filter: brightness(0.51) saturate(0.8);
}

#gameboard .tiles.h06 {
  -webkit-filter: brightness(0.58) saturate(0.9);
          filter: brightness(0.58) saturate(0.9);
}

#gameboard .tiles.h07 {
  -webkit-filter: brightness(0.65) saturate(0.9);
          filter: brightness(0.65) saturate(0.9);
}

#gameboard .tiles.h08 {
  -webkit-filter: brightness(0.72) saturate(0.9);
          filter: brightness(0.72) saturate(0.9);
}

#gameboard .tiles.h09 {
  -webkit-filter: brightness(0.79) saturate(1);
          filter: brightness(0.79) saturate(1);
}

#gameboard .tiles.h10 {
  -webkit-filter: brightness(0.86) saturate(1);
          filter: brightness(0.86) saturate(1);
}

#gameboard .tiles.h11 {
  -webkit-filter: brightness(0.93) saturate(1);
          filter: brightness(0.93) saturate(1);
}

#gameboard .tiles.h12, #gameboard .tiles.h13, #gameboard .tiles.h14 {
  -webkit-filter: brightness(1) saturate(1);
          filter: brightness(1) saturate(1);
}

#gameboard .tiles.h15 {
  -webkit-filter: brightness(0.93) saturate(1);
          filter: brightness(0.93) saturate(1);
}

#gameboard .tiles.h16 {
  -webkit-filter: brightness(0.86) saturate(1);
          filter: brightness(0.86) saturate(1);
}

#gameboard .tiles.h17 {
  -webkit-filter: brightness(0.79) saturate(0.9);
          filter: brightness(0.79) saturate(0.9);
}

#gameboard .tiles.h18 {
  -webkit-filter: brightness(0.72) saturate(0.9);
          filter: brightness(0.72) saturate(0.9);
}

#gameboard .tiles.h19 {
  -webkit-filter: brightness(0.65) saturate(0.9);
          filter: brightness(0.65) saturate(0.9);
}

#gameboard .tiles.h20 {
  -webkit-filter: brightness(0.58) saturate(0.9);
          filter: brightness(0.58) saturate(0.9);
}

#gameboard .tiles.h21 {
  -webkit-filter: brightness(0.51) saturate(0.8);
          filter: brightness(0.51) saturate(0.8);
}

#gameboard .tiles.h22 {
  -webkit-filter: brightness(0.44) saturate(0.8);
          filter: brightness(0.44) saturate(0.8);
}

#gameboard .tiles.h23 {
  -webkit-filter: brightness(0.37) saturate(0.8);
          filter: brightness(0.37) saturate(0.8);
}

#gameboard .player, .other-player {
  position: absolute;
  top: -48px;
  left: -48px;
  -o-object-fit: none;
     object-fit: none;
  width: 144px;
  height: 144px;
  z-index: 500;
  pointer-events: none;
}

#gameboard .other-player-label {
  display: block;
  position: absolute;
  z-index: 4000;
  width: 144px;
  top: -12px;
  left: -48px;
  text-align: center;
  text-shadow: 0 0 2px black;
}

#social {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
}

#social h2 {
  margin-bottom: 5px;
  padding: 5px;
}

#social .social-views {
  padding: 10px;
  overflow: hidden;
}

#social .social-views > div {
  display: none;
}

#social .social-views #players-online {
  display: block;
}

#social .social-views #players-online .player-list {
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
  padding: 10px;
}

#social .social-views #players-online .player-list .online-player {
  opacity: 0.8;
  cursor: pointer;
}

#social .social-views #players-online .player-list .online-status-1 {
  color: rgba(45, 215, 91, 0.8);
}

#social .social-views #players-online .player-list .online-status-2 {
  color: rgba(255, 220, 22, 0.8);
}

#social .social-views #players-online .player-list .online-status-3 {
  color: rgba(214, 43, 27, 0.8);
}

#social .social-views #highscores .tabs {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

#social .social-views #highscores .tabs button {
  border-radius: 0;
}

#social .social-views #highscores .tabs button:first-child {
  border-top-left-radius: 10px;
}

#social .social-views #highscores .tabs button:last-child {
  border-top-right-radius: 10px;
}

#social .social-views #highscores .description {
  background-color: rgba(18, 18, 18, 0.8);
  padding-top: 10px;
  text-align: center;
}

#social .social-views #highscores .highscore-lists {
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 0 0 10px 10px;
  padding: 10px;
}

#social .social-views #highscores .highscore-lists .row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 15px 2fr 1fr 1fr;
      grid-template-columns: 15px 2fr 1fr 1fr;
  gap: 10px;
}

#social .social-views #highscores .highscore-lists .row .rank {
  text-align: right;
}

#social .social-views #highscores .highscore-lists .row .name {
  color: rgba(59, 200, 255, 0.8);
  cursor: pointer;
}

#social .social-views #highscores .highscore-lists .row .value {
  text-align: right;
}

#social .social-views #highscores .highscore-lists .row .me {
  color: rgba(255, 220, 22, 0.8);
}

#social .social-views #player-info {
  overflow: hidden;
  height: 100%;
}

#social .social-views #player-info .player-info-grid {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
  overflow: hidden;
}

#social .social-views #player-info .top-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto 1fr;
      grid-template-columns: auto auto 1fr;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: -webkit-gradient(linear, right top, left bottom, from(rgba(18, 18, 18, 0.95)), to(rgba(18, 18, 18, 0.8)));
  background: linear-gradient(to left bottom, rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.8));
  border-radius: 10px;
}

#social .social-views #player-info .top-info .player-name {
  font-size: 12px;
  padding: 5px 0;
}

#social .social-views #player-info .top-info .player-prices {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
}

#social .social-views #player-info .top-info .player-prices > div {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
  place-items: center;
}

#social .social-views #player-info .other-info {
  overflow-y: scroll;
  height: 100%;
}

#social .social-views #player-info .other-info .personal-bests {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

#social .social-views #player-info .other-info .personal-bests .record {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr auto;
      grid-template-rows: auto 1fr auto;
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

#social .social-views #player-info .other-info .personal-bests .record .category {
  font-size: 10px;
  margin-bottom: 5px;
}

#social .social-views #player-info .other-info .personal-bests .record .fish-image {
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#social .social-views #player-info .other-info .personal-bests .record img {
  display: block;
  margin: 5px 0;
}

#social .social-views #player-info .other-info .personal-bests .record .fish-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
      grid-template-columns: 1fr auto;
}

#social .social-views #player-info .other-info .personal-bests .record .fish-name {
  font-size: 10px;
}

#social .social-views #player-info .other-info .personal-bests .record .fish-comment {
  max-width: 175px;
  margin: auto;
  opacity: 0.5;
  padding: 5px;
  font-weight: 100;
}

#social .social-views #player-info .other-info .fishlist {
  padding: 5px;
  font-size: 8px;
}

#social .social-views #player-info .other-info .fishlist .fishlist-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto (70px)[4];
      grid-template-columns: auto repeat(4, 70px);
  gap: 10px;
  width: 100%;
}

#social .social-views #player-info .other-info .fishlist .fishlist-item:not(.fishlist-item-header) {
  opacity: 0.5;
}

#social .social-views #player-info .other-info .fishlist .fishlist-item + .fishlist-item {
  margin-top: 3px;
}

#social .social-views #player-info .other-info .fishlist .fishlist-item.fishlist-item-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

#social .social-views #player-info .other-info .fishlist .fishlist-item div:not(.fishlist-item-name) {
  text-align: right;
}

#social .social-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 10px;
  background-color: rgba(18, 18, 18, 0.8);
}

#social .info-menu {
  display: none;
  text-align: center;
  padding: 10px;
  background-color: rgba(18, 18, 18, 0.8);
}

#social .info-menu i {
  font-size: 9px;
  font-style: normal;
}

#logs {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
  overflow: hidden;
}

#logs .logs-views {
  padding: 10px;
  overflow: hidden;
}

#logs .logs-views > div {
  display: none;
}

#logs .logs-views h2 {
  padding: 5px;
}

#logs .logs-views #log {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

#logs .logs-views #log #game-log {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
  overflow-y: scroll;
  padding: 10px;
}

#logs .logs-views #log #game-log .message {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
      grid-template-columns: auto 1fr;
  gap: 5px;
}

#logs .logs-views #log #game-log .message .timestamp {
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

#logs .logs-views #log #game-log .message .sender {
  color: rgba(59, 200, 255, 0.8);
  cursor: pointer;
}

#logs .logs-views #log #game-log .message .me {
  color: rgba(255, 220, 22, 0.8);
}

#logs .logs-views #log #game-log .message .fish {
  color: rgba(59, 255, 150, 0.8);
}

#logs .logs-views #log #game-log .message .weight {
  color: rgba(123, 218, 255, 0.8);
}

#logs .logs-views #log #game-log .message .comment {
  display: block;
  background-color: royalblue;
  padding: 5px;
  border-radius: 5px;
  margin: 3px 0;
}

#logs .logs-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 10px;
  background-color: rgba(18, 18, 18, 0.8);
}

#logs .logs-menu #chat-button.new-message {
  color: rgba(45, 215, 91, 0.8);
}

#logs .logs-menu #chat-button.new-message::after {
  content: ' !';
}

#logs #chat {
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
  grid-gap: 10px;
  height: 100%;
  overflow: hidden;
}

#logs #chat #chat-box {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

#logs #chat #chat-box #chat-log {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  overflow-y: scroll;
}

#logs #chat #chat-box #chat-log .message {
  display: -ms-grid;
  display: grid;
  gap: 5px;
  -ms-grid-columns: auto auto 1fr;
      grid-template-columns: auto auto 1fr;
}

#logs #chat #chat-box #chat-log .message .timestamp {
  color: rgba(255, 255, 255, 0.5);
}

#logs #chat #chat-box #chat-log .message .sender {
  color: rgba(59, 200, 255, 0.8);
  cursor: pointer;
}

#logs #chat #chat-box #chat-log .message .me {
  color: rgba(255, 220, 22, 0.8);
}

#logs #chat #chat-box #chat-message {
  background-color: rgba(18, 18, 18, 0.8);
  padding: 10px 10px;
  border: none;
}

#inventory {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
}

#inventory #items {
  padding: 10px;
}

#inventory #items .playername {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
      grid-template-columns: 1fr auto;
  margin-bottom: 10px;
}

#inventory #items .playername h2 {
  margin-top: 3px;
}

#inventory #items .equipment {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 48px 144px;
      grid-template-columns: 48px 144px;
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

#inventory #items .equipment .rod {
  display: -ms-grid;
  display: grid;
  place-items: center;
  height: 96px;
}

#inventory #items .equipment .rod img {
  width: 38px;
  margin-left: 10px;
}

#inventory #items .equipment .lures {
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#inventory #items .equipment .lures .lure-box {
  display: -ms-grid;
  display: grid;
  grid-gap: 1px;
  -ms-grid-rows: (calc(124px / 3))[2];
      grid-template-rows: repeat(2, calc(124px / 3));
  -ms-grid-columns: (calc(124px / 3))[3];
      grid-template-columns: repeat(3, calc(124px / 3));
  border-radius: 10px;
  overflow: hidden;
}

#inventory #items .equipment .lures .lure-box .lure {
  width: calc(124px / 3);
  height: calc(124px / 3);
  background-color: rgba(255, 255, 255, 0.1);
}

#inventory #items .equipment .lures .lure-box .lure img {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  opacity: 0.3;
}

#inventory #items .equipment .lures .lure-box .lure img.selected {
  opacity: 0.9;
}

#inventory #items .bag {
  background-color: rgba(18, 18, 18, 0.8);
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

#inventory #items .bag .items {
  display: -ms-grid;
  display: grid;
  grid-gap: 1px;
  -ms-grid-rows: (calc(172px / 4))[2];
      grid-template-rows: repeat(2, calc(172px / 4));
  -ms-grid-columns: (calc(172px / 4))[4];
      grid-template-columns: repeat(4, calc(172px / 4));
  border-radius: 10px;
  overflow: hidden;
}

#inventory #items .bag .items .item {
  width: calc(172px / 4);
  height: calc(172px / 4);
  background-color: rgba(255, 255, 255, 0.1);
}

#inventory #catch {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
      grid-template-rows: auto 1fr;
  padding: 10px;
  min-width: 0;
  min-height: 0;
}

#inventory #catch h2 {
  margin-bottom: 10px;
}

#inventory #catch .catches {
  overflow-y: scroll;
  width: 100%;
}

#inventory #catch .catches .catch {
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 10px;
}

#inventory #catch .catches .catch + .catch {
  margin-top: 10px;
}

#inventory #catch .catches .catch .top {
  padding: 10px;
}

#inventory #catch .catches .catch .top img {
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

#inventory #catch .catches .catch .top .fish-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
      grid-template-columns: 1fr auto;
}

#inventory #catch .catches .catch .top .fish-name {
  font-size: 10px;
}

#inventory #catch .catches .catch .top i {
  padding: 0 5px;
  opacity: 0.2;
}

#inventory #catch .catches .catch .top i:hover {
  opacity: 1;
}

#inventory #catch .catches .catch .comment {
  background-color: rgba(18, 18, 18, 0.8);
  font-size: 10px;
  padding: 10px;
  border-radius: 10px;
  font-family: 'Ubuntu Mono', monospace;
}

#inventory #catch .catches .catch.remove {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.splashscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: white;
}
/*# sourceMappingURL=main.css.map */