/* 基本：配色・見出し・共通操作・手書き枠・マーキー
 * 読み込み順：base.css → 局面を扱う画面では board.css → カテゴリ.css
 * 条件付き指定は直前の通常指定と併せて確認する。ファイル追加は事前承認制。
 */

:root {
  --control-border-width: 1px;
  --action-radius: 5px;
  --action-gradient: linear-gradient(var(--theme-page), rgba(255, 254, 249, 0));
  --action-surface: rgb(237, 242, 228);
  --action-danger-surface: rgb(150, 62, 50);
  --action-danger-hover: rgb(128, 48, 43);
  --control-outline-width: 2px;
  --control-focus-offset: 2px;
  /* 共通の操作・入力欄・見出しの値。専用の盤面色／演出色とは分離。 */
  --control-surface: rgb(240, 247, 233);
  --control-ink: rgb(32, 47, 54);
  --control-edge: rgb(195, 206, 193);
  --control-hover: rgb(225, 239, 221);
  --control-pressed: rgb(226, 235, 222);
  --control-disabled-surface: rgb(236, 238, 231);
  --control-disabled-ink: rgb(101, 115, 106);
  --control-disabled-edge: rgb(181, 190, 179);
  --focus-fallback: rgb(54, 93, 155);
  --field-surface: rgb(255, 254, 251);
  --heading-shadow: rgba(255, 255, 255, 0.15) 0px 1px inset, rgba(24, 60, 41, 0.125) 0px 1px 2px;
  --control-shadow: rgba(82, 99, 75, .15) 0 1px inset, rgba(82, 99, 75, .15) 0 -1px inset, rgba(82, 99, 75, .133) 0 0 0 3px inset;
  --control-hover-shadow: rgba(82, 99, 75, .15) 0 1px inset, rgba(82, 99, 75, .125) 0 0 8px;

  color: rgb(32, 37, 31);
  background: rgb(255, 255, 255);

  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wood: #e6bd7c;
  --wood-line: #85704e;
  --line: var(--theme-line);
  --muted: var(--theme-muted);
  --blue: var(--theme-ink);
  --green: var(--theme-green);
  --panel: var(--theme-card);
  --hud-edge: var(--theme-line);
  --hud-ink: var(--theme-ink);
  --hud-accent: var(--theme-green);
  --hud-surface: var(--theme-card);
  --hud-hover: var(--theme-soft);
  --theme-radius: 6px 4px 6px 4px;
  --theme-ink: #253a3b;
  --theme-muted: #526763;
  --theme-page: #fffef9;
  --theme-card: #fffdf7;
  --theme-soft: #edf3e9;
  --theme-green: #23664f;
  --theme-line: #95aaa0;
  --theme-hover: #b86d29;
  --theme-heading: linear-gradient(115deg,#30785e,#22674f 70%,#286e56);
  --theme-shadow: 0 2px 4px #243f3010,inset 0 1px #ffffffb3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(rgb(237, 241, 233) 0.65px, transparent 0.8px) 0px 0px / 8px 8px;
  font-size: 16px;
  line-height: 1.6;
}

button {
  touch-action: manipulation;
}

a {
  touch-action: manipulation;
}
a:where(:not(.uiAction)){
  color: var(--control-ink);
}

button {
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}
button:focus-visible:where(:not(.uiAction)),
a:focus-visible:where(:not(.uiAction)){
  outline: var(--focus-fallback) solid 3px;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.edge {
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 66px;
  overflow: hidden;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgb(32, 37, 31);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.edge span {
  font-size: 18px;
  color: rgb(49, 91, 56);
}

.edgeLeft {
  left: 12px;
  transform: rotate(180deg);
}

.edgeRight {
  right: 12px;
}

.eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 650;
  margin: 0px 0px 8px;
}

.statusGrid {
  display: grid;
  grid-template-columns: 150px minmax(0px, 1fr);
  gap: 8px 20px;
  margin: 0px;
  font-size: 14px;
}

.statusGrid dt {
  color: var(--muted);
}

.statusGrid dd {
  margin: 0px;
  overflow-wrap: anywhere;
}

.notice {
  margin: 18px 0px 0px;
  padding: 10px 14px;
  border-left: 2px solid var(--control-edge);
  background: rgb(243, 252, 241);
  font-size: 14px;
}

.notice[data-state="ok"] {
  border-color: var(--green);
  background: rgb(243, 252, 241);
  color: rgb(32, 37, 31);
}

.notice[data-state="ng"] {
  border-color: var(--control-edge);
  background: rgb(243, 252, 241);
  color: rgb(181, 43, 40);
}

footer {
  text-align: center;
  margin-top: 22px;
  border-top: 1px solid var(--control-edge);
  padding: 14px;
  font-size: 12px;
  color: rgb(32, 37, 31);
}

footer span {
  color: rgb(32, 37, 31);
  margin-left: 10px;
}

.roomTitle {
  font-size: 21px;
  margin: 0px;
}

.backLink {
  text-decoration: none;
  white-space: nowrap;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0px 0px;
}

.actions button:where(:not(.promotion button)),
.actions a {
  display: inline-block;
  padding: 8px 18px;
  text-decoration: none;
}
.actions button:where(:not(.promotion button)):where(:not(.uiAction)),
.actions a:where(:not(.uiAction)){
  border: 1px solid var(--control-edge);
  border-radius: 0px;
  background: linear-gradient(var(--control-surface), var(--control-surface));
  color: var(--control-ink);
}

.actions button:where(:not(.promotion button)):not(.uiAction):hover,
.actions a:not(.uiAction):hover {
  border-color: rgb(140, 184, 144);
  background: var(--control-hover);
}

@media (max-width: 1200px) {
  .edge {
    display: none;
}
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
}

  .roomTitle {
    font-size: 17px;
}

  .statusGrid {
    grid-template-columns: 115px minmax(0px, 1fr);
    gap: 8px 12px;
    font-size: 13px;
}
}

#endMessage:empty {
  display: none;
}

