:root {
  --columns-width: 100%;
  --main-column-width: 80%;
  --main-column-padding-x: 20px;
  --main-column-padding-bottom: 20px;
  --sub-column-width: 20%;
  --sub-column-padding-x: 0;
  --role-tank: #6a9aaa;
  --role-tank-dark: #2c3e50;
  --role-tank-light: #3d5a62;
  --role-dps: #b07878;
  --role-dps-dark: #6b3333;
  --role-dps-light: #8a4444;
  --role-heal: #6aaa7a;
  --role-heal-dark: #2a5c35;
  --role-heal-light: #3d7a47;
  --role-sup: #c9a050;
  --role-sup-dark: #6b4a20;
  --role-sup-light: #8a6030;
  --equip-weapon: #9a6060;
  --equip-weapon-dark: #5c3030;
  --equip-armor: #5a7a8a;
  --equip-armor-dark: #2c3e50;
  --equip-accessory: #a88848;
  --equip-accessory-dark: #5a4820;
}

@font-face {
  font-family: Meiryo;
  src: local('Meiryo'), local('メイリオ');
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

html {
  background-color: #202020;
}

img {
  pointer-events: none;
  user-select: none;
}

body {
  font-size: 1em;
  line-height: 1.7;
  font-weight: 400;

  color: #DDD;
}

input,
textarea,
select {
  margin: 8px 0;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  color: #333333;
}

.message {
  border: 1px solid lightgray;
  padding: 8px;
  border-radius: 4px;
  break-inside: avoid-column;
  margin-bottom: 10px;
  display: flex;
}

.message-main {
  box-sizing: border-box;
  margin: 0 0 0 8px;
  width: 100%;
  font-size: 1em;
  word-break: break-all;
}

input::placeholder,
textarea::placeholder {
  color: #858585;
}

.levelUp {
  display: inline-block;
  border-radius: 4px;
  color: #ffd700;
  font-weight: bold;
  font-size: 18px;
}

hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

p,
h4 {
    margin: 18px 10px 8px;
    padding: 0 20px;
}

h1 {
  display: block;
  background-image:
    repeating-linear-gradient(105deg,
      rgba(112, 202, 124, 0.06) 0px,
      rgba(112, 202, 124, 0.06) 3px,
      transparent 3px,
      transparent 6px),
    linear-gradient(90deg,
      rgb(12, 12, 12),
      rgb(12, 12, 12));
  background-color: #222;
  margin: 10px 5px;
  padding: 10px;
  font-size: 18px;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'MS PGothic', sans-serif;
  letter-spacing: 0;
  border: #ffffff 1px solid;
}

h2 {
  font-size: 15px;
  margin: 20px 5px;
  padding: 8px 0 8px 20px;
  background-image:
    repeating-linear-gradient(105deg,
      rgba(112, 202, 124, 0.06) 0px,
      rgba(112, 202, 124, 0.06) 3px,
      transparent 3px,
      transparent 6px),
    linear-gradient(90deg,
      rgb(12, 12, 12),
      rgb(12, 12, 12));
  background-color: #222;
  border: #ffffff 1px solid;
}

h3 {
  font-size: 18px;
  margin: 18px 0px 8px;
  padding: 0 20px;
  color: #ddd;
}

ul {
  padding: 0;
}

.form {

  margin: 10px 0 0 20px;
}

.form-title {
  font-weight: bold;
  color: #BBBBBB;
}

.description-box {
  margin: 12px 16px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 18px;
  line-height: 1.7;
}

.description-box-light {
  margin: 12px 16px;
  background-color: rgba(0, 27, 9, 0.1);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 18px;
  line-height: 1.7;
}

.form-input {
  width: 300px;
}

.form-input-long {
  width: 600px;
}

.form-input-table {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  padding: 2px;
  border-radius: 0;
}

.form-textarea {
  margin: 8px 0;
  width: 600px;
  height: 200px;
  resize: none;
}

.form-check-button {
  height: 36px;
  margin-left: 4px;
  padding: 0 10px;
}

.button-link-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.button-link-wrapper>a {
  display: inline-block;
  text-decoration: none;
  color: #444444;
  padding: 6px 24px;
  background-color: transparent;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 4px;
}

.button-wrapper {
  width: 100%;
  margin: 10px 0 10px 20px;
  justify-content: flex-end;
}

.button {
  color: #dff5e3;
  padding: 6px 20px;
  background: linear-gradient(to bottom, #2a5c35, #1a3d23);
  border: 1px solid rgba(112, 202, 124, 0.35);
  border-radius: 6px;
  margin: 4px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.button:hover {
  color: #fff;
  background: linear-gradient(to bottom, #3a7a47, #265430);
  border-color: rgba(112, 202, 124, 0.7);
  box-shadow: 0 2px 8px rgba(112, 202, 124, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-enable {
  background-color: #444444;
  color: #222;
}

.profile-parameters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: 600;
}

.message-banner {
  width: 100%;
  margin: 20px 0;
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
}

.message-banner-success {
  border: 1px solid #007243;
  background-color: #9cd9ac;
}

.message-banner-info {
  border: 1px solid #005476;
  background-color: #79baca;
}

.message-banner-warning {
  border: 1px solid #b39300;
  background: rgba(0, 0, 0, 0.5);
}

.message-banner-error {
  border: 1px solid #a61d39;
  background-color: #4e1915;
}

.icon-wrapper {

  width: 60px;
  height: 60px;
}

.icon {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.icon-noimage {
  background: linear-gradient(0deg, #444444, 70%, #CCCCCC);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.icon-noimage::before {
  content: "No Image";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 0.875em;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
}

.profile-character-icon-wrapper .icon-wrapper .icon-noimage::before {
  content: "";
}

tr.dragging {
  opacity: 0.5;
}

tr.drag-over {
  border: 2px dashed #000;
}

.pagelink {
  display: inline-flex;
  justify-content: center;
  min-width: 57px;
  padding: 4px 10px;
  border: 1px solid #CCC;
  border-radius: 4px;
  margin: 4px;
  text-decoration: none;
  font-weight: bold;
  color: #CCC;
}

.pagelinks {
  background: linear-gradient(to bottom, #4a4a4a, #333333);
  margin: 10px 0px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #F8F8F8;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagelink-current {
  background-color: #444;
  color: #EEE;
}

.next-prev-pagelinks {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.next-prev-pagelinks-page {
  font-weight: bold;
  color: #ffffff;
  font-size: 18px;
}

.next-prev-pagelinks-invalid {
  visibility: hidden;
}

.next-prev-pagelinks>div:first-child .pagelink::before {
  content: "◀ ";
}

.next-prev-pagelinks>div:last-child .pagelink::after {
  content: " ➤";
}

.message-editor-wrapper {
  margin: 0 auto;
  width: 95%;
}

.message-editor {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
  resize: none;
  margin: 0;
}

  .room-message {
    margin: 10px 14px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid lightgray;
    padding: 12px;
    border-radius: 6px;
    break-inside: avoid-column;
    margin-bottom: 12px;
    display: flex;
  }

.message-list {
  columns: 2;
  column-rule: 1px solid lightgray;
}

.message-list-single-item {
  column-rule: 1px solid transparent;
}

.message-refers {
  text-decoration: none;
  color: #CCC;
  font-size: 12px;
}

.message-info-link {
  text-decoration: none;
}

.message-info {
  font-weight: bold;
  color: #CCC;
}

.message-info-eno {
  font-weight: normal;
  font-size: 12px;
  color: #BBBBBB;
}

.message-details {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.message-detail {
  font-weight: normal;
  font-size: 12px;
  color: #BBBBBB;
}

.message-actions {
  display: flex;
}

.message-action {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  margin-left: 4px;
  min-width: 40px;
  border: 1px solid lightgray;
  background: none;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #FFF;
}

.small-1 {
  font-size: 70%;
}

.small-2 {
  font-size: 76%;
}

.small-3 {
  font-size: 80%;
}

.small-4 {
  font-size: 85%;
}

.small-5 {
  font-size: 90%;
}

.large-1 {
  font-size: 120%;
}

.large-2 {
  font-size: 140%;
}

.large-3 {
  font-size: 160%;
}

.large-4 {
  font-size: 180%;
}

.large-5 {
  font-size: 200%;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.strike {
  text-decoration: line-through;
}

.job-icon {
  font-size: 1.2em;
  display: inline-block;
}

.job-tank {
  background: linear-gradient(135deg, #4a90e2 0%, #2c5aa0 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.job-dps {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.job-heal {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.job-sup {
  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-role-strip.bg-tank { background: linear-gradient(90deg, var(--role-tank-dark), var(--role-tank-light)); }
.card-role-strip.bg-dps { background: linear-gradient(90deg, var(--role-dps-dark), var(--role-dps-light)); }
.card-role-strip.bg-heal { background: linear-gradient(90deg, var(--role-heal-dark), var(--role-heal-light)); }
.card-role-strip.bg-sup { background: linear-gradient(90deg, var(--role-sup-dark), var(--role-sup-light)); }

.text-tank { color: var(--role-tank); }
.text-dps { color: var(--role-dps); }
.text-heal { color: var(--role-heal); }
.text-sup { color: var(--role-sup); }

header {
  display: flex;
}

#title {
  margin: 0 auto;
  width: var(--columns-width);
  border-bottom: 1px solid lightgray;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  
  
}

#title-logo {
  display: inline-block;
  padding: 4px 12px;
  text-align: center;
  text-decoration: none;
  line-height: 1;
}

#title-logo img {
  display: block;
  max-height: 48px;
  width: auto;
  margin: 0 auto;
  padding: 6px 20px;
}

#columns {
  margin: 0 auto;
  width: var(--columns-width);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#main-column {
  box-sizing: border-box;
  width: var(--main-column-width);
  padding: 0 var(--main-column-padding-x) var(--main-column-padding-bottom) var(--main-column-padding-x);
}

#sub-column {
  min-height: 100vh;
  box-sizing: border-box;
  background-color: rgba(65, 65, 65, 0.6);
  width: var(--sub-column-width);
  padding: 0 var(--sub-column-padding-x);
}

.sidemenu-button-link {
  text-decoration: none;
}

.sidemenu-button {
  margin: 10px 10px 0 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #DDD;
  border: 1px solid lightgray;
  border-radius: 4px;
  font-size: 0.875em;
}

.headmenu-button {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 1.1em;
  margin: 0 10px;
  color: white;
}

.sidemenu-pre-link-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px;
}

.sidemenu-pre-link {
  text-decoration: none;
  color: #CCC;
  font-size: 12px;
}

.name {
  font-weight: bold;
  color: #CCC;
}

.profile-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
}

.profile-image-wrapper {
  margin: 10px;
  flex: 0 1 auto;
  width: min(400px, 100%);
  aspect-ratio: 4 / 7;
  border: 5px double #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 10px 10px;
  background-color: #222;
  display: inline-block;
  overflow: hidden;
}

.profile-image {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  object-fit: contain;
}

.profile-image-empty {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  position: relative;
}

.profile-image-empty::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 10px;
}

.profile-image-empty-icon {
  font-size: 48px;
  opacity: 0.3;
  filter: grayscale(1);
}

.profile-image-empty-text {
  font-size: 0.875em;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
  text-transform: uppercase;
}

.profile-summary {
  flex: 0 0 auto;
  padding: 10px 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
}

.profile-ap-wrapper {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  border-bottom: 1px solid lightgray;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', '郢晏・ﾎ帷ｹｧ・ｮ郢晄焔・ｧ蛛ｵ縺・Pro W3', Meiryo, '・ｽ・ｭ・ｽ・ｳ ・ｽ・ｰ郢ｧ・ｴ郢ｧ・ｷ郢晢ｿｽ縺・, sans-serif;

}

.profile-ap {
  font-weight: bold;
  font-size: 24px;
  color: #CCC;
}

.profile-ap-value {
  margin-left: 40px;
  font-weight: bold;
  font-size: 48px;
  color: #CCC;
}

.profile-statuses {
  box-sizing: border-box;
  margin: 0;
  padding: 12px 20px;
  width: 100%;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', '郢晏・ﾎ帷ｹｧ・ｮ郢晄焔・ｧ蛛ｵ縺・Pro W3', Meiryo, '・ｽ・ｭ・ｽ・ｳ ・ｽ・ｰ郢ｧ・ｴ郢ｧ・ｷ郢晢ｿｽ縺・, sans-serif;

}

.profile-statuses td {
  border: none;
  padding: 6px 12px;
}

.profile-status-name {
  font-weight: bold;
  color: #BBBBBB;
  margin-right: 20px;
}

.location-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s, text-shadow 0.3s;
}

.location-link:hover {
  color: #fff;
  text-decoration: underline;
}

.profile-skill-empty-text {
  text-align: center;
  padding: 20px 0;
  font-size: 0.875em;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
  text-transform: uppercase;
}

.profile-skills,
.profile-link-skill {
  box-sizing: border-box;
  width: 100%;
  padding: 16px 24px 0 24px;
}

.profile-skill {
  margin-bottom: 12px;
}

.profile-skill:last-child {
  margin: 0;
}

.profile-skill-prop {
  display: flex;
  align-items: baseline;
}

.profile-skill-name {
  font-weight: bold;
  color: #BBBBBB;
  font-size: 18px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.profile-level-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  gap: 4px;
}

.profile-level-item {
  flex: 1;
  white-space: nowrap;
  min-width: 0;
  
}

.parameter-level,
.parameter-place,
.parameter-equip {
  font-size: 15px;
  margin: 20px 5px;
  padding: 8px 0 8px 20px;
  background-image:
    repeating-linear-gradient(105deg,
      rgba(112, 202, 124, 0.06) 0px,
      rgba(112, 202, 124, 0.06) 3px,
      transparent 3px,
      transparent 6px),
    linear-gradient(90deg,
      rgb(12, 12, 12),
      rgb(12, 12, 12));
  background-color: #222;
  border: #ffffff 1px solid;
  color: #eee;
  font-weight: bold;
}

.block-card {
  padding: 10px;
  margin-bottom: 20px;
}

.parameters table td.status-weapon {
  width: 35px;
  background: color-mix(in srgb, var(--equip-weapon) 55%, transparent);
}

.parameters table td.status-armor {
  width: 35px;
  background: color-mix(in srgb, var(--equip-armor) 55%, transparent);
}

.parameters table td.status-accessory {
  width: 35px;
  background: color-mix(in srgb, var(--equip-accessory) 55%, transparent);
}

.parameters table td.status {
  width: 55px;
}

.parameters table {
  border-collapse: collapse;
  width: 100%;
}

.parameters table td {
  padding: 10px 8px;
  width: 60px;
  text-align: center;
  border: 1px solid #cccccc57;
}

.d-name {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 4px;
  align-self: flex-end;
}

.profile-skill-cond {
  font-size: 0.875em;
  color: #888;
}

.profile-skill-effect {
  margin-left: 10px;
  color: #DDD;
}

.profile-declaration-link {
  display: inline-flex;
  justify-content: center;
  min-width: 50px;
  padding: 4px;
  border: 1px solid #333;
  border-radius: 4px;
  margin-right: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #DDD;
}

[class^="parameter-"] {
  display: flex;
  justify-content: center;
  min-width: 30px;
  padding: 4px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  text-decoration: none;
  color: #DDD;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.display-level {
  text-align: center;
  height: 30px;
  display: flex;
  align-items: center;
  padding-top: 5px;
  padding-left: 10px;
}

.display-place {
  height: 60px;
  display: flex;
  align-items: center;
  padding-top: 5px;
  padding-left: 10px;
}

.search-form {
  display: grid;
  gap: 12px 20px;
  align-items: center;
  padding-bottom: 10px;
}

.search-label {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  column-gap: 10px;
  width: 75%;
}

.label-text {
  text-align: right;
  white-space: nowrap;
}

.search-input,
.search-label select {
  box-sizing: border-box;
}

.search-form .button-action {
  grid-column: 2;
  grid-row: 3;
  margin-top: 8px;
  margin-right: 50px;
}

.map-container {
  position: relative;
  width: 450px;
  height: 450px;
  border: 12px solid #000;
  border-radius: 8px
}

.map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);

}

.profile-tag {
  display: inline-flex;
  justify-content: center;
  min-width: 50px;
  padding: 4px;
  border: 1px solid #135200;
  border-radius: 4px;
  margin-right: 5px;
  text-decoration: none;
  font-weight: bold;
  color: #DDD;
  background: linear-gradient(0deg, #0f4213, #323532);
  font-size: 12px;
  transition: background-color 0.3s, border-bottom-color 0.3s;
}

.profile-tag:hover {
  background: #338d3a;
}

.map-cell {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

.character {
  background: rgba(0, 0, 255, 0.7);
  pointer-events: none;
}

.move {
  background-color: rgba(0, 255, 0, 0.5);
  pointer-events: none;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

.pulse {
  background-color: rgba(255, 0, 0, 1);
  animation: pulse 1s infinite;
}

.moved {
  animation: pulse 1s infinite;
  background-color: rgba(255, 0, 0, 0.5);
  pointer-events: none;

}

.move-arrow {
  position: absolute;
  font-size: 20px;
  color: blue;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.profile-text {
  margin: 0 20px;
  word-break: break-all;
  overflow-wrap: break-word;
}

.profile-tags {
  margin: 0 20px;
}

.profile-main .profile-character-icons-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.profile-character-icon-wrapper {
  margin: 5px;
}

[class^="dice-"]::before {
  content: "🎲";
  margin-right: 4px;

}

[class^="dice-"] {
  font-weight: bold;
  color: #db6714;
}

.place {
  display: inline-block;
  border-bottom: 2px solid #ccccccaa;
  font-size: 0.875em;
  font-weight: bold;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  margin-bottom: 20px;
}

.map-detail {
  width: 280px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.row {
  display: flex;
  gap: 10px;
}

.radio-button {
  color: #333;
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #f5f5f5;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease-in-out;
  user-select: none;
}

.radio-button input {
  display: none;
}

.radio-button:has(input:checked) {
  background-color: #ffacac;
  color: #222;
  border-color: #555;
  transform: scale(1.1);
}

.remaining-ap-container {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

.status-row:last-child {
  margin-bottom: 0;
}

.remaining-ap-container .status-row-consumable-ap {
  font-size: 0.85rem;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 2px;
  opacity: 0.88;
  line-height: 1.25;
}

.remaining-ap-container .status-row-consumable-ap .status-label {
  font-size: 0.85rem;
  font-weight: normal;
  color: #aaa;
}

.remaining-ap-container .status-row-consumable-ap .status-value {
  font-size: 0.85rem;
  font-weight: normal;
}

.status-label {
  color: #ccc;
  font-size: 0.9em;
}

.status-value {
  font-family: 'BIZ UDPGothic', sans-serif;
  font-size: 1.1em;
}

.gospel-warn .status-value,
.gospel-warn .status-label {
  color: #ff5252;
}

.radio-button:hover {
  background-color: #ffacac;
}

.game-btn {
  position: relative;
  padding: 6px 14px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-left: 24px;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(to bottom, #3a7a9e, #2a5580);
  border: 2px solid #6a95a8;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.game-btn:hover {
  filter: brightness(1.1);
}

.game-btn.danger {
  background: linear-gradient(to bottom, #bb3333, #880000);
  border: 2px solid #cc8888;
}

.map-all {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
}

.tab-container {
  width: 100%;
  height: auto;
}

.tab-menu {
  display: flex;
  border-bottom: 2px solid #ccc;
  border: 1px solid #ccccccaa;
}

.tab-button {
  flex: 1;
  padding: 10px;
  text-align: center;
  color: #DDD;
  background: linear-gradient(135deg, #00011188, #09003388);
  border: 1px solid #ccccccaa;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background-color 0.3s, border-bottom-color 0.3s;
}

.tab-button.active {
  border-bottom-color: #007BFF;
  font-weight: bold;
}

.tab-button:hover {
  background-color: #f0f0f0;
}

.tab-nav-container {
  margin: 10px 0;
  display: flex;
  justify-content: center;
}

.tab-nav-button {
  flex: 1;
  padding: 10px;
  text-align: center;
  color: #DDD;
  background: linear-gradient(135deg, #00011188, #09003388);
  border: 1px solid #ccccccaa;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background-color 0.3s, border-bottom-color 0.3s;
}

.tab-nav-button.active {
  border-bottom-color: #007BFF;
  font-weight: bold;
}

.tab-nav-button:hover {
  background-color: #f0f0f0;
}

.tab-content {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 10px 10px;
  background-color: #222;
  padding: 20px;
  border: 1px solid #ccccccaa;
  border-top: none;
  height: auto;
  overflow-y: visible;
  border-radius: 0 0 15px 15px;
  box-sizing: border-box;
}

@media (min-width: 920px) {
  .profile-main {
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .profile-image-wrapper {
    flex: 0 0 400px;
    width: 400px;
  }
  .profile-summary {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 720px;
    max-height: 720px;
    max-width: none;
  }
  .tab-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

#menu-btn-check {
  display: none;
}

.menu-btn {

  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #383c3f;
  
  left: 85%;
  transition: all 0.5s;

}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}

.menu-btn span:before {
  bottom: 8px;
}

.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked~.menu-btn span {
  background-color: rgba(255, 255, 255, 0);
}

#menu-btn-check:checked~.menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#menu-btn-check:checked~.menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

.menu-content {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 80;
  background-color: rgba(65, 65, 65, 0.9);
  transition: all 0.5s;
}

.menu-content ul {
  padding: 70px 10px 0;
}

.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}

.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}

.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

#menu-btn-check:checked~.menu-content {
  left: 0;
}

i {
  display: block;
  margin: 0 auto;
}

.game-icons-3d-stairs {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m325.944 61.815l-98.26 24.566l147.158 66.891l98.263-24.566zM209.787 97.687v43.488l155.355 70.617v-43.489zM491 142.475l-108.159 27.04v62.929c-20.977 5.241-41.953 10.488-62.929 15.732v62.929c-20.977 5.241-41.953 10.488-62.929 15.732v62.93c-20.977 5.24-41.952 10.487-62.929 15.731v44.687L491 375.947zm-290.914 13.733l-35.332 8.834l147.16 66.891l35.334-8.834zm-53.228 20.14v43.488l155.355 70.617v-43.489zm-9.7 58.521l-35.333 8.834l147.16 66.891l35.334-8.834zm-53.23 20.14v43.488l155.357 70.617v-43.489zm-9.7 58.522l-35.331 8.834l147.159 66.89l35.334-8.834zM21 333.67v43.487l155.356 70.617v-43.488z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-notebook {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M131.3 20.35c-14.6.1-28.1 10-31.93 24.82c-2.33 9.13-.55 18.4 4.13 25.84c-7.67 4.26-13.69 11.53-16.03 20.66c-2.32 9.13-.56 18.33 4.1 25.83a32.7 32.7 0 0 0-15.96 20.6c-2.34 9.1-.54 18.4 4.18 25.8c-7.72 4.3-13.75 11.5-16.09 20.7c-2.33 9.1-.54 18.4 4.19 25.8c-7.72 4.3-13.75 11.5-16.09 20.7c-2.34 9.1-.54 18.4 4.18 25.8c-7.72 4.3-13.75 11.5-16.08 20.7c-2.34 9.1-.54 18.4 4.18 25.8c-7.72 4.3-13.75 11.5-16.09 20.7c-2.35 9.2-.51 18.5 4.3 26a32.92 32.92 0 0 0-16.28 20.8c-4.48 17.5 6.25 35.6 23.79 40.1l.1-.2l31.71 8.2l-1.47 5.7l261.56 67L374 326.5l-22.4 21.2l-87.8 26.5l15.5-42.5l-151.7-38.8l4.4-17.4l153.5 39.3l9.7-26.7l15.3-14.4l-167-42.8l4.4-17.4l178 45.6l39.6-37.4l-206.1-52.8l4.4-17.4L380.7 207l-.1.4l31.5-29.8l18.3-71.4l-261.6-67.04l-4.8 18.66c2.2-16.32-8.1-32.27-24.5-36.44c-2.7-.7-5.5-1.04-8.2-1.03m.3 17.99c1.2 0 2.4.19 3.5.48c8.1 2.09 12.9 10.13 10.8 18.27l17.2 4.4l-11 42.81c2.2-16.35-8.2-32.26-24.5-36.43l-.6-.15c-7.8-2.34-12.2-10.15-10.2-18.07c1.7-6.61 7.3-11 13.7-11.3h1.1zm-11.9 46.51c.9 0 1.9.14 2.9.36l.6.15c8.1 2.08 12.9 10.12 10.8 18.24l17.2 4.4l-11 43c2.4-16.4-8-32.6-24.4-36.7c-.7-.2-1.3-.4-1.9-.5c-7-2.7-10.9-10.1-9-17.62c1.7-6.97 7.9-11.45 14.8-11.29zm59.9 4.59l217 55.66l-4.4 17.4l-217-55.6zm-72.9 41.86h1.3c.5 0 .9 0 1.4.1c.6.2 1.2.3 1.8.5l.1-.2c8.1 2.1 12.9 10.1 10.8 18.3l17.2 4.4l-11 43c2.3-16.3-8.1-32.4-24.4-36.6c-8.18-2.1-12.94-10.1-10.85-18.3c1.69-6.6 7.25-10.9 13.65-11.2M465.4 152l-10.2 9.6l31.6 33.5l10.2-9.6zm-23.3 22L315.7 293.5l31.5 33.5l126.5-119.5zm-347.23 3.7c1.48 0 3 .1 4.53.5c8.1 2.1 12.9 10.1 10.8 18.3l17.2 4.4l-11 43c2.3-16.4-8.1-32.4-24.44-36.6c-8.14-2.1-12.9-10.1-10.82-18.3c1.7-6.6 7.32-11 13.73-11.3m-11.91 46.5c1.48 0 3 .1 4.53.5c8.14 2.1 12.91 10.1 10.81 18.3l17.2 4.4l-11 42.9c2.3-16.3-8.1-32.3-24.45-36.5c-8.14-2.1-12.89-10.1-10.81-18.3c1.69-6.6 7.31-11 13.72-11.3m-11.9 46.5c1.48 0 3 .1 4.53.5c8.13 2.1 12.89 10.1 10.81 18.3l17.2 4.3l-10.94 42.8c2.16-16.3-8.25-32.1-24.51-36.3c-8.14-2.1-12.9-10.1-10.82-18.3c1.7-6.6 7.32-11 13.73-11.3m235.34 39.2L293 346.6l37.4-11.3zm-247.25 7.3c1.48 0 3 .1 4.53.5c8.14 2.1 12.9 10.1 10.81 18.3l17.21 4.3l-11 43c2.1-16.2-8.3-32-24.53-36.2l.1-.3c-8.16-2.1-12.92-10.1-10.84-18.3c1.69-6.6 7.31-11 13.72-11.3m56.95 20.3L333.2 393l-4.4 17.4l-217.1-55.5zM47.18 364c1.48 0 3 .1 4.52.5c8.14 2.1 12.9 10.1 10.82 18.3l17.2 4.3l-3.69 14.4l-31.92-8.2v.2c-8.01-2.2-12.67-10.1-10.61-18.2c1.7-6.6 7.32-11 13.73-11.3z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-switch-weapon {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m83.5 25l-32 64v87c-.67 15.934 3.847 27.945 13.793 37.816c3.442 3.367 7.892 6.805 13.102 10.227L83.5 89l5.344 141.326c7.778 4.3 16.61 8.477 26.064 12.344c.194.08.397.155.592.234V89zm216.666 0C281.833 25 263.5 61.667 263.5 98.334c0 17.585 4.223 35.16 10.635 48.7c9.11 1.493 18.938 3.565 29.187 6.19c4.395-7.873 14.92-14.213 40.178-16.87V72.577C319.173 60.896 300.166 38.2 300.166 25m146.668 0c0 13.2-19.007 35.896-43.334 47.576v63.78c43.31 4.554 43.334 19.928 43.334 35.31c18.333 0 36.666-36.665 36.666-73.332S465.167 25 446.834 25M361.5 50v122.852a370 370 0 0 1 24 11.148V50zm-127 72.92l-58.45 61.9l58.45 58.453V208h9c34.25 0 90.23 12.187 135.408 30.67c22.59 9.24 42.344 19.89 55.385 32.646c6.52 6.38 11.518 13.45 13.514 21.65c.867 3.562.914 7.297.414 11.014c7.95-19.23 4.975-35.52-5.345-51.625c-11.208-17.49-31.88-33.91-56.424-47.478C337.367 177.743 272.5 162 243.5 162h-9zm-195.72 71.1c-7.95 19.23-4.975 35.52 5.345 51.625c11.208 17.49 31.88 33.91 56.424 47.478C149.633 320.257 214.5 336 243.5 336h9v39.08l58.45-61.9l-58.45-58.453V290h-9c-34.25 0-90.23-12.187-135.408-30.67c-22.59-9.24-42.344-19.89-55.385-32.646c-6.52-6.38-11.518-13.45-13.514-21.65c-.867-3.562-.914-7.297-.414-11.014zm322.72 57.212V368h24V261.23a277 277 0 0 0-13.408-5.9c-3.446-1.41-7-2.766-10.592-4.098m-310 29.862v41.44h23.17l.885-23.39c-8.66-5.593-16.772-11.594-24.055-18.05m40.313 27.767l.517 13.675h23.17v-1.777c-8.056-3.678-15.987-7.64-23.66-11.88l-.028-.017zM28.5 340.536V360h110v-19.465zM63.5 375v80c-8 0-28 32 20 32s28-32 20-32v-80zm298 11v94h24v-94z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-character {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M255 45.4c-24.5 0-47 11.8-63.9 33.4c-16.9 21.5-27.1 52.6-27.1 86.5c0 36 12.1 67.5 31 89.5l13.5 15l-19.6 4.6c-52.3 11.9-77.4 36.9-91.75 75.2c-13.7 35.7-15.6 84.8-16.1 143.3H431c-.2-58.7-.5-109.3-13-145.5c-13.4-39.4-37.9-64.3-94-75.4l-19.9-3.7l12.9-15.7c17.7-21.9 28.8-52.6 28.8-87.5c0-33.9-10.3-64.9-27.2-86.3c-16.8-21.7-39.3-33.6-63.6-33.4'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-arabic-door {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 20c-44 0-85.11 36.98-113.305 82.525c-24.87 40.175-39.3 90.822-22.535 135.27L94 250.875V455h36V273.125l39.436-19.719l-10-16.668c-19.098-31.828-9.936-76.81 13.869-115.263C197.11 83.02 236 56 256 56s58.89 27.02 82.695 65.475s32.967 83.435 13.87 115.263l-10 16.668L382 273.125V455h36V250.875l-26.16-13.08c16.766-44.448 2.334-95.095-22.535-135.27C341.11 56.98 300 20 256 20m9 54.436V492h101V283.016l-46.443-23.225c12.021-19.222 28.122-39.043 27.336-62.879c-2.362-49.393-33.647-94.935-76.024-119.818c-1.873-.956-3.843-1.884-5.869-2.658m-18 .384c-24.927 9.489-42.887 31.542-58.365 52.46c-17.346 26.324-28.65 59.052-20.375 90.476c4.108 12.904 10.876 22.771 17.332 36.484c3.424 6.379 2.441 4.667-21.881 19.918L146 283.016V492h101zM167 358h18c0 5.75 1.834 8.923 4.479 11.273C192.123 371.624 196 373 200 373s7.877-1.376 10.521-3.727S215 363.75 215 358h18c0 10.25-4.166 19.077-10.521 24.727S208 391 200 391s-16.123-2.624-22.479-8.273C171.166 377.077 167 368.25 167 358m112 0h18c0 5.75 1.834 8.923 4.479 11.273C304.123 371.624 308 373 312 373s7.877-1.376 10.521-3.727S327 363.75 327 358h18c0 10.25-4.166 19.077-10.521 24.727S320 391 312 391s-16.123-2.624-22.479-8.273C283.166 377.077 279 368.25 279 358M94 473v19h36v-19zm288 0v19h36v-19z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-family-house {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m55.379 25l-28.4 142H172.27L256 83.271L339.729 167H485.02l-28.4-142zM256 108.727L179.729 185H41v302h158v-87c0-18.25 7.166-33.077 18.021-42.727S242 343 256 343s28.123 4.624 38.979 14.273S313 381.75 313 400v87h158V185H332.271zm0 38.544l57 57V297H199v-92.729zm0 25.456l-39 39V279h78v-67.271zM71 199h98v98H71zm272 0h98v98h-98zM89 217v30h62v-30zm272 0v30h62v-30zM89 265v14h62v-14zm272 0v14h62v-14zM71 359h98v98H71zm272 0h98v98h-98zm-87 2c-10 0-19.877 3.376-27.021 9.727C221.834 377.077 217 386.25 217 400v87h78v-87c0-13.75-4.834-22.923-11.979-29.273S266 361 256 361M89 377v62h62v-62zm272 0v62h62v-62z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-magnifying-glass {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M333.78 20.188c-39.97 0-79.96 15.212-110.405 45.656c-58.667 58.667-60.796 152.72-6.406 213.97l-15.782 15.748l13.25 13.25l15.75-15.78c61.248 54.39 155.3 52.26 213.968-6.407c60.887-60.886 60.888-159.894 0-220.78C413.713 35.4 373.753 20.187 333.78 20.187zm0 18.562c35.15 0 70.285 13.44 97.158 40.313c53.745 53.745 53.744 140.6 0 194.343c-51.526 51.526-133.46 53.643-187.5 6.375l.218-.217c-2.35-2.05-4.668-4.17-6.906-6.407c-2.207-2.206-4.288-4.496-6.313-6.812l-.218.22c-47.27-54.04-45.152-135.976 6.374-187.502C263.467 52.19 298.63 38.75 333.78 38.75m0 18.813c-30.31 0-60.63 11.6-83.81 34.78c-46.362 46.362-46.362 121.234 0 167.594c10.14 10.142 21.632 18.077 33.905 23.782c-24.91-19.087-40.97-49.133-40.97-82.94c0-15.323 3.292-29.888 9.22-43c-4.165 20.485.44 40.88 14.47 54.907c24.583 24.585 68.744 20.318 98.624-9.562s34.146-74.04 9.56-98.625a52.4 52.4 0 0 0-7.655-6.313c45.13 8.648 79.954 46.345 84.25 92.876c4.44-35.07-6.82-71.726-33.813-98.72c-23.18-23.18-53.47-34.78-83.78-34.78zM176.907 297.688L42.094 432.5l34.562 34.563L211.47 332.25zM40 456.813L24 472.78L37.22 486l15.968-16z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-cut-diamond {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m92.906 94.813l60.438 79.75l78.125-79.75H92.905zm189.25 0L359.25 173.5l58.688-78.688H282.155zm-25.344.843l-84.718 86.47H341.53zm177.907 7.906l-58.626 78.563H494.53zm-358.064.75l-57.78 77.813h116.78zm-58.5 96.5L226.562 429.22l-83.218-228.41H18.156zm145.063 0l93.593 256.844l93.593-256.844H163.22zm207.06 0L287.064 429.22l208.405-228.41H370.28z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-cancel {
  display: inline-block;
  color: rgb(255, 111, 111);
  width: 1.5em;
  height: 1.5em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 16C123.45 16 16 123.45 16 256s107.45 240 240 240s240-107.45 240-240S388.55 16 256 16m0 60c99.41 0 180 80.59 180 180s-80.59 180-180 180S76 355.41 76 256S156.59 76 256 76m-80.625 60c-.97-.005-2.006.112-3.063.313v-.032c-18.297 3.436-45.264 34.743-33.375 46.626l73.157 73.125l-73.156 73.126c-14.63 14.625 29.275 58.534 43.906 43.906L256 299.906l73.156 73.156c14.63 14.628 58.537-29.28 43.906-43.906l-73.156-73.125l73.156-73.124c14.63-14.625-29.275-58.5-43.906-43.875L256 212.157l-73.156-73.125c-2.06-2.046-4.56-3.015-7.47-3.03z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-info {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 21C126.426 21 21 126.426 21 256s105.426 235 235 235s235-105.426 235-235S385.574 21 256 21m0 36c110.118 0 199 88.882 199 199s-88.882 199-199 199S57 366.118 57 256S145.882 57 256 57m-7.352 36.744q-12.34 0-21.27 8.928q-8.664 8.928-8.665 21.008q.001 12.341 8.666 21.006q8.925 8.665 21.268 8.666q12.342-.001 21.006-8.666q8.666-8.666 8.666-21.006q0-12.08-8.927-21.008q-8.666-8.928-20.745-8.928zm-62.757 82.453v28.096h46.215v186.13H185.89v27.833h140.22v-27.834h-45.69V176.197z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.game-icons-help {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 16C123.45 16 16 123.45 16 256s107.45 240 240 240s240-107.45 240-240S388.55 16 256 16m0 60c99.41 0 180 80.59 180 180s-80.59 180-180 180S76 355.41 76 256S156.59 76 256 76m0 30c-66.274 0-120 40.294-120 90c0 30 60 30 60 0c0-16.57 26.862-30 60-30s60 13.43 60 30s-30 15-60 30a19.6 19.6 0 0 0-4.688 3.28C226.53 244.986 226 271.926 226 286v15c0 16.62 13.38 30 30 30s30-13.38 30-30v-15c0-45 90-40.294 90-90s-53.726-90-120-90m0 240a30 30 0 0 0-30 30a30 30 0 0 0 30 30a30 30 0 0 0 30-30a30 30 0 0 0-30-30'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.header-menu-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.navlink {
  margin: 0 2px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}

.navlink2 {
  margin: 0 10px 0 auto;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}

.icon-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 40px;

}

.nav-icon {
  display: block;
  width: 32px;
  
  height: 32px;
  margin: 0 auto;
  padding-top: 14px;
  
}

.icon-row .nav-icon {
  width: 24px;
  
  height: 24px;
  padding-top: 0;
}

.upper-right .nav-icon {
  width: 24px;
  height: 24px;
  padding-top: 0;
}

.nav-icon-logout {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(326deg) brightness(97%) contrast(93%);
}

.admin-mode-link {
  position: fixed;
  right: 10px;
  top: 10px;
  background: #c2193e;
  padding: 10px 20px;
  color: #222;
  font-weight: bold;
  border-radius: 8px;
  z-index: 99999;
  text-decoration: none;
  display: block;
}

.appicon-small {
  background-color: transparent;
  text-align: center;
  position: relative;
}

.upper-right {
  position: absolute;
  top: 0;
  right: 0;
}

a {
  color: #cc99ff;
  text-decoration: none;
}

a.navlink {
  color: #fffcf3;
}

a.navlink:hover {
  background-color: #686868;
  transition: background-color 0.4s ease;
}

.navlink2 a {
  color: #fffcf3;
}

.navlink2 a:hover {
  background-color: #686868 !important;
  transition: background-color 0.4s ease;
}

.contents {
  width: 95%;
  max-width: 1080px;
  min-width: auto;
  margin-left: auto;
  margin-right: auto;
  border: #b9b9b955 1px solid;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 0px, transparent 10px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 0px, transparent 10px, transparent 10px),
    linear-gradient(135deg, #252926, #2e362e);
  background-size: 14.14px 14.14px, 14.14px 14.14px, auto;
  padding: 0 15px;
  box-sizing: border-box;
}


canvas {
  display: block;
  margin: auto;

  width: 300px;
  height: 300px;

  padding: 12px 20px;
  box-sizing: border-box;
}

.toolbar-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 8px;
  margin: 10px 5px;
}

.toolbar-input {
  padding: 8px;
}

.toolbar-btn {
  padding: 8px 16px;
  margin-bottom: 0;
}

.toolbar-sort-wrapper {
  margin-left: auto;
}

.toolbar-select {
  padding: 8px;
  border-radius: 4px;
  background: #222;
  color: #fff;
  border: 1px solid #555;
}

.stay-button {
  margin-bottom: 16px;
}

.radio-button.stay {
  background: #ffffff;
  color: #004466;
  font-weight: bold;
  border: 2px solid #88ccff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
}

.radio-button {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}

.map-detail .controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.map-detail .row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.map-detail .controls .radio-button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px;
}

.map-detail .controls .radio-button input[type="radio"] {
  display: none;
}

.map-detail .controls .radio-button:not(.stay) {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.map-detail .controls .radio-button:not(.stay):hover {
  background: #ffacac;
  color: #222;
}

.map-detail .controls .radio-button:not(.stay):has(input:checked) {
  background: #ffacac;
  color: #222;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.map-detail .controls .radio-button.stay {
  padding: 8px 20px;
  font-size: 0.875em;
  background: #ffffff;
  color: #004466;
  border: 2px solid #88ccff;
}

.map-detail .controls .radio-button.stay:hover {
  background: #cceeff;
}

.map-detail .controls .radio-button.stay:has(input:checked) {
  background: #88ccff;
  color: #003355;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.button-clear {
  color: #fff;
  padding: 6px 12px;
  background: linear-gradient(135deg, #444444, #333333);
  border: 1px solid #4499ee;
  cursor: pointer;
  font-size: 0.8em;
  transition: all 0.2s;
  border-radius: 10px;
}

.button-clear:hover {
  background: linear-gradient(135deg, #888888, #777777);
  box-shadow: 0 0 8px rgba(211, 47, 47, 0.4);
}

.equip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.equip-item {
  flex: 1 1 100%;
  
  border: 1px solid #444;
  border-radius: 8px;
  background-color: #2a2a2a;
  position: relative;
  
  color: #eee;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.equip-type-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.equip-type-weapon .equip-type-indicator {
  background: var(--equip-weapon);
}

.equip-type-armor .equip-type-indicator {
  background: var(--equip-armor);
}

.equip-type-accessory .equip-type-indicator {
  background: var(--equip-accessory);
}

.equipment-status .equip-row-weapon th {
  border-left: 3px solid var(--equip-weapon);
}

.equipment-status .equip-row-armor th {
  border-left: 3px solid var(--equip-armor);
}

.equipment-status .equip-row-accessory th {
  border-left: 3px solid var(--equip-accessory);
}

.equip-content {
  padding: 4px 8px 4px 14px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  
}

.equip-label {
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0px;
}

.equip-name {
  font-size: 0.875em;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  
  font-family: 'BIZ UDPGothic', sans-serif;
  line-height: 1.2;
}

.equip-name.empty {
  color: #666;
  font-style: italic;
}

.equip-effects-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equip-effect {
  font-size: 12px;
  color: #ccc;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  align-self: auto;
}

.equip-value {
  font-weight: bold;
  margin-left: 4px;
}

.chart-container {
  width: fit-content;
  margin: 0 auto;
  margin-left: 30px;
  position: relative;
}

.location-coords {
  font-size: 0.8em;
  color: #ccc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.selection-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selected-zone-wrapper {
  position: sticky;
  top: 60px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #4499ee;
  border-radius: 8px;
  padding: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  margin: 10px;
  margin-bottom: 0;
  font-weight: bold;
  border-color: #6cf;
}

.selected-zone-header {
  font-size: 1.1em;
  color: #4499ee;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.zone-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.error-area {
  font-size: 0.8em;
  min-height: 1.2em;
}

.zone-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

#selected-characters-area {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  
  min-height: 180px;
  
  padding-bottom: 5px;
  padding: 0 10px 5px 10px;
  
  flex-grow: 1;
  
}

.selected-area-row {
  display: flex;
  align-items: center;
  
  gap: 10px;
}

.zone-actions-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 768px) {
  .selected-area-row {
    flex-direction: column;
  }

  .zone-actions-vertical {
    flex-direction: row;
    
    width: 100%;
  }

  .zone-actions-vertical .game-btn,
  .zone-actions-vertical .button-clear {
    flex: 1;
  }
}

.explore-btn {
  margin-left: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1.1em;
}

.zone-actions-vertical .button-clear {
  padding: 8px 12px;
  font-size: 0.9em;
  margin-top: 15px;
}

#selectable-characters-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  padding-bottom: 20px;
  padding-left: 10px;
  
  padding-right: 10px;
  
}

#selectable-characters-area.empty-area {
  height: auto;
  display: block;
}

.selectable-character {
  min-height: 150px;
  background: #22222c;
  border: 1px solid #444450;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  
  gap: 5px 10px;
  position: relative;
  user-select: none;
}

.selectable-character:hover {
  border-color: rgba(112, 202, 124, 0.55);
}

#selected-characters-area .selectable-character {
  min-width: 320px;
  width: 320px;
  
  background: #1a2435;
  border-color: #4895e8;
  box-shadow: 0 0 10px rgba(72, 149, 232, 0.4);
}

#selected-characters-area .selectable-character:hover {
  border-color: rgba(112, 202, 124, 0.55);
}

.selectable-character .icon {
  grid-row: 1;
  
  width: 60px;
  height: 60px;
}

.selectable-character .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.selectable-character .info {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
  min-height: 60px;
  
  min-width: 0;
}

.selectable-character .info-top,
.selectable-character .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #aaa;
  margin-bottom: 2px;
}

.selectable-character .info-bottom {
  display: flex;
  align-items: center;
  gap: 5px;
}

.selectable-character .game-active-badge {
  margin-left: auto;
}

.selectable-character .name {
  font-weight: bold;
  font-size: 1.1em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  
}

.selectable-character .role-badge {
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #555;
  flex-shrink: 0;
}

.role-TANK {
  color: #8af;
  border-color: #258;
  background: #002244;
}

.role-DPS {
  color: #f88;
  border-color: #822;
  background: #441111;
}

.role-HEAL {
  color: #cfc;
  border-color: #252;
  background: #113311;
}

.role-SUP {
  color: #fd8;
  border-color: #852;
  background: #443311;
}

.selectable-character .mini-status {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8em;
}

.selectable-character .mini-status span {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  
  padding: 1px 4px;
  border-radius: 3px;
}

.selectable-character .mini-status b {
  color: #888;
  margin-right: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

.selectable-character .summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  font-size: 12px;
  color: #ccc;
  line-height: 1.4;
  margin-top: 4px;
  min-height: 2.8em;
}

.empty-slot-msg {
  color: #666;
  font-style: italic;
  padding: 20px;
  width: 100%;
  text-align: center;
  display: none;
  
  margin: auto;
  
}

#selected-characters-area .selectable-character .info {
  min-width: 0;
}

@media (max-width: 600px) {
  #selectable-characters-area {
    grid-template-columns: 1fr;
  }

  .selected-zone-wrapper {
    top: 50px;
  }
}

@media screen and (max-width: 600px) {
  .equip-item {
    flex: 1 1 100%;
  }
}

.info-card {
  position: relative;
  overflow: hidden;
  color: #eee;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 50px;
}

.info-label {
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.info-value {
  font-size: 0.875em;
  font-weight: bold;
  color: #fff;
  font-family: 'BIZ UDPGothic', sans-serif;
}

.logs {
  border-collapse: separate;
  border-spacing: 0;
  margin: 10px auto;
  font-size: 15px;
  width: calc(100% - 20px);
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.95));
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.logs th {
  background: rgba(0, 0, 0, 0.4);
  color: #ddd;
  padding: 10px;
  border-bottom: 2px solid #555;
  text-align: left;
  font-weight: bold;
}

.logs td {
  padding: 10px;
  border-bottom: 1px solid #333;
  color: #eee;
}

.logs tr:last-child td {
  border-bottom: none;
}

.logs .pagination-row td {
  padding: 0;
  border: none;
  background: transparent;
}

.logs .pagination-row.top td {
  border-bottom: 1px solid #444;
}

.logs .pagination-row.bottom td {
  border-top: 1px solid #444;
}

.logs a {
  color: #88ccff;
  text-decoration: none;
}

.logs a:hover {
  text-decoration: underline;
  color: #bbddff;
}

.room-search-input,
.fav-filter-input,
.toolbar-input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  color: #333333;
}

.room-card {
  background-color: #22222c;
  border: 1px solid #444450;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.info-card,
.block-card {
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.room-list-tag,
.room-card-tag {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #555;
  border-radius: 4px;
  color: #ccc;
}

.fav-details {
  margin-bottom: 20px;
  background-color: transparent;
  border: none;
}

.styled-summary {
  font-size: 15px;
  font-weight: bold;
  color: #eee;
  margin: 20px 5px;
  padding: 8px 0 8px 20px;
  background-image:
    repeating-linear-gradient(105deg,
      rgba(112, 202, 124, 0.06) 0px,
      rgba(112, 202, 124, 0.06) 3px,
      transparent 3px,
      transparent 6px),
    linear-gradient(90deg,
      rgb(12, 12, 12),
      rgb(12, 12, 12));
  background-color: #222;
  border: #ffffff 1px solid;
  cursor: pointer;
  list-style: none;
  
}

.styled-summary::-webkit-details-marker {
  display: none;
}

.styled-summary::before {
  content: '笆ｶ';
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.2s;
}

details[open] .styled-summary::before {
  transform: rotate(90deg);
}

.fav-content {
  padding: 10px 0;
}

.fav-filter-input {
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 10px;
}

.room-list.subscribed {
  list-style: none;
  background-color: #2a2a2a;
  border: 1px solid #444;
  margin: 0;
  padding: 0;
}

.room-list.subscribed li {
  border-bottom: 1px solid #444;
  padding: 10px;
}

.room-list.subscribed li:last-child {
  border-bottom: none;
}

.room-list-link {
  text-decoration: none;
}

.room-list-title.subscribed {
  color: #ffcc66;
  font-weight: bold;
}

.room-list-rno {
  font-size: 13px;
  margin-left: 3px;
  color: #bbb;
}

.room-list-tags {
  margin-top: 4px;
}

.room-list-tag {
  font-size: 12px;
  margin-right: 4px;
}

.room-list-tag.official {
  color: #ffcc66;
  border-color: #ffcc66;
}

.room-list-summary {
  font-size: 1em;
  color: #ccc;
  margin-top: 4px;
}

.room-list-meta {
  text-align: right;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 10px;
}

.room-card {
  padding: 15px;
  transition: border-color 0.2s, background-color 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.room-card:hover {
  border-color: rgba(112, 202, 124, 0.5);
}

.room-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.room-card-link.body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.room-card-header {
  margin-bottom: 8px;
  border-bottom: 1px solid #555;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-card-title {
  font-size: 18px;
  font-weight: bold;
  color: #ddd;
  display: block;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-card-title.official {
  color: #ffcc66;
}

.room-card-rno {
  font-size: 12px;
  color: #888;
  font-weight: normal;
  white-space: nowrap;
}

.room-card-tags {
  margin-bottom: 10px;
}

.room-card-tag {
  font-size: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.room-card-tag.official {
  color: #ffcc66;
  border-color: #ffcc66;
}

.room-card-summary {
  font-size: 0.9em;
  color: #ccc;
  margin-bottom: 10px;
  flex-grow: 1;
  overflow-wrap: break-word;
}

.room-card-meta {
  font-size: 12px;
  color: #888;
  text-align: right;
  border-top: 1px solid #444;
  padding-top: 8px;
  margin-top: auto;
}

.room-search-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.room-search-input.tag {
  width: 150px;
}

.bulk-input-details {
  background: rgba(0, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 15px;
  margin: 12px 16px;
}

.bulk-input-details[open] .bulk-input-summary {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bulk-input-summary {
  padding: 4px 2px;
  cursor: pointer;
  font-weight: bold;
  color: #ccc;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.2s;
}

.bulk-input-summary::-webkit-details-marker {
  display: none;
}

.bulk-input-summary::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-right: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  transform: rotate(-45deg);
  margin-bottom: 2px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.bulk-input-details[open] .bulk-input-summary::before {
  transform: rotate(45deg);
  margin-bottom: 4px;
}

.bulk-input-summary:hover {
  color: #eee;
}

.bulk-input-content {
  padding: 5px 5px 0;
}

.bulk-input-description {
  margin: 0 0 10px;

}

.bulk-input-textarea {
  height: 100px;
  margin-left: 20px;
  width: 90%;
}

.bulk-input-actions {
  text-align: right;
  margin-top: 5px;
}

.add-icon-btn-wrapper {
  text-align: center;
  margin-top: 10px;
}

.add-icon-btn {
  background-color: #444;
  width: auto;
  padding: 5px 20px;
}

.remaining-sp {
  padding: 20px;
  font-weight: bold;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  font-size: 24px;
  color: #CCC;
}

.remaining-sp-error {
  color: #c53f4d;
}

.statuses {
  width: calc(100% - 40px);
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  margin-bottom: 24px;
  margin-left: 20px;
  border: 2px solid #2d4c35;
  border-radius: 3px;
  overflow: hidden;
  background-color: #2a2a2a;
}

.skill-wrapper {

  border-radius: 6px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  margin-top: 5px;
  margin-bottom: 5px;
}

.statuses th,
.statuses td {
  padding: 12px 10px;
  border: 1px solid rgba(112, 202, 124, 0.20);
  text-align: center;
  vertical-align: middle;
}

.statuses-key th {
  text-align: center;
}

.statuses-input input {
  margin: 0;
  width: 50px;
}

.skill-select-info {
  display: flex;
  align-items: center;
}

.skill-setting {
  display: flex;
  gap: 10px;
}

.skill-names {
  flex: 0 1 240px;
  min-width: 200px;
  max-width: 320px;
}

.input-names {
  width: 100%;
  box-sizing: border-box;
}

.input-lines {
  width: 95%;
  max-width: 500px;
}

.skills {
  width: 100%;
  padding-top: 20px;
}

.skill-number {
  width: 50px;
  padding: 0 10px;
  background: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 4px);
  cursor: grab;
  border-right: 1px solid #444;
}

.skill-lines {
  flex: 1;
}

.skill-select {
  margin: 0;
}

.dialog,
.dialog-preview-second {
  display: flex;
  align-items: flex-start;
  border: 1px solid lightgray;
  padding: 4px;
  border-radius: 4px;
  margin: 8px;
  width: 500px;
}

.skill-lines .dialog {
  margin: 8px 8px 8px 0px;
}

.dialog-icon-area {
  margin: 12px 4px 4px 4px;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  background-color: #333;
}

.dialog-icon {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.dialog-body {
  margin: 4px;
  flex: 1;
  flex-grow: 1;
  min-width: 0;
}

.dialog-message {
  margin-top: 4px;
  font-size: 1em;
  word-break: break-all;
  white-space: pre-wrap;
}

.log-narration {
  box-sizing: border-box;
  padding: 20px 20px;
  margin: 12px 0;
  width: 100%;
  text-align: center;
  color: #c8c8c8;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  letter-spacing: 0.12em;
  line-height: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dialog.preview {
  display: flex;
}

.dialog.preview.is-hidden {
  display: none !important;
}

.skill-icons-wrapper .profile-character-icons-wrapper {
  display: grid;
  grid-template-columns: repeat(10, auto);
  justify-content: start;
  gap: 0;
}

.profile-character-icon-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  margin-left: 20px;
}

.icon-wrapper img.icon {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: cover;
}

.icon-number-overlay {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 1px 3px;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.toggle-icons-button {
  background: #1d2c3aff;
  color: #ecf0f1;
  border: 2px solid white;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 20px;
}

.toggle-icons-button:hover {
  background: #4a6075;
}

.or-text {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
  margin-left: 8px;
}

#link-skill-dear,
#lines_link_center {
  width: 50px;
}

#lines_link_before,
#lines_link_after {
  width: 150px;
}

.job-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto 20px;
}

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background-color: #2a2a2a;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--role-color);
  transition: height 0.3s ease;
}

.job-card:hover {
  border-color: var(--role-color);
}

.job-card.selected {
  border-color: var(--role-color);
  box-shadow: none;
}

.job-card.selected::before {
  height: 6px;
}

.job-card-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.job-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 24px;
  gap: 6px;
}

.job-card-icon {
  font-size: 2.4em;
  margin-bottom: 4px;
  line-height: 1;
}

.job-card-name {
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.job-card-role {
  font-size: 0.95em;
  color: #999;
}

.job-card-tank { --role-color: var(--role-tank); }
.job-card-dps { --role-color: var(--role-dps); }
.job-card-heal { --role-color: var(--role-heal); }
.job-card-sup { --role-color: var(--role-sup); }

.job-info-box {
  margin: 12px 16px;
  border: 2px solid #444;
  border-radius: 10px;
  padding: 15px;
background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}

.job-info-box.show {
  opacity: 1;
  transform: translateY(0);
}

.job-info-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 5px;
}

.job-info-text {
  font-size: 1em;
  margin: 5px 0;
}

.tutorial-message {
  margin: 10px 14px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid lightgray;
  padding: 14px;
  border-radius: 6px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-margin {
  margin: 10px 14px;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid #777;
  padding: 14px;
  border-radius: 6px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-introduction {
  margin: 10px 14px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #66baff;
  padding: 14px;
  border-radius: 6px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-message-icon {
  flex: 0 0 60px;
  width: 60px;
}

.tutorial-message-icon .icon {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.tutorial-message-icon .icon-noimage {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: #222;
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #aaa;
}

.tutorial-message-main {
  flex: 1;
  min-width: 0;
}

.tutorial-message-name {
  font-weight: bold;
  color: #ddd;
  font-size: 0.95em;
  margin-bottom: 6px;
}

.tutorial-message-body {
  color: #ddd;
  font-size: 15px;
  line-height: 1.8;
  word-break: break-all;
}

.tutorial-margin .tutorial-message-body {
  color: #ccc;
}

.skill-handle {
  cursor: grab;
  font-size: 1.2em;
  margin-right: 5px;
  color: #aaa;
  user-select: none;
}

.skill-row th {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: none;
}

.skill-row td {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-left: none;
}

.skill-row.dragging {
  opacity: 0.5;
}

.sortable-placeholder {
  height: 60px;
  border: 2px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.05);
}

.dragging-clone {
  position: fixed;
  z-index: 1000;
  background: rgba(40, 40, 40, 0.9);
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  display: table;
  
  width: 100%;
  
}

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
  text-decoration: underline dashed rgba(255, 255, 255, 0.5);
  text-underline-offset: 4px;
  border-bottom: none;
}

.tooltip-text {
  display: none;
}

#global-tooltip {
  position: fixed;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.95);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: normal;
  border: 1px solid #666;
  pointer-events: none;
  white-space: pre-wrap;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  width: max-content;
  max-width: 300px;
  opacity: 0;
  transition: opacity 0.1s;
}

#global-tooltip.visible {
  opacity: 1;
}

.button-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 16px;
}

.use-button,
.relinquish-button {
  background: transparent;
  border: 1px solid;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 0.9em;
  min-width: 60px;
}

.use-button {
  border-color: #70ca7c;
  background: rgba(112, 202, 124, 0.08);
}

.relinquish-button {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}

.use-button:hover {
  border-color: #70ca7c;
  color: #fff;
  background: rgba(112, 202, 124, 0.20);
  box-shadow: 0 0 8px rgba(112, 202, 124, 0.4);
}

.use-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #666;
}

.use-button:disabled:hover {
  color: #fff;
  background: transparent;
  box-shadow: none;
  border-color: #666;
}

.relinquish-button:hover {
  border-color: #e74c3c;
  color: #fff;
  background: rgba(231, 76, 60, 0.20);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

.profile-character-icons-wrapper {
  display: grid;
  grid-template-columns: repeat(10, 60px);
  gap: 15px;
  justify-content: center;
  width: 100%;
  padding-bottom: 10px;
}

.status-row.warning .status-value {
  color: #ff4d4d;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(255, 77, 77, 0.4);
}

.link-skill-preview-container {
  margin: 10px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  border: 1px solid #555;
}

.link-skill-preview-title {
  margin: 0;
  font-size: 0.95rem;
  color: #88ccff;
}

.link-skill-preview-body {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #eee;
}

.link-skill-result {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
}

.rulebook-table {
  border-collapse: separate;
  border-spacing: 0;
  width: calc(100% - 32px);
  margin: 12px 16px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  border-radius: 10px;
  overflow: hidden;
}

.rulebook-table th {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  text-align: left;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.rulebook-table td {
  padding: 14px;
  vertical-align: top;
  border: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.statuses th:first-child {
  white-space: nowrap;
}

.donation-select-container {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 4px;
}

.donation-select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  background-color: #333;
  color: #FFF;
  border: 1px solid #666;
  border-radius: 4px;
}

.donation-info-block {
  display: none;
  
  border: 1px solid #444;
  padding: 15px;
  border-radius: 4px;
  background-color: #2a2a2a;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.donation-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #ffcc66;
  margin-bottom: 10px;
  border-bottom: 1px solid #444;
  padding-bottom: 5px;
}

.donation-desc {
  margin-bottom: 15px;
  line-height: 1.5;
  color: #DDD;
}

.donation-cost-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px;
  border-radius: 4px;
}

.donation-cost {
  font-weight: bold;
  color: #FFF;
}

details {
  margin-bottom: 15px;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
}

summary.styled-summary {
  background-color: #333;
  padding: 10px 15px;
  font-weight: bold;
  color: #EEE;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}

summary.styled-summary::-webkit-details-marker {
  display: none;
}

summary.styled-summary::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #EEE;
  border-bottom: 2px solid #EEE;
  transform: rotate(-45deg);
  
  margin-right: 10px;
  transition: transform 0.2s;
  margin-bottom: 2px;
}

details[open] summary.styled-summary::before {
  transform: rotate(45deg);
  
  margin-bottom: 4px;
}

details[open] .form {
  padding: 15px;
  border-top: 1px solid #444;
}

details.profile-acc {
  margin: 8px 0;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.15);
}
details.profile-acc summary.profile-acc-summary {
  background-color: transparent;
  padding: 6px 10px;
  font-size: 0.9em;
  font-weight: bold;
  color: #ccc;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  border: none;
}
details.profile-acc summary.profile-acc-summary::-webkit-details-marker {
  display: none;
}
details.profile-acc summary.profile-acc-summary::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #ccc;
  border-bottom: 1.5px solid #ccc;
  transform: rotate(-45deg);
  margin-right: 8px;
  transition: transform 0.2s;
  margin-bottom: 1px;
}
details.profile-acc[open] summary.profile-acc-summary::before {
  transform: rotate(45deg);
  margin-bottom: 3px;
}
.profile-acc-content {
  padding: 8px 12px;
  border-top: 1px solid #444;
  background-color: rgba(255, 255, 255, 0.02);
  line-height: 1.5;
  font-size: 0.95em;
}

.profile-dialog {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid #444;
  padding: 8px;
  border-radius: 4px;
  margin: 8px 0;
  background-color: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.profile-dialog-icon-area {
  margin-right: 12px;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  background-color: #333;
  overflow: hidden;
}

.profile-dialog-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-dialog-body {
  flex: 1;
  flex-grow: 1;
  min-width: 0;
}

.profile-dialog-message {
  font-size: 0.95em;
  line-height: 1.5;
  word-break: break-all;
}

.notification-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  background-color: #FF4444;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

.tab-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #FF4444;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
}

.room-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.exploration-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.exploration-message-list.grid-mode,
.room-message-list.grid-mode {
  display: block;
  columns: 2;
  column-gap: 16px;
  column-rule: 1px solid lightgray;
  max-width: 1000px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.room-message-list.grid-mode .room-message {
  margin-top: 0;
}

@media (max-width: 820px) {

  .exploration-message-list.grid-mode,
  .room-message-list.grid-mode {
    columns: 1;
    column-rule: none;
  }
}

.exploration-message {
  display: flex;
  gap: 16px;
  border: 1px solid lightgray;
  border-radius: 8px;
  padding: 14px;
  align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.2);
}

.exploration-message-icon,
.room-message-icon {
  flex: 0 0 60px;
  width: 60px;
}

.exploration-message-icon .icon,
.room-message-icon .icon {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.exploration-message-icon .icon-noimage,
.room-message-icon .icon-noimage {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.exploration-message-main,
.room-message-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.room-message-body,
.thread-post-body,
.exploration-message-body {
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
}

.exploration-message-info-link,
.room-message-info-link {
  text-decoration: none;
  display: inline-block;
  margin-bottom: 4px;
}

.exploration-message-info,
.room-message-info {
  font-weight: bold;
  color: #ddd;
  font-size: 0.95em;
}

.exploration-message-info-eno,
.room-message-info-eno {
  font-weight: normal;
  color: #ddd;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  cursor: pointer;
  margin-right: 5px;
}

.exploration-message-action:hover,
.room-message-action:hover {
  background: #444;
}

.exploration-message-details,
.room-message-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.8em;
  color: #888;
}

.exploration-message-refers,
.room-message-refers {
  font-size: 0.85em;
  color: #aaa;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.thread-preview-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 0;
}

.thread-post-body {
  background: linear-gradient(to bottom, #1e1e1e, #1a1a1a);
  padding: 16px 18px;
  color: #ddd;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.composer-limit-status {
  margin: 4px 0 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: #ff5252;
}

.composer-limit-status[hidden] {
  display: none !important;
}

textarea.is-at-composer-limit {
  border-color: #a61d39;
}

.room-message-body img,
.thread-post-body img {
  max-width: min(380px, 100%);
  width: auto;
  height: auto;
  max-height: 200px;
}

.log-card {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  margin: 6px 0;
  border: 1px solid #555;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2a, #333);
  box-sizing: border-box;
}

.log-card-link {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 10px 12px;
  transition: background 0.15s;
}

.log-card-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.log-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.log-card-result {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.4;
}

.log-card-result-win {
  background: #2d7d46;
  color: #fff;
}

.log-card-result-lose {
  background: #7d2d2d;
  color: #fff;
}

.log-card-result-even {
  background: #7d7d2d;
  color: #fff;
}

.log-card-title {
  font-size: 0.875em;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-card-footer {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #999;
  align-items: center;
  margin-top: 4px;
}

.log-card-location {
  flex-shrink: 0;
}

.log-card-leader {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-card-id {
  margin-left: auto;
  flex-shrink: 0;
}

.log-card-preview {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a2a2a, #333);
  max-width: 360px;
  white-space: nowrap;
}

.skill-description {
  word-break: break-all;
  
  white-space: pre-wrap;
  margin-top: 5px;
  font-size: 0.9em;
  color: #DDD;
}

.battle-lines {
  margin: 0 auto;
  width: 95%;
  border-collapse: collapse;
}

.battle-lines th {
  text-align: left;
  padding: 10px;
  padding-top: 20px;
  width: 200px;
  vertical-align: top;
}

.form-field {
  margin: 10px 0;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #ddd;
}

.form-input-dark {
  padding: 10px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 0.875em;
}

.form-select:focus,
.form-input-dark:focus {
  outline: none;
  border-color: #70ca7c;
}

.form-input-name {
  width: 200px;
}

.form-input-message {
  width: 100%;
  max-width: 600px;
}

.exploration-message-editor {
  width: 100%;
  max-width: 720px;
  height: 70px;
  padding: 10px;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
}

.ad-footer-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.85);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: none;
  min-width: 300px;
  max-width: 90vw;
  color: #DDD;
}

.ad-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

.ad-close-btn:hover {
  color: #FFF;
}

.ad-content {
  margin-top: 5px;
}

.ad-text-main {
  margin: 0;
  font-size: 1em;
}

.guest-nav-wrapper {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.guest-nav-wrapper .navlink {
  width: auto;
  min-width: 80px;
}

.appicon span {
  white-space: nowrap;
}

.skill-select-with-picker {
  position: relative;
}

.skill-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.skill-picker-summary {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-select-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: flex-start;
  flex: 0 1 240px;
  min-width: 200px;
  max-width: 320px;
}

.skill-select-slot-native {
  flex: 1;
  min-width: 0;
}

.skill-picker-open {
  flex-shrink: 0;
  margin: 0;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 0.85rem;
  line-height: 1.1;
  min-width: 34px;
  text-align: center;
}

.skill-picker-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.skill-picker-modal.is-open {
  display: flex !important;
  flex-direction: column;
  pointer-events: auto;
}

.skill-picker-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 0;
  cursor: default;
}

.skill-picker-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  height: min(92vh, 760px);
  background: #1e1e1e;
  color: #eee;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skill-picker-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.skill-picker-modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
}

.skill-picker-modal-close {
  background: transparent;
  border: none;
  color: #666;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
}

.skill-picker-modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.skill-picker-modal-slot-label {
  margin: 8px 14px 0;
  font-size: 0.85rem;
  color: #aaa;
}

.skill-picker-search {
  margin: 10px 14px;
  width: calc(100% - 28px);
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #111;
  color: #eee;
}

.skill-picker-modal-body {
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 0;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-picker-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #ddd;
  font-size: 0.9rem;
  cursor: pointer;
}

.skill-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.skill-picker-item.is-selected {
  background: rgba(100, 149, 237, 0.25);
  color: #fff;
}

.skill-picker-tags-area {
  width: 240px;
  flex-shrink: 0;
  margin: 0;
  padding: 8px;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.skill-picker-tags-label {
  font-size: 0.75rem;
  color: #aaa;
  margin: 0 0 8px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.skill-picker-tags {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
}

.skill-picker-tag {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.3;
  min-height: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-picker-tag:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.skill-picker-tag.active {
  background: rgba(112, 202, 124, 0.25);
  border-color: rgba(112, 202, 124, 0.4);
  color: #70ca7c;
}

.skill-picker-preview {
  flex: none;
  padding: 8px 14px;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  min-height: calc(1.45em * 2 + 16px);
  max-height: calc(1.45em * 2 + 16px);
  box-sizing: border-box;
}

.skill-picker-preview-inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.skill-picker-preview-cond {
  color: #9ec9ff;
  margin-right: 0.35em;
}

.skill-picker-preview-desc {
  color: #ddd;
}

.skill-picker-preview-empty {
  margin: 0;
  color: #888;
  font-size: 0.85rem;
  line-height: calc(1.45em * 2);
}

.skill-picker-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.skill-picker-scroll-locked,
body.skill-picker-scroll-locked {
  overflow: hidden;
}

@media (max-width: 600px) {
  .skill-picker-modal {
    padding: 0;
  }

  .skill-picker-modal-panel {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .skill-picker-modal-body {
    flex-direction: column;
  }

  .skill-picker-list {
    flex: 1;
    min-height: 0;
    border-right: none;
  }

  .skill-picker-tags-area {
    order: -1;
    width: 100%;
    max-height: 110px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .skill-picker-tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .skill-picker-tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .skill-picker-preview {
    min-height: calc(1.45em * 2 + 16px);
    max-height: calc(1.45em * 2 + 16px);
  }
}

.error-heading {
  color: red;
}

.crit {
  color: red;
  font-size: 0.9em;
  font-weight: bold;
}

.crit2 {
  font-size: 0.9em;
  font-weight: bold;
  color: #ffd700;
}

.crit3 {
  font-size: 0.9em;
  font-weight: bold;
  background: linear-gradient(135deg, #ff0000 0%, #ff8800 20%, #ffff00 40%, #00ff00 60%, #0088ff 80%, #ff00ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-detail-box {
  margin: 24px auto;
  padding: 16px 20px;
  max-width: 600px;
  background: rgba(235, 87, 87, 0.1);
  border: 1px solid rgba(235, 87, 87, 0.3);
  border-radius: 8px;
  color: #ff8888;
  text-align: left;
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1.6;
}

.error-detail-box strong {
  color: #ff6b6b;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.error-detail-box span {
  font-size: 0.875em;
  white-space: pre-wrap;
}

.form-checkbox-row {
  margin: 6px 24px;
}

.game-checkbox-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

input[type="checkbox"].game-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #333;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s, border-color 0.2s;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

input[type="checkbox"].game-checkbox:hover {
  border-color: #70ca7c;
}

input[type="checkbox"].game-checkbox:focus-visible {
  border-color: #70ca7c;
  box-shadow: 0 0 0 2px rgba(112, 202, 124, 0.3);
}

input[type="checkbox"].game-checkbox:checked {
  background-color: #70ca7c;
  border-color: #70ca7c;
}

input[type="checkbox"].game-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

input[type="radio"].game-radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #333;
  border: 1px solid #555;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s, border-color 0.2s;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
}

input[type="radio"].game-radio:hover {
  border-color: #70ca7c;
}

input[type="radio"].game-radio:focus-visible {
  border-color: #70ca7c;
  box-shadow: 0 0 0 2px rgba(112, 202, 124, 0.3);
}

input[type="radio"].game-radio:checked {
  border-color: #70ca7c;
  background: radial-gradient(circle, #70ca7c 40%, #333 45%);
}

.status-lamps {
  display: inline-flex;
  gap: 8px;
  vertical-align: middle;
  margin-left: 12px;
}

.status-lamp {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: default;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 3px;
}

.status-lamp.on {
  color: #70ca7c;
  border-color: #70ca7c;
}

.status-lamp.off {
  color: #888;
  border-color: #666;
}

.game-active-badge {
  display: inline-flex;
  align-items: center;
  color: #ffcc66;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.2;
  flex-shrink: 0;
  padding: 1px 6px;
  border: 1px solid rgba(255, 204, 102, 0.55);
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.game-map-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  color: #70ca7c;
  border: 1px solid #70ca7c;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.profile-header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.is-hidden {
  display: none !important;
}

.profile-character-icons-wrapper.is-hidden,
#link-lines-wrapper.is-hidden {
  display: none !important;
}

.scroll-hint.is-hidden {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

.game-status-max {
  color: #ffd700;
  font-weight: bold;
  font-size: 10px;
  margin-left: 2px;
}

.nav-icon-challenge {
  filter: hue-rotate(280deg) saturate(200%);
}

.button-action--compact {
  margin-top: 10px;
}

.ajax-data-hidden {
  display: none;
}

.flash-message {
  padding-left: 20px;
}

.icon-noimage.icon-hue-gradient {
  background: linear-gradient(0deg, hsl(var(--icon-hue), 20%, 35%), 70%, hsl(var(--icon-hue), 25%, 70%));
}