/* KathalSquaer UI (minimal, no build tools) */
:root{
  /* Make native form controls (select / date / etc.) follow the dark UI by default */
  color-scheme: dark;
  --bg:#0b0d12;
  --content-max: clamp(980px, 74vw, 1180px);
  /* Background strength (tunable per-page via body classes) */
  --bg-glow-a: .34;     /* top glow strength */
  --bg-dark-a: .72;    /* dark wash strength (tuned2) */
  --bg-vignette-a: .26; /* edge vignette strength (tuned2) */
  --panel:#111522;
  --panel2:#0f131e;
  --text:#e9edf6;
  --muted:#aab4c5;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.08);
  --accent:#7c5cff;
  --accent2:#00c2ff;
  --danger:#ff4d6d;
  --ok:#19d3a2;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --radius2: 18px;
  --pad: 12px;
  --pad2: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", Arial, sans-serif;

/* KathalSquaer: typography tokens */
--title-font: "KATHALSquaer", "Inter", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;

/* Menu tokens (theme-aware via body.theme-light / body:not(.theme-light) overrides below) */
--menu-surface: rgba(12,16,24,0.86);
--menu-surface-grad: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0.02));
--menu-border: rgba(255,255,255,.12);
--menu-text: rgba(244,248,255,0.92);
--menu-muted: rgba(210,220,238,0.78);
--menu-link-bg: rgba(255,255,255,0.08);
--menu-link-hover-bg: rgba(255,255,255,0.12);
--menu-link-hover-border: rgba(255,255,255,0.16);
--menu-icon: rgba(244,248,255,0.92);
}

/* =========================
   Background tuning (per page)
========================= */
body.rb2.rb2-lobby{
  --bg-glow-a: .38;
  --bg-vignette-a: .38;
}
body.rb2.rb2-play{
  --bg-glow-a: .24;
  --bg-vignette-a: .46;
}
body.room-chat, body.chat{
  --bg-glow-a: .30;
  --bg-vignette-a: .42;
}


/* Base reset */
html,body{height:100%;}
html{background:var(--bg);}
body{margin:0; padding:0; font-family:var(--font); background:transparent; color:var(--text); overflow-x:hidden;}

/* Light mode is controlled ONLY by body.theme-light.
   (Do not auto-switch via prefers-color-scheme, because it breaks the dark layout
    when the OS/browser is set to light.) */

/* ✅ ライト背景はライトテーマの時だけ */
body.theme-light{
  /* Native controls should follow the light UI ONLY when theme-light is enabled */
  color-scheme: light;
  background:
    radial-gradient(900px 500px at 15% 10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, var(--glow-2), transparent 60%),
    linear-gradient(180deg, var(--bg-light-1), var(--bg-light-2));

/* menu tokens (light) */
--menu-surface: rgba(250, 253, 255, 0.86);
--menu-surface-grad: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0.02));
--menu-border: rgba(0,0,0,.10);
--menu-text: rgba(11,16,32,0.92);
--menu-muted: rgba(91,101,122,0.95);
--menu-link-bg: rgba(255,255,255,0.18);
--menu-link-hover-bg: rgba(255,255,255,0.28);
--menu-link-hover-border: rgba(0,0,0,0.12);
--menu-icon: rgba(11,16,32,0.92);
}

a{ color:var(--accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* layout */
.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 14px 28px;
  display:grid;
  gap: 14px;
}
.header{
  padding: 6px 2px 0;
}
.header h1,.header h2{
  margin:0;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: inherit; /* keep sizes controlled by classes like .pageTitle */
}

/* Page header title: "KATHALSquaer > ページ名" (consistent sizing across pages) */
.pageTitle{
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  font-family: var(--title-font);
  display:flex;
  align-items:baseline;
  gap: 10px;
  white-space: nowrap; /* never wrap page title */

  /* IMPORTANT: do not rely on <h1> default sizes (some pages use h1/h2/div).
     Force a consistent title size everywhere. */
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.15;
}
.pageTitle .brand{ text-transform: uppercase; }
.pageTitle .sep{ opacity:.35; font-weight: 500; }
.pageTitle .page{
  letter-spacing: .02em;
  font-weight: 700;
  /* slightly smaller than the brand, but relative to the title size */
  font-size: .78em;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

/* Hover tooltip for long room names (set via data-tip/title in JS) */
.pageTitle .page[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.headerActions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* avoid overlap with global hamburger menu button */
  padding-right: 56px;
}
.header .sub{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.5;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: var(--pad2);
}

.card h3{
  margin:0 0 12px;
  font-size: 1.05rem;
}

/* form */
.field{
  display:grid;
  gap: 6px;
  margin-bottom: 10px;
}
.label{
  font-size:.92rem;
  color:var(--muted);
}
input, textarea, select, button{
  font: inherit;
}
input, textarea, select{
  width: 100%;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  outline: none;
}
textarea{ resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder{ color: rgba(170,180,197,.7); }

input:focus, textarea:focus, select:focus{
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 4px rgba(124,92,255,.18);
}

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

.badge{
  font-size:.82rem;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge.public{ color: rgba(25,211,162,.95); border-color: rgba(25,211,162,.25); }
.badge.private{ color: rgba(255,180,80,.95); border-color: rgba(255,180,80,.25); }

/* buttons */
.btn{
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:hover{ border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.08); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,194,255,.75));
  border-color: rgba(255,255,255,.08);
}
.btn.primary:hover{ box-shadow: 0 8px 24px rgba(124,92,255,.22); }
.btn.danger{
  border-color: rgba(255,77,109,.35);
  background: rgba(255,77,109,.10);
}
.btn.danger:hover{ background: rgba(255,77,109,.16); }
.btn.ghost{
  background: transparent;
}
.btn.pill{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .92rem;
}

/* room list */
.toolbar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

/* room list filters: keep (scope + search + reload) on a single row */

@media (max-width: 640px){
  .roomFilters{ flex-wrap: wrap; }
  .roomFilters input{ min-width: 0; width: 100%; flex-basis: 100%; }
}
.list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap: 10px;
}
.item{
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.item .meta{
  font-size: .85rem;
  color: var(--muted);
}
.item .title{
  font-size: 1.03rem;
  font-weight: 750;
}

/* chat */
.chatLog{
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 12px;
  min-height: 280px;
  background: rgba(255,255,255,.02);
  overflow:auto;
}
.chatRow{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.chatRow input{
  flex:1;
}
.msg{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  margin-bottom: 8px;
}
.msg .who{ font-weight: 750; }
.msg .text{ opacity:.95; }

details > summary{
  cursor:pointer;
  color: var(--muted);
}
.detailsBox{
  white-space: pre-wrap;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: rgba(255,255,255,.02);
}

/* dialog */
dialog{
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
dialog::backdrop{
  background: rgba(0,0,0,.32);
}



/* Slide-in menu (right drawer) */
.menuBtn{
  position: fixed;
  top: 14px;
right: max(16px, calc((100vw - var(--content-max)) / 2 + 16px));
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.menuBtn:hover{ border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.10); }
.menuBtn:active{ transform: translateY(1px); }



.menuIcon{
  width: 18px;
  height: 14px;
  display:grid;
  gap: 4px;
}
.menuIcon span{
  height: 2px;
  border-radius: 999px;
  background: var(--menu-icon);
  display:block;
}

.menuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.40);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.menuDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);
  z-index: 1001;
  transform: translateX(102%);
  transition: transform .18s ease;
  /* readability-first: make the drawer less transparent */
  background:
    var(--menu-surface-grad),
    var(--menu-surface);
  backdrop-filter: blur(14px);
  border-left: 1px solid var(--menu-border);
  box-shadow: -20px 0 40px rgba(0,0,0,.30);
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.menuDrawer .top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.menuDrawer .title{
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--menu-text);
}
.menuDrawer .closeBtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.menuDrawer .closeBtn:hover{ border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.08); }

/* Menu: quick shortcuts (vertical) */
.menuQuick{
  display:grid;
  gap: 8px;
}
.menuQuick .btn{
  width: 100%;
  justify-content: center;
}

.menuList{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
.menuLink{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--menu-border);
  background: var(--menu-link-bg);
  color: var(--menu-text);
}
.menuLink:hover{
  border-color: var(--menu-link-hover-border);
  background: var(--menu-link-hover-bg);
  text-decoration:none;
}

/* current page indicator (subtle cyber accent) */
.menuLink.isActive{
  border-color: rgba(98,210,255,0.40);
  box-shadow: inset 3px 0 0 rgba(98,210,255,0.55);
  background: rgba(98,210,255,0.08);
}

/* logout (move to end, keep readable) */
.menuLink.menuLogout{
  width: 100%;
  cursor: pointer;
  text-align: left;
  border-color: rgba(255, 80, 110, 0.28);
  background: rgba(255, 80, 110, 0.08);
}
.menuLink.menuLogout:hover{
  border-color: rgba(255, 80, 110, 0.36);
  background: rgba(255, 80, 110, 0.12);
}

/* Menu: section label + divider (used on Re:birth2 pages) */
.menuSectionLabel{
  margin-top: 2px;
  padding: 6px 6px 2px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--menu-muted);
}
.menuDivider{
  height: 1px;
  background: var(--menu-border);
  opacity: .75;
  margin: 4px 2px;
  border-radius: 999px;
}

/* character switcher in menu */
.menuCharSection{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line2);
  display: grid;
  gap: 10px;
}
.menuCharTitle{
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--menu-text);
}
.menuCharGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
}
.menuCharBtn{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.14);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.menuCharBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menuCharBtn:hover{
  background: rgba(255,255,255,0.22);
  border-color: rgba(18,32,58,0.20);
}
.menuCharBtn.isActive{
  border-color: rgba(98,210,255,0.55);
  box-shadow: 0 0 0 2px rgba(98,210,255,0.18);
}
.menuCharMark{
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
}
.menuCharFallback{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 900;
  color: rgba(12,18,30,0.85);
}
.menuHint{
  color: var(--menu-muted);
  font-size: .9rem;
  line-height: 1.5;
}

body.menuOpen .menuOverlay{ opacity: 1; pointer-events: auto; }
body.menuOpen .menuDrawer{ transform: translateX(0); }



/* simple list (characters) */
.list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.item{ border:1px solid var(--line2); background: rgba(255,255,255,.02); border-radius: 16px; padding: 12px; }
.item .title{ font-weight: 900; }
.item .meta{ color: var(--muted); font-size: .9rem; margin-top: 4px; }
.badge{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; border:1px solid var(--line2); font-size:.85rem; }

