:root {
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  color: #005e50;
  background: #55bb99;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 8px;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #ffd540;
  outline-offset: 3px;
}
button:hover:not(:disabled) {
  filter: brightness(1.07);
}
a {
  color: inherit;
}
#app {
  max-width: 1080px;
  margin: 0 auto;
}
.shell {
  position: relative;
  background: #eaffdb;
  min-height: 720px;
  box-shadow: 0 1px 0 #008f6f;
  overflow: hidden;
}
.topbar,
.bottom {
  height: 30px;
  display: flex;
  align-items: center;
  background: #008f6f;
  color: #efffec;
  padding: 3px 10px;
  gap: 10px;
}
.topbar .right {
  margin-left: auto;
}
.topbar button,
.bottom button {
  min-width: 150px;
  border-radius: 5px;
  background: #efffec;
  color: #008f6f;
  height: 24px;
  line-height: 22px;
  font-size: 19px;
  padding: 0 14px;
}
.topbar .identity {
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bottom {
  justify-content: center;
}
.bottom .credit {
  font-size: 10px;
  position: absolute;
  left: 12px;
  opacity: 0.85;
}
.sound {
  position: absolute;
  right: 10px;
  min-width: 0 !important;
  font-size: 15px !important;
}
.screen {
  min-height: 660px;
  position: relative;
  background: center/cover url("/images/screens/menu.webp");
}
.home {
  background: center/100% 113% url("/images/screens/home.webp");
  height: 660px;
  text-align: center;
  padding-top: 90px;
}
.logo {
  width: 590px;
  height: 190px;
  max-width: 80%;
  object-fit: contain;
}
.birth {
  width: 480px;
  max-width: 90%;
  margin: 18px auto;
}
.birth label {
  display: block;
  text-align: left;
  margin: 0 50px 8px;
  font-size: 24px;
  font-weight: bold;
  color: #008f6f;
  text-shadow:
    1px 1px white,
    -1px -1px white;
}
.birth input {
  display: block;
  width: 360px;
  max-width: calc(100% - 50px);
  margin: 0 auto 28px;
  border: 2px solid #8d9e61;
  border-radius: 5px;
  background: #efffa5;
  height: 35px;
  color: #245e40;
  padding: 3px 10px;
}
.big {
  display: block;
  background: #008f6f;
  color: #efffec;
  border: 3px solid #008f6f;
  outline: 2px solid #efffec;
  outline-offset: -7px;
  border-radius: 22px;
  font-weight: bold;
  font-size: 50px;
  padding: 4px 28px;
  width: 100%;
  min-height: 90px;
  box-shadow: 0 0 0 1px #008f6f;
}
.home-note {
  font-size: 14px;
  margin-top: 44px;
  color: #376b44;
}
.home-note a {
  display: inline-block;
  margin-top: 12px;
}
.menu {
  padding: 45px 85px;
}
.menu-logo {
  display: block;
  width: 370px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 30px;
}
.mode-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mode {
  background: #008f6fe8;
  border: 3px solid #eaffdb;
  outline: 2px solid #008f6f;
  border-radius: 24px;
  color: #efffec;
  min-height: 190px;
  padding: 20px 10px;
  text-align: center;
}
.mode strong {
  font-size: 32px;
  display: block;
  margin: 10px 0;
}
.mode .symbol {
  font-size: 42px;
}
.mode small {
  font-size: 17px;
}
.welcome {
  text-align: center;
  font-size: 23px;
  font-weight: bold;
  margin: 32px 0 25px;
}
.subscreen {
  padding: 30px 60px;
}
.panel {
  background: #f5ffeddc;
  border: 2px solid #008f6f;
  border-radius: 18px;
  padding: 25px;
  max-width: 750px;
  margin: 0 auto;
  color: #006751;
}
.panel h1 {
  margin: 0 0 16px;
  font-size: 36px;
}
.panel p {
  line-height: 1.9;
}
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.field input,
.field select,
.chat-form input,
.search {
  border: 2px solid #7dab6c;
  background: #f5ffd3;
  border-radius: 6px;
  padding: 8px;
  color: #006751;
  min-width: 0;
}
.field input {
  flex: 1;
}
.primary,
.secondary,
.danger {
  padding: 9px 22px;
  border-radius: 10px;
  background: #008f6f;
  color: #efffec;
  font-weight: bold;
  border: 2px solid #eaffdb;
  box-shadow: 0 0 0 1px #008f6f;
}
.secondary {
  background: #efffec;
  color: #008f6f;
}
.danger {
  background: #a24e41;
}
.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.count-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 30px 0;
}
.count-options button {
  border: 2px solid #008f6f;
  border-radius: 15px;
  background: #efffec;
  font-size: 24px;
  padding: 16px;
}
.count-options .chosen {
  background: #006f8f;
  color: white;
}
.room-screen {
  padding: 16px 24px;
}
.room-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
}
.room-heading h1 {
  font-size: 27px;
  margin: 0;
}
.room-heading .invite {
  margin-left: auto;
}
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 18px;
}
.lobby-players {
  display: grid;
  gap: 8px;
}
.lobby-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f4ffdd;
  border: 1px solid #008f6f;
  border-radius: 10px;
  font-size: 19px;
}
.lobby-player .seat {
  font-weight: bold;
  background: #008f6f;
  color: white;
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 50%;
  line-height: 32px;
}
.lobby-player .name {
  flex: 1;
  overflow-wrap: anywhere;
}
.lobby-player select {
  width: 76px;
}
.minor {
  font-size: 12px;
  opacity: 0.8;
}
.chat {
  display: flex;
  flex-direction: column;
  background: #efffec;
  border: 1px solid #008f6f;
  border-radius: 12px;
  min-height: 230px;
  overflow: hidden;
}
.chat h3 {
  margin: 0;
  background: #008f6f;
  color: #efffec;
  font-size: 16px;
  padding: 8px;
}
.chat-messages {
  flex: 1;
  overflow: auto;
  padding: 10px;
  font-size: 13px;
  max-height: 310px;
  overflow-wrap: anywhere;
}
.chat-messages p {
  margin: 0 0 7px;
}
.chat-form {
  display: flex;
  gap: 4px;
  padding: 7px;
}
.chat-form input {
  width: 100%;
  padding: 5px;
  font-size: 13px;
}
.chat-form button {
  background: #008f6f;
  color: white;
  border-radius: 5px;
  flex-shrink: 0;
}
.battle {
  background: center/cover url("/images/screens/room.webp");
  padding: 14px 18px 10px;
  min-height: 660px;
}
.battle.doom {
  background-image: url("/images/screens/tiebreak.webp");
}
.battle-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  min-height: 26px;
  margin-bottom: 8px;
}
.battle-title .phase {
  font-weight: bold;
  font-size: 20px;
}
.players {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.player {
  position: relative;
  text-align: left;
  background: #f4ffdded;
  border: 2px solid #008f6f;
  border-radius: 9px;
  padding: 5px 10px;
  min-height: 78px;
  overflow: hidden;
}
.player.active {
  border: 3px solid #ffb533;
  background: #fff8d3;
  padding: 4px 9px;
}
.player.target {
  box-shadow: inset 0 0 0 3px #c65d40;
}
.player.dead {
  opacity: 0.4;
  filter: grayscale(1);
}
.player-name {
  font-weight: bold;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.player-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-name small {
  font-size: 11px;
  margin-left: auto;
}
.stats {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 3px;
  font-weight: bold;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.stats .hp {
  color: #c33e42;
}
.stats .mp {
  color: #2969ad;
}
.stats .cp {
  color: #ac8422;
}
.stats small {
  font-size: 12px;
  margin-right: 4px;
}
.hpbar {
  height: 3px;
  background: #d9e6c2;
  margin-top: 3px;
}
.hpbar i {
  display: block;
  height: 100%;
  background: #e77066;
  max-width: 100%;
}
.curse-badges {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: flex;
  gap: 2px;
}
.curse-badges img {
  height: 16px;
  width: 30px;
}
.guardian {
  height: 27px;
  width: 32px;
  object-fit: contain;
}
.arena {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 10px;
  margin: 12px 0;
}
.action-panel {
  position: relative;
  background: #f8ffdfed;
  border: 2px solid #008f6f;
  border-radius: 12px;
  padding: 12px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.action-panel h2 {
  font-size: 21px;
  margin: 0 0 5px;
}
.action-panel .hint {
  font-size: 13px;
  min-height: 20px;
  margin: 3px 0;
}
.attack-info {
  font-size: 23px;
  color: #b64436;
  font-weight: bold;
}
.selected-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 35px;
  flex-wrap: wrap;
}
.selected-preview img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.battle-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.battle-actions button {
  padding: 6px 18px;
  min-width: 95px;
}
.log {
  background: #efffeccc;
  border: 1px solid #008f6f;
  border-radius: 9px;
  padding: 8px;
  font-size: 12px;
  height: 155px;
  overflow: auto;
}
.log p {
  margin: 0 0 4px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.log p:last-child {
  font-weight: bold;
}
.hand-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  margin: 6px 0;
  font-size: 15px;
}
.hand-heading small {
  font-weight: normal;
  font-size: 12px;
  margin-left: auto;
}
.hand {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.card {
  background: #f4ffdd;
  border: 1px solid #008f6f;
  border-radius: 8px;
  position: relative;
  text-align: center;
  min-height: 131px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  box-shadow: 0 2px 2px #004c3d22;
  transition: transform 0.1s;
}
.card.selected {
  background: #fff6b5;
  outline: 3px solid #e6aa36;
  transform: translateY(-4px);
}
.card img.art {
  width: 65px;
  height: 65px;
  object-fit: contain;
  pointer-events: none;
}
.card .card-name {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
}
.card .card-stat {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px;
  color: #855630;
}
.card .card-stat .element {
  height: 17px;
  width: 17px;
}
.card .price {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 11px;
  color: #b28223;
}
.card .detail {
  font-size: 9px;
  line-height: 1.3;
  margin-top: 2px;
}
.card .cost {
  color: #216dad;
}
.card.learned {
  background: #e6f0ff;
  border-color: #4b88ab;
}
.miracles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.miracles .card {
  width: 105px;
  min-height: 115px;
}
.battle-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  font-size: 11px;
  gap: 10px;
}
.timer {
  font-variant-numeric: tabular-nums;
}
.connection {
  font-size: 12px;
  color: #e5ffc9;
}
.connection.offline {
  color: #fff1a6;
}
.winner {
  font-size: 42px !important;
  color: #bd8a1a;
  margin: 0;
}
.empty-hand {
  font-size: 13px;
  padding: 15px;
  background: #f4ffdd;
}
.loading {
  padding: 100px;
  text-align: center;
  font-size: 24px;
}
#toast {
  position: fixed;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: #213e36ef;
  color: white;
  padding: 13px 24px;
  border-radius: 10px;
  z-index: 50;
  max-width: 90%;
  display: none;
  box-shadow: 0 5px 25px #003b3b44;
}
dialog {
  border: 2px solid #008f6f;
  border-radius: 18px;
  background: #f4ffdd;
  color: #006751;
  padding: 0;
  max-width: 950px;
  width: 90vw;
  max-height: 85vh;
  box-shadow: 0 20px 70px #003a3355;
}
dialog::backdrop {
  background: #002b3366;
}
.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #008f6f;
  color: #efffec;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h2 {
  margin: 0;
  font-size: 22px;
}
.modal-head button {
  background: #efffec;
  border-radius: 8px;
  padding: 3px 15px;
  font-size: 19px;
}
.modal-body {
  padding: 22px;
}
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.tabs button {
  padding: 6px 12px;
  border: 1px solid #008f6f;
  border-radius: 6px;
  background: #efffec;
}
.tabs button.chosen {
  background: #008f6f;
  color: white;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.catalog-grid .card {
  cursor: default;
  min-height: 166px;
}
.catalog-grid .card .detail {
  font-size: 11px;
}
.search {
  width: 100%;
  margin-bottom: 15px;
}
.rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.rule {
  background: white;
  border: 1px solid #b0c790;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.8;
}
.rule h3 {
  margin: 0 0 7px;
}
.rule img {
  vertical-align: middle;
  margin-right: 5px;
}
.exchange {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.exchange input {
  width: 100%;
  font-size: 30px;
  padding: 8px;
}
.exchange label {
  display: block;
  font-weight: bold;
}
.ranking {
  width: 100%;
  border-collapse: collapse;
}
.ranking td,
.ranking th {
  padding: 10px;
  border-bottom: 1px solid #b0c790;
  text-align: left;
}
.reconnecting {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #fff3b0;
  border: 1px solid #be922b;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
}
.quick-chat {
  display: flex;
  gap: 5px;
}
.quick-chat input {
  min-width: 0;
  background: #f4ffdd;
  border: 1px solid #008f6f;
  border-radius: 4px;
  padding: 4px;
  width: 150px;
}
.quick-chat button {
  background: #008f6f;
  color: white;
  border-radius: 4px;
}
.lobby-settings {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 15px 0;
  font-size: 14px;
}
.battle-chat-last {
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-help {
  font-size: 13px;
  min-height: 21px;
  margin: 4px 0;
}
.mobile-note {
  display: none;
}
@media (min-width: 901px) {
  .players:has(.player:nth-child(7)) .player {
    min-height: 67px;
  }
  .players:has(.player:nth-child(7)) .stats {
    font-size: 20px;
  }
  .players:has(.player:nth-child(7)) + .arena {
    margin-top: 8px;
  }
  .battle:has(.player:nth-child(7)) .arena .log {
    height: 126px;
  }
  .battle:has(.player:nth-child(7)) .action-panel {
    min-height: 126px;
  }
}
@media (max-width: 900px) {
  body {
    margin: 0;
  }
  .shell {
    min-height: 100dvh;
  }
  .screen {
    min-height: calc(100dvh - 60px);
  }
  .home {
    padding-top: 65px;
    height: calc(100dvh - 60px);
  }
  .logo {
    height: auto;
  }
  .home-note {
    padding: 0 15px;
  }
  .menu {
    padding: 35px 28px;
  }
  .mode-list {
    gap: 14px;
  }
  .mode strong {
    font-size: 24px;
  }
  .mode .symbol {
    font-size: 34px;
  }
  .mode {
    min-height: 160px;
  }
  .subscreen {
    padding: 25px;
  }
  .hand {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .card {
    min-height: 132px;
  }
  .battle {
    padding: 10px;
  }
  .arena {
    grid-template-columns: 1fr 220px;
  }
  .stats {
    gap: 8px;
    font-size: 20px;
  }
  .player-name {
    font-size: 14px;
  }
  .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .lobby-grid {
    grid-template-columns: 1fr 260px;
  }
  .bottom .credit {
    font-size: 9px;
  }
  .topbar .identity {
    max-width: 44vw;
  }
  .topbar button {
    min-width: 95px;
  }
  .players {
    gap: 5px;
  }
}
@media (max-width: 580px) {
  .topbar .identity {
    font-size: 12px;
  }
  .topbar button,
  .bottom button {
    font-size: 15px;
    min-width: 85px;
  }
  .bottom .credit {
    max-width: 90px;
    line-height: 1.1;
  }
  .home {
    padding-top: 95px;
  }
  .birth {
    margin-top: 35px;
  }
  .birth label {
    font-size: 21px;
    margin-left: 25px;
  }
  .big {
    font-size: 40px;
    min-height: 80px;
  }
  .mode-list {
    grid-template-columns: 1fr;
  }
  .mode {
    min-height: 115px;
    display: grid;
    grid-template-columns: 65px 1fr;
    padding: 10px 20px;
  }
  .mode .symbol {
    grid-row: span 2;
    align-self: center;
  }
  .mode strong {
    margin: 5px;
    font-size: 27px;
  }
  .menu-logo {
    width: 260px;
    height: 85px;
    margin-bottom: 18px;
  }
  .welcome {
    font-size: 18px;
    margin: 18px 0;
  }
  .menu {
    padding: 25px;
  }
  .panel {
    padding: 20px;
  }
  .panel h1 {
    font-size: 29px;
  }
  .count-options {
    gap: 9px;
  }
  .count-options button {
    padding: 14px 3px;
    font-size: 20px;
  }
  .subscreen {
    padding: 18px;
  }
  .room-screen {
    padding: 15px;
  }
  .lobby-grid {
    grid-template-columns: 1fr;
  }
  .chat {
    min-height: 170px;
  }
  .chat-messages {
    max-height: 160px;
  }
  .room-heading h1 {
    font-size: 22px;
  }
  .room-heading .invite {
    font-size: 12px;
    padding: 6px;
  }
  .players {
    grid-template-columns: repeat(2, 1fr);
  }
  .player {
    padding: 5px 7px;
    min-height: 77px;
  }
  .player.active {
    padding: 4px 6px;
  }
  .player-name {
    font-size: 14px;
  }
  .player-name small {
    font-size: 9px;
  }
  .stats {
    font-size: 20px;
    gap: 9px;
  }
  .stats small {
    font-size: 10px;
    margin-right: 1px;
  }
  .arena {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 8px 0;
  }
  .log {
    height: 65px;
    font-size: 11px;
  }
  .action-panel {
    min-height: 146px;
    padding: 10px;
  }
  .action-panel h2 {
    font-size: 18px;
  }
  .hand {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .card img.art {
    height: 57px;
    width: 57px;
  }
  .card .card-name {
    font-size: 10px;
  }
  .card {
    min-height: 126px;
  }
  .card .card-stat {
    font-size: 13px;
  }
  .card .detail {
    font-size: 9px;
  }
  .hand-heading {
    font-size: 13px;
  }
  .hand-heading small {
    font-size: 10px;
  }
  .battle-bottom {
    flex-wrap: wrap;
  }
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .modal-body {
    padding: 14px;
  }
  .rule-grid {
    grid-template-columns: 1fr;
  }
  .battle-title .phase {
    font-size: 17px;
  }
  .battle-title {
    font-size: 12px;
  }
  .battle-actions {
    gap: 5px;
  }
  .battle-actions button {
    padding: 7px 12px;
    min-width: 80px;
  }
  .exchange {
    gap: 10px;
  }
  .exchange input {
    font-size: 24px;
  }
  .card-help {
    font-size: 11px;
  }
  .quick-chat {
    margin-left: auto;
  }
  .sound {
    font-size: 12px !important;
  }
  .battle-chat-last {
    max-width: 180px;
  }
}
/* Original 1080 × 720 composition, with a flowing layout on smaller screens. */
.footer-name {
  position: absolute;
  left: 70px;
  font-size: 20px;
}
.bottom .credit {
  left: auto;
  right: 180px;
  font-size: 9px;
}
.gf-counter {
  position: absolute;
  left: calc(50% - 58px);
  border-radius: 20px;
  background: #efffec;
  color: #cf7762;
  min-width: 116px;
  text-align: center;
  font-weight: bold;
}
.gf-counter:empty {
  display: none;
}
.menu {
  padding: 22px 0;
}
.mode-list {
  display: flex;
  flex-direction: column;
  width: 500px;
  max-width: 90%;
  margin: auto;
  gap: 16px;
}
.mode {
  display: flex;
  flex-direction: column;
  min-height: 194px;
  height: 194px;
  padding: 0 8px 8px;
  border-radius: 40px;
  outline: 2px solid currentColor;
  justify-content: space-between;
  border: 2px solid #efffec;
}
.mode strong {
  font-size: 70px;
  line-height: 1.25;
  margin: 6px 0 0;
}
.mode small {
  font-size: 23px;
  line-height: 30px;
}
.mode-band {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  width: 100%;
  font-weight: bold;
  background: #efffec;
  color: #008f6f;
}
.mode-training {
  background: #eeeeff;
  color: #00758c;
  border-color: #00758c;
  outline: none;
  border-width: 4px;
}
.mode-training .mode-band {
  background: #00758c;
  color: #eeeeff;
}
.mode-private {
  background: #008f6f;
  color: #efffec;
}
.mode-duel {
  background: #fff2f4;
  color: #df84ad;
  border-color: #df84ad;
  outline: none;
  border-width: 4px;
}
.mode-duel .mode-band {
  background: #df84ad;
  color: #fff2f4;
}
.card-inspector,
.miracle-toggle {
  display: none;
}
@media (min-width: 901px) {
  .battle {
    height: 660px;
    position: relative;
    padding: 0;
  }
  .battle-title {
    position: absolute;
    top: 16px;
    left: 30px;
    width: 630px;
    z-index: 1;
  }
  .battle-title .phase {
    display: none;
  }
  .battle-title > span:last-child {
    margin-left: auto;
    opacity: 0.75;
    font-size: 12px;
  }
  .players {
    position: absolute;
    left: 680px;
    top: 48px;
    width: 340px;
    height: 264px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 4px;
  }
  .player,
  .players:has(.player:nth-child(7)) .player {
    flex-shrink: 0;
    min-height: 39px;
    height: 39px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 22px 0 0 22px;
    padding: 0 6px 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
  }
  .player::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #aaa;
    position: absolute;
    left: 8px;
    top: 11px;
  }
  .player.active {
    border: 1px solid #aaa;
    padding: 0 6px 0 34px;
    background: #eee;
  }
  .player.active::before {
    background: #efc650;
  }
  .player.target {
    box-shadow: 0 0 0 3px #d38362;
  }
  .player .player-name {
    font-size: 21px;
    line-height: 1.2;
    max-width: 132px;
    overflow: hidden;
    color: #4c46e5;
  }
  .player .player-name small {
    display: none;
  }
  .player:first-child .player-name {
    color: #008f6f;
  }
  .player .stats,
  .players:has(.player:nth-child(7)) .stats {
    font-size: 20px;
    gap: 7px;
    margin: 0;
    flex-shrink: 0;
  }
  .player .stats span {
    color: #555;
  }
  .player .stats small {
    color: #6d9391;
    font-size: 14px;
    margin-right: 2px;
  }
  .player .hpbar {
    display: none;
  }
  .player .curse-badges {
    bottom: -12px;
    right: 0;
  }
  .player .guardian {
    position: absolute;
    left: -36px;
    height: 40px;
    width: 40px;
    top: 0;
  }
  .players:has(.player:nth-child(7)) {
    height: 310px;
    top: 24px;
  }
  .players:has(.player:nth-child(7)) .player {
    min-height: 30px;
    height: 30px;
  }
  .players:has(.player:nth-child(7)) .player::before {
    top: 7px;
  }
  .players:has(.player:nth-child(7)) .player .player-name {
    font-size: 18px;
  }
  .arena {
    display: block;
    margin: 0;
    position: absolute;
    left: 30px;
    top: 16px;
    width: 630px;
    height: 390px;
  }
  .action-panel,
  .battle:has(.player:nth-child(7)) .action-panel {
    height: 390px;
    background: transparent;
    border: 0;
    padding: 0;
    justify-content: start;
    text-align: left;
    min-height: 0;
  }
  .action-panel h2 {
    height: 30px;
    max-width: 330px;
    border: 1px solid #aaa;
    border-radius: 20px;
    background: #eee;
    text-align: center;
    font-size: 19px;
    line-height: 27px;
    margin: 0;
    color: #008f6f;
  }
  .action-panel .hint {
    position: absolute;
    top: 300px;
    font-size: 12px;
    color: #407c79;
  }
  .selected-preview {
    position: absolute;
    top: 95px;
    left: 10px;
    width: 600px;
    min-height: 100px;
    justify-content: flex-start;
  }
  .selected-preview > img {
    width: 80px;
    height: 80px;
  }
  .selected-preview .minor {
    font-size: 16px;
    opacity: 0.45;
  }
  .battle-actions {
    position: absolute;
    left: 10px;
    top: 348px;
    margin: 0;
    justify-content: flex-start;
  }
  .battle-actions button {
    font-size: 23px;
    border-radius: 9px;
    min-width: 125px;
    box-shadow: none;
    border: 0;
    background: #008b8d;
    color: #efffec;
    font-weight: bold;
    padding: 2px 18px;
    min-height: 40px;
  }
  .battle-actions button:first-child {
    min-width: 260px;
  }
  .battle-actions button:disabled {
    opacity: 0.3;
  }
  .battle-actions .secondary {
    background: #eaffdc;
    color: #57837a;
    font-size: 17px;
    min-width: 100px;
  }
  .action-panel .attack-info {
    position: absolute;
    top: 62px;
    left: 10px;
    max-width: 590px;
    font-size: 22px;
  }
  .action-panel .winner {
    position: absolute;
    left: 120px;
    top: 80px;
    font-size: 64px !important;
  }
  .action-panel .winner + .hint {
    top: 180px;
    font-size: 20px;
  }
  .arena > .log {
    display: none;
  }
  .battle > .hand-heading {
    display: none;
  }
  .battle > .hand {
    position: absolute;
    left: 10px;
    top: 455px;
    width: 736px;
    display: grid;
    grid-template-columns: repeat(9, 80px);
    gap: 12px 2px;
    border-top: 0;
    max-height: 204px;
    overflow: auto;
    scrollbar-width: thin;
  }
  .battle > .hand:has(.card:nth-child(10)) {
    top: 445px;
  }
  .battle > .hand::before {
    content: none;
  }
  .battle::before {
    content: "";
    position: absolute;
    top: 420px;
    left: 0;
    width: 660px;
    height: 20px;
    background: #008f6f;
    border-radius: 0 5px 5px 0;
  }
  .hand .card {
    height: 100px;
    min-height: 100px;
    border: 0;
    border-radius: 0 0 8px 8px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: block;
  }
  .hand .card img.art {
    width: 80px;
    height: 80px;
    display: block;
  }
  .hand .card .card-name,
  .hand .card .price,
  .hand .card .detail {
    display: none;
  }
  .hand .card .card-stat {
    background: #e3ffc8;
    color: #555;
    border-radius: 0 0 8px 8px;
    font-size: 19px;
    line-height: 20px;
    min-height: 0;
    gap: 0;
  }
  .hand .card .card-stat:empty {
    display: none;
  }
  .hand .card .card-stat .element {
    height: 15px;
    width: 15px;
  }
  .hand .card.selected {
    outline: 3px solid #f4db67;
    transform: translateY(-8px);
    background: #e3ffc8;
  }
  .hand .card.selected img.art {
    filter: brightness(1.15);
  }
  .hand .card .card-stat small {
    font-size: 14px;
  }
  .card-inspector {
    position: absolute;
    display: flex;
    left: 770px;
    top: 420px;
    width: 300px;
    min-height: 90px;
    border: 5px solid #55bb99;
    background: #e3ffc8;
    border-radius: 5px;
    padding: 0;
    gap: 5px;
    color: #555;
  }
  .card-inspector > img {
    width: 80px;
    height: 80px;
  }
  .card-inspector > div {
    flex: 1;
    min-width: 0;
    padding: 0 1px;
  }
  .card-inspector strong {
    display: block;
    border: 1px solid #86bba3;
    padding: 1px 4px;
    font-size: 18px;
    line-height: 26px;
  }
  .card-inspector span {
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding-left: 20px;
  }
  .card-inspector small {
    display: block;
    font-size: 12px;
    padding: 0 3px;
    max-width: 160px;
  }
  .card-inspector b {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: #ffffa4;
    border-radius: 50%;
    border: 1px solid #d9d978;
    min-width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: normal;
  }
  .miracle-toggle {
    display: block;
    position: absolute;
    left: 770px;
    top: 360px;
    width: 250px;
    height: 40px;
    background: #eee;
    border: 2px solid #799d9c;
    border-radius: 11px;
    font-size: 27px;
    color: #799d9c;
  }
  .battle > .miracles {
    display: none;
  }
  .battle > .card-help {
    position: absolute;
    left: 12px;
    top: 570px;
    font-size: 12px;
    width: 730px;
    max-height: 38px;
    overflow: hidden;
  }
  .battle:has(.hand .card:nth-child(10)) > .card-help {
    display: none;
  }
  .battle-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
  }
  .battle-bottom > span:first-child {
    display: none;
  }
  .battle-bottom > button {
    margin-left: auto;
    background: #efffecaa;
    border-radius: 4px;
    color: #648d82;
  }
  .battle-bottom > button + button {
    margin-left: 5px;
  }
  .battle-bottom .quick-chat {
    margin-left: 8px;
  }
  .battle-bottom .battle-chat-last {
    max-width: 400px;
  }
}
@media (max-width: 580px) {
  .mode-list {
    gap: 15px;
    max-width: 94%;
  }
  .mode {
    min-height: 155px;
    height: 155px;
    padding: 0 6px 7px;
    border-radius: 30px;
  }
  .mode strong {
    font-size: 45px;
    margin: 5px 0 0;
  }
  .mode small {
    font-size: 19px;
    line-height: 25px;
  }
  .mode-band {
    height: 36px;
    line-height: 36px;
    font-size: 15px;
  }
  .menu {
    padding: 28px 0;
  }
  .footer-name {
    left: 10px;
    font-size: 12px;
    max-width: 100px;
    overflow: hidden;
  }
  .bottom .credit {
    display: none;
  }
  .gf-counter {
    font-size: 12px;
    min-width: 65px;
    left: calc(50% - 32px);
  }
  .topbar .identity {
    max-width: 90px;
  }
}
.training-screen {
  background-image: url("/images/screens/room.webp");
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150px 20px 80px;
  gap: 50px;
}
.training-count {
  width: 600px;
  max-width: 95%;
  height: 100px;
  border: 4px solid #00758c;
  border-radius: 22px;
  background: #eeeeff;
  color: #00758c;
  font-size: 68px;
  font-weight: bold;
  line-height: 1;
}
.training-doom {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #008f6f;
  border: 3px double #efffec;
  border-radius: 13px;
  width: 200px;
  height: 70px;
  font-size: 24px;
  color: #efffec;
  font-weight: bold;
  line-height: 31px;
}
.training-doom select {
  border: 1px solid #efffec;
  border-radius: 20px;
  color: #efffec;
  background: #008f6f;
  width: 120px;
  height: 24px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
}
.training-start {
  background: #ffeebb;
  border: 4px solid #cdbd86;
  border-radius: 22px;
  color: #555;
  font-size: 60px;
  font-weight: bold;
  width: 480px;
  max-width: 95%;
  height: 90px;
  line-height: 1;
}
.training-start:hover {
  background: #fff3d6;
}
@media (max-width: 580px) {
  .training-screen {
    padding-top: 100px;
    gap: 50px;
  }
  .training-count {
    height: 90px;
    font-size: 42px;
  }
  .training-start {
    font-size: 38px;
    height: 80px;
  }
}
@media (min-width: 901px) {
  .hand .card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .hand .card .card-stat {
    font-size: 17px;
    white-space: nowrap;
  }
  .selected-preview img {
    animation: select-in 0.15s ease-out;
  }
  .player-name span {
    font-size: inherit;
  }
  .player-name {
    letter-spacing: -0.5px;
  }
}
@keyframes select-in {
  from {
    opacity: 0.2;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.team-chat-option {
  float: right;
  font-size: 12px;
}
.team-chat-option input {
  vertical-align: middle;
}
.quick-chat label {
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.quick-chat label input {
  width: auto;
}
.team-player {
  border-color: var(--team-color);
}
.team-player .player-name {
  color: var(--team-color) !important;
}
.team-player::before {
  background: var(--team-color) !important;
}
.team-player.active::before {
  outline: 3px solid #f2cf4b;
  outline-offset: 1px;
}