body.roomView {
  background-size: 8px 8px;
}
.roomView .actions button:where(:not(.promotion button)):where(:not(.uiAction)){
  border-radius: 2px;
}

.roomView .actions button:where(:not(.promotion button)):not(.uiAction):hover:not(:disabled) {
  background: rgba(225, 239, 221, 0.15);
  border-color: rgb(140, 184, 144);
  text-decoration: none;
}

.roomView .actions :is(button, a):where(:not(.promotion button)):where(:not(.uiAction)),
.roomView .backLink {
  background: var(--hud-surface);
  border: 1px solid var(--hud-edge);
  color: var(--hud-ink);
  box-shadow: var(--control-shadow);
  text-shadow: rgba(255, 255, 255, 0) 0px 1px 2px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.roomView .actions button:where(:not(.promotion button)):not(.uiAction):not(:disabled):hover {
  background: var(--hud-hover);
  border-color: rgb(140, 184, 144);
  box-shadow: var(--control-hover-shadow);
}

.roomView .actions a:not(.uiAction):hover,
.roomView .backLink:hover {
  text-decoration: none;
  background: var(--hud-hover);
  border-color: rgb(140, 184, 144);
  box-shadow: var(--control-hover-shadow);
}

.roomView .actions button:where(:not(.promotion button)):where(:not(.uiAction)):disabled {
  background: var(--control-surface);
  color: rgb(32, 37, 31);
  box-shadow: none;
}

.roomView .backLink::before {
  color: var(--hud-accent);
}

@media (prefers-reduced-motion: reduce) {
.roomView button:where(:not(.uiAction)),
.roomView a:where(:not(.uiAction)){
    transition: none;
}
}

.guestToast {
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1px solid var(--control-edge);
  background: rgb(243, 252, 241);
  color: rgb(49, 91, 56);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: rgba(82, 99, 75, 0.15) 0px 4px 16px;
  pointer-events: none;
}

.guestToast[hidden] {
  display: none;
}

.aiCharacter {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.aiCharacter[hidden] {
  display: none !important;
}

.roomView footer,
.roomView footer span {
  color: rgb(204, 204, 204);
}

.roomView footer a,
.roomView footer a:hover {
  color: rgb(182, 214, 255);
}

body.roomView :is(.accountGrid dt, .notice, .eyebrow) {
  color: var(--theme-muted);
}
body.roomView :is(button, a, input, textarea, select):focus-visible:where(:not(.uiAction)){
  outline: 2px solid var(--theme-hover);
  outline-offset: 2px;
}

body.roomView {
  background-color: rgb(17, 17, 17);
  background-image: radial-gradient(rgb(51, 51, 51) 1px, transparent 1px);
  padding: 4px 0px 0px;
  font-family: "Noto Sans CJK JP", Meiryo, "Yu Gothic", sans-serif;
  color: var(--theme-ink);
  font-weight: 500;
}

body.roomView .inkFrame {
  position: relative;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.inkFrame > .inkOutline,
.inkFrame > summary > .inkOutline {
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

.inkOutline .inkHot {
  opacity: 0;
  transition: opacity 140ms;
}

.inkOutline .inkHalo {
  opacity: 0;
  transition: opacity 140ms;
  filter: blur(1.6px);
}

.inkInteractive:hover > .inkOutline .inkHot,
.inkInteractive:focus-visible > .inkOutline .inkHot,
.inkInteractive:hover > summary > .inkOutline .inkHot,
.inkInteractive:has(> summary:focus-visible) > summary > .inkOutline .inkHot {
  opacity: 1;
}

.inkInteractive:hover > .inkOutline .inkHalo,
.inkInteractive:focus-visible > .inkOutline .inkHalo,
.inkInteractive:hover > summary > .inkOutline .inkHalo,
.inkInteractive:has(> summary:focus-visible) > summary > .inkOutline .inkHalo {
  opacity: 0.28;
}

.inkInteractive:hover > .inkOutline .inkNormal,
.inkInteractive:focus-visible > .inkOutline .inkNormal,
.inkInteractive:hover > summary > .inkOutline .inkNormal,
.inkInteractive:has(> summary:focus-visible) > summary > .inkOutline .inkNormal {
  opacity: 0;
}

body.roomView .cardNavMarker {
  line-height: 1;
}

body.roomView :is(a, button):hover > .cardNavMarker,
body.roomView :is(a, button):focus-visible > .cardNavMarker {
  background: rgb(252, 229, 199);
  color: rgb(146, 71, 9);
}

@media (prefers-reduced-motion: reduce) {
  .inkOutline * {
    transition: none !important;
}
}

body.roomView .inkFrame::before,
body.roomView .inkFrame::after {
  content: none !important;
}

body.roomView #authNotice a {
  font-weight: 700;
}

.kifuShare[hidden],
.kifuShare input[hidden] {
  display: none !important;
}

.kifuShare {
  margin: 8px 0px;
  text-align: center;
}

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

.kifuShareButtons > .uiAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.kifuShare [data-share-status] {
  margin: 4px 0px;
  font-size: 14px;
}

.kifuShare [data-share-status]:empty {
  display: none;
}

.kifuShare input {
  width: min(100%, 560px);
  box-sizing: border-box;
  font-size: 16px;
}

:is(h1, h2, h3, h4, h5, h6) * {
  white-space: nowrap;
}

body.roomView #authNotice {
  font-weight: 700;
  margin: 8px 0px 0px;
  padding: 7px 10px;
  line-height: 1.45;
}

.cssMarquees {
  position: fixed;
  inset: 0px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --marquee-page-width: min(1200px,100vw);
  --marquee-left-edge: calc((100vw - var(--marquee-page-width))/2);
  --marquee-right-edge: var(--marquee-left-edge);
  --marquee-play-state: running;
}

.centerView .cssMarquees,
.roomView:not(.casualMenu):not(.casualPlay) .cssMarquees {
  --marquee-page-width: min(100vw,calc(50vw + 392px));
}

.roomView.tallLayout.hasGame .cssMarquees {
  --marquee-page-width: 100vw;
}

.kifuListView .cssMarquees {
  --marquee-page-width: min(1160px,100vw);
}

.cssMarquees .centerMarqueeTrack {
  position: absolute;
  top: 0px;
  height: 100%;
  overflow: hidden;
  width: var(--marquee-font);
  --marquee-offset: 8px;
  --marquee-font: 19.2px;
  --marquee-speed: 18;
  --marquee-duration: 240s;
  --marquee-color: rgba(50,255,50,.30);
}

.cssMarquees [data-layer="1"] {
  --marquee-offset: 35px;
  --marquee-font: 25.6px;
  --marquee-speed: 12;
  --marquee-duration: 480s;
  --marquee-color: rgba(50,255,50,.25);
}

.cssMarquees [data-layer="2"] {
  --marquee-offset: 69px;
  --marquee-font: 35.2px;
  --marquee-speed: 6;
  --marquee-duration: 600s;
  --marquee-color: rgba(150,150,150,.20);
}

.cssMarquees [data-side="left"] {
  right: calc(100% - var(--marquee-left-edge) + var(--marquee-offset));
  transform: rotate(180deg);
}

.cssMarquees [data-side="right"] {
  left: calc(100% - var(--marquee-right-edge) + var(--marquee-offset));
}

.cssMarquees .centerMarqueeContent {
  text-orientation: sideways;
  white-space: nowrap;
  font-weight: bold;
  line-height: 1;
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  writing-mode: horizontal-tb;
  font-size: var(--marquee-font);
  color: var(--marquee-color);
  animation: marqueeScroll var(--marquee-duration) linear infinite;
  animation-play-state: var(--marquee-play-state);
}

.cssMarquees .centerMarqueeContent > span {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}

.cssMarquees [data-side="left"] .centerMarqueeContent,
.cssMarquees [data-side="right"][data-layer="1"] .centerMarqueeContent {
  animation-direction: reverse;
}

.cssMarquees [data-side="left"][data-layer="1"] .centerMarqueeContent {
  animation-direction: normal;
}

.cssMarquees [hidden] {
  display: none !important;
}

@keyframes marqueeScroll {
0% { transform: translateY(0px); }
  100% { transform: translateY(-50%); }
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .cssMarquees {
    display: none !important;
}

  .cssMarquees .centerMarqueeContent {
    animation: auto ease 0s 1 normal none running none !important;
}
}

body.roomView :is(input, textarea)::placeholder {
  color: rgb(104, 123, 116);
  opacity: 1;
}
body.roomView :is(.centerReturn, .backLink, #queueCancel, #stockRefresh, .casualActions button, #replayControls button:not(.uiAction)):where(:not(.uiAction)){
  color: rgb(41, 74, 68);
  background: linear-gradient(var(--field-surface), rgb(240, 242, 233));
  border-color: rgb(142, 167, 154);
  text-shadow: none;
  box-shadow: rgba(35, 63, 48, 0.08) 0px 2px 3px, rgba(255, 255, 255, 0.85) 0px 1px inset;
  transition: background-color 120ms, box-shadow 120ms, border-color 120ms;
}
body.roomView :is(.centerReturn, .backLink, #queueCancel, #stockRefresh, .casualActions button, #replayControls button:not(.uiAction)):active:not(:disabled):not([aria-disabled="true"]):not(a:not([href])):where(:not(.uiAction)){
  background: linear-gradient(var(--control-pressed), rgb(237, 242, 232));
  color: rgb(32, 77, 62);
  box-shadow: rgba(35, 69, 44, 0.14) 0px 2px 3px inset;
  border-color: rgb(84, 124, 100);
}
body.roomView :is(.centerReturn, .backLink, #queueCancel, #stockRefresh, .casualActions button, #replayControls button:not(.uiAction)):disabled:where(:not(.uiAction)){
  color: var(--control-disabled-ink);
  background: var(--control-disabled-surface);
  border-color: var(--control-disabled-edge);
  box-shadow: none;
}
body.roomView :is(button, a, input, textarea, select):focus-visible:where(:not(.uiAction)){
  outline-color: var(--theme-hover);
}

body.roomView .inkOutline .inkHalo {
  filter: none;
}

body.roomView .inkOutline .inkHot {
  fill: var(--theme-hover);
}

body.roomView .inkFrame > .inkOutline .inkNormal {
  opacity: 0.92;
}

body.roomView .inkInteractive:is(:hover, :focus-visible) > .inkOutline .inkNormal {
  opacity: 0;
}

body.roomView .cardNavMarker {
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-style: normal;
  font-variant: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 15px;
  font-family: Arial, sans-serif;
  pointer-events: none;
  z-index: 5;
  background: rgb(227, 236, 224);
  color: rgb(40, 87, 64);
}

@media (hover: hover) and (pointer: fine) {
body.roomView :is(.centerReturn, .backLink, #queueCancel, #stockRefresh, .casualActions button, #replayControls button:not(.uiAction)):hover:not(:disabled):not(a:not([href])):where(:not(.uiAction)){
    background: linear-gradient(rgb(255, 250, 240), rgb(244, 234, 216));
    border-color: var(--theme-hover);
}
}

@media (hover: none) {
  body.roomView .inkInteractive:not(:active):not(:focus-visible) > .inkOutline .inkNormal,
  body.roomView .inkInteractive:not(:active):not(:has(> summary:focus-visible)) > summary > .inkOutline .inkNormal {
    opacity: 0.92;
}

  body.roomView .inkInteractive:not(:active):not(:focus-visible) > .inkOutline .inkHot,
  body.roomView .inkInteractive:not(:active):not(:focus-visible) > .inkOutline .inkHalo,
  body.roomView .inkInteractive:not(:active):not(:has(> summary:focus-visible)) > summary > .inkOutline .inkHot,
  body.roomView .inkInteractive:not(:active):not(:has(> summary:focus-visible)) > summary > .inkOutline .inkHalo {
    opacity: 0;
}
}

body.roomView .inkInteractive:active:not(:disabled):not([aria-disabled="true"]) > .inkOutline .inkHot {
  opacity: 1;
}

body.roomView .inkInteractive:active:not(:disabled):not([aria-disabled="true"]) > .inkOutline .inkNormal {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
body.roomView :is(.centerReturn, .backLink, #queueCancel, #stockRefresh, .casualActions button, #replayControls button:not(.uiAction)):where(:not(.uiAction)){
    transition: none;
}
}

@media (max-width: 900px) {
  body.roomView {
    padding: 0px;
    background-color: var(--theme-page);
    background-image: none;
}

  body.roomView footer,
  body.roomView footer span {
    color: var(--theme-muted);
}

  body.roomView footer a {
    color: rgb(40, 92, 72);
}
}

@media (max-width: 600px) {
  body.roomView :is(#authNotice, #casualNotice, #guestCreated).compactGuestNotice {
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
}

  body.roomView #guestCreated.compactGuestNotice {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    padding: 7px 8px;
}
}

@media (hover: hover) {
  /* uiControlは共通のホバー枠だけを提供。外観はuiAction/専用部品が担当。
     盤面のマス・持ち駒・布陣マスには付けない。入力欄とカードは既存の部品指定。
     border-colorの!importantは手書きSVG枠の明示的な例外指定と対になる。 */
  body.roomView :is(button.uiControl:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), .backLink, .accountLinks a, .recentKifuList a, .centerRoomCard:not([aria-disabled="true"]):not(.roomClosed), .formationSlot, .formationChoice:not(:disabled), .postComposer, .postedCard):hover {
    outline: var(--control-outline-width) solid var(--theme-hover);
    outline-offset: 0px;
    border-color: var(--theme-hover) !important;
}
}