/* =============================
   Character browse (3 columns)
============================= */
.charlist-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.charlist-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.charlist-search{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.charlist-search input{ width:min(560px, 68vw); }

.char-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .char-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .char-grid{ grid-template-columns: 1fr; }
}

.char-card{
  position:relative;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 12px;
  display:grid;
  gap: 10px;
}
.char-head{ display:flex; gap:12px; align-items:flex-start; }
.char-icon{
  width:64px; height:64px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--panel2);
  overflow:visible;
  flex: 0 0 auto;
}
.char-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.char-main{ flex:1; min-width:0; display:grid; gap:4px; }
.char-meta{ font-size:.85rem; color: var(--muted); }
.char-name{ font-weight: 900; line-height: 1.25; }
.char-sub{ font-size:.92rem; color: var(--muted); line-height: 1.35; min-height: 1.35em; }
.char-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.char-actions .btn{ text-decoration:none; }

.favBtn{
  position:absolute;
  top:8px; right:8px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  border-radius: 999px;
  padding: 6px 10px;
  cursor:pointer;
  font-size: 14px;
  line-height: 1;
}

.charlist-pager{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top: 12px;
}



/* ===== Chat (new) ===== */
.chatTopBar{ display:grid; gap:10px; margin-bottom:12px; }
.meBadge{ display:flex; gap:12px; align-items:center; }
.meIcon{
  width:60px; height:60px; border-radius:14px;
  border:1px solid var(--line);
  background: var(--panel2);
  object-fit:cover;
}
.meMeta{ flex:1; display:grid; gap:6px; }
.meNameRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.meNameLabel{ color:var(--muted); font-size:.92rem; }
.meName{ width: 240px; max-width: 100%; }
.meLinks{ font-size:.92rem; color:var(--muted); }
.meLinks a{ color:var(--accent2); }

.iconPicker{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel2);
}
.iconPickerHead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.iconGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}
.iconPickItem{
  border:1px solid var(--line);
  background: transparent;
  border-radius: 14px;
  padding:0;
  cursor:pointer;
  overflow:visible;
}
.iconPickItem img{ width:100%; height:56px; object-fit:cover; display:block; }

.chatGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.chatCol{ display:grid; gap: 12px; }

.chatCard{
  border:1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--panel2);
  padding: 12px;
}
.msgHead{ display:flex; gap:10px; align-items:flex-start; }
.msgIcon{
  width:60px; height:60px; border-radius: 12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.05);
  object-fit:cover;
  flex:0 0 auto;
}
.msgIcon.ph{ display:block; }
.msgHeadText{ flex:1; }
.msgName{ font-weight:900; }
.msgMeta{ font-size:.85rem; color:var(--muted); }
.msgBody{ margin-top:8px; line-height:1.55; word-break:break-word; }

.trashBtn{
  border:1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  height: 34px;
  width: 38px;
  cursor:pointer;
}
.trashBtn:hover{ color: var(--danger); border-color: rgba(255,77,109,.5); }

.msgHeadActions{ display:flex; gap:6px; align-items:flex-start; }
.reportBtn{
  border:1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  height: 34px;
  width: 38px;
  cursor:pointer;
}
.reportBtn:hover{ color: #cc7a00; border-color: rgba(204,122,0,.35); }

.chatPager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 14px 0 10px;
}

.chatComposer{
  border-top: 1px solid var(--line2);
  padding-top: 12px;
  display:grid;
  gap:10px;
}
.chatInput{
  width:100%;
  min-height: 74px;
  resize: vertical;
}
.chatComposerRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.chatButtons{ display:flex; gap:8px; flex-wrap:wrap; }
.btn.mini{ padding: 6px 10px; font-size:.9rem; }

.replyBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(255,255,255,.03);
}

.replyLabel{
  color:var(--muted);
  font-size:.78rem;
  flex:0 0 auto;
}

.replyTarget{
  flex:1;
  min-width:0;
  text-align:left;
  border:1px solid var(--line);
  border-radius:10px;
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:6px 10px;
  cursor:pointer;
}
.replyTarget:hover{ border-color: rgba(120,200,255,.45); }

.replyClear{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor:pointer;
}
.replyClear:hover{ color:#fff; border-color: rgba(255,120,120,.42); }

.chatTargetRow{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.targetField{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--muted);
}

.targetInput{
  width:130px;
  border:1px solid var(--line2);
  border-radius:10px;
  background: rgba(255,255,255,.02);
  color:var(--text);
  padding:6px 8px;
}

.privateToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--muted);
}

.chatActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* ===== Chat message card actions (bottom-right icons) =====
   NOTE: message cards are <article class="chatCard">.
   The container on home is <section class="card chatCard">, so scope to article only.
*/
article.chatCard{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 12px 44px;
}
article.chatCard .msgBody{
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
article.chatCard .msgMeta{
  display:flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
}
article.chatCard .msgTime{
  font-size: .72rem;
  opacity: .55;
}
article.chatCard .chatActions{
  position: absolute;
  right: 12px;
  bottom: 10px;
  margin: 0;
  gap: 10px;
  align-items: center;
}
article.chatCard .msgStamp{
  font-size: .72rem;
  opacity: .55;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .01em;
  margin-right: 2px;
}
article.chatCard .msgAction{
  border: none;
  background: transparent;
  color: var(--muted);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
article.chatCard .msgAction svg{
  width: 14px;
  height: 14px;
  display:block;
}
article.chatCard .msgAction:hover{
  color: #d7f0ff;
  background: rgba(111,196,255,.10);
}
article.chatCard .msgActionDanger{
  color: rgba(255, 120, 140, .85);
}
article.chatCard .msgActionDanger:hover{
  color: var(--danger);
  background: rgba(255, 90, 100, .12);
}

@media (max-width: 560px){
  article.chatCard{
    padding: 10px 10px 42px;
  }
  article.chatCard .msgIcon{
    width: 52px;
    height: 52px;
  }
  article.chatCard .msgMeta{
    row-gap: 2px; /* スマホで名前行と日時行の間隔を詰める */
  }
  article.chatCard .chatActions{
    right: 10px;
    bottom: 8px;
    gap: 8px;
  }
  article.chatCard .msgStamp{
    font-size: .70rem;
    opacity: .52;
  }
  article.chatCard .msgAction{
    width: 24px;
    height: 24px;
  }
  article.chatCard .msgAction svg{
    width: 14px;
    height: 14px;
  }
}

.msgAction{
  border:1px solid var(--line2);
  background: transparent;
  color:var(--muted);
  border-radius:999px;
  padding:4px 9px;
  font-size:.76rem;
  cursor:pointer;
}
.msgAction:hover{
  color:#d7f0ff;
  border-color: rgba(111,196,255,.48);
  background: rgba(111,196,255,.08);
}

.previewBox{
  border:1px dashed var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  color: var(--text);
  line-height:1.55;
}

/* simple decorations */
.f1{ font-size: .92rem; opacity: .92; }
.f3{ font-size: 1.15rem; font-weight: 800; }
.f5{ font-size: 1.35rem; font-weight: 900; }

/* ===== Character icons (settings page) ===== */
.iconList{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.iconItem{
  position:relative;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border:1px solid var(--line2);
  overflow: visible; /* allow delete button to pop out */
  background: rgba(255,255,255,.02);
}
.iconItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 16px;
  display:block;
}
.iconX{
  position:absolute;
  top:-9px;
  right:-9px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,77,109,.95);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  line-height: 26px;
  text-align:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.iconX:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* -----------------------------
   Admin dashboard
------------------------------ */
.adminTabs{ display:flex; gap:10px; }
.adminPane{ margin-top: 12px; }
.adminList{ display:grid; gap:10px; }
.adminItem{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid var(--line2);
  border-radius: 16px;
  background: rgba(255,255,255,.6);
}
.dark .adminItem{ background: rgba(0,0,0,.25); }
.adminItemBody{ flex:1; display:grid; gap:4px; }
.adminTitle{ font-weight:900; }
.adminMeta{ color: var(--muted); font-size: .9rem; }
.adminMsg{ margin-top:6px; padding:8px 10px; border:1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.55); }
.dark .adminMsg{ background: rgba(0,0,0,.25); }
.adminActions{ display:flex; flex-direction:column; gap:8px; }
.adminIcon{ width:60px; height:60px; border-radius: 14px; border:1px solid var(--line2); object-fit:cover; flex:0 0 auto; }
.adminIcon.ph{ background: rgba(0,0,0,.08); }
.adminHint{ color: var(--muted); }
.adminError{ color: var(--danger); font-weight: 800; }
.character-header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}

.character-id {
  font-size: 14px;
  font-weight: 700;
  background: rgba(120,140,255,0.15);
  color: #4a5cff;
  padding: 4px 10px;
  border-radius: 10px;
}

.character-name {
  font-size: 26px;
  font-weight: 800;
}

/* ===== Character Settings (v4) ===== */
.csTopbar{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg, #f6f7f9);
  backdrop-filter: blur(6px);
}
.csTopbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 16px;
}
.csTitle{
  font-size: 20px;
  font-weight: 800;
  text-align:center;
}
.csActions{ display:flex; gap:8px; flex-wrap:wrap; }

.csCharCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
}
.csCharCardImg{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(0,0,0,.06);
}
.csCharCardMeta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.csBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.csBadge .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.csSection{ padding: 16px; }
.csSectionTitle{ font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.csGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 860px){
  .csGrid3{ grid-template-columns: 1fr; }
}

.csRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:start;
}
@media (max-width: 860px){
  .csRow2{ grid-template-columns: 1fr; }
}

.csPreviewCol{ display:flex; flex-direction:column; gap:10px; }
.csPreviewBox{ display:flex; align-items:center; gap:10px; }
.csPreviewImg{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(0,0,0,.06);
}

.csIconHelp{ margin-top: 6px; }

.csIconGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
}
body.dark .csIconGrid{
  background: rgba(0,0,0,.12);
  border-color: rgba(255,255,255,.12);
}


.csIconList{
  display:grid;
  grid-template-columns: repeat(auto-fill, 56px);
  gap:10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  align-content: start;
}
body.dark .csIconList{
  background: rgba(0,0,0,.12);
  border-color: rgba(255,255,255,.12);
}
.csIconImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: 16px;
}

