/* HyHost game UI — light Minecraft inventory look */
:root {
  --game-wood: #8b5a2b;
  --game-wood-deep: #5a3a18;
  --game-wood-light: #d7b48a;
  --game-moss: #5dbd3a;
  --game-torch: #e6a100;
  --game-ink: #1f2d28;
  --game-panel-pad: 1.15rem 1.25rem;
}

.pixelated,
.game-panel,
.game-btn,
.game-slot,
.game-bar,
.game-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.game-panel {
  border: 12px solid transparent;
  border-image: url("/assets/ui/kenney/9-slice/Colored/grey.png") 12 fill;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .12);
  padding: var(--game-panel-pad);
  color: var(--game-ink);
}

.game-panel--rpg {
  border-width: 16px;
  border-image: url("/assets/ui/kenney/rpg/panel_beige.png") 22 fill;
}

.game-panel--inset {
  border-width: 14px;
  border-image: url("/assets/ui/kenney/rpg/panelInset_beige.png") 20 fill;
}

.game-panel h1,
.game-panel h2,
.game-panel h3 {
  font-family: var(--brand-font);
  color: #1a3d18;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .55);
}

.game-panel .muted { color: #5a6f62; }

.btn.game,
a.btn.game {
  border: 10px solid transparent;
  border-image: url("/assets/ui/kenney/rpg/buttonLong_beige.png") 12 40 fill;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  color: #2a180c;
  font-family: var(--brand-font);
  font-weight: 800;
  letter-spacing: .02em;
  padding: .55rem 1.35rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: none;
  transition: transform .12s ease, filter .12s ease;
}

.btn.game:hover,
a.btn.game:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn.game:active,
a.btn.game:active {
  border-image-source: url("/assets/ui/kenney/rpg/buttonLong_beige_pressed.png");
  transform: translateY(1px);
}

.btn.game.primary,
a.btn.game.primary {
  border-image-source: url("/assets/ui/kenney/9-slice/Colored/green.png");
  border-width: 12px;
  border-image-slice: 12 fill;
  color: #0b2a12;
}

.btn.game.primary:active,
a.btn.game.primary:active {
  border-image-source: url("/assets/ui/kenney/9-slice/Colored/green_pressed.png");
}

.btn.game.ok,
a.btn.game.ok {
  border-image-source: url("/assets/ui/kenney/9-slice/Colored/yellow.png");
  border-width: 12px;
  border-image-slice: 12 fill;
  color: #4a3200;
}

.btn.game.ok:active,
a.btn.game.ok:active {
  border-image-source: url("/assets/ui/kenney/9-slice/Colored/yellow_pressed.png");
}

.btn.game.square {
  border-width: 10px;
  border-image: url("/assets/ui/kenney/rpg/buttonSquare_beige.png") 12 fill;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

.game-slot {
  position: relative;
  border: 12px solid transparent;
  border-image: url("/assets/ui/kenney/9-slice/Colored/grey.png") 12 fill;
  border-radius: 0;
  background: transparent;
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .12);
  padding: 1rem 1.1rem 1.15rem;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), filter .18s ease;
}

.game-slot:hover {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.game-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 42%),
    radial-gradient(420px 160px at 100% 0%, rgba(93, 189, 58, .12), transparent 55%);
}

.game-slot .server-card-name {
  font-family: var(--brand-font);
  font-weight: 800;
  color: #1a3d18;
}

.game-slot .badge {
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, .12);
  font-weight: 800;
}

.game-slot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}

.game-slot-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 8px solid transparent;
  border-image: url("/assets/ui/kenney/rpg/buttonSquare_beige.png") 10 fill;
  display: grid;
  place-items: center;
  font-family: var(--pixel-font, var(--brand-font));
  font-weight: 400;
  font-size: .55rem;
  color: #2a180c;
  text-transform: uppercase;
}