/* uiActionは共通操作の外観と状態を所有。カテゴリ側では寸法・配置を指定。 */
body :is(a, button).uiAction {
  font-weight: 700;
  background: var(--action-background, var(--action-gradient)), var(--action-fill, var(--action-surface));
  border-radius: var(--action-radius);
  color: var(--action-text, var(--control-ink));
  border: var(--control-border-width) solid var(--action-edge, var(--control-edge));
  outline: none;
  box-shadow: rgba(82, 99, 75, .15) 0 1px inset,
    rgba(82, 99, 75, .15) 0 -1px inset, rgba(82, 99, 75, .133) 0 0 0 3px inset;
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}

/* ホバー・押下では背景画像を保持し、下地色だけを補間する。 */

/* Semantic variants keep the same border, focus and disabled behavior. */
body .uiActionDanger {
  --action-background: none;
  --action-fill: var(--action-danger-surface);
  --action-text: var(--theme-page);
  --action-edge: rgb(120, 48, 39);
  --action-hover: var(--action-danger-hover);
}
body .uiAction[aria-current="true"] {
  --action-background: none;
  --action-fill: rgb(224, 235, 212);
  --action-text: rgb(33, 77, 51);
  --action-edge: rgb(101, 133, 91);
  font-weight: 800;
}