.csIconItem{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow:visible;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  cursor: grab;
}
body.dark .csIconItem{
  background: rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.12);
}
.csIconItem.dragging{ opacity: .5; }
.csIconItem img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.csIconDel{
  position:absolute;
  top: -8px;
  right: -8px;
  width:  26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  padding:0;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
body.dark .csIconDel{
  background: rgba(20,20,20,.9);
  border-color: rgba(255,255,255,.12);
}

.csToast{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
}
body.dark .csToast{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
}
.csToast.ok{ border-color: rgba(0,160,80,.35); }
.csToast.err{ border-color: rgba(220,60,60,.35); }

/* ============================
   Character Pick (未選択/未所持導線)
============================ */
.csNeed{ padding:16px; }
.csNeedTitle{ font-size:18px; font-weight:900; }
.csPickList{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.csPickRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
}
body.dark .csPickRow{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.csPickMain{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.csPickName{ font-weight:900; overflow:visible; text-overflow:ellipsis; white-space:nowrap; }

.csIconDel:hover{ transform: scale(1.05); }
.csIconDel:active{ transform: scale(.98); }


/* =========================
   Future City Profile UI
========================= */
.profile-page{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(160,230,255,.55), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(130,190,255,.40), transparent 55%),
    linear-gradient(180deg, rgba(230,250,255,.85), rgba(245,250,255,.95));
  color:#0b2236;
}

.profile-hero{
  position: relative;
  padding: 22px 18px 14px;
}

.profile-hero .hero-bg{
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05)),
    url("/assets/hero_bg.png") center / cover no-repeat;
  box-shadow: 0 12px 40px rgba(0,30,60,.18);
  border: 1px solid rgba(255,255,255,.55);
}

.profile-hero .hero-card{
  margin-top: -110px;
  display:flex;
  gap:16px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 45px rgba(0,35,70,.22);
  backdrop-filter: blur(10px);
}

.hero-badge{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 6px;
}
.hero-cno{
  font-weight: 900;
  letter-spacing:.02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,170,255,.14);
  border: 1px solid rgba(0,170,255,.22);
}
.hero-uno{
  font-weight: 700;
  opacity:.85;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
}

.hero-name{
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.hero-avatarFrame{
  width: 160px;
  height: 160px;
  border-radius: 22px;
  padding: 10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 18px 45px rgba(0,35,80,.22),
    0 0 0 2px rgba(0,190,255,.14);
}
.hero-avatar{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,.5);
}

.profile-body{
  padding: 14px 18px 28px;
}

.profile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 980px){
  .profile-grid{ grid-template-columns: 1fr; }
  .profile-hero .hero-card{ flex-direction: column; align-items: flex-start; }
}

.panel{
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 14px 40px rgba(0,35,70,.14);
  backdrop-filter: blur(10px);
  padding: 14px 14px;
}

.panel-title{
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing:.04em;
  font-weight: 900;
  color: rgba(5,45,70,.88);
}


/* Panel header (reusable: title left, actions right) */
.panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* NOTE: ブロックタイトルは各ページ自由（英語化/大文字化はしない） */

.panel-divider{
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(0,140,220,.22), transparent);
}

.panel-text{
  white-space: pre-wrap;
  line-height: 1.65;
  color: rgba(5,30,55,.88);
  font-size: 14px;
}

.game-list{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.game-list .game-pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,170,255,.10);
  border: 1px solid rgba(0,170,255,.20);
  font-weight: 800;
  font-size: 13px;
}
.game-list .game-pill a{ color: inherit; text-decoration:none; }
.game-list .game-pill:hover{ filter: brightness(0.98); }


.icon20-grid{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}
.icon20-grid img{
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,35,70,.10);
  display:block;
}

.memo-wrap{ position: relative; }
.memo-uno{
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.06em;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,170,255,.12);
  border: 1px solid rgba(0,170,255,.22);
  color: rgba(0,40,70,.9);
}
/* =========================================
   HERO: text overlay + no white card
========================================= */
.profile-hero{ padding: 18px 18px 12px; }