.game-slot-icon.mc { color: #1a3d18; }
.game-slot-icon.tr { color: #3a2412; }
.game-slot-icon.cs { color: #3a2a12; }
.game-slot-icon.sb { color: #1a2a3a; }

.game-bar {
  display: flex;
  height: 18px;
  margin: .65rem 0 .35rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15));
}

.game-bar__track {
  flex: 1;
  display: flex;
  min-width: 0;
}

.game-bar__track::before {
  content: "";
  width: 6px;
  background: url("/assets/ui/kenney/rpg/barBack_horizontalLeft.png") center / 100% 100% no-repeat;
}

.game-bar__track-mid {
  flex: 1;
  background: url("/assets/ui/kenney/rpg/barBack_horizontalMid.png") center / auto 100% repeat-x;
  position: relative;
  overflow: hidden;
}

.game-bar__track::after {
  content: "";
  width: 6px;
  background: url("/assets/ui/kenney/rpg/barBack_horizontalRight.png") center / 100% 100% no-repeat;
}

.game-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 70%);
  display: flex;
}

.game-bar__fill::before {
  content: "";
  width: 6px;
  background: url("/assets/ui/kenney/rpg/barGreen_horizontalLeft.png") center / 100% 100% no-repeat;
}

.game-bar__fill-mid {
  flex: 1;
  background: url("/assets/ui/kenney/rpg/barGreen_horizontalMid.png") center / auto 100% repeat-x;
}

.game-bar__fill::after {
  content: "";
  width: 6px;
  background: url("/assets/ui/kenney/rpg/barGreen_horizontalRight.png") center / 100% 100% no-repeat;
}

.game-bar.is-low .game-bar__fill::before {
  background-image: url("/assets/ui/kenney/rpg/barRed_horizontalLeft.png");
}
.game-bar.is-low .game-bar__fill-mid {
  background-image: url("/assets/ui/kenney/rpg/barRed_horizontalMid.png");
}
.game-bar.is-low .game-bar__fill::after {
  background-image: url("/assets/ui/kenney/rpg/barRed_horizontalRight.png");
}

.hero-card.game-hero {
  border: 14px solid transparent;
  border-image: url("/assets/ui/kenney/rpg/panel_beigeLight.png") 22 fill;
  border-radius: 0;
  background: transparent;
  box-shadow: 6px 6px 0 rgba(31, 45, 40, .12);
}

.hero-card.game-hero .brand-kicker {
  color: #b57a00;
  font-family: var(--pixel-font, var(--brand-font));
  font-size: .62rem;
}

.hero-card.maintenance-gate {
  --block-size: 28px;
  --block-rim: #4a5560;
  --block-tile: url("/assets/ui/mc/blocks/stone.png");
  position: relative;
  max-width: 36rem;
  margin: 2.5rem auto;
  text-align: center;
  border: 4px solid var(--block-rim);
  border-radius: 0;
  background: var(--block-tile) 0 0 / var(--block-size) var(--block-size) repeat;
  box-shadow: 6px 6px 0 rgba(31, 45, 40, .18);
  padding: 1.35rem 1.35rem 1.4rem;
  display: grid;
  gap: .65rem;
  justify-items: center;
  image-rendering: pixelated;
}
.hero-card.maintenance-gate > * {
  position: relative;
  z-index: 1;
}
.hero-card.maintenance-gate::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: rgba(255, 252, 245, .95);
  border: 3px solid rgba(30, 24, 16, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  z-index: 0;
  pointer-events: none;
}

.hero-card.maintenance-gate .brand-kicker {
  color: #b57a00;
  font-family: var(--pixel-font, var(--brand-font));
  font-size: .62rem;
  margin: 0;
}

.hero-card.maintenance-gate h1 {
  margin: 0;
  font-family: var(--brand-font);
  color: #1a3d18;
}

.hero-card.maintenance-gate .actions {
  margin-top: .35rem;
  justify-content: center;
}