body.roomView .actions .uiAction {
  text-shadow: rgba(255, 255, 255, 0) 0px 1px 2px;
}

@media (hover: hover) and (pointer: fine) {
  body :is(a, button).uiAction:hover:not(:disabled):not([aria-disabled="true"]):not(a:not([href])) {
    background-color: var(--action-hover, var(--control-hover));
    border-color: var(--theme-hover);
    outline: var(--control-outline-width) solid var(--theme-hover);
    outline-offset: 0;
    box-shadow: var(--control-hover-shadow);
}
}

body :is(a, button).uiAction:focus-visible:not(:disabled):not([aria-disabled="true"]):not(a:not([href])) {
  border-color: var(--theme-hover);
  outline: var(--control-outline-width) solid var(--theme-hover);
  outline-offset: var(--control-focus-offset);
}

body :is(a, button).uiAction:active:not(:disabled):not([aria-disabled="true"]):not(a:not([href])) {
  background-color: var(--action-hover, var(--control-pressed));
  border-color: var(--theme-hover);
  outline: var(--control-outline-width) solid var(--theme-hover);
  outline-offset: 0;
}

body :is(a, button).uiAction:is(:disabled, [aria-disabled="true"], a:not([href])) {
  background: var(--control-disabled-surface);
  color: var(--control-disabled-ink);
  border-color: var(--control-disabled-edge);
  box-shadow: none;
  outline: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  body :is(a, button).uiAction {
    transition: none;
}
}