.profile-hero .hero-bg{
  height: 420px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(900px 420px at 50% 100%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    url("/assets/hero_bg.png") center / cover no-repeat;
  box-shadow: 0 16px 50px rgba(0,30,60,.28);
  border: 1px solid rgba(255,255,255,.25);
}

/* 旧：白いカードを無効化 */
.profile-hero .hero-card{
  margin-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  /* 背景内に重ねる */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

/* キャラ画像：中央に大きめ（containで“現寸寄り”） */
.hero-avatarFrame{
  width: min(520px, 86vw);
  height: 360px;
  padding: 0 !important;
  border-radius: 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
}

.hero-avatar{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* “現寸寄り”：はみ出さず最大 */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  /* キャラが背景に溶けないように軽い影だけ */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

/* 文字：白中心で上に被せる */
.hero-left{
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 3;
  max-width: min(680px, 92vw);
  color: rgba(255,255,255,.95);
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
}

.hero-badge{ margin-bottom: 10px; }
.hero-cno{
  background: rgba(0,180,255,.18) !important;
  border: 1px solid rgba(180,245,255,.35) !important;
  color: rgba(255,255,255,.95) !important;
}
.hero-uno{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

.hero-name{
  font-size: clamp(34px, 4.2vw, 54px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.98) !important;
}

/* 右側ブロックは不要になるので非表示（残っててもOK） */
.hero-right{ display:none !important; }

/* 余白調整：heroの下にボディがくっつきすぎないように */
.profile-body{ padding-top: 10px; }

/* ============================
   Profile hero layer fix
   背景がキャラの上に来て隠れる問題を修正
============================ */

/* hero-card をレイヤーコンテナにする */
.profile-hero .hero-card{
  position: relative;
  isolation: isolate; /* 擬似要素の重なり事故を減らす */
}

/* 背景暗幕（hero-card::after / ::before）を“下”に固定 */
.profile-hero .hero-card::before,
.profile-hero .hero-card::after{
  z-index: 0 !important;
}

/* 左下UIは前面 */
.profile-hero .hero-left{
  position: absolute;
  z-index: 3 !important;
}

/* キャラ画像フレームは暗幕より上 */
.profile-hero .hero-avatarFrame{
  position: absolute;
  z-index: 2 !important;
}

/* スポットライトはキャラより下（でも暗幕より上） */
.profile-hero .hero-avatarFrame::before{
  z-index: 1 !important;
}

/* キャラ画像は最前面 */
.profile-hero img.hero-avatar{
  position: relative;
  z-index: 2 !important;
}

.profile-hero .hero-bg::after{
  opacity: 0.65; /* 0.45〜0.75で調整 */
}

/* ============================
   Hero avatar: fit inside hero (no clipping)
============================ */

/* ヒーロー自体の高さを確保（背景が帯にならない） */
.profile-hero .hero-card{
  height: clamp(320px, 42vw, 440px);
}

/* キャラ枠：ヒーロー内に必ず収める */
.profile-hero .hero-avatarFrame{
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* 枠はヒーローの高さに追従させる */
  height: 100% !important;
  width: min(520px, 80%) !important;

  display: flex !important;
  align-items: flex-end !important;   /* 下寄せ */
  justify-content: center !important;
  padding-bottom: 14px;              /* 床から少し浮かす */
}

/* 画像：枠内に全体が入る（切れない） */
.profile-hero img.hero-avatar{
  height: 88% !important;            /* ←ここが肝：ヒーロー内に収める */
  width: auto !important;
  max-width: 100% !important;

  object-fit: contain !important;
  object-position: center bottom !important;
}

/* ============================
   Profile hero final tweak
   - 中央合わせ
   - 足元の切れ防止
============================ */

.profile-hero .hero-avatarFrame{
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* 下を少し持ち上げて切れ防止 */
  padding-bottom: 56px !important;
}

/* 画像は少しだけ高さを下げて安全に収める（見た目ほぼ同じ） */
.profile-hero img.hero-avatar{
  height: 84% !important;   /* 88%→84%で足元の切れを回避 */
}


/* =========================================================
   Character Profile Layout (2026-01) - readable hero + fixed split
   - HERO: left icons panel + right main image
   - BODY: 36% : 64% fixed split (min widths, responsive stack)
   - No absolute overlay for icons (prevents weird overlap)
========================================================= */

html, body { height: 100%; }
body { overflow-x: hidden; }

.profile-page{
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
  min-height: calc(100vh - 60px);
}

/* HERO */
.profile-hero{ margin-top: 8px; }
.hero-bg{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 360px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}

/* the background image (already set inline or via existing rules) */
.hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
}

/* subtle bottom fade for readability */
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}

.hero-card{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 18px;
  height: 100%;
}

.hero-iconsPanel{
  align-self: stretch;
  border-radius: 18px;
  padding: 14px 12px;
  background: rgba(18,28,40,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.hero-iconsTitle{
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
}

.hero-iconsGrid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-content: start;
}

.hero-iconsGrid img{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

.hero-main{
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-avatarFrame{
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-avatar{
  max-height: 86%;
  max-width: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35));
}

.hero-overlay{
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.hero-badgeRow{
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.95);
  background: rgba(12,25,36,0.65);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.hero-badge.muted{
  opacity: 0.78;
}

.hero-name{
  margin: 0;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 8px 22px rgba(0,0,0,0.55);
}

/* BODY split */
.profile-grid{
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

.panel{
  border-radius: 18px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  padding: 16px;
}

.panel-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.panel-text{
  white-space: pre-wrap;
  line-height: 1.6;
}

.panel-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 14px 0;
}

.badge-uno{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

#unoPill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(0,140,255,0.25);
  background: rgba(207,236,255,0.7);
  color: rgba(0,70,120,0.95);
}

.profile-actions{
  margin-top: 14px;
}

@media (max-width: 900px){
  .hero-card{ grid-template-columns: 220px 1fr; }
  .hero-name{ font-size: 38px; }
}
@media (max-width: 720px){
  .hero-card{ grid-template-columns: 1fr; }
  .hero-iconsPanel{ order: 2; }
  .hero-avatarFrame{ min-height: 260px; }
  .profile-grid{ grid-template-columns: 1fr; }
  .hero-overlay{ left: 14px; bottom: 14px; }
  .hero-name{ font-size: 34px; }
}

/* ============================
   Character Profile (cp-*)
   2x2 layout:
   - Left top: main icon
   - Left bottom: game list
   - Right top: hero image + name + CNo/UNo
   - Right bottom: profile & memo
============================ */
.cp-page{ max-width: 1180px; margin: 0 auto; }
.cp-grid{ display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.cp-left, .cp-right{ display: grid; gap: 16px; }
.cp-panel{ padding: 16px; }

/* Character Profile: icon grid (max 20, 60x60) */
.cp-iconGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  gap: 10px;
  margin-top: 10px;
}
.cp-iconCell{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.cp-iconCell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}


.cp-iconWrap{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.cp-mainIcon{ width: 96px; height: 96px; border-radius: 18px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.12); background: rgba(255,255,255,.08); }

.cp-gameList{ display:flex; gap:10px; flex-wrap: wrap; }
.cp-gamePill{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-weight: 600; }

.cp-hero{ padding: 0; overflow: hidden; }
.cp-heroBg{ position: relative; padding: 18px; display:flex; align-items:flex-end; justify-content:center; }

/* HERO block actions (top-right) */
.cp-heroActions{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cp-heroActions .btn{
  padding: 7px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
body:not(.theme-light) .cp-heroActions .btn{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.16);
  color: rgba(245,248,255,0.92);
}
body.theme-light .cp-heroActions .btn{
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.10);
  color: rgba(10,14,22,0.92);
}
.cp-heroBg::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(110,200,255,.25), rgba(0,0,0,.02));
}
.cp-heroImg{
  position: relative;
  max-width: 400px;
  max-height: 800px;
  width: auto;
  height: auto;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  display:block;
}

.cp-heroOverlay{
  position:absolute;
  left: 18px;
  bottom: 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.cp-badgeRow{ display:flex; gap: 8px; flex-wrap: wrap; }
.cp-badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
}
.cp-badge.muted{ opacity: .85; font-weight: 600; }
.cp-name{
  margin: 0;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.cp-text{ position: relative; }
.cp-actions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; }


/* Compact blocks (reusable) */
.cq-tight{
  --cq-gap: 12px;
  --cq-pad: 14px;
}
.cq-tight .cp-grid{ gap: var(--cq-gap); }
.cq-tight .cp-left,
.cq-tight .cp-right{ gap: var(--cq-gap); }
.cq-tight .cp-panel{ padding: var(--cq-pad); }
.cq-tight .cp-hero{ padding: 0; }
.cq-tight .cp-iconGrid{ gap: 8px; }

@media (max-width: 980px){
  .cp-grid{ grid-template-columns: 1fr; }
  .cp-left{ order: 2; }
  .cp-right{ order: 1; }
  .cp-heroBg{ min-height: 260px; }
  .cp-heroOverlay{ left: 14px; bottom: 14px; }
}
:root{
  /* ===== Base Hue (ここだけ変えれば全体の色相が変わる) ===== */
  --base-hue: 205; /* 青寄りサイバー（200〜215おすすめ） */

  /* HSLで色相固定（ライトテーマ用） */
  --bg-light-1: hsla(var(--base-hue), 45%, 97%, 1);
  --bg-light-2: hsla(var(--base-hue), 45%, 94%, 1);

  --glow-1: hsla(var(--base-hue), 70%, 75%, 0.18);
  --glow-2: hsla(var(--base-hue), 65%, 70%, 0.12);

  --panel-bg: hsla(var(--base-hue), 40%, 98%, 0.18);
}

/* NOTE: body background is set by body.theme-light or body:not(.theme-light).
   (Avoid setting a global light background here.) */

/* もし“利用中”バッジがspanで付いてる場合の保険 */
.charSwitchBadge,
.char-switch-badge,
.menuCharBadge,
[data-role="charSwitchBadge"]{
  display:none !important;
}
/* キャラ切替の説明文・利用中ラベルを非表示（当たりやすい保険セレクタ） */
.charSwitchNote,
.char-switch-note,
.menuCharSwitchNote,
[data-role="charSwitchNote"]{
  display:none !important;
}

/* もし“利用中”バッジがspanで付いてる場合の保険 */
.charSwitchBadge,
.char-switch-badge,
.menuCharBadge,
[data-role="charSwitchBadge"]{
  display:none !important;
}
/* プロフィールのヒーロー内テキストを白寄りに */
.cp-hero, .cp-hero *{
  color: rgba(245,248,255,0.92);
}
.cp-badge{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}


/* === KathalSquaer Cyber Dark Override START ===
   Purpose:
   - Make dark theme consistent (panels/menu/text) without needing to delete earlier rules
   - Restore cyber hero background (hero_bg.png) + grid + static noise
   - Improve header readability
   - Keep theme-light optional (only when body.theme-light is present)
=== */

/* ---- 0) Base: default to DARK unless .theme-light is present ---- */
body{
  color: rgba(244,248,255,0.92);
}

/* Page background (dark cyber, calm) */
body:not(.theme-light){
  background:
    radial-gradient(1200px 700px at 30% 10%, rgba(98,210,255,0.10), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(25,211,162,0.07), transparent 60%),
    linear-gradient(180deg, #0b1220, #07131a) !important;

/* menu tokens (dark) */
--menu-surface: rgba(10, 14, 22, 0.86);
--menu-surface-grad: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0.02));
--menu-border: rgba(255,255,255,.12);
--menu-text: rgba(244,248,255,0.92);
--menu-muted: rgba(210,220,238,0.78);
--menu-link-bg: rgba(255,255,255,0.08);
--menu-link-hover-bg: rgba(255,255,255,0.12);
--menu-link-hover-border: rgba(255,255,255,0.16);
--menu-icon: rgba(244,248,255,0.92);
}

/* ---- 1) Panels: earlier .panel is white; override in dark ---- */
body:not(.theme-light) .panel,
body:not(.theme-light) .cp-panel{
  background: rgba(14,18,26,0.62) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35) !important;
  color: rgba(244,248,255,0.92) !important;
  backdrop-filter: blur(10px);
}

body:not(.theme-light) .panel-title{
  color: rgba(244,248,255,0.92) !important;
}
body:not(.theme-light) .panel-text,
body:not(.theme-light) .cp-text,
body:not(.theme-light) .muted,
body:not(.theme-light) .sub,
body:not(.theme-light) .hint,
body:not(.theme-light) .desc,
body:not(.theme-light) small{
  color: rgba(210,220,238,0.78) !important;
}

/* ---- 2) Header/topbar: ensure contrast even on bright pages ---- */
body:not(.theme-light) .header,
body:not(.theme-light) .csTopbar{
  background: rgba(7,10,14,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
}
body:not(.theme-light) .header a,
body:not(.theme-light) .csTopbar a{
  color: rgba(244,248,255,0.92) !important;
}

/* ---- 3) Inputs/buttons: calm (avoid bright pills) ---- */
body:not(.theme-light) input,
body:not(.theme-light) textarea,
body:not(.theme-light) select{
  background: rgba(0,0,0,0.22) !important;
  color: rgba(244,248,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
body:not(.theme-light) input:focus,
body:not(.theme-light) textarea:focus,
body:not(.theme-light) select:focus{
  outline: none;
  border-color: rgba(98,210,255,0.22) !important;
  box-shadow: 0 0 0 3px rgba(98,210,255,0.12) !important;
}
body:not(.theme-light) button,
body:not(.theme-light) .btn{
  background: rgba(255,255,255,0.08) !important;
  color: rgba(244,248,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
body:not(.theme-light) button:hover,
body:not(.theme-light) .btn:hover{
  background: rgba(255,255,255,0.12) !important;
}

/* ---- 4) Hero: restore cyber background + grid + static noise ---- */
/* NOTE: adjust URLs if your paths differ:
   - hero background: /hero_bg.png (or /asset/hero_bg.png)
   - noise: /asset/noise.png
*/
.cp-heroBg{
  border-radius: 0 !important; /* use notch corners instead of rounding if clip-path exists */
  overflow: hidden;
  background: #0b1220;
}

/* Base hero background image */
body:not(.theme-light) .cp-heroBg::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05);
  opacity: 1;
  z-index: 0;
  pointer-events:none;
}

/* Overlays: static noise + coordinate grid + spotlight + bottom dim */
body:not(.theme-light) .cp-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px) 0 0 / 52px 52px,
    radial-gradient(640px 420px at 50% 38%, rgba(255,255,255,0.12), transparent 66%),
    linear-gradient(180deg,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.28) 55%,
      rgba(0,0,0,0.68) 100%
    );
  z-index: 1;
  pointer-events:none;
}

/* Keep character image above overlays */
.cp-heroImg{
  position: relative;
  z-index: 2;
}

/* ---- 5) Name readability: wrap + underline full width + subtle plate ---- */
.cp-name{
  position: relative;
  z-index: 3;
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.08;
  text-shadow:0 10px 30px rgba(0,0,0,0.8);
color: #fff;
  padding: 10px 12px 14px 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.09));


}

/* micro label on the right (uses existing pseudo if you already have one; this is safe) */
.cp-name::before{
  content:"CHARACTER PROFILE";
  position:absolute;
  right: 10px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .60;
  color: rgba(244,248,255,0.85);
  pointer-events:none;
}

/* underline depends on name block width */
.cp-name::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, rgba(98,210,255,0.90), rgba(98,210,255,0.22), transparent);
  opacity: .95;
  pointer-events:none;
}

/* === KathalSquaer Cyber Dark Override END === */

/* ✅ hero画像は白板を出さない / 角は親(.cp-heroBg)に従う */
.cp-heroImg{
  position: relative;
  z-index: 2;
  max-width: 400px;
  max-height: 800px;
  width: auto;
  height: auto;

  border-radius: 0;          /* 角丸やめる */
  background: transparent;    /* 白い板やめる */
  box-shadow: none;           /* 必要なら親側に影を付ける */

  object-fit: contain;        /* cover → contain（切らない） */
  display: block;
}

/* ヒーロー背景レイヤー */
.cp-heroBg{
  position: relative;
  overflow: hidden;
}

/* 背景専用レイヤー */
.cp-heroBg::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05);
  z-index: 0;
}

/* 背景エフェクト（暗転・グリッド・ノイズ） */
.cp-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 55%,
      rgba(0,0,0,0.45) 100%
    );
  z-index: 1;
  pointer-events:none;
}

.menuBackdrop{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}

/* ヒーローは影響を受けない */
.cp-heroBg,
.cp-heroImg{
  filter: none !important;
}
/* ヒーロー背景レイヤー */
.cp-heroBg{
  position: relative;
  overflow: hidden;
}

/* 背景専用レイヤー */
.cp-heroBg::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05);
  z-index: 0;
}

/* 背景エフェクト（暗転・グリッド・ノイズ） */
.cp-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 55%,
      rgba(0,0,0,0.45) 100%
    );
  z-index: 1;
  pointer-events:none;
}