/* ========== Minecraft auth / form panels ========== */
.form-card.mc-panel {
  --block-size: 28px;
  --block-rim: #6b3d22;
  --block-tile: url("/assets/ui/mc/blocks/copper.png");
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: min(34rem, calc(100vw - 2rem));
  margin: 1.5rem auto 2rem;
  padding: 0;
  border: 4px solid var(--block-rim);
  border-radius: 0;
  background:
    var(--block-tile) 0 0 / var(--block-size) var(--block-size) repeat;
  box-shadow: 6px 6px 0 rgba(31, 45, 40, .18);
  image-rendering: pixelated;
}
.form-card.mc-panel.mc-panel-maintenance {
  --block-tile: url("/assets/ui/mc/blocks/stone.png");
  --block-rim: #4a5560;
}
.mc-panel-mosaic {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,252,245,.08), transparent 40%),
    var(--block-tile) 0 0 / var(--block-size) var(--block-size) repeat;
  z-index: 0;
  pointer-events: none;
}
.mc-panel-body {
  position: relative;
  z-index: 1;
  margin: 10px;
  padding: 1.25rem 1.45rem 1.4rem;
  background: rgba(255, 252, 245, .95);
  border: 3px solid rgba(30, 24, 16, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  display: grid;
  gap: .7rem;
}
.mc-panel-body .brand-kicker {
  margin: 0;
  color: #b57a00;
  font-family: var(--pixel-font, var(--brand-font));
  font-size: .55rem;
  line-height: 1.5;
}
.mc-panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mc-panel-head h1 {
  margin: 0;
  font-family: var(--brand-font);
  color: #1a3d18;
}
.mc-panel-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-family: var(--pixel-font);
  font-size: .55rem;
  color: #fffef5;
  background: linear-gradient(#5dbd3a 0 42%, #8b5a2b 42% 100%);
  border: 2px solid #2f5d22;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
  image-rendering: pixelated;
}
.mc-alert {
  padding: .85rem .9rem;
  border: 3px solid #8a3a2a;
  background:
    linear-gradient(180deg, rgba(255, 230, 220, .95), rgba(255, 214, 200, .95));
  color: #5a1f16;
  box-shadow: 3px 3px 0 rgba(90, 40, 30, .18);
}
.mc-alert.soft {
  border-color: #b57a00;
  background: linear-gradient(180deg, #fff6d8, #ffe9a8);
  color: #5a4508;
  box-shadow: 3px 3px 0 rgba(120, 90, 20, .14);
}
.mc-alert-title {
  display: block;
  font-family: var(--pixel-font, var(--brand-font));
  font-size: .58rem;
  line-height: 1.5;
  margin-bottom: .45rem;
  color: #7a2a1c;
}
.mc-alert p { margin: 0; font-weight: 650; line-height: 1.45; }
.mc-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .25rem;
}
.mc-panel-body .field input,
.mc-panel-body .field select,
.mc-panel-body .field textarea {
  border-radius: 0;
  border: 2px solid rgba(31, 45, 40, .22);
  box-shadow: inset 2px 2px 0 rgba(31, 45, 40, .06);
}
.mc-panel-body .btn.primary,
.mc-panel-body .btn.game {
  width: 100%;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(31, 45, 40, .18);
}
.mc-panel-body .btn.game.staff-unlock,
.hero-card.maintenance-gate .actions .btn.game {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.mc-panel-body .btn.primary:hover,
.mc-panel-body .btn.game:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .2);
}

.server-card.game-slot:not(.block-card),
.server-card.game-slot:not(.block-card)[class*="accent-"] {
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .12);
}

.server-card.game-slot::before {
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  bottom: 0;
  border-radius: 0;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 42%),
    radial-gradient(420px 160px at 100% 0%, rgba(93, 189, 58, .12), transparent 55%);
}

.server-card.game-slot:not(.block-card):hover,
.server-card.game-slot:not(.block-card)[class*="accent-"]:hover {
  border-color: transparent;
  box-shadow: 6px 8px 0 rgba(31, 45, 40, .14);
}

.server-card.game-slot .game-slot-head {
  width: 100%;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn.game,
  .game-slot {
    transition: none;
  }
}