/* === 見出し：通常・条件付き・操作状態をまとめて管理 === */

.sectionTitle {
  margin: 0px 0px 16px;
  padding: 7px 14px;
  border-left: 4px solid var(--blue);
  background: linear-gradient(90deg, rgb(233, 238, 230), rgba(10, 17, 24, 0));
  font-size: 19px;
}

.sectionTitle small {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-left: 8px;
}

.roomSidebar .sectionTitle {
  font-size: 14px;
  padding: 5px 8px;
}

@media (max-width: 900px) {
  .roomSidebar .sectionTitle {
    margin-bottom: 12px;
}

  .edge,
  .roomHeader .eyebrow {
    display: none;
}
}

@media (max-width: 600px) {
  .sectionTitle {
    font-size: 17px;
}
}

.centerContent .sectionTitle {
  padding: 2px 10px;
  margin: 0px 0px 8px;
  font-size: 16px;
  line-height: 1.5;
}

.playing .roomSidebar .sectionTitle {
  display: none;
}

.roomHeader {
  padding: 12px 18px;
  gap: 12px;
}

.roomHeader .backLink {
  justify-self: start;
}

.roomHeader .roomTitle {
  text-align: center;
}

.roomHeader .eyebrow {
  justify-self: end;
  margin: 0px;
}