/* ===== HOTFIX: Hero background faint + remove text shadow/stroke ===== */

/* 1) hero_bg.png を「確実に」うっすら出す（/asset に統一） */
:root{
  --hero-bg-url: url("/assets/hero_bg.png") !important;
}

/* ヒーローの土台 */
.cp-heroBg{
  position: relative;
  overflow: hidden;
  background: #0b1220;
}

/* 背景画像（うっすら） */
.cp-heroBg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-bg-url) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* うっすら感：ここで調整（0.18〜0.35くらいが使いやすい） */
  opacity: 0.26 !important;

  /* 背景だけ少し整える */
  filter: saturate(0.70) contrast(1.06) brightness(0.98) !important;

  z-index: 0;
  pointer-events:none;
}

/* グリッド + ノイズ + 読みやすさ用の下暗転（背景の上に乗せる） */
.cp-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("/assets/noise.png") 0 0 / 220px 220px repeat,
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px) 0 0 / 52px 52px,
    radial-gradient(640px 420px at 50% 38%, rgba(255,255,255,0.10), transparent 66%),
    linear-gradient(180deg,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.26) 55%,
      rgba(0,0,0,0.60) 100%
    );
  z-index: 1;
  pointer-events:none;
}

/* キャラ画像は常に最前面 */
.cp-heroImg{
  position: relative;
  z-index: 2;
}

/* オーバーレイ（CNo/名前）はさらに前 */
.cp-heroOverlay{
  position:absolute;
  z-index: 3;
}

/* 2) 文字：text-shadow をやめて、外枠(webkit-stroke)も消す */
.cp-name{
  text-shadow: none !important;          /* 既存の shadow を無効化 */
  -webkit-text-stroke: 0 !important;     /* 外枠を無効化 */
  paint-order: normal !important;

  /* 代わりに“プレート”で読みやすく（文字そのものはクリーン） */
  background: linear-gradient(90deg, rgba(0,0,0,0.52), rgba(0,0,0,0.22)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24); /* プレート側だけ軽く */
  border-radius: 12px;
}

/* （任意）小ラベルもプレートに馴染ませる */
.cp-name::before{
  opacity: .62;
}
/* ===== Unified Page Header Title ===== */
.pageTitle{
  display:flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
}

.pageTitle .brand{
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:0.02em;
}

.pageTitle .sep{
  opacity:.35;
  font-weight:400;
}

.pageTitle .pageName{
  font-size:1.15rem;
  font-weight:600;
  opacity:.95;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ===== Base typography (unify across pages) ===== */
html, body{
  font-family: "Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* Avoid global input width affecting checkboxes/radios */
input[type="checkbox"], input[type="radio"]{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 4px;
}

/* Header page name: support both .page and .pageName (to avoid collisions with .page layout class) */
.pageTitle .page,
.pageTitle .pageName{
  letter-spacing: .02em;
  font-weight: 700;
  font-size: .78em;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

/* Tooltip: support both .page and .pageName */
.pageTitle .page[data-tip]:hover::after,
.pageTitle .pageName[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10,12,18,.95);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: min(560px, 90vw);
}

/* ===== Room create dock (bottom) ===== */
.createDock{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 60;
  pointer-events: none; /* enable only for inner */
}

.createDock .dockBar{
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(17,21,34,.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.createDock .dockBar .dockTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
}

.createDock .dockBar .dockBtn{
  display:flex;
  align-items:center;
  gap: 8px;
}

.createDock .dockPanel{
  pointer-events: auto;
  margin-top: 10px;
  border-radius: 18px;
  background: rgba(17,21,34,.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 0;
  transform: translateY(6px);
  opacity: 0;
  transition: max-height .22s ease, opacity .18s ease, transform .22s ease;
}

.createDock.open .dockPanel{
  max-height: 70vh;
  opacity: 1;
  transform: translateY(0);
}

.createDock .dockPanelInner{
  padding: 14px 14px 12px;
}

.createDock .dockPanelInner h3{
  margin: 0 0 10px;
}

.createDock .dockCloseRow{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

/* Ensure main content never hides behind the dock bar */
.hasCreateDock{
  padding-bottom: 120px !important;
}
/* ===== Room create dock (UI polish) ===== */
.dockDim{
  position: fixed;
  inset: 0;
  z-index: 59; /* under dock (60) */
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
body.dockOpen .dockDim{
  opacity: 1;
  pointer-events: auto;
}

/* bar */
.createDock .dockTitleIcon{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  font-weight: 800;
  line-height: 1;
}
.createDock .dockToggle{
  min-width: 84px;
}

/* panel head */
.createDock .dockPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.createDock .dockPanelTitle{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}
.createDock .dockPanelSub{
  margin-top: 3px;
  font-size: 12px;
}
.createDock .dockCloseX{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
}

/* message */
.createDock .dockMsg{
  min-height: 0;
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.4;
}
.createDock .dockMsg.isError{
  color: var(--danger, #ff6b6b);
}
.createDock .dockMsg.isOk{
  color: var(--ok, #7ee787);
}

/* form */
.createDock .dockForm{
  margin: 0;
}
.createDock .dockGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .createDock .dockGrid{
    grid-template-columns: 1fr;
  }
}
.createDock .dockField{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.createDock .dockFieldWide{
  grid-column: 1 / -1;
}
.createDock .dockLabel{
  font-size: 12px;
  font-weight: 700;
}
.createDock .req{
  color: var(--danger, #ff6b6b);
  font-weight: 800;
}
.createDock .dockHint{
  font-size: 11px;
}
.createDock .dockInput,
.createDock .dockTextarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.createDock .dockInput:focus,
.createDock .dockTextarea:focus{
  border-color: rgba(120,180,255,.55);
  box-shadow: 0 0 0 2px rgba(120,180,255,.18);
}
.createDock .dockTextarea{
  resize: vertical;
  min-height: 90px;
}
.createDock .dockCheckRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  user-select: none;
}
.createDock .dockCheckRow input{
  transform: translateY(1px);
}

.createDock .dockActions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.createDock .dockActionsRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* prevent accidental scroll-jank: open panel caps */
.createDock.open .dockPanelInner{
  max-height: calc(70vh - 56px);
  overflow: auto;
}

/* ============================
   Room Create Dock (bottom fixed)
   - closed: bar only, pinned bottom
   - open: panel slides up, page dim
============================ */

/* page dim (under dock) */
.dockDim{
  position: fixed;
  inset: 0;
  z-index: 79; /* under dock (80) */
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
body.dockOpen .dockDim{
  opacity: 1;
  pointer-events: auto;
}

/* dock wrapper */
#createDock.createDock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
  z-index: 80;
  pointer-events: none; /* enable only for inner */
}

/* bar */
#createDock.createDock .dockBar{
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(17,21,34,.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
#createDock.createDock .dockTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
#createDock.createDock .dockTitleIcon{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  font-weight: 800;
  line-height: 1;
}
#createDock.createDock .dockBtn{
  display:flex;
  align-items:center;
  gap: 8px;
}
#createDock.createDock .dockToggle{
  min-width: 84px;
}

/* panel */
#createDock.createDock .dockPanel{
  pointer-events: auto;
  margin-top: 10px;
  border-radius: 18px;
  background: rgba(17,21,34,.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: max-height .22s ease, opacity .18s ease, transform .22s ease;
}

/* when closed, don't let the panel contribute unexpected height */
#createDock.createDock:not(.open) .dockPanel{
  border-width: 0;
  margin-top: 0;
}

/* open */
#createDock.createDock.open .dockPanel{
  border-width: 1px;
  margin-top: 10px;
  max-height: 70vh;
  opacity: 1;
  transform: translateY(0);
}

#createDock.createDock .dockPanelInner{
  padding: 14px 14px 12px;
}
#createDock.createDock.open .dockPanelInner{
  max-height: calc(70vh - 56px);
  overflow: auto;
}

/* panel head */
#createDock.createDock .dockPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#createDock.createDock .dockPanelTitle{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}
#createDock.createDock .dockPanelSub{
  margin-top: 3px;
  font-size: 12px;
}
#createDock.createDock .dockCloseX{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
}

/* message */
#createDock.createDock .dockMsg{
  min-height: 0;
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.4;
}
#createDock.createDock .dockMsg.isError{ color: var(--danger, #ff6b6b); }
#createDock.createDock .dockMsg.isOk{ color: var(--ok, #7ee787); }

/* form */
#createDock.createDock .dockForm{ margin: 0; }
#createDock.createDock .dockGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  #createDock.createDock .dockGrid{ grid-template-columns: 1fr; }
}
#createDock.createDock .dockField{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
#createDock.createDock .dockFieldWide{ grid-column: 1 / -1; }
#createDock.createDock .dockLabel{
  font-size: 12px;
  font-weight: 700;
}
#createDock.createDock .req{
  color: var(--danger, #ff6b6b);
  font-weight: 800;
}
#createDock.createDock .dockHint{ font-size: 11px; }
#createDock.createDock .dockInput,
#createDock.createDock .dockTextarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
#createDock.createDock .dockInput:focus,
#createDock.createDock .dockTextarea:focus{
  border-color: rgba(120,180,255,.55);
  box-shadow: 0 0 0 2px rgba(120,180,255,.18);
}
#createDock.createDock .dockTextarea{
  resize: vertical;
  min-height: 90px;
}
#createDock.createDock .dockCheckRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  user-select: none;
}
#createDock.createDock .dockCheckRow input{
  transform: translateY(1px);
}
#createDock.createDock .dockActions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#createDock.createDock .dockActionsRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* page body dim / spacing */
.pageBody{ transition: filter .2s ease; }
body.dockOpen .pageBody{ filter: brightness(.88); }

/* Ensure main content never hides behind the dock bar */
.hasCreateDock{ padding-bottom: 120px !important; }

/* KathalSquaer UI (minimal, no build tools) */
:root{
  --content-max: 1100px;

  --bg:#0b0d12;
  --panel:#111522;
  --panel2:#0f131e;
  --text:#e9edf6;
  --muted:#aab4c5;
  --line:rgba(255,255,255,.12);

  --accent:#7c5cff;
  --accent2:#00c2ff;
  --danger:#ff4d6d;
  --ok:#19d3a2;

  --radius:14px;
  --pad1:10px;
  --pad2:16px;
  --pad3:24px;

  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}



/* =========================
   Layout
========================= */

.pageBody{
  padding:var(--pad3) var(--pad2);
}

