/* Panel, 3-slice buttons, close X — assets extracted from robblade.com */

.pixelated { image-rendering: pixelated; }

:root {
  --ink: #4a2f17;
  --ink-soft: #7a6240;
  --accent: #f0b90b;
  --shadow-pop: 0 6px 0 #00000038, 0 10px 22px #00000059;
}

.panel {
  image-rendering: pixelated;
  color: var(--ink);
  font-family: var(--font-pixel), var(--font-zh), system-ui, sans-serif;
  filter: drop-shadow(0 4px 8px #00000059);
  border: 16px solid #0000;
  border-image: url(/assets/tiny-swords/ui/panel-parchment.png) 128 fill / 16px;
  animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) login-panel-in;
}

.panel-dark {
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px #0006);
  border: 20px solid #0000;
  border-image: url(/assets/tiny-swords/ui/panel-special.png) 96 fill / 20px;
}

.game-close {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px #00000059);
  background: url(/assets/tiny-swords/ui/game-close.png) 50% / contain no-repeat;
  border: none;
  flex: none;
  padding: 0;
  transition: transform 60ms, filter 0.1s;
}
.game-close:hover {
  filter: brightness(1.12) drop-shadow(0 2px 3px #00000059);
  transform: scale(1.12);
}
.game-close:active { transform: scale(0.9); }
@media (hover: none) {
  .game-close { background-size: 30px; width: 44px; height: 44px; }
}

.game-btn {
  min-width: 96px;
  height: 52px;
  font-family: var(--font-pixel), var(--font-zh), system-ui, sans-serif;
  white-space: nowrap;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 2px #0006;
  image-rendering: pixelated;
  cursor: pointer;
  background: 0 0;
  border: 0 solid #0000;
  border-width: 0 20px;
  border-image: url(/assets/tiny-swords/ui/game-btn.png) 0 64 fill / 0 24px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 18px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: filter 0.12s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
}
.game-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.game-btn:active:not(:disabled) {
  border-image-source: url(/assets/tiny-swords/ui/game-btn-pressed.png);
  padding-bottom: 4px;
  transition: transform 40ms;
  transform: translateY(2px) scale(0.97);
}
.game-btn:disabled {
  filter: grayscale(0.5) brightness(0.85);
  opacity: 0.6;
  cursor: not-allowed;
}
.game-btn-red { border-image-source: url(/assets/tiny-swords/ui/game-btn-red.png); }
.game-btn-red:active:not(:disabled) {
  border-image-source: url(/assets/tiny-swords/ui/game-btn-red-pressed.png);
}
.game-btn-green { filter: hue-rotate(-78deg) saturate(1.1); }
.game-btn-green:hover:not(:disabled) {
  filter: hue-rotate(-78deg) saturate(1.1) brightness(1.08);
}
.game-btn-amber { filter: hue-rotate(-158deg) saturate(1.5) brightness(1.05); }
.game-btn-amber:hover:not(:disabled) {
  filter: hue-rotate(-158deg) saturate(1.5) brightness(1.12);
}
.game-btn-sm {
  border-width: 0 15px;
  min-width: 76px;
  height: 42px;
  padding: 0 12px 5px;
  font-size: 13px;
}
.game-btn-xs {
  border-width: 0 14px;
  border-image-width: 0 14px;
  min-width: 52px;
  height: 30px;
  padding: 0 6px 4px;
  font-size: 11px;
}
.game-btn-block {
  width: 100%;
  min-width: 0;
}

.ui-title {
  font-family: var(--font-display), var(--font-zh), system-ui, sans-serif;
  letter-spacing: 0.5px;
}

.gacha-pop { animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) gacha-pop; }
.backdrop-in { animation: 0.2s ease-out backdrop-in; }

@keyframes login-panel-in {
  0% { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes gacha-pop {
  0% { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes backdrop-in {
  0% { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mobile-sheet-in {
  0% { opacity: 0.3; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}