@media (max-width: 600px) {
  .roomHeader {
    gap: 6px;
    padding: 10px;
}

  .roomHeader .roomTitle {
    font-size: 18px;
}
}

.roomHeader .backLink {
  display: inline-flex;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(195, 206, 193, 0.333);
  font-size: 12px;
}

.roomHeader .backLink::before {
  content: "‹";
  font-size: 21px;
  line-height: 1;
  color: var(--control-ink);
}

.roomHeader .backLink:hover {
  border-color: rgba(140, 184, 144, 0.533);
}

.roomHeader .backLink:focus-visible {
  outline: var(--focus-fallback) solid 2px;
  outline-offset: 2px;
}

.roomView .roomHeader {
  grid-template-columns: minmax(76px, 1fr) minmax(0px, auto) minmax(76px, 1fr);
  gap: 4px;
  padding: 3px 8px;
}

.roomView .roomHeader .roomTitle {
  font-size: 16px;
  line-height: 1.25;
  margin: 0px;
  overflow-wrap: anywhere;
}

.roomView .roomHeader .backLink {
  font-size: 11px;
  padding: 2px 5px;
}

.roomView .roomHeader .backLink::before {
  color: var(--hud-accent);
  font-size: 17px;
}

.roomView .sectionTitle {
  font-size: 17px;
  border-left: 5px solid var(--control-edge);
  padding: 4px 10px;
  margin: 8px 0px;
}

