/* Main AI app, board, panels, and shared app controls. */
.app-shell {
  min-height: 100vh;
  padding: 0 18px 18px;
}

.workspace {
  max-width: 1380px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  margin-bottom: 10px;
  padding: 16px 18px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 252, 0.96)),
    var(--panel);
  box-shadow: 0 8px 22px rgba(35, 55, 75, 0.08);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

button {
  border: 1px solid #b7c4d2;
  background: var(--panel);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
}

:where(button:hover:not(.go-salon-hotspot):not([data-table-tab]):not(.go-salon-enter-button):not([data-review-tool]):not([data-review-analyze]):not([data-review-analysis-toggle])) {
  border-color: var(--accent);
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

#analyzeBtn {
  min-width: 108px;
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(25, 118, 210, 0.22);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-primary-nav,
.topbar-utility-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-primary-nav {
  padding: 4px;
  border: 1px solid #d6e0d6;
  border-radius: 8px;
  background: #f4f8f1;
}

.topbar-primary-nav button {
  min-height: 34px;
  padding: 7px 12px;
  border-color: transparent;
  background: transparent;
  color: #365c45;
}

.topbar-primary-nav button:hover,
.topbar-primary-nav button.active {
  border-color: #496a58;
  background: #496a58;
  color: #fff;
}

.topbar-utility-actions button {
  min-height: 34px;
  padding: 7px 10px;
}

.topbar-actions button {
  min-height: 38px;
  border-radius: 7px;
  font-weight: 850;
  white-space: nowrap;
}

.topbar-actions button:nth-of-type(1),
.topbar-actions button:nth-of-type(2) {
  border-color: #9bb7d3;
  background: #f4f8fc;
}

.global-drop-zone {
  width: 100%;
  min-height: 62px;
  padding: 13px 14px;
  place-items: start;
  align-content: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #b8cfe3;
  background: #f5f9fd;
  text-align: left;
}

.global-drop-zone strong {
  font-size: 13px;
  line-height: 1.1;
}

.global-drop-zone span {
  font-size: 12px;
}
.topbar-actions button:hover {
  transform: translateY(-1px);
}

.account-menu {
  position: relative;
}

.topbar-actions .account-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #c0d0d9;
  background: #fffdfa;
  color: #25313b;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 230px;
  padding: 8px;
  border: 1px solid #cdd8df;
  border-radius: 8px;
  background: #fffdfa;
  box-shadow: 0 18px 42px rgba(61, 75, 86, 0.18);
}

.account-menu-summary {
  display: grid;
  gap: 3px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid #e2e8ed;
  margin-bottom: 6px;
}

.account-menu-summary strong {
  color: var(--ink);
  font-size: 14px;
}

.account-menu-summary span,
.account-menu-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.account-menu-panel button {
  width: 100%;
  justify-content: flex-start;
  min-height: 34px;
  margin-top: 3px;
  border-color: transparent;
  background: transparent;
  text-align: left;
  box-shadow: none;
}

.account-menu-panel button:hover {
  border-color: #d7e3dc;
  background: #f2f8f0;
}

.history-save-status {
  align-self: center;
  padding: 6px 9px;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  color: var(--muted);
  background: #f6f9fc;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.history-save-status[data-state="dirty"] {
  border-color: #e2b66a;
  color: #835b12;
  background: #fff8e7;
}

.history-save-status[data-state="saved"] {
  border-color: #badbcc;
  color: #276749;
  background: #eefaf3;
}

.history-save-status[data-state="disabled"] {
  opacity: 0.68;
}

.floating-save-status {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 35;
  max-width: min(260px, calc(100vw - 28px));
  padding: 5px 9px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(35, 55, 75, 0.12);
  font-size: 11px;
  opacity: 0.92;
  pointer-events: none;
}

.history-modal,
.plan-modal,
.guide-modal,
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.history-dialog,
.plan-dialog,
.guide-dialog,
.notice-dialog {
  width: min(720px, 100%);
  max-height: min(720px, 90vh);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}

.history-header,
.plan-header,
.guide-header,
.notice-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.history-header h2,
.plan-header h2,
.guide-header h2,
.notice-header h2 {
  margin: 0 0 4px;
}

.history-header p,
.plan-header p,
.guide-header p,
.notice-header p {
  color: var(--muted);
  font-size: 13px;
}

#closeHistoryBtn,
#closePlanBtn,
#closeGuideBtn,
#closeEditorUsageGuideBtn,
#closeNoticeBtn {
  width: 34px;
  height: 34px;
  padding: 0;
}

.guide-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
}

.guide-steps li {
  padding: 9px 10px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.guide-steps strong,
.guide-steps span {
  display: block;
}

.guide-steps strong {
  color: var(--ink);
  font-size: 14px;
}

.guide-steps span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.notice-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.version-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px 7px;
  border: 1px solid #d8e3ee;
  border-radius: 999px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plan-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.plan-card.featured {
  border-color: #1976d2;
  background: #eef6ff;
}

.plan-card h3 {
  margin: 0;
  font-size: 15px;
}

.plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.plan-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
}

.plan-note {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.history-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  background: #f6f9fc;
}

.history-tabs button {
  border-color: transparent;
  background: transparent;
}

.history-tabs button.active {
  border-color: #1f2933;
  background: #fff;
}

.history-mode-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.history-search-input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.history-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  background: #f8fbfd;
}

.history-item-main {
  min-width: 0;
  flex: 1 1 auto;
}

.history-preview-board {
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  border-width: 1px;
}

.history-preview-board .stone {
  width: 88%;
  height: 88%;
}

.history-item strong,
.history-item span {
  display: block;
}

.history-item strong {
  color: var(--ink);
}

.history-item-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.history-badges {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.history-badges i {
  padding: 2px 6px;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.secondary-action {
  border-color: #d7e0e8;
  color: var(--ink);
  background: #fff;
}

#analyzeBtn:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}
.hidden {
  display: none !important;
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(520px, 760px) minmax(380px, 1fr);
  gap: 18px;
  align-items: start;
}

.board-panel,
.side-panel {
  background: var(--panel);
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(35, 55, 75, 0.07);
}

.side-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.board-header {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 12px;
  margin: -2px 0 10px;
  padding: 10px 12px;
  border: 1px solid #e2eaf2;
  border-radius: 8px;
  background: var(--soft-panel);
}

.board-header > div {
  display: grid;
  gap: 2px;
}

#turnLabel {
  font-size: 18px;
  line-height: 1.1;
}

.move-controls {
  display: grid;
  grid-template-columns: 36px 36px minmax(120px, 1fr) 36px 36px auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #e2eaf2;
  border-radius: 8px;
  background: #fbfdff;
}

.capture-table {
  justify-self: center;
  width: auto;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  overflow: hidden;
  background: #fbfdff;
  color: var(--ink);
  font-size: 13px;
}

.capture-table th,
.capture-table td {
  padding: 5px 8px;
  border-right: 1px solid #e4edf5;
  text-align: left;
  white-space: nowrap;
}

.capture-table tr > *:last-child {
  border-right: 0;
}

.capture-table th {
  width: auto;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.capture-table td {
  min-width: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#boardMeta {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.move-controls button {
  width: 36px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border-color: #cad7e3;
  background: #fff;
  font-weight: 800;
}

.move-controls button:hover {
  background: #eff6ff;
}

.move-controls button svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seek-wrapper {
  position: relative;
  min-width: 0;
  padding-top: 24px;
}

.move-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.seek-markers {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 24px;
  pointer-events: none;
}

.seek-marker-layer {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
}

.seek-marker-layer.ai-layer {
  top: 4px;
}

.seek-marker-layer.manual-layer {
  top: 4px;
}

.seek-marker {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 2px;
  width: 10px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%);
  pointer-events: auto;
}

.seek-marker:hover,
.seek-marker:focus,
.seek-marker:active,
.seek-marker.active {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.seek-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 12px;
  border: 0;
  border-radius: 0;
  background: rgba(250, 204, 21, 0.95);
  clip-path: polygon(50% 0, 100% 24%, 78% 100%, 50% 76%, 22% 100%, 0 24%);
  box-shadow: 0 1px 3px rgba(146, 64, 14, 0.24);
  transform: translate(-50%, -50%);
}

.seek-marker.manual-marker {
  top: 2px;
  width: 10px;
  height: 12px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.seek-marker.manual-marker::before {
  width: 10px;
  height: 12px;
  border: 0;
  border-radius: 0;
  background: rgba(250, 204, 21, 0.95);
  clip-path: polygon(50% 0, 100% 24%, 78% 100%, 50% 76%, 22% 100%, 0 24%);
  box-shadow: 0 1px 3px rgba(146, 64, 14, 0.24);
}

.seek-marker:hover::before,
.seek-marker:focus::before,
.seek-marker:active::before,
.seek-marker.active::before {
  width: 10px;
  height: 12px;
  background: rgba(250, 204, 21, 1);
}

.seek-marker.manual-marker:hover,
.seek-marker.manual-marker.active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

.seek-marker.manual-marker:hover::before,
.seek-marker.manual-marker.active::before {
  width: 10px;
  height: 12px;
  background: rgba(250, 204, 21, 1);
  border: 0;
}

.seek-marker-badge {
  position: absolute;
  left: 5px;
  top: -7px;
  display: grid;
  place-items: center;
  min-width: 10px;
  height: 10px;
  padding: 0 2px;
  border-radius: 999px;
  background: #fff;
  color: #b45309;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.seek-zoom-overlay {
  position: absolute;
  left: 50%;
  top: -44px;
  z-index: 12;
  width: min(72%, 420px);
  height: 34px;
  transform: translateX(-50%);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.9);
  box-shadow: 0 7px 18px rgba(20, 30, 42, 0.16);
  pointer-events: none;
}

.seek-zoom-overlay::before,
.seek-zoom-overlay::after {
  content: none;
}

.seek-zoom-overlay::before {
  left: 1px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, rgba(255, 251, 235, 0.98), rgba(255, 251, 235, 0));
}

.seek-zoom-overlay::after {
  right: 1px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(270deg, rgba(255, 251, 235, 0.98), rgba(255, 251, 235, 0));
}

.seek-zoom-track {
  display: none;
}

.seek-zoom-marker-layer {
  position: absolute;
  left: 24px;
  right: 24px;
  height: 10px;
  pointer-events: none;
}

.seek-zoom-marker-layer.ai-layer {
  top: 7px;
}

.seek-zoom-marker-layer.manual-layer {
  top: 7px;
}

.seek-marker.zoom-marker::before,
.seek-marker.zoom-marker:hover::before,
.seek-marker.zoom-marker:focus::before,
.seek-marker.zoom-marker:active::before,
.seek-marker.zoom-marker.active::before {
  width: 13px;
  height: 15px;
  background: rgba(250, 204, 21, 1);
  box-shadow: 0 1px 4px rgba(146, 64, 14, 0.28);
}

#moveNumberLabel {
  min-width: 132px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.game-tree-panel {
  margin: 12px 0 0;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.game-tree {
  position: relative;
  min-height: 82px;
  max-height: 238px;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(90deg, rgba(231, 238, 245, 0.72) 1px, transparent 1px) 0 0 / 24px 100%,
    #fffdfa;
}

.game-tree-canvas {
  position: relative;
  min-width: 100%;
}

.game-tree-lines {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.tree-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2;
}

.main-line {
  stroke: #8aa0b5;
}

.branch-line {
  stroke: #d69b42;
  stroke-width: 1.7;
}

.tree-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(31, 41, 51, 0.18);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 42, 0.16);
  transition: none;
}

.tree-node:hover {
  outline: 2px solid rgba(45, 125, 210, 0.40);
  outline-offset: 2px;
}

.root-node {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #f4f7fa;
  color: #334155;
}

.black-node {
  background: radial-gradient(circle at 34% 28%, #5a6471, #10161d 66%, #05070a);
  color: #fff;
}

.white-node {
  background: radial-gradient(circle at 34% 28%, #fff, #f3f0e8 68%, #d5cec2);
  color: #111827;
}

.branch-node {
  border-width: 2px;
}

.manual-branch-node {
  border-color: #d97706;
}

.study-branch-node {
  border-color: #3b82f6;
}

.tree-node.current {
  outline: 3px solid rgba(220, 38, 38, 0.55);
  outline-offset: 3px;
  z-index: 3;
}

.tree-node.selected-branch {
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18), 0 1px 5px rgba(20, 30, 42, 0.2);
}

.tree-node.has-comment::after,
.tree-node.has-analysis::before {
  position: absolute;
  content: "";
  display: block;
  border-radius: 50%;
}

.tree-node.has-comment::after {
  right: -2px;
  bottom: -2px;
  width: 7px;
  height: 7px;
  background: #f59e0b;
  border: 1px solid #fff;
}

.tree-node.has-analysis::before {
  left: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  background: #2563eb;
  border: 1px solid #fff;
}

.label,
#boardMeta {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

#boardMeta {
  padding: 5px 9px;
  border: 1px solid #d7e3ee;
  border-radius: 999px;
  background: #fff;
}

.goban {
  --board-size: 19;
  --board-edge: calc(50% / 19);
  --line-gap: calc(100% / 18);
  --cell-size: calc(100% / var(--board-size));
  box-sizing: content-box;
  width: min(72vw, 722px);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--board-size), 1fr);
  grid-template-rows: repeat(var(--board-size), 1fr);
  border: 0;
  background: var(--board-wood-bg);
  box-shadow:
    inset 0 0 0 999px rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(49, 38, 20, 0.12);
  position: relative;
  overflow: hidden;
}


.goban::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: var(--board-edge);
  background:
    linear-gradient(to right, rgba(80, 52, 20, 0.72) 1px, transparent 1px) 0 0 / var(--line-gap) var(--line-gap),
    linear-gradient(to bottom, rgba(80, 52, 20, 0.72) 1px, transparent 1px) 0 0 / var(--line-gap) var(--line-gap);
  box-shadow: inset -1px 0 0 rgba(80, 52, 20, 0.72), inset 0 -1px 0 rgba(80, 52, 20, 0.72);
  pointer-events: none;
}
.board-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.point {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 3;
  min-width: 0;
  min-height: 0;
}

.point.star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 10%;
  height: 10%;
  max-width: 5px;
  max-height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(66, 43, 17, 0.86);
}

.stone {
  position: absolute;
  z-index: 3;
  width: 97%;
  height: 97%;
  max-width: 44px;
  max-height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.stone.black {
  background: url("./assets/go-stones/black-stone.svg") center / contain no-repeat;
  box-shadow: none;
}

.stone.white {
  border: 0;
  background: url("./assets/go-stones/white-stone.svg") center / contain no-repeat;
  box-shadow: none;
}

/* Ghost stone preview on hover */
.ghost-stone {
  position: absolute;
  z-index: 2;
  width: 97%;
  height: 97%;
  max-width: 44px;
  max-height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.46;
}

.ghost-stone.black {
  background: url("./assets/go-stones/black-stone.svg") center / contain no-repeat;
}

.ghost-stone.white {
  background: url("./assets/go-stones/white-stone.svg") center / contain no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.point.selected-point::before {
  content: "";
  position: absolute;
  z-index: 8;
  width: 92%;
  height: 92%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(37, 99, 235, 0.82);
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.goban.reference-point-picking .point {
  cursor: crosshair;
}

.reference-coordinate-row button.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
}

.board-markup {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  color: #dc2626;
  font-family: var(--body-font);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    1px 0 0 rgba(255, 255, 255, 0.82),
    -1px 0 0 rgba(255, 255, 255, 0.82),
    0 -1px 0 rgba(255, 255, 255, 0.82);
}

.board-markup.markup-label {
  color: #1d4ed8;
  font-size: 20px;
}

/* ラベル(ABC)が空点にある場合: 円形の白背景フレームで視認性を確保 */
.board-markup.markup-label.board-markup-empty {
  background: rgba(255, 255, 255, 0.90);
  border-radius: 50%;
  border: 1.5px solid #374151;
  text-shadow: none;
  font-size: 17px;
  color: #1d4ed8;
}

.board-markup.markup-square,
.board-markup.markup-triangle {
  color: #0f766e;
}

.last-move-ring {
  position: absolute;
  z-index: 4;
  width: 45%;
  height: 45%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.last-move-ring.on-black {
  border: 1px solid #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22);
}

.last-move-ring.on-white {
  border: 1px solid #111;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.48);
}

.candidate {
  position: absolute;
  z-index: 5;
  width: 90%;
  height: 90%;
  max-width: 48px;
  max-height: 48px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  font-weight: 700;
  padding: 6px 1px 5px;
  font-size: 11px;
  color: #111;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  pointer-events: none;
  line-height: 1;
  text-shadow: none;
  container-type: inline-size;
  overflow: visible;
}

.candidate.rank-1 {
  background: rgba(31, 120, 209, 0.78);
}

.candidate.rank-2 {
  background: rgba(47, 155, 87, 0.58);
}

.candidate.rank-3 {
  background: rgba(126, 87, 194, 0.42);
}

.candidate-score {
  display: block;
  position: relative;
  top: 0;
  left: 50%;
  width: 122%;
  max-width: none;
  font-size: clamp(8px, 0.9vw, 12px);
  font-size: clamp(8px, 34cqi, 12px);
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  margin-left: 0;
  transform: translateX(-50%) scaleX(0.94);
  transform-origin: center;
}

/* Online human match venue */
.online-game-page {
  --online-game-pink: #ef6671;
  --online-game-pink-dark: #d84d5c;
  --online-game-pink-soft: #fff2f2;
  --online-game-ink: #4c3028;
  --online-game-muted: #806d66;
  --online-game-line: rgba(235, 157, 151, .48);
  --online-game-card: rgba(255, 253, 251, .92);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--online-game-ink);
  background:
    linear-gradient(180deg, rgba(255, 252, 250, .42) 0%, rgba(255, 250, 247, .76) 52%, rgba(246, 251, 237, .94) 100%),
    url("/assets/portal-spring-landscape-v1.png") center 78px / 100% auto no-repeat fixed,
    #fffaf7;
}

.online-game-page [hidden] {
  display: none !important;
}

.online-game-shell {
  width: min(1480px, calc(100% - 42px));
  margin: 0 auto;
  padding: 26px 0 80px;
}

.online-game-hero,
.online-game-match-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.online-game-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  border: 1px solid rgba(237, 204, 199, .94);
  border-radius: 24px;
  padding: 25px 30px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .93), rgba(255, 250, 249, .72) 58%, rgba(239, 249, 246, .7));
  box-shadow: 0 14px 38px rgba(90, 63, 54, .11);
  backdrop-filter: blur(12px) saturate(1.06);
}

.online-game-hero::before,
.online-game-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
}

.online-game-hero::before {
  right: 152px;
  bottom: -47px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(239, 102, 113, .15), rgba(239, 102, 113, 0) 68%);
}

.online-game-hero::after {
  right: 35px;
  top: -76px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(119, 190, 212, .17), rgba(119, 190, 212, 0) 70%);
}

.online-game-hero h1,
.online-game-match-header h2 {
  margin: 4px 0 8px;
  color: #4f3028;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: .05em;
}