/* 中央寄せ用（room専用にしない） */

.header{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 16px;
}



/* Page header container (align with .pageBodyNarrow) */
.pageHeader{
  padding: var(--pad3) var(--pad2) 0;
}
.pageSub{
  margin: 6px 0 0;
  color: var(--muted);
}
/* =========================
   Menu button
========================= */

.menuBtn{
  position:fixed;
  top:14px;
  right: max(16px, calc((100vw - var(--content-max)) / 2 + 16px));
  z-index:1000;
}

/* =========================
   Room list
========================= */

.roomList{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.roomListSection h1{
  margin-bottom:16px;
}

/* Append-only patch: place this at the END of your existing style.css */

/* =========================
   Desktop side mask: cyber circuit (v2)
   - html疑似要素で競合回避
   - 左右どちらも確実に出す
========================= */
@media (min-width: 1024px){
  :root{
    --sideMaskW: clamp(200px, 16vw, 420px);
    --cLineA: rgba(120, 210, 255, .22);
    --cLineB: rgba(120, 210, 255, .10);
    --cGlow:  rgba( 60, 180, 255, .18);
  }

  html::before,
  html::after{
    content:"";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sideMaskW);
    pointer-events: none;
    /* IMPORTANT: side mask must stay behind UI */
    z-index: 0;
    opacity: .95;

    /* “隠す”暗幕 + 回路ライン + 斜め配線 + ノード点 */
    background:
      /* 暗幕（外側を隠す） */
      linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.62)),

      /* うっすらグロー */
      radial-gradient(900px 700px at 50% 20%, var(--cGlow), transparent 60%),

      /* 回路グリッド（縦横） */
      repeating-linear-gradient(90deg, var(--cLineB) 0 1px, transparent 1px 18px),
      repeating-linear-gradient(0deg,  var(--cLineB) 0 1px, transparent 1px 24px),

      /* 斜め配線（回路感UP） */
      repeating-linear-gradient(135deg, rgba(120,210,255,.10) 0 1px, transparent 1px 32px),

      /* ノード点（点々） */
      radial-gradient(circle at 12px 14px, rgba(160,235,255,.22) 0 2px, transparent 3px) ,
      radial-gradient(circle at 42px 56px, rgba(160,235,255,.18) 0 1.6px, transparent 2.8px),
      radial-gradient(circle at 68px 22px, rgba(160,235,255,.16) 0 1.4px, transparent 2.6px);

    background-size:
      auto,
      auto,
      auto,
      auto,
      auto,
      90px 90px,
      110px 110px,
      130px 130px;

    background-blend-mode:
      normal,
      screen,
      normal,
      normal,
      screen,
      screen,
      screen,
      screen;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      inset 0 0 60px rgba(60,180,255,.12);

    filter: saturate(1.15);
  }

  html::before{
    left: 0;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      inset 0 0 60px rgba(60,180,255,.12),
      inset -2px 0 0 rgba(120,210,255,.18);
    /* 左→中央へフェード */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,.96) 60%, rgba(0,0,0,0));
            mask-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,.96) 60%, rgba(0,0,0,0));
  }

  html::after{
    right: 0;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      inset 0 0 60px rgba(60,180,255,.12),
      inset 2px 0 0 rgba(120,210,255,.18);
    /* 右→中央へフェード */
    -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,.96) 60%, rgba(0,0,0,0));
            mask-image: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,.96) 60%, rgba(0,0,0,0));
  }
}

/* =========================
   Cyber underline (reusable)
========================= */

.cyber-underline{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

/* メインライン */
.cyber-underline::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(120,210,255,0),
    rgba(120,210,255,.75),
    rgba(120,210,255,0)
  );

  box-shadow: 0 0 6px rgba(120,210,255,.35);
  opacity: .85;
}

/* 回路ノード（点） */
.cyber-underline::before{
  content:"";
  position: absolute;
  left: 18%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;

  background: rgba(140,230,255,.9);
  box-shadow: 0 0 6px rgba(140,230,255,.7);
  opacity: .9;
}

/* =========================
   Tag accent (cyber subtle)
========================= */

.tag,
.roomTag{
  position: relative;
  padding-bottom: 2px;
}

/* ほんのり下線 */
.tag::after,
.roomTag::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(120,210,255,0),
    rgba(120,210,255,.55),
    rgba(120,210,255,0)
  );

  opacity: .6;
}

/* 小さなノード（点） */
.tag::before,
.roomTag::before{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;

  background: rgba(140,230,255,.7);
  opacity: .7;
}

/* =========================
   Button accent (cyber line)
========================= */

.btn,
button{
  position: relative;
}

/* hover / focus 時だけ出る細い芯線 */
.btn:hover::after,
button:hover::after,
.btn:focus-visible::after,
button:focus-visible::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(120,210,255,0),
    rgba(120,210,255,.75),
    rgba(120,210,255,0)
  );

  box-shadow: 0 0 6px rgba(120,210,255,.35);
  opacity: .8;
  pointer-events: none;
}

.btn.primary::after{
  width: 32px;
  opacity: .95;
}
/* =========================
   Page title alignment (left)
========================= */

.pageTitleRow{
  justify-content: flex-start; /* ← 中央寄せを解除 */
}

.pageTitle{
  margin-left: 0;
  text-align: left;
}

/* 発言のアイコン/名前リンク（自然にクリック可能に） */
.msgProfileLink{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.msgProfileLink:hover{
  text-decoration: underline;
  text-decoration-color: rgba(120,210,255,.55);
  text-underline-offset: 3px;
}

/* --- rb2: 背景は必ず背面 --- */
html { background: #0a1018; }
body { position: relative; z-index: 0; }

/* もし body::before を使っているなら “絶対に背面” に固定 */
body::before, body::after {
  pointer-events: none !important;
  z-index: -10 !important;
}

/* --- rb2: “透けすぎ”防止（ここが本命） --- */
.rb2 .rb2-card,
.rb2 .panel,
.rb2 .card {
  /* 透けを抑えて「背景が乗って見える」を根本解決 */
  background: rgba(12, 16, 22, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px);
}

/* テキストが読みやすくなる（任意） */
.rb2 .muted, .rb2 .hint {
  color: rgba(255,255,255,0.72) !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-10;

  /* 暗幕を少し弱める */
  background:
    radial-gradient(1200px 700px at 50% 0%,
      rgba(120,170,255,0.10),
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.78)
    );
}

/* === Root side mask layering: keep decorative masks behind UI (global) === */
@media (min-width: 1024px){
  body{ position: relative; z-index: 2; }
  /* Ensure common top-level wrappers are above masks */
  body > .page,
  body > .rb2-wrap,
  body > .rb2,
  body > .app,
  body > #app{
    position: relative;
    z-index: 2;
  }
}



/* =========================
   Unified BG System v3 (single source of truth)
   - fixed to viewport
   - never overlays panels (negative z-index)
   - brightness controlled via CSS vars above
========================= */
html, body{
  background: var(--bg);
}
body{
  position: relative;
  min-height: 100vh;
  isolation: isolate; /* create stacking context so negatives stay behind */
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 680px at 50% -14%, rgba(130,190,255,var(--bg-glow-a)), rgba(10,18,32,0) 62%),
    radial-gradient(920px 520px at 18% 28%, rgba(80,170,255,.10), rgba(0,0,0,0) 60%),
    radial-gradient(920px 520px at 86% 36%, rgba(80,170,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(4,6,10,0) 0%, rgba(4,6,10,var(--bg-dark-a)) 66%, rgba(4,6,10,.88) 100%),
    url("/assets/noise.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, 260px 260px;
  background-position: 50% 0%, 0% 0%, 100% 0%, 0 0, 0 0;
  opacity: 1;
  filter: saturate(1.03);
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1400px 900px at 50% 10%, rgba(0,0,0,0) 55%, rgba(0,0,0,var(--bg-vignette-a)) 100%),
    radial-gradient(1000px 800px at 0% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 800px at 100% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%);
}

/* Make sure main surfaces sit above the bg system */
.pageBody, .pageHeader, .rb2-wrap, .dock, .header, main, .main, #app{
  position: relative;
  z-index: 1;
}

/* =========================
   Rules / News Heading UI
   ========================= */

/* h2 : セクション区切り */
.rb-card h2 {
  position: relative;
  padding-left: 14px;
  margin: 24px 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8f0ff;
}

.rb-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 4px;
  height: 1.4em;
  background: linear-gradient(
    180deg,
    rgba(120, 180, 255, 0.9),
    rgba(120, 180, 255, 0.2)
  );
  border-radius: 2px;
}

/* h2 下のうっすら区切り線 */
.rb-card h2::after {
  content: "";
  display: block;
  margin-top: 6px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(120,180,255,0.4),
    rgba(120,180,255,0.05)
  );
}

/* h3 : 定義・小項目 */
.rb-card h3 {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #cfe0ff;
}

/* h3 の控えめなマーカー */
.rb-card h3::before {
  content: "◆";
  margin-right: 6px;
  color: rgba(120,180,255,0.7);
  font-size: 0.8em;
}

/* =========================
   News Timeline Cards
   ========================= */

.newsTimeline{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top: 10px;
}

/* 日付の見出し */
.newsDay{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.newsDayTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  color: #e8f0ff;
  letter-spacing: .02em;
}

.newsDayTitle::before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background: rgba(120,180,255,0.8);
  box-shadow: 0 0 14px rgba(120,180,255,0.35);
}

/* その日付のカード群 */
.newsList{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* 1件のニュースカード */
.newsCard{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(10,14,22,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.newsCardHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}

.newsTitle{
  font-weight: 700;
  color: #eef4ff;
  font-size: 1.02rem;
}

.newsMeta{
  opacity: .75;
  font-size: .85rem;
  white-space: nowrap;
}

.newsBody{
  margin-top: 8px;
  line-height: 1.75;
  color: rgba(235,245,255,0.92);
  white-space: pre-wrap; /* 改行を保つ */
}

/* 空表示 */
.newsEmpty{
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.12);
  opacity: .85;
}

/* =========================
   Menu footer (Rules / News)
========================= */
.menuDrawerFooter{
  margin-top: auto;
  padding: 12px 0 6px;
  display: grid;
  gap: 10px;
}
.menuFooterBtns{
  display:flex;
  gap:10px;
}
.menuFooterBtn{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--menu-link-bg);
  border: 1px solid var(--menu-border);
  color: var(--menu-text);
  text-decoration:none;
}
.menuFooterBtn:hover{
  background: var(--menu-link-hover-bg);
  border-color: var(--menu-link-hover-border);
}


