.room-nav {
  max-width: min(920px, calc(100vw - 170px));
  transition: opacity .24s ease, transform .24s ease;
}

body.light-mode {
  background:
    radial-gradient(circle at 70% 12%, rgba(221, 107, 77, 0.18), transparent 34%),
    radial-gradient(circle at 22% 24%, rgba(164, 171, 166, 0.18), transparent 38%),
    linear-gradient(180deg, #f1f0eb 0%, #e8e9e4 56%, #dfe3df 100%);
}

body.light-mode .brand {
  color: #182432;
}

body.light-mode .brand-owner {
  color: #665f59;
}

body.light-mode .brand-mark {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(41, 94, 151, 0.24);
}

body.light-mode .room-nav {
  border-color: rgba(53, 74, 96, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 36px rgba(71, 92, 116, 0.12);
}

body.light-mode .room-nav button {
  color: #445366;
}

body.light-mode .room-nav button:hover,
body.light-mode .room-nav button:focus-visible {
  color: #132131;
  background: rgba(221, 107, 77, 0.12);
}

body.light-mode .room-stage::after {
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(255, 255, 255, 0.12) 100%);
}

body.light-mode .room-title {
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.45);
}

body.light-mode .prompt {
  color: #81554a;
}

body.light-mode .room-title h1 {
  color: #172433;
}

body.light-mode .room-title p:last-child {
  color: #385064;
}

body.light-mode .room-help {
  color: #2d4256;
  border-color: rgba(53, 74, 96, 0.14);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 28px rgba(71, 92, 116, 0.14);
}

body.light-mode .room-panel {
  border-left-color: rgba(53, 74, 96, 0.16);
  background:
    radial-gradient(circle at top left, rgba(255, 202, 143, 0.26), transparent 22%),
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(236, 243, 249, 0.98)),
    #edf3f8;
  box-shadow: -20px 0 70px rgba(97, 117, 139, 0.14);
}

body.light-mode .room-panel-kicker {
  color: #cf8a2f;
}

body.light-mode .room-panel-close {
  color: #516173;
  background: rgba(20, 28, 36, 0.04);
}

body.light-mode .room-panel h2 {
  color: #172433;
}

body.light-mode .room-panel-body {
  color: #3d5267;
}

body.light-mode .room-panel-body a {
  color: #1f628f;
}

body.light-mode .room-panel-body strong {
  color: #183149;
}

body.light-mode .room-tooltip {
  color: #173148;
  border-color: rgba(53, 74, 96, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(71, 92, 116, 0.14);
}

body.panel-open .room-nav.nav-auto-hidden {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.room-nav button {
  min-width: 60px;
  padding: 8px 11px;
}

.room-stage {
  background:
    radial-gradient(circle at 52% 62%, rgba(255, 198, 124, 0.08), transparent 30%),
    radial-gradient(circle at 28% 22%, rgba(221, 107, 77, 0.12), transparent 34%);
}

.room-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.18) 100%);
}

body.panel-open .room-stage {
  right: min(520px, 40vw);
}

body.panel-open .room-title {
  opacity: 0.08;
  transform: translateY(8px);
}

.room-title {
  bottom: clamp(90px, 12vh, 146px);
  width: min(530px, calc(100vw - 36px));
}

body.light-mode footer {
  color: rgba(70, 66, 61, 0.74);
}

.room-title h1 {
  max-width: 100%;
  font-size: clamp(1.7rem, 4.8vw, 3.6rem);
  overflow-wrap: anywhere;
  letter-spacing: -0.055em;
}

.room-title p:last-child {
  max-width: 470px;
}