@media (max-width: 600px) {
  .roomView .roomHeader .roomTitle {
    font-size: 13px;
}

  .roomView .roomHeader {
    padding: 3px 4px;
}

  .roomView .roomHeader .backLink {
    font-size: 10px;
}
}

.roomView .roomSidebar .sectionTitle {
  font-size: 18px;
  padding: 5px 12px;
}

.roomHeader {
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(0deg, rgba(21, 63, 41, 0.2) 0px, rgba(21, 63, 41, 0.2) 1px, transparent 1px, transparent 4px), linear-gradient(100deg, rgb(21, 63, 41), rgb(21, 63, 41));
  user-select: none;
  align-items: center;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0px, auto) minmax(72px, 1fr);
  color: rgb(255, 255, 255);
}

.roomHeader .backLink {
  text-decoration: none;
  align-items: center;
  border-radius: 4px;
  letter-spacing: 1px;
  color: var(--control-ink);
  background: var(--control-surface);
}

.roomView .roomHeader .backLink {
  gap: 4px;
  letter-spacing: 0px;
}

.roomHeader .backLink:hover {
  color: var(--control-ink);
  background: var(--control-hover);
}

body.roomView :is(.sectionTitle, .roomSection h2, :where(#formationTitle), .roomCredits h2, .roomHeader) {
  color: rgb(255, 255, 255);
  border-color: var(--theme-green);
  background: var(--theme-heading);
  border-radius: 3px;
}

body.roomView :is(.sectionTitle, .roomSection h2) small {
  color: rgb(229, 239, 229);
}

body.roomView :is(.accountLinks a, .backLink, input, textarea, select),
body.roomView .roomHeader .backLink {
  color: var(--theme-ink);
  background: var(--theme-card);
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: rgba(52, 75, 48, 0.08) 0px 1px 3px;
  text-shadow: none;
}

.roomView .roomHeader .backLink:hover {
  color: var(--theme-ink);
  background: var(--theme-soft);
}

body.roomView .roomHeader,
body.roomView .roomSidebar .sectionTitle {
  border: 1px solid rgb(50, 121, 93);
  border-radius: 5px 3px 5px 4px;
  font-weight: 800;
}

body.roomView :is(.roomHeader, .sectionTitle, .roomCredits h2) {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.3;
}

body.roomView :is(.sectionTitle, .roomCredits h2) {
  margin-top: 5px;
  margin-bottom: 4px;
}

.tallLayout.hasGame .roomHeader {
  margin-bottom: 0px;
}

:is(h1, h2, h3, h4, h5, h6),
.roomHeading {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0px;
}

body.roomView :is(.roomHeader, .roomSidebar .sectionTitle, .roomCredits h2) {
  background: var(--theme-heading);
  color: var(--theme-page);
  border-color: rgb(61, 125, 99);
  text-shadow: none;
  box-shadow: var(--heading-shadow);
}

@media (max-width: 900px) {
  body.roomView .roomHeader {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 8px;
    padding-right: 8px;
}

  body.roomView :is(.roomHeader, .roomSidebar .sectionTitle, .roomCredits h2) {
    border-radius: 0px;
}

  body.roomView .roomSidebar .sectionTitle {
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0px;
    padding: 3px 8px;
    line-height: 1.3;
}
}

@media (max-width: 600px) {
  body.roomView .roomSidebar .sectionTitle {
    font-size: 16px;
}
}