.online-game-hero p,
.online-game-match-header p { margin: 0; color: #76645d; }

.online-game-eyebrow,
.online-game-panel > header > span {
  color: #dd5965;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.online-game-ai-link,
.online-game-primary,
.online-game-secondary,
.online-game-text-button,
.online-game-invite-copy button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 20px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.online-game-ai-link,
.online-game-secondary {
  border: 1px solid rgba(225, 151, 148, .46);
  color: #70443c;
  background: rgba(255, 253, 251, .88);
}

.online-game-ai-link,
.online-game-primary,
.online-game-secondary,
.online-game-text-button {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.online-game-ai-link:hover,
.online-game-secondary:hover { border-color: rgba(220, 91, 101, .62); color: #c54d59; background: #fff; }
.online-game-primary:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(207, 69, 82, .24); }
.online-game-text-button:hover { color: #c04e59; background: rgba(239, 102, 113, .09); }
.online-game-ai-link:focus-visible,
.online-game-primary:focus-visible,
.online-game-secondary:focus-visible,
.online-game-text-button:focus-visible,
.online-game-create-panel select:focus-visible,
.online-game-advanced summary:focus-visible {
  outline: 3px solid rgba(239, 102, 113, .24);
  outline-offset: 2px;
}

.online-game-primary {
  border: 1px solid #dd5663;
  color: #fff;
  background: linear-gradient(135deg, #f27680, #e4505e);
  box-shadow: 0 8px 18px rgba(207, 69, 82, .18);
}

.online-game-primary:disabled,
.online-game-secondary:disabled { opacity: .5; cursor: default; }

.online-game-text-button {
  min-height: 44px;
  border: 0;
  padding: 0 8px;
  color: #8a655e;
  background: transparent;
}

.online-game-danger-text { color: #9a4e4e; }

.online-game-flash {
  margin: 0 0 18px;
  border: 1px solid rgba(224, 137, 135, .32);
  border-radius: 14px;
  padding: 12px 16px;
  color: #9d4650;
  background: rgba(255, 244, 244, .95);
}

.online-game-flash[data-tone="error"] {
  border-color: rgba(171, 70, 70, .28);
  color: #8b3737;
  background: rgba(255, 239, 239, .95);
}

.online-game-lobby {
  display: grid;
  grid-template-columns: minmax(440px, 490px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.online-game-panel {
  border: 1px solid rgba(235, 197, 191, .82);
  border-radius: 20px;
  padding: 22px;
  background: var(--online-game-card);
  box-shadow: 0 14px 34px rgba(88, 65, 57, .09);
  backdrop-filter: blur(13px) saturate(1.05);
}

.online-game-panel > header h2 {
  margin: 4px 0 0;
  color: #573930;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 1.24rem;
}

.online-game-create-panel {
  position: sticky;
  top: 92px;
  border-color: rgba(232, 164, 157, .72);
  background: rgba(255, 253, 251, .95);
}

.online-game-matchmaking-summary {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  border: 1px solid rgba(125, 183, 199, .26);
  border-radius: 14px;
  padding: 11px 13px;
  color: #476b75;
  background: linear-gradient(135deg, #f0fafc, #f8fcfb);
  font-size: .78rem;
}

.online-game-account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.online-game-account-summary .online-game-matchmaking-summary,
.online-game-account-summary .online-game-rating-summary { margin-top: 0; }

.online-game-matchmaking-summary strong { font-size: .9rem; }
.online-game-matchmaking-summary span { color: #718078; }

.online-game-rating-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  margin-top: 9px;
  border: 1px solid rgba(228, 181, 105, .3);
  border-radius: 14px;
  padding: 10px 13px;
  color: #4c493b;
  background: linear-gradient(135deg, #fff9ea, #fffdf7);
  text-decoration: none;
}
.online-game-rating-summary span { grid-row: 1 / 3; white-space: nowrap; font-size: .68rem; font-weight: 800; }
.online-game-rating-summary strong { color: #8a6422; font-size: 1.25rem; line-height: 1; text-align: right; }
.online-game-rating-summary small { color: #8c8069; font-size: .66rem; text-align: right; }
.online-game-rating-summary:hover { border-color: rgba(178, 128, 42, .42); }

.online-game-create-panel form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.online-game-create-panel label,
.online-game-report-dialog label {
  display: grid;
  gap: 7px;
  color: #654a42;
  font-size: .86rem;
  font-weight: 700;
}

.online-game-create-panel select,
.online-game-report-dialog select,
.online-game-report-dialog textarea,
.online-game-invite-copy input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(213, 178, 170, .46);
  border-radius: 12px;
  padding: 11px 12px;
  color: #4d352e;
  background: rgba(255, 255, 255, .96);
  font: inherit;
}

.online-game-create-panel select {
  min-height: 45px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.online-game-option-group {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  padding: 15px;
  background:
    radial-gradient(circle at 96% 4%, rgba(239, 102, 113, .08), transparent 30%),
    linear-gradient(145deg, #fff8f7, #f9fbf7);
}

.online-game-option-group legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 9px;
  align-items: center;
  width: calc(100% - 4px);
  box-sizing: border-box;
  padding: 0 2px 10px;
  color: #61453d;
}

.online-game-option-group legend > span {
  display: inline-grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #f27b83, #dd5663);
  box-shadow: 0 4px 10px rgba(207, 69, 82, .2);
  font-size: .78rem;
  font-weight: 800;
}

.online-game-option-group legend strong { font-size: .9rem; }
.online-game-option-group legend small { color: #8a7770; font-size: .68rem; font-weight: 600; }

.online-game-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.online-game-field-wide { grid-column: 1 / -1; }
.online-game-field-grid label > small {
  color: #8b7871;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
}

.online-game-advanced {
  border: 1px solid rgba(225, 173, 167, .34);
  border-radius: 15px;
  background: rgba(255, 252, 250, .82);
}

.online-game-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  box-sizing: border-box;
  padding: 9px 14px;
  color: #684b43;
  cursor: pointer;
  list-style: none;
}

.online-game-advanced summary::-webkit-details-marker { display: none; }
.online-game-advanced summary > span { display: grid; gap: 2px; }
.online-game-advanced summary strong { font-size: .86rem; }
.online-game-advanced summary small { color: #8d7972; font-size: .68rem; }
.online-game-advanced summary b {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #d75663;
  background: #fff0f1;
  font-size: 1.15rem;
  transition: transform .18s ease;
}
.online-game-advanced[open] summary b { transform: rotate(45deg); }
.online-game-advanced[open] summary { border-bottom: 1px solid rgba(224, 165, 160, .25); }
.online-game-advanced > .online-game-field-grid { padding: 14px; }

.online-game-form-note {
  margin: 0;
  color: #87746d;
  font-size: .78rem;
  line-height: 1.7;
}

.online-game-create-actions {
  display: grid;
  gap: 9px;
}

.online-game-other-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.online-game-other-actions .online-game-secondary,
.online-game-other-actions .online-game-text-button {
  min-height: 44px;
  padding: 0 12px;
  font-size: .78rem;
}

.online-game-quick-button {
  display: grid;
  min-height: 66px;
  border-radius: 16px;
  line-height: 1.25;
  box-shadow: 0 9px 20px rgba(216, 77, 92, .2);
}

.online-game-quick-button strong { font-size: 1rem; }
.online-game-quick-button small { opacity: .82; font-size: .7rem; font-weight: 600; }

.online-game-public-panel {
  border-color: rgba(110, 174, 189, .3);
  background: linear-gradient(135deg, rgba(244, 253, 255, .94), rgba(255, 253, 251, .94));
}

.online-game-public-room {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, auto) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(110, 174, 189, .22);
  border-radius: 15px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .82);
}

.online-game-public-room > div {
  display: flex;
  gap: 11px;
  align-items: center;
}

.online-game-public-room > div > span:last-child { display: grid; gap: 2px; }
.online-game-public-room small { color: var(--online-game-muted); }
.online-game-public-room p { color: #705f59; font-size: .8rem; }
.online-game-public-room .online-game-primary { min-height: 44px; padding: 0 15px; }

.online-game-users-panel {
  border-color: rgba(126, 181, 147, .34);
  background: linear-gradient(135deg, rgba(247, 253, 248, .95), rgba(255, 252, 251, .94));
}

.online-game-users-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.online-game-users-panel > header > div > span {
  color: #4f9270;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.online-game-online-count {
  flex: 0 0 auto;
  border: 1px solid rgba(93, 166, 122, .25);
  border-radius: 999px;
  padding: 6px 11px;
  color: #397b58;
  background: rgba(237, 250, 241, .9);
  font-size: .76rem;
}

.online-game-users-help {
  margin: 12px 0 0;
  color: var(--online-game-muted);
  font-size: .76rem;
  line-height: 1.6;
}

.online-game-user-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.online-game-user-list > .online-game-empty { grid-column: 1 / -1; }

.online-game-user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(124, 177, 144, .25);
  border-radius: 16px;
  padding: 13px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 18px rgba(80, 107, 87, .06);
}

.online-game-user-card[data-availability="in_game"] { background: rgba(249, 248, 246, .86); }

.online-game-user-identity {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.online-game-user-identity > span:not(.online-game-user-avatar):not(.online-game-ai-rating) { display: grid; min-width: 0; gap: 3px; }
.online-game-user-identity strong { overflow: hidden; color: #51382f; text-overflow: ellipsis; white-space: nowrap; }
.online-game-user-identity small { overflow: hidden; color: var(--online-game-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

.online-game-user-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ef8a8f, #c65a6d);
  box-shadow: 0 4px 10px rgba(164, 75, 88, .2);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
}

.online-game-user-avatar--image {
  display: block;
  object-fit: cover;
  object-position: center top;
}

.online-game-user-identity > .online-game-user-avatar + .online-game-user-avatar {
  display: none;
}

.online-game-user-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #397b58;
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}

.online-game-user-presence i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #57b879;
  box-shadow: 0 0 0 3px rgba(87, 184, 121, .14);
}

.online-game-user-card[data-availability="waiting"] .online-game-user-presence { color: #9a7436; }
.online-game-user-card[data-availability="waiting"] .online-game-user-presence i { background: #e0a844; box-shadow: 0 0 0 3px rgba(224, 168, 68, .14); }
.online-game-user-card[data-availability="in_game"] .online-game-user-presence { color: #8a7770; }
.online-game-user-card[data-availability="in_game"] .online-game-user-presence i { background: #aaa09b; box-shadow: none; }
.online-game-user-card[data-availability="busy"] .online-game-user-presence { color: #9a7436; }
.online-game-user-card[data-availability="busy"] .online-game-user-presence i { background: #d9a354; box-shadow: none; }

.online-game-ai-disclosure {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(79, 132, 102, .28);
  border-radius: 999px;
  color: #397b58;
  background: rgba(239, 249, 242, .9);
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}

.online-game-ai-rating {
  margin-left: auto;
  color: #87573d;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.online-game-user-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.online-game-user-actions .online-game-primary,
.online-game-user-actions .online-game-text-button,
.online-game-friend-state {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: .74rem;
}

.online-game-user-actions .online-game-text-button { border: 1px solid rgba(226, 177, 170, .52); text-decoration: none; }
.online-game-friend-state { border-radius: 11px; color: #4d7e61; background: #edf8f0; font-weight: 700; }
.online-game-bot-toggle {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 1px solid rgba(226, 177, 170, .58);
  border-radius: 999px;
  padding: 0 18px;
  color: #8b514c;
  background: rgba(255, 252, 249, .94);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.online-game-bot-toggle:hover { border-color: rgba(220, 91, 101, .62); color: #c04e59; background: #fff; }

.online-game-lobby-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.online-game-public-panel,
.online-game-users-panel,
.online-game-history-panel { grid-column: 1 / -1; }
.online-game-lobby-columns > .online-game-panel { min-width: 0; }
.online-game-lobby-columns > .online-game-panel {
  position: relative;
  overflow: hidden;
}
.online-game-lobby-columns > .online-game-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, rgba(239, 102, 113, .72), rgba(245, 190, 92, .68));
}
.online-game-lobby-columns > .online-game-public-panel::before {
  background: linear-gradient(90deg, rgba(86, 170, 190, .75), rgba(239, 102, 113, .55));
}
.online-game-lobby-columns > .online-game-users-panel::before {
  background: linear-gradient(90deg, rgba(87, 184, 121, .78), rgba(107, 177, 194, .6));
}
.online-game-history-panel::before {
  background: linear-gradient(90deg, rgba(245, 190, 92, .78), rgba(231, 132, 116, .62)) !important;
}
.online-game-list { display: grid; gap: 9px; margin-top: 16px; }

.online-game-list-item,
.online-game-invitation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(226, 178, 170, .34);
  border-radius: 15px;
  padding: 12px 14px;
  color: var(--online-game-ink);
  text-align: left;
  background: rgba(255, 253, 251, .9);
}

button.online-game-list-item { font: inherit; cursor: pointer; }
.online-game-list-item:hover { border-color: rgba(239, 102, 113, .62); background: #fff5f4; }
.online-game-list-item span:nth-child(2), .online-game-invitation div { display: grid; gap: 3px; }
.online-game-list-item small, .online-game-invitation small { color: var(--online-game-muted); }
.online-game-list-item b { color: #c65460; font-size: .78rem; }
.online-game-list-stone { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.22); }
.online-game-list-stone[data-color="B"] { background: radial-gradient(circle at 35% 30%, #606563, #090b0a 68%); }
.online-game-list-stone[data-color="W"] { border: 1px solid #d1d0ca; background: radial-gradient(circle at 35% 30%, #fff, #e3e1da 72%); }
.online-game-invitation { grid-template-columns: 1fr auto; }
.online-game-invitation > span { display: flex; gap: 4px; align-items: center; }
.online-game-invitation .online-game-primary { min-height: 44px; padding: 0 14px; }
.online-game-empty {
  margin: 0;
  border: 1px dashed rgba(226, 168, 159, .5);
  border-radius: 14px;
  padding: 18px 16px;
  color: #927d75;
  background: rgba(255, 249, 246, .72);
  text-align: center;
}

.online-game-waiting { max-width: 660px; margin: 65px auto 0; text-align: center; }
.online-game-waiting .online-game-panel { padding: 42px; }
.online-game-waiting-mark {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 16px;
  border: 5px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #6f7472, #0b0d0c 70%);
  box-shadow: 0 10px 24px rgba(66, 42, 36, .2), 0 0 0 5px rgba(239, 102, 113, .14);
  animation: online-game-waiting-pulse 1.8s ease-in-out infinite;
}
@keyframes online-game-waiting-pulse { 50% { transform: scale(.88); opacity: .65; } }
.online-game-waiting h2 { margin: 6px 0 8px; color: var(--online-game-ink); font-family: "Noto Serif JP", serif; font-size: 1.65rem; }
.online-game-waiting p { color: #705f59; }
.online-game-waiting-count { min-height: 1.5em; font-size: .84rem; }
.online-game-invite-copy { display: grid; gap: 8px; margin: 24px 0 18px; color: #715f59; font-size: .8rem; font-weight: 700; text-align: left; }
.online-game-invite-copy > span { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.online-game-invite-copy button { border: 0; color: #fff; background: linear-gradient(135deg, #f27680, #df5260); }

.online-game-match-header { align-items: center; }
.online-game-match-header h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); }
.online-game-connection { border-radius: 999px; padding: 8px 13px; color: #52705f; background: rgba(235, 244, 237, .92); font-size: .78rem; font-weight: 700; }
.online-game-connection::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #58a36e; }
.online-game-connection[data-state="closed"]::before,
.online-game-connection[data-state="waiting"]::before { background: #d29848; }

.online-game-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.online-game-player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(226, 178, 170, .34);
  border-radius: 18px;
  padding: 13px 16px;
  background: rgba(255, 253, 251, .88);
  transition: border-color .2s, box-shadow .2s;
}
.online-game-player[data-active="true"] { border-color: var(--online-game-pink); box-shadow: 0 0 0 3px rgba(239, 102, 113, .13); }
.online-game-player > div { display: grid; }
.online-game-player small, .online-game-player span { color: var(--online-game-muted); font-size: .72rem; }
.online-game-player strong { font-size: 1rem; }
.online-game-player time { font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.online-game-player time[data-low="true"] { color: #b13e3e; }
.online-game-player time[data-byoyomi="true"] { font-size: clamp(.82rem, 1.6vw, 1.12rem); }
.online-game-stone { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.online-game-stone--black { background: radial-gradient(circle at 35% 30%, #666b69, #070908 70%); }
.online-game-stone--white { border: 1px solid #d4d2cb; background: radial-gradient(circle at 35% 30%, #fff, #dedbd3 72%); }
.online-game-turn { min-width: 110px; color: #8b514a; text-align: center; font-size: .84rem; font-weight: 800; }

.online-game-play-area { display: grid; grid-template-columns: minmax(0, 720px) minmax(245px, 1fr); gap: 22px; align-items: start; }
.online-game-board-wrap {
  box-sizing: border-box;
  overflow: hidden;
  padding: 11px;
  border: 1px solid var(--board-frame-border);
  border-radius: 16px;
  background: var(--board-frame-bg);
  box-shadow: 0 16px 36px rgba(53, 38, 23, .14);
}
#onlineGameBoard {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--board-wood-bg);
  box-shadow: var(--board-surface-shadow);
  touch-action: none;
  cursor: crosshair;
}
[data-black-stone-theme] .online-game-stone--black {
  border: 0;
  background: transparent var(--go-black-stone-image) center / contain no-repeat;
  box-shadow: none;
}
[data-white-stone-theme] .online-game-stone--white {
  border: 0;
  background: transparent var(--go-white-stone-image) center / contain no-repeat;
  box-shadow: none;
}
.online-game-match-side { display: grid; gap: 15px; }
.online-game-status-card h3, .online-game-scoring-card h3, .online-game-result-card h3 { margin: 0 0 14px; }
.online-game-status-card dl { display: grid; gap: 8px; margin: 0 0 16px; }
.online-game-status-card dl > div { display: flex; justify-content: space-between; gap: 18px; }
.online-game-status-card dt { color: var(--online-game-muted); }
.online-game-status-card dd { margin: 0; font-weight: 700; }
.online-game-status-card p, .online-game-scoring-card p { margin: 0; color: #705f59; line-height: 1.75; }
.online-game-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.online-game-actions > * { flex: 1 1 auto; }
.online-game-scoring-card { border-color: rgba(190, 139, 62, .3); background: rgba(255, 249, 235, .94); }
.online-game-scoring-card .online-game-actions { margin-top: 17px; }
.online-game-scoring-card .online-game-scoring-modes { margin-top: 12px; }
.online-game-scoring-modes .online-game-secondary[aria-pressed="true"] {
  border-color: #cf5965;
  color: #b8404d;
  background: #fff0f2;
  box-shadow: inset 0 0 0 1px rgba(207, 89, 101, .16);
}
.online-game-result-card { border-color: rgba(81, 132, 96, .3); background: rgba(245, 251, 246, .95); }
.online-game-result-card h3 { font-size: 1.5rem; }
.online-game-rating-result { margin: 0 0 16px; border-radius: 12px; padding: 11px 12px; color: #54665b; background: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 700; line-height: 1.55; }
.online-game-rating-result[data-tone="up"] { color: #287141; background: #eaf7ed; }
.online-game-rating-result[data-tone="down"] { color: #9b4242; background: #fff0f0; }

.online-game-report-dialog {
  width: min(500px, calc(100% - 32px));
  border: 0;
  border-radius: 22px;
  padding: 0;
  color: #2b4135;
  box-shadow: 0 28px 80px rgba(24, 35, 28, .3);
}
.online-game-report-dialog::backdrop { background: rgba(21, 28, 24, .55); backdrop-filter: blur(3px); }
.online-game-report-dialog form { display: grid; gap: 17px; padding: 24px; }
.online-game-report-dialog header { display: flex; justify-content: space-between; align-items: center; }
.online-game-report-dialog h2 { margin: 0; }
.online-game-report-dialog header button { border: 0; color: #607168; background: transparent; font-size: 1.7rem; cursor: pointer; }
.online-game-check { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; }

@media (max-width: 900px) {
  .online-game-shell { width: min(100% - 24px, 720px); padding-top: 24px; }
  .online-game-lobby, .online-game-play-area { grid-template-columns: 1fr; }
  .online-game-create-panel { position: static; }
  .online-game-match-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-game-status-card { grid-row: span 2; }
}

@media (max-width: 620px) {
  .online-game-page {
    background-position: center 74px;
    background-size: auto 520px;
    background-attachment: scroll;
  }
  .online-game-shell { width: calc(100% - 20px); padding-top: 14px; }
  .online-game-hero { border-radius: 20px; padding: 20px; }
  .online-game-hero { align-items: flex-start; flex-direction: column; }
  .online-game-hero h1 { font-size: 2.15rem; }
  .online-game-ai-link { min-height: 44px; }
  .online-game-advanced .online-game-field-grid,
  .online-game-lobby-columns,
  .online-game-match-side { grid-template-columns: 1fr; }
  .online-game-public-panel,
  .online-game-users-panel,
  .online-game-history-panel { grid-column: auto; }
  .online-game-user-list { grid-template-columns: 1fr; }
  .online-game-rating-summary { grid-template-columns: 1fr auto; gap: 2px 5px; padding: 10px; }
  .online-game-rating-summary span { grid-row: auto; white-space: nowrap; font-size: .64rem; }
  .online-game-rating-summary strong { font-size: 1.08rem; }
  .online-game-rating-summary small { grid-column: 1 / -1; white-space: nowrap; font-size: .6rem; }
  .online-game-scoreboard { grid-template-columns: 1fr 1fr; gap: 8px; }
  .online-game-turn { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .online-game-player { grid-template-columns: auto 1fr; padding: 10px; }
  .online-game-player time { grid-column: 1 / -1; text-align: center; }
  .online-game-board-wrap { width: 100%; padding: 5px; border-width: 1px; border-radius: 8px; }
  #onlineGameBoard { border-radius: 3px; }
  .online-game-panel { border-radius: 18px; padding: 18px; }
  .online-game-option-group { padding: 13px; }
  .online-game-waiting .online-game-panel { padding: 28px 18px; }
  .online-game-invite-copy > span { grid-template-columns: 1fr; }
  .online-game-public-room { grid-template-columns: 1fr; }
  .online-game-public-room .online-game-primary { width: 100%; }
  .online-game-match-header { align-items: flex-start; }
}

.candidate-winrate {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: clamp(5px, 0.56vw, 7px);
  font-size: clamp(5px, 17cqi, 7px);
  font-family: "Consolas", "Cascadia Mono", "Segoe UI", monospace;
  font-weight: 800;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.candidate-metrics {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  gap: 0;
  width: 116%;
  max-width: none;
  padding-inline: 1px;
  box-sizing: border-box;
  overflow: visible;
  transform: translate(-50%, -50%);
  transform-origin: center;
  text-align: center;
  line-height: 1;
}

.message {
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
}

.message.error {
  color: var(--danger);
}

.queue-status {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #d7e0e8;
  border-radius: 7px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.queue-status[data-state="busy"] {
  border-color: #e2b66a;
  color: #835b12;
  background: #fff8e7;
}

.queue-status[data-state="paused"],
.queue-status[data-state="error"] {
  border-color: #efc5c0;
  color: var(--danger);
  background: #fff5f4;
}

.queue-status[data-state="ok"] {
  border-color: #badbcc;
  color: #276749;
  background: #eefaf3;
}

.thinking-indicator {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
  min-width: 38px;
  height: 24px;
  padding: 0 4px;
}

.thinking-indicator span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1f2933;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 3px rgba(15, 23, 42, 0.2);
  animation: thinking-stones 0.9s ease-in-out infinite;
}

.thinking-indicator span:nth-child(2) {
  background: #fff;
  box-shadow: inset 0 0 0 1px #9aa8b6, 0 1px 3px rgba(15, 23, 42, 0.18);
  animation-delay: 0.12s;
}

.thinking-indicator span:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes thinking-stones {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  45% { transform: translateY(-5px); opacity: 1; }
}

.side-panel {
  display: grid;
  gap: 16px;
}

.study-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  background: #f8fbfd;
}

.study-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.study-header h2 {
  margin-bottom: 4px;
}

.study-header p,
.study-source-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.study-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.study-actions button {
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
}

.study-actions .thinking-indicator {
  position: absolute;
  left: calc(50% - 44px);
  bottom: 6px;
  z-index: 2;
  pointer-events: none;
}

.study-new-game-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background: #fff;
}

.study-new-game-panel h3 {
  margin: 0;
  font-size: 14px;
}

.study-new-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.study-new-game-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.study-new-game-grid input,
.study-new-game-grid select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #cbd7e2;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.study-new-game-actions {
  display: flex;
  justify-content: flex-end;
}

.study-new-game-actions button {
  padding: 8px 12px;
}

.study-source-label {
  margin: 0;
}

body[data-mode="study"] .game-review-panel {
  display: none;
}

body[data-side-view="review"] .analysis-result-title,
body[data-side-view="review"] .analysis-study-section {
  display: none;
}

body[data-side-view="study"] .game-review-panel {
  display: none;
}

body[data-mode="analysis"] .position-summary {
  display: none;
}

body[data-mode="study"] .position-summary {
  display: none;
}

.tab-guide {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #d8e3ee;
  border-left: 4px solid #1976d2;
  border-radius: 8px;
  background: #f7fafc;
  color: var(--ink);
}

.tab-guide strong {
  font-size: 14px;
  font-weight: 900;
}

.tab-guide span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.drop-zone {
  position: relative;
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 86px;
  padding: 14px;
  border: 2px dashed #9fb3c8;
  border-radius: 8px;
  background: #f6f9fc;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.drop-zone:hover,
.drop-zone:focus,
.drop-zone.drag-over {
  border-color: var(--accent);
  background: #eef6ff;
  box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.08);
  outline: none;
}

.drop-zone span {
  color: var(--muted);
  font-size: 13px;
}

.drop-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.result-panel {
  display: grid;
  gap: 14px;
}

.candidate-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.candidate-list li {
  min-width: 0;
  border: 1px solid #e4ebf2;
  border-radius: 6px;
  padding: 8px;
}

.candidate-list strong,
.candidate-list span {
  display: block;
}

.candidate-list strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.candidate-list span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.game-review-panel {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.review-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.review-header h3 {
  margin: 0;
}

.review-header button {
  padding: 8px 12px;
  white-space: nowrap;
}

.review-summary-box {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.review-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.review-help {
  position: relative;
  justify-self: end;
}

.review-help-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.review-help-link:hover,
.review-help-link:focus {
  color: #0f559a;
  outline: none;
}

.review-help-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(620px, calc(100vw - 48px));
  display: none;
  padding: 12px;
  border: 1px solid #c9d6e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.review-help:hover .review-help-popover,
.review-help:focus-within .review-help-popover {
  display: grid;
  gap: 8px;
}

.review-help-popover h4 {
  margin: 0;
  font-size: 14px;
}

.review-help-popover table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.review-help-popover th,
.review-help-popover td {
  padding: 6px 7px;
  border-bottom: 1px solid #e5edf5;
  text-align: left;
  vertical-align: top;
}

.review-help-popover th {
  color: #475569;
  font-weight: 900;
  white-space: nowrap;
}

.review-help-popover tr:last-child td {
  border-bottom: 0;
}

.review-ai-commentary {
  min-height: 92px;
  padding: 10px;
  border: 1px solid #cbd7e2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.score-graph {
  min-height: 170px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.score-graph svg {
  width: 100%;
  height: 170px;
  display: block;
}

.graph-bg {
  fill: #f8fafc;
}

.graph-zero {
  stroke: rgba(31, 41, 51, 0.42);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.graph-line {
  fill: none;
  stroke: #1f78d1;
  stroke-width: 2;
}

.graph-point {
  stroke: #fff;
  stroke-width: 1;
}

.graph-point.black-lead {
  fill: #111827;
}

.graph-point.white-lead {
  fill: #f8fafc;
  stroke: #111827;
}

.graph-label {
  fill: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.review-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.review-color-column {
  display: grid;
  gap: 6px;
}

.review-color-column h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.black-column h4 {
  color: #111827;
}

.white-column h4 {
  color: #475569;
  text-align: right;
}

.review-count {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #111827;
  font-size: 12px;
  font-style: normal;
}

.review-count strong,
.review-count em {
  font-style: normal;
}

.review-count.excellent {
  background: #d9ecff;
}

.review-count.great {
  background: #ddf5e5;
}

.review-count.good {
  background: #edf7d4;
}

.review-count.inaccuracy {
  background: #fff3c4;
}

.review-count.mistake {
  background: #ffe1c4;
}

.review-count.blunder {
  background: #ffd5d5;
}

.review-move-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.review-move button {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid #dde6ef;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.review-move button:hover {
  border-color: var(--accent);
  background: #f5fbff;
}

.review-move span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rank-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.rank-dot.rank-1 {
  background: #1f78d1;
}

.rank-dot.rank-2 {
  background: #2f9b57;
}

.rank-dot.rank-3 {
  background: #7e57c2;
}

.candidate-list .list-score {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}

.candidate-list li {
  cursor: default;
}

.candidate-list li:hover {
  background: #f5f9fd;
}

.candidate-hit {
  cursor: pointer;
}

#referenceTitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.reference-diagram-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 2px;
}

.reference-diagram-tab {
  display: grid;
  gap: 1px;
  min-width: 86px;
  padding: 6px 9px;
  border: 1px solid #d8e3ee;
  border-radius: 7px 7px 0 0;
  background: #f8fbfd;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.reference-diagram-tab strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.reference-diagram-tab span {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-diagram-tab:hover,
.reference-diagram-tab.active {
  border-color: #1f2933;
  background: #eef6ff;
  color: var(--ink);
}

.reference-create-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) auto auto;
  gap: 8px;
  align-items: center;
}

.reference-create-actions button {
  padding: 8px 12px;
  min-width: 0;
  font-weight: 900;
}

#analyzeReferenceCandidatesBtn {
  background: #fff;
}

#createReferenceDiagramsBtn {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(25, 118, 210, 0.18);
}

.reference-target-picker {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f7fafc;
}

.reference-selected-target {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.reference-coordinate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.reference-coordinate-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.reference-coordinate-row input {
  width: 56px;
  padding: 6px 7px;
  border: 1px solid #cbd7e2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.reference-coordinate-row button {
  padding: 6px 9px;
  font-size: 12px;
}

.reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.reference-actions button {
  padding: 7px 9px;
  font-size: 13px;
}

body[data-mode="editor"] .reference-create-actions {
  display: none;
}

.reference-candidate {
  min-width: 0;
  padding: 7px 7px 6px;
  border: 1px solid #e1e9f1;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reference-candidate:hover,
.reference-candidate.active {
  border-color: #1f2933;
  background: #f5f9fd;
}

.reference-candidate strong,
.reference-candidate span {
  display: block;
}

.reference-candidate strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reference-candidate span {
  margin-top: 1px;
  font-size: 11px;
}

.reference-candidate-score {
  color: var(--ink);
  font-size: 17px !important;
  font-weight: 900;
  line-height: 1.05;
}

.reference-commentary {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid #d7e0e8;
  border-radius: 7px;
  background: #f8fbfd;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.reference-commentary p {
  margin: 0;
}

.reference-board,
.mini-goban {
  --board-size: 19;
  --cell-size: calc(100% / var(--board-size));
  box-sizing: content-box;
  width: min(100%, 342px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--board-size), 1fr);
  grid-template-rows: repeat(var(--board-size), 1fr);
  border: 0;
  background: var(--board-wood-bg);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.reference-board[hidden],
.mini-goban[hidden] {
  display: none !important;
}

.reference-board {
  width: min(100%, 323px);
  margin-inline: auto;
  border-color: #d7c7ad;
  background: var(--board-wood-bg);
}

.reference-board .stone,
.mini-goban .stone {
  width: 96%;
  height: 96%;
  max-width: 21px;
  max-height: 21px;
}

.mini-goban .candidate {
  max-width: 22px;
  max-height: 22px;
  font-size: 10px;
  padding: 2px;
}

.mini-goban .candidate-score {
  font-size: clamp(7px, 31cqi, 9px);
}

.mini-goban .candidate-winrate {
  font-size: clamp(5px, 17cqi, 6px);
}

.review-ai-commentary,
.reference-commentary,
.editor-status,
.queue-status,
.message {
  border-radius: 8px;
}

.message {
  background: #fffdfa;
}

.queue-status[data-state="ok"] {
  border-color: #c2dcc9;
  background: #f0f8f1;
}

.queue-status[data-state="busy"] {
  border-color: #e4c77e;
  background: #fff8e7;
}

.editor-panel,
.diagram-tools,
.comment-box,
.editor-reference-list {
  border-color: #d9e0da;
  background: #fffdfa;
}

@media (max-width: 980px) {
  .app-shell {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid,
  .admin-health-cards,
  .admin-health-columns,
  .admin-user-row,
  .admin-mini-row,
  .reference-create-actions,
  .usage-log-row {
    grid-template-columns: 1fr;
  }

  .side-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
.main-grid {
    grid-template-columns: 1fr;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .goban {
    width: min(92vw, 722px);
  }
}

@media (max-width: 620px) {
  .history-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .history-item-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .study-new-game-grid {
    grid-template-columns: 1fr;
  }

  .editor-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .move-controls {
    grid-template-columns: repeat(4, 36px) 1fr;
  }

  .seek-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #firstMoveBtn,
  #prevMoveBtn,
  #nextMoveBtn,
  #lastMoveBtn,
  #moveNumberLabel {
    grid-row: 2;
  }

  #moveNumberLabel {
    min-width: 0;
  }
}

/* Primary site navigation */
.topbar-actions {
  align-items: center;
}

.topbar-primary-nav,
.topbar-utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.topbar-primary-nav {
  padding: 4px;
  border: 1px solid #d6e0d6;
  border-radius: 8px;
  background: #f4f8f1;
}

.topbar-actions .topbar-primary-nav button,
.topbar-actions .topbar-primary-nav button:nth-of-type(1),
.topbar-actions .topbar-primary-nav button:nth-of-type(2) {
  min-height: 34px;
  padding: 7px 13px;
  border-color: transparent;
  background: transparent;
  color: #365c45;
  box-shadow: none;
}

.topbar-actions .topbar-primary-nav button:hover,
.topbar-actions .topbar-primary-nav button.active,
.topbar-actions .topbar-primary-nav button.active:nth-of-type(1) {
  border-color: #496a58;
  background: #496a58;
  color: #fff;
  box-shadow: 0 6px 14px rgba(73, 106, 88, 0.18);
}

.topbar-utility-actions button {
  min-height: 34px;
  padding: 7px 10px;
}

@media (max-width: 980px) {
  .topbar-primary-nav,
  .topbar-utility-actions,
  .account-menu {
    grid-column: 1 / -1;
  }

  .topbar-primary-nav,
  .topbar-utility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-primary-nav button,
  .topbar-utility-actions button {
    width: 100%;
  }
}

/* Polished button treatment */
button {
  border-color: #b7c8d2;
  background: #fffdfa;
  box-shadow:
    0 2px 5px rgba(31, 41, 51, 0.08);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

/* Generic hover must not override a component's paired foreground/background. */
:where(button:hover:not(:disabled):not(.tree-node):not(.go-salon-hotspot):not([data-table-tab]):not(.go-salon-enter-button):not([data-review-tool]):not([data-review-analyze]):not([data-review-analysis-toggle])) {
  border-color: #83a9c8;
  background: #f7fbfd;
  box-shadow:
    0 8px 18px rgba(35, 55, 75, 0.13);
  transform: translateY(-1px);
}

button:active:not(:disabled):not(.tree-node):not(.go-salon-hotspot):not([data-table-tab]):not(.go-salon-enter-button) {
  box-shadow:
    inset 0 2px 5px rgba(31, 41, 51, 0.12),
    0 1px 3px rgba(31, 41, 51, 0.1);
  transform: translateY(0);
}

/* ─── 解析モード検討分岐ツリーノード ─── */
.analysis-branch-node {
  border-color: #16a34a;
  border-width: 2px;
}

/* ─── 解析モード検討分岐 右クリックメニュー ─── */
.analysis-branch-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  padding: 4px 0;
  border: 1px solid rgba(31, 41, 51, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(20, 30, 42, 0.18);
  overflow: hidden;
}

.analysis-branch-menu button {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #17231d;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.analysis-branch-menu button:hover {
  background: rgba(15, 104, 66, 0.08);
  box-shadow: none;
  transform: none;
}


.ai-game-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  background: #eef2ee;
  color: #1f2933;
}

.ai-game-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid #d8e0d8;
  background: rgba(255, 255, 255, 0.94);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ai-game-brand img {
  height: 38px;
  display: block;
}

.ai-game-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ai-game-nav a {
  color: #43515c;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
}

.ai-game-nav a.active,
.ai-game-nav a:hover {
  color: #17633b;
  background: #e5f1e9;
}

.ai-game-shell {
  width: calc(100vw - 32px);
  max-width: none;
  margin: 18px auto;
  display: grid;
  grid-template-columns: 300px minmax(420px, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.ai-game-side {
  display: grid;
  gap: 12px;
}

.ai-game-panel {
  background: #fff;
  border: 1px solid #dbe4db;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(29, 46, 38, 0.07);
}

.ai-game-panel header {
  margin-bottom: 14px;
}

.ai-game-panel header span {
  display: block;
  color: #1f7a49;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}

.ai-game-panel h1,
.ai-game-panel h2 {
  margin: 0;
  color: #15251d;
  font-size: 20px;
  line-height: 1.25;
}

.ai-game-panel h2 {
  font-size: 17px;
}

.ai-game-panel p {
  margin: 0;
  color: #52606d;
  font-size: 13px;
  line-height: 1.7;
}

.ai-game-panel label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #40515f;
  font-size: 13px;
  font-weight: 700;
}

.ai-game-panel select,
.ai-game-panel input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfd9cf;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  background: #fbfdfb;
}

.ai-game-mode-fieldset {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.ai-game-mode-fieldset legend {
  margin-bottom: 7px;
  color: #40515f;
  font-size: 13px;
  font-weight: 800;
}

.ai-game-mode-grid {
  display: grid;
  gap: 8px;
}

.ai-game-mode-card {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #d5dfd7;
  border-radius: 8px;
  color: #25352c;
  background: #fbfdfb;
  text-align: left;
  cursor: pointer;
}

.ai-game-mode-card.active {
  border-color: #1f7a49;
  box-shadow: 0 0 0 1px #1f7a49 inset;
  background: #eaf5ee;
}

.ai-game-page .ai-game-mode-card:hover:not(:disabled) {
  border-color: #d5dfd7;
  background: #fbfdfb;
  box-shadow: none;
  transform: none;
}

.ai-game-page .ai-game-mode-card.active:hover:not(:disabled) {
  border-color: #1f7a49;
  background: #eaf5ee;
  box-shadow: 0 0 0 1px #1f7a49 inset;
  transform: none;
}

.ai-game-mode-card strong {
  font-size: 14px;
}

.ai-game-mode-card span {
  color: #5e6c76;
  font-size: 11px;
  line-height: 1.5;
}

.ai-game-human-only[hidden],
.ai-game-spectator-only[hidden],
.ai-game-mode-fieldset[hidden],
.ai-game-ai-vs-ai-settings[hidden] {
  display: none;
}

.ai-game-ai-vs-ai-settings {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.ai-game-ai-side-card {
  padding: 12px;
  border: 1px solid #d5dfd7;
  border-radius: 8px;
  background: #fbfdfb;
}

.ai-game-ai-side-card > header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.ai-game-ai-side-card > header h2 {
  font-size: 15px;
}

.ai-game-ai-side-stone {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #38413c;
  border-radius: 50%;
  background: #151817;
  box-shadow: 0 1px 2px rgba(19, 29, 24, 0.22);
}

.ai-game-ai-side-stone[data-color="W"] {
  border-color: #a9b2ac;
  background: #fff;
}

.ai-game-ai-side-card label:last-child,
.ai-game-spectator-delay {
  margin-bottom: 0;
}

.ai-game-spectator-delay {
  padding: 0 2px;
}

.ai-game-setup-summary {
  margin: 4px 0 12px !important;
  padding: 9px 10px;
  border-radius: 7px;
  color: #33513f !important;
  background: #edf5ef;
}

.ai-game-levels {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}

.ai-game-levels button,
.ai-game-controls button,
.ai-game-after-actions button,
.ai-game-primary,
.ai-game-secondary,
.ai-game-danger {
  font: inherit;
  border-radius: 8px;
  cursor: pointer;
}

.ai-game-levels button {
  border: 1px solid #d5dfd7;
  background: #fbfdfb;
  padding: 10px;
  text-align: left;
}

.ai-game-levels button.active {
  border-color: #1f7a49;
  background: #eaf5ee;
}

.ai-game-levels strong,
.ai-game-levels span {
  display: block;
}

.ai-game-levels strong {
  color: #17261e;
  font-size: 14px;
}

.ai-game-levels span {
  color: #5e6c76;
  font-size: 12px;
  margin-top: 2px;
}

.ai-game-primary,
.ai-game-secondary,
.ai-game-danger,
.ai-game-after-actions button {
  width: 100%;
  border: 1px solid transparent;
  padding: 11px 12px;
  font-weight: 800;
}

.ai-game-primary {
  color: #fff;
  background: #1f7a49;
}

.ai-game-secondary {
  color: #1f4632;
  background: #edf4ef;
  border-color: #c9d9cf;
  margin-top: 8px;
}

.ai-game-danger {
  color: #fff;
  background: #a53a32;
}

.ai-game-primary:disabled,
.ai-game-secondary:disabled,
.ai-game-danger:disabled,
.ai-game-controls button:disabled,
.ai-game-after-actions button:disabled,
.ai-game-study-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-game-board-area {
  background: #f8faf8;
  border: 1px solid #dbe4db;
  border-radius: 8px;
  padding: 16px;
  min-width: 0;
}

.ai-game-board-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-game-board-header strong {
  color: #14231b;
  font-size: 20px;
}

.ai-game-board-header span {
  color: #66717a;
  font-size: 13px;
}

.ai-game-mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid #c8dbce;
  border-radius: 999px;
  color: #17633b !important;
  background: #e9f5ed;
  font-size: 12px !important;
  font-weight: 800;
}

.ai-game-shell[data-mode="serious"] .ai-game-mode-badge {
  border-color: #e4c9b6;
  color: #8b451f !important;
  background: #fff5ec;
}

.ai-game-board-frame {
  width: min(100%, 760px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ai-game-board.goban {
  width: 100%;
  max-width: 760px;
}

.ai-game-board {
  display: grid;
  grid-template-columns: repeat(var(--board-size), 1fr);
  grid-template-rows: repeat(var(--board-size), 1fr);
}

.ai-game-point {
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
}

.ai-game-point:disabled {
  cursor: default;
  opacity: 1;
}

.ai-game-shell[data-phase="playing"] .ai-game-board[data-playable="true"] .ai-game-point[data-occupied="false"]:hover {
  background: rgba(31, 122, 73, 0.16);
}

.ai-game-board[data-history-guard="true"] .ai-game-point[data-occupied="false"] {
  cursor: not-allowed;
}

.ai-game-status-list {
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
}

.ai-game-status-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1ed;
  padding-bottom: 7px;
}

.ai-game-status-list dt {
  color: #66717a;
  font-size: 12px;
}

.ai-game-status-list dd {
  margin: 0;
  color: #1d2b22;
  font-size: 13px;
  font-weight: 800;
}

.ai-game-thinking {
  min-height: 22px;
  margin-bottom: 12px !important;
  color: #1f7a49 !important;
  font-weight: 800;
}

.ai-game-eval-summary {
  margin-bottom: 8px;
  color: #1f4632;
  font-size: 13px;
  font-weight: 800;
}

.ai-game-graph {
  display: block;
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
  border: 1px solid #e0e8e1;
  border-radius: 7px;
  background: #fbfdfb;
}

.ai-game-graph .axis {
  stroke: #cbd7cd;
  stroke-width: 1;
}

.ai-game-graph .series {
  fill: none;
  stroke: #1f7a49;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-game-graph .point-dot {
  fill: #1f7a49;
}

.ai-game-candidate-list {
  margin: 0 0 10px;
  padding-left: 22px;
  color: #42514a;
  font-size: 12px;
  line-height: 1.7;
}

.ai-game-saved-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-game-saved-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #edf1ed;
  color: #52606d;
  font-size: 11px;
  line-height: 1.5;
}

.ai-game-saved-list button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #cbd8ce;
  border-radius: 6px;
  color: #1f5637;
  background: #f8fbf9;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ai-game-candidate-list li::marker {
  color: #1f7a49;
  font-weight: 800;
}

.ai-game-study-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ai-game-study-actions button {
  padding: 9px 8px;
  border: 1px solid #cfdbd1;
  border-radius: 8px;
  color: #1e3528;
  background: #fbfdfb;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ai-game-candidate-marker {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64%;
  height: 64%;
  border: 2px solid #0e6f40;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 121, 70, 0.88);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.ai-game-move-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 250px;
  overflow: auto;
  border: 1px solid #edf1ed;
  border-radius: 8px;
}

.ai-game-move-list li {
  display: grid;
  grid-template-columns: 36px 56px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #edf1ed;
  color: #36454f;
  font-size: 13px;
}

.ai-game-move-list li:last-child {
  border-bottom: 0;
}

.ai-game-move-list li.active {
  color: #174c30;
  background: #eaf5ee;
}

.ai-game-move-list li.empty {
  display: block;
  color: #7a858d;
}

.ai-game-move-list span {
  color: #7a858d;
}

.ai-game-move-list b {
  color: #18251d;
}

.ai-game-move-list em {
  color: #40515f;
  font-style: normal;
}

.ai-game-controls,
.ai-game-after-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ai-game-controls button,
.ai-game-after-actions button {
  border: 1px solid #cfdbd1;
  background: #fbfdfb;
  color: #1e3528;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .ai-game-shell {
    grid-template-columns: 1fr;
  }

  .ai-game-board-frame {
    max-width: 680px;
  }
}

body.ai-game-question-modal-open {
  overflow: hidden;
}

body.ai-game-move-guard-modal-open {
  overflow: hidden;
}

.ai-game-move-guard-modal {
  z-index: 180;
  background: rgba(49, 34, 35, 0.46);
  backdrop-filter: blur(3px);
}

.ai-game-move-guard-dialog {
  width: min(440px, 100%);
  justify-items: center;
  gap: 14px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(231, 143, 151, 0.68);
  border-radius: 18px;
  background: linear-gradient(150deg, #fff 0%, #fff8f7 100%);
  box-shadow: 0 22px 60px rgba(84, 48, 51, 0.24);
  text-align: center;
}

.ai-game-move-guard-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(235, 121, 135, 0.52);
  border-radius: 50%;
  color: #c65363;
  background: #fff0f1;
  font-size: 28px;
  font-weight: 800;
}

.ai-game-move-guard-kicker {
  color: #c65b69;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ai-game-move-guard-dialog h2 {
  margin: 5px 0 7px;
  color: #493334;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 21px;
}

.ai-game-move-guard-dialog p {
  margin: 0;
  color: #725e5f;
  font-size: 14px;
  line-height: 1.7;
}

.ai-game-move-guard-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ai-game-move-guard-actions button {
  min-height: 46px;
}

.ai-game-question-modal {
  z-index: 160;
  background: rgba(15, 28, 21, 0.58);
  backdrop-filter: blur(3px);
}

.ai-game-question-dialog {
  width: min(760px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  gap: 16px;
  padding: 20px;
  border: 1px solid #d8e4da;
  border-radius: 14px;
}

.ai-game-question-header {
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid #e4ebe5;
}

.ai-game-question-header h2 {
  margin: 3px 0 5px;
  color: #183524;
  font-size: 20px;
  line-height: 1.4;
}

.ai-game-question-header p {
  margin: 0;
  color: #68766d;
  font-size: 12px;
}

.ai-game-question-kicker {
  color: #1f7a49;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ai-game-question-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #d3ddd5;
  border-radius: 50%;
  color: #526258;
  background: #f7faf8;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ai-game-question-step {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ai-game-question-step[hidden] {
  display: none;
}

.ai-game-question-status {
  min-height: 20px;
  margin: 0;
  color: #53635a;
  font-size: 12px;
  line-height: 1.65;
}

.ai-game-question-progress {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  color: #17633b;
  background: #e5f3e9;
  font-size: 11px;
  font-weight: 900;
}

.ai-game-question-prompt {
  min-height: 28px;
  margin: 0;
  color: #173c28;
  font-size: 18px;
  line-height: 1.55;
}

.ai-game-question-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-game-question-option {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #d4e0d6;
  border-radius: 10px;
  color: #21382a;
  background: #fbfdfb;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.ai-game-question-option:hover,
.ai-game-question-option:focus-visible {
  border-color: #3b8a5e;
  outline: 2px solid rgba(31, 122, 73, 0.14);
  background: #f1f8f3;
}

.ai-game-question-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-top: 4px;
}

.ai-game-question-custom input {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #d4ded6;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.ai-game-question-custom .ai-game-secondary {
  width: auto;
  min-width: 112px;
  margin-top: 0;
  padding: 9px 12px;
  font-size: 12px;
}

.ai-game-question-footer,
.ai-game-question-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.ai-game-question-footer .ai-game-secondary,
.ai-game-question-confirm-actions .ai-game-secondary {
  margin-top: 0;
}

.ai-game-question-footer [hidden] {
  display: none;
}

.ai-game-question-text-btn {
  border: 0;
  color: #236642;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ai-game-question-text-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-game-question-confirm-lead {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #cfe0d3;
  border-radius: 10px;
  background: #f0f7f2;
}

.ai-game-question-confirm-lead > span {
  color: #1f7a49;
  font-size: 10px;
  font-weight: 900;
}

.ai-game-question-confirm-lead strong {
  color: #183524;
  font-size: 16px;
  line-height: 1.55;
}

.ai-game-question-confirm-lead p,
.ai-game-question-confirm-body,
.ai-game-question-publish-note {
  margin: 0;
  color: #55655b;
  font-size: 12px;
  line-height: 1.7;
}

.ai-game-question-confirm-body {
  max-height: 180px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #e0e7e1;
  border-radius: 9px;
  white-space: pre-wrap;
}

.ai-game-question-meta,
.ai-game-question-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ai-game-question-meta > span,
.ai-game-question-meta > div span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #3d5948;
  background: #edf3ee;
  font-size: 10px;
  font-weight: 800;
}

.ai-game-question-meta > span {
  color: #17633b;
  background: #dff0e4;
}

.ai-game-question-publish-note {
  color: #725b2b;
}

.ai-game-question-confirm-actions .ai-game-question-text-btn {
  grid-column: 1 / -1;
}

.position-question-board-step {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.position-question-board-step[hidden] {
  display: none;
}

.position-question-board-head,
.position-question-board-footer,
.position-question-board-mode,
.position-question-board-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.position-question-board-head {
  justify-content: space-between;
}

.position-question-board-head h3 {
  margin: 7px 0 0;
  color: #173c28;
  font-size: 16px;
  line-height: 1.45;
}

.position-question-board-counter {
  flex: 0 0 auto;
  color: #69766e;
  font-size: 11px;
  font-weight: 800;
}

.position-question-board-help,
.position-question-board-selection {
  margin: 0;
  color: #53635a;
  font-size: 12px;
  line-height: 1.6;
}

.position-question-board-selection {
  padding: 9px 10px;
  border-radius: 8px;
  color: #28523a;
  background: #edf6ef;
  font-weight: 800;
}

.position-question-board-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(240px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.position-question-board-svg-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border: 1px solid #cfae73;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(64, 43, 18, 0.12);
  background: #d9aa62;
}

.position-question-board-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  touch-action: manipulation;
}

.pqb-board-background {
  fill: #d9aa62;
}

.pqb-grid-line {
  stroke: #5b4326;
  stroke-width: 0.045;
}

.pqb-star {
  fill: #4f3920;
}

.pqb-stone.black {
  fill: #151a17;
  stroke: #020403;
  stroke-width: 0.045;
}

.pqb-stone.white {
  fill: #f7f7f2;
  stroke: #8b8d85;
  stroke-width: 0.045;
}

.pqb-target-mark {
  fill: none;
  stroke: #f05b2a;
  stroke-width: 0.12;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  filter: drop-shadow(0 0 0.08px rgba(255,255,255,0.95));
}

.pqb-last-move.on-black {
  fill: #fff;
}

.pqb-last-move.on-white {
  fill: #111;
}

.pqb-move-number {
  text-anchor: middle;
  font-size: 0.43px;
  font-weight: 900;
  pointer-events: none;
}

.pqb-move-number.on-black {
  fill: #fff;
}

.pqb-move-number.on-white {
  fill: #111;
}

.pqb-hit {
  fill: transparent;
  cursor: pointer;
}

.position-question-board-controls {
  display: grid;
  gap: 10px;
}

.position-question-board-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.position-question-board-mode button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #d1ddd3;
  border-radius: 8px;
  color: #355443;
  background: #f8fbf8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.position-question-board-mode button.active {
  border-color: #36845a;
  color: #155e38;
  background: #e4f3e8;
}

.position-question-board-mark-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.position-question-board-mark-label {
  color: #53635a;
  font-size: 11px;
  font-weight: 900;
}

.position-question-board-mark-buttons {
  display: flex;
  gap: 5px;
}

.position-question-board-mark-buttons button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d1ddd3;
  border-radius: 8px;
  color: #355443;
  background: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.position-question-board-mark-buttons button.active {
  border-color: #e25a2c;
  color: #b93e17;
  background: #fff0e9;
  box-shadow: 0 0 0 2px rgba(226, 90, 44, 0.13);
}

.position-question-board-clear-target.ai-game-secondary {
  width: auto;
  margin: 0 0 0 auto;
  padding: 7px 9px;
  font-size: 10px;
}

.position-question-board-actions {
  flex-wrap: wrap;
}

.position-question-board-actions .ai-game-secondary {
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 11px;
}

.position-question-board-note {
  display: grid;
  gap: 6px;
  color: #334f3f;
  font-size: 11px;
  font-weight: 900;
}

.position-question-board-note textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #d2ddd4;
  border-radius: 8px;
  color: #243a2c;
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.position-question-board-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 2px;
}

.position-question-board-footer .ai-game-secondary,
.position-question-board-footer .ai-game-primary {
  width: auto;
  margin: 0;
}

@media (max-width: 640px) {
  .ai-game-question-modal {
    align-items: end;
    padding: 0;
  }

  .ai-game-question-dialog {
    width: 100%;
    max-height: min(86dvh, 760px);
    padding: 16px;
    border-radius: 16px 16px 0 0;
  }

  .ai-game-question-header h2 {
    font-size: 17px;
  }

  .ai-game-question-options {
    grid-template-columns: 1fr;
    max-height: 44dvh;
    overflow-y: auto;
  }

  .ai-game-question-custom {
    grid-template-columns: 1fr;
  }

  .ai-game-question-custom .ai-game-secondary {
    width: 100%;
  }

  .ai-game-question-footer,
  .ai-game-question-confirm-actions {
    grid-template-columns: 1fr;
  }

  .ai-game-question-confirm-actions .ai-game-question-text-btn {
    grid-column: auto;
  }

  .position-question-board-layout {
    grid-template-columns: 1fr;
  }

  .position-question-board-svg-wrap {
    width: min(100%, 330px);
  }

  .position-question-board-clear-target.ai-game-secondary {
    margin-left: 0;
  }

  .position-question-board-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .position-question-board-footer .ai-game-secondary,
  .position-question-board-footer .ai-game-primary {
    width: 100%;
  }
}

/* Rental room: align the private salon with the current sakura workspace UI. */
.rental-room-page {
  --rental-ink: #4c3028;
  --rental-muted: #7b6862;
  --rental-accent: #e86a79;
  --rental-accent-dark: #c94e60;
  --rental-accent-soft: #fff0f2;
  --rental-line: rgba(232, 106, 121, 0.28);
  --rental-green: #28764e;
  --rental-green-soft: #eef8f1;
  color: var(--rental-ink);
  background:
    radial-gradient(circle at 8% 16%, rgba(187, 224, 250, 0.72), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(255, 190, 211, 0.42), transparent 31%),
    linear-gradient(180deg, #f8fcff 0%, #fffaf7 56%, #f7fbef 100%);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

.rental-room-page .rental-room-shell {
  width: min(1320px, calc(100% - 40px));
  padding-top: 34px;
}

.rental-room-page .rental-room-hero {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  margin-bottom: 22px;
  padding: 30px 34px;
  border: 1px solid var(--rental-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 38%, rgba(255, 210, 219, 0.5), transparent 24%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(255, 243, 245, 0.9) 55%, rgba(239, 249, 255, 0.92));
  box-shadow: 0 16px 42px rgba(120, 71, 68, 0.1);
}

.rental-room-page .rental-room-hero::before,
.rental-room-page .rental-room-hero::after {
  position: absolute;
  color: rgba(232, 106, 121, 0.22);
  line-height: 1;
  pointer-events: none;
}

.rental-room-page .rental-room-hero::before {
  content: "✿";
  top: -20px;
  right: 9%;
  font-size: 132px;
  transform: rotate(12deg);
}

.rental-room-page .rental-room-hero::after {
  content: "✿";
  right: 2%;
  bottom: -34px;
  font-size: 88px;
  transform: rotate(-16deg);
}

.rental-room-page .rental-room-hero > * {
  position: relative;
  z-index: 1;
}

.rental-room-page .rental-room-hero h1,
.rental-room-page .rental-room-detail-head h2,
.rental-room-page .rental-room-panel h2,
.rental-room-page .rental-room-panel h3,
.rental-room-page .rental-room-panel h4,
.rental-room-page .rental-room-panel h5 {
  color: var(--rental-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.rental-room-page .rental-room-hero h1 {
  margin-top: 7px;
  font-size: clamp(34px, 4vw, 50px);
}

.rental-room-page .rental-room-hero p,
.rental-room-page .rental-room-detail-head p {
  color: var(--rental-muted);
}

.rental-room-page .rental-room-eyebrow {
  color: var(--rental-accent-dark);
  letter-spacing: 0.16em;
}

.rental-room-page :is(.rental-room-back, .rental-room-secondary) {
  min-height: 44px;
  border-color: rgba(205, 122, 130, 0.42);
  color: #8c4852;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(123, 77, 72, 0.08);
}

.rental-room-page .rental-room-primary {
  min-height: 44px;
  border-color: var(--rental-accent);
  color: #fff;
  background: linear-gradient(135deg, #f07887, var(--rental-accent-dark));
  box-shadow: 0 8px 20px rgba(201, 78, 96, 0.22);
}

.rental-room-page button.rental-room-primary:hover:not(:disabled),
.rental-room-page button.rental-room-primary:focus-visible:not(:disabled) {
  border-color: #b63e50;
  background: linear-gradient(135deg, #e76475, #b93f52);
}

.rental-room-page button.rental-room-secondary:hover:not(:disabled),
.rental-room-page button.rental-room-secondary:focus-visible:not(:disabled) {
  border-color: var(--rental-accent);
  color: var(--rental-accent-dark);
  background: var(--rental-accent-soft);
}

.rental-room-page .rental-room-panel {
  border-color: var(--rental-line);
  border-radius: 22px;
  background: rgba(255, 253, 251, 0.94);
  box-shadow: 0 14px 36px rgba(105, 66, 61, 0.09);
}

.rental-room-page .rental-room-create {
  position: relative;
  gap: 40px;
  padding: 30px;
  background:
    radial-gradient(circle at 13% 30%, rgba(255, 205, 214, 0.42), transparent 26%),
    linear-gradient(120deg, rgba(255, 246, 247, 0.98), rgba(255, 255, 253, 0.96) 44%, rgba(239, 249, 255, 0.86));
}

.rental-room-page .rental-room-create > header {
  align-self: center;
  padding: 12px 0 12px 74px;
}

.rental-room-page .rental-room-create > header::before {
  content: "✿";
  position: absolute;
  width: 58px;
  height: 58px;
  margin-left: -74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 106, 121, 0.3);
  border-radius: 18px;
  color: #df6171;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(142, 74, 73, 0.12);
  font-size: 29px;
}

.rental-room-page .rental-room-create h2 {
  font-size: 27px;
}

.rental-room-page .rental-room-form > label,
.rental-room-page .rental-room-form fieldset {
  color: #664b45;
  font-size: 12px;
}

.rental-room-page :is(
  .rental-room-form input,
  .rental-room-form select,
  .rental-room-inline-form input,
  .rental-room-inline-form select,
  .rental-room-announcement-form textarea,
  .rental-room-invite-form select,
  .rental-room-members select
) {
  min-height: 46px;
  border-color: rgba(204, 151, 148, 0.42);
  border-radius: 12px;
  color: #513b35;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 2px rgba(116, 75, 66, 0.04);
}

.rental-room-page :is(
  .rental-room-form input,
  .rental-room-form select,
  .rental-room-inline-form input,
  .rental-room-inline-form select,
  .rental-room-announcement-form textarea,
  .rental-room-invite-form select,
  .rental-room-members select
):focus {
  border-color: var(--rental-accent);
  outline: 3px solid rgba(232, 106, 121, 0.13);
}

.rental-room-page .rental-room-friend-options {
  border-color: rgba(224, 128, 139, 0.35);
  background: rgba(255, 247, 248, 0.82);
}

.rental-room-page .rental-room-lists {
  gap: 16px;
}

.rental-room-page .rental-room-lists .rental-room-panel {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  padding: 20px;
}

.rental-room-page .rental-room-lists .rental-room-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #ef7281, #f6a5af 56%, #acd9ef);
}

.rental-room-page .rental-room-lists h2,
.rental-room-page .rental-room-section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 106, 121, 0.2);
  font-size: 18px;
}

.rental-room-page .rental-room-lists h2::before,
.rental-room-page .rental-room-section-head h3::before {
  content: "✿";
  color: #ee8e9b;
  font-size: 16px;
}

.rental-room-page .rental-room-list-card > button:first-child,
.rental-room-page .rental-room-table-card {
  border-color: rgba(211, 154, 151, 0.3);
  background: linear-gradient(145deg, #fff, #fff9f9);
  box-shadow: 0 5px 14px rgba(102, 67, 60, 0.06);
}

.rental-room-page .rental-room-list-card > button:first-child:hover,
.rental-room-page .rental-room-list-card > button:first-child:focus-visible {
  border-color: var(--rental-accent);
  background: var(--rental-accent-soft);
}

.rental-room-page .rental-room-empty {
  border: 1px dashed rgba(210, 151, 148, 0.34);
  color: #8b7770;
  background: linear-gradient(145deg, rgba(255, 248, 248, 0.9), rgba(247, 252, 255, 0.9));
}

.rental-room-page .rental-room-flash,
.rental-room-page .rental-room-invited {
  border-color: rgba(92, 161, 116, 0.34);
  color: #246443;
  background: rgba(239, 249, 242, 0.94);
  box-shadow: 0 8px 22px rgba(56, 105, 71, 0.08);
}

.rental-room-page .rental-room-detail-head {
  padding: 20px 24px;
  border: 1px solid var(--rental-line);
  border-radius: 20px;
  background: rgba(255, 253, 251, 0.94);
  box-shadow: 0 12px 30px rgba(105, 66, 61, 0.08);
}

.rental-room-page .rental-room-countdown {
  border-color: rgba(232, 106, 121, 0.36);
  color: var(--rental-accent-dark);
  background: #fff8f9;
}

.rental-room-page .rental-room-grid {
  grid-template-columns: minmax(0, 1.68fr) minmax(300px, 0.72fr);
}

.rental-room-page :is(.rental-room-voice-panel, .rental-room-review-workspace, .rental-room-game-workspace) {
  border-color: var(--rental-line);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 211, 219, 0.26), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 253, 0.98), rgba(247, 252, 255, 0.94));
}

.rental-room-page .rental-room-voice-map {
  border-color: rgba(232, 106, 121, 0.22);
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)),
    repeating-linear-gradient(90deg, rgba(223, 126, 136, 0.06) 0 1px, transparent 1px 36px),
    #f8eeee;
}

.rental-room-page .rental-room-voice-zone {
  border-color: rgba(206, 145, 143, 0.42);
  color: #61463f;
  box-shadow: 0 6px 16px rgba(107, 68, 62, 0.07);
}

.rental-room-page .rental-room-voice-zone[data-active="true"] {
  border-color: var(--rental-accent);
  box-shadow: 0 0 0 3px rgba(232, 106, 121, 0.13), 0 8px 20px rgba(142, 73, 74, 0.1);
}

.rental-room-page .rental-room-workspace-empty {
  border-color: rgba(220, 141, 149, 0.36);
  color: #806d66;
  background: linear-gradient(145deg, rgba(255, 248, 249, 0.88), rgba(242, 250, 253, 0.84));
}

.rental-room-page .rental-room-workspace-empty span {
  color: var(--rental-accent-dark);
  background: #ffe9ec;
}

@media (max-width: 900px) {
  .rental-room-page .rental-room-shell {
    width: min(100% - 28px, 760px);
  }

  .rental-room-page .rental-room-hero {
    min-height: 0;
    padding: 24px;
  }

  .rental-room-page .rental-room-create {
    gap: 20px;
  }

  .rental-room-page .rental-room-create > header {
    padding-left: 68px;
  }

  .rental-room-page .rental-room-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rental-room-page .rental-room-shell {
    width: min(100% - 24px, 560px);
    padding-top: 18px;
  }

  .rental-room-page .rental-room-hero {
    gap: 18px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .rental-room-page .rental-room-hero::before {
    top: -8px;
    right: -10px;
    font-size: 88px;
  }

  .rental-room-page .rental-room-hero::after {
    display: none;
  }

  .rental-room-page .rental-room-hero h1 {
    font-size: 31px;
  }

  .rental-room-page .rental-room-create > header {
    padding: 0 0 0 58px;
  }

  .rental-room-page .rental-room-create > header::before {
    width: 46px;
    height: 46px;
    margin-left: -58px;
    border-radius: 14px;
    font-size: 23px;
  }

  .rental-room-page .rental-room-create h2 {
    font-size: 23px;
  }

  .rental-room-page .rental-room-panel,
  .rental-room-page .rental-room-create {
    border-radius: 17px;
  }

  .rental-room-page .rental-room-lists .rental-room-panel {
    min-height: 0;
  }

  .rental-room-page .rental-room-detail-head {
    padding: 17px;
  }
}

/* 貸し切り対局ルーム */
.online-game-rental-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px 0 18px;
  padding: 13px 17px;
  border: 1px solid rgba(235, 157, 151, .58);
  border-radius: 16px;
  color: var(--online-game-ink, #4c3028);
  background: linear-gradient(110deg, rgba(255, 244, 243, .94), rgba(255, 253, 248, .94));
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(140, 79, 67, .09);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.online-game-rental-link:hover {
  border-color: rgba(239, 102, 113, .78);
  box-shadow: 0 13px 26px rgba(140, 79, 67, .14);
  transform: translateY(-1px);
}

.online-game-rental-link strong {
  flex: 0 0 auto;
  font-size: 14px;
}

.online-game-rental-link span {
  color: var(--online-game-muted, #806d66);
  text-align: right;
}

.rental-room-page {
  min-height: 100vh;
  color: #20372b;
  background:
    radial-gradient(circle at 8% 8%, rgba(224, 184, 142, 0.2), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(123, 174, 143, 0.2), transparent 32%),
    #f6f4ee;
  font-family: "Noto Sans JP", sans-serif;
}

.rental-room-page [hidden] {
  display: none !important;
}

.rental-room-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 80px;
}

.rental-room-hero,
.rental-room-detail-head,
.rental-room-section-head,
.rental-room-tournament-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.rental-room-hero {
  margin-bottom: 24px;
}

.rental-room-hero h1,
.rental-room-detail-head h2 {
  margin: 4px 0 7px;
  color: #173a28;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
}

.rental-room-hero p,
.rental-room-detail-head p {
  max-width: 720px;
  margin: 0;
  color: #617067;
  line-height: 1.8;
}

.rental-room-eyebrow {
  color: #27734a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.rental-room-back,
.rental-room-secondary,
.rental-room-primary,
.rental-room-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.rental-room-back,
.rental-room-secondary {
  padding: 9px 16px;
  border: 1px solid #c9d8ce;
  color: #26513a;
  background: rgba(255, 255, 255, 0.82);
}

.rental-room-primary {
  padding: 9px 18px;
  border: 1px solid #276e49;
  color: #fff;
  background: linear-gradient(135deg, #347e58, #205f3d);
  box-shadow: 0 5px 14px rgba(30, 95, 61, 0.18);
}

.rental-room-page button.rental-room-primary:hover:not(:disabled),
.rental-room-page button.rental-room-primary:focus-visible:not(:disabled) {
  border-color: #194f32;
  color: #fff;
  background: linear-gradient(135deg, #2d744f, #194f32);
}

.rental-room-page button.rental-room-secondary:hover:not(:disabled),
.rental-room-page button.rental-room-secondary:focus-visible:not(:disabled) {
  border-color: #9dbba7;
  color: #1f5e3b;
  background: #f1f7f2;
}

.rental-room-text-button {
  min-height: 34px;
  padding: 5px 9px;
  border: 0;
  color: #527061;
  background: transparent;
}

.rental-room-flash {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid #bfd6c7;
  border-radius: 12px;
  color: #225a3b;
  background: #edf7f0;
  font-size: 13px;
  font-weight: 700;
}

.rental-room-flash[data-tone="error"] {
  border-color: #e4c0ba;
  color: #8a392f;
  background: #fff0ed;
}

.rental-room-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(126, 146, 132, 0.25);
  border-radius: 20px;
  background: rgba(255, 255, 252, 0.9);
  box-shadow: 0 14px 36px rgba(45, 63, 51, 0.08);
  backdrop-filter: blur(10px);
}

.rental-room-panel h2,
.rental-room-panel h3,
.rental-room-panel h4,
.rental-room-panel h5 {
  margin: 0;
  color: #1e3f2d;
}

.rental-room-create {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(520px, 1.45fr);
  gap: 36px;
  margin-bottom: 20px;
  padding: 28px;
  background:
    linear-gradient(120deg, rgba(240, 230, 207, 0.88), rgba(255, 255, 252, 0.96) 48%),
    #fff;
}

.rental-room-create h2 {
  margin-top: 7px;
  font-size: 25px;
}

.rental-room-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rental-room-form > label,
.rental-room-form fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #435a4c;
  font-size: 12px;
  font-weight: 800;
}

.rental-room-form label small {
  color: #7b877f;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.rental-room-form input,
.rental-room-form select,
.rental-room-inline-form input,
.rental-room-inline-form select,
.rental-room-announcement-form textarea,
.rental-room-invite-form select,
.rental-room-members select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d2dbd4;
  border-radius: 10px;
  color: #263c2e;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.rental-room-form fieldset,
.rental-room-form > .rental-room-primary {
  grid-column: 1 / -1;
}

.rental-room-friend-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 120px;
  overflow-y: auto;
  padding: 8px;
  border: 1px dashed #cdd8d0;
  border-radius: 11px;
  background: rgba(248, 250, 247, 0.8);
}

.rental-room-friend-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(43, 66, 51, 0.07);
  cursor: pointer;
}

.rental-room-friend-options input {
  width: auto;
  min-height: 0;
}

.rental-room-friend-options small {
  display: block;
  color: #819087;
  font-size: 9px;
}

.rental-room-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.rental-room-lists .rental-room-panel {
  padding: 18px;
}

.rental-room-lists h2 {
  margin-bottom: 13px;
  font-size: 16px;
}

.rental-room-list,
.rental-room-table-list,
.rental-room-tournament-list,
.rental-room-announcements,
.rental-room-members {
  display: grid;
  gap: 10px;
}

.rental-room-list-card {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.rental-room-list-card > button:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0e6e1;
  border-radius: 12px;
  color: inherit;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rental-room-list-card span,
.rental-room-table-card div {
  min-width: 0;
}

.rental-room-list-card strong,
.rental-room-list-card small,
.rental-room-table-card strong,
.rental-room-table-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rental-room-list-card strong {
  font-size: 13px;
}

.rental-room-list-card small,
.rental-room-table-card small {
  margin-top: 3px;
  color: #7b897f;
  font-size: 10px;
}

.rental-room-list-card b {
  flex: 0 0 auto;
  color: #337a54;
  font-size: 10px;
}

.rental-room-list-actions {
  display: grid;
  gap: 4px;
}

.rental-room-list-actions .rental-room-primary,
.rental-room-list-actions .rental-room-text-button {
  min-height: 29px;
  padding: 4px 10px;
  font-size: 10px;
}

.rental-room-empty {
  margin: 0;
  padding: 18px 10px;
  border-radius: 11px;
  color: #849087;
  background: #f6f8f5;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.rental-room-detail-head {
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 0 4px;
}

.rental-room-detail-head > div {
  flex: 1 1 auto;
}

.rental-room-detail-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
}

.rental-room-countdown {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid #c5d9cb;
  border-radius: 14px;
  color: #236b45;
  background: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.rental-room-countdown[data-warning="true"] {
  border-color: #e2b4a4;
  color: #ad4b2f;
  background: #fff4ef;
}

.rental-room-invited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid #c6d8ca;
  border-radius: 16px;
  background: #f0f7f2;
}

.rental-room-invited p {
  margin: 0;
  line-height: 1.7;
}

.rental-room-invited span {
  display: flex;
  gap: 8px;
}

.rental-room-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.rental-room-main-column,
.rental-room-side-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.rental-room-section-head {
  margin-bottom: 14px;
}

.rental-room-section-head h3 {
  margin-top: 3px;
  font-size: 18px;
}

.rental-room-inline-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 100px 100px auto;
  gap: 8px;
}

.rental-room-note {
  margin: 9px 0 15px;
  color: #79877e;
  font-size: 10px;
  line-height: 1.6;
}

.rental-room-table-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e0e6e1;
  border-radius: 13px;
  background: #fff;
}

.rental-room-table-number {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 10px;
  color: #78502d;
  background: linear-gradient(145deg, #efd29d, #dcb575);
  font-size: 11px;
  font-weight: 900;
}

.rental-room-waiting {
  color: #2e7850;
  font-size: 11px;
  font-weight: 800;
}

.rental-room-table-actions,
.rental-room-table-admin,
.rental-room-member-actions,
.rental-room-match-end {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.rental-room-table-admin button,
.rental-room-member-actions button,
.rental-room-match-admin button,
.rental-room-match-admin select,
.rental-room-match-admin input {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #d8c9c4;
  border-radius: 8px;
  color: #684840;
  background: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
}

.rental-room-table-admin button,
.rental-room-member-actions button,
.rental-room-match-admin button {
  cursor: pointer;
}

.rental-room-member-actions button.danger,
.rental-room-table-admin button,
.rental-room-match-end button {
  border-color: #e5b9b2;
  color: #a54438;
  background: #fff7f5;
}

.rental-room-tournament-card {
  padding: 16px;
  border: 1px solid #dce5de;
  border-radius: 15px;
  background: #fbfcfa;
}

.rental-room-tournament-card > header h4 {
  font-size: 17px;
}

.rental-room-tournament-card > header p {
  margin: 3px 0 0;
  color: #78867d;
  font-size: 10px;
}

.rental-room-tournament-card > header .rental-room-primary {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 10px;
}

.rental-room-standings {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #e0e6e1;
  border-radius: 11px;
  background: #fff;
}

.rental-room-standings > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 50px 55px;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid #edf0ed;
  font-size: 11px;
}

.rental-room-standings > .rental-room-standings-head {
  border: 0;
  color: #758279;
  background: #f1f5f1;
  font-size: 9px;
  font-weight: 800;
}

.rental-room-standings strong {
  color: #257048;
}

.rental-room-round {
  margin-top: 15px;
}

.rental-room-round h5 {
  margin-bottom: 7px;
  color: #627268;
  font-size: 11px;
}

.rental-room-pairing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 70px auto;
  gap: 7px;
  align-items: center;
  padding: 8px 9px;
  border-top: 1px solid #e8ede9;
  font-size: 11px;
}

.rental-room-pairing[data-current="true"] {
  background: #edf6ef;
}

.rental-room-pairing .white {
  text-align: left;
}

.rental-room-pairing small,
.rental-room-pairing em {
  color: #7b887f;
  font-size: 9px;
  font-style: normal;
}

.rental-room-pairing button,
.rental-room-pairing a {
  padding: 5px 8px;
  border: 1px solid #bcd1c2;
  border-radius: 7px;
  color: #286d47;
  background: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.rental-room-match-admin {
  grid-column: 1 / -1;
  padding-top: 5px;
}

.rental-room-match-admin summary {
  color: #8b655b;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.rental-room-match-admin form {
  display: grid;
  grid-template-columns: 58px minmax(90px, 1fr) minmax(90px, 1fr) auto;
  gap: 6px;
  margin-top: 7px;
}

.rental-room-match-admin form[data-result-form] {
  grid-template-columns: minmax(130px, 1fr) auto;
}

.rental-room-announcement-form,
.rental-room-invite-form {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}

.rental-room-announcement-form textarea {
  min-height: 72px;
  resize: vertical;
}

.rental-room-announcements article {
  padding: 11px;
  border-left: 3px solid #6fa382;
  border-radius: 5px 10px 10px 5px;
  background: #f3f7f3;
}

.rental-room-announcements p {
  margin: 0;
  color: #344c3d;
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.rental-room-announcements small {
  display: block;
  margin-top: 5px;
  color: #839087;
  font-size: 9px;
}

.rental-room-members article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar identity manage"
    "actions actions actions";
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #e8ede9;
}

.rental-room-members .rental-room-avatar {
  grid-area: avatar;
}

.rental-room-member-identity {
  grid-area: identity;
  min-width: 0;
}

.rental-room-member-manage-toggle,
.rental-room-member-quick-action {
  grid-area: manage;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #d8c9c4;
  border-radius: 9px;
  color: #684840;
  background: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.rental-room-member-manage-toggle[aria-expanded="true"] {
  border-color: #d78d91;
  color: #a03e4b;
  background: #fff3f4;
}

.rental-room-member-actions {
  grid-area: actions;
  justify-content: flex-start;
  margin-top: 2px;
  padding: 9px;
  border: 1px solid rgba(216, 177, 174, 0.55);
  border-radius: 11px;
  background: rgba(255, 249, 248, 0.82);
}

.rental-room-member-actions[hidden] {
  display: none;
}

.rental-room-host-panel {
  border-color: #efd1cc;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,244,.92));
}

.rental-room-members article[data-status="invited"],
.rental-room-members article[data-status="rejected"] {
  opacity: 0.56;
}

.rental-room-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #5a8c6d;
  font-size: 12px;
  font-weight: 900;
}

.rental-room-members strong,
.rental-room-members small {
  display: block;
}

.rental-room-members strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.rental-room-members small {
  margin-top: 2px;
  color: #7c8981;
  font-size: 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rental-room-members select {
  width: 82px;
  min-height: 32px;
  padding: 5px;
  font-size: 9px;
}

.rental-room-close {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dfb8af;
  border-radius: 12px;
  color: #9a4235;
  background: rgba(255, 244, 241, 0.9);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.rental-room-voice-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(235, 207, 154, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 252, 0.96), rgba(238, 246, 239, 0.94));
}

.rental-room-voice-head {
  align-items: flex-start;
}

.rental-room-voice-join-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rental-room-voice-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #d4ddd6;
  border-radius: 999px;
  color: #69776e;
  background: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  font-weight: 800;
}

.rental-room-voice-status[data-tone="connected"] {
  border-color: #9cc5aa;
  color: #1f6841;
  background: #e9f6ed;
}

.rental-room-voice-status[data-tone="connecting"] {
  border-color: #d7c18f;
  color: #7a5b1f;
  background: #fff8e6;
}

.rental-room-voice-status[data-tone="error"] {
  border-color: #e1b9b1;
  color: #913f33;
  background: #fff0ed;
}

.rental-room-voice-intro,
.rental-room-voice-privacy {
  margin: 0;
  color: #6c7d72;
  font-size: 10px;
  line-height: 1.7;
}

.rental-room-voice-intro {
  margin-top: -2px;
  margin-bottom: 13px;
}

.rental-room-voice-map {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.4fr) minmax(150px, 0.8fr);
  gap: 10px;
  align-items: stretch;
  min-height: 170px;
  padding: 13px;
  border: 1px solid rgba(77, 111, 87, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)),
    repeating-linear-gradient(90deg, rgba(91, 119, 97, 0.06) 0 1px, transparent 1px 36px),
    #e8eee8;
}

.rental-room-voice-zone {
  position: relative;
  display: grid;
  place-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  padding: 12px 10px;
  border: 1px solid #c9d8ce;
  border-radius: 14px;
  color: #294738;
  background: rgba(255, 255, 252, 0.9);
  box-shadow: 0 6px 16px rgba(44, 68, 53, 0.08);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.rental-room-voice-zone:hover,
.rental-room-voice-zone:focus-visible {
  border-color: #82ae91;
  transform: translateY(-1px);
}

.rental-room-voice-zone[data-active="true"] {
  border-color: #2d7c51;
  box-shadow: 0 0 0 3px rgba(45, 124, 81, 0.15), 0 8px 20px rgba(40, 99, 65, 0.13);
}

.rental-room-voice-zone span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rental-room-voice-zone small {
  color: #738279;
  font-size: 8px;
}

.rental-room-voice-zone i {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #34704e;
  background: #eaf4ed;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.rental-room-voice-lobby {
  background: linear-gradient(150deg, #fffdf7, #edf6ef);
}

.rental-room-voice-review {
  background: linear-gradient(150deg, #fffaf0, #f4ead8);
}

.rental-room-voice-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}

.rental-room-voice-table-pair {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  border: 1px solid rgba(166, 128, 71, 0.24);
  border-radius: 14px;
  background: rgba(255, 251, 242, 0.72);
  overflow: hidden;
}

.rental-room-voice-table-pair > .rental-room-voice-zone {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rental-room-voice-tables > p {
  display: grid;
  place-items: center;
  min-height: 100%;
  margin: 0;
  padding: 15px;
  border: 1px dashed #c6d2c9;
  border-radius: 13px;
  color: #7c8981;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
}

.rental-room-voice-table {
  min-height: 64px;
  border-color: #d8be91;
  background: linear-gradient(145deg, #f8e9c9, #efd09a);
}

.rental-room-voice-table-pair:only-child {
  grid-column: 1 / -1;
}

.rental-room-voice-spectator {
  min-height: 45px;
  border-top: 1px dashed rgba(122, 94, 51, 0.3) !important;
  background: linear-gradient(145deg, #fffdf8, #ece9df);
}

.rental-room-voice-spectator span {
  font-size: 10px;
}

.rental-room-voice-controls {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.rental-room-voice-controls button,
.rental-room-voice-participants button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #cad7ce;
  border-radius: 10px;
  color: #31513e;
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.rental-room-voice-controls button[aria-pressed="true"] {
  border-color: #d4a89e;
  color: #8f4134;
  background: #fff0ed;
}

.rental-room-voice-controls .rental-room-voice-talk {
  flex: 1 1 160px;
  border-color: #2d7b50;
  color: #fff;
  background: #2d7b50;
  touch-action: none;
}

.rental-room-voice-controls .rental-room-voice-talk[data-pressed="true"] {
  background: #174e31;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.rental-room-voice-controls .rental-room-voice-announce {
  margin-left: auto;
  border-color: #c48733;
  color: #7a4717;
  background: #fff4dc;
  touch-action: none;
}

.rental-room-voice-controls .rental-room-voice-announce[data-pressed="true"] {
  border-color: #9f321f;
  color: #fff;
  background: #b8472f;
  box-shadow: 0 0 0 3px rgba(184, 71, 47, 0.16);
}

.rental-room-voice-participants {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.rental-room-voice-participants > p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #74827a;
  background: rgba(245, 248, 245, 0.82);
  font-size: 9px;
  text-align: center;
}

.rental-room-voice-participants article {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr) auto minmax(90px, 0.75fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #dfe6e1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
}

.rental-room-voice-participants article[data-self="true"] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: #eef6f0;
}

.rental-room-voice-participants article[data-announcing="true"] {
  border-color: #d09a45;
  background: #fff6e5;
  box-shadow: 0 0 0 2px rgba(208, 154, 69, 0.15);
}

.rental-room-voice-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #6b9b7a, #3d7553);
  font-size: 11px;
  font-weight: 900;
}

.rental-room-voice-participants strong,
.rental-room-voice-participants small {
  display: block;
}

.rental-room-voice-participants strong {
  font-size: 10px;
}

.rental-room-voice-participants small {
  margin-top: 2px;
  color: #7b8980;
  font-size: 8px;
}

.rental-room-speaking {
  width: 22px;
  overflow: hidden;
  color: transparent;
  font-size: 9px;
  font-weight: 900;
}

.rental-room-voice-participants article[data-speaking="true"] .rental-room-speaking {
  color: #2b8854;
  animation: rental-room-speaking-pulse 800ms ease-in-out infinite alternate;
}

@keyframes rental-room-speaking-pulse {
  from { opacity: 0.45; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.08); }
}

.rental-room-voice-participants label {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  gap: 6px;
  align-items: center;
  color: #718078;
  font-size: 8px;
  font-weight: 800;
}

.rental-room-voice-participants input[type="range"] {
  width: 100%;
  accent-color: #347e58;
}

.rental-room-review-workspace {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(115, 89, 52, 0.2);
  border-radius: 16px;
  background: rgba(255, 252, 244, 0.88);
}

.rental-room-review-workspace > header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rental-room-review-workspace h4 {
  margin: 3px 0 0;
  color: #32473a;
  font-size: 15px;
}

.rental-room-review-actions {
  display: flex;
  gap: 6px;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rental-room-review-actions label {
  display: grid;
  gap: 2px;
  color: #758078;
  font-size: 8px;
  font-weight: 800;
}

.rental-room-review-actions select,
.rental-room-review-actions button,
.rental-room-review-guide button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #d5cbb8;
  border-radius: 9px;
  color: #4f4433;
  background: #fffdf7;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.rental-room-review-actions :disabled,
.rental-room-review-guide button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.rental-room-review-body {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(150px, 1fr);
  gap: 14px;
  align-items: start;
}

.rental-room-review-board {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 8px solid #a96f33;
  border-radius: 8px;
  background: #dfb46d;
  box-shadow: 0 8px 20px rgba(83, 57, 27, 0.18);
  cursor: not-allowed;
  touch-action: manipulation;
}

.rental-room-review-board[data-editable="true"] {
  cursor: crosshair;
}

.rental-room-review-guide {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(239, 244, 238, 0.88);
}

.rental-room-review-guide strong {
  color: #243a2d;
  font-size: 13px;
}

.rental-room-review-guide p,
.rental-room-review-guide small {
  margin: 0;
  color: #65746a;
  font-size: 9px;
  line-height: 1.65;
}

.rental-room-review-guide button {
  border-color: #83a98e;
  color: #24563a;
  background: #eef7f0;
}

.rental-room-review-workspace[hidden],
.rental-room-game-workspace[hidden],
.rental-room-workspace-empty[hidden],
.rental-room-game-actions[hidden],
.rental-room-game-scoring-actions[hidden],
.rental-room-game-head-actions > [hidden] {
  display: none;
}

.rental-room-game-workspace {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(115, 89, 52, 0.2);
  border-radius: 16px;
  background: rgba(255, 252, 244, 0.9);
}

.rental-room-game-workspace > header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rental-room-game-workspace h4 {
  margin: 3px 0 0;
  color: #32473a;
  font-size: 15px;
}

.rental-room-game-head-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rental-room-game-state,
.rental-room-game-head-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #d7c9b1;
  border-radius: 999px;
  color: #62523e;
  background: #fffdf7;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.rental-room-game-state[data-tone="playing"] { border-color: #8db99a; color: #276947; background: #edf8f0; }
.rental-room-game-state[data-tone="waiting"],
.rental-room-game-state[data-tone="loading"] { border-color: #d9bd88; color: #80602a; background: #fff7e6; }
.rental-room-game-state[data-tone="ended"] { border-color: #cabed6; color: #625375; background: #f7f1fb; }
.rental-room-game-state[data-tone="error"] { border-color: #e0aaa3; color: #974338; background: #fff0ed; }

.rental-room-game-head-actions a {
  border-color: #85ac91;
  color: #24563a;
  background: #eef7f0;
}

.rental-room-game-body {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(160px, 1fr);
  gap: 14px;
  align-items: start;
}

.rental-room-game-board {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 8px solid #a96f33;
  border-radius: 8px;
  background: #dfb46d;
  box-shadow: 0 8px 20px rgba(83, 57, 27, 0.18);
}

.rental-room-game-board[data-editable="true"] {
  cursor: crosshair;
  touch-action: manipulation;
}

.rental-room-game-guide {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(239, 244, 238, 0.88);
}

.rental-room-game-player {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(92, 116, 99, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #64736a;
  font-size: 9px;
}

.rental-room-game-player i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #69706d, #171b19 48%, #050606 80%);
  box-shadow: 0 2px 5px rgba(20, 22, 20, 0.25);
}

.rental-room-game-player i.white {
  border: 1px solid #cbc7bd;
  background: radial-gradient(circle at 34% 28%, #fff, #f5f2ea 58%, #c6c3b9 100%);
}

.rental-room-game-player strong {
  overflow: hidden;
  color: #2f4035;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rental-room-game-meta {
  display: grid;
  gap: 5px;
  margin: 2px 0;
}

.rental-room-game-meta > div {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(92, 116, 99, 0.12);
}

.rental-room-game-meta dt,
.rental-room-game-meta dd {
  margin: 0;
  color: #64736a;
  font-size: 9px;
}

.rental-room-game-meta dd {
  color: #33463a;
  font-weight: 800;
}

.rental-room-game-guide p,
.rental-room-game-guide small {
  margin: 0;
  color: #65746a;
  font-size: 9px;
  line-height: 1.65;
}

.rental-room-game-actions,
.rental-room-game-scoring-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.rental-room-game-actions button,
.rental-room-game-scoring-actions button {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #83a98e;
  border-radius: 10px;
  color: #24563a;
  background: #f7fcf7;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.rental-room-game-actions button:hover,
.rental-room-game-scoring-actions button:hover,
.rental-room-game-scoring-actions button[aria-pressed="true"] {
  border-color: #4f8d63;
  color: #fff;
  background: #397b51;
}

.rental-room-game-actions button.danger {
  border-color: #dc9c99;
  color: #9e403d;
  background: #fff4f3;
}

.rental-room-game-actions button:disabled,
.rental-room-game-scoring-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rental-room-workspace-empty {
  display: grid;
  place-items: center;
  min-height: 250px;
  margin-top: 14px;
  padding: 24px;
  border: 1px dashed #c9d8ce;
  border-radius: 16px;
  color: #65766b;
  background: rgba(248, 251, 247, 0.76);
  text-align: center;
}

.rental-room-workspace-empty span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border-radius: 50%;
  color: #47745a;
  background: #e8f2ea;
  font-size: 25px;
}

.rental-room-workspace-empty strong { color: #33483a; font-size: 13px; }
.rental-room-workspace-empty p { max-width: 420px; margin: 6px 0 0; font-size: 9px; line-height: 1.7; }

.rental-room-voice-privacy {
  margin-top: 10px;
  padding-left: 17px;
  position: relative;
}

.rental-room-voice-privacy::before {
  content: "🔒";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
}

@media (max-width: 900px) {
  .rental-room-create {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .rental-room-lists {
    grid-template-columns: 1fr 1fr;
  }

  .rental-room-lists > :first-child {
    grid-column: 1 / -1;
  }

  .rental-room-grid {
    grid-template-columns: 1fr;
  }

  .rental-room-voice-map {
    grid-template-columns: minmax(130px, 0.72fr) minmax(240px, 1.28fr) minmax(130px, 0.72fr);
  }
}

@media (max-width: 640px) {
  .online-game-rental-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .online-game-rental-link span {
    text-align: left;
  }

  .rental-room-shell {
    width: min(100% - 24px, 560px);
    padding: 24px 0 56px;
  }

  .rental-room-hero,
  .rental-room-detail-head {
    display: grid;
    align-items: start;
  }

  .rental-room-hero h1 {
    font-size: 30px;
  }

  .rental-room-back {
    justify-self: start;
  }

  .rental-room-panel,
  .rental-room-create {
    padding: 16px;
    border-radius: 15px;
  }

  .rental-room-form,
  .rental-room-lists,
  .rental-room-inline-form {
    grid-template-columns: 1fr;
  }

  .rental-room-lists > :first-child {
    grid-column: auto;
  }

  .rental-room-detail-head .rental-room-text-button {
    justify-self: start;
  }

  .rental-room-countdown {
    justify-self: start;
    font-size: 18px;
  }

  .rental-room-voice-head,
  .rental-room-voice-join-wrap {
    display: grid;
    justify-items: start;
  }

  .rental-room-voice-map {
    grid-template-columns: 1fr;
  }

  .rental-room-voice-tables {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-room-review-workspace > header,
  .rental-room-review-body,
  .rental-room-game-workspace > header,
  .rental-room-game-body {
    grid-template-columns: 1fr;
    display: grid;
  }

  .rental-room-review-actions {
    justify-content: start;
  }

  .rental-room-review-board,
  .rental-room-game-board {
    width: min(100%, 440px);
    justify-self: center;
  }

  .rental-room-game-head-actions {
    justify-content: start;
  }

  .rental-room-voice-participants article,
  .rental-room-voice-participants article[data-self="true"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .rental-room-voice-participants label,
  .rental-room-voice-participants article > button {
    grid-column: 1 / -1;
  }

  .rental-room-invited {
    display: grid;
  }

  .rental-room-table-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rental-room-table-card > :last-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .rental-room-table-actions,
  .rental-room-table-admin,
  .rental-room-member-actions,
  .rental-room-match-end {
    justify-content: stretch;
  }

  .rental-room-table-actions > *,
  .rental-room-table-admin > *,
  .rental-room-member-actions > *,
  .rental-room-match-end > * {
    flex: 1 1 120px;
    text-align: center;
  }

  .rental-room-member-actions {
    padding: 8px;
  }

  .rental-room-match-admin form,
  .rental-room-match-admin form[data-result-form] {
    grid-template-columns: 1fr;
  }

  .rental-room-pairing {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .rental-room-pairing small,
  .rental-room-pairing button,
  .rental-room-pairing a,
  .rental-room-pairing em {
    grid-column: 1 / -1;
  }

  .rental-room-pairing button,
  .rental-room-pairing a {
    text-align: center;
  }
}

body.rental-room-page {
  color: var(--rental-ink);
  background:
    linear-gradient(180deg, rgba(255, 252, 250, 0.42) 0%, rgba(255, 250, 247, 0.78) 54%, rgba(246, 251, 237, 0.96) 100%),
    url("/assets/portal-spring-landscape-v1.png") center 78px / 100% auto no-repeat fixed,
    #fffaf7;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

body.rental-room-page button.rental-room-primary:hover:not(:disabled),
body.rental-room-page button.rental-room-primary:focus-visible:not(:disabled) {
  border-color: #b63e50;
  color: #fff;
  background: linear-gradient(135deg, #e76475, #b93f52);
}

body.rental-room-page button.rental-room-secondary:hover:not(:disabled),
body.rental-room-page button.rental-room-secondary:focus-visible:not(:disabled) {
  border-color: var(--rental-accent);
  color: var(--rental-accent-dark);
  background: var(--rental-accent-soft);
}
/* オンライン碁会所: 一覧と没入型店舗ロビーのローカル試作 r1 20260901 */
.go-salon-page {
  --salon-ink: #3e1e18;
  --salon-red: #ed3155;
  --salon-red-soft: #fff0f2;
  --salon-green: #18864d;
  --salon-line: #eddfdc;
  --salon-paper: rgba(255, 253, 251, .94);
  --salon-header-space: 78px;
  min-height: 100vh;
  color: var(--salon-ink);
  background:
    radial-gradient(circle at 94% 15%, rgba(255, 190, 204, .24), transparent 23rem),
    linear-gradient(135deg, #fffdfa, #fff 64%, #fff8f8);
  font-family: "Noto Sans JP", sans-serif;
}

.go-salon-page [hidden] { display: none !important; }
.go-salon-page :is(button, input) { font: inherit; }
.go-salon-page button { color: inherit; }

.go-salon-app { position: relative; min-height: calc(100dvh - var(--salon-header-space)); }

.go-salon-flash {
  position: fixed; z-index: 30; left: 50%; top: 88px; transform: translateX(-50%); margin: 0;
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 20px; border: 1px solid #f0b3be; border-radius: 999px;
  color: #8f2036; background: rgba(255, 247, 248, .97); box-shadow: 0 12px 32px rgba(76, 30, 24, .15);
}
.go-salon-flash[data-tone="error"] { color: #9b1c1c; border-color: #e8aaaa; background: #fff2f2; }
/* Global status must remain above room overlays, unlike inline dialog notices. */
#goSalonFlash {
  z-index: 200;
  top: calc(var(--mobile-header-height, var(--salon-header-space, 74px)) + 12px);
  width: min(560px, calc(100vw - 24px));
  box-sizing: border-box;
  border-radius: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  background: #fff7f8;
}
.go-salon-opening-dialog .go-salon-flash {
  position: static; transform: none; max-width: none; margin: 12px 0;
  border-radius: 12px; box-shadow: none; overflow-wrap: anywhere;
}
.go-salon-host-match-dialog { width: min(680px, calc(100vw - 24px)); }
.go-salon-host-match-dialog .go-salon-dialog-panel { max-height: 85dvh; overflow-y: auto; }
.go-salon-host-match-dialog [data-host-error] { padding: 12px; border: 1px solid #d98396; border-radius: 8px; color: #9b1c1c; background: #fff2f2; }
.go-salon-host-seats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go-salon-host-match-dialog [data-host-jobs] article { margin-block: 12px; padding: 12px; border: 1px solid var(--salon-line); border-radius: 8px; }
.go-salon-host-countdown { position: fixed; z-index: 125; top: calc(var(--mobile-header-height, 74px) + 8px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px 16px; border: 2px solid #ce7589; border-radius: 12px; background: #fff7ed; color: #542e25; box-shadow: 0 5px 22px #40201b30; overflow-wrap: anywhere; }
.go-salon-host-countdown[hidden] { display: none; }
.go-salon-host-countdown p { margin: 5px 0; font-size: 12px; }
.go-salon-host-countdown b { display: block; color: #a52e4a; }
@media (max-width: 600px) {
  .go-salon-host-seats { grid-template-columns: minmax(0, 1fr); }
  .go-salon-host-match-dialog .go-salon-dialog-panel { padding: 18px 12px; }
}
.go-salon-participating { position: fixed; z-index: 110; bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); width: min(860px, calc(100% - 32px)); box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid #eab4bf; border-radius: 16px; color: #5d302b; background: #fff8f9; box-shadow: 0 8px 30px #52202a26; }
.go-salon-participating[hidden] { display: none; }
.go-salon-participating-summary { flex: 1; min-width: 0; }
.go-salon-participating-summary strong, .go-salon-participating-summary span { display: block; overflow-wrap: anywhere; }
.go-salon-participating-summary strong { font-size: 15px; }
.go-salon-participating-summary span { margin-top: 4px; font-size: 12px; }
.go-salon-participating[data-your-turn="true"] { border-color: #d88d29; background: #fff7df; }
.go-salon-participating-actions { display: flex; gap: 8px; }
.go-salon-page .go-salon-participating-actions button { min-height: 44px; padding: 8px 12px; border: 1px solid #e0bbc2; border-radius: 10px; color: #8c2940; background: #fff; cursor: pointer; font-size: 13px; }
.go-salon-page #goSalonReturnRoom { color: #fff; background: #cf3659; border-color: #cf3659; }
.go-salon-page #goSalonParticipatingMic[aria-pressed="true"] { background: #eaf7ed; color: #246838; border-color: #96c8a2; }
.go-salon-participating button:focus-visible { outline: 2px solid #a92342; outline-offset: 3px; }
.go-salon-page.has-salon-participating-bar .go-salon-app { padding-bottom: calc(190px + env(safe-area-inset-bottom) + var(--mobile-bottom-nav-height, 0px)); }
@media (max-width: 700px) {
  .go-salon-participating { width: calc(100% - 20px); flex-direction: column; align-items: stretch; gap: 9px; padding: 10px 12px; }
  .go-salon-participating-actions { display: grid; grid-template-columns: 1fr 1fr auto; }
  .go-salon-page .go-salon-participating-actions button { padding: 7px 9px; font-size: 12px; }
}
.go-salon-admission-alert {
  position: fixed; z-index: 120; right: 24px; top: 88px; display: grid; grid-template-columns: 44px minmax(190px, 1fr) auto 28px; align-items: center; gap: 12px;
  width: min(520px, calc(100vw - 32px)); padding: 14px 14px 14px 16px; border: 1px solid #e5b96c; border-radius: 15px;
  color: #4e2d18; background: rgba(255, 249, 231, .98); box-shadow: 0 16px 40px rgba(61, 31, 20, .22); animation: goSalonAdmissionAlertIn .24s ease-out;
}
.go-salon-admission-alert[hidden] { display: none; }
.go-salon-admission-alert-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; font-size: 25px; background: linear-gradient(145deg, #e9a331, #c56a1b); box-shadow: 0 5px 12px rgba(156, 83, 22, .25); }
.go-salon-admission-alert > div { min-width: 0; }
.go-salon-admission-alert strong { display: block; font: 700 16px/1.4 "Noto Serif JP", serif; }
.go-salon-admission-alert p { margin: 3px 0 0; color: #76523a; font-size: 12px; }
.go-salon-admission-alert button { min-height: 38px; border-radius: 9px; cursor: pointer; }
.go-salon-admission-alert-review { padding: 8px 14px; border: 1px solid #d78626; color: #fff; font-weight: 700; background: #d77a20; }
.go-salon-admission-alert-close { align-self: start; min-height: 28px !important; padding: 0; border: 0; color: #8c6a54; font-size: 20px; background: transparent; }
@keyframes goSalonAdmissionAlertIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .go-salon-admission-alert { right: 12px; top: 76px; grid-template-columns: 40px minmax(0, 1fr) 26px; width: calc(100vw - 24px); }
  .go-salon-admission-alert-icon { width: 40px; height: 40px; }
  .go-salon-admission-alert-review { grid-column: 1 / -1; }
}

.go-salon-organizer-tools { display: none; }
.go-salon-status-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid #dfbc7a; border-radius: 12px; background: #fff8e8; color: #755018; }
.go-salon-status-warning[hidden] { display: none; }
.go-salon-status-warning p { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 1.6; }
.go-salon-status-warning button { min-height: 44px; padding: 9px 14px; border: 1px solid #cba265; border-radius: 9px; color: #755018; background: #fff; cursor: pointer; }
.go-salon-status-warning button:disabled { cursor: wait; opacity: .7; }
.go-salon-status-warning button:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
.go-salon-directory-mobile-toolbar { display: none; }
.go-salon-directory-menu:not([open]) { display: none; }
dialog.go-salon-directory-menu { position: fixed; inset: 0 auto 0 0; box-sizing: border-box; width: min(360px, calc(100vw - 28px)); max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0 18px 18px 0; color: #4b2d25; background: #fffaf8; overflow: hidden; box-shadow: 10px 0 40px rgba(62,30,21,.2); }
.go-salon-directory-menu::backdrop { background: rgba(36,23,21,.48); }
.go-salon-directory-menu-panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.go-salon-directory-menu-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid #ebdad4; background: #fffaf8; }
.go-salon-directory-menu-head h2 { margin: 0; font: 700 19px/1.4 "Noto Serif JP", serif; }
.go-salon-directory-menu-head button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #e3d0c9; border-radius: 10px; background: #fff; color: #714a40; font-size: 26px; cursor: pointer; }
.go-salon-directory-menu .go-salon-directory-nav { position: static; display: block; width: 100%; padding: 16px 14px max(24px, env(safe-area-inset-bottom)); border: 0; }
.go-salon-directory-menu .go-salon-directory-nav::after,
.go-salon-directory-menu .go-salon-directory-nav h1 { display: none; }
.go-salon-directory-menu .go-salon-directory-nav nav { display: grid; gap: 6px; overflow: visible; }
.go-salon-directory-menu .go-salon-directory-nav nav :is(button, a.go-salon-directory-link) { display: flex; width: 100%; min-height: 48px; padding: 10px 12px; font-size: 14px; }
.go-salon-directory-menu .go-salon-nav-divider,
.go-salon-directory-menu .go-salon-directory-nav h2,
.go-salon-directory-menu .go-salon-owner-offer { display: block; }
.go-salon-directory-menu .go-salon-my-shop { display: flex; min-height: 48px; font-size: 14px; }
.go-salon-directory-menu .go-salon-create-entry { display: grid; }
.go-salon-directory-menu button:focus-visible,
.go-salon-directory-menu a:focus-visible,
.go-salon-directory-mobile-toolbar button:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
body.go-salon-page.go-salon-directory-menu-open { overflow: hidden; }
@media (max-width: 980px) {
  .go-salon-organizer-tools { display: block; margin: 0 0 14px; border: 1px solid #e7d7d0; border-radius: 14px; background: #fffaf6; }
  .go-salon-organizer-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; color: #754d36; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
  .go-salon-organizer-tools > summary::-webkit-details-marker { display: none; }
  .go-salon-organizer-tools > summary small { display: block; margin-top: 3px; color: #877064; font-size: 11px; font-weight: 400; }
  .go-salon-organizer-tools > summary > span:last-child { font-size: 22px; }
  .go-salon-organizer-tools[open] > summary > span:last-child { transform: rotate(180deg); }
  .go-salon-organizer-tools > summary:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; border-radius: 14px; }
  .go-salon-organizer-actions { padding: 0 12px 12px; }
  .go-salon-organizer-actions > :last-child { margin-bottom: 0; }
  .go-salon-directory-mobile-ready .go-salon-directory-mobile-toolbar { display: flex; margin: 0 0 14px; }
  .go-salon-directory-mobile-toolbar button { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 14px; border: 1px solid #e6ccc5; border-radius: 12px; background: #fffaf8; color: #693d32; font-size: 14px; font-weight: 600; cursor: pointer; }
  .go-salon-directory-mobile-toolbar button span { font-size: 22px; line-height: 1; }
}

.go-salon-directory { display: grid; width: 100%; max-width: 1536px; margin-inline: auto; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 74px); }
.go-salon-directory-nav,
.go-salon-room-nav {
  position: relative; padding: 36px 22px 28px; border-right: 1px solid var(--salon-line);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,249,.9));
}
.go-salon-directory-nav::after,
.go-salon-room-nav::after {
  content: "❀  ❀  ❀"; position: absolute; left: 30px; bottom: 20px; color: #f7c9d1; letter-spacing: 15px; font-size: 25px;
  transform: rotate(-8deg); pointer-events: none;
}
.go-salon-directory-nav h1 { margin: 0 8px 20px; font: 700 18px/1.5 "Noto Serif JP", serif; }
.go-salon-directory-nav { min-width: 0; padding: 30px 14px 70px; }
.go-salon-directory-nav nav,
.go-salon-room-nav nav { display: grid; gap: 8px; }
.go-salon-directory-nav nav :is(button, a.go-salon-directory-link),
.go-salon-my-shop,
.go-salon-room-nav nav button {
  display: flex; align-items: center; gap: 17px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 13px;
  font-weight: 600; font-size: 16px; text-align: left; background: transparent; cursor: pointer;
}
.go-salon-directory-nav nav :is(button, a.go-salon-directory-link) span,
.go-salon-my-shop span,
.go-salon-room-nav nav button span { width: 26px; font-size: 24px; text-align: center; }
#goSalonDirectoryNav nav :is(button, a.go-salon-directory-link) { gap: 10px; min-height: 46px; padding-inline: 10px; font-size: 14px; box-shadow: none; }
#goSalonDirectoryNav nav :is(button, a.go-salon-directory-link):not(.active):not(:hover) { background: transparent; }
#goSalonDirectoryNav nav a.go-salon-directory-link { color: inherit; text-decoration: none; }
#goSalonDirectoryNav nav a.go-salon-directory-link > span { display: grid; place-items: center; flex: 0 0 26px; }
#goSalonDirectoryNav nav a.go-salon-directory-link:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
#goSalonDirectoryNav nav a.go-salon-directory-link:hover { color: var(--salon-red); }
.go-salon-directory-nav nav :is(button, a.go-salon-directory-link):hover,
.go-salon-directory-nav nav button.active,
.go-salon-room-nav nav button:hover,
.go-salon-room-nav nav button.active { color: var(--salon-red); background: linear-gradient(90deg, #fff0f2, #fff6f6); }
.go-salon-directory-nav nav .go-salon-one-hour-menu { margin-top: 8px; color: #8a5512; border: 1px solid #edd6a8; background: linear-gradient(100deg, #fffdf6, #fff5dc); }
.go-salon-directory-nav nav .go-salon-one-hour-menu:hover { color: #a14819; background: linear-gradient(100deg, #fff8e9, #ffedc3); }
.go-salon-directory-nav nav .go-salon-fixed-opening-menu { margin-top: 8px; color: #a12642; border: 1px solid #efc6cf; background: linear-gradient(100deg, #fff, #fff0f3); }
.go-salon-directory-nav nav .go-salon-fixed-opening-menu:hover { color: #c22449; background: linear-gradient(100deg, #fff7f8, #ffe5eb); }
.go-salon-nav-divider { margin: 25px 20px; border-top: 1px dashed #e7d8d4; }
.go-salon-room-nav .go-salon-room-menu-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e7d8d4; }
.go-salon-room-nav .go-salon-room-menu-heading { margin: 0 8px 4px; color: #786e67; font: 600 12px/1.5 var(--body-font, sans-serif); }
.go-salon-room-nav .go-salon-room-menu-subheading { margin: 10px 8px 0; color: #786e67; font: 500 11px/1.5 var(--body-font, sans-serif); }
.go-salon-owner-menu:not(:has(button:not([hidden]))) { display: none; }
.go-salon-owner-menu:not(:has([data-room-panel="settings"]:not([hidden]), [data-room-panel="background"]:not([hidden]), [data-salon-notifications]:not([hidden]))) .go-salon-room-menu-subheading { display: none; }
html[data-site-theme="dark"] .go-salon-room-nav .go-salon-room-menu-group { border-color: var(--site-dark-line, #465062); }
html[data-site-theme="dark"] .go-salon-room-nav :is(.go-salon-room-menu-heading, .go-salon-room-menu-subheading) { color: #bdb5ad; }
.go-salon-directory-nav nav .go-salon-menu-heading { grid-column: 1 / -1; margin: 18px 8px 4px; padding-top: 16px; border-top: 1px solid #e7d8d4; color: #786e67; font: 600 12px/1.5 var(--body-font, sans-serif); letter-spacing: .04em; }
.go-salon-directory-nav nav .go-salon-menu-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-site-theme="dark"] .go-salon-directory-nav nav .go-salon-menu-heading { color: #bdb5ad; border-color: var(--site-dark-line, #465062); }
.go-salon-directory-nav h2 { margin: 0 20px 10px; font: 600 15px/1.4 "Noto Serif JP", serif; }

.go-salon-owner-offer {
  position: relative; z-index: 1; margin-top: 22px; padding: 20px 20px 22px; overflow: hidden;
  border: 1px solid #f2c8ce; border-radius: 17px; text-align: center; background: linear-gradient(145deg, #fffdfb, #fff3f4);
  box-shadow: 0 10px 30px rgba(102, 49, 42, .06);
}
.go-salon-owner-offer > span { position: absolute; left: 8px; top: 34px; color: #f6cad2; font-size: 33px; }
.go-salon-owner-offer h3 { margin: 0 0 8px; font: 600 18px/1.3 "Noto Serif JP", serif; }
.go-salon-owner-offer p { margin: 0 0 9px; }
.go-salon-owner-offer p strong { color: var(--salon-red); font: 700 38px/1 "Noto Serif JP", serif; }
.go-salon-owner-offer small { display: block; margin-bottom: 17px; line-height: 1.8; }
.go-salon-owner-offer button,
.go-salon-card-body > button,
.go-salon-dialog-primary {
  width: 100%; min-height: 42px; border: 1px solid var(--salon-red); border-radius: 9px; color: var(--salon-red); font-weight: 700;
  background: #fff; cursor: pointer;
}
.go-salon-owner-offer button { color: #fff; background: linear-gradient(135deg, #ef3d60, #e81f4b); }

.go-salon-create-entry {
  position: relative; margin: 20px 0 0; padding: 15px 14px 14px 45px; border: 1px solid #ecd9d4; border-radius: 15px;
  background: rgba(255,255,255,.84); box-shadow: 0 8px 24px rgba(76,30,24,.045);
}
.go-salon-create-entry-icon { position: absolute; left: 14px; top: 15px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; background: var(--salon-red); }
.go-salon-create-entry h2 { margin: 0 0 5px; font: 700 15px/1.4 "Noto Serif JP", serif; }
.go-salon-create-entry p { margin: 0 0 5px; color: #6b5d59; font-size: 12px; line-height: 1.6; }
.go-salon-create-entry div > span { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: #a12642; font-size: 10px; font-weight: 700; background: #fff0f3; }
.go-salon-create-entry a { display: flex; min-height: 38px; align-items: center; justify-content: center; margin-top: 10px; border: 1px solid var(--salon-red); border-radius: 9px; color: var(--salon-red); font-size: 13px; font-weight: 700; text-decoration: none; background: #fff; }
.go-salon-create-entry a:hover { color: #fff; background: var(--salon-red); }
.go-salon-create-mobile,
.go-salon-one-hour-mobile,
.go-salon-fixed-opening-mobile { display: none; }

.salon-create-shell { width: min(1080px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 70px; }
.salon-create-back { display: inline-flex; margin-bottom: 18px; color: #76615b; font-size: 14px; font-weight: 600; text-decoration: none; }
.salon-create-back:hover { color: var(--salon-red); }
.salon-create-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 260px; overflow: hidden;
  padding: 42px 46px; border: 1px solid #f0cfd5; border-radius: 24px; background: linear-gradient(120deg, #fffdfb, #fff3f5 70%, #fce4e9);
  box-shadow: 0 18px 55px rgba(84,39,32,.08);
}
.salon-create-hero > div:first-child { position: relative; z-index: 2; max-width: 650px; }
.salon-create-beta { display: inline-flex; padding: 6px 13px; border: 1px solid #e798a8; border-radius: 999px; color: var(--salon-red); font-size: 12px; font-weight: 700; background: rgba(255,255,255,.86); }
.salon-create-hero h1 { margin: 14px 0 10px; font: 700 clamp(32px, 4vw, 48px)/1.3 "Noto Serif JP", serif; letter-spacing: .05em; }
.salon-create-hero p { max-width: 640px; margin: 0; color: #655653; font-size: 15px; line-height: 1.9; }
.salon-create-guide { position: absolute; z-index: 1; right: 0; bottom: 0; width: 350px; height: 100%; }
.salon-create-guide::before { content: ""; position: absolute; right: -40px; top: -50px; width: 270px; height: 270px; border-radius: 50%; background: rgba(255,255,255,.56); }
.salon-create-guide img { position: absolute; right: 2px; bottom: -78px; width: 255px; height: auto; filter: drop-shadow(0 10px 18px rgba(84,39,32,.14)); }
.salon-create-guide span { position: absolute; z-index: 2; right: 180px; top: 45px; width: 210px; padding: 13px 15px; border: 1px solid #e7c3c8; border-radius: 16px 16px 4px 16px; color: #604b46; font-size: 12px; font-weight: 600; line-height: 1.7; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(76,30,24,.08); }
.salon-create-loading, .salon-create-lock, .salon-create-success { margin-top: 26px; padding: 40px; border: 1px solid #eee0dc; border-radius: 22px; text-align: center; background: #fff; box-shadow: 0 12px 36px rgba(76,30,24,.06); }
.salon-create-loading { color: #75645f; }
.salon-create-lock > span, .salon-create-success > span { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 14px; border-radius: 50%; color: #fff; font-size: 24px; background: var(--salon-red); }
.salon-create-lock h2, .salon-create-success h2 { margin: 0 0 10px; font: 700 27px/1.4 "Noto Serif JP", serif; }
.salon-create-lock > p, .salon-create-success > p { max-width: 650px; margin: 0 auto 22px; color: #6e5e59; line-height: 1.8; }
.salon-create-existing-card { display: flex; max-width: 560px; align-items: center; gap: 14px; margin: 20px auto; padding: 15px; border: 1px solid #ead8d3; border-radius: 14px; text-align: left; background: #fffaf9; }
.salon-create-existing-card span { padding: 4px 8px; border-radius: 999px; color: #127443; font-size: 11px; font-weight: 700; background: #e7f6ee; }
.salon-create-existing-card strong { flex: 1; }
.salon-create-existing-card a { color: var(--salon-red); font-size: 13px; font-weight: 700; }
.salon-create-wizard { margin-top: 28px; }
.salon-create-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; }
.salon-create-steps li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 15px; border: 1px solid #eadedb; border-radius: 13px; color: #96847f; background: rgba(255,255,255,.8); }
.salon-create-steps li span { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: #eee4e1; }
.salon-create-steps li b { font-size: 13px; }
.salon-create-steps li.active { color: var(--salon-red); border-color: #e58b9c; background: #fff5f7; }
.salon-create-steps li.active span, .salon-create-steps li.done span { color: #fff; background: var(--salon-red); }
.salon-create-steps li.done { color: #655653; }
.salon-create-panel { padding: 38px 42px; border: 1px solid #eadeda; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 12px 36px rgba(76,30,24,.055); }
.salon-create-panel > header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px dashed #e4d6d2; }
.salon-create-panel > header small { color: var(--salon-red); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.salon-create-panel > header h2 { margin: 5px 0 5px; font: 700 29px/1.4 "Noto Serif JP", serif; }
.salon-create-panel > header p { margin: 0; color: #75645f; font-size: 14px; }
.salon-create-field { display: grid; gap: 8px; margin-top: 22px; color: #4f403c; font-weight: 700; }
.salon-create-field em, .salon-create-fieldset legend em { color: var(--salon-red); font-size: 11px; font-style: normal; }
.salon-create-field input, .salon-create-field textarea { width: 100%; border: 1px solid #d9ccc8; border-radius: 11px; color: #382e2b; background: #fff; outline: none; }
.salon-create-field input { min-height: 48px; padding: 0 14px; }
.salon-create-field textarea { padding: 13px 14px; line-height: 1.75; resize: vertical; }
.salon-create-field input:focus, .salon-create-field textarea:focus { border-color: #db7489; box-shadow: 0 0 0 3px rgba(218,72,103,.1); }
.salon-create-field > small, .salon-create-fieldset > small { justify-self: end; color: #94827d; font-size: 11px; font-weight: 500; }
.salon-create-fieldset { display: grid; gap: 10px; margin: 23px 0 0; padding: 0; border: 0; }
.salon-create-fieldset legend { margin-bottom: 9px; color: #4f403c; font-weight: 700; }
.salon-create-choice { display: flex; min-height: 68px; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid #e1d6d2; border-radius: 13px; cursor: pointer; background: #fff; }
.salon-create-choice:has(input:checked) { border-color: #df7890; background: #fff7f8; box-shadow: 0 0 0 2px rgba(218,72,103,.06); }
.salon-create-choice input { accent-color: var(--salon-red); }
.salon-create-choice span { display: grid; gap: 3px; }
.salon-create-choice small { color: #806f69; font-size: 12px; }
.salon-create-board-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.salon-create-board-options label { cursor: pointer; }
.salon-create-board-options input { position: absolute; opacity: 0; pointer-events: none; }
.salon-create-board-options span { display: grid; min-height: 54px; place-items: center; border: 1px solid #dfd3cf; border-radius: 12px; font-weight: 700; background: #fff; }
.salon-create-board-options input:checked + span { color: var(--salon-red); border-color: var(--salon-red); background: #fff5f7; }
.salon-create-table-modes { display: grid; gap: 8px; }
.salon-create-table-mode { display: grid; grid-template-columns: minmax(74px, .7fr) repeat(3, minmax(100px, 1fr)); align-items: center; gap: 8px; }
.salon-create-table-mode > strong { padding-left: 4px; color: #51413d; font-size: 13px; }
.salon-create-table-mode label { cursor: pointer; }
.salon-create-table-mode input { position: absolute; opacity: 0; pointer-events: none; }
.salon-create-table-mode span { display: grid; min-height: 44px; place-items: center; border: 1px solid #dfd3cf; border-radius: 10px; color: #65534e; font-size: 13px; font-weight: 700; background: #fff; }
.salon-create-table-mode input:checked + span { color: var(--salon-red); border-color: var(--salon-red); background: #fff5f7; box-shadow: 0 0 0 2px rgba(218,72,103,.06); }
.salon-create-table-mode input:focus-visible + span { outline: 3px solid rgba(218,72,103,.2); outline-offset: 2px; }
.salon-create-hours { margin: 8px 0 0 32px; }
.salon-create-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.salon-create-themes label { cursor: pointer; }
.salon-create-themes input { position: absolute; opacity: 0; pointer-events: none; }
.salon-create-themes span { display: flex; min-height: 150px; align-items: flex-end; overflow: hidden; padding: 12px; border: 2px solid transparent; border-radius: 15px; color: #fff; background: linear-gradient(0deg, rgba(26,15,11,.72), transparent 65%), var(--salon-theme-image) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.salon-create-themes input:checked + span { border-color: var(--salon-red); box-shadow: 0 0 0 3px rgba(218,72,103,.12); }
.salon-create-themes b { font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.salon-create-thumbnail > p { color: #675752; line-height: 1.7; }
.salon-create-thumbnail small { color: #78655e; line-height: 1.7; }
.salon-create-thumbnail input[type="file"] { width: 100%; min-width: 0; font-size: 14px; }
.salon-thumbnail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.salon-thumbnail-card { min-width: 0; overflow: hidden; border: 1px solid #e7d9d5; border-radius: 15px; background: #fff; }
.salon-thumbnail-card > img, .salon-thumbnail-card > canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.salon-thumbnail-card > [hidden], .salon-thumbnail-crop[hidden] { display: none; }
.salon-thumbnail-card > div { padding: 16px; overflow-wrap: anywhere; }
.salon-thumbnail-card h3 { margin: 6px 0; font: 700 21px/1.5 "Noto Serif JP", serif; }
.salon-thumbnail-card p { margin: 0; color: #675752; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.salon-thumbnail-crop { display: grid; gap: 16px; }
.salon-thumbnail-crop label { display: block; color: #50342e; font-size: 14px; font-weight: 700; }
.salon-thumbnail-crop output { float: right; }
.salon-thumbnail-crop input[type="range"] { display: block; width: 100%; margin: 12px 0; accent-color: var(--salon-red); }
#salonThumbnailStatus { color: #675752; font-size: 13px; line-height: 1.8; }
.salon-thumbnail-save-note { display: block; margin-top: 14px; }
.salon-create-preview-card { display: grid; grid-template-columns: minmax(260px, .85fr) 1.15fr; overflow: hidden; border: 1px solid #e7d9d5; border-radius: 17px; background: #fff; box-shadow: 0 10px 30px rgba(76,30,24,.07); }
.salon-create-preview-card > img { width: 100%; height: auto; aspect-ratio: 16 / 9; align-self: start; object-fit: cover; }
.salon-create-preview-card > div { padding: 26px; }
.salon-create-preview-card > div > span { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: #187447; font-size: 11px; font-weight: 700; background: #e8f6ee; }
.salon-create-preview-card h3 { margin: 10px 0; font: 700 25px/1.4 "Noto Serif JP", serif; }
.salon-create-preview-card p { color: #675752; line-height: 1.8; }
.salon-create-preview-card dl { display: grid; gap: 8px; margin: 18px 0 0; }
.salon-create-preview-card dl div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.salon-create-preview-card dt { color: #8c7872; font-size: 12px; }
.salon-create-preview-card dd { margin: 0; font-size: 13px; font-weight: 700; }
.salon-create-preview-rules { margin-top: 16px; padding: 19px 22px; border: 1px solid #e9dcd8; border-radius: 14px; background: #fffaf9; }
.salon-create-preview-rules h3 { margin: 0 0 8px; font-size: 14px; }
.salon-create-preview-rules p { margin: 0; white-space: pre-wrap; color: #6e5d58; font-size: 13px; line-height: 1.8; }
.salon-create-confirm { display: flex; gap: 12px; margin-top: 22px; padding: 17px; border: 1px solid #e1d5d1; border-radius: 13px; cursor: pointer; background: #fff; }
.salon-create-confirm input { margin-top: 3px; accent-color: var(--salon-red); }
.salon-create-confirm span { color: #594945; font-size: 13px; line-height: 1.7; }
.salon-create-plan-note { display: grid; gap: 5px; margin-top: 16px; padding: 16px 18px; border-radius: 13px; color: #774b2e; background: #fff3df; }
.salon-create-plan-note span { font-size: 12px; line-height: 1.7; }
.salon-create-actions { display: flex; justify-content: space-between; gap: 12px; padding: 20px 4px 0; }
.salon-create-primary, .salon-create-secondary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 24px; border-radius: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.salon-create-primary { margin-left: auto; border: 1px solid var(--salon-red); color: #fff; background: linear-gradient(135deg, #ef3d60, #df1645); box-shadow: 0 9px 22px rgba(173,28,66,.16); }
.salon-create-primary:hover { color: #fff; background: #c72849; }
.salon-create-primary:disabled { opacity: .58; cursor: wait; }
.salon-create-secondary { border: 1px solid #d8c8c3; color: #614f49; background: #fff; }
.salon-create-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.go-salon-directory-main { min-width: 0; padding: 30px 28px 18px; }
.go-salon-quick-play {
  position: relative; display: grid; grid-template-columns: minmax(320px, 1fr) auto 330px; align-items: center; gap: 24px;
  min-height: 176px; margin: 0 0 24px; padding: 22px 28px 22px 34px; overflow: hidden;
  border: 1px solid #f1cbd1; border-radius: 19px; background: linear-gradient(110deg, #fffdfb 0%, #fff3f5 68%, #fce5e9 100%);
  box-shadow: 0 10px 30px rgba(91, 42, 37, .075);
}
.go-salon-quick-play-copy { position: relative; z-index: 2; min-width: 0; }
.go-salon-quick-play-copy p { display: inline-flex; margin: 0 0 8px; padding: 5px 13px; border: 1px solid #ec8fa0; border-radius: 999px; color: var(--salon-red); font-size: 12px; font-weight: 700; background: rgba(255,255,255,.84); }
.go-salon-quick-play-copy h2 { margin: 0; font: 700 clamp(26px, 2.5vw, 38px)/1.25 "Noto Serif JP", serif; letter-spacing: .04em; }
.go-salon-quick-play-copy span { display: block; margin-top: 8px; color: #665855; font-size: 15px; }
.go-salon-quick-play-button {
  position: relative; z-index: 3; display: inline-flex; min-width: 210px; min-height: 58px; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 22px; border-radius: 10px; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none;
  background: linear-gradient(135deg, #ef3d60, #df1645); box-shadow: 0 10px 24px rgba(173, 28, 66, .2);
}
.go-salon-quick-play-button:hover { color: #fff; background: #c72849; transform: none; }
.go-salon-quick-play-button span { font-size: 27px; font-weight: 400; line-height: 1; }
.go-salon-quick-play-guide { position: relative; z-index: 1; align-self: stretch; min-width: 0; }
.go-salon-quick-play-guide img { position: absolute; z-index: 2; left: 4px; bottom: -78px; width: 218px; height: auto; filter: drop-shadow(0 8px 12px rgba(93, 42, 38, .14)); }
.go-salon-quick-play-guide small { position: absolute; z-index: 4; right: 0; bottom: 0; padding: 6px 12px; border: 1px solid #e9c6c9; border-radius: 999px; color: #5f4038; font-size: 11px; font-weight: 700; background: rgba(255,252,249,.92); }
.go-salon-quick-play-board {
  position: absolute; right: -30px; top: -42px; width: 190px; height: 190px; border: 8px solid #bc7b43; border-radius: 22px; transform: rotate(8deg);
  background-color: #e3ae67; background-image: linear-gradient(rgba(85,49,25,.33) 1px, transparent 1px), linear-gradient(90deg, rgba(85,49,25,.33) 1px, transparent 1px); background-size: 21px 21px;
  box-shadow: 0 10px 22px rgba(91, 51, 28, .18);
}
.go-salon-quick-play-board i { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #777, #141414 58%, #050505); box-shadow: 0 3px 5px rgba(30,18,12,.3); }
.go-salon-quick-play-board i:nth-child(1) { left: 29px; top: 30px; }
.go-salon-quick-play-board i:nth-child(2) { left: 72px; top: 52px; border: 1px solid #bdb8ae; background: radial-gradient(circle at 35% 28%, #fff, #ece7df 70%); }
.go-salon-quick-play-board i:nth-child(3) { left: 114px; top: 73px; }
.go-salon-quick-play-board i:nth-child(4) { left: 50px; top: 115px; border: 1px solid #bdb8ae; background: radial-gradient(circle at 35% 28%, #fff, #ece7df 70%); }
.go-salon-quick-play-board i:nth-child(5) { left: 93px; top: 136px; }
.go-salon-directory-hero { min-height: 44px; margin-bottom: 14px; padding: 0; display: flex; align-items: center; }
.go-salon-directory-hero > div { min-width: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.go-salon-kicker { margin: 0 0 5px; color: #b18478; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.go-salon-directory-hero h2 { margin: 0; font: 700 20px/1.5 "Noto Sans JP", sans-serif; }
/* Preserve accessible labels and announcements without repeating explanatory text. */
#goSalonDirectoryNote,
.go-salon-directory-tools label > span,
.go-salon-search-results { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.go-salon-live-totals { font-size: 12px; color: #78645e; }
.go-salon-live-totals summary { min-height: 44px; align-content: center; cursor: pointer; }
.go-salon-live-totals .go-salon-live-summary { padding-bottom: 8px; }
.go-salon-live-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #5f5754; }
.go-salon-live-summary i { width: 13px; height: 13px; border-radius: 50%; background: #1ca05c; box-shadow: 0 0 0 4px rgba(28,160,92,.1); }
.go-salon-live-summary strong { color: var(--salon-green); }

.go-salon-directory-tools { position: relative; display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; }
.go-salon-directory-tools label { display: grid; gap: 6px; min-width: 0; color: #71524b; font-size: 12px; font-weight: 600; }
.go-salon-directory-search { flex: 1 1 250px; }
.go-salon-directory-sort { flex: 0 1 220px; }
.go-salon-directory-tools input,
.go-salon-directory-tools select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #dacbc5; border-radius: 10px; color: #412b25; background: #fff; font: inherit; font-size: 16px; }
.go-salon-directory-tools [hidden] { display: none !important; }
.go-salon-search-reset { min-height: 44px; padding: 10px 12px; border: 1px solid #dec9c4; border-radius: 10px; color: #764b43; background: #fff9f7; font-size: 13px; cursor: pointer; }
.go-salon-search-reset:hover:not(:disabled) { color: #9d2944; background: #fff0f3; border-color: #d990a2; }
.go-salon-search-reset:disabled { display: none; }
.go-salon-directory-tools input:focus-visible,
.go-salon-directory-tools select:focus-visible,
.go-salon-search-reset:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
.go-salon-favorite-notice { flex-basis: 100%; margin: 0; color: #8b4c32; font-size: 12px; line-height: 1.6; }

.go-salon-filters {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 4px; margin-bottom: 20px; overflow-x: auto;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.go-salon-filters button { flex: 0 0 auto; min-height: 44px; padding: 9px 14px; border: 0; border-radius: 9px; color: #65534d; background: #eee8e4; font-size: 13px; cursor: pointer; }
.go-salon-filters button:hover,
.go-salon-filters button.active { color: #fff; background: #79584c; }

.go-salon-card-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); align-items: start; gap: 26px 18px; }
.go-salon-card-affiliation { color: var(--salon-red); font-size: 11px; font-weight: 600; }
.go-salon-card { min-width: 0; border: 0; background: transparent; box-shadow: none; }
.go-salon-card-image { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background-position: center; background-repeat: no-repeat; background-size: cover; }
.go-salon-thumbnail-link { position: absolute; inset: 0; display: block; font-size: 0; }
.go-salon-thumbnail-link:hover { background: #ffffff12; }
.go-salon-thumbnail-link:focus-visible { outline: 3px solid var(--salon-red); outline-offset: -3px; }
/* Cover the opening label baked into the existing default thumbnail when closed. */
.go-salon-card-image > .go-salon-closed-badge { position: absolute; top: 10px; left: 0; z-index: 1; min-width: 78px; padding: 8px 12px; border-radius: 0 20px 20px 0; background: #ece8e4; color: #514943; font-size: 13px; font-weight: 600; text-align: center; pointer-events: none; }
.go-salon-thumb-night { background-image: url("/assets/go-salon-thumb-night.png"); }
.go-salon-thumb-bright { background-image: url("/assets/go-salon-thumb-bright.png"); }
.go-salon-thumb-sea { background-image: url("/assets/go-salon-thumb-sea.png"); }
.go-salon-directory-main > [hidden] { display: none !important; }
.go-salon-card-body { padding: 4px 2px 0; }
.go-salon-card-heading { display: flex; align-items: center; gap: 8px; margin: 0; }
.go-salon-card-body .go-salon-card-heading h3 { flex: 1; min-width: 0; margin: 0; }
.go-salon-card-heading > .go-salon-card-favorite { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #816050; background: transparent; font-size: 25px; cursor: pointer; }
.go-salon-card-heading > .go-salon-card-favorite:hover,
.go-salon-card-heading > .go-salon-card-favorite[aria-pressed="true"] { color: #d42b58; background: #fff0f4; }
.go-salon-card-heading > .go-salon-card-favorite:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
.go-salon-card-heading > .go-salon-card-favorite,
.go-salon-filters button { box-shadow: none; }
.go-salon-card-heading h3 > a { color: inherit; text-decoration: none; }
.go-salon-card-heading h3 > a:hover { color: #b32348; text-decoration: underline; }

/* Salon profiles use the site's existing typography, buttons and thumbnail assets. */
.salon-profile-shell { max-width: 1200px; margin: 0 auto; padding: 24px; color: #482d26; }
.salon-profile-shell [hidden] { display: none !important; }
.salon-profile-shell #salonProfileNotice { padding: 14px 18px; border: 1px solid #eed7b1; border-radius: 12px; background: #fff7e9; overflow-wrap: anywhere; }
.salon-profile-shell #salonProfileReload { margin: 12px 0 20px; }
.salon-profile-shell button, .salon-profile-shell select { min-height: 44px; border: 1px solid #e8d2cb; border-radius: 10px; padding: 10px 14px; background: #fff; color: #563329; font: inherit; }
.salon-profile-shell button { cursor: pointer; }
.salon-profile-shell button:disabled { opacity: .6; cursor: wait; }
.salon-profile-shell button:hover { color: #b32348; background: #fff1f4; }
.salon-profile-shell button[aria-pressed="true"] { color: #c32550; background: #ffedf2; }
.salon-profile-shell .salon-create-primary { background: #e6335d; color: white; }
.salon-profile-shell :is(a,button,select):focus-visible { outline: 3px solid #ad3654; outline-offset: 3px; }
.salon-profile-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); align-items: center; gap: 28px; padding: 24px; border: 1px solid #efe0db; border-radius: 20px; background: #fffaf8; }
.salon-profile-hero > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.salon-profile-hero h1 { font-family: "Noto Serif JP", serif; font-size: clamp(24px, 3vw, 36px); line-height: 1.5; margin: 6px 0; overflow-wrap: anywhere; }
.salon-profile-eyebrow { color: #9e5364; font-size: 12px; letter-spacing: .08em; }
.salon-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.salon-profile-actions > a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 10px; }
.salon-profile-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin: 22px 0; }
.salon-profile-section { border: 1px solid #efe0db; border-radius: 16px; padding: 22px; margin-bottom: 20px; background: white; overflow-wrap: anywhere; }
.salon-profile-section h2 { font-size: 21px; margin: 0 0 15px; }
.salon-profile-section h2 small { font-size: 12px; color: #965369; }
.salon-profile-copy { white-space: pre-wrap; line-height: 1.9; }
.salon-profile-section dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #f0e5e0; }
.salon-profile-section dd { margin: 0; }
.salon-profile-note { font-size: 13px; color: #75645d; line-height: 1.8; }
.salon-membership-badge { padding: 12px; border-radius: 10px; color: #246140; background: #edf7ef; }
.salon-membership-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eee2dc; }
.salon-membership-row > span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 100px; }
.salon-profile-section details summary { min-height: 44px; cursor: pointer; padding: 14px 0; }
/* Salon profile: a photo-led visitor page, separate from the owner's management layout. */
.salon-profile-design { --salon-profile-accent: #a83753; --salon-profile-ink: #49352e; --salon-profile-muted: #77685f; --salon-profile-line: #e9dfd8; --salon-profile-soft: #f9f6f2; }
.salon-profile-design .salon-profile-shell { max-width: 1160px; padding: 28px 28px 60px; color: var(--salon-profile-ink); }
.salon-profile-design .salon-profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.salon-profile-design .salon-profile-toolbar .salon-create-back { margin: 0; color: var(--salon-profile-muted); font-size: 13px; text-decoration: none; }
.salon-profile-design .salon-profile-toolbar #salonProfileReload { margin: 0; min-height: 44px; padding: 8px 12px; border-color: transparent; background: transparent; color: var(--salon-profile-muted); box-shadow: none; font-size: 13px; }
.salon-profile-design #salonProfileReload span { display: inline-block; margin-right: 4px; font-size: 19px; vertical-align: middle; }
.salon-profile-design .salon-profile-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--salon-profile-line); border-radius: 22px; background: #fffdfb; box-shadow: 0 12px 36px #49352e08; overflow: hidden; }
.salon-profile-design .salon-profile-cover { min-width: 0; min-height: 300px; background: #eee6dc; }
.salon-profile-design .salon-profile-cover img { display: block; width: 100%; height: 100%; min-height: 300px; aspect-ratio: 3 / 2; object-fit: cover; object-position: left center; }
.salon-profile-design .salon-profile-hero-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 36px; }
.salon-profile-design .salon-profile-hero-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.salon-profile-design .salon-profile-kicker { margin: 0; font: 600 11px/1.6 "Noto Sans JP", sans-serif; letter-spacing: .13em; color: var(--salon-profile-muted); }
.salon-profile-design .salon-profile-availability { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 10px; color: #386b50; background: #edf5ee; font-size: 12px; font-weight: 600; }
.salon-profile-design .salon-profile-availability::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.salon-profile-design .salon-profile-availability[data-open="false"] { background: #f0ece7; color: #746459; }
.salon-profile-design .salon-profile-hero h1 { margin: 0 0 22px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.4; letter-spacing: .025em; }
.salon-profile-design .salon-profile-host { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 14px; overflow-wrap: anywhere; }
.salon-profile-design .salon-profile-host > span:last-child { min-width: 0; }
.salon-profile-design .salon-profile-host small { display: block; margin-bottom: 2px; color: var(--salon-profile-muted); font-size: 11px; }
.salon-profile-design .salon-profile-host-mark { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--salon-profile-line); border-radius: 50%; background: var(--salon-profile-soft); color: #816451; font: 600 18px/1 serif; text-transform: uppercase; }
.salon-profile-design .salon-profile-primary-actions { justify-content: flex-start; gap: 12px; margin: 0; }
.salon-profile-design .salon-profile-primary-actions > :is(a,button) { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 48px; margin: 0; padding: 12px 20px; font-size: 14px; font-weight: 600; border-radius: 12px; text-decoration: none; }
.salon-profile-design .salon-profile-shell .salon-create-primary { background: var(--salon-profile-accent); border: 1px solid var(--salon-profile-accent); color: #fff; box-shadow: 0 4px 12px #a8375317; text-decoration: none; }
.salon-profile-design .salon-profile-shell .salon-create-primary:hover { background: #902e47; border-color: #902e47; }
.salon-profile-design .salon-profile-primary-actions button { background: transparent; border-color: var(--salon-profile-line); color: var(--salon-profile-muted); box-shadow: none; }
.salon-profile-design .salon-profile-primary-actions button[aria-pressed="true"] { color: var(--salon-profile-accent); background: #fff2f5; border-color: #efd2da; }
.salon-profile-design .salon-profile-closed-note { flex-basis: 100%; margin: 0; color: var(--salon-profile-muted); font-size: 14px; }
.salon-profile-design .salon-profile-owner-tools { margin: 16px 0 0; padding: 0 18px; border: 1px solid var(--salon-profile-line); border-radius: 12px; background: #fcfaf7; }
.salon-profile-design .salon-profile-owner-tools summary { box-sizing: border-box; min-height: 48px; padding: 13px 0; cursor: pointer; color: var(--salon-profile-muted); font-size: 13px; font-weight: 600; }
.salon-profile-design .salon-profile-owner-tools summary span { margin-left: 12px; font-size: 12px; font-weight: 400; }
.salon-profile-design .salon-profile-owner-tools .salon-profile-actions { justify-content: flex-start; margin: 0 0 14px; }
.salon-profile-design .salon-profile-owner-tools a { box-sizing: border-box; align-items: center; border: 1px solid var(--salon-profile-line); background: #fff; color: var(--salon-profile-ink); font-size: 13px; text-decoration: none; }
.salon-profile-design .salon-profile-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.salon-profile-design .salon-profile-section { padding: 28px; margin-bottom: 20px; border-color: var(--salon-profile-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 20px #49352e04; }
.salon-profile-design .salon-profile-section h2 { margin: 0 0 18px; font-size: 20px; line-height: 1.6; letter-spacing: .02em; }
.salon-profile-design .salon-profile-copy { margin: 0 0 22px; font-size: 15px; line-height: 1.95; }
.salon-profile-design .salon-profile-section > .salon-profile-copy:last-child { margin-bottom: 0; }
.salon-profile-design .salon-profile-section dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--salon-profile-line); }
.salon-profile-design .salon-profile-section dl > div { display: block; min-width: 0; padding: 0; border: 0; }
.salon-profile-design .salon-profile-section dt { margin-bottom: 7px; color: var(--salon-profile-muted); font-size: 12px; font-weight: 400; }
.salon-profile-design .salon-profile-section dd { font-size: 14px; line-height: 1.75; }
.salon-profile-design .salon-profile-membership { border-top: 3px solid #b88a69; background: linear-gradient(150deg, #fcf7f1 0%, #fff 48%); }
.salon-profile-design .salon-profile-membership > .salon-profile-kicker { color: #926b4b; margin-bottom: 6px; }
.salon-profile-design .salon-profile-membership > h2 { margin-bottom: 8px; }
.salon-profile-design .salon-profile-note { margin: 8px 0; color: var(--salon-profile-muted); font-size: 12px; line-height: 1.85; }
.salon-profile-design .salon-profile-offer { padding: 24px 0 0; }
.salon-profile-design .salon-profile-offer h3 { margin: 0; font: 600 15px/1.6 "Noto Sans JP", sans-serif; }
.salon-profile-design .salon-paid-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0 18px; font: 650 40px/1.3 "Noto Sans JP", sans-serif; letter-spacing: -.03em; }
.salon-profile-design .salon-paid-price small { color: var(--salon-profile-muted); font-size: 14px; letter-spacing: 0; }
.salon-profile-design .salon-paid-price small span { font-size: 11px; }
.salon-profile-design .salon-profile-offer .salon-profile-copy { margin-bottom: 18px; }
.salon-profile-design .salon-profile-member-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; color: var(--salon-profile-muted); font-size: 12px; line-height: 1.7; }
.salon-profile-design .salon-profile-conditions { margin: 12px 0; font-size: 12px; line-height: 1.7; }
.salon-profile-design .salon-profile-conditions a { color: var(--salon-profile-accent); text-underline-offset: 3px; }
.salon-profile-design .salon-paid-readiness { margin: 16px 0; padding: 12px 14px; border: 1px solid #ebdcc0; border-radius: 10px; background: #fffbf1; color: #786239; font-size: 12px; line-height: 1.8; }
.salon-profile-design .salon-profile-membership-actions { margin: 20px 0; }
.salon-profile-design .salon-profile-membership-actions .salon-profile-actions { justify-content: flex-start; }
.salon-profile-design .salon-profile-membership-actions .salon-create-primary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 600; line-height: 1.7; border-radius: 12px; }
.salon-profile-design .salon-profile-membership-notes { padding-top: 14px; border-top: 1px solid var(--salon-profile-line); }
.salon-profile-design .salon-profile-shell :is(a,button,summary):focus-visible { outline: 3px solid var(--salon-profile-accent); outline-offset: 4px; }
@layer site-theme {
  html[data-site-theme="dark"] body.salon-profile-design { --salon-profile-ink: #f4e8df; --salon-profile-muted: #d2bbad; --salon-profile-line: #55473e; --salon-profile-soft: #302a25; --salon-profile-accent: #e9a1b4; }
  html[data-site-theme="dark"] body.salon-profile-design :is(.salon-profile-owner-tools,.salon-profile-host-mark,.salon-profile-owner-tools a) { background: #302a25 !important; color: #e4ccbb !important; border-color: #55473e !important; }
  html[data-site-theme="dark"] body.salon-profile-design .salon-profile-shell .salon-create-primary { color: #fff5f7 !important; background: #953b55 !important; border-color: #af6278 !important; }
  html[data-site-theme="dark"] body.salon-profile-design .salon-profile-availability { background: #233e31 !important; color: #bae4c9 !important; }
  html[data-site-theme="dark"] body.salon-profile-design .salon-profile-availability[data-open="false"] { background: #39322c !important; color: #dfcbbb !important; }
  html[data-site-theme="dark"] body.salon-profile-design .salon-paid-readiness { background: #393121 !important; color: #f0d9ab !important; border-color: #75613d !important; }
  html[data-site-theme="dark"] body.salon-profile-design :is(.salon-profile-note,.salon-profile-kicker,.salon-profile-member-meta,.salon-profile-section dt) { color: #d2bbad !important; }
}
@media (max-width: 760px) {
  .salon-profile-design .salon-profile-shell { padding: 18px 14px 36px; }
  .salon-profile-design .salon-profile-toolbar { flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; }
  .salon-profile-design .salon-profile-toolbar #salonProfileReload { margin-left: auto; }
  .salon-profile-design .salon-profile-hero, .salon-profile-design .salon-profile-columns { grid-template-columns: minmax(0, 1fr); }
  .salon-profile-design .salon-profile-cover { min-height: 0; }
  .salon-profile-design .salon-profile-cover img { height: auto; min-height: 0; max-height: 320px; aspect-ratio: 16 / 9; }
  .salon-profile-design .salon-profile-hero-body { padding: 24px; }
  .salon-profile-design .salon-profile-hero h1 { margin-bottom: 18px; }
  .salon-profile-design .salon-profile-primary-actions > :is(a,button) { flex: 1 1 130px; gap: 12px; padding-inline: 12px; }
  .salon-profile-design .salon-profile-columns { gap: 0; margin-top: 20px; }
  .salon-profile-design .salon-profile-section { padding: 24px; }
  .salon-profile-design .salon-profile-owner-tools summary span { display: block; margin: 6px 0 0 15px; }
}
.salon-membership-confirm { max-width: min(500px, calc(100vw - 32px)); border: 1px solid #e8d2cb; border-radius: 18px; padding: 24px; color: #482d26; }
.salon-membership-confirm::backdrop { background: #2e1c1855; }
.salon-paid-form { display: grid; gap: 10px; margin-bottom: 28px; }
.go-salon-profile-page .salon-membership-steps { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-left: 24px; line-height: 1.8; }
.go-salon-profile-page #salonPlanNotice { padding: 12px; border: 1px solid currentColor; border-radius: 8px; overflow-wrap: anywhere; }
.go-salon-profile-page .salon-management-status { padding: 12px 14px; border: 1px solid #bdd8c6; border-radius: 10px; background: #edf7ef; color: #246140; font-weight: 700; }
.go-salon-profile-page .salon-management-status[data-state="paused"], .go-salon-profile-page .salon-management-status[data-state="setup"] { border-color: #d8c5bc; background: #f8f3ef; color: #67544c; }
.go-salon-profile-page .salon-management-plan { padding: 2px 0 12px; }
.go-salon-profile-page .salon-management-plan h3 { margin-bottom: 4px; }
.go-salon-profile-page .salon-management-meta { font-size: 13px; color: #75645d; font-weight: 400; }
.go-salon-profile-page .salon-management-details { border-top: 1px solid #e8d9d1; }
.go-salon-profile-page .salon-management-details > summary { box-sizing: border-box; font-weight: 700; line-height: 1.8; }
.go-salon-profile-page .salon-management-details > summary .salon-management-meta { display: inline-block; margin-inline-start: 8px; }
.go-salon-profile-page .salon-management-draft, .go-salon-profile-page .salon-management-attention { border-inline-start: 3px solid #bd8b36; padding: 10px 14px; background: #fff8e9; color: #6a4d1c; line-height: 1.8; }
.go-salon-profile-page .salon-management-attention p { margin-top: 0; }
.go-salon-profile-page .salon-management-status[data-state="attention"] { border-color: #bd8b36; background: #fff8e9; color: #6a4d1c; }
.salon-paid-form :is(input:not([type="checkbox"]),textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid #d8c5bc; border-radius: 8px; background: #fffaf8; color: #482d26; font: inherit; font-size: 16px; }
.salon-paid-form textarea { resize: vertical; }
.salon-management-shell { max-width: 1040px; }
.salon-management-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.salon-management-shell .salon-management-toolbar #salonProfileReload { margin: 0; }
.salon-management-heading { margin: 24px 0; overflow-wrap: anywhere; }
.salon-management-heading h1 { margin: 8px 0; font-size: clamp(24px, 4vw, 32px); }
.salon-management-overview { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 24px; }
.salon-management-overview > * { min-width: 0; }
.salon-management-overview > a { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; border: 1px solid #e8d9d1; border-radius: 12px; color: inherit; text-decoration: none; }
.salon-management-overview > a:hover { background: #fff5f1; }
.salon-management-overview strong { font-size: 28px; }
.salon-management-overview small { font-size: 13px; font-weight: 400; }
.salon-management-panel .salon-management-plan h2 { margin: 0; font-size: 20px; }
.salon-management-panel .salon-management-status { margin-top: 0; }
.salon-management-panel .salon-management-footnote { margin: 0 0 12px; font-size: 12px; line-height: 1.8; }
.salon-management-nav { padding-bottom: 18px; }
.salon-management-nav a { box-sizing: border-box; border: 1px solid #e8d2cb; text-decoration: none; }
.salon-management-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e8d9d1; }
.salon-management-panel :is(section,details) { scroll-margin-top: 110px; }
.salon-management-panel .salon-management-help > summary { min-height: 24px; padding: 0; font-size: 12px; font-weight: 400; }
.salon-management-help { margin-bottom: 10px; }
.salon-management-ending h2 { color: #9a3e35; }
.go-salon-membership-page .salon-management-shell { max-width: 1000px; padding-bottom: 64px; }
.go-salon-membership-page .salon-management-heading { padding: 8px 0; }
.go-salon-membership-page .salon-management-panel { padding: clamp(18px, 3vw, 32px); border-radius: 20px; box-shadow: 0 8px 32px #482d2608; }
.go-salon-membership-page .salon-management-overview { margin: 20px 0 14px; gap: 12px; }
.go-salon-membership-page .salon-management-overview > * { padding: 20px; border: 1px solid #eaded8; border-radius: 14px; background: #fcf9f7; }
.go-salon-membership-page .salon-management-overview > a { transition: border-color .15s, background .15s; }
.go-salon-membership-page .salon-management-overview > a:hover { border-color: #ce9b9f; background: #fff2f3; }
.go-salon-membership-page .salon-management-overview strong { font-variant-numeric: tabular-nums; font-size: 32px; line-height: 1.3; }
.go-salon-membership-page .salon-management-nav { gap: 10px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid #eaded8; }
.go-salon-membership-page .salon-management-nav a { min-height: 44px; padding: 10px 18px; border-radius: 10px; }
.go-salon-membership-page .salon-management-details { padding: 0 18px; border-radius: 12px; margin-top: 12px; }
.go-salon-membership-page .salon-management-details > summary { padding: 17px 0; line-height: 1.5; }
.go-salon-membership-page .salon-management-details[open] { padding-bottom: 18px; }
.go-salon-membership-page .salon-management-details[open] > summary { margin-bottom: 14px; border-bottom: 1px solid #eaded8; }
.go-salon-membership-page .salon-management-block h2 { font-size: 18px; margin-bottom: 12px; }
.go-salon-membership-page .salon-paid-form { gap: 10px; }
.go-salon-membership-page .salon-paid-form > label { margin-top: 12px; font-weight: 600; }
.go-salon-membership-page .salon-paid-form > button { justify-self: start; min-height: 44px; padding: 10px 24px; }
.go-salon-membership-page :is(.salon-management-connection,.salon-management-publication) { margin-top: 24px; padding: 20px; border: 1px solid #eaded8; border-radius: 12px; background: #fcf9f7; }
.go-salon-membership-page .salon-management-connection h3:first-child,
.go-salon-membership-page .salon-management-publication h3:first-child { margin-top: 0; }
.go-salon-membership-page .salon-management-panel p { line-height: 1.85; }
.go-salon-membership-page :is(button,a,summary,input,textarea,select):focus-visible { outline: 3px solid #b9637a; outline-offset: 3px; }
html[data-site-theme="dark"] .go-salon-membership-page :is(.salon-management-overview > *, .salon-management-connection, .salon-management-publication) { background: #302b28; color: #f4e8df; border-color: #69564c; }
@media (max-width: 600px) {
  .go-salon-membership-page .salon-management-overview > * { padding: 14px; }
  .go-salon-membership-page :is(.salon-management-connection,.salon-management-publication) { padding: 14px; }
  .go-salon-membership-page .salon-management-panel button { min-height: 44px; white-space: normal; }
  .go-salon-membership-page .salon-management-meta { display: block; margin-top: 6px; }
}
.salon-paid-form .salon-paid-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.salon-paid-price { font-size: 28px; font-weight: 700; margin: 14px 0; }
.salon-paid-price small { font-size: 14px; font-weight: 400; }
.salon-paid-readiness { border-inline-start: 3px solid #bd8b36; padding: 10px 14px; font-size: 14px; line-height: 1.7; }
.salon-paid-contract { border: 1px solid #d8c5bc; border-radius: 10px; padding: 14px; }
.salon-profile-shell button:disabled { opacity: .55; cursor: not-allowed; }
html[data-site-theme="dark"] .salon-paid-form :is(input:not([type="checkbox"]),textarea) { background: var(--site-dark-raised, #302b28); color: var(--site-dark-text, #f4e8df); border-color: #69564c; }
@layer site-theme {
  html[data-site-theme="dark"] body .salon-membership-badge { background: #203c32 !important; color: #c2f0d4 !important; }
  html[data-site-theme="dark"] body.go-salon-profile-page .salon-management-status { background: #203c32 !important; color: #c2f0d4 !important; border-color: #48775f !important; }
  html[data-site-theme="dark"] body.go-salon-profile-page .salon-management-status:is([data-state="paused"],[data-state="setup"]) { background: #302b28 !important; color: #dfcabe !important; border-color: #69564c !important; }
  html[data-site-theme="dark"] body.go-salon-profile-page :is(.salon-management-draft,.salon-management-attention,.salon-management-status[data-state="attention"]) { background: #3e3321 !important; color: #f5db9f !important; border-color: #bd8b36 !important; }
  html[data-site-theme="dark"] body.go-salon-profile-page .salon-management-meta { color: #d5beb2 !important; }
  html[data-site-theme="dark"] body.go-salon-profile-page .salon-management-details { border-color: #69564c !important; }
  html[data-site-theme="dark"] body .salon-management-overview > a { background: #302b28 !important; color: #f4e8df !important; border-color: #69564c !important; }
  html[data-site-theme="dark"] body .salon-management-overview > a:hover { background: #40342e !important; }
  html[data-site-theme="dark"] body .salon-management-ending h2 { color: #efb5a9 !important; }
}
@media (max-width: 760px) {
  .salon-profile-shell { padding: 16px 12px; }
  .salon-profile-hero, .salon-profile-columns { grid-template-columns: minmax(0, 1fr); }
  .salon-profile-hero, .salon-profile-section { padding: 18px; }
  .salon-profile-columns { gap: 0; }
  .salon-profile-shell select { max-width: 100%; font-size: 16px; }
  .salon-profile-section dl > div { grid-template-columns: 90px minmax(0, 1fr); }
  .salon-management-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .salon-management-overview .salon-management-plan { grid-column: 1 / -1; }
  .salon-management-nav > a { flex: 1 1 150px; justify-content: center; }
  .salon-management-heading { margin: 20px 0; }
}
.go-salon-card-body h3 { margin: 0; overflow-wrap: anywhere; font: 600 16px/1.5 "Noto Sans JP", sans-serif; }
.go-salon-card-host { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #76625b; font-size: 13px; overflow-wrap: anywhere; }
.go-salon-card-access { margin: 3px 0 0; color: #76625b; font-size: 12px; }
.go-salon-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; overflow: hidden; border: 2px solid #e99ca9; border-radius: 50%; color: #683128; font-size: 12px; font-weight: 700; background: radial-gradient(circle at 50% 28%, #fff 0 18%, #f4cfb6 19% 42%, #7b4131 43% 47%, #f7dfcd 48%); }
.go-salon-avatar img { width: 122%; height: 122%; object-fit: contain; transform: translateY(5%); }
.go-salon-card-host em { margin-left: auto; padding: 5px 9px; border: 1px solid #bddfc9; border-radius: 6px; color: #137043; font-style: normal; font-size: 11px; background: #f1faf4; }
.go-salon-card-host em[data-access="circle"] { color: var(--salon-red); border-color: #f3c5cd; background: #fff7f8; }
.go-salon-card-host em[data-access="approval"] { color: #9a5b12; border-color: #ebcf9d; background: #fff8e9; }
.go-salon-card-host em[data-access="event"] { color: #8a5512; border-color: #e7c783; background: #fff8e5; }
.go-salon-card-host em[data-access="friends"] { color: #1d6488; border-color: #bcd9e7; background: #f0f9fd; }
.go-salon-card-host em[data-access="invite"] { color: #6b4e9f; border-color: #d5c8ea; background: #f8f4ff; }
.go-salon-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 44px; margin: 4px 0 0; }
.go-salon-card-status { display: inline-flex; align-items: center; gap: 8px; color: #76625b; font-size: 12px; }
.go-salon-card-open { color: #237347; font-weight: 600; }
.go-salon-card-meta > .go-salon-enter-button { width: auto; min-height: 44px; margin: 0; padding: 8px 16px; border: 1px solid #d6c7c0; border-radius: 22px; color: #79584c; background: transparent; box-shadow: none; font: 600 13px/1.5 "Noto Sans JP", sans-serif; cursor: pointer; }
.go-salon-card-meta > .go-salon-enter-button:hover { color: #fff; border-color: #79584c; background: #79584c; }
.go-salon-card-meta > .go-salon-enter-button:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
.go-salon-card-meta > .go-salon-hours { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.go-salon-card-meta dl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; line-height: 22px; }
.go-salon-card-meta dl div { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.go-salon-card-meta dt { color: #786d69; font-size: 11px; }
.go-salon-card-meta dd { margin: 0; color: #5b4a45; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.go-salon-hours,
.go-salon-friend-note { min-height: 22px; margin: 3px 3px 10px; color: #5b4a45; font-size: 13px; }
.go-salon-friend-note { color: var(--salon-green); font-weight: 600; }
@layer site-theme {
  html[data-site-theme="dark"] body #goSalonDirectory :is(.go-salon-directory-hero, .go-salon-card, .go-salon-card-body, .go-salon-directory-tools, .go-salon-directory-search, .go-salon-filters) { background: transparent !important; box-shadow: none; }
  html[data-site-theme="dark"] body #goSalonDirectory .go-salon-card-open { color: #9ad9b3 !important; }
  html[data-site-theme="dark"] body #goSalonDirectory :is(.go-salon-card-host, .go-salon-card-status) { color: #bdc6d1 !important; }
  html[data-site-theme="dark"] body #goSalonDirectoryNav nav button:not(.active):not(:hover) { background: transparent !important; }
  html[data-site-theme="dark"] body #goSalonDirectory .go-salon-card-heading > .go-salon-card-favorite { background: transparent !important; }
  html[data-site-theme="dark"] body #goSalonDirectory .go-salon-card-favorite[aria-pressed="true"] { color: #ffa8bf !important; }
  html[data-site-theme="dark"] body #goSalonDirectory .go-salon-filters button.active { background: #e6c9b9 !important; color: #302720 !important; }
}
.go-salon-empty { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed #e4d4d0; border-radius: 18px; text-align: center; background: rgba(255,255,255,.72); }

.go-salon-upcoming { margin-top: 22px; padding: 20px 24px; border: 1px solid #eee1dc; border-radius: 17px; background: rgba(255,255,255,.96); }
.go-salon-upcoming h3 { margin: 0 0 8px; font: 700 21px/1.5 "Noto Serif JP", serif; }
.go-salon-upcoming-note { margin: 0 0 12px; color: #79635d; font-size: 12px; line-height: 1.7; }
.go-salon-upcoming-guide { margin-bottom: 10px; color: #79635d; font-size: 12px; }
.go-salon-upcoming-guide summary { min-height: 44px; align-content: center; cursor: pointer; }
.go-salon-upcoming-list { list-style: none; margin: 0; padding: 0; }
.go-salon-upcoming-item { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #f0e7e4; }
.go-salon-upcoming-time { display: grid; gap: 5px; font-size: 13px; }
.go-salon-upcoming-time time { color: #a12642; font-weight: 700; }
.go-salon-upcoming-time > span { color: #79635d; font-size: 12px; }
.go-salon-upcoming-summary { min-width: 0; display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.go-salon-upcoming-summary > div { min-width: 0; }
.go-salon-upcoming-summary .go-salon-event-cover { width: 96px; height: 54px; flex-shrink: 0; object-fit: cover; border-radius: 7px; }
.go-salon-guide > .go-salon-event-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 16px; }
.go-salon-event-editor { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; }
.go-salon-event-editor form { min-width: 0; padding: 26px; }
.go-salon-event-editor label { display: grid; gap: 6px; margin: 14px 0; font-size: 14px; }
.go-salon-event-editor label[hidden] { display: none; }
.go-salon-one-hour-dialog .go-salon-event-thumbnail .salon-thumbnail-card { max-width: 320px; margin-bottom: 12px; }
.go-salon-event-editor input:not([type="range"]), .go-salon-event-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; border: 1px solid #dec9c3; border-radius: 8px; font: inherit; color: #50342e; background: #fff; }
.go-salon-event-editor textarea { resize: vertical; }
.go-salon-event-editor-help, .go-salon-event-editor-status { color: #79635d; font-size: 13px; line-height: 1.7; }
.go-salon-event-editor-status { color: #a12642; }
.go-salon-event-thumbnail { min-width: 0; margin: 18px 0; padding: 14px; border: 1px solid #eadbd6; border-radius: 10px; }
.go-salon-event-thumbnail small { display: block; margin-top: 10px; color: #79635d; line-height: 1.6; }
.go-salon-event-thumbnail button, [data-edit-owned-event] { padding: 10px 14px; border: 1px solid #edb6c0; border-radius: 8px; color: #a12642; background: #fff8f9; cursor: pointer; }
.go-salon-upcoming-summary h4 { margin: 0 0 4px; font-size: 16px; line-height: 1.5; }
.go-salon-upcoming-summary p { margin: 0; color: #79635d; font-size: 12px; line-height: 1.7; }
.go-salon-upcoming-actions { display: grid; gap: 8px; }
.go-salon-upcoming-actions > button, [data-start-reserved-event] { min-height: 44px; padding: 8px 14px; border: 1px solid #edb6c0; border-radius: 8px; color: #a12642; background: #fff8f9; font-size: 13px; cursor: pointer; }
.go-salon-upcoming-actions > button:hover:not(:disabled), [data-start-reserved-event]:hover:not(:disabled) { color: #fff; background: #a12642; }
.go-salon-upcoming-actions > button:focus-visible, [data-start-reserved-event]:focus-visible { outline: 2px solid var(--salon-red); outline-offset: 2px; }
[data-reservation-entry-button]:disabled { cursor: not-allowed; color: #746660; border-color: #e5dad6; background: #f5f0ed; box-shadow: none; }
.go-salon-guide [data-upcoming-editor] { display: flex; flex-wrap: wrap; gap: 10px; }
.go-salon-guide [data-upcoming-editor][hidden] { display: none; }
.go-salon-upcoming-open { margin-top: 24px; }
.go-salon-upcoming-open h3 { margin: 0 0 8px; font: 700 21px/1.5 "Noto Serif JP", serif; }
.go-salon-upcoming-empty { margin: 0; padding: 18px 0; color: #79635d; font-size: 14px; }
@media (max-width: 900px) {
  .go-salon-upcoming { padding: 18px 16px; }
  .go-salon-upcoming-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .go-salon-upcoming-time { grid-column: 1; grid-row: 1; }
  .go-salon-upcoming-actions { grid-column: 2; grid-row: 1; max-width: 170px; }
  .go-salon-upcoming-summary { grid-column: 1 / -1; grid-row: 2; }
  .go-salon-event-editor form { padding: 22px 16px; }
}

.go-salon-schedule { margin-top: 14px; padding: 17px 26px 10px; border: 1px solid #eee5e2; border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 8px 25px rgba(74,39,31,.05); }
.go-salon-schedule h3 { margin: 0 0 8px; font: 600 17px/1.4 "Noto Serif JP", serif; }
.go-salon-schedule h3 span { margin-right: 10px; font-size: 22px; }
.go-salon-schedule #goSalonScheduleList > div { display: grid; grid-template-columns: 80px minmax(140px, 220px) 1fr 110px; align-items: center; min-height: 48px; border-top: 1px solid #f0e7e4; }
.go-salon-schedule time { color: var(--salon-red); font-size: 16px; }
.go-salon-schedule span { color: #796d69; font-size: 13px; }
.go-salon-schedule button { padding: 7px 12px; border: 1px solid #f2a4b2; border-radius: 7px; color: var(--salon-red); background: #fff; cursor: pointer; }

.go-salon-room {
  --salon-game-wood: #2a170d;
  --salon-game-wood-light: #58351e;
  --salon-game-gold: #bd8745;
  --salon-game-paper: #ecd09b;
  display: grid; grid-template-columns: 294px minmax(600px, 1fr) 325px; grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - var(--salon-header-space)); min-height: 0; overflow: hidden;
  background: rgba(255,253,251,.72);
}
.go-salon-room-nav { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / 3; min-height: 0; padding: 24px 18px; overflow-y: auto; }
.go-salon-back { margin: 0 0 18px; padding: 8px 12px; border: 0; color: #8d6b62; background: transparent; cursor: pointer; }
.go-salon-room-nav > p { margin: 0 12px 8px; color: #7b6e6a; font-size: 13px; }
.go-salon-room-nav > h2 { margin: 0 12px 6px; font: 700 23px/1.3 "Noto Serif JP", serif; }
.go-salon-room-nav > small { display: block; margin: 0 12px 15px; color: #7e706c; line-height: 1.6; }
.go-salon-room-nav .go-salon-description-toggle { align-self: flex-start; margin: -12px 12px 8px; padding: 6px 0; min-height: 32px; border: 0; background: transparent; color: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.go-salon-description-toggle[hidden] { display: none !important; }
.go-salon-room-status { display: flex; align-items: center; gap: 14px; margin: 0 12px 20px; }
.go-salon-room-status span,
.go-salon-open-badge { padding: 6px 10px; border: 1px solid #a9d4b8; border-radius: 7px; color: #187042; font-size: 12px; background: #eff9f2; }
.go-salon-room-status strong { font-size: 13px; font-weight: 600; }
.go-salon-host { display: flex; align-items: center; gap: 10px; margin: 0 8px 26px; padding: 12px 5px; border-bottom: 1px solid #eee0dc; }
.go-salon-host div { display: grid; gap: 2px; }
.go-salon-host small { color: #7a6d68; font-size: 11px; }
.go-salon-room-nav nav { margin-top: 2px; }
.go-salon-room-nav nav button { min-height: 48px; }
.go-salon-room-nav nav .go-salon-admission-nav { position: relative; }
.go-salon-admission-nav em { display: inline-grid; min-width: 22px; height: 22px; place-items: center; margin-left: auto; border-radius: 999px; color: #fff; font-size: 11px; font-style: normal; background: var(--salon-red); }
.go-salon-leave { position: static; flex: 0 0 auto; width: calc(100% - 20px); min-height: 50px; margin: auto 10px 0; border: 1px solid #f291a3; border-radius: 10px; color: var(--salon-red); background: #fff8f9; cursor: pointer; }

.go-salon-room-main {
  grid-column: 2; grid-row: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0; min-height: 0; padding: 0 14px 18px 18px; overflow: hidden;
}
.go-salon-floor-nav { display:flex; align-items:center; gap:6px; min-width:0; padding:0 0 8px; flex-wrap:wrap; }
.go-salon-floor-nav button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:5px 12px; border:1px solid #decfc7; border-radius:9px; background:#fffaf6; color:#604734; cursor:pointer; font:inherit; font-size:12px; }
.go-salon-floor-nav button[aria-pressed="true"] { background:#593823; color:#fff0dc; border-color:#704b31; box-shadow:inset 0 -2px 0 #c99b63; }
.go-salon-floor-nav button:focus-visible { outline:2px solid #b45a74; outline-offset:2px; }
.go-salon-floor-nav button:disabled { opacity:.5; cursor:not-allowed; }
.go-salon-floor-nav small { font-size:10px; white-space:nowrap; }
.go-salon-floor-caption,.go-salon-floor-hint { color:#816b5b; font-size:11px; }
.go-salon-floor-hint { margin-left:auto; }
.go-salon-room-nav .go-salon-floor-sidebar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:8px 0 14px; padding:0 0 14px; border-bottom:1px solid #eee2da; }
.go-salon-floor-sidebar .go-salon-floor-caption { grid-column:1; }
.go-salon-floor-sidebar .go-salon-floor-hint { grid-column:2 / 4; justify-self:end; }
.go-salon-room-nav .go-salon-floor-sidebar button { flex-direction:column; gap:3px; min-width:0; min-height:48px; margin:0; padding:5px 2px; }
.go-salon-floor-picker { width:min(420px,calc(100% - 32px)); box-sizing:border-box; padding:24px; border:1px solid #decfc7; border-radius:16px; background:#fffaf6; color:#604734; }
.go-salon-floor-picker::backdrop { background:rgba(24,17,12,.5); }
.go-salon-floor-picker h2 { margin-top:0; font-size:20px; }
.go-salon-floor-picker p { font-size:13px; line-height:1.7; }
.go-salon-floor-picker form { margin-top:12px; text-align:right; }
@media(max-width:700px) {
  .go-salon-floor-nav { padding:6px 4px; gap:5px; }
  .go-salon-floor-nav button { flex:1 0 auto; padding:4px 8px; }
}
.go-salon-room-head {
  grid-column: 2 / 4; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; margin: 0 0 14px; padding: 10px 18px;
  border-bottom: 1px solid var(--salon-line); background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(61,31,25,.04);
}
.go-salon-room-head > div { display: flex; align-items: center; gap: 17px; }
.go-salon-room-head h1 { margin: 0; font: 700 clamp(23px, 2.5vw, 32px)/1.2 "Noto Serif JP", serif; }
.go-salon-room-head strong { font-size: 13px; }
.go-salon-room-head button { padding: 9px 15px; border: 1px solid #e5d5d1; border-radius: 9px; background: rgba(255,255,255,.82); cursor: pointer; }
.go-salon-room-head button[data-active="true"] { color: #d79219; border-color: #eccd86; background: #fffaf0; }
.go-salon-room-head #goSalonInviteCopy { color: #6b4e9f; border-color: #d5c8ea; background: #faf7ff; }
.go-salon-room-head .go-salon-avatar-button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding-block: 4px; }
.go-salon-avatar-button img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(65,33,25,.18)); }
.go-salon-room-head .go-salon-voice-toggle { display: inline-flex; min-height: 42px; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.go-salon-voice-toggle b { font-weight: 700; }
.go-salon-voice-toggle small { min-width: 26px; padding: 2px 6px; border-radius: 999px; color: #665b57; font-size: 10px; background: #f2ecea; }
.go-salon-voice-toggle small:empty { display: none; }
.go-salon-room-head .go-salon-voice-toggle[data-state="on"] { color: #147041; border-color: #8ac5a1; background: #eff9f2; box-shadow: 0 0 0 3px rgba(38,144,82,.08); }
.go-salon-room-head .go-salon-voice-toggle[data-state="connecting"] { color: #9a6912; border-color: #e6c982; background: #fff9e9; cursor: wait; }
.go-salon-room-head .go-salon-voice-toggle[data-state="error"] { color: #b62f48; border-color: #eea6b4; background: #fff4f6; }
.go-salon-voice-controls { display: inline-flex; align-items: center; gap: 7px; }
.go-salon-microphone-picker { display: grid; grid-template-columns: auto minmax(92px, 150px); align-items: center; gap: 5px; min-height: 42px; padding: 4px 8px; border: 1px solid #e5d5d1; border-radius: 9px; background: rgba(255,255,255,.82); }
.go-salon-microphone-picker span { color: #77645e; font-size: 10px; font-weight: 700; }
.go-salon-microphone-picker select { min-width: 0; max-width: 150px; padding: 5px 22px 5px 7px; border: 1px solid #dfd2ce; border-radius: 6px; color: #4a3833; font: 600 11px/1.3 "Noto Sans JP", sans-serif; background: #fff; }
.go-salon-microphone-picker select:focus-visible { outline: 2px solid rgba(205,54,83,.32); outline-offset: 1px; }
.go-salon-voice-diagnostics { position: relative; }
.go-salon-voice-diagnostics > summary { min-height: 42px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5d5d1; border-radius: 9px; color: #65524d; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.82); cursor: pointer; list-style: none; white-space: nowrap; }
.go-salon-voice-diagnostics > summary::-webkit-details-marker { display: none; }
.go-salon-voice-diagnostics[open] > summary { color: #8e3548; border-color: #dba0ad; background: #fff5f7; }
.go-salon-voice-diagnostics-panel { position: absolute; z-index: 120; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 28px)); box-sizing: border-box; padding: 14px; border: 1px solid #dbc6c0; border-radius: 12px; color: #4a3833; background: rgba(255,252,250,.98); box-shadow: 0 16px 40px rgba(59,31,25,.2); }
.go-salon-voice-diagnostics-panel > strong { display: block; margin-bottom: 10px; color: #5a332b; font-size: 13px; }
.go-salon-voice-diagnostics-panel dl { display: grid; gap: 5px; margin: 0 0 11px; }
.go-salon-voice-diagnostics-panel dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 9px; padding-bottom: 4px; border-bottom: 1px dashed #eadeda; }
.go-salon-voice-diagnostics-panel dt { color: #846f69; font-size: 11px; font-weight: 600; }
.go-salon-voice-diagnostics-panel dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; text-align: right; }
.go-salon-voice-diagnostics-panel > label { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; font-size: 11px; font-weight: 600; line-height: 1.45; cursor: pointer; }
.go-salon-voice-diagnostics-panel input { margin-top: 2px; accent-color: #c93251; }
.go-salon-voice-diagnostics-panel > small { display: block; min-height: 1.4em; margin-top: 5px; color: #b43349; font-size: 10px; line-height: 1.45; }
.go-salon-room-head .go-salon-review-sync { display: none; padding: 5px 9px; border: 1px solid #b8d9c4; border-radius: 999px; color: #247047; background: #f1faf4; white-space: nowrap; }
.go-salon-room.go-salon-review-active .go-salon-room-head .go-salon-review-sync { display: inline-flex; }
.go-salon-review-turn { display: none; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; color: #e8c991; background: transparent; white-space: nowrap; }
.go-salon-room.go-salon-review-active .go-salon-review-turn { display: inline-flex; }
.go-salon-review-turn b { font-size: 11px; }
.go-salon-review-turn button { min-width: 36px; min-height: 44px; padding: 6px 8px; border: 1px solid #79502d; border-radius: 8px; color: #e8c991; font-size: 12px; font-weight: 700; background: linear-gradient(#452918, #2a170e); box-shadow: inset 0 1px rgba(255,255,255,.06); cursor: pointer; }
.go-salon-review-turn button:hover, .go-salon-review-turn button.active { color: #fff2d4; border-color: #dc9c52; background: linear-gradient(#694021, #3a2112); box-shadow: 0 0 0 2px rgba(232,154,76,.13), inset 0 1px rgba(255,255,255,.1); }
.go-salon-review-turn small { padding: 0 4px 0 2px; color: #c8ad85; font-size: 9px; }

@media (max-width: 1600px) {
  .go-salon-room.go-salon-review-active .go-salon-room-head > div:first-child > .go-salon-open-badge,
  .go-salon-room.go-salon-review-active .go-salon-room-head > div:first-child > #goSalonRoomPeople { display: none; }
  .go-salon-room.go-salon-review-active .go-salon-review-turn small { display: none; }
  .go-salon-room.go-salon-review-active .go-salon-room-head > div:first-child { gap: 10px; }
}

.go-salon-game-stage {
  position: relative; display: grid; min-height: 0; padding: 10px; overflow: hidden; container-type: size; border: 1px solid #26150c; border-radius: 15px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 18%, rgba(0,0,0,.13) 52%, rgba(255,255,255,.035)),
    repeating-linear-gradient(0deg, #3d2414 0 6px, #321c10 7px 13px);
  box-shadow: inset 0 0 0 2px #704522, inset 0 0 0 4px #1d100a, 0 16px 34px rgba(45,22,12,.2);
}

.go-salon-room-scene {
  position: relative; grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  border: 1px solid #a87439; border-radius: 7px; background: url("/assets/go-salon-room-empty-v2.png") center / cover no-repeat #5f3f25;
  box-shadow: inset 0 0 0 1px rgba(255,224,163,.18), 0 10px 28px rgba(20,9,4,.32);
}
.go-salon-room-scene:is([data-scene="conversation-lobby"], [data-scene="match-hall"]) {
  width: min(100cqw, 177.6833cqh); height: min(100cqh, 56.2799cqw); aspect-ratio: 1672 / 941;
  align-self: center; justify-self: center;
  --lobby-table-size: 68% auto;
  --lobby-avatar-width: 21.6%;
}
.go-salon-room-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -90px 100px rgba(30,16,8,.12); }
.go-salon-room-scene[data-scene="conversation-lobby"]::before {
  content: ""; position: absolute; z-index: 35; inset: 0; pointer-events: none;
  filter: var(--go-salon-table-light, none);
  background-image: var(--go-salon-foreground-image, none); background-position: center bottom; background-size: var(--lobby-table-size); background-repeat: no-repeat;
}
.go-salon-room-scene[data-scene="match-hall"]::before {
  content: ""; position: absolute; z-index: 40; inset: 0; pointer-events: none;
  background-image: var(--go-salon-foreground-image, none); background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot {
  z-index: 50; display: inline-flex; min-width: 58px; min-height: 24px; padding: 2px 7px; align-items: center; justify-content: center; gap: 4px;
  border-width: 1px; border-radius: 6px; font-size: 10px; background: rgba(48,29,17,.88); box-shadow: 0 2px 5px rgba(0,0,0,.34); backdrop-filter: blur(2px);
}
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot span,
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot strong { display: inline-flex; align-items: center; margin: 0; }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot strong { font-size: 8px; font-weight: 600; opacity: .88; }
@media (min-width: 981px) {
  .go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot {
    min-width: 104px; min-height: 52px; padding: 8px 14px;
    flex-direction: column; gap: 3px; font-size: 14px; border-radius: 9px;
  }
  .go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot strong { font-size: 12px; }
}
.go-salon-room-scene[data-scene="conversation-lobby"]::after { z-index: 70; }
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-hotspot { display: none; }
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-live-occupants { z-index: auto; }
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-scene-note {
  left: 50%; top: 16px; bottom: auto; width: min(680px, calc(100% - 32px)); transform: translateX(-50%);
}
.go-salon-room-scene[data-scene="match-hall"] .go-salon-scene-note {
  left: 50%; top: 14px; bottom: auto; width: min(680px, calc(100% - 32px)); transform: translateX(-50%);
}
.go-salon-page .go-salon-hotspot {
  position: absolute; z-index: 4; min-width: 74px; min-height: 46px; padding: 6px 10px; border: 2px solid rgba(255,183,45,.95); border-radius: 11px;
  color: #fff; font-size: 12px; font-weight: 700; background: rgba(78,46,20,.72); box-shadow: 0 0 0 5px rgba(255,181,46,.16), 0 0 22px rgba(255,170,28,.6); cursor: pointer;
  transition: none !important; animation: none !important;
}
.go-salon-hotspot span,
.go-salon-hotspot strong { display: block; line-height: 1.25; white-space: nowrap; }
.go-salon-hotspot strong { margin-top: 2px; font-size: 10px; }
.go-salon-hotspot[data-tone="green"] { border-color: #67d89a; box-shadow: 0 0 0 5px rgba(65,196,123,.16), 0 0 22px rgba(46,197,112,.52); }
.go-salon-hotspot[data-tone="orange"] { border-color: #ffc35e; }
.go-salon-hotspot.selected { color: #4a2914; background: #fff4ce; }
.go-salon-hotspot.table-1 { left: 30%; top: 40%; transform: translateX(-50%); }
.go-salon-hotspot.table-2 { left: 70%; top: 40%; transform: translateX(-50%); }
.go-salon-hotspot.table-3 { left: 50%; top: 53%; transform: translateX(-50%); }
.go-salon-hotspot.table-4 { left: 24%; top: 67%; transform: translateX(-50%); }
.go-salon-hotspot.table-5 { left: 76%; top: 67%; transform: translateX(-50%); }
.go-salon-hotspot.table-1.selected,
.go-salon-hotspot.table-2.selected,
.go-salon-hotspot.table-3.selected,
.go-salon-hotspot.table-4.selected,
.go-salon-hotspot.table-5.selected { transform: translateX(-50%); }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot.table-1 { left: 30%; top: 48.5%; }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot.table-2 { left: 70%; top: 48.5%; }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot.table-3 { left: 50%; top: 61.5%; }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot.table-4 { left: 24%; top: 79.5%; }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-hotspot.table-5 { left: 76%; top: 79.5%; }
.go-salon-live-occupants { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.go-salon-room-scene[data-crystal="true"]::before { display: none; }
.go-salon-crystal-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.go-salon-room-scene .go-salon-crystal-person { transform: none; display: block; }
.go-salon-crystal-person > img { display: block; }
.go-salon-live-person {
  position: absolute; z-index: var(--person-z); left: var(--person-x); top: var(--person-y); display: grid; width: clamp(58px, 7vw, 94px); justify-items: center; transform: translate(-50%, -68%) scale(var(--person-scale)); transform-origin: center bottom; isolation: isolate;
  color: #fff; font-size: 11px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.95); white-space: nowrap;
}
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-live-person { width: var(--lobby-avatar-width); }
.go-salon-room-scene[data-scene="match-hall"] .go-salon-live-person { width: 12%; }
.go-salon-live-person::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 16%; width: 78%; height: 58%; transform: translateX(-50%); pointer-events: none; opacity: 0;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(191,255,219,.6) 0 28%, rgba(98,246,170,.28) 52%, rgba(70,218,148,0) 74%); filter: blur(5px); transition: opacity 120ms ease-out;
}
.go-salon-live-person > img { position: relative; z-index: 1; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(21,10,5,.48)); transition: filter 120ms ease-out; }
.go-salon-live-person[data-speaking="true"]::before { opacity: 1; }
.go-salon-live-person[data-speaking="true"] > img { filter: drop-shadow(0 4px 5px rgba(21,10,5,.48)) drop-shadow(0 0 5px rgba(207,255,225,.98)) drop-shadow(0 0 13px rgba(76,235,151,.92)); }
.go-salon-live-person[data-mirror="true"] > img { transform: scaleX(-1); }
.go-salon-live-person[data-connected="false"] > img { opacity: .62; filter: grayscale(.38) saturate(.62) drop-shadow(0 4px 5px rgba(21,10,5,.38)); }
.go-salon-live-person i {
  position: relative; z-index: 1; display: grid; width: clamp(34px, 4.2vw, 48px); height: clamp(34px, 4.2vw, 48px); place-items: center; border: 3px solid #7cc6ff; border-radius: 50%;
  color: #3b2b27; font-style: normal; font-size: clamp(15px, 1.7vw, 20px); font-weight: 800; text-shadow: none; background: #fff7ef; box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.go-salon-live-person.avatar-1 i { border-color: #ff9bb0; }
.go-salon-live-person.avatar-2 i { border-color: #8ad6a7; }
.go-salon-live-person.avatar-3 i { border-color: #bd95ff; }
.go-salon-live-person[data-speaking="true"] i { border-color: #76efad; box-shadow: 0 0 0 4px rgba(129,255,185,.25), 0 0 16px rgba(73,234,145,.9); }
.go-salon-live-person strong {
  position: absolute; z-index: 3; left: 50%; top: var(--person-head-top, 0%); max-width: min(112px, 150%); padding: 3px 8px; overflow: hidden;
  border: 1px solid rgba(255,235,191,.58); border-radius: 999px; text-overflow: ellipsis; transform: translate(-50%, -100%);
  background: rgba(39,20,10,.82); backdrop-filter: blur(3px); box-shadow: 0 2px 7px rgba(0,0,0,.3); pointer-events: auto;
}
.go-salon-away-label { position: relative; z-index: 1; margin-top: 2px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; background: rgba(74,70,70,.86); text-shadow: none; }
.go-salon-avatar.is-away { opacity: .56; filter: grayscale(.45) saturate(.65); }
.go-salon-full-name-preview { position: fixed; z-index: 100000; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 8px 12px; border: 1px solid #dfbc83; border-radius: 8px; background: #27140a; color: #fff; font: 600 14px/1.5 sans-serif; white-space: normal; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 3px 12px #0005; }
.go-salon-full-name-preview[hidden] { display: none; }
.go-salon-scene-note {
  position: absolute; z-index: 70; left: 16px; bottom: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  max-width: calc(100% - 32px); padding: 10px 12px 10px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px;
  color: #fff; background: rgba(36,24,17,.86); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.go-salon-scene-note span { color: #e9dcd3; font-size: 12px; }
.go-salon-scene-note button { padding: 8px 13px; border: 0; border-radius: 7px; color: #fff; font-weight: 700; background: #e94b64; cursor: pointer; }

.go-salon-review-workspace {
  grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 10px; overflow: hidden; color: var(--salon-game-paper);
  border: 1px solid #8f5c2e; border-radius: 7px; background:
    linear-gradient(rgba(22,11,7,.08), rgba(22,11,7,.18)),
    url("/assets/go-salon-review-room-bg-v1.png") center / cover no-repeat #2b190f;
  box-shadow: inset 0 0 34px rgba(0,0,0,.62);
}
.go-salon-game-stage > [hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.go-salon-game-stage > .go-salon-review-workspace[hidden] { display: grid !important; }
.go-salon-game-stage > .go-salon-match-workspace[hidden] { display: grid !important; }
.go-salon-review-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.go-salon-review-sync i { width: 10px; height: 10px; border-radius: 50%; background: #28b46a; box-shadow: 0 0 0 4px rgba(40,180,106,.12); }
.go-salon-review-sync[data-tone="pending"] { color: #f0c477; }
.go-salon-review-sync[data-tone="pending"] i { background: #e6a33e; }
.go-salon-review-sync[data-tone="error"] { color: #ff9ba9; }
.go-salon-review-sync[data-tone="error"] i { background: #ed526a; }
.go-salon-review-board-slot { container-type: size; display: grid; min-width: 0; min-height: 0; place-items: center; }
.go-salon-review-board-shell {
  width: min(100cqw, 100cqh); min-width: 0; aspect-ratio: 1; margin: 0 auto; padding: 8px;
  border: 1px solid #b98547; border-radius: 9px; background: #7c4a22;
  box-shadow: inset 0 0 0 2px #3e210f, 0 8px 25px rgba(0,0,0,.42);
}
.go-salon-review-board-shell canvas { display: block; width: 100%; height: 100%; border-radius: 3px; touch-action: manipulation; cursor: crosshair; }
.go-salon-match-workspace {
  grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; padding: 6px;
  overflow: hidden; color: #f0d6a7; border: 1px solid #8f5c2e; border-radius: 7px;
  background: radial-gradient(circle at 50% 12%, rgba(126,75,34,.35), transparent 45%), linear-gradient(145deg, #2c190f, #170c08);
  box-shadow: inset 0 0 34px rgba(0,0,0,.62);
}
.go-salon-match-game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.go-salon-match-game-head > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.go-salon-match-game-head span { color: #d89c52; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.go-salon-match-game-head h2 { margin: 0; overflow: hidden; color: #fff0d2; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.go-salon-match-game-head > strong { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #79502d; border-radius: 999px; color: #b9e4bf; font-size: 11px; background: rgba(20,12,8,.55); }
.go-salon-match-game-head > strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4cba6c; }
.go-salon-match-game-head > strong[data-state="waiting"] { color: #f0c477; }
.go-salon-match-game-head > strong[data-state="waiting"]::before,
.go-salon-match-game-head > strong[data-state="connecting"]::before { background: #e6a33e; }
.go-salon-match-game-head > strong[data-state="error"] { color: #ff9ba9; }
.go-salon-match-game-head > strong[data-state="error"]::before { background: #ed526a; }
.go-salon-match-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.go-salon-match-scoreboard article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 6px 9px; border: 1px solid #6c4324; border-radius: 9px; background: rgba(25,13,8,.72); }
.go-salon-match-scoreboard article[data-active="true"] { border-color: #e8b55f; box-shadow: 0 0 0 2px rgba(232,181,95,.13); }
.go-salon-match-scoreboard article > i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.go-salon-match-scoreboard article > i.black { background: radial-gradient(circle at 35% 30%, #6c706e, #070908 72%); }
.go-salon-match-scoreboard article > i.white { border: 1px solid #d4d2cb; background: radial-gradient(circle at 35% 30%, #fff, #d8d5cd 72%); }
.go-salon-match-scoreboard article > div { min-width: 0; }
.go-salon-match-scoreboard article small,
.go-salon-match-scoreboard article span { display: block; overflow: hidden; color: #c4a97c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.go-salon-match-scoreboard article strong { display: block; overflow: hidden; color: #fff0d2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.go-salon-match-scoreboard time { color: #fff4df; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.go-salon-match-scoreboard time[data-low="true"] { color: #ff8898; }
.go-salon-match-scoreboard > p { min-width: 92px; margin: 0; color: #f3c06d; font-size: 12px; font-weight: 800; text-align: center; }
.go-salon-match-game-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 230px); gap: 10px; min-width: 0; min-height: 0; }
.go-salon-match-game-side .go-salon-match-game-head { flex-wrap: wrap; gap: 6px; }
.go-salon-match-game-side .go-salon-match-game-head h2 { font-size: 16px; }
.go-salon-match-game-side .go-salon-match-scoreboard { grid-template-columns: minmax(0, 1fr); }
.go-salon-match-game-side .go-salon-match-scoreboard article { grid-template-columns: auto minmax(0, 1fr); }
.go-salon-match-game-side .go-salon-match-scoreboard time { grid-column: 1 / -1; text-align: right; font-size: 23px; }
.go-salon-match-board-slot { container-type: size; display: grid; min-width: 0; min-height: 0; place-items: center; }
.go-salon-match-board-shell { width: min(100cqw, 100cqh); min-width: 0; aspect-ratio: 1; padding: 7px; border: 1px solid #b98547; border-radius: 9px; background: #7c4a22; box-shadow: inset 0 0 0 2px #3e210f, 0 8px 25px rgba(0,0,0,.42); }
.go-salon-match-board-shell canvas { display: block; width: 100%; height: 100%; border-radius: 3px; touch-action: manipulation; cursor: crosshair; }
.go-salon-page :is(#goSalonReviewBoard, #goSalonMatchBoard) { background: var(--board-wood-bg); }
.go-salon-live-person .go-salon-activity-label { display: block; width: max-content; margin: 3px auto 0; padding: 2px 6px; border-radius: 6px; background: #713a21; color: #fff1cc; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* Fade only the avatar in the lobby; keep its name and activity readable. */
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-live-person:has(> .go-salon-activity-label) > img,
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-live-person:has(> .go-salon-activity-label) > i { opacity: .65; }
.go-salon-room-scene[data-scene="conversation-lobby"] .go-salon-live-person > .go-salon-activity-label {
  position: absolute; z-index: 4; top: var(--person-head-top, 0%); left: 50%;
  transform: translateX(-50%); margin: 3px 0 0; opacity: 1;
  border: 1px solid #e5b86f; background: #583416; color: #fff4da;
  box-shadow: 0 2px 5px #0005; pointer-events: none;
}
.go-salon-personal-analysis { width:min(1100px,calc(100vw - 24px)); max-height:90dvh; box-sizing:border-box; overflow:auto; padding:20px; border:1px solid #cbb89d; border-radius:14px; color:#44382c; background:#fffaf4; }
.go-salon-personal-analysis::backdrop { background:#0008; }
.go-salon-personal-analysis header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.go-salon-personal-analysis h2 { font-size:22px; margin:0; }.go-salon-personal-analysis h2 small { display:block; font-size:12px; font-weight:400; color:#716757; margin-top:6px; }
.salon-personal-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; }
.salon-personal-grid canvas { display:block; width:100%; height:auto; border-radius:6px; }
.salon-personal-navigation { display:flex; gap:8px; margin-top:10px; }.salon-personal-navigation input { flex:1; min-width:0; }
.go-salon-personal-analysis button { min-height:40px; padding:6px 12px; cursor:pointer; }
.go-salon-personal-analysis [data-candidates] { list-style:none; padding:0; counter-reset:candidate; }
.go-salon-personal-analysis li { counter-increment:candidate; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:8px 0; padding:12px; background:#fff; border:1px solid #e5dfd4; border-radius:10px; font-size:13px; }
.go-salon-personal-analysis li::before { content:''; width:12px; height:12px; background:var(--candidate-color,#18675a); border-radius:50%; }
.go-salon-personal-analysis li strong { font-size:18px; }.go-salon-personal-analysis li span { color:#625b50; }
.go-salon-personal-analysis [data-graph] { cursor:crosshair; border:1px solid #e4dace; box-sizing:border-box; }
.go-salon-personal-analysis [data-progress] { background:#edf3ee; color:#38614f; border-radius:8px; padding:10px 14px; font-size:13px; }
.go-salon-personal-analysis [data-evaluation] { padding:14px; background:#f0ece3; border-radius:10px; font-size:16px; line-height:1.7; }
.go-salon-personal-analysis [data-position] { text-align:center; font-variant-numeric:tabular-nums; font-size:14px; }
.go-salon-personal-analysis button { border:1px solid #d7cabb; border-radius:8px; background:#fff; color:#44382c; }.go-salon-personal-analysis button:disabled { opacity:.35; cursor:default; }
.go-salon-personal-analysis small,.go-salon-personal-analysis section>p { line-height:1.7; color:#756c60; font-size:12px; }
.salon-personal-navigation input { accent-color:#18675a; }.go-salon-personal-analysis [data-board] { box-shadow:0 4px 16px #4a341b22; }
@media(max-width:760px) {
  .salon-personal-grid { grid-template-columns:minmax(0,1fr); }
  .go-salon-personal-analysis { width:100%; max-width:100%; margin-inline:0; padding:6px 0; border-inline:0; border-radius:0; }
  .go-salon-personal-analysis header { align-items:flex-start; padding-inline:8px; }
  .go-salon-personal-analysis [data-progress], .go-salon-personal-analysis .salon-personal-navigation { margin-inline:8px; }
  .go-salon-personal-analysis .salon-personal-grid > section { min-width:0; }
  .go-salon-personal-analysis .salon-personal-grid > section:last-child { padding-inline:8px; }
  .go-salon-personal-analysis [data-board] { box-sizing:border-box; border-radius:0; }
}
.go-salon-postgame-commands { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.go-salon-postgame-commands button { min-width: 0; min-height: 44px; white-space: normal; }
.go-salon-postgame-commands button[aria-pressed="true"] { outline: 2px solid #edc071; outline-offset: -2px; }
.go-salon-postgame-edit summary { cursor: pointer; padding-block: 10px; }
.go-salon-postgame-edit small, #goSalonPostgameAnalysisStatus { font-size: 11px; line-height: 1.7; }
@media (max-width: 980px) { .go-salon-postgame-commands { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.go-salon-match-game-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px; overflow-y: auto; border: 1px solid #704522; border-radius: 10px; background: rgba(27,14,9,.82); }
.go-salon-match-info > summary { cursor:pointer; padding:10px 8px; color:#ead4ae; font-size:12px; font-weight:700; border:1px solid #6c4324; border-radius:7px; background:rgba(25,13,8,.72); }
.go-salon-match-info[open] > summary { margin-bottom:10px; }
.go-salon-match-game-side dl { display: grid; gap: 5px; margin: 0; }
.go-salon-match-game-side dl > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(213,166,96,.18); }
.go-salon-match-game-side dt { color: #c8ac7d; font-size: 11px; }
.go-salon-match-game-side dd { margin: 0; color: #f4dfba; font-size: 11px; font-weight: 700; text-align: right; }
.go-salon-match-side-scroll > p { margin: 0; padding: 9px; border-radius: 8px; color: #fff0d2; font-size: 12px; line-height: 1.65; background: rgba(92,53,27,.55); }
.go-salon-match-side-scroll > small { margin-top: auto; color: #b99d73; font-size: 10px; line-height: 1.55; }
.go-salon-match-game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.go-salon-match-game-side button,
.go-salon-match-game-side a { min-height: 38px; padding: 7px 9px; border: 1px solid #875a31; border-radius: 7px; color: #f0d6a7; font: inherit; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; background: linear-gradient(#51301c, #2c190f); cursor: pointer; }
.go-salon-match-game-side button:hover,
.go-salon-match-game-side a:hover { border-color: #d99a50; color: #fff6e4; }
.go-salon-match-game-side button:disabled { cursor: not-allowed; opacity: .45; }
.go-salon-match-game-side button.danger { color: #ffabb7; }
.go-salon-match-game-side button.primary { color: #fff; border-color: #d64d67; background: linear-gradient(#d95570, #9f3047); }
.go-salon-match-scoring,
.go-salon-match-result { display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(216,156,82,.35); border-radius: 8px; background: rgba(80,46,24,.42); }
.go-salon-match-scoring > strong,
.go-salon-match-result > strong { color: #f4d392; font-size: 12px; }
.go-salon-match-scoring > small { color: #c8ac7d; font-size: 10px; line-height: 1.5; }
.go-salon-match-scoring > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.go-salon-match-scoring button[aria-pressed="true"] { border-color: #ef91a4; color: #fff; background: #873b4b; }
.go-salon-match-result p { margin: 0; color: #fff0d2; font-size: 13px; }
.go-salon-postgame-tools { display: grid; gap: 8px; min-width: 0; }
.go-salon-postgame-tools #goSalonPersonalAnalysisOpen { background:linear-gradient(180deg,#416d78,#315662); color:#f3fbff; border:1px solid #7ea5ad; font-weight:700; box-shadow:0 2px 6px #0002; }
.go-salon-postgame-tools #goSalonPersonalAnalysisOpen:hover { background:#487b87; border-color:#b1d0d6; }
.go-salon-postgame-tools #goSalonPersonalAnalysisOpen:focus-visible { outline:2px solid #b1d0d6; outline-offset:2px; }
.go-salon-postgame-tools nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.go-salon-postgame-tools input[type="range"] { width: 100%; min-width: 0; margin: 4px 0; accent-color: #ed94ad; }
.go-salon-postgame-tools > span { color: #f4d392; font-size: 12px; line-height: 1.6; }
.go-salon-match-side-scroll { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; flex: 1; }
#goSalonMatchReturn { display: none; width: 100%; flex-shrink: 0; margin-top: auto; min-height: 48px; white-space: normal; line-height: 1.6; }
.go-salon-match-game-side:has(#goSalonMatchResult:not([hidden])) > #goSalonMatchReturn { display: block; }
@media (min-width: 981px) {
  .go-salon-page .go-salon-match-game-side { overflow: hidden; }
  .go-salon-match-side-scroll { overflow-y: auto; }
}
.go-salon-review-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; width: min(100%, max(690px, var(--go-salon-review-board-width, 690px))); margin: 9px auto 0; }
.go-salon-review-tools button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 6px; border: 1px solid #79502d; border-radius: 8px;
  color: #e8c991; font-weight: 700; background: linear-gradient(#452918, #2a170e); box-shadow: inset 0 1px rgba(255,255,255,.06); cursor: pointer;
}
.go-salon-review-tools button:hover,
.go-salon-review-tools button.active { color: #fff2d4; border-color: #dc9c52; background: linear-gradient(#694021, #3a2112); box-shadow: 0 0 0 2px rgba(232,154,76,.13), inset 0 1px rgba(255,255,255,.1); }
.go-salon-review-tools i { display: inline-block; width: 23px; height: 23px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.go-salon-review-tools i.black { background: radial-gradient(circle at 35% 28%, #777, #181a19 38%, #030404 82%); }
.go-salon-review-tools i.white { border: 1px solid #aaa398; background: radial-gradient(circle at 35% 28%, #fff, #f0ece2 52%, #bdb8ae); }
.go-salon-review-tools i.alternate { position: relative; width: 45px; height: 23px; border-radius: 0; background: transparent; box-shadow: none; }
.go-salon-review-tools i.alternate::before,
.go-salon-review-tools i.alternate::after { content: ""; position: absolute; top: 50%; width: 17px; height: 17px; border-radius: 50%; transform: translateY(-50%); transition: outline-color .16s ease, box-shadow .16s ease; }
.go-salon-review-tools i.alternate::before { left: 2px; background: radial-gradient(circle at 35% 28%, #777, #181a19 38%, #030404 82%); box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.go-salon-review-tools i.alternate::after { right: 2px; border: 1px solid #aaa398; background: radial-gradient(circle at 35% 28%, #fff, #f0ece2 52%, #bdb8ae); box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.go-salon-review-tools button[data-next-color="B"] i.alternate::before,
.go-salon-review-tools button[data-next-color="W"] i.alternate::after { outline: 2px solid #f1b15c; outline-offset: 2px; box-shadow: 0 0 0 1px rgba(40,22,12,.78), 0 0 8px rgba(241,177,92,.8); }
.go-salon-review-tools i.eraser { width: 24px; height: 16px; border-radius: 3px; transform: rotate(-35deg); background: linear-gradient(90deg, #f0bc9d 0 55%, #eee5d5 56%); }
.go-salon-review-tools .go-salon-review-analyze { flex-direction: column; gap: 1px; color: #fff0d1; border-color: #a76c38; background: linear-gradient(#734021, #3a1f11); }
.go-salon-review-tools .go-salon-review-visibility { flex-direction: column; gap: 1px; }
.go-salon-review-visibility span { font-weight: 800; }
.go-salon-review-visibility small { display: block; color: #cdb790; font-size: 9px; font-weight: 600; }
.go-salon-review-visibility:disabled { cursor: not-allowed; opacity: .5; }
.go-salon-review-analyze span { font-weight: 800; }
.go-salon-review-analyze small { display: block; max-width: 100%; overflow: hidden; color: #ebc88b; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.go-salon-review-analyze:disabled { cursor: not-allowed; opacity: .72; }
.go-salon-review-analyze[aria-busy="true"] { cursor: wait; }
.go-salon-review-analysis-policy { margin: 0; color: #ebc88b; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.go-salon-page .go-salon-evaluation-note { grid-column: 1 / -1; flex: 0 0 100%; margin: 4px 0; color: #ebc88b; font-size: 12px; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }

.go-salon-table-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 7px; margin-top: 10px; padding: 9px;
  overflow-x: auto; border: 1px solid #28160d; border-radius: 12px; background: linear-gradient(#4b2c18, #26150d);
  box-shadow: inset 0 0 0 2px #6c4324, 0 10px 22px rgba(40,20,10,.16);
}
.go-salon-table-tabs.has-postgame { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.go-salon-table-tabs button {
  min-height: 60px; padding: 6px 8px; border: 1px solid #81532d; border-radius: 8px; color: #edcf9b;
  background: linear-gradient(145deg, #57351f, #332014); box-shadow: inset 0 0 0 1px rgba(255,216,151,.08), 0 3px 8px rgba(0,0,0,.28); cursor: pointer;
  transition: none !important; animation: none !important;
}
.go-salon-table-tabs button span,
.go-salon-table-tabs button strong { display: block; white-space: nowrap; }
.go-salon-table-tabs button span { font-size: 13px; }
.go-salon-table-tabs button strong { margin-top: 3px; color: #c7b28f; font-size: 11px; }
.go-salon-table-tabs button strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #77b978; box-shadow: 0 0 6px rgba(119,185,120,.5); }
.go-salon-table-tabs button[data-tone="green"] strong { color: #b8f1c8; }
.go-salon-table-tabs button[data-tone="green"] strong::before { background: #35a864; }
.go-salon-table-tabs button[data-tone="orange"] strong { color: #ffe0a3; }
.go-salon-table-tabs button[data-tone="orange"] strong::before { background: #e39528; }
.go-salon-table-tabs button[data-tone="purple"] strong { color: #eee1ff; }
.go-salon-table-tabs button[data-tone="purple"] strong::before { background: #8156cd; }
.go-salon-table-tabs button.active { border-color: #f08ca0; color: #fff2e1; background: linear-gradient(145deg, #a84c59, #6f2e39); box-shadow: 0 0 0 2px rgba(240,140,160,.2), 0 0 16px rgba(235,88,116,.34), inset 0 0 0 1px #f5afbb; }
.go-salon-table-tabs button.is-your-turn {
  border-color: #ffd778;
  color: #fff5d6;
  background: linear-gradient(145deg, #785222, #422810);
  box-shadow: 0 0 12px rgba(255, 199, 84, .55), inset 0 0 14px rgba(255, 212, 117, .24);
}
.go-salon-table-tabs button.is-your-turn.active {
  background: linear-gradient(145deg, #a84c59, #6f2e39);
  box-shadow: 0 0 14px rgba(255, 199, 84, .65), inset 0 0 0 2px #ffdc88;
}
.go-salon-table-tabs button.is-your-turn strong { color: #ffe59b; }
.go-salon-table-tabs button.is-your-turn strong::before { background: #ffe59b; box-shadow: 0 0 8px #ffd15a; }

.go-salon-chat {
  grid-column: 3; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0 18px 18px 0; overflow: hidden; border: 1px solid #2a170d; border-radius: 14px;
  max-height: min(680px, calc(100dvh - 110px));
  color: #ead0a0; background:
    radial-gradient(circle at 50% 20%, rgba(106,62,28,.22), transparent 52%),
    linear-gradient(145deg, #2d1a10, #140c08 76%);
  box-shadow: inset 0 0 0 2px #67401f, inset 0 0 36px rgba(0,0,0,.52), 0 12px 30px rgba(48,23,12,.2);
}
.go-salon-chat > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid #704622; }
.go-salon-chat h2 { margin: 0; color: #f0d5a0; font: 700 18px/1.3 "Noto Serif JP", serif; }
.go-salon-chat > header span { color: #c7aa79; font-size: 13px; }
.go-salon-chat > :is(header, form, button, small) { flex-shrink: 0; }
.go-salon-chat-log { flex: 1; min-height: 0; padding: 5px 13px; overflow-y: auto; overflow-wrap: anywhere; scrollbar-gutter: stable; border-top: 1px solid #4c2d19; }
.go-salon-chat-log .go-salon-empty { padding: 105px 10px 20px; border: 0; color: #c6a774; background: transparent; }
.go-salon-chat-message { display: flex; gap: 9px; margin: 14px 0; }
.go-salon-chat-message > div { flex: 1; padding: 9px 11px; border: 1px solid #684326; border-radius: 10px; color: #ead6b0; background: rgba(88,49,25,.72); }
.go-salon-chat-message.tone-blue > div,
.go-salon-chat-message.tone-green > div,
.go-salon-chat-message.tone-orange > div { background: rgba(88,49,25,.72); }
.go-salon-chat-message p { display: flex; justify-content: space-between; margin: 0 0 5px; }
.go-salon-chat-message time { color: #a68a62; font-size: 10px; }
.go-salon-chat-message > div > span { font-size: 12px; white-space: pre-wrap; }
.go-salon-chat-message.is-system > div { border-color: #b9853f; background: linear-gradient(135deg, rgba(116,69,29,.94), rgba(76,42,23,.92)); }
.go-salon-chat-system-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid #d4a55e; border-radius: 50%; color: #fff3cf; background: #8a5528; box-shadow: 0 0 0 3px rgba(212,165,94,.15); }
.go-salon-chat-destination { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; color: #f0d9ae; font-size: 12px; }
.go-salon-chat-destination select { min-width: 0; flex: 1; padding: 7px; border: 1px solid #81502b; border-radius: 6px; color: #f0d9ae; background: #342014; }
.go-salon-chat.collapsed > .go-salon-chat-destination { display: none; }
.go-salon-chat-form { display: flex; gap: 5px; margin: 12px; padding: 6px; border: 1px solid #81502b; border-radius: 9px; background: rgba(18,10,6,.58); }
.go-salon-chat-form input, .go-salon-chat-form textarea { min-width: 0; flex: 1; border: 0; color: #f0d9ae; outline: 0; background: transparent; }
.go-salon-chat-form input::placeholder, .go-salon-chat-form textarea::placeholder { color: #9d805c; }
.go-salon-chat-form textarea { box-sizing: border-box; font: inherit; line-height: 1.5; min-height: 3em; max-height: 160px; resize: vertical; }
.go-salon-chat-form button { width: 38px; border: 1px solid #ba6b63; border-radius: 6px; color: #ffe0c6; background: #a84851; cursor: pointer; }
.go-salon-chat-toggle { min-height: 42px; border: 0; border-top: 1px solid #704622; color: #dbbd89; font-size: 12px; font-weight: 700; background: rgba(37,20,12,.74); cursor: pointer; }
.go-salon-chat > small { padding: 0 14px 14px; color: #9d805c; font-size: 10px; }
.go-salon-chat.collapsed { align-self: start; }
.go-salon-chat.collapsed > :is(.go-salon-chat-log, .go-salon-chat-form, small) { display: none; }

.go-salon-dialog,
.go-salon-avatar-dialog { width: min(480px, calc(100vw - 30px)); padding: 0; border: 1px solid #efd4d9; border-radius: 18px; color: var(--salon-ink); background: #fffdfb; box-shadow: 0 24px 80px rgba(58,26,20,.25); }
.go-salon-avatar-dialog { width: min(760px, calc(100vw - 30px)); }
.go-salon-dialog::backdrop,
.go-salon-avatar-dialog::backdrop { background: rgba(45,27,22,.36); backdrop-filter: blur(3px); }
.go-salon-dialog form,
.go-salon-avatar-dialog form { position: relative; padding: 32px; }
.go-salon-dialog h2,
.go-salon-avatar-dialog h2 { margin: 0 0 14px; font: 700 25px/1.4 "Noto Serif JP", serif; }
.go-salon-dialog p,
.go-salon-avatar-dialog > form > p { color: #6f625e; line-height: 1.9; }
.go-salon-dialog-close { position: absolute; right: 15px; top: 13px; border: 0; font-size: 24px; background: transparent; cursor: pointer; }
.go-salon-dialog-primary { margin-top: 14px; color: #fff; background: var(--salon-red); }
.go-salon-guide { overflow-wrap: anywhere; }
.go-salon-guide section { margin: 0 0 20px; }
.go-salon-guide h3 { margin: 0 0 8px; font-size: 15px; color: #653e36; }
.go-salon-guide section p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.go-salon-guide dl { margin: 0; padding: 12px 14px; border: 1px solid #eee1dc; border-radius: 10px; background: #fff8f5; }
.go-salon-guide dl > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: 13px; line-height: 1.7; }
.go-salon-guide dt { color: #79635d; }
.go-salon-guide dd { margin: 0; white-space: pre-wrap; }
.go-salon-guide .go-salon-guide-facilities { margin: 14px 0 0; font-size: 12px; }
.go-salon-admission-wait { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 18px; text-align: center; }
.go-salon-admission-wait i { width: 44px; height: 44px; border: 4px solid #f3dce1; border-top-color: var(--salon-red); border-radius: 50%; animation: goSalonAdmissionSpin .9s linear infinite; }
.go-salon-admission-wait p { margin: 0; color: #6f625e; line-height: 1.8; }
.go-salon-admission-wait[data-status="rejected"] i { display: grid; border: 0; color: #b52b48; background: #fff0f3; animation: none; }
.go-salon-admission-wait[data-status="rejected"] i::after { content: "×"; font: 700 30px/44px sans-serif; }
.go-salon-admission-list { display: grid; gap: 10px; margin-top: 18px; }
.go-salon-admission-request { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eadcda; border-radius: 13px; background: #fffaf9; }
.go-salon-admission-request img { width: 50px; height: 50px; object-fit: contain; }
.go-salon-admission-request div { display: grid; gap: 3px; }
.go-salon-admission-request small { color: #82726d; }
.go-salon-admission-request menu { display: flex; gap: 7px; margin: 0; padding: 0; }
.go-salon-admission-request button { min-height: 36px; padding: 7px 11px; border: 1px solid #dfccd0; border-radius: 8px; cursor: pointer; background: #fff; }
.go-salon-admission-request button[data-admission-decision="approve"] { color: #fff; border-color: #258251; background: #258251; }
.go-salon-admission-empty { padding: 34px 10px; color: #7f706c; text-align: center; }
.go-salon-admission-footer { display: flex; justify-content: flex-end; gap: 9px; }
.go-salon-match-dialog { width: min(600px, calc(100vw - 30px)); }
.go-salon-match-dialog form { display: grid; gap: 12px; }
.go-salon-match-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go-salon-match-choice label { cursor: pointer; }
.go-salon-match-choice input { position: absolute; opacity: 0; pointer-events: none; }
.go-salon-match-choice span { display: grid; min-height: 116px; place-items: center; align-content: center; gap: 7px; padding: 16px; border: 1px solid #dfd3cf; border-radius: 14px; color: #5d4943; background: #fff; text-align: center; }
.go-salon-match-choice strong { font: 700 20px/1.4 "Noto Serif JP", serif; }
.go-salon-match-choice small { color: #83716c; }
.go-salon-match-choice input:checked + span { color: var(--salon-red); border-color: var(--salon-red); background: #fff4f6; box-shadow: 0 0 0 3px rgba(218,72,103,.08); }
.go-salon-match-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go-salon-match-settings label { display: grid; gap: 6px; color: #66544f; font-size: 13px; font-weight: 700; }
.go-salon-match-settings label.wide { grid-column: 1 / -1; }
.go-salon-match-settings select,
.go-salon-match-settings input { width: 100%; min-height: 43px; padding: 8px 11px; border: 1px solid #ded1ce; border-radius: 9px; color: #4d3934; background: #fff; }
.go-salon-match-summary { display: grid; gap: 8px; padding: 14px; border: 1px solid #eadcda; border-radius: 12px; background: #fffaf9; }
.go-salon-match-summary p { display: flex; justify-content: space-between; gap: 12px; margin: 0; line-height: 1.5; }
.go-salon-match-approvals { display: flex; flex-wrap: wrap; gap: 7px; }
.go-salon-match-approvals span { padding: 6px 9px; border-radius: 999px; color: #78645e; background: #f2ebe8; font-size: 12px; }
.go-salon-match-approvals span.approved { color: #167447; background: #e7f5ec; }
.go-salon-match-note { margin: 0; padding: 10px 12px; border-radius: 10px; color: #735b29 !important; background: #fff7df; font-size: 13px; }
.go-salon-match-leave { justify-self: start; min-height: 38px; padding: 7px 11px; border: 1px solid #dfb8c0; color: #b52b48; background: #fff; }
.go-salon-match-footer { display: flex; justify-content: flex-end; gap: 9px; }
.go-salon-match-cancel { min-width: 88px; margin-top: 14px; border: 1px solid #dfd1ce; color: #65514b; background: #fff; white-space: nowrap; }
.go-salon-match-dialog .go-salon-dialog-primary { color: #fff; }
.go-salon-table-settings-dialog { width: min(780px, calc(100vw - 30px)); }
.go-salon-table-settings-dialog form { display: grid; gap: 12px; max-height: min(820px, calc(100dvh - 40px)); overflow: auto; }
.go-salon-table-settings-help { margin: -7px 0 2px; }
.go-salon-table-settings-list { display: grid; gap: 10px; }
.go-salon-background-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.go-salon-background-option { position: relative; display: grid; gap: 7px; padding: 8px; border: 2px solid var(--border, #ded1ce); border-radius: 12px; cursor: pointer; }
.go-salon-background-option:has(input:checked) { border-color: #d46183; box-shadow: 0 0 0 2px #d4618333; }
.go-salon-background-option:focus-within { outline: 2px solid #d46183; outline-offset: 3px; }
.go-salon-background-option input { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; accent-color: #d46183; }
.go-salon-background-option img { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; border-radius: 6px; }
.go-salon-background-option span { text-align: center; font-weight: 700; }
.go-salon-background-option .go-salon-background-set-title { min-height: 28px; padding-inline: 34px 8px; text-align: left; }
.go-salon-background-floor-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.go-salon-background-floor { display: grid; min-width: 0; gap: 3px; }
.go-salon-background-floor small { font-size: 11px; color: var(--text-muted, #796b65); }
.go-salon-table-setting-row { display: grid; grid-template-columns: minmax(110px, .7fr) repeat(2, minmax(150px, 1fr)) minmax(92px, auto); align-items: end; gap: 12px; margin: 0; padding: 13px; border: 1px solid #eadcda; border-radius: 13px; background: #fffaf9; }
.go-salon-table-setting-name { align-self: center; color: #49332d; font: 700 17px/1.4 "Noto Serif JP", serif; }
.go-salon-table-setting-row label { display: grid; gap: 5px; color: #6c5953; font-size: 12px; font-weight: 700; }
.go-salon-table-setting-row select { width: 100%; min-height: 42px; padding: 7px 10px; border: 1px solid #ded1ce; border-radius: 9px; color: #4d3934; background: #fff; }
.go-salon-table-setting-row.is-locked { background: #f4f0ee; }
.go-salon-table-setting-row.is-locked select { color: #8d817d; background: #ebe7e5; cursor: not-allowed; }
.go-salon-table-setting-status { align-self: center; justify-self: end; padding: 5px 9px; border-radius: 999px; color: #257849; background: #eaf6ee; font-size: 11px; font-weight: 700; white-space: nowrap; }
.go-salon-table-setting-status[data-tone="locked"] { color: #9b6416; background: #fff1d9; }
.go-salon-table-settings-dialog .go-salon-dialog-primary { color: #fff; }
.go-salon-members-dialog { width: min(760px, calc(100vw - 30px)); }
.go-salon-members-dialog .go-salon-dialog-panel { position: relative; display: grid; gap: 12px; max-height: min(760px, calc(100dvh - 40px)); padding: 32px; overflow: auto; }
.go-salon-members-help { margin: -8px 0 2px; }
.go-salon-members-list { display: grid; gap: 10px; }
.go-salon-member-row { display: grid; grid-template-columns: 58px minmax(130px, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eadcda; border-radius: 13px; background: #fffaf9; }
.go-salon-member-row > img { width: 58px; height: 58px; object-fit: contain; }
.go-salon-member-identity { display: grid; gap: 3px; min-width: 0; }
.go-salon-member-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-salon-member-identity small { color: #82726d; }
.go-salon-member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.go-salon-member-actions button { min-height: 36px; padding: 7px 10px; border: 1px solid #dfccd0; border-radius: 8px; color: #644f49; background: #fff; cursor: pointer; }
.go-salon-member-actions button.danger { color: #b52b48; border-color: #e6aeb9; background: #fff5f6; }
.go-salon-member-actions button:disabled { cursor: default; opacity: .58; }
.go-salon-banned-section { display: grid; gap: 9px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #eadcda; }
.go-salon-banned-section h3 { margin: 0; font: 700 17px/1.4 "Noto Serif JP", serif; }
.go-salon-end-event { justify-self: start; min-height: 40px; padding: 8px 13px; border: 1px solid #dc8798; border-radius: 9px; color: #a6203e; background: #fff3f5; cursor: pointer; }
.go-salon-report-dialog { width: min(520px, calc(100vw - 30px)); }
.go-salon-report-dialog form { display: grid; gap: 12px; }
.go-salon-report-dialog label { display: grid; gap: 6px; color: #66544f; font-size: 13px; font-weight: 700; }
.go-salon-report-dialog :is(select, textarea) { width: 100%; padding: 9px 11px; border: 1px solid #ded1ce; border-radius: 9px; color: #4d3934; background: #fff; font: inherit; }
.go-salon-report-dialog textarea { resize: vertical; }
.go-salon-one-hour-dialog { width: min(620px, calc(100vw - 30px)); }
.go-salon-one-hour-dialog form { display: grid; gap: 12px; }
.go-salon-one-hour-intro { margin: 0 !important; padding: 12px 14px; border-radius: 11px; color: #755728 !important; background: #fff7df; line-height: 1.7 !important; }
.go-salon-one-hour-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go-salon-one-hour-fields label { display: grid; gap: 6px; color: #66544f; font-size: 13px; font-weight: 700; }
.go-salon-one-hour-fields > .wide { grid-column: 1 / -1; }
.go-salon-one-hour-fields input,
.go-salon-one-hour-fields select,
.go-salon-one-hour-fields textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #ded1ce; border-radius: 9px; color: #4d3934; background: #fff; font: inherit; }
.go-salon-one-hour-fields textarea { min-height: 82px; resize: vertical; }
.go-salon-one-hour-rules { display: grid; gap: 6px; margin: 0; padding: 13px 14px; border: 1px solid #eadcda; border-radius: 11px; color: #6d5b55; background: #fffaf9; font-size: 12px; line-height: 1.65; }
.go-salon-one-hour-active { display: grid; gap: 8px; padding: 16px; border: 1px solid #d8eadc; border-radius: 12px; background: #f4fbf6; }
.go-salon-one-hour-active strong { color: #176e43; font: 700 19px/1.5 "Noto Serif JP", serif; }
.go-salon-one-hour-reserved { border-color: #ead6a5; background: #fffaf0; }
.go-salon-one-hour-reserved strong { color: #86551b; }
.go-salon-one-hour-reserved p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; }
.go-salon-one-hour-reserved button { justify-self: start; min-height: 38px; padding: 8px 13px; border: 1px solid #dfb8c0; border-radius: 8px; color: #b52b48; background: #fff; cursor: pointer; }
.go-salon-opening-dialog { width: min(650px, calc(100vw - 30px)); }
.go-salon-opening-dialog .go-salon-dialog-panel { position: relative; display: grid; gap: 14px; padding: 32px; }
.go-salon-opening-empty { display: grid; justify-items: start; gap: 10px; padding: 22px; border: 1px solid #eadcda; border-radius: 13px; background: #fffaf9; }
.go-salon-opening-empty p { margin: 0; }
.go-salon-opening-empty a { padding: 10px 16px; border-radius: 9px; color: #fff; text-decoration: none; background: var(--salon-red); }
.go-salon-opening-manager { display: grid; gap: 16px; }
.go-salon-opening-status { display: grid; gap: 7px; padding: 15px; border: 1px solid #eadcda; border-radius: 12px; background: #fffaf9; }
.go-salon-opening-status span { justify-self: start; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.go-salon-opening-status span[data-tone="active"] { color: #147342; background: #e9f7ed; }
.go-salon-opening-status span[data-tone="scheduled"] { color: #875313; background: #fff2d3; }
.go-salon-opening-status span[data-tone="paused"] { color: #74645e; background: #eee8e5; }
.go-salon-opening-status h3, .go-salon-opening-status p { margin: 0; }
.go-salon-opening-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.go-salon-opening-actions button, .go-salon-opening-reservation button { min-height: 42px; padding: 9px 15px; border: 1px solid var(--salon-red); border-radius: 9px; color: #fff; background: var(--salon-red); cursor: pointer; }
.go-salon-opening-actions button.danger, .go-salon-opening-reservation button.plain { color: #b52b48; background: #fff; }
.go-salon-opening-reservation { display: grid; gap: 11px; padding: 16px !important; border: 1px solid #eadcda; border-radius: 12px; background: #fff; }
.go-salon-opening-reservation h4, .go-salon-opening-reservation p { margin: 0; }
.go-salon-opening-reservation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.go-salon-opening-reservation label { display: grid; gap: 6px; color: #66544f; font-size: 13px; font-weight: 700; }
.go-salon-opening-reservation input { width: 100%; min-height: 43px; padding: 8px 10px; border: 1px solid #ded1ce; border-radius: 9px; background: #fff; }
.go-salon-weekly-schedule fieldset { margin: 0; padding: 0; border: 0; }
.go-salon-weekly-schedule legend { margin-bottom: 7px; color: #66544f; font-size: 13px; font-weight: 700; }
.go-salon-weekly-schedule fieldset > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.go-salon-weekly-schedule fieldset label { display: block; cursor: pointer; }
.go-salon-weekly-schedule fieldset input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.go-salon-weekly-schedule fieldset span { display: grid; min-height: 38px; place-items: center; border: 1px solid #ded1ce; border-radius: 8px; color: #6c5953; background: #fff; }
.go-salon-weekly-schedule fieldset input:checked + span { color: #fff; border-color: var(--salon-red); background: var(--salon-red); }
@keyframes goSalonAdmissionSpin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .go-salon-admission-request { grid-template-columns: 44px minmax(0, 1fr); }
  .go-salon-admission-request img { width: 44px; height: 44px; }
  .go-salon-admission-request menu { grid-column: 1 / -1; }
  .go-salon-admission-request menu button { flex: 1; }
}
.go-salon-avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 4px; }
.go-salon-avatar-grid > button { display: grid; min-width: 0; justify-items: center; padding: 10px; border: 2px solid #ecdfdc; border-radius: 15px; text-align: center; background: #fff; cursor: pointer; }
.go-salon-avatar-grid > button:hover,
.go-salon-avatar-grid > button.selected { border-color: var(--avatar-accent); background: color-mix(in srgb, var(--avatar-accent) 8%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--avatar-accent) 15%, transparent); }
.go-salon-avatar-grid > button.locked { opacity: .66; cursor: not-allowed; filter: saturate(.72); }
.go-salon-avatar-grid > button.locked:hover { border-color: #ecdfdc; background: #fff; box-shadow: none; }
.go-salon-avatar-grid > button > span { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 11px; background: linear-gradient(#fff8f4, #f8ede8); }
/* Same 560px square portrait window at (120,100) on every 800x960 seated source. */
.go-salon-avatar-grid > button > span { position: relative; }
.go-salon-avatar-grid img { position: absolute; left: -21.4286%; top: -17.8571%; width: 142.8571%; height: 171.4286%; max-width: none; object-fit: fill; transform: none; }
/* Anchor the chest at source Y=660 so enlargement preserves the portrait's lower edge. */
.go-salon-avatar-grid > button:is([data-avatar-id="mina"], [data-avatar-id="yuki"], [data-avatar-id="akari"], [data-avatar-id="haru"], [data-avatar-id="sakura"], [data-avatar-id="ren"], [data-avatar-id="sota"], [data-avatar-id="riri"], [data-avatar-id="nagi"], [data-avatar-id="ayame"], [data-avatar-id="anna"]) img { transform-origin: 50% 68.75%; transform: scale(1.08); }
.go-salon-avatar-grid strong { margin-top: 8px; font: 700 16px/1.35 "Noto Serif JP", serif; }
.go-salon-avatar-grid small { min-height: 34px; margin-top: 4px; color: #7b6b66; font-size: 10px; line-height: 1.55; }
.go-salon-avatar-grid em { margin-top: 8px; color: var(--avatar-accent); font-size: 11px; font-style: normal; font-weight: 700; }
.go-salon-avatar-wallet { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #ecdcd7; border-radius: 12px; background: #fff8f5; }
.go-salon-avatar-wallet > span { color: #7b6b66; font-size: 12px; }
.go-salon-avatar-wallet strong { color: #a65324; font-size: 17px; }
.go-salon-avatar-wallet a { margin-left: auto; color: var(--salon-red); font-size: 12px; font-weight: 700; }

@media (max-width: 1250px) {
  .go-salon-directory { grid-template-columns: 250px minmax(0, 1fr); }
  .go-salon-owner-offer { position: relative; left: auto; right: auto; bottom: auto; margin-top: 30px; }
  .go-salon-create-entry { margin-top: 22px; }
  .go-salon-directory-nav::after { display: none; }
  .go-salon-card-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
  .go-salon-quick-play { grid-template-columns: minmax(290px, 1fr) auto 250px; gap: 16px; padding-left: 24px; }
  .go-salon-quick-play-guide img { left: -4px; width: 190px; }
  .go-salon-quick-play-board { right: -64px; }
  .go-salon-room { grid-template-columns: 230px minmax(0, 1fr) 285px; }
}

@media (max-width: 980px) {
  .go-salon-directory { grid-template-columns: minmax(0, 1fr); }
  .go-salon-directory-nav { position: static; padding: 18px; border: 0; border-bottom: 1px solid var(--salon-line); }
  .go-salon-directory-nav h1 { margin: 0 5px 14px; }
  .go-salon-directory-nav nav { display: flex; overflow-x: auto; }
  .go-salon-directory-nav nav :is(button, a.go-salon-directory-link) { width: auto; flex: 0 0 auto; min-height: 44px; }
  .go-salon-nav-divider, .go-salon-directory-nav h2, .go-salon-my-shop, .go-salon-owner-offer, .go-salon-create-entry { display: none; }
  .go-salon-directory-nav nav .go-salon-one-hour-menu,
  .go-salon-directory-nav nav .go-salon-fixed-opening-menu { display: none; }
  .go-salon-directory-main { padding: 22px 16px; }
  .go-salon-create-mobile,
  .go-salon-one-hour-mobile,
  .go-salon-fixed-opening-mobile { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; margin: 0 0 14px; padding: 12px 18px; border: 1px solid #ebbec8; border-radius: 15px; color: var(--salon-red); text-align: left; text-decoration: none; background: linear-gradient(100deg, #fff, #fff2f4); box-shadow: 0 8px 22px rgba(76,30,24,.055); cursor: pointer; }
  .go-salon-one-hour-mobile { color: #8a5512; border-color: #ead19b; background: linear-gradient(100deg, #fffdf8, #fff3d7); }
  .go-salon-fixed-opening-mobile { color: #a12642; border-color: #efc6cf; background: linear-gradient(100deg, #fff, #fff0f3); }
  .go-salon-create-mobile span,
  .go-salon-one-hour-mobile span,
  .go-salon-fixed-opening-mobile span { display: grid; gap: 3px; }
  .go-salon-create-mobile small,
  .go-salon-one-hour-mobile small,
  .go-salon-fixed-opening-mobile small { color: #78635e; font-size: 11px; font-weight: 500; }
  .go-salon-create-mobile b,
  .go-salon-one-hour-mobile b,
  .go-salon-fixed-opening-mobile b { font-size: 25px; }
  .salon-create-hero { grid-template-columns: 1fr; padding-right: 250px; }
  .salon-create-guide { width: 270px; }
  .salon-create-guide span { display: none; }
  .salon-create-guide img { right: -12px; width: 225px; }
  .go-salon-quick-play { grid-template-columns: minmax(270px, 1fr) auto 205px; }
  .go-salon-quick-play-button { min-width: 180px; }
  .go-salon-quick-play-guide img { left: -20px; width: 178px; }
  .go-salon-room { grid-template-columns: 210px minmax(0, 1fr) 260px; grid-template-rows: auto minmax(0, 1fr); }
  .go-salon-room-nav { grid-column: 1; grid-row: 1 / 3; padding-inline: 12px; }
  .go-salon-room-head { grid-column: 2 / 4; grid-row: 1; }
  .go-salon-room-main { grid-column: 2; grid-row: 2; padding-inline: 12px 9px; }
  .go-salon-chat { grid-column: 3; grid-row: 2; margin-right: 10px; }
  .go-salon-room-nav > h2 { font-size: 20px; }
  .go-salon-host { align-items: flex-start; }
  .go-salon-review-board-shell { min-width: 0; }
}

@media (max-width: 720px) {
  .go-salon-page { --salon-header-space: 48px; }
  .go-salon-card-grid { grid-template-columns: 1fr; }
  .go-salon-quick-play { display: block; min-height: 252px; margin-bottom: 20px; padding: 18px; }
  .go-salon-quick-play-copy { max-width: 64%; }
  .go-salon-quick-play-copy h2 { font-size: clamp(24px, 7.3vw, 31px); }
  .go-salon-quick-play-copy span { font-size: 13px; }
  .go-salon-quick-play-button { position: absolute; left: 18px; bottom: 18px; min-width: 0; width: 55%; min-height: 50px; padding: 9px 12px; font-size: 15px; }
  .go-salon-quick-play-guide { position: absolute; right: 0; top: 0; bottom: 0; width: 45%; }
  .go-salon-quick-play-guide img { left: -18px; bottom: -42px; width: 178px; max-width: none; }
  .go-salon-quick-play-guide small { right: 8px; bottom: 8px; padding: 5px 8px; font-size: 9px; }
  .go-salon-quick-play-board { right: -88px; top: 12px; width: 150px; height: 150px; background-size: 17px 17px; }
  .go-salon-quick-play-board i { width: 19px; height: 19px; }
  .go-salon-directory-hero { min-height: 44px; padding: 0; }
  .salon-create-shell { width: min(100% - 24px, 620px); padding-top: 18px; }
  .salon-create-hero { min-height: 300px; padding: 25px 22px; }
  .salon-create-hero > div:first-child { max-width: 73%; }
  .salon-create-hero h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .salon-create-hero p { font-size: 13px; line-height: 1.75; }
  .salon-create-guide { right: -25px; width: 190px; }
  .salon-create-guide img { right: -8px; bottom: -48px; width: 190px; }
  .salon-create-steps { gap: 5px; }
  .salon-create-steps li { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 7px 3px; text-align: center; }
  .salon-create-steps li b { font-size: 10px; }
  .salon-create-panel { padding: 25px 18px; }
  .salon-create-panel > header h2 { font-size: 25px; }
  .salon-create-board-options, .salon-create-themes { grid-template-columns: 1fr; }
  .salon-create-table-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .salon-create-table-mode > strong { grid-column: 1 / -1; }
  .go-salon-match-choice,
  .go-salon-match-settings,
  .go-salon-one-hour-fields { grid-template-columns: 1fr; }
  .go-salon-match-settings label.wide { grid-column: auto; }
  .go-salon-table-setting-row { grid-template-columns: 1fr 1fr; align-items: end; }
  .go-salon-table-setting-name { grid-column: 1 / -1; }
  .go-salon-table-setting-status { grid-column: 1 / -1; justify-self: start; }
  .go-salon-one-hour-fields label.wide { grid-column: auto; }
  .go-salon-opening-dialog .go-salon-dialog-panel { padding: 24px 18px; }
  .go-salon-members-dialog .go-salon-dialog-panel { padding: 24px 18px; }
  .go-salon-member-row { grid-template-columns: 48px minmax(0, 1fr); }
  .go-salon-member-row > img { width: 48px; height: 48px; }
  .go-salon-member-actions { grid-column: 1 / -1; justify-content: stretch; }
  .go-salon-member-actions button { flex: 1 1 42%; }
  .go-salon-opening-reservation { padding: 14px !important; }
  .go-salon-opening-reservation > div { grid-template-columns: 1fr; }
  .salon-create-themes span { min-height: 128px; }
  .salon-create-preview-card { grid-template-columns: 1fr; }
  .salon-thumbnail-layout { grid-template-columns: minmax(0, 1fr); }
  .salon-create-preview-card > div { padding: 20px; }
  .salon-create-actions, .salon-create-success-actions { flex-direction: column-reverse; }
  .salon-create-actions :is(button, a), .salon-create-success-actions :is(button, a) { width: 100%; margin: 0; }
  .salon-create-loading, .salon-create-lock, .salon-create-success { padding: 30px 18px; }
  .go-salon-filters { padding: 8px 12px; }
  .go-salon-schedule #goSalonScheduleList > div { grid-template-columns: 62px 1fr auto; gap: 8px; }
  .go-salon-schedule #goSalonScheduleList > div span { grid-column: 2 / -1; grid-row: 2; padding-bottom: 8px; }
  .go-salon-schedule button { grid-column: 3; grid-row: 1; }
  .go-salon-room { display: block; height: auto; min-height: calc(100dvh - var(--salon-header-space)); overflow: visible; }
  .go-salon-room-nav { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 15px; overflow: visible; border: 0; border-bottom: 1px solid var(--salon-line); }
  .go-salon-room-nav > :is(p, small, .go-salon-room-status, .go-salon-host, nav, .go-salon-leave) { display: none; }
  .go-salon-room-nav > h2 { margin: 0; }
  .go-salon-room-nav > h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .go-salon-back { flex: 0 0 auto; margin: 0; }
  .go-salon-room-main { display: block; padding: 0 10px 13px; overflow: visible; }
  .go-salon-room-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: flex-start; gap: 10px; padding: 12px 16px; }
  .go-salon-room-head > div:first-child { flex-wrap: wrap; gap: 8px; }
  .go-salon-review-turn { order: 4; max-width: 100%; }
  .go-salon-review-turn small { font-size: 8px; }
  .go-salon-room-head > div:last-child { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .go-salon-room-head > div:last-child button { display: inline-flex; min-width: 0; align-items: center; justify-content: center; white-space: nowrap; }
  .go-salon-room-head .go-salon-voice-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .go-salon-room-head #goSalonVoiceToggle { width: 100%; }
  .go-salon-microphone-picker { grid-template-columns: auto minmax(0, 1fr); width: 100%; box-sizing: border-box; }
  .go-salon-microphone-picker select { width: 100%; max-width: none; }
  .go-salon-voice-diagnostics, .go-salon-voice-diagnostics > summary { width: 100%; }
  .go-salon-voice-diagnostics > summary { text-align: center; }
  .go-salon-voice-diagnostics-panel { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(70dvh, 520px); overflow: auto; }
  .go-salon-room-head #goSalonFavorite { display: none; }
  .go-salon-room:is([data-scene="conversation-lobby"], [data-scene="match-hall"]):not(.go-salon-review-active) .go-salon-game-stage { height: auto; aspect-ratio: 1672 / 941; box-sizing: content-box; }
  .go-salon-room-scene { width: 100%; height: 100%; }
  .go-salon-review-workspace { min-height: 0; padding: 7px; }
  .go-salon-game-stage { height: min(640px, calc(100vw + 130px)); }
  .go-salon-review-board-shell { width: 100%; min-width: 0; padding: 5px; }
  /* Mobile matches flow vertically: size containment would collapse the stage and board row. */
  .go-salon-room.go-salon-match-active .go-salon-game-stage { container-type: normal; height: auto; min-height: 0; overflow: visible; }
  .go-salon-room.go-salon-match-active .go-salon-game-stage > [hidden] { display: none !important; }
  .go-salon-match-workspace { grid-template-rows: auto; gap: 7px; padding: 7px; overflow: visible; }
  .go-salon-match-game-side .go-salon-match-scoreboard { grid-template-columns: 1fr 1fr; }
  .go-salon-match-game-head h2 { font-size: 17px; }
  .go-salon-match-game-head span { display: none; }
  .go-salon-match-scoreboard { grid-template-columns: 1fr 1fr; }
  .go-salon-match-scoreboard > p { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .go-salon-match-scoreboard article { grid-template-columns: auto minmax(0, 1fr); }
  .go-salon-match-scoreboard time { grid-column: 1 / -1; font-size: 16px; text-align: center; }
  .go-salon-match-game-body { grid-template-columns: 1fr; }
  .go-salon-match-board-slot { container-type: normal; min-height: 0; }
  .go-salon-match-board-shell { width: 100%; padding: 5px; }
  .go-salon-match-game-side { max-height: none; overflow: visible; }
  .go-salon-review-tools { gap: 4px; }
  .go-salon-review-tools button { min-height: 46px; gap: 2px; padding-inline: 2px; font-size: 10px; white-space: nowrap; }
  .go-salon-review-tools i { width: 17px; height: 17px; }
  .go-salon-review-tools i.alternate { width: 37px; height: 19px; }
  .go-salon-review-tools i.alternate::before,
  .go-salon-review-tools i.alternate::after { width: 14px; height: 14px; }
  .go-salon-review-tools i.eraser { width: 18px; height: 12px; }
  .go-salon-review-analyze small { font-size: 8px; }
  .go-salon-review-visibility small { display: none; }
  .go-salon-live-person { width: clamp(48px, 14vw, 74px); font-size: 9px; }
  .go-salon-live-person i { width: 32px; height: 32px; border-width: 2px; font-size: 14px; }
  .go-salon-live-person strong { width: max-content; max-width: 110px; }
  .go-salon-hotspot { min-width: 61px; min-height: 40px; padding: 5px 7px; font-size: 10px; }
  .go-salon-scene-note { grid-template-columns: 1fr auto; }
  .go-salon-scene-note span { display: none; }
  .go-salon-table-tabs { grid-template-columns: repeat(7, 96px); padding-bottom: 8px; }
  .go-salon-chat { margin: 8px 10px 90px; min-height: 0; max-height: min(520px, 70dvh); }
  .go-salon-avatar-dialog form { padding: 25px 18px; }
  .go-salon-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1251px) and (max-height: 850px) {
  .go-salon-owner-offer { display: none; }
}

@media (orientation: portrait) and (min-width: 701px) and (max-width: 1439px) {
  .go-salon-page { --salon-header-space: 48px; }
}

@media (orientation: landscape) and (min-width: 701px) and (max-width: 760px) {
  .go-salon-page { --salon-header-space: 56px; }
}

/* Pair seats mirror the venue: each column is one team, rear then front. */
.go-salon-page .go-salon-pair-seats,
.go-salon-page .go-salon-pair-players {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  min-width: 0; margin-block: 10px;
}
.go-salon-page .go-salon-pair-players[hidden] { display: none; }
.go-salon-page .go-salon-pair-seat {
  display: grid; gap: 8px; min-width: 0; padding: 12px;
  background: #fff8f4; color: #4b3026; border: 1px solid #e6cbbd; border-radius: 10px;
}
.go-salon-page .go-salon-pair-seat select { width: 100%; min-width: 0; }
.go-salon-page .go-salon-pair-seat button { padding: 9px; border: 1px solid #db8e9f; border-radius: 7px; background: #fff; color: #8d314e; }
.go-salon-page .go-salon-pair-player {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0;
  border: 1px solid #79542e; border-radius: 8px; padding: 7px; color: #f9e3bd;
  background: #332113; overflow-wrap: anywhere; font-size: .8rem;
}
.go-salon-page .go-salon-pair-player small { flex-basis: 100%; }
.go-salon-page .go-salon-pair-player img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.go-salon-page .go-salon-pair-player.is-active { border-color: #fcd578; box-shadow: 0 0 0 2px #fcd57855; background: #684c26; }
.go-salon-page .go-salon-pair-players > p { grid-column: 1 / -1; color: #ffd1ca; }
/* Pricing is isolated from board / salon geometry. */
.billing-page .billing-main { width: min(1160px, calc(100% - 40px)); margin: 28px auto 64px; color: #49342e; }
.billing-page .billing-breadcrumb { font-size: 13px; display: flex; gap: 10px; }
.billing-page .billing-main a { color: #ab3d58; text-underline-offset: 3px; }
.billing-page .billing-hero { text-align: center; padding: 45px 0 30px; }
.billing-page .billing-eyebrow { font-size: 11px; letter-spacing: .22em; color: #a96571; }
.billing-page .billing-hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(27px, 3.4vw, 42px); line-height: 1.65; margin: 15px 0; }
.billing-page .billing-hero p { line-height: 1.9; color: #756760; }
.billing-page .billing-notice { background: #fff5e7; border: 1px solid #e8d5b5; border-radius: 12px; padding: 18px 24px; }
.billing-page .billing-notice p { margin: 6px 0 0; font-size: 13px; line-height: 1.8; }
.billing-page .billing-account { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 4px 0; }
.billing-page .billing-account strong { font-size: 19px; margin: 0 12px; }
.billing-page .billing-account small, .billing-page .billing-account-limits { color: #796d69; font-size: 12px; }
.billing-page .billing-account-limits { flex-basis: 100%; margin: 0; }
.billing-page .billing-message { font-size: 14px; color: #9c344e; }
.billing-page .billing-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 36px; }
.billing-page .billing-plan { background: #fff; border: 1px solid #eaded8; border-radius: 18px; padding: 25px; display: flex; flex-direction: column; box-shadow: 0 8px 24px #61413508; }
.billing-page .billing-plan-owner { border-color: #d899a5; background: linear-gradient(155deg, #fff2f3, #fff 48%); }
.billing-page .billing-plan-heading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 32px; }
.billing-page .billing-plan h2 { font-size: 21px; margin: 0; }
.billing-page .billing-current-badge { font-size: 10px; border-radius: 20px; padding: 4px 9px; color: #287455; background: #eaf7ef; }
.billing-page .billing-plan-description { color: #86756f; font-size: 12px; min-height: 20px; }
.billing-page .billing-price { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 3px; }
.billing-page .billing-price strong { font-size: 43px; font-weight: 700; letter-spacing: -.035em; }
.billing-page .billing-price small { font-size: 13px; color: #89766d; }
.billing-page .billing-price-note { font-size: 11px; color: #89766d; margin: 0 0 15px; }
.billing-page .billing-plan ul { margin: 12px 0 24px; padding: 0; list-style: none; line-height: 1.7; font-size: 13px; flex: 1; }
.billing-page .billing-plan li { padding: 9px 0 9px 20px; position: relative; border-bottom: 1px solid #f4edeb; }
.billing-page .billing-plan li::before { content: '・'; position: absolute; left: 0; color: #a65b6b; }
.billing-page .billing-action { display: block; width: 100%; padding: 13px 8px; text-align: center; border: 1px solid #b86275; border-radius: 9px; background: #fff8f9; color: #973d52; text-decoration: none; font: inherit; font-size: 13px; }
.billing-page .billing-action:disabled { color: #6c605b; background: #f5f0ed; border-color: #ded3cc; opacity: 1; cursor: not-allowed; }
.billing-page .billing-compare-link { display: inline-block; font-size: 13px; padding: 6px 0; }
.billing-page .billing-comparison { margin: 0 0 36px; min-width: 0; }
.billing-page .billing-comparison h2 { font-size: 23px; margin: 0 0 10px; scroll-margin-top: 110px; }
.billing-page .billing-comparison-intro { font-size: 13px; color: #75655c; line-height: 1.8; margin: 0 0 20px; }
.billing-page .billing-comparison-hint { display: none; font-size: 12px; color: #75655c; line-height: 1.7; }
.billing-page .billing-comparison-scroll { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; border: 1px solid #dfcdc5; border-radius: 14px; background: #fff; }
.billing-page .billing-comparison-scroll:focus-visible { outline: 3px solid #a44b61; outline-offset: 3px; }
.billing-page .billing-comparison-table { width: 100%; min-width: 660px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.65; }
.billing-page .billing-comparison-feature { width: 30%; }
.billing-page .billing-comparison-table th, .billing-page .billing-comparison-table td { padding: 14px 16px; border-right: 1px solid #eee3dd; border-bottom: 1px solid #eee3dd; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.billing-page .billing-comparison-table tr > :last-child { border-right: 0; }
.billing-page .billing-comparison-table tbody tr:last-child > * { border-bottom: 0; }
.billing-page .billing-comparison-table thead th { background: #faf5f1; color: #49342e; padding-top: 20px; padding-bottom: 20px; }
.billing-page .billing-comparison-table thead strong { display: block; font-size: 17px; }
.billing-page .billing-comparison-price { display: block; font-size: 23px; font-weight: 700; margin: 5px 0; font-variant-numeric: tabular-nums; }
.billing-page .billing-comparison-price small { font-size: 12px; font-weight: 400; color: #75655c; }
.billing-page .billing-comparison-table [data-comparison-plan="owner"] { background: #fff6f7; }
.billing-page .billing-comparison-table thead [data-comparison-plan="owner"] { background: #fbe9ec; }
.billing-page .billing-comparison-table [scope="row"], .billing-page .billing-comparison-table thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: #fff; font-weight: 600; box-shadow: 1px 0 0 #dfcdc5; }
.billing-page .billing-comparison-table thead th:first-child { background: #faf5f1; }
.billing-page .billing-comparison-group th { background: #f3ece6; text-align: left; color: #756052; font-size: 12px; letter-spacing: .07em; padding-top: 9px; padding-bottom: 9px; }
.billing-page .billing-comparison-yes { color: #287455; font-size: 22px; font-weight: 700; }
.billing-page .billing-comparison-no { color: #95847a; font-size: 18px; }
.billing-page .billing-comparison-value { font-weight: 600; }
.billing-page .billing-comparison-notes { margin-top: 14px; font-size: 12px; line-height: 1.8; color: #75655c; }
.billing-page .billing-comparison-notes p { margin: 7px 0; }
.billing-page .billing-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.billing-page .billing-details { background: #fbf8f5; border: 1px solid #e9ded5; padding: 25px 30px; border-radius: 14px; }
.billing-page .billing-details h2, .billing-page .billing-faq h2 { font-size: 21px; margin: 0 0 18px; }
.billing-page .billing-details p, .billing-page .billing-faq p { line-height: 1.9; font-size: 13px; color: #75655c; }
.billing-page .billing-faq { margin: 36px 0; }
.billing-page .billing-faq details { border-bottom: 1px solid #eadfd9; padding: 18px 4px; }
.billing-page .billing-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.billing-page .billing-footer { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 760px) {
  .billing-page .billing-main { width: calc(100% - 28px); margin-top: 20px; }
  .billing-page .billing-plan-grid { grid-template-columns: 1fr; gap: 16px; }
  .billing-page .billing-hero { padding-top: 28px; }
  .billing-page .billing-plan, .billing-page .billing-details { padding: 22px; }
  .billing-page .billing-notice { padding: 16px; }
  .billing-page .billing-account > div:first-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .billing-page .billing-account strong { margin: 0; }
  .billing-page .billing-comparison h2 { font-size: 21px; }
  .billing-page .billing-comparison-hint { display: block; }
  .billing-page .billing-comparison-feature { width: 160px; }
  .billing-page .billing-comparison-table th, .billing-page .billing-comparison-table td { padding: 12px; }
}
.go-salon-notification-dialog { max-width: min(480px, calc(100vw - 24px)); }
.go-salon-notification-dialog p { line-height: 1.7; }
.go-salon-notification-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--salon-line, #e7d7d0); cursor: pointer; }
.go-salon-notification-option strong, .go-salon-notification-option small { display: block; }
.go-salon-notification-option small, .go-salon-notification-note { font-size: 12px; opacity: .78; }
.go-salon-notification-option input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--salon-red, #c74f5b); }

/* Keep the board first; room utilities live in the sidebar or mobile menu. */
.go-salon-page .go-salon-room { grid-template-rows: minmax(0, 1fr); }
.go-salon-page .go-salon-room-nav { grid-row: 1; }
.go-salon-page .go-salon-room-main { grid-row: 1; padding-top: 12px; }
.go-salon-page .go-salon-chat { grid-row: 1; margin-top: 12px; }
.go-salon-room-options.go-salon-room-head { display: block; flex-shrink: 0; width: 100%; box-sizing: border-box; min-height: 0; margin: 0 0 14px; padding: 0; border: 1px solid var(--salon-line); border-radius: 9px; box-shadow: none; background: transparent; }
.go-salon-room-options > summary { padding: 12px 10px; cursor: pointer; font-size: 12px; font-weight: 700; }
.go-salon-room-options.go-salon-room-head > .go-salon-room-identity { display: none; }
.go-salon-room-options.go-salon-room-head > .go-salon-room-option-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 8px 10px; width: 100%; box-sizing: border-box; }
.go-salon-room-options.go-salon-room-head .go-salon-voice-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.go-salon-room-options.go-salon-room-head button { width: 100%; min-height: 42px; justify-content: center; white-space: normal; padding-inline: 6px; }
.go-salon-room-options .go-salon-microphone-picker { width: 100%; box-sizing: border-box; grid-template-columns: auto minmax(0, 1fr); }
.go-salon-room-options .go-salon-microphone-picker select { width: 100%; max-width: none; }
.go-salon-room-options .go-salon-voice-diagnostics-panel { position: static; width: 100%; margin-top: 8px; max-height: none; }
.go-salon-room-options .go-salon-voice-diagnostics-panel dl > div { grid-template-columns: 70px minmax(0, 1fr); }
.go-salon-room-options.go-salon-room-head #goSalonFavorite { display: inline-flex; }
.go-salon-review-statusbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding-top: 6px; }
.go-salon-review-statusbar .go-salon-review-sync { margin: 0; }
.go-salon-review-statusbar .go-salon-review-turn { flex-wrap: wrap; justify-content: center; border-radius: 8px; }
.go-salon-room-menu-toggle { display: none; }
.go-salon-quick-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.go-salon-page .go-salon-quick-actions > button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 8px 10px; border: 1px solid #bbaaa1; border-radius: 9px; color: #493a35; background: #fffaf6; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.go-salon-quick-actions b { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.go-salon-page .go-salon-quick-actions > .go-salon-leave { color: #a62e48; background: #fff0f3; border-color: #d98396; }
.go-salon-page .go-salon-quick-actions > [data-state="on"] { color: #147041; background: #eff9f2; border-color: #429264; box-shadow: inset 0 0 0 1px #429264; }
.go-salon-page .go-salon-quick-actions > [data-state="connecting"] { color: #79510a; background: #fff9e9; border-color: #c99e47; cursor: wait; }
.go-salon-page .go-salon-quick-actions > [data-state="error"] { color: #a62e48; background: #fff0f3; border-color: #d98396; }
.go-salon-quick-actions > button:focus-visible { outline: 3px solid #a34561; outline-offset: 2px; }
@layer site-theme {
  html[data-site-theme="dark"] .go-salon-quick-actions { background: #1c2631; }
  html[data-site-theme="dark"] body .go-salon-quick-actions > .go-salon-leave { color: #ffbbc9 !important; background: #462c39 !important; border-color: #a96077 !important; }
  html[data-site-theme="dark"] body .go-salon-quick-actions > [data-state="on"] { color: #c4ffdb !important; background: #1c4533 !important; border-color: #68bf8b !important; }
  html[data-site-theme="dark"] body .go-salon-quick-actions > [data-state="connecting"] { color: #ffe3a3 !important; background: #453c25 !important; border-color: #c99e47 !important; }
  html[data-site-theme="dark"] body .go-salon-quick-actions > [data-state="error"] { color: #ffbbc9 !important; border-color: #a96077 !important; }
}
.go-salon-room-menu { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 0; border: 1px solid var(--salon-line, #e4d4cd); border-radius: 14px; color: #493a35; background: #fffaf6; overflow: auto; }
.go-salon-room-menu::backdrop { background: rgba(14, 19, 24, .6); }
.go-salon-room-menu > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: inherit; border-bottom: 1px solid var(--salon-line, #e4d4cd); }
.go-salon-room-menu > header h2 { margin: 0; font-size: 17px; }
.go-salon-room-menu > header button { min-width: 44px; min-height: 44px; border: 1px solid #b8a8a0; border-radius: 8px; color: inherit; background: transparent; font-size: 22px; cursor: pointer; }
@media (max-width: 980px) {
  .go-salon-page .go-salon-room-main { padding: 4px 6px 10px; }
  /* Let mobile lobby and match-hall images reach both edges without widening their controls. */
  .go-salon-page .go-salon-room:is([data-scene="conversation-lobby"], [data-scene="match-hall"]):not(.go-salon-review-active):not(.go-salon-match-active) .go-salon-room-main { padding-top: 0; }
  .go-salon-page .go-salon-room:is([data-scene="conversation-lobby"], [data-scene="match-hall"]):not(.go-salon-review-active):not(.go-salon-match-active) .go-salon-game-stage { width: calc(100% + 12px); margin-inline: -6px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .go-salon-page .go-salon-room-scene:is([data-scene="conversation-lobby"], [data-scene="match-hall"]) { border: 0; border-radius: 0; box-shadow: none; }
  .go-salon-page .go-salon-room { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .go-salon-page .go-salon-room > .go-salon-quick-actions { position: fixed; z-index: 115; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--salon-line); background: var(--salon-quick-actions-bg, #fffaf6); box-shadow: 0 -3px 14px #34201818; }
  html[data-site-theme="dark"] .go-salon-page { --salon-quick-actions-bg: #1c2631; }
  .go-salon-quick-actions .go-salon-voice-toggle small { display: none; }
  .go-salon-page .go-salon-room > .go-salon-room-nav { display: none; }
  .go-salon-room-menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--salon-line); border-radius: 8px; color: inherit; background: rgba(255, 255, 255, .12); font-weight: 700; cursor: pointer; }
  .go-salon-room-menu-toggle span { font-size: 10px; font-weight: 400; }
  .go-salon-room-menu .go-salon-room-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
  .go-salon-room-menu .go-salon-room-nav > :is(p, small, nav, .go-salon-leave) { display: block; }
  .go-salon-room-menu .go-salon-room-nav > .go-salon-floor-sidebar { display: grid; }
  .go-salon-room-menu .go-salon-room-nav > :is(.go-salon-room-status, .go-salon-host) { display: flex; }
  .go-salon-room-menu .go-salon-room-nav > h2 { overflow: visible; white-space: normal; margin: 0 12px; }
  .go-salon-room-menu .go-salon-room-nav > :is(p, small, .go-salon-room-status, .go-salon-host) { margin-bottom: 4px; }
  .go-salon-room-menu .go-salon-room-options { margin: 4px 0; }
  .go-salon-room-menu .go-salon-leave { margin-top: 12px; }
}

/* The board has its own edge; do not enclose it in two more decorative frames. */
.go-salon-page :is(.go-salon-review-active,.go-salon-match-active) .go-salon-game-stage { padding: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: none; }
.go-salon-page .go-salon-match-workspace { padding: 4px; border: 0; border-radius: 4px; box-shadow: none; background: #2b190f; }
.go-salon-page .go-salon-match-board-shell { box-sizing: border-box; padding: 3px; border-radius: 5px; box-shadow: 0 3px 12px rgba(0,0,0,.25); }
@media (min-width: 981px) {
  .go-salon-page .go-salon-match-game-body { grid-template-columns: minmax(0,1fr) 220px; gap: 10px; }
  .go-salon-page .go-salon-match-game-side { padding: 6px; }
  .go-salon-page .go-salon-postgame-commands { grid-template-columns: minmax(0,1fr); }
}
.go-salon-page .go-salon-review-workspace { grid-template-rows: minmax(0, 1fr) auto auto auto; padding: 4px; border: 0; border-radius: 4px; box-shadow: none; }
.go-salon-page .go-salon-review-board-shell { padding: 3px; border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, .25); }
.go-salon-page .go-salon-review-tools button { min-height: 44px; padding: 5px; font-size: 12px; gap: 4px; }
.go-salon-page .go-salon-review-tools i { flex-shrink: 0; }
.go-salon-review-statusbar .go-salon-review-turn { color: #e8c991; background: transparent; border: 0; }
.go-salon-page #goSalonReviewTurn :is(b, small) { color: #f0d8b5 !important; }
.go-salon-review-policy-details { min-width: 0; margin-top: 5px; }
.go-salon-review-policy-details > summary { width: fit-content; margin-inline: auto; padding: 3px 8px; color: #ead2a7; font-size: 10px; cursor: pointer; }
.go-salon-review-policy-details[open] { max-height: 110px; overflow-y: auto; }
.go-salon-review-controls { display: contents; }
@media (min-width: 981px) {
  .go-salon-page .go-salon-review-workspace { grid-template-columns: minmax(0, 1fr) 144px; grid-template-rows: minmax(0, 1fr); gap: 10px; background: #2b190f; }
  /* Scale the artwork's clear central tatami to the board, not the board to the artwork.
     The measured shell width already follows resize and is shared by the board renderer. */
  .go-salon-page :is(.go-salon-review-board-slot, .go-salon-match-board-slot) { background: url("/assets/go-salon-review-room-bg-v1.png") center / auto max(100%, calc(var(--go-salon-review-board-width, 620px) * 1.26)) no-repeat #2b190f; }
  .go-salon-page .go-salon-review-board-shell { box-sizing: border-box; width: min(100cqw, 100cqh); }
  .go-salon-page .go-salon-review-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 8px; overflow-y: auto; border-radius: 7px; background: rgba(35, 21, 13, .9); }
  .go-salon-page .go-salon-review-tools { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; gap: 6px; width: 100%; margin: 0; }
  .go-salon-page .go-salon-review-tools button { width: 100%; min-width: 0; min-height: 44px; white-space: normal; }
  .go-salon-page .go-salon-review-statusbar { flex-direction: column; flex: 0 0 auto; gap: 10px; padding: 0; }
  .go-salon-page .go-salon-review-controls .go-salon-review-turn { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; gap: 6px; padding: 0; white-space: normal; }
  .go-salon-review-controls .go-salon-review-turn b { grid-column: 1 / -1; text-align: center; }
  .go-salon-review-controls .go-salon-review-turn button { min-height: 44px; }
  .go-salon-page .go-salon-review-controls .go-salon-review-turn small { display: block; grid-column: 1 / -1; padding: 0; text-align: center; line-height: 1.6; }
  .go-salon-review-controls .go-salon-review-policy-details { flex: 0 0 auto; margin: 0; }
}
@media (max-width: 980px) {
  .go-salon-page .go-salon-room.go-salon-review-active .go-salon-game-stage { container-type: normal; height: auto; min-height: 0; overflow: visible; }
  /* Match board: remove nested decorative frames only on narrow screens. */
  .go-salon-page .go-salon-room.go-salon-match-active .go-salon-room-main { padding-inline: 2px; }
  .go-salon-page .go-salon-room.go-salon-match-active .go-salon-game-stage { width: 100%; margin-inline: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; aspect-ratio: auto; box-sizing: border-box; }
  .go-salon-page .go-salon-match-workspace { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .go-salon-page .go-salon-match-board-shell { box-sizing: border-box; width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .go-salon-page .go-salon-match-board-shell canvas { border-radius: 0; }
  .go-salon-page .go-salon-match-game-side { margin-inline: 4px; }
  .go-salon-page .go-salon-room.go-salon-review-active .go-salon-game-stage > [hidden] { display: none !important; }
  .go-salon-page .go-salon-review-active .go-salon-room-main { padding-inline: 2px; }
  .go-salon-page .go-salon-review-workspace { padding: 0 0 4px; background: #2b190f; }
  .go-salon-page .go-salon-review-board-slot { container-type: normal; }
  .go-salon-page .go-salon-review-board-shell { box-sizing: border-box; width: 100%; padding: 2px; border: 0; box-shadow: none; }
  .go-salon-page .go-salon-review-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% - 12px); margin-inline: auto; }
  .go-salon-page .go-salon-review-tools button { min-height: 40px; font-size: 11px; }
  .go-salon-page .go-salon-table-tabs button { flex: 0 0 auto; min-width: 112px; }
  .go-salon-page .go-salon-table-tabs,
  .go-salon-page .go-salon-table-tabs.has-postgame { display: flex; flex-wrap: nowrap; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b98547 #2b190f; }
  .go-salon-page .go-salon-table-tabs button span { white-space: nowrap; font-size: 12px; }
}

/* One-time event tickets reuse the salon palette; monthly membership stays separate. */
.event-ticket-settings { grid-column: 1 / -1; border: 1px solid #e8d8d4; border-radius: 12px; padding: 14px 16px; background: #fffcfb; color: #503c34; }
.event-ticket-settings summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.event-ticket-settings summary small { margin-left: 8px; font-weight: 400; color: #76635b; }
.event-ticket-settings p, .event-ticket-settings small { font-size: 13px; line-height: 1.8; }
.event-ticket-settings fieldset { border: 0; padding: 12px 0 0; margin: 0; min-width: 0; }
.event-ticket-settings fieldset[hidden] { display: none; }
.event-ticket-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-ticket-fields input { width: 100%; box-sizing: border-box; min-width: 0; }
.go-salon-one-hour-fields .event-ticket-check, .event-ticket-check { display: flex; align-items: flex-start; gap: 10px; line-height: 1.7; font-size: 14px; }
.go-salon-one-hour-fields .event-ticket-check input, .event-ticket-check input { width: 18px; height: 18px; min-height: 18px; margin: 4px 0 0; padding: 0; flex: 0 0 18px; accent-color: #cb4563; }
.event-ticket-shell { max-width: 800px; margin: 28px auto 70px; padding: 0 18px; color: #503c34; }
.event-ticket-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; margin-bottom: 22px; }
.event-ticket-toolbar button { margin-left: auto; }
.event-ticket-card { border: 1px solid #eadbd6; border-radius: 16px; padding: 28px; background: #fff; box-shadow: 0 5px 20px #56332408; overflow-wrap: anywhere; }
.event-ticket-card h1 { margin: 4px 0 18px; font-size: 26px; line-height: 1.5; }
.event-ticket-card h2 { font-size: 20px; margin-top: 0; }
.event-ticket-card p { font-size: 16px; line-height: 1.9; }
.event-ticket-description { white-space: pre-wrap; }
.event-ticket-card .event-ticket-state { color: #a32f4c; font-size: 14px; font-weight: 700; }
.event-ticket-facts { margin: 24px 0; }
.event-ticket-facts > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0e5e1; }
.event-ticket-facts dt { font-size: 14px; color: #78655d; }
.event-ticket-facts dd { margin: 0; font-size: 16px; }
.event-ticket-card small { font-size: 13px; color: #78655d; }
.event-ticket-card .event-ticket-policy { font-size: 14px; background: #fbf6f3; border-radius: 8px; padding: 14px; }
.event-ticket-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
.event-ticket-actions p { margin: 0; }
.event-ticket-shell button, .event-ticket-link, .event-ticket-primary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #e5c8ce; border-radius: 8px; color: #a32f4c; background: #fff7f9; font-size: 14px; line-height: 1.6; text-decoration: none; cursor: pointer; white-space: normal; }
.event-ticket-shell .event-ticket-primary { background: #c83e60; color: #fff; border-color: #c83e60; font-weight: 700; }
.event-ticket-shell button:disabled { cursor: wait; opacity: .6; }
.event-ticket-owner { margin-top: 16px; padding-top: 24px; border-top: 1px solid #eadbd6; }
.event-ticket-owner form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.event-ticket-owner form label { display: grid; gap: 8px; flex: 1; min-width: 180px; font-size: 14px; }
.event-ticket-owner input { padding: 12px; border: 1px solid #cfbab3; border-radius: 8px; background: transparent; color: inherit; font-size: 16px; width: 100%; box-sizing: border-box; }
.event-ticket-attendees { list-style: none; padding: 0; margin: 20px 0; }
.event-ticket-attendees li { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-bottom: 1px solid #f0e5e1; padding: 14px 0; }
.event-ticket-list { display: grid; gap: 14px; }
.event-ticket-list a { display: grid; gap: 10px; text-decoration: none; color: inherit; }
#eventTicketNotice { line-height: 1.8; }
#eventTicketNotice.is-error { padding: 12px; background: #fff0f2; border: 1px solid #e7a9b7; border-radius: 8px; color: #992744; }
html[data-site-theme="dark"] .event-ticket-shell, html[data-site-theme="dark"] .event-ticket-settings { color: #eee1d8; }
html[data-site-theme="dark"] .event-ticket-card, html[data-site-theme="dark"] .event-ticket-settings { background: #28222a; border-color: #56434a; }
html[data-site-theme="dark"] .event-ticket-card .event-ticket-policy { background: #362c32; }
html[data-site-theme="dark"] .event-ticket-card small, html[data-site-theme="dark"] .event-ticket-facts dt { color: #c3b3ab; }
@media(max-width:600px) {
  .event-ticket-shell { padding: 0 12px; margin-top: 16px; }
  .event-ticket-card { padding: 20px 16px; }
  .event-ticket-card h1 { font-size: 23px; }
  .event-ticket-facts > div { grid-template-columns: 84px minmax(0,1fr); }
  .event-ticket-toolbar button { margin-left: 0; }
  .event-ticket-fields { grid-template-columns: 1fr; }
}