.room-help {
  position: absolute;
  top: 98px;
  left: clamp(18px, 5vw, 70px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(205, 222, 241, 0.18);
  border-radius: 999px;
  color: #d9e7f5;
  background: rgba(10, 15, 21, 0.66);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: opacity .28s ease, transform .28s ease;
}

body.dragged .room-help,
body.panel-open .room-help {
  opacity: 0;
  transform: translateY(-10px);
}

.room-panel {
  width: min(520px, 40vw);
  min-width: 390px;
  background:
    radial-gradient(circle at top left, rgba(221, 107, 77, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(18, 27, 38, 0.98), rgba(9, 13, 18, 0.98));
}

.room-panel-kicker {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.room-panel h2 {
  color: #f3f8fd;
}

.room-panel-body {
  color: #d5e1eb;
  font-size: 1.01rem;
}

.room-panel-body p {
  color: inherit;
}

.room-panel-body strong {
  color: #f7fbff;
}

.room-panel-body > * + * {
  margin-top: 14px;
}

.profile-intro {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.profile-intro img {
  display: block;
  width: 104px;
  aspect-ratio: 0.78;
  object-fit: cover;
  object-position: center 32%;
  border: 1px solid rgba(221, 107, 77, 0.28);
  border-radius: 12px;
  filter: saturate(0.75) contrast(1.03);
}

.profile-intro p {
  margin: 0;
  line-height: 1.78;
}

.project-notes {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.project-note {
  padding: 16px 0 15px;
  border-bottom: 1px solid rgba(205, 222, 241, 0.14);
}

.project-note:first-child {
  padding-top: 0;
}

.project-note:last-child {
  border-bottom: 0;
}

.project-note span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.project-note h3 {
  margin: 5px 0 6px;
  color: #f3f1ec;
  font-size: 1.05rem;
}

.project-note p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.92rem;
  line-height: 1.65;
}

.room-panel-body a {
  color: #f1a08c;
}

.room-panel-body .exit-link:active,
.mode-button:active,
.room-nav button:active,
.bgm-side-btn:active,
.bgm-btn:active {
  transform: translateY(1px) scale(0.98);
}

.mode-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mode-button {
  border: 1px solid rgba(221, 107, 77, 0.24);
  border-radius: 10px;
  padding: 14px 16px;
  color: #f2f0eb;
  background: linear-gradient(180deg, rgba(43, 44, 40, 0.98), rgba(24, 25, 22, 0.98));
  font-family: var(--mono);
  font-size: 0.94rem;
  cursor: pointer;
}

.mode-button.is-active {
  border-color: rgba(221, 107, 77, 0.5);
  color: #fff0eb;
  background: linear-gradient(180deg, rgba(91, 48, 38, 0.98), rgba(48, 29, 24, 0.98));
}

.mode-button:hover,
.mode-button:focus-visible {
  border-color: rgba(221, 107, 77, 0.48);
  outline: none;
}

.room-panel-body .exit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin-top: 18px;
  border: 2px solid rgba(255, 82, 82, 0.36);
  border-radius: 14px;
  padding: 18px 22px;
  color: #ff5757 !important;
  -webkit-text-fill-color: #ff5757;
  background: linear-gradient(180deg, rgba(71, 12, 12, 0.4), rgba(35, 7, 7, 0.92));
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.room-panel-body .exit-link:hover,
.room-panel-body .exit-link:focus-visible {
  border-color: rgba(255, 82, 82, 0.58);
  color: #ff6d6d !important;
  -webkit-text-fill-color: #ff6d6d;
  outline: none;
}

body.light-mode .github-card {
  border-color: rgba(53, 74, 96, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 250, 0.98));
  box-shadow: 0 14px 32px rgba(93, 112, 133, 0.1);
}

body.light-mode .github-card-head strong {
  color: #1b334a;
}

body.light-mode .github-card-head span {
  color: #71859a;
}

body.light-mode .github-repos span,
body.light-mode .mode-button {
  color: #2f455a;
  border-color: rgba(53, 74, 96, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(231, 239, 246, 0.88));
}

body.light-mode .mode-button.is-active {
  color: #6f2f20;
  border-color: rgba(221, 107, 77, 0.4);
  background: rgba(221, 107, 77, 0.14);
}

body.light-mode .room-panel-body .exit-link {
  background: linear-gradient(180deg, rgba(255, 236, 236, 0.96), rgba(255, 226, 226, 0.98));
}

body.light-mode .room-panel-body .bio-list li,
body.light-mode .room-panel-body .award-list li {
  border-color: rgba(79, 98, 119, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 252, 0.98));
  box-shadow: 0 10px 26px rgba(93, 112, 133, 0.08);
}

.photo-wall {
  margin-top: 12px;
}

.photo-card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.photo-card img {
  height: 148px;
}

.github-card {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 25, 35, 0.98), rgba(10, 15, 22, 0.98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.github-card-head strong {
  color: #f3f8fd;
  font-size: 1.06rem;
}

.github-card-head span {
  color: #91a6bb;
}

.github-card:hover {
  border-color: rgba(221, 107, 77, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
  transform: translateY(-2px);
}

.github-repos {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.github-repos span {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.github-card p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.github-card p::after {
  content: "↗";
}

.bio-list,
.award-list {
  display: grid;
  gap: 12px;
}

.room-panel-body .bio-list li,
.room-panel-body .award-list li {
  padding: 14px 16px;
  border: 1px solid rgba(188, 207, 229, 0.14);
  border-top: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 31, 43, 0.72), rgba(11, 17, 24, 0.9));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.room-panel-body .bio-list li,
.room-panel-body .award-list li {
  display: grid;
  gap: 5px;
}

.room-panel-body .bio-list span,
.room-panel-body .award-list span {
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.6;
}

body.light-mode .profile-intro img {
  border-color: rgba(139, 91, 82, 0.24);
}

body.light-mode .project-note {
  border-color: rgba(79, 98, 119, 0.14);
}

body.light-mode .project-note h3 {
  color: #20231f;
}

body.light-mode .project-note p,
body.light-mode .room-panel-body .bio-list span,
body.light-mode .room-panel-body .award-list span {
  color: #5f655f;
}

.minesweeper {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(151, 166, 184, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28, 35, 44, 0.96), rgba(19, 25, 32, 0.98));
}

.minesweeper-head {
  margin-bottom: 14px;
  color: #d8e0ea;
}

.mine-grid {
  margin-top: 6px;
}

.mine-reset {
  color: #eef3f7;
  border-color: rgba(168, 181, 197, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, #616d79, #4e5965);
}

.mine-reset:hover {
  border-color: rgba(198, 208, 219, 0.34);
  background: linear-gradient(180deg, #6d7986, #59646f);
}

.mine-mode-toggle {
  border: 1px solid rgba(168, 181, 197, 0.28);
  border-radius: 10px;
  padding: 6px 10px;
  color: #eef3f7;
  background: linear-gradient(180deg, #586471, #47515c);
  cursor: pointer;
}

.mine-mode-toggle.is-active {
  color: #ffe2a6;
  border-color: rgba(242, 182, 109, 0.38);
  background: linear-gradient(180deg, #7a6142, #5f4a31);
}

.mine-cell {
  color: #f4f7fa;
  border: 1px solid rgba(183, 194, 206, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, #6b7682, #515b66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.16);
}

.mine-cell:hover {
  background: linear-gradient(180deg, #788490, #5c6773);
}

.mine-cell.open {
  color: #1f2933;
  background: linear-gradient(180deg, #d9dfe5, #c8d0d8);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42);
  cursor: default;
}

.mine-cell.mine {
  color: #fff3f3;
  background: linear-gradient(180deg, #b96767, #994d4d);
}

.mine-cell.flagged {
  color: #ffe2a6;
}

.mine-cell[data-count="1"] { color: #1d4ed8; }
.mine-cell[data-count="2"] { color: #166534; }
.mine-cell[data-count="3"] { color: #b91c1c; }
.mine-cell[data-count="4"] { color: #312e81; }
.mine-cell[data-count="5"] { color: #92400e; }
.mine-cell[data-count="6"] { color: #0f766e; }
.mine-cell[data-count="7"] { color: #334155; }
.mine-cell[data-count="8"] { color: #111827; }

body.light-mode .minesweeper {
  border-color: rgba(112, 127, 144, 0.2);
  background: linear-gradient(180deg, rgba(246, 248, 250, 0.98), rgba(231, 236, 241, 0.98));
  box-shadow: 0 12px 28px rgba(93, 112, 133, 0.08);
}

body.light-mode .minesweeper-head {
  color: #4b5c6d;
}

body.light-mode .mine-reset {
  color: #2e3944;
  border-color: rgba(112, 127, 144, 0.22);
  background: linear-gradient(180deg, #d7dde3, #c1c9d1);
}

body.light-mode .mine-mode-toggle {
  color: #2e3944;
  border-color: rgba(112, 127, 144, 0.22);
  background: linear-gradient(180deg, #d7dde3, #c1c9d1);
}

body.light-mode .mine-mode-toggle.is-active {
  color: #7a4c00;
  border-color: rgba(242, 182, 109, 0.34);
  background: linear-gradient(180deg, #f2dfbf, #e7d0ac);
}

body.light-mode .mine-cell {
  color: #21303d;
  border-color: rgba(112, 127, 144, 0.22);
  background: linear-gradient(180deg, #d8dee4, #bcc6cf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 1px 2px rgba(93, 112, 133, 0.08);
}

body.light-mode .mine-cell:hover {
  background: linear-gradient(180deg, #e1e6eb, #c9d2da);
}

body.light-mode .mine-cell.open {
  background: linear-gradient(180deg, #f7f9fb, #e8edf2);
}

body.light-mode .mine-cell.mine {
  color: #8d3030;
  background: linear-gradient(180deg, #f1cccc, #e4b2b2);
}

body.light-mode .mine-cell.flagged {
  color: #8a5d11;
}

@media (max-width: 1160px) {
  body.panel-open .room-stage {
    right: min(480px, 42vw);
  }

  .room-panel {
    width: min(480px, 42vw);
    min-width: 360px;
  }
}

@media (max-width: 900px) {
  .brand-owner {
    display: none;
  }

  .room-help {
    top: 122px;
    left: 14px;
    right: 14px;
    max-width: calc(100vw - 28px);
    padding: 10px 12px;
    border-radius: 16px;
    white-space: normal;
    line-height: 1.5;
  }

  .room-panel {
    width: 100%;
    min-width: 0;
  }

  .room-panel-body {
    font-size: 0.96rem;
  }

  .mode-switches {
    grid-template-columns: 1fr;
  }

  .github-repos {
    grid-template-columns: 1fr;
  }

  .photo-wall {
    grid-template-columns: 1fr;
  }
  .github-card-head {
    align-items: flex-start;
  }

  .github-card-head img {
    width: 48px;
    height: 48px;
  }

  .profile-intro {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .profile-intro img {
    width: 82px;
  }

  .room-panel-body .bio-list li,
  .room-panel-body .award-list li {
    padding: 12px 14px;
  }

  .minesweeper {
    padding: 12px;
    border-radius: 14px;
  }

  .minesweeper-head {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .mine-reset,
  .mine-mode-toggle {
    min-height: 42px;
  }

  .mine-grid {
    gap: 3px;
  }

  .mine-cell {
    min-height: 32px;
    font-size: 0.92rem;
  }
}