/* =========================
   Unified page background (index baseline, no noise)
   ========================= */
body,
body.theme-dark,
body:not(.theme-light){
  background:
    radial-gradient(1200px 700px at 30% 10%, rgba(98,210,255,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(25,211,162,.07), transparent 60%),
    linear-gradient(180deg, #0b1220, #07131a) !important;
  background-attachment: fixed, fixed, fixed;
}

/* Remove heavy static noise layer from full-page background */
body::before{
  content: none !important;
  background: none !important;
}

/* Keep lightweight grid / vignette only */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 52px 52px,
    radial-gradient(900px 500px at 50% 8%, rgba(130,210,255,.07), transparent 70%),
    radial-gradient(1400px 900px at 50% 10%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%) !important;
  opacity: .55;
}

/* =========================
   Mobile polish (no horizontal overflow)
   - Page title can wrap
   - Reduce side padding (more usable width)
========================= */
@media (max-width: 560px){
  .page{
    padding: 18px 10px 22px;
  }
  .pageHeader{
    padding-left: 10px;
    padding-right: 10px;
  }
  .pageBody{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Long titles (e.g., character profile) should not force horizontal scroll */
  .pageTitle{
    white-space: normal !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pageTitle .brand{
    font-size: 1.15rem;
    letter-spacing: .08em;
  }
  .pageTitle .page,
  .pageTitle .pageName,
  .pageTitle .cyber-underline{
    max-width: 100%;
  }
}

/* =====================================================================
   Cyber SF Theme v2 (chat + Re:birth2)
   2026-02-23
   - sharper cut corners
   - HUD corner brackets
   - more cyberpunk background (grid + scanlines)
===================================================================== */

:root{
  --sf-notch: 12px;
  --sf-notch-sm: 9px;
  --sf-notch-xs: 7px;

  --sf-surface: rgba(10, 14, 20, 0.78);
  --sf-surface2: rgba(8, 10, 16, 0.76);
  --sf-surface3: rgba(6, 8, 12, 0.72);

  --sf-border: rgba(120, 210, 255, 0.18);
  --sf-border-strong: rgba(120, 210, 255, 0.34);
  --sf-border-violet: rgba(124, 92, 255, 0.22);

  --sf-glow: rgba(0, 194, 255, 0.16);
  --sf-glow2: rgba(124, 92, 255, 0.12);

  --sf-hi: rgba(244, 248, 255, 0.94);
  --sf-lo: rgba(210, 220, 238, 0.78);

  --sf-grid-a: .22;
  --sf-grid2-a: .12;
  --sf-scan-a: .18;
}

/* ----- Background: cyber grid + scanlines (dark) ----- */
body:not(.theme-light){
  background: transparent !important;
}
body:not(.theme-light)::before{
  content:"" !important;
  position: fixed;
  inset: -1px;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    radial-gradient(900px 600px at 14% 10%, rgba(0,194,255,.18), transparent 60%),
    radial-gradient(900px 600px at 86% 18%, rgba(124,92,255,.16), transparent 62%),
    radial-gradient(1200px 700px at 50% -12%, rgba(140,200,255,.12), transparent 65%),
    linear-gradient(180deg, #070a12 0%, #050b12 46%, #03060b 100%);
  filter: saturate(1.04) contrast(1.02);
}
body:not(.theme-light)::after{
  content:"" !important;
  position: fixed;
  inset: -1px;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    /* major grid */
    linear-gradient(rgba(120,210,255,var(--sf-grid-a)) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(120,210,255,var(--sf-grid-a)) 1px, transparent 1px) 0 0 / 64px 64px,

    /* minor grid */
    linear-gradient(rgba(120,210,255,var(--sf-grid2-a)) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(120,210,255,var(--sf-grid2-a)) 1px, transparent 1px) 0 0 / 16px 16px,

    /* scanlines */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,var(--sf-scan-a)) 0px,
      rgba(255,255,255,var(--sf-scan-a)) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 5px
    ),

    /* vignette */
    radial-gradient(1400px 900px at 50% 12%, rgba(0,0,0,0) 54%, rgba(0,0,0,.68) 100%);
  opacity: .42;
}

/* keep all UI above background */
body{ isolation: isolate; }
body > *{ position: relative; z-index: 1; }

/* ----- Cut-corner utility ----- */
.sf-cut{
  --_sf-notch: var(--sf-notch);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
}

/* ----- Main surfaces (cards / panels) ----- */
.card,
article.chatCard,
.rb2 .rb2-card,
.rb2rb-card,
.modalPanel,
.iconModalBox{
  position: relative;
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16)),
    var(--sf-surface) !important;
  border: 1px solid var(--sf-border-strong) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(0,194,255,.06) inset,
    0 0 34px rgba(0,194,255,.08);
  backdrop-filter: blur(10px);
}

/* HUD corner brackets */
.card::after,
article.chatCard::after,
.rb2 .rb2-card::after,
.rb2rb-card::after,
.modalPanel::after,
.iconModalBox::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .92;
  background:
    /* TL */
    linear-gradient(90deg, rgba(120,210,255,.70), rgba(120,210,255,0)) 0 0 / 34px 2px no-repeat,
    linear-gradient(180deg, rgba(120,210,255,.70), rgba(120,210,255,0)) 0 0 / 2px 34px no-repeat,
    /* TR */
    linear-gradient(270deg, rgba(124,92,255,.55), rgba(124,92,255,0)) 100% 0 / 34px 2px no-repeat,
    linear-gradient(180deg, rgba(124,92,255,.55), rgba(124,92,255,0)) 100% 0 / 2px 34px no-repeat,
    /* BL */
    linear-gradient(90deg, rgba(0,194,255,.55), rgba(0,194,255,0)) 0 100% / 34px 2px no-repeat,
    linear-gradient(0deg, rgba(0,194,255,.55), rgba(0,194,255,0)) 0 100% / 2px 34px no-repeat,
    /* BR */
    linear-gradient(270deg, rgba(120,210,255,.45), rgba(120,210,255,0)) 100% 100% / 34px 2px no-repeat,
    linear-gradient(0deg, rgba(120,210,255,.45), rgba(120,210,255,0)) 100% 100% / 2px 34px no-repeat;
}

/* Hover lift */
.card:hover,
article.chatCard:hover,
.rb2 .rb2-card:hover{
  border-color: rgba(120,210,255,.48) !important;
  box-shadow:
    0 26px 86px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(0,194,255,.10) inset,
    0 0 40px rgba(0,194,255,.10);
}

/* ----- Buttons (edge / HUD) ----- */
.btn,
.rb2-btn,
button.small{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  border-color: rgba(120,210,255,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.14)),
    rgba(255,255,255,.03) !important;
}
.btn:hover,
.rb2-btn:hover,
button.small:hover{
  border-color: rgba(120,210,255,.45) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.30), 0 0 18px rgba(0,194,255,.10);
}
.btn.primary{
  background:
    linear-gradient(135deg, rgba(0,194,255,.90), rgba(124,92,255,.82)) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ----- Chips / badges ----- */
.badge,
.pillBadge,
.resultTag,
.rb2-badge,
.chip,
.msgPrivateBadge{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-xs);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(120,210,255,.18) !important;
}

/* ----- Inputs (cyber surface) ----- */
input, textarea, select{
  border-color: rgba(120,210,255,.14) !important;
  background: rgba(0,0,0,.20) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(0,194,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,194,255,.14) !important;
}

/* =====================================================================
   Chat: message cards + reply preview
===================================================================== */
article.chatCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16)),
    rgba(10,14,22,.72) !important;
  border-color: rgba(120,210,255,.22) !important;
}
article.chatCard.isPrivate{
  border-color: rgba(255,180,80,.28) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,180,80,.08) inset,
    0 0 34px rgba(255,180,80,.06);
}
article.chatCard .msgName a{
  color: var(--sf-hi);
  text-decoration: none;
}
article.chatCard .msgName a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(0,194,255,.45);
  text-underline-offset: 3px;
}
article.chatCard .msgText a{
  color: rgba(160,230,255,.95);
  text-decoration: underline;
  text-decoration-color: rgba(160,230,255,.35);
  text-underline-offset: 3px;
}
article.chatCard .msgIcon{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  border-color: rgba(120,210,255,.24) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 20px rgba(0,194,255,.08);
}
.msgReplyBox{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  background: rgba(0,0,0,.18) !important;
  border-color: rgba(120,210,255,.14) !important;
}

/* =====================================================================
   Re:birth2: unify surfaces (incl. decks / rulebook)
===================================================================== */
.rb2 .rb2-row input,
.rb2 .rb2-row select,
.rb2-decks input,
.rb2-decks select{
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(120,210,255,.16) !important;
}

.rb2-decks .card,
.rb2-decks .badge,
.rb2-decks .kpi,
.rb2-decks .skillItem,
.rb2-decks .rotItem,
.rb2-decks .talkItem,
.rb2-decks .iconPickMini,
.rb2-decks .iconModalBox,
.rb2-decks .fxSkillItem{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16)),
    rgba(10,14,22,.72) !important;
  border-color: rgba(120,210,255,.18) !important;
}

/* Logs list item */
.rb2 .logItem{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  border-color: rgba(120,210,255,.18) !important;
  background: rgba(0,0,0,.14) !important;
}
.rb2 .logItem:hover{
  border-color: rgba(120,210,255,.40) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 20px rgba(0,194,255,.08);
}

/* Stage nodes (lobby map) */
.rb2 .stageNode{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
  background: rgba(10,14,22,.88) !important;
  border-color: rgba(120,210,255,.22) !important;
}
.rb2 .stageNode.active{ outline: 2px solid rgba(0,194,255,.55) !important; }
.rb2 .stageNode.cleared{ box-shadow: 0 0 0 1px rgba(100,255,190,.30) inset, 0 0 20px rgba(100,255,190,.10); }

/* Mobile: lighter notch (avoid over-cutting tiny UI) */
@media (max-width: 560px){
  :root{ --sf-notch: 10px; --sf-notch-sm: 8px; --sf-notch-xs: 6px; }
}


/* =====================================================================
   Cyber SF Theme v3 (menu + header + chat head + logo)
   2026-02-23
   - Brand logo image in page titles
   - Stronger SF header bands for chat
   - Overscroll/scrollback polish (background stays fixed)
   - Re:birth2 lobby controls match cut-corner theme
===================================================================== */

