/* Detail page rules ported from the reviewed prototype, scoped to this view. */
.realms-app .realm-detail-view .group-note { color:var(--muted); padding:14px 20px; font-size:1rem; border-bottom:0; }
@media(max-width:600px) {
.realms-app .realm-detail-view .group-note { padding:14px 16px; }
}
.realms-app .realm-detail-view .ingame-toolbar {
  display:grid; grid-template-columns:repeat(8,minmax(58px,1fr)); gap:5px; align-items:stretch; padding:0; margin-bottom:12px;
  background:transparent; border:0; box-shadow:none;
}
.realms-app .realm-detail-view .ingame-tab {
  width:auto; min-width:0; height:62px; padding:5px 4px; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; background:#d9d9d9; color:#222;
  border:2px solid #2d2d2d; box-shadow:inset 0 1px 0 #fff;
}
.realms-app .realm-detail-view .ingame-tab svg { width:26px; height:26px; }
.realms-app .realm-detail-view .ingame-tab:hover,.realms-app .realm-detail-view .ingame-tab:focus-visible { background:#f2f2f2; }
.realms-app .realm-detail-view .ingame-tab span { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:.75rem; font-weight:800; line-height:1.1; white-space:nowrap; }
.realms-app .realm-detail-view .ingame-tab[aria-selected=true] { border-color:var(--color-accent-gold); background:#fff3bf; }
.realms-app .realm-detail-view .ingame-group {
  background:linear-gradient(90deg,#252525 0%, #1f1f1f 100%); border:2px solid #d7d2d9; box-shadow:none; margin-bottom:16px;
}
.realms-app .realm-detail-view .ingame-group>.group-header {
  justify-content:center; position:relative; min-height:58px; padding:18px 56px; font-size:1.1rem; font-weight:800; color:#f3f3f3;
}
.realms-app .realm-detail-view .ingame-group>.group-header { display:flex; align-items:center; }
.realms-app .realm-detail-view .group-icon { position:absolute; left:16px; width:24px; height:24px; display:grid; place-items:center; color:#e2e2e2; }
.realms-app .realm-detail-view .group-icon svg { width:22px; height:22px; }
.realms-app .realm-detail-view .group-title { font-size:1.05em; }
.realms-app .realm-detail-view .group-note {
  color:#d9d9d9; padding:0 28px 14px; font-size:.9rem; border-bottom:0; text-align:center;
}
@media (max-width: 760px) {
.realms-app .realm-detail-view .ingame-toolbar { grid-template-columns:repeat(4,minmax(58px,1fr)); }
.realms-app .realm-detail-view .group-icon { left:14px; }
}
.realms-app .realm-detail-view .ingame-group { container-type:inline-size; }
.realms-app .realm-detail-view .ingame-tab .game-icon { width:35px; height:35px; }
.realms-app .realm-detail-view .group-icon { width:35px; height:35px; }
.realms-app .realm-detail-view .group-icon .game-icon { width:28px; height:28px; filter:grayscale(1) brightness(0) invert(.90); }
.realms-app .realm-detail-view .dir-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 var(--page-flow-gap); }
.realms-app .realm-detail-view .dir-heading h1 { font-size:var(--page-title-size); margin:0; }
.realms-app .realm-detail-view .dir-heading p { margin:10px 0 0; color:var(--muted); font-size:1rem; }
.realms-app .realm-detail-view .dir-heading .btn { flex-shrink:0; }
.realms-app .realm-detail-view .dir-heading .btn .game-icon { width:24px; height:24px; filter:brightness(0) invert(1); }
.realms-app .realm-detail-view .dir-detail-name { display:flex; align-items:center; gap:22px; min-width:0; }
.realms-app .realm-detail-view .dir-detail-copy { min-width:0; }
.realms-app .realm-detail-view .dir-title-line { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.realms-app .realm-detail-view .dir-detail-heading { align-items:flex-start; margin-bottom:18px; }
.realms-app .realm-detail-view .dir-detail-heading>.btn { margin-top:12px; }
.realms-app .realm-detail-view .dir-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px!important; }
.realms-app .realm-detail-view .ops-realm-membership-feedback { min-block-size:8rem; margin-bottom:16px; }
.realms-app .realm-detail-view .ops-realm-membership-feedback:empty { display:none; }
.realms-app .realm-detail-view .dir-separator { padding:0 5px; }
.realms-app .realm-detail-view .dir-description { max-width:72ch; font-size:1rem; color:var(--text); margin:7px 0 0!important; }
.realms-app .realm-detail-view .dir-detail-shell { border:3px solid var(--line); outline:4px solid var(--panel); background:var(--dir-well); box-shadow:6px 6px 0 var(--dir-shadow); }
.realms-app .realm-detail-view .dir-detail-shell .dir-detail-controls { margin:0; padding:10px; border-bottom:0; background:var(--chrome); }
.realms-app .realm-detail-view .dir-detail-shell #dir-detail-body { padding:10px; }
.realms-app .realm-detail-view .dir-detail-shell .dir-detail-grid { margin-top:0; padding:0; border:0; outline:0; box-shadow:none; }
.realms-app .realm-detail-view .dir-rules-header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; margin-bottom:10px; padding:4px 0 8px; border-bottom:0; }
.realms-app .realm-detail-view .dir-rules-context { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:.875rem; }
.realms-app .realm-detail-view .dir-rules-context strong { color:var(--text); font-family:var(--heading); font-size:1.5rem; }
.realms-app .realm-detail-view .dir-readonly-label { padding:2px 7px; color:var(--text); border:1px solid var(--line); background:var(--panel); }
.realms-app .realm-detail-view .dir-rules-header .dir-text-action { flex-shrink:0; }
.realms-app .realm-detail-view .dir-rules-group { margin-bottom:16px; }
.realms-app .realm-detail-view .dir-rules-group>summary { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 22px; cursor:pointer; font-size:1.125rem; font-weight:700; list-style:none; }
.realms-app .realm-detail-view .dir-rules-group>summary::after { content:''; font-size:1.25rem; }
.realms-app .realm-detail-view .dir-rules-group[open]>summary::after { content:''; }
.realms-app .realm-detail-view .dir-rules-group>summary small { margin-left:auto; font-size:.875rem; font-weight:400; }
.realms-app .realm-detail-view .dir-rules-group>summary::-webkit-details-marker { display:none; }
.realms-app .realm-detail-view .dir-rules-content { padding:0 22px 16px; }
.realms-app .realm-detail-view .dir-readonly-rule { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px, 220px) 140px; gap:16px; align-items:center; min-height:48px; font-size:1rem; }
.realms-app .realm-detail-view .dir-readonly-rule strong { display:block; width:100%; text-align:right; justify-self:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.realms-app .realm-detail-view .dir-rule-access { font-size:.875rem; color:var(--muted); text-align:right; }
@media (max-width:900px) {
.realms-app .realm-detail-view .dir-rules-header { align-items:flex-start; flex-direction:column; }
}
@media (max-width:600px) {
.realms-app .realm-detail-view .dir-heading { flex-direction:column; align-items:flex-start; gap:18px; }
.realms-app .realm-detail-view .dir-heading h1 { font-size:var(--page-title-size); }
.realms-app .realm-detail-view .dir-heading>.btn { width:100%; }
.realms-app .realm-detail-view .dir-detail-name { gap:16px; align-items:flex-start; }
.realms-app .realm-detail-view .dir-title-line { gap:10px; }
.realms-app .realm-detail-view .dir-detail-name p { font-size:.875rem; }
.realms-app .realm-detail-view .dir-rules-group>summary { padding:16px; gap:10px; flex-wrap:wrap; }
.realms-app .realm-detail-view .dir-rules-content { padding:0 16px 16px; }
.realms-app .realm-detail-view .dir-readonly-rule { grid-template-columns:minmax(0,1fr) auto; padding:10px 0; gap:8px 12px; }
.realms-app .realm-detail-view .dir-readonly-rule strong { text-align:right; }
.realms-app .realm-detail-view .dir-rule-access { grid-column:1/-1; text-align:left; }
}
@container directory (max-width:52rem) {
.realms-app .realm-detail-view .dir-heading { flex-wrap:wrap; }
}
@container directory (max-width:30rem) {
.realms-app .realm-detail-view .dir-readonly-rule { grid-template-columns:1fr auto; }
.realms-app .realm-detail-view .dir-rule-access { grid-column:1/-1; text-align:left; }
}
.realms-app .realm-detail-view .dir-preview-rules .dir-readonly-rule.compact { grid-template-columns:minmax(0,1fr) auto; min-height:34px; padding:4px 0; gap:12px; }
.realms-app .realm-detail-view .dir-preview-rules .dir-readonly-rule.compact strong { min-width:70px; }
.realms-app .realm-detail-view .dir-detail-shell { border:0; outline:0; background:transparent; box-shadow:none; }
.realms-app .realm-detail-view .dir-detail-shell #dir-detail-body { padding:0; }
.realms-app .realm-detail-view .dir-rule-tabs { grid-template-columns:repeat(auto-fill,124px); gap:5px; }
.realms-app .realm-detail-view .dir-rule-tabs .ingame-tab { height:58px; padding:4px 6px; flex-direction:column; gap:2px; }
.realms-app .realm-detail-view .dir-rule-tabs .ingame-tab span { font-size:.875rem; }
.realms-app .realm-detail-view .dir-rule-tabs .game-icon,
.realms-app .realm-detail-view .dir-rule-tabs .ingame-tab svg { width:28px; height:28px; flex-shrink:0; }
.realms-app .realm-detail-view .dir-rules-group { margin:0 0 16px; background:linear-gradient(90deg,#252525 0%,#1f1f1f 100%); border:2px solid #d7d2d9; box-shadow:none; }
.realms-app .realm-detail-view .dir-rules-content { padding:0 24px 16px; }
.realms-app .realm-detail-view .dir-readonly-rule { display:grid; grid-template-columns:minmax(0,1fr) 150px 140px; gap:18px; align-items:center; min-height:42px; padding:7px 0; color:#f2f2f2; font-size:1rem; }
.realms-app .realm-detail-view .dir-readonly-rule>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.realms-app .realm-detail-view .dir-readonly-rule strong { display:block; width:100%; color:#f2f2f2; text-align:right; justify-self:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.realms-app .realm-detail-view .dir-rule-access { color:#cfcfcf; font-size:.875rem; text-align:right; }

.realms-app .realm-detail-view .dir-rules-table-wrap { overflow:auto; scrollbar-gutter:stable; max-height:min(65vh,48rem); }
.realms-app .realm-detail-view .dir-rules-table { width:100%; min-width:680px; border-collapse:collapse; table-layout:fixed; }
.realms-app .realm-detail-view .dir-rules-table th,
.realms-app .realm-detail-view .dir-rules-table td { padding:14px 12px; text-align:left; vertical-align:top; overflow-wrap:anywhere; border-bottom:1px solid #ffffff20; }
.realms-app .realm-detail-view .dir-rules-table thead th { position:sticky; top:0; z-index:2; background:#252525; color:var(--muted); font-size:.875rem; font-weight:400; }
.realms-app .realm-detail-view .dir-rules-table th:first-child { width:32%; padding-left:0; }
.realms-app .realm-detail-view .dir-rules-table th:nth-child(2) { width:auto; }
.realms-app .realm-detail-view .dir-rules-table td { font-variant-numeric:tabular-nums; }
.realms-app .realm-detail-view .dir-rules-table small { display:block; margin-top:6px; color:var(--muted); line-height:1.5; }
.realms-app .realm-detail-view .dir-rules-table tr:last-child>* { border-bottom:0; }
/* Widest current preset bound: "50 %/species", about 83px at 14px. Reserve 88px; wrap on narrow screens. */
.realms-app .realm-detail-view .dir-value-heading,
.realms-app .realm-detail-view .dir-boolean-value,
.realms-app .realm-detail-view .dir-player-range { display:grid; grid-template-columns:min(5.5rem,28%) minmax(0,1fr) min(5.5rem,28%); max-width:480px; align-items:center; gap:3px 6px; font-size:.875rem; font-variant-numeric:tabular-nums; }
.realms-app .realm-detail-view .dir-value-heading>span { grid-column:2 / -1; margin-left:12px; }
.realms-app .realm-detail-view .dir-rules-table tbody th>span { display:block; line-height:26px; }
.realms-app .realm-detail-view .dir-boolean-states { grid-column:2 / -1; display:flex; box-sizing:border-box; height:26px; width:144px; max-width:calc(100% - 12px); margin-left:12px; border:2px solid #777; background:#252525; }
.realms-app .realm-detail-view .dir-boolean-state { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; padding:0 4px; color:var(--muted); line-height:22px; }
.realms-app .realm-detail-view .dir-boolean-state+.dir-boolean-state { border-left:2px solid #777; }
.realms-app .realm-detail-view .dir-boolean-state.is-selected { background:#e6e6e6; color:#252525; font-weight:700; }
.realms-app .realm-detail-view .dir-boolean-state .dir-range-lock { position:static; flex:none; }
.realms-app .realm-detail-view .dir-player-range-bound { min-width:0; grid-column:1; grid-row:1; text-align:right; overflow-wrap:anywhere; }
.realms-app .realm-detail-view .dir-range-maximum { grid-column:3; text-align:left; }
.realms-app .realm-detail-view .dir-range-start-lane { grid-column:2; grid-row:2; min-width:0; margin:0 12px; }
.realms-app .realm-detail-view .dir-range-start-value { display:block; position:relative; left:var(--range-position); margin-left:-40px; width:80px; text-align:center; line-height:1.4; overflow-wrap:anywhere; }
.realms-app .realm-detail-view .dir-rule-value { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.realms-app .realm-detail-view .dir-rule-value>span { color:var(--muted); font-size:.875rem; }
.realms-app .realm-detail-view .dir-rule-chips { display:flex; flex-wrap:wrap; gap:4px 6px; margin:6px 0; }
.realms-app .realm-detail-view .dir-rule-chips .realm-chip { margin:0; padding:2px 6px; font-size:.75rem; line-height:1.4; font-weight:400; }
.realms-app .realm-detail-view .dir-player-range-track { position:relative; grid-column:2; grid-row:1; height:10px; margin:8px 12px; border-radius:0; background:linear-gradient(to right,#e1e1e1 var(--range-position),#5f5f5f var(--range-position)); }
.realms-app .realm-detail-view .dir-player-range-track::before,
.realms-app .realm-detail-view .dir-player-range-track::after { content:""; position:absolute; top:50%; transform:translateY(-50%); width:4px; height:26px; }
.realms-app .realm-detail-view .dir-player-range-track::before { left:-2px; background:var(--range-start-color); }
.realms-app .realm-detail-view .dir-player-range-track::after { right:-2px; background:var(--range-end-color); }
.realms-app .realm-detail-view .dir-player-range-track i { position:absolute; z-index:1; left:var(--range-position); top:50%; box-sizing:border-box; width:22px; height:22px; border:2px solid #555; border-radius:50%; background:#e6e6e6; transform:translate(-50%,-50%); }
.realms-app .realm-detail-view .dir-range-arrow { position:absolute; top:50%; transform:translateY(-50%); width:12px; height:22px; font-size:0; clip-path:polygon(0 0,100% 50%,0 100%); }
.realms-app .realm-detail-view .dir-range-arrow-left { left:-12px; transform:translateY(-50%) scaleX(-1); background:var(--range-start-color); }
.realms-app .realm-detail-view .dir-range-arrow-right { right:-12px; background:var(--range-end-color); }
.realms-app .realm-detail-view .dir-player-range-track:has(.dir-range-arrow-left)::before,
.realms-app .realm-detail-view .dir-player-range-track:has(.dir-range-arrow-right)::after { display:none; }
.realms-app .realm-detail-view .dir-range-lock { position:absolute; inset:2px; width:14px; height:14px; fill:none; stroke:#252525; stroke-width:2; stroke-linejoin:miter; }
.realms-app .realm-detail-view .dir-player-range-label { display:inline-block; margin:6px 8px 0 0; color:var(--muted); font-size:.8125rem; line-height:1.3; }
.realms-app .realm-detail-view .dir-permissions-table { min-width:0; }
.realms-app .realm-detail-view .dir-permissions-table th:first-child { width:70%; }
.realms-app .realm-detail-view .dir-rule-select,
.realms-app .realm-detail-view .dir-mobile-rules,
.realms-app .realm-detail-view .dir-mobile-back { display:none; }

@media (max-width:800px) {
    .realms-app .realm-detail-view .dir-mobile-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:12px; }
    .realms-app .realm-detail-view .dir-detail-shell>.ops-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
    .realms-app .realm-detail-view .dir-detail-shell>.ops-tabs .btn { min-width:0; min-height:44px; padding:8px 4px; font-size:.875rem; white-space:nowrap; }
    .realms-app .realm-detail-view .dir-manage-suffix { display:none; }
    .realms-app .realm-detail-view .dir-rule-tabs,
    .realms-app .realm-detail-view .dir-rules-table-wrap { display:none; }
    .realms-app .realm-detail-view .dir-rule-select { display:block; width:100%; min-height:48px; margin:0 0 12px; padding:10px 12px; border:2px solid #d7d2d9; border-radius:0; background:#252525; color:#f2f2f2; font:inherit; color-scheme:dark; }
    .realms-app .realm-detail-view .dir-rule-select:focus-visible { outline:2px solid #ffe58a; outline-offset:3px; }
    .realms-app .realm-detail-view .dir-mobile-rules { display:block; margin:0; }
    .realms-app .realm-detail-view .dir-rules-group>.group-header { display:none; }
    .realms-app .realm-detail-view .dir-mobile-rule { padding:10px 0; border-bottom:1px solid #ffffff20; overflow-wrap:anywhere; line-height:1.4; }
    .realms-app .realm-detail-view .dir-mobile-rule:last-child { border-bottom:0; }
    .realms-app .realm-detail-view .dir-mobile-rule dt { margin:0 0 8px; font-weight:700; }
    .realms-app .realm-detail-view .dir-mobile-rule:has(.dir-player-range, .dir-boolean-value) dt { margin-bottom:20px; }
    .realms-app .realm-detail-view .dir-mobile-rule dd { margin:0; }
    .realms-app .realm-detail-view .dir-mobile-rule-value { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
    .realms-app .realm-detail-view .dir-mobile-rule-value>span,
    .realms-app .realm-detail-view .dir-mobile-rule-range>span:first-child { color:var(--muted); font-size:.875rem; }
    .realms-app .realm-detail-view .dir-mobile-rule-value strong { min-width:0; text-align:right; font-variant-numeric:tabular-nums; }
    .realms-app .realm-detail-view .dir-rule-chips { display:flex; flex-wrap:wrap; gap:4px 6px; margin:4px 0 0; }
    .realms-app .realm-detail-view .dir-player-range,
    .realms-app .realm-detail-view .dir-boolean-value { grid-template-columns:min(4.5rem,24%) minmax(0,1fr) min(4.5rem,24%); gap:2px 4px; }
    .realms-app .realm-detail-view .dir-player-range-bound { font-size:.8125rem; }
    .realms-app .realm-detail-view .dir-boolean-states { grid-column:2; width:auto; max-width:none; margin:0 12px; }
    .realms-app .realm-detail-view .dir-rule-chips .realm-chip { margin:0; padding:2px 6px; font-size:.75rem; line-height:1.4; font-weight:400; }
    .realms-app .realm-detail-view .dir-mobile-rule-range { margin-top:0; }
    .realms-app .realm-detail-view .dir-mobile-rule-range>span:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .realms-app .realm-detail-view .ingame-tab { height:auto; min-height:70px; }
    .realms-app .realm-detail-view .ingame-tab span { white-space:normal; overflow-wrap:anywhere; }
    .realms-app .realm-detail-view .dir-detail-copy { overflow-wrap:anywhere; }
    .realms-app .realm-detail-view .dir-rules-content { padding-inline:12px; }
    .realms-app .realm-detail-view .dir-readonly-rule { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
    .realms-app .realm-detail-view .dir-readonly-rule>span:first-child { white-space:normal; overflow-wrap:anywhere; }
    .realms-app .realm-detail-view .dir-rule-access { grid-column:1 / -1; text-align:left; }
}