/* ==========================================================
   MONEI LIFE
   門栄区生活シミュレーター

   COMMON UI

   01. Base
   02. Game Layout
   03. Header / Window / Footer
   04. Player / Avatar
   05. Life Status
   06. Common Content
   07. Actions / Navigation
   08. Locations
   09. Shop
   10. Inventory
   11. Utility
   12. Form
   13. Navigation Button
   14. Responsive

   Separate Styles
   - room.css      : 自室・家具・部屋表示
   - diary.css     : 門栄日誌
   - profile.css   : 住民プロフィール
========================================================== */


/* ==========================================================
   01. BASE
========================================================== */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 24px 12px;

  background: #d8ddd7;
  color: #252a27;

  font-family:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  line-height: 1.7;
}

a {
  color: #315f53;
}

a:hover {
  color: #183f35;
}

button,
input,
select,
textarea {
  font: inherit;
}


/* ==========================================================
   02. GAME LAYOUT
========================================================== */

.ml-game {
  width: min(960px, 100%);
  margin: 0 auto;
}


/* ==========================================================
   03. HEADER / WINDOW / FOOTER
========================================================== */

/* ----------------------------------------------------------
   Header
---------------------------------------------------------- */

.ml-header {
  position: relative;

  overflow: hidden;

  padding: 16px 20px;

  background:
    linear-gradient(135deg, #356457 0%, #244a40 100%);
  color: #fff;

  border: 1px solid #18352e;
  border-radius: 10px 10px 4px 4px;

  box-shadow:
    0 3px 0 #c9a86a,
    0 7px 14px rgba(35, 61, 52, 0.16);
}

.ml-header::after {
  position: absolute;
  top: -28px;
  right: -16px;

  width: 100px;
  height: 100px;

  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;

  content: "";
  pointer-events: none;
}

.ml-header__title {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.ml-header__inner {
  position: relative;
  z-index: 1;

  display: flex;

  min-height: 76px;

  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ml-header__brand {
  min-width: 0;
}

.ml-header__home-link {
  display: inline-block;

  padding: 2px 5px 3px;

  color: inherit;
  text-decoration: none;

  border-radius: 5px;
}

.ml-header__image-link {
  display: block;

  width: 76px;
  min-width: 76px;
  height: 76px;

  border-radius: 6px;
}

.ml-header__image-link:focus-visible {
  outline: 2px solid #f5ddb0;
  outline-offset: 3px;
}

.ml-header__image {
  display: block;

  width: 76px;
  height: 76px;

  object-fit: contain;
  image-rendering: pixelated;
}

.ml-header__home-link:hover,
.ml-header__home-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: 2px solid #f5ddb0;
  outline-offset: 2px;
}

.ml-header__sub {
  margin-top: 2px;

  font-size: 0.75rem;
  opacity: 0.8;
}

.ml-footer__home-link {
  display: inline-block;

  margin-top: 8px;
  padding: 6px 18px;

  background: #fffdf5;
  border: 1px solid #9aa99f;
  border-radius: 999px;

  color: #30473d;
  font-weight: bold;
  text-decoration: none;

  box-shadow: 0 2px 0 #d1d8d3;
}

.ml-footer__home-link:hover,
.ml-footer__home-link:focus-visible {
  background: #e7eee9;
  color: #203d34;

  outline: 2px solid #8cae9d;
  outline-offset: 2px;
}


/* ----------------------------------------------------------
   Main Window
---------------------------------------------------------- */

.ml-window {
  margin-top: 12px;

  background: #f8f7f0;

  border: 1px solid #7c8580;

  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.12);
}

.ml-window__bar {
  padding: 6px 10px;

  background: #bcc8c0;

  border-bottom: 1px solid #7c8580;

  font-size: 0.8rem;
  font-weight: bold;
}

.ml-window__body {
  padding: 24px;
}


/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */

.ml-footer {
  margin-top: 14px;
  padding: 14px 8px 8px;

  color: #657069;

  font-size: 0.7rem;
  text-align: center;
}


/* ----------------------------------------------------------
   Root Page
---------------------------------------------------------- */

.ml-root-window {
  overflow: hidden;

  border-radius: 6px;
}

.ml-root-hero {
  margin: -4px -4px 18px;
  padding: 24px 20px;

  background:
    linear-gradient(145deg, #edf5ed 0%, #fff9e9 100%);
  border: 1px solid #c3d0c7;
  border-radius: 8px;

  text-align: center;
}

.ml-root-window-bar {
  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ml-root-window-bar__office {
  padding: 3px 8px;

  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #aab5ae;
  border-radius: 4px;

  color: #536159;
  font-size: 0.7rem;
  white-space: nowrap;
}

.ml-root-hero__eyebrow {
  color: #8a6f3d;

  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.18em;
}

.ml-root-hero__title {
  margin: 7px 0 5px;

  color: #2d5146;

  font-size: 1.45rem;
}

.ml-root-hero__lead {
  margin: 0;

  color: #68736c;
  font-size: 0.82rem;
}

.ml-root-hero__divider {
  width: 54%;

  margin: 14px auto 16px;

  border-top: 1px dashed #bdc7c1;
}

.ml-root-intro {
  margin-bottom: 0;

  border-left: 4px solid #d3b36f;

  text-align: center;
}

.ml-root-actions {
  display: grid;

  gap: 10px;

  margin: 20px 0;
}

.ml-root-action {
  display: block;

  padding: 12px 16px;

  background: #fff;
  border: 1px solid #9da9a2;
  border-radius: 7px;

  color: #30483f;
  font-weight: bold;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 2px 0 #d2d8d4;
}

.ml-root-action--primary {
  background: #3d685b;
  border-color: #294d43;

  color: #fff;

  box-shadow: 0 3px 0 #25463d;
}

.ml-root-action:hover,
.ml-root-action:focus-visible {
  background: #edf4ef;

  color: #203d34;

  outline: 2px solid #8cae9d;
  outline-offset: 2px;
  transform: translateY(-1px);
}

.ml-root-action--primary:hover,
.ml-root-action--primary:focus-visible {
  background: #4b786a;
  color: #fff;
}


/* ----------------------------------------------------------
   Root Community Board
---------------------------------------------------------- */

.ml-root-community {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;

  margin-top: 20px;
  padding: 18px;

  align-items: center;

  background: linear-gradient(135deg, #eef7f2 0%, #fffaf0 100%);
  border: 1px solid #b9cfc3;
  border-radius: 8px;

  box-shadow: 0 2px 0 rgba(55, 72, 64, 0.09);
}

.ml-root-community__main {
  display: flex;

  min-width: 0;

  align-items: center;
  gap: 14px;
}

.ml-root-community__icon {
  display: grid;

  width: 52px;
  height: 52px;

  flex: 0 0 52px;
  place-items: center;

  background: #fff;
  border: 1px solid #bdd0c5;
  border-radius: 50%;

  font-size: 1.65rem;
  box-shadow: 0 2px 0 rgba(55, 72, 64, 0.08);
}

.ml-root-community__label {
  display: block;

  margin-bottom: 3px;

  color: #728078;
  font-size: 0.64rem;
  font-weight: bold;
  letter-spacing: 0.12em;
}

.ml-root-community h2 {
  margin: 0;

  color: #285346;
  font-size: 1.08rem;
  line-height: 1.45;
}

.ml-root-community__main p {
  margin: 5px 0 0;

  color: #53635b;
  font-size: 0.82rem;
  line-height: 1.65;
}

.ml-root-community__link {
  display: inline-flex;

  min-height: 46px;
  padding: 9px 16px;

  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #356557;
  border: 1px solid #274f44;
  border-radius: 6px;

  color: #fff;
  font-size: 0.88rem;
  font-weight: bold;
  text-decoration: none;

  box-shadow: 0 2px 0 rgba(32, 61, 52, 0.2);
}

.ml-root-community__link:hover,
.ml-root-community__link:focus-visible {
  background: #4b786a;
  outline: 2px solid #8cae9d;
  outline-offset: 2px;
  transform: translateY(-1px);
}

.ml-root-community__note {
  grid-column: 1 / -1;

  margin: 0;

  color: #758078;
  font-size: 0.7rem;
  line-height: 1.5;
}

.ml-root-section {
  margin-top: 20px;
  padding: 16px;

  background: #fbfaf5;
  border: 1px solid #cbd2cd;
  border-radius: 7px;
}

.ml-root-section__heading {
  display: flex;

  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 12px;
}

.ml-root-section__heading h2 {
  margin: 0;

  color: #304b41;
  font-size: 1rem;
}

.ml-root-section__heading span {
  color: #7a837e;

  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.ml-root-guide-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ml-root-guide-card {
  position: relative;

  display: flex;

  min-height: 220px;
  padding: 16px 14px 30px;

  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  background: #f3f7ef;
  border: 1px solid #c1cbbf;
  border-radius: 7px;

  color: #304b41;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 2px 0 rgba(55, 72, 64, 0.1);
}

.ml-root-guide-card--rules {
  background: #fff8e9;
  border-color: #dcc99a;
}

.ml-root-guide-card--help {
  background: #eef5f8;
  border-color: #bfcdd2;
}

.ml-root-guide-card:hover,
.ml-root-guide-card:focus-visible {
  outline: 2px solid #86a898;
  outline-offset: 2px;
  transform: translateY(-2px);
}

.ml-root-guide-card__icon {
  min-height: 43px;

  font-size: 2rem;
  line-height: 1;
}

.ml-root-guide-card strong {
  display: flex;

  min-height: 62px;

  align-items: center;

  font-size: 1.03rem;
  line-height: 1.45;
}

.ml-root-guide-card__description {
  width: 100%;

  margin-top: 6px;
  padding-top: 10px;

  border-top: 1px dashed #b9c4bd;

  color: #5d6862;
  font-size: 0.78rem;
  line-height: 1.6;
}

.ml-root-guide-card__arrow {
  position: absolute;
  right: 11px;
  bottom: 7px;

  font-size: 1.5rem;
  line-height: 1;
}


/* ----------------------------------------------------------
   Root Disclosure
---------------------------------------------------------- */

.ml-root-disclosure-grid {
  display: grid;
  gap: 12px;
}

.ml-root-disclosure-card {
  padding: 15px 16px;

  background: #f4f8f5;
  border: 1px solid #c8d8cf;
  border-radius: 7px;

  color: #44534b;
  box-shadow: 0 2px 0 rgba(55, 72, 64, 0.07);
}

.ml-root-disclosure-card:nth-child(2) {
  background: #fff9ed;
  border-color: #dfcea3;
}

.ml-root-disclosure-card:nth-child(3) {
  background: #f1f7fa;
  border-color: #c4d4dc;
}

.ml-root-disclosure-card--access-log {
  background: #f7f4fa;
  border-color: #d4c9dc;
}

.ml-root-disclosure-card h3 {
  margin: 0 0 11px;
  padding-bottom: 9px;

  border-bottom: 1px dashed #aebfb5;

  color: #285346;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ml-root-disclosure-card:nth-child(2) h3 {
  border-bottom-color: #cdbb8f;
  color: #765d28;
}

.ml-root-disclosure-card:nth-child(3) h3 {
  border-bottom-color: #afc4ce;
  color: #315d70;
}

.ml-root-disclosure-card--access-log h3 {
  border-bottom-color: #c3b4ce;
  color: #624b72;
}

.ml-root-disclosure-card p {
  margin: 8px 0 0;
  line-height: 1.75;
}

.ml-root-disclosure-card ul {
  margin: 9px 0;
  padding-left: 1.4em;
}

.ml-root-disclosure-card li + li {
  margin-top: 4px;
}

.ml-root-notices {
  border-top: 1px solid #ccd3ce;
}

.ml-root-notice {
  display: grid;

  grid-template-columns: 112px 1fr;
  gap: 12px;

  padding: 9px 12px;

  border-bottom: 1px solid #d7dcd9;

  font-size: 0.8rem;
}

.ml-root-notice time {
  color: #78817c;
  font-family: monospace;
}

.ml-root-notice-detail {
  margin-top: 12px;
  padding: 14px 16px;

  background: #fff8e9;
  border: 1px solid #dcc99a;
  border-radius: 7px;

  color: #514a3c;
}

.ml-root-notice-detail p {
  margin: 0;
  line-height: 1.75;
}

.ml-root-notice-detail p + p {
  margin-top: 5px;
}

.ml-root-system .ml-status a {
  color: #315d50;
  font-weight: bold;
  text-underline-offset: 3px;
}

.ml-root-system {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;

  margin-top: 20px;
  padding-top: 14px;

  border-top: 1px dashed #b9c2bc;
}

.ml-root-system .ml-status {
  margin: 0;
}

.ml-root-system__office {
  padding: 6px 10px;

  background: #f7f7f2;
  border: 1px solid #aab3ad;
  border-radius: 4px;

  color: #5a655f;
  font-size: 0.72rem;
}

.ml-root-counter {
  padding: 7px 10px;
  background: #28332e;
  border: 1px solid #18211d;
  border-radius: 4px;
  color: #d9e2dc;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08), 1px 1px 0 rgba(43, 55, 49, 0.12);
}

.ml-root-counter__title {
  margin-bottom: 4px;
  color: #9eaaa3;
  font-family: monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-align: center;
}

.ml-root-counter__numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ml-root-counter__numbers span {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #aeb9b2;
  font-family: monospace;
  font-size: 0.57rem;
}

.ml-root-counter__numbers strong {
  padding: 1px 4px;
  background: #101713;
  border: 1px solid #414f47;
  color: #d9eaa9;
  font-size: 0.76rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  line-height: 1.35;
}


/* ==========================================================
   04. PLAYER / AVATAR
========================================================== */

/* ----------------------------------------------------------
   Standard Avatar
---------------------------------------------------------- */

.ml-avatar {
  display: block;

  width: 96px;
  height: 96px;

  object-fit: cover;

  background: #fff;
  border: 1px solid #7c8580;
}

.ml-avatar-emoji {
  display: flex;

  width: 96px;
  height: 96px;

  align-items: center;
  justify-content: center;

  background: #fff;
  border: 1px solid #7c8580;

  font-size: 48px;
}


/* ----------------------------------------------------------
   Small Avatar
---------------------------------------------------------- */

.ml-avatar-small {
  display: block;

  width: 48px;
  height: 48px;

  object-fit: cover;

  background: #fff;
  border: 1px solid #7c8580;
}

.ml-avatar-emoji-small {
  display: flex;

  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  align-items: center;
  justify-content: center;

  background: #fff;
  border: 1px solid #7c8580;

  font-size: 28px;
}


/* ----------------------------------------------------------
   Main Player Panel
---------------------------------------------------------- */

.ml-player-panel {
  display: flex;

  align-items: center;
  gap: 14px;

  margin-bottom: 10px;
  padding: 12px;

  background: #fff;

  border: 1px solid #aab2ac;
}

.ml-player-panel__avatar {
  flex: 0 0 auto;
}

.ml-player-panel__info {
  min-width: 0;
}

.ml-player-panel__name {
  color: #273e36;

  font-size: 1.1rem;
  font-weight: bold;
}

.ml-player-panel__number {
  margin-top: 3px;

  color: #727a75;

  font-size: 0.75rem;
}


/* ----------------------------------------------------------
   Mini Player Panel
   旧ページとの互換用
---------------------------------------------------------- */

.ml-player-mini {
  display: flex;

  align-items: center;
  gap: 10px;

  margin-bottom: 18px;
  padding: 10px;

  background: #eef1ed;

  border: 1px solid #aab2ac;
}


/* ==========================================================
   05. LIFE STATUS
========================================================== */

.ml-life-status {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin: 0 0 18px;
  padding: 8px;

  background: #eef1ed;

  border: 1px solid #aab2ac;
}

.ml-life-status > span {
  padding: 3px 8px;

  background: #fff;

  border: 1px solid #c4cac6;

  font-size: 0.8rem;
  white-space: nowrap;
}


/* ----------------------------------------------------------
   Status Panel
---------------------------------------------------------- */

.ml-status-panel {
  margin: 0 0 18px;
  padding: 10px 12px;

  background: #eef1ed;
  border: 1px solid #aab2ac;
}

.ml-status-panel__summary {
  display: flex;
  flex-wrap: wrap;

  gap: 6px 16px;

  margin-bottom: 10px;
  padding-bottom: 8px;

  border-bottom: 1px dashed #b8c0ba;

  font-size: 0.8rem;
}


/* ----------------------------------------------------------
   Gauge variations
---------------------------------------------------------- */

.ml-gauge__fill--energy {
  background: #6f8f7f;
}

.ml-gauge__fill--hunger {
  background: #9b8d63;
}

/* ----------------------------------------------------------
   Status Gauge
   後で元気・満腹ゲージに使用
---------------------------------------------------------- */

.ml-gauge {
  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;
  gap: 8px;

  margin-top: 6px;
}

.ml-gauge__label {
  min-width: 58px;

  font-size: 0.78rem;
}

.ml-gauge__track {
  height: 10px;

  overflow: hidden;

  background: #d8ddd9;

  border: 1px solid #9ba49e;
}

.ml-gauge__fill {
  height: 100%;

  background: #718d80;
}

.ml-gauge__value {
  min-width: 32px;

  color: #5c655f;

  font-size: 0.72rem;
  text-align: right;
}


/* ==========================================================
   06. COMMON CONTENT
========================================================== */

/* ----------------------------------------------------------
   Heading
---------------------------------------------------------- */

.ml-heading {
  margin: 0 0 18px;

  font-size: 1.2rem;
}


/* ----------------------------------------------------------
   Sections
---------------------------------------------------------- */

.ml-section {
  margin-top: 18px;
}

.ml-section__title {
  margin: 0 0 8px;
  padding: 4px 8px;

  background: #dfe5e1;

  border-left: 5px solid #70847a;

  color: #44544c;

  font-size: 0.9rem;
}

.ml-section--system {
  padding-top: 8px;

  border-top: 1px dashed #b9bfbb;
}


/* ----------------------------------------------------------
   Standard Message
---------------------------------------------------------- */

.ml-message {
  padding: 14px 16px;

  background: #fff;

  border: 1px solid #c6cbc7;
}

.ml-message > :first-child {
  margin-top: 0;
}

.ml-message > :last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   Result Message
---------------------------------------------------------- */

.ml-result-message {
  margin-top: 8px;
  padding: 10px 12px;

  background: #fff;

  border: 1px solid #b8c0ba;
}


/* ----------------------------------------------------------
   Character Thought
---------------------------------------------------------- */

.ml-thought {
  margin: 10px 0 18px;
  padding: 8px 10px;

  background: #fffbe9;

  border: 1px dashed #b8aa73;

  font-size: 0.9rem;
}


/* ----------------------------------------------------------
   Debug / Location Status
---------------------------------------------------------- */

.ml-status {
  margin-top: 18px;
  padding-top: 12px;

  border-top: 1px dashed #aaa;

  color: #606762;

  font-size: 0.75rem;
}


/* ==========================================================
   07. ACTIONS / NAVIGATION
========================================================== */

/* ----------------------------------------------------------
   Main Action Grid
---------------------------------------------------------- */

.ml-action-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

  gap: 8px;
}

.ml-action-form {
  margin: 0;
}


/* ----------------------------------------------------------
   Main Action Button
---------------------------------------------------------- */

.ml-action-button {
  display: flex;

  box-sizing: border-box;

  width: 100%;
  min-height: 42px;

  align-items: center;
  justify-content: center;

  padding: 8px 12px;

  background: #f7f8f7;

  border: 1px solid #8f9993;

  color: #33483e;

  font: inherit;
  font-size: 0.85rem;

  text-align: center;
  text-decoration: none;

  cursor: pointer;
}

.ml-action-button:hover {
  background: #e7eee9;

  color: #203d34;
}


/* ----------------------------------------------------------
   Sub Menu
---------------------------------------------------------- */

.ml-submenu {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  padding: 6px 4px;
}

.ml-submenu a {
  display: flex;

  box-sizing: border-box;

  min-height: 38px;

  align-items: center;
  justify-content: center;

  padding: 7px 10px;

  background: #f7f8f7;

  border: 1px solid #9aa39e;

  color: #33483e;

  font-size: 0.8rem;

  text-align: center;
  text-decoration: none;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c8ceca;

  cursor: pointer;
}

.ml-submenu a:hover {
  background: #e7eee9;

  color: #203d34;
}

.ml-submenu a:active {
  box-shadow:
    inset 1px 1px 0 #bcc4bf,
    inset -1px -1px 0 #ffffff;
}

/* ----------------------------------------------------------
   Notification Badge
---------------------------------------------------------- */

.ml-submenu a.ml-notification-link {
  gap: 7px;
}

.ml-notification-badge {
  display: inline-flex;

  min-width: 21px;
  height: 21px;

  align-items: center;
  justify-content: center;

  padding: 0 6px;

  background: #d94b4b;
  border: 2px solid #ffffff;
  border-radius: 999px;

  color: #ffffff;

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 1px 3px rgba(91, 34, 34, 0.3);
}

/* ----------------------------------------------------------
   Registration Honeypot
---------------------------------------------------------- */

.ml-registration-trap {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}

/* ==========================================================
   08. LOCATIONS
========================================================== */

.ml-location-list {
  display: grid;

  gap: 8px;

  margin-top: 18px;
}

.ml-move-form {
  margin: 0;
}

.ml-move-form--location {
  display: contents;
}

.ml-location {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  background: #fff;

  border: 1px solid #9aa29d;

  color: #24473e;

  text-decoration: none;
}

button.ml-location {
  width: 100%;

  font: inherit;
  text-align: left;

  cursor: pointer;
}

a.ml-location:hover,
button.ml-location:hover {
  background: #edf4ef;

  color: #183f35;
}

.ml-location strong {
  min-width: 0;
}

.ml-location span {
  flex: 0 0 auto;

  color: #6a716d;

  font-size: 0.8rem;
}

.ml-location--closed {
  opacity: 0.55;

  cursor: not-allowed;
}


/* ==========================================================
   09. SHOP
========================================================== */

.ml-shop-message {
  margin: 18px 0;
  padding: 10px 12px;

  background: #edf6e9;

  border: 1px solid #9eb495;

  font-weight: bold;
}

.ml-shop-list {
  display: grid;

  gap: 8px;

  margin: 20px 0;
}

.ml-shop-item {
  display: grid;

  grid-template-columns: 52px 1fr auto;

  gap: 12px;

  align-items: center;

  padding: 12px;

  background: #fff;

  border: 1px solid #aab0ac;
}

.ml-shop-item__icon {
  font-size: 32px;
  text-align: center;
}

.ml-shop-item__info {
  min-width: 0;
}

.ml-shop-item__description {
  margin-top: 3px;

  color: #6a716d;

  font-size: 0.8rem;
}

.ml-shop-item__buy {
  text-align: right;
  white-space: nowrap;
}

.ml-shop-item__buy form {
  margin-top: 5px;
}

.ml-shop-item__buy button {
  padding: 3px 10px;

  background: #f4f6f4;

  border: 1px solid #89938d;

  color: #30473d;

  cursor: pointer;
}

.ml-shop-item__buy button:hover {
  background: #e7eee9;
}


/* ==========================================================
   10. INVENTORY
========================================================== */

.ml-inventory-list {
  display: grid;

  gap: 8px;

  margin: 18px 0;
}

.ml-inventory-item {
  display: grid;

  grid-template-columns: 52px 1fr;

  gap: 12px;

  align-items: center;

  padding: 12px;

  background: #fff;

  border: 1px solid #aab0ac;
}

.ml-inventory-item__icon {
  font-size: 32px;
  text-align: center;
}

.ml-inventory-item__info {
  min-width: 0;
}

.ml-inventory-item__name {
  display: flex;

  align-items: center;

  gap: 8px;
}

.ml-inventory-item__quantity {
  padding: 1px 6px;

  background: #e7ebe8;

  border: 1px solid #b8c0ba;

  font-size: 0.75rem;
  font-weight: bold;
}

.ml-inventory-item__description {
  margin-top: 4px;

  color: #606762;

  font-size: 0.8rem;
}

.ml-inventory-item__category {
  margin-top: 4px;

  color: #8a918d;

  font-size: 0.7rem;
  text-transform: uppercase;
}

.ml-item-effect {
  margin-top: 5px;

  color: #56635c;

  font-size: 0.75rem;
}

.ml-item-use {
  margin-top: 7px;
}

.ml-item-use button {
  padding: 3px 10px;

  background: #f4f6f4;

  border: 1px solid #89938d;

  color: #30473d;

  cursor: pointer;
}

.ml-item-use button:hover {
  background: #e7eee9;
}


/* ==========================================================
   11. UTILITY
========================================================== */

/* ----------------------------------------------------------
   Help
---------------------------------------------------------- */

.ml-help {
  margin: 6px 0 12px;
  padding: 6px 8px;

  background: #fff8d8;

  border-left: 3px solid #b89b45;

  font-size: 0.8rem;
}


/* ----------------------------------------------------------
   Small utility text
---------------------------------------------------------- */

.ml-muted {
  color: #737b76;

  font-size: 0.8rem;
}



/* ==========================================================
   12.FORM
========================================================== */

.ml-form-input,
.ml-form-textarea {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  padding: 8px 10px;

  background: #fff;

  border: 1px solid #929c96;

  color: #33483e;

  font: inherit;
  font-size: 0.85rem;
}

.ml-form-input:focus,
.ml-form-textarea:focus {
  outline: 2px solid #cbd9d1;
  outline-offset: 1px;
}

.ml-form-textarea {
  min-height: 160px;

  line-height: 1.8;

  resize: vertical;
}

/* 日誌みたいな長文用 */
.ml-form-textarea--large {
  min-height: 280px;
}


/* ==========================================================
   13.NAVIGATION BUTTON
========================================================== */

.ml-nav-button {
  display: inline-flex;

  box-sizing: border-box;

  min-height: 36px;

  align-items: center;
  justify-content: center;

  padding: 6px 12px;

  background: #f7f8f7;

  border: 1px solid #929c96;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c8ceca;

  color: #33483e;

  font-size: 0.78rem;

  text-align: center;
  text-decoration: none;

  cursor: pointer;
}

.ml-nav-button:hover {
  background: #e6eee9;

  color: #203d34;
}

.ml-nav-button:active {
  box-shadow:
    inset 1px 1px 0 #bbc3be,
    inset -1px -1px 0 #ffffff;
}

/* ----------------------------------------------------------
   Navigation Button - Danger
---------------------------------------------------------- */

.ml-nav-button--danger {
  background: #faf3f1;

  border-color: #b99b96;

  color: #704a45;
}

.ml-nav-button--danger:hover {
  background: #f3e4e1;

  color: #653d38;
}

/* ==========================================================
   HIDDEN USERS
========================================================== */

.ml-hidden-users {
  display: grid;

  gap: 10px;

  margin-top: 16px;
}

.ml-hidden-user {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 12px;

  background: #f8f9f7;

  border: 1px solid #c6cec9;
}

.ml-hidden-user__info {
  min-width: 0;
}

.ml-hidden-user form {
  flex: 0 0 auto;

  margin: 0;
}

@media (max-width: 600px) {

  .ml-hidden-user {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-hidden-user .ml-nav-button {
    width: 100%;
  }

}

/* ==========================================================
   14. RESPONSIVE
========================================================== */


/* ----------------------------------------------------------
   Mobile / 600px
---------------------------------------------------------- */

@media (max-width: 600px) {

  body {
    padding: 10px 6px;
  }

  .ml-window__body {
    padding: 16px;
  }

  .ml-header {
    padding: 12px 14px;
  }

  .ml-header__inner {
    min-height: 64px;
  }

  .ml-header__image-link,
  .ml-header__image {
    width: 64px;
    min-width: 64px;
    height: 64px;
  }

  .ml-header__title {
    font-size: 1.1rem;
  }

  .ml-player-panel {
    align-items: flex-start;
  }

  .ml-life-status {
    gap: 5px;
  }

  .ml-life-status > span {
    padding: 2px 6px;
  }

  .ml-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ml-submenu {
    grid-template-columns: 1fr;
  }

  .ml-section--system .ml-submenu {
    grid-template-columns: 1fr;
  }

  .ml-shop-item {
    grid-template-columns: 42px 1fr;
  }

  .ml-root-guide-grid {
    grid-template-columns: 1fr;
  }

  .ml-root-community {
    grid-template-columns: 1fr;
  }

  .ml-root-community__link {
    width: 100%;
  }

  .ml-root-community__note {
    grid-column: auto;
  }

  .ml-root-guide-card {
    min-height: 0;
  }

  .ml-root-notice {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .ml-root-system {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-root-system__office {
    text-align: center;
  }

  .ml-root-counter {
    align-self: center;
  }

  .ml-shop-item__buy {
    grid-column: 2;

    text-align: left;
  }

  .ml-location {
    align-items: flex-start;
  }

}

/* ----------------------------------------------------------
   Small Mobile / 400px
---------------------------------------------------------- */

@media (max-width: 400px) {

  .ml-action-grid {
    grid-template-columns: 1fr;
  }

  .ml-location {
    flex-direction: column;

    gap: 2px;
  }

}