/* Prevent "background scroll/bounce" feeling */
html, body{
  overscroll-behavior: none;
}
body{
  overflow-x: hidden;
}

/* ---- Title: replace brand text with logo image (keeps text for a11y) ---- */
:root{
  /* Brand logo size is responsive. Increase if it feels small on certain pages. */
  --brand-h: clamp(34px, 3.2vw, 54px);
}
body.home{
  /* Home tends to have more space → slightly larger brand */
  --brand-h: clamp(36px, 3.6vw, 60px);
}

.pageTitle .brand{
  display:inline-block;
  height: var(--brand-h);
  width: calc(var(--brand-h) * 3.2);
  max-width: min(42vw, 340px);
  background: url(/assets/logo_kathal_600.png) no-repeat left center / contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  opacity: .92 !important;
  filter: drop-shadow(0 0 16px rgba(0,194,255,.14));
  transform: translateY(1px);
  flex: 0 0 auto;
}

@media (max-width: 560px){
  :root{ --brand-h: clamp(28px, 7vw, 44px); }
  body.home{ --brand-h: clamp(30px, 7.5vw, 46px); }
  .pageTitle .brand{ max-width: min(56vw, 280px); }
}

@media (min-resolution: 2dppx){
  .pageTitle .brand{
    background-image: url(/assets/logo_kathal_1200.png);
  }
}


/* ---- Page title alignment (logo + page name) ---- */
.pageTitle{
  align-items: center !important;
  line-height: 1.15;
}
.pageTitle .brand{
  /* logo image box */
  transform: none !important;
}
.pageTitle .sep{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transform: translateY(-1px);
  opacity: .42;
}
.pageTitle .page,
.pageTitle .pageName,
.pageTitle .cyber-underline{
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 850;
  letter-spacing: .04em;
}
.pageTitle .page,
.pageTitle .pageName{
  font-size: clamp(16px, 1.6vw, 20px) !important;
}

@media (max-width: 560px){
  .pageTitle .page,
  .pageTitle .pageName,
  .pageTitle .cyber-underline{
    font-size: clamp(14px, 5vw, 18px);
    letter-spacing: .03em;
  }
}

/* ---- Page header: subtle HUD underline + corner brackets ---- */
.pageHeader{
  position: relative;
}
.pageHeader::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,194,255,.30), rgba(124,92,255,.22), transparent);
  opacity: .9;
  pointer-events:none;
}
.pageTitle .cyber-underline{
  position: relative;
}
.pageTitle .cyber-underline::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.55), rgba(124,92,255,.35), rgba(0,194,255,.0));
  opacity: .75;
  pointer-events:none;
}

/* ---- Home: Global chat head band (stronger SF) ---- */
#globalChat > .panel-head{
  position: relative;
  margin: -16px -16px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(120,210,255,.18);
  background:
    linear-gradient(90deg, rgba(0,194,255,.14), rgba(124,92,255,.10) 55%, rgba(255,255,255,0)),
    rgba(8,10,16,.30);
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
}
#globalChat > .panel-head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background:
    linear-gradient(90deg, rgba(0,194,255,.55), rgba(124,92,255,.30), rgba(255,255,255,0));
  -webkit-mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
#globalChat > .panel-head > div:first-child{
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(0,194,255,.12);
}
#globalChat > .panel-head #gchatStatus{
  opacity: .88;
}

/* ---- Room chat: top bar as HUD head band ---- */
body.room-chat .pageBody > .card > .chatTopBar{
  position: relative;
  margin: -16px -16px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(120,210,255,.18);
  background:
    linear-gradient(90deg, rgba(0,194,255,.12), rgba(124,92,255,.10) 58%, rgba(255,255,255,0)),
    rgba(8,10,16,.26);
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  );
}
body.room-chat .pageBody > .card > .chatTopBar::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 10px;
  width: 2px;
  height: calc(100% - 20px);
  background: linear-gradient(180deg, rgba(0,194,255,.0), rgba(0,194,255,.55), rgba(124,92,255,.25), rgba(0,194,255,.0));
  opacity:.75;
  pointer-events:none;
}
body.room-chat .meBadge{
  padding-left: 10px;
}

/* ---- Re:birth2 lobby / list controls: cut-corner unify ---- */
body.rb2 .rb2-card{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  ) !important;
  border-color: rgba(120,210,255,.18) !important;
  background: rgba(10, 14, 20, 0.74) !important;
  box-shadow: 0 18px 64px rgba(0,0,0,.44), 0 0 0 1px rgba(0,194,255,.06) inset !important;
}
body.rb2 .rb2-btn,
body.rb2 .rb2-row input,
body.rb2 .rb2-row select,
body.rb2 .chips,
body.rb2 .stageWrap,
body.rb2 .stageMap,
body.rb2 .stageNode,
body.rb2 .pvItem{
  border-radius: 0 !important;
  --_sf-notch: var(--sf-notch-sm);
  clip-path: polygon(
    var(--_sf-notch) 0,
    calc(100% - var(--_sf-notch)) 0,
    100% var(--_sf-notch),
    100% calc(100% - var(--_sf-notch)),
    calc(100% - var(--_sf-notch)) 100%,
    var(--_sf-notch) 100%,
    0 calc(100% - var(--_sf-notch)),
    0 var(--_sf-notch)
  ) !important;
}
body.rb2 .rb2-btn{
  border-color: rgba(120,210,255,.20) !important;
  background: rgba(255,255,255,.04) !important;
}
body.rb2 .rb2-btn:hover{
  border-color: rgba(0,194,255,.45) !important;
  background: rgba(0,194,255,.10) !important;
}
body.rb2 .rb2-row input,
body.rb2 .rb2-row select{
  border-color: rgba(120,210,255,.18) !important;
  background: rgba(0,0,0,.20) !important;
}
body.rb2 .stageNode{
  border-color: rgba(120,210,255,.22) !important;
  background: rgba(20,24,35,.92) !important;
}
body.rb2 .stageNode.active{
  outline: 2px solid rgba(0,194,255,.55) !important;
}
body.rb2 .stageNode.cleared{
  box-shadow: 0 0 0 1px rgba(94,220,150,.45) inset !important;
}

/* ---- Scrollbar: thinner, more HUD ---- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(0,194,255,.22), rgba(124,92,255,.16));
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 999px;
}
*::-webkit-scrollbar-track{
  background: rgba(0,0,0,.14);
}

/* === Patch: readable decoration buttons + decorated inline images === */
.fmtBtn{
  min-width: 34px;
  height: 30px;
  padding: 4px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}
.fmtRubyBtn ruby{ line-height: 1; }
.fmtRubyBtn rt{ font-size: 9px; line-height: 1; }
.fmtImageBtn{
  min-width: 38px;
  gap: 0;
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
  letter-spacing: .02em;
  text-transform: none;
}
.fmtImageBtn::before{
  content: none !important;
}
.decoratedImage{
  display: block;
  width: auto;
  max-width: min(100%, 520px);
  max-height: 260px;
  margin: 8px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  object-fit: contain;
  background: rgba(0,0,0,.22);
}

/* login required gate */
.loginRequiredCard{max-width:980px;margin:0 auto;}
.loginRequiredBody{padding:18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.loginRequiredBody p{margin:0;color:rgba(235,245,255,.82);}

/* === Patch: chat decorated image fit inside cards === */
.decoratedImage,
.msgText img.decoratedImage,
.msgBody img.decoratedImage,
.msgReplyBody img.decoratedImage,
.previewBox img.decoratedImage,
.chatPreviewBox img.decoratedImage,
#gPreview img.decoratedImage,
#previewBox img.decoratedImage{
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 560px);
  max-height: 260px;
  object-fit: contain;
  box-sizing: border-box;
  margin: 8px 0;
}
.msgText,
.msgBody,
.msgReplyBody,
.previewBox,
.chatPreviewBox{
  overflow-wrap: anywhere;
}
.msgText .decoratedImage,
.msgBody .decoratedImage,
.msgReplyBody .decoratedImage,
.previewBox .decoratedImage,
.chatPreviewBox .decoratedImage{
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
}
@media (max-width: 700px){
  .decoratedImage,
  .msgText img.decoratedImage,
  .msgBody img.decoratedImage,
  .msgReplyBody img.decoratedImage,
  .previewBox img.decoratedImage,
  .chatPreviewBox img.decoratedImage{
    max-width: 100%;
    max-height: 260px;
  }
}


/* === Patch: keep chat decoration buttons compact on mobile === */
.chatButtons,
.decorToolbar{
  align-items: center;
}
@media (max-width: 560px){
  .chatComposerRow{
    gap: 8px;
  }
  .chatButtons,
  .decorToolbar{
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .chatButtons .btn.mini,
  .decorToolbar .btn.mini,
  .fmtBtn{
    flex: 0 0 auto;
    min-width: 30px;
    height: 28px;
    padding: 3px 7px !important;
    font-size: .78rem !important;
  }
  .fmtImageBtn{
    min-width: 34px;
    font-size: .76rem !important;
  }
  .fmtRubyBtn rt{
    font-size: 7px;
  }
}

/* Dice result decoration */
.diceRoll{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  margin:0 2px;
  padding:1px 6px;
  border:1px solid rgba(100,210,255,.22);
  border-radius:999px;
  background:rgba(40,170,220,.10);
  white-space:nowrap;
  vertical-align:baseline;
}
.diceTotal{
  color:#7fe7ff;
  font-weight:800;
  font-size:1.05em;
  text-shadow:0 0 8px rgba(80,210,255,.20);
}
.diceMeta,
.diceFaces,
.diceBracket{
  color:rgba(230,242,255,.62);
  font-size:.82em;
}
.diceFaces{
  margin-left:1px;
}
@media (max-width: 640px){
  .diceRoll{ padding:1px 5px; }
  .diceMeta,.diceFaces,.diceBracket{ font-size:.78em; }
}

/* Support / reports */
.support-form{display:flex;flex-direction:column;gap:12px}
.support-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center}
.support-row>span{font-size:12px;opacity:.82;font-weight:800}
.support-row input,.support-row select,.support-row textarea{width:100%;box-sizing:border-box}
.support-wide{align-items:start}
.support-wide textarea{min-height:180px;resize:vertical}
.ksq-log-page-card-notice{border-color:rgba(120,220,255,.42);background:rgba(30,60,80,.20)}
.ksq-notice-body{white-space:pre-wrap;line-height:1.7}
@media(max-width:720px){.support-row{grid-template-columns:1fr}.support-row>span{margin-bottom:-4px}}