/*
 * Open Dungeons RPG presents Story Dungeon Generator - app styles.
 *
 * Every rule is scoped under #od-dg so nothing leaks into the site header,
 * and the theme's element styles are reset inside the app. Sections:
 *   1. Theme resets inside the app
 *   2. Generator styles (ported from /fantasy-generator/style.css)
 *   3. WordPress shell layout: desktop, tablet drawer, phone, print
 */

/* 1. Theme resets inside the app ------------------------------------------ */

#od-dg h1,
#od-dg h2,
#od-dg h3,
#od-dg h4 {
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

#od-dg a {
    text-underline-offset: 2px;
}

#od-dg [hidden] {
    display: none !important;
}

/* 2. Generator styles ------------------------------------------------------ */

/* TODO responsive design */

/* Config */

:root {
    /* Type */
    --font-default: 'DM Sans', sans-serif;
    --font-title: 'Alegreya SC', serif;

    --font-size-tiny: 12px;
    --font-size-small: 13px;
    --font-size-default: 14px;
    --font-size-subtitle: 18px;
    --font-size-title: 22px;
    --font-size-title-20: 46px;
    --font-size-huge: 120px;
    --font-size--footerish: 18px;

    --leading-default: 1.4rem;
    --leading-loose: 1.6rem;
    --leading-tight: 1.2rem;
    --leading-none: 1;

    --button-font-size: 13px;

    /* Borders */
    --border-radius: 3px;

    /* Transitions */
    --transition-default: 500ms;
    --transition-10: 1s;
    --transition-20: 2s;

    /* Colors - Balanced Theme */
    --color-primary: #0064bd;
    --color-primary-hover: #0078e7;
    --color-action: #0064bd;
    --color-action-active: #0078e7;
    --color-secondary: #08b3bd;
    --color-secondary-active: #04d4e0;
    --color-success: #1f9b1f;
    --color-success-hover: #2dc303;
    --color-error: #d90909;
    --color-accent: #c49a3a;

    --color-gray-0: #ffffff;
    --color-gray-10: #F2F2F2;
    --color-gray-12: #a3a3a3;
    --color-gray-15: #798282;
    --color-gray-20: #4f5252;
    --color-gray-30: #3b3d3d;
    --color-gray-35: #202121;
    --color-gray-40: #0c0f0f;
    --color-gray-50: #000000;

    --text-color: var(--color-gray-10);
    --link-color: #4fc3f7;
    --nav-item-color: var(--color-gray-30);
    --nav-item-active-color: var(--color-primary);

    --bg-article: var(--color-gray-30);
    --bg-footer: var(--color-gray-30);
    --bg-header: transparent;
    --bg-sidebar: transparent;
    --bg-toolbar: var(--color-gray-35);
    --bg: var(--color-gray-40);

    /* Spacing */
    --spacing-small: 5px;
    --spacing-medium: 10px;
    --spacing-default: 20px;
    --spacing-large: 40px;

    /* UI */
    --sidebar-width: 300px;
    --caret-img: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" /><path d="M0 0h24v24H0" fill="none" /></svg>')
}

/* Focus */
#od-dg #content h1 {
    /* text-shadow: 0px 0px 21px rgba(255,255,255,1); !important; */
	color: #ccc;
}
#od-dg h1[data-logo] a:hover, #od-dg h1[data-logo] a:active {
    color: #acfbac !important;
}
#od-dg a.rester {
    border: 1px solid var(--color-primary);
    margin-left: 50px;
    padding: 6px 10px;
    background-color: var(--color-primary);
}

#od-dg a.rester:hover,
#od-dg a.rester:active {
    background-color: var(--color-primary-hover);
    box-shadow: 0 0 10px rgba(0, 100, 189, 0.5);
    border-color: var(--color-primary);
}
#od-dg :focus {
    outline: 2px solid var(--color-gray-10);
    outline-offset: -2px;
}
#od-dg article h1 {
    text-shadow: none !important;
    color: #fff !important;
}
#od-dg form#knobs {
    color: #fff;
    text-shadow: none !important;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 5px 0 0;
    scrollbar-width: thin;
}
#od-dg form#knobs fieldset {
    margin-bottom: 5px;
    border: none;
    border-radius: var(--border-radius);
    padding: 0;
}
#od-dg form#knobs button[data-action="accordion"] {
    display: none;
}
#od-dg form#knobs button[data-action="accordion"]:hover {
    background: var(--color-action);
}
#od-dg form#knobs [data-accordion="expanded"] {
    border-color: transparent;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
}
#od-dg form#knobs label {
    font-size: 13px;
    margin-top: 8px;
    margin-bottom: 2px;
}
#od-dg form#knobs input,
#od-dg form#knobs select {
    width: 100%;
    margin-bottom: 4px;
    padding: 0 8px;
    background: var(--color-gray-40);
    border: 1px solid var(--color-gray-15);
    color: var(--color-gray-0);
    border-radius: var(--border-radius);
}
#od-dg form#knobs input:focus,
#od-dg form#knobs select:focus {
    border-color: var(--color-action);
    outline: none;
}
#od-dg main#content {
    color: #fff;
    text-shadow: none !important;
    scrollbar-width: thin;
}
/* Layout */

#od-dg {
    color: #000 /* var(--text-color) */;
	/* text-shadow: 0px 0px 21px rgb(1,255,108,1); */
    background: var(--bg);
    font-size: var(--font-size-default);
    line-height: var(--leading-default);
    font-family: var(--font-default);
    display: grid;
    height: 100%;
    margin: 0;
    grid-template-areas:
        "header header"
        "left toolbar"
        "left main"
        "footer footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
	background-color: #0c0f0f !important;
}

#od-dg > header {
    grid-area: header;
    height: 50px;
    width: 100%;
    position: sticky;
    top: 0;
    background: var(--bg-header);
    z-index: 100;
}

#od-dg > aside {
    grid-area: left;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    animation-duration: var(--transition-default);
    animation-name: slideIn;
}

#od-dg > main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-default);
    padding-bottom: 50px; /* Adjust based on footer height */
}

#od-dg > menu {
    grid-area: toolbar;
    display: none; /* Disabled, was `flex` */
    align-items: center;
    justify-content: end;
    list-style: none;
    background: var(--bg-toolbar);
    padding: var(--spacing-medium);
    margin: var(--spacing-medium);
    border-radius: var(--border-radius);
}

#od-dg > menu li {
    padding: 0;
}

#od-dg > menu li + li {
    margin-left: var(--spacing-medium);
}

#od-dg[data-layout="sidebar-expanded"] > aside {
    position: fixed;
    top: 50px;
    bottom: 0;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

#od-dg[data-layout="sidebar-expanded"] > main {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

#od-dg[data-layout="full"] > aside,
#od-dg[data-layout="full"] > menu,
#od-dg[data-layout="slim"] > aside,
#od-dg[data-layout="slim"] > menu,
#od-dg[data-layout="sidebar-expanded"] > menu {
    display: none;
}

#od-dg[data-layout="slim"] > main {
    max-width: 600px;
    margin: auto;
}

#od-dg > footer {
    display: flex;
    /* justify-content is now handled by the inner div in getFooter */
    grid-area: footer;
    width: 100%;
    background: var(--bg-footer);
    box-shadow: 0 0 40px 10px var(--color-gray-40);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    font-size: var(--font-size--footerish);
    padding: 8px 0;
    align-items: center; /* Vertically align items in footer */
}

/* Styles for Hall/Room counts */
#od-dg #footer-stats {
    color: white;
    font-size: var(--font-size-default); /* Increased size */
    margin-left: var(--spacing-default); /* Added left margin */
}

/* Logo */

#od-dg h1[data-logo] {
    font-size: var(--font-size-subtitle);
    padding: 10px 20px;
    margin: 0;
}

#od-dg h1[data-logo] a {
    color: var(--color-gray-0);
	border: green !important;
}

#od-dg h1[data-logo] a:hover, #od-dg h1[data-logo] a:active, #od-dg h1[data-logo] a:focus {
    text-decoration: none !important;
}

/* Nav */

#od-dg > header > nav {
    color: var(--color-gray-0);
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-default);
}

#od-dg nav [data-separator] {
    margin: 0 15px;
    border-left: 1px solid var(--color-action);
    height: 15px;
}

#od-dg nav a {
    display: inline-flex;
    align-items: center;
    color: var(--color-gray-0);
    background: var(--color-gray-30);
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--border-radius);
    transition: background 0.2s ease, transform 0.1s ease;
    font-size: var(--font-size--footerish);
    border: 1px solid var(--color-gray-20);
}

#od-dg nav a[data-active] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

#od-dg nav a:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

#od-dg nav a + a {
    margin-left: 10px;
}

/* Sections */

#od-dg section {
    page-break-inside: avoid;
}

/* Links */

#od-dg a {
    color: var(--link-color);
    text-decoration: none;
    transition: background var(--transition-default);
}

#od-dg a:hover,
#od-dg a:focus {
    text-decoration: underline;
}

/* Hr */

#od-dg hr {
    height: 0;
    border: 0;
    border-bottom: 1px solid var(--color-gray-15);
    margin: 20px 0;
}

/* Images */

#od-dg img {
    display: block;
    max-width: 100%;
}

/* Articles */

#od-dg article {
    background: var(--bg-article);
    border-radius: var(--border-radius);
    padding: var(--spacing-default);
    font-size: 18px; /* Base font size for all article content */
}

#od-dg article header {
    border-bottom: 1px solid var(--color-gray-15);
    align-items: baseline;
    padding-bottom: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

#od-dg article > section {
    border: 1px solid var(--color-gray-15);
    border-radius: var(--border-radius);
    padding: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

#od-dg article [data-detail] {
    color: var(--color-gray-12);
    font-size: 16px; /* Slightly smaller for detail text */
}

/* Buttons */

#od-dg button {
    cursor: pointer;
    border-radius: var(--border-radius);
    border: 0;
    background: var(--color-action);
    color: var(--color-gray-0);
    font-size: var(--button-font-size);
    font-family: var(--font-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-default);
}

#od-dg button:hover:not([disabled]),
#od-dg button[data-active] {
    background: var(--color-primary-hover);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 100, 189, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

#od-dg button[disabled] {
    opacity: 0.25;
    cursor: default;
}

#od-dg button[data-size="small"] {
    min-height: 30px;
    padding: 0 20px;
}

#od-dg button[data-size="large"] {
    padding: 8px 20px;
}

#od-dg button[data-info] {
    padding: 0;
    width: var(--spacing-default);
    height: var(--spacing-default);
    border-radius: var(--spacing-default);
}

#od-dg button + button {
    margin-left: var(--spacing-medium);
}

#od-dg button[data-action="generate"] {
    flex-grow: 1;
    max-width: 472px;
    font-size: calc(var(--button-font-size) * 2);
    padding: 16px 40px;
    font-weight: bold;
    background-color: #1f9b1f;
}

#od-dg button[data-action="generate"]:hover {
    background-color: #2dc303;
}

/* Button Hierarchy */
#od-dg .btn-primary {
    background-color: var(--color-success);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 500;
}

#od-dg .btn-primary:hover {
    background-color: var(--color-success-hover);
}

#od-dg .btn-secondary {
    background-color: var(--color-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--border-radius);
}

#od-dg .btn-secondary:hover {
    background-color: var(--color-primary-hover);
}

#od-dg .btn-tertiary {
    background-color: var(--color-gray-30);
    color: var(--color-gray-10);
    padding: 6px 12px;
    border-radius: var(--border-radius);
}

#od-dg .btn-tertiary:hover {
    background-color: var(--color-gray-20);
}

/* Ready Buttons */

#od-dg a[data-ready],
#od-dg button[data-ready] {
    flex-direction: column;
    flex-grow: 0;
    justify-content: center;
    display: inline-flex;
    color: var(--color-gray-0);
    text-align: center;
    max-width: none;
    min-width: 300px;
    min-height: 300px;
    margin-bottom: 100px;
    background:  var(--color-gray-35) radial-gradient(at 70% 40%, var(--color-gray-30) 10px, transparent);
    transition: background var(--transition-10);
    border: 1px solid var(--color-gray-20);
    border-radius: var(--border-radius);
    text-shadow: 0 0 10px var(--color-gray-0);
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    opacity: 0;
    animation-delay: 500ms;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-name: fadeIn;
}

#od-dg a[data-ready]:hover,
#od-dg button[data-ready]:hover {
    text-decoration: none;
    background: var(--color-gray-50) radial-gradient(at 70% 40%, var(--color-gray-30) 10px, transparent);
}

#od-dg a[data-ready] div,
#od-dg button[data-ready] div {
    pointer-events: none;
}

/* The opening card must grow with its illustration instead of shrinking in
   the scrolling flex column and pushing the image outside its background. */
#od-dg #content > button[data-ready] {
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    width: 326px;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 20px;
}

#od-dg #content > button[data-ready] > div {
    flex: none;
    max-width: 100%;
}

#od-dg #content > button[data-ready] img {
    width: auto !important;
    height: auto;
    max-width: 100%;
    max-height: 302px;
}

/* Forms */

#od-dg form {
    display: flex;
    flex-direction: column;
}

#od-dg fieldset {
    padding: 0;
    margin: 0 0 2px 0;
    border: 0;
}

#od-dg fieldset > button {
    width: 100%;
    border-radius: 0;
    background: var(--color-gray-30);
}

#od-dg fieldset > button:hover {
    background: var(--color-gray-20);
}

#od-dg fieldset > h2 {
    padding: 4px 20px;
}

#od-dg fieldset > div {
    padding: 5px 10px 10px 10px;
}

#od-dg fieldset > div:last-child {
    padding-bottom: var(--spacing-large);
}

/* Critical accordion overrides - these must take precedence */
#od-dg fieldset[data-accordion="collapsed"] > div {
    display: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

#od-dg fieldset[data-accordion="expanded"] > div {
    display: block !important;
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    padding: 10px 15px !important;
    visibility: visible !important;
}

#od-dg label {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-small);
}

#od-dg input,
#od-dg select {
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    color: var(--text-color);
    background: var(--color-gray-40);
    border: 1px solid var(--color-gray-15);
    border-radius: var(--border-radius);
    font-size: var(--font-size-default);
    transition: background var(--transition-default), border var(--transition-default);
}

#od-dg input:hover,
#od-dg select:hover {
    border-color: var(--color-secondary);
}

#od-dg input:focus,
#od-dg select:focus {
    border-color: var(--color-secondary-active);
    outline: none;
}

#od-dg input[type="range"] {
    padding: 0;
    height: auto;
    border: 0;
    width: 100%; /* Specific width is required for Firefox. */
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    appearance: none; /* Standard property for compatibility */
    background: transparent; /* Otherwise white in Chrome */
}

#od-dg input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -4px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-gray-0);
    cursor: pointer;
}

#od-dg input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-gray-0);
    cursor: pointer;
}

#od-dg input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--color-secondary);
    border-radius: var(--border-radius);
    transition: background var(--transition-default);
}

#od-dg input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--color-secondary);
    border-radius: var(--border-radius);
    transition: background var(--transition-default);
}

#od-dg input[type="range"]:hover::-webkit-slider-runnable-track,
#od-dg input[type="range"]:focus::-webkit-slider-runnable-track {
    background: var(--color-secondary-active);
}

#od-dg input[type="range"]:hover::-moz-range-track,
#od-dg input[type="range"]:focus::-moz-range-track {
    background: var(--color-secondary-active);
}

#od-dg select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--caret-img);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 5px);
    background-position-y: 50%;
    padding-right: 36px;
    cursor: pointer;
    padding: 6px 30px 6px 8px;
}

#od-dg input[data-error],
#od-dg select[data-error] {
    border-color: var(--color-error);
}

#od-dg input[type=range][data-error]::-webkit-slider-runnable-track {
    background: var(--color-error);
}

#od-dg input[type="rage"][data-error]::-moz-range-track {
    background: var(--color-error);
}

/* Type */

#od-dg h1 {
    font-family: var(--font-title);
    font-size: var(--font-size-title-20);
    line-height: var(--leading-none);
    font-weight: normal;
    margin: 0;
}

#od-dg h2 {
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    margin: var(--spacing-default) 0 var(--spacing-medium) 0;
}

#od-dg h2:first-child {
    margin-top: 0;
}

#od-dg p {
    line-height: var(--leading-loose);
    margin: var(--spacing-medium) 0;
    font-size: 18px;
}

#od-dg p + p {
    margin-top: 0;
}

#od-dg small {
    font-size: var(--font-size-small);
}

#od-dg [data-font-size="title"] {
    font-size: var(--font-size-title);
}

#od-dg [data-font-size="huge"] {
    font-size: var(--font-size-huge);
}

/* Lists */

#od-dg ul {
    line-height: var(--leading-loose);
    padding-left: var(--spacing-default);
    margin: var(--spacing-medium) 0;
    font-size: 18px; /* Match article paragraph size */
}

#od-dg li {
    padding-right: var(--spacing-default);
    font-size: 18px; /* Match article paragraph size */
}

#od-dg ul[data-list-style="none"] {
    list-style: none;
}

/* TODO Rework legend & remove these data-flex list rules */
#od-dg ul[data-flex] {
    list-style: none;
    padding-left: 0;
}

#od-dg ul[data-flex] li {
    display: flex;
    align-items: center;
    padding: var(--spacing-medium);
	background: #0c0f0f;
	font-size: 11px !important;
}

#od-dg ul[data-flex] li span {
    font-size: 11px; /* var(--font-size-small); */
    margin-left: var(--spacing-medium);
}


/* Alignment */

#od-dg [data-align="center"] {
    text-align: center;
}

/* Errors */

#od-dg [data-error] {
    color: var(--color-error);
}

/* Flex */

#od-dg [data-flex] {
    display: flex;
}

#od-dg [data-flex*="column"] {
    flex-direction: column;
}

#od-dg [data-flex*="items-center"] {
    align-items: center;
}

#od-dg [data-flex*="justify-between"] {
    justify-content: space-between;
}

#od-dg [data-flex*="justify-center"] {
    justify-content: center;
}

#od-dg [data-flex*="wrap"] {
    flex-wrap: wrap;
}

/* Grid */

#od-dg [data-columns="2"] { columns: 2; }
#od-dg [data-columns="3"] { columns: 3; }
#od-dg [data-columns="4"] { columns: 4; }
#od-dg [data-columns="5"] { columns: 5; }

#od-dg [data-grid] {
    display: grid;
    grid-column-gap: var(--spacing-default);
    grid-row-gap: var(--spacing-default);
}

#od-dg [data-grid="2"] {
    grid-template-columns: repeat(2, 1fr);
}

  
  


/* Spacing */


#od-dg [data-spacing] {
    --space: var(--spacing-default);
}

#od-dg [data-spacing="default"] {
    margin: var(--space);
}

#od-dg [data-spacing="x"] {
    margin-left: var(--space);
    margin-right: var(--space);
}

#od-dg [data-spacing="y"] {
    margin-top: var(--space);
    margin-bottom: var(--space);
}

#od-dg [data-spacing="t"] {
    margin-top: var(--space);
}

#od-dg [data-spacing="r"] {
    margin-top: var(--space);
}

#od-dg [data-spacing="b"] {
    margin-bottom: var(--space);
}

#od-dg [data-spacing="l"] {
    margin-bottom: var(--space);
}

#od-dg [data-spacing-size="40"] {
    --space: var(--spacing-large);
}

/* Deprecated */

#od-dg [data-spacing="b-none"] {
    margin-bottom: 0;
}

#od-dg [data-spacing="medium"] {
    margin: var(--spacing-medium);
}

#od-dg [data-spacing*="y-medium"] {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

#od-dg [data-spacing*="b-medium"] {
    margin-bottom: var(--spacing-medium);
}

#od-dg [data-spacing*="x-small"] {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
}

#od-dg [data-spacing*="b-small"] {
    margin-bottom: var(--spacing-small);
}

/* Spinner */

#od-dg [data-spinner] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    height: 200px;
    flex-direction: column;
    gap: 18px;
    margin: 40px auto;
}

#od-dg [data-spinner]:after {
    content: '';
    box-sizing: border-box;
    display: block;
    order: -1;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6px solid #514631;
    border-top-color: #f0c768;
    animation: od-dg-loading-spin .85s linear infinite;
    will-change: transform;
}

@keyframes od-dg-loading-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Overlay */

#od-dg [data-overlay] {
    display: none;
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
}

#od-dg [data-overlay="visible"] {
    display: flex;
}

/* Toast */

#od-dg [data-toast] {
    display: none;
    opacity: 0;
    position: absolute;
    top: var(--spacing-large);
    left: 50%;
    text-align: center;
    max-width: 240px;
    padding: var(--spacing-small) var(--spacing-default);
    background: var(--color-success);
    color: var(--color-gray-0);
    border-radius: var(--border-radius);
}

#od-dg [data-toast="error"] {
    background: var(--color-error);
}

#od-dg [data-toast][data-visible] {
    display: block;
    animation-duration: var(--transition-20);
    animation-fill-mode: forwards;
    animation-name: slideDown, fadeIn;
}

#od-dg [data-toast][data-visible="exit"] {
    animation-duration: var(--transition-20);
    animation-fill-mode: forwards;
    animation-name: fadeOut;
}

/* Unit */

#od-dg [data-dot] {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    display: inline-block;
    margin: var(--spacing-small) 2px;
}

#od-dg [data-dot="ok"] { background: var(--color-success); }
#od-dg [data-dot="fail"] { background: var(--color-error); }

#od-dg [data-unit-test] {
    margin: var(--spacing-default) 0;
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
    white-space: pre-wrap;
    font-family: monospace;
}

#od-dg [data-unit-test="ok"] {
    border-left: 3px solid var(--color-success);
}

#od-dg [data-unit-test="fail"] {
    border-left: 3px solid var(--color-error);
}

/* Print */
/* TODO print needs to negate dark mode, or provide a print feature */
/* Reverse behavior, make everything except `<main>` no print */
@media print {
    /* Hide elements with data-no-print attribute */
    #od-dg [data-no-print] {
        display: none !important;
    }
    
    /* Hide the title page */
    #od-dg h1[data-logo],
    #od-dg h1[data-logo] * {
        display: none !important;
    }
    
    /* Hide the navigation */
    #od-dg nav#nav {
        display: none !important;
    }
    
    /* Hide the save to PDF button */
    #od-dg #subdown,
    #od-dg #subdown * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide the footer */
    #od-dg #footer {
        display: none !important;
    }
    
    /* Hide the "Back to Map" link */
    #od-dg .back-to-map {
        display: none !important;
    }
    
    /* Hide normal title in favor of print-only title */
    #od-dg .normal-title {
        display: none !important;
    }
    
    /* Remove old print-only-title styling that's causing an empty box */
    #od-dg .print-only-title {
        display: none !important; /* Hide this completely */
    }
    
    /* Show the raw text print title */
    #od-dg .raw-print-title {
        display: block !important;
        visibility: visible !important;
        color: #000 !important;
        background-color: #fff !important;
        border: 3px solid #000 !important;
        padding: 20px !important;
        margin: 20px 0 !important;
        font-size: 30pt !important; /* Even larger */
        font-weight: bold !important;
        text-align: center !important;
        font-family: Arial, sans-serif !important;
    }
    
    /* Ensure content is black text on white background */
    #od-dg {
        color: #000;
        background: #fff;
        margin: 0;
        padding: 0;
    }
    
    /* Ensure all text is black */
    #od-dg * {
        color: #000 !important;
    }
    
    /* Ensure room title is black for printing - REMOVE BORDER/STYLING TO PREVENT EMPTY BOX */
    #od-dg article h1 {
        color: #000 !important;
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Explicitly hide the editable suffix span during print */
    #od-dg [id^="room-title-suffix-"] {
        display: none !important;
    }
    
    /* REVISE THE STYLING FOR h1 TO PREVENT EMPTY BOX */
    #od-dg h1[data-font-size="title"] {
        display: none !important; /* Change to none instead of block */
    }
    
    /* Remove border/styling from title block div to prevent empty box */
    #od-dg div[style*="border-bottom: 1px solid"] {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure room number is shown in popup content */
    #od-dg #roomPopupContent h1 {
        display: none !important; /* Change to none instead of block */
    }
    
    /* Ensure proper page breaks */
    #od-dg article {
        page-break-inside: avoid;
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Remove any background colors or images */
    #od-dg * {
        background-color: transparent !important;
        background-image: none !important;
    }
    
    /* Ensure main content starts at the top of the first page */
    #od-dg main#content {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Remove any extra spacing that might cause blank pages */
    #od-dg section {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Ensure first heading doesn't push content down - REMOVED FOR TESTING */
    /* 
    article h1:first-child {
        margin-top: 0;
        padding-top: 0;
    }
    */
}

/* Animations */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translate3d(-100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideDown {
    from {
      transform: translate3d(0, -100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideUp {
    from {
      transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Focus States - Accessibility */
#od-dg nav#nav a:focus-visible {
    outline: 2px solid var(--color-gray-0);
    outline-offset: 2px;
}

#od-dg form#knobs button:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

#od-dg h1 a:focus-visible {
    outline: 2px solid var(--color-gray-0);
    outline-offset: 2px;
}

#od-dg button:focus-visible {
    outline: 2px solid var(--color-gray-0);
    outline-offset: 2px;
}
#od-dg footer#footer a {
    font-size: 14px;
    color: #fff !important;
    border: 1px solid var(--color-gray-20);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    transition: background 0.2s ease, border-color 0.2s ease;
}

#od-dg footer#footer a:hover,
#od-dg footer#footer a:active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
#od-dg button#cavbutt {
    float: left;
    margin-left: 10px;
    margin-right: 25px;
    padding: 4px 10px 4px 10px;
}
#od-dg ul[data-flex] li {
    padding-left: 1px !important;
}
#od-dg button#printButton {
    margin-left: 10px;
    padding: 8px 16px;
    background-color: var(--color-accent);
}
#od-dg #myBtn33 {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 50px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #031a78; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#od-dg #myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#od-dg a[data-ready]:hover,
#od-dg button[data-ready]:hover,
#od-dg a[data-ready]:active,
#od-dg button[data-ready]:active {
    background-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 100, 189, 0.5);
    border-color: var(--color-primary);
}

#od-dg main#content h1 {
    color: #fff !important;
    font-size: 37px;
    text-shadow: 0px 0px 5px #fff;
}
#od-dg p#developm {
    transform: skew(14deg, -10deg);
}
#od-dg p#developm {
    float: left;
    margin: -4px 10px 0px 10px;
    text-shadow: 0px 0px 5px #fff;
}
#od-dg a#patteon img {
    position: fixed;
    top: 0;
    right: 0;
}

#od-dg a#patteon img:hover,
#od-dg a#patteon img:active {
    box-shadow: 0 0 15px 5px rgba(255, 102, 0, 0.6);
}
/* PDF Download Button - Repositioned */
#od-dg #subdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 20px;
  padding: 6px 12px;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--border-radius);
  min-height: 40px;
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

#od-dg #subdown:hover {
  background-color: #0078e7;
  transform: translateY(-1px);
}

#od-dg #subdown a {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

#od-dg #subdown div {
  color: #fff;
  font-size: 10px;
  margin-top: 2px;
}

#od-dg [data-grid="3"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
  
  

/* Header styling improvements */
#od-dg header[data-flex="justify-between items-center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

#od-dg header[data-flex="justify-between items-center"] h1 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#od-dg #nav {
    margin: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

/* Responsive styling for header and footer */
@media screen and (max-width: 1200px) {
    #od-dg header[data-flex="justify-between items-center"] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 0;
    }
    
    #od-dg header[data-flex="justify-between items-center"] h1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }
    
    #od-dg #nav {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    #od-dg header[data-flex="justify-between items-center"] h1 {
        font-size: 1em;
    }
    
    #od-dg #subdown {
        margin: 0 10px;
        min-height: 40px;
    }
    
    #od-dg header[data-flex="justify-between items-center"] {
        padding: 8px 0;
    }
    
    #od-dg #nav {
        margin-top: 8px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Touch-friendly navigation buttons */
    #od-dg nav a {
        min-height: 44px;
        padding: 0 16px;
    }
}

@media screen and (max-width: 480px) {
    #od-dg header[data-flex="justify-between items-center"] h1 {
        font-size: 1em;
    }
    
    #od-dg header[data-flex="justify-between items-center"] {
        padding: 5px 0;
    }
    
    #od-dg #nav {
        margin-top: 5px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Touch-friendly navigation buttons */
    #od-dg nav a {
        min-height: 44px;
        padding: 0 14px;
        font-size: 15px;
    }
    
    #od-dg #subdown {
        min-height: 40px;
        padding: 4px 8px;
    }
}

/* Footer responsive styling */
@media screen and (max-width: 1200px) {
    #od-dg #footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 0;
    }
    
    #od-dg #footer > * {
        margin: 5px 0;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #od-dg #footer {
        font-size: var(--font-size--footerish); /* Keep the larger font size */
    }
}

@media screen and (max-width: 480px) {
    #od-dg #footer {
        font-size: var(--font-size--footerish); /* Keep the larger font size */
    }
}
  
  

#od-dg .room-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    overflow-y: auto;
}

#od-dg .room-popup-content {
    background-color: var(--bg-article);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid var(--color-gray-15);
    width: 80%;
    max-width: 800px;
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 23px 7px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 0px 23px 7px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 23px 7px rgba(255, 255, 255, 1);    
    color: var(--text-color);
}

#od-dg .close-popup {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}

#od-dg .close-popup:hover {
    color: var(--link-color);
}

#od-dg #roomPopupContent {
    margin-top: 20px;
}

#od-dg #roomPopupContent article {
    background: none;
    padding: 0;
    box-shadow: none;
}

#od-dg #roomPopupContent .back-to-map {
    display: none;
}
  
  

/* Custom Scrollbars - Refined */
#od-dg ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#od-dg ::-webkit-scrollbar-track {
    background: rgba(32, 33, 33, 0.5);
    border-radius: 3px;
}

#od-dg ::-webkit-scrollbar-thumb {
    background: rgba(121, 130, 130, 0.5);
    border-radius: 3px;
    transition: background 0.2s ease;
}

#od-dg ::-webkit-scrollbar-thumb:hover {
    background: rgba(8, 179, 189, 0.7);
}

/* Modern form styling */
#od-dg fieldset[data-accordion="expanded"] {
    border-left: 3px solid var(--color-action);
    background: none;
}

#od-dg fieldset > button[data-action="accordion"] {
    text-align: left;
    font-weight: 500;
    padding: 10px 12px;
    background: var(--color-gray-30);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

#od-dg fieldset > button[data-action="accordion"]:hover {
    background: var(--color-gray-20);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Improve form elements */
#od-dg form#knobs select,
#od-dg form#knobs input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#od-dg form#knobs select:hover,
#od-dg form#knobs input:hover {
    border-color: var(--color-secondary);
}

#od-dg form#knobs select:focus,
#od-dg form#knobs input:focus {
    border-color: var(--color-secondary-active);
    box-shadow: 0 0 5px rgba(8, 179, 189, 0.3);
}

/* Ensure proper spacing and alignment */
#od-dg form#knobs fieldset > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
  
  

/* Form Improvements */
@media (max-height: 800px) {
    #od-dg fieldset > div {
        padding: 3px 8px 8px 8px;
    }
    
    #od-dg label {
        margin-top: 6px;
        margin-bottom: 2px;
    }
    
    #od-dg input, #od-dg select {
        margin-bottom: 4px;
    }
}
  
  

/* Firefox scrollbar styles */
#od-dg * {
    scrollbar-width: thin;
    scrollbar-color: rgba(121, 130, 130, 0.5) rgba(32, 33, 33, 0.3);
}

/* Ensure proper scrolling in accordion content */
#od-dg fieldset[data-accordion="expanded"] > div {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Better spacing for form elements */
#od-dg form#knobs label {
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 500;
}

#od-dg form#knobs label:first-child {
    margin-top: 5px;
}

/* Fix Firefox focus rings */
@supports (-moz-appearance: none) {
    #od-dg select:focus, 
    #od-dg input:focus {
        outline: 1px solid var(--color-secondary-active);
        outline-offset: -1px;
    }
}
  
  

/* Style for indicating active editable elements in popup */
#od-dg .editable-active {
    border: 1px solid #00ff00 !important; /* Bright green border */
    outline: none; /* Remove default focus outline if any */
    padding: 2px; /* Add slight padding */
    margin: -2px; /* Offset padding to maintain layout */
    font-size: 18px; /* Set font size when editing */
}
  
  

#od-dg button#toggle-toolbox-button:hover,
#od-dg button#toggle-toolbox-button:active,
#od-dg button#toggle-toolbox-button:focus {
    box-shadow: 0px 0px 10px 4px rgba(0, 100, 189, 0.6);
    background-color: #0078e7 !important;
}

/* Base style for Toggle Toolbox Button */
#od-dg button#toggle-toolbox-button {
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    background-color: #0064bd !important;
}
  
  

/* 3. WordPress shell layout ------------------------------------------------ */

body.od-dg-page {
    background: #0c0f0f;
    margin: 0;
}

#od-dg {
    --od-dg-bar-bg: #141818;
    --od-dg-line: #2a2e2e;
    --od-dg-gold: #d9ad62;

    position: relative;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "bar bar"
        "left main"
        "footer footer";
    height: var(--od-dg-height, calc(100vh - 92px));
    min-height: 420px;
    overflow: hidden;
    color: var(--text-color);
    background: var(--bg);
    font-size: var(--font-size-default);
    line-height: var(--leading-default);
}

#od-dg[data-layout="full"],
#od-dg[data-layout="slim"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "bar"
        "main"
        "footer";
}

/* App bar */

#od-dg .od-dg-bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    background: var(--od-dg-bar-bg);
    border-bottom: 1px solid var(--od-dg-line);
    z-index: 5;
}

#od-dg .od-dg-title,
#od-dg h1.od-dg-title[data-logo] {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 8px 0 0;
    padding: 0;
    overflow: hidden;
    color: #efe6d2;
    font-family: var(--font-title);
    font-size: 19px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#od-dg .od-dg-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

#od-dg .od-dg-tools::-webkit-scrollbar {
    display: none;
}

/* Buttons in the shell */

#od-dg .od-dg-btn,
#od-dg .od-dg-tools > button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--od-dg-line);
    border-radius: 6px;
    background: var(--color-gray-35);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}

#od-dg .od-dg-btn:hover:not([disabled]),
#od-dg .od-dg-tools > button:hover:not([disabled]) {
    background: var(--color-gray-30);
    border-color: var(--color-gray-15);
    box-shadow: none;
    transform: none;
}

#od-dg .od-dg-btn + .od-dg-btn {
    margin-left: 0;
}

#od-dg .od-dg-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

#od-dg .od-dg-bar button.od-dg-generate[data-action="generate"] {
    flex: none;
    max-width: none;
    min-height: 36px;
    padding: 0 18px;
    border-color: #1f9b1f;
    background: #1f9b1f;
    font-size: 14px;
}

#od-dg .od-dg-bar button.od-dg-generate[data-action="generate"]:hover:not([disabled]) {
    background: #2dc303;
}

#od-dg .od-dg-btn-gold,
#od-dg #subdown {
    border-color: #8a6a26;
    background: #6f5420;
    flex-direction: row;
    margin: 0;
}

#od-dg .od-dg-btn-gold:hover:not([disabled]),
#od-dg #subdown:hover:not([disabled]) {
    background: #8a6a26;
}

#od-dg .od-dg-btn-quiet {
    background: transparent;
}

#od-dg .od-dg-options-toggle {
    display: none;
}

#od-dg .od-dg-icon-btn {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    box-shadow: none;
}

/* Options sidebar */

#od-dg > aside {
    grid-area: left;
    width: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px 24px;
    border-right: 1px solid var(--od-dg-line);
    background: #101313;
    animation: none;
}

#od-dg .od-dg-aside-head {
    display: none;
}

#od-dg form#knobs,
#od-dg form#knobs [data-accordion="expanded"],
#od-dg fieldset[data-accordion="expanded"] > div {
    max-height: none;
    overflow: visible;
}

#od-dg form#knobs .od-dg-legend {
    display: block;
    width: 100%;
    margin: 18px 0 4px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--od-dg-line);
    color: var(--od-dg-gold);
    font-family: var(--font-title);
    font-size: 16px;
}

#od-dg form#knobs fieldset:first-of-type .od-dg-legend {
    margin-top: 8px;
}

#od-dg .od-dg-knob-value {
    margin-left: 6px;
    color: var(--od-dg-gold);
    font-weight: 700;
}

#od-dg form#knobs select {
    min-height: 36px;
}

/* Main content */

#od-dg > main,
#od-dg > main#content {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    justify-content: safe center;
    padding: 20px;
    padding-bottom: 32px;
}

#od-dg > main > section,
#od-dg > main > [data-grid],
#od-dg > main > article {
    width: 100%;
    max-width: 1100px;
}

#od-dg .dungeon-map-container {
    position: relative;
    max-width: 100%;
}

#od-dg .dungeon-map-svg {
    height: auto;
}

/* Open Dungeons content in rooms */

#od-dg .od-dg-link {
    color: var(--link-color);
    font-weight: 700;
}

#od-dg .od-dg-note {
    margin-top: 6px;
    color: var(--color-gray-12);
    font-size: 0.85em;
}

/* Footer */

#od-dg > footer,
#od-dg > footer#footer {
    grid-area: footer;
    position: static;
    display: block;
    width: auto;
    padding: 6px 12px;
    border-top: 1px solid var(--od-dg-line);
    background: var(--od-dg-bar-bg);
    box-shadow: none;
    font-size: 14px;
    text-align: left;
}

#od-dg .od-dg-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}

#od-dg .od-dg-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#od-dg .od-dg-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

#od-dg .od-dg-footer-links [data-spacing] {
    display: none;
}

#od-dg footer#footer a {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* Dialogs: above the site header */

#od-dg .room-popup {
    z-index: 100000;
    overscroll-behavior: contain;
}

#od-dg .room-popup-content {
    margin: 40px auto;
    width: min(92%, 800px);
    box-shadow: 0 0 30px 4px rgba(255, 255, 255, 0.35);
}

#od-dg .close-popup {
    width: 44px;
    height: 44px;
    top: 6px;
    right: 8px;
    padding: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 30px;
    box-shadow: none;
}

#od-dg .close-popup:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}

/* Drawer scrim (tablet and phone) */

#od-dg .od-dg-scrim {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.55);
}

/* Tablet and down: options become a slide-in drawer -------------------- */

@media (max-width: 1023px) {
    #od-dg,
    #od-dg[data-layout="default"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "bar"
            "main"
            "footer";
    }

    #od-dg .od-dg-options-toggle {
        display: inline-flex;
    }

    #od-dg > aside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100001;
        width: min(88vw, 360px);
        padding: 0 16px 32px;
        border-right: 1px solid var(--od-dg-line);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        visibility: hidden;
    }

    #od-dg.is-drawer-open > aside {
        transform: none;
        visibility: visible;
    }

    #od-dg .od-dg-aside-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -16px 4px;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid var(--od-dg-line);
        background: #101313;
        color: #efe6d2;
        font-family: var(--font-title);
        font-size: 18px;
    }

    body.od-dg-drawer-open {
        overflow: hidden;
    }
}

/* Phone: the page scrolls normally so the site header scrolls away ------ */

#dungeon-icon-toolbox .od-dg-icon-grid { display: contents; }

/* Desktop editing tray overlays the map footer rather than the rooms at its side. */
@media (min-width: 768px) {
    body.od-dg-page #dungeon-icon-toolbox {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-height: 40dvh !important;
        margin: 0 !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: auto 44px auto minmax(120px, 360px) 1fr;
        grid-template-rows: 44px minmax(0, 150px);
        gap: 8px !important;
        overflow: hidden !important;
        border-width: 3px 0 0 !important;
        border-radius: 12px 12px 0 0 !important;
    }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading { display: contents !important; }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading-text {
        align-self: center;
        font-size: 0;
        color: #332c1b;
    }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading-text::after {
        content: 'Drag Icons';
        font-size: 14px;
        font-weight: bold;
    }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-close-button {
        margin: 0 !important;
        padding: 6px 12px !important;
    }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-search {
        align-self: center;
        width: 100% !important;
        margin: 0 !important;
    }
    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-grid {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 10px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 180px; /* Leave the dice controls unobstructed. */
    }
}
@media (min-width: 1024px) {
    body.od-dg-page #dungeon-icon-toolbox { left: 300px !important; }
}
#od-dg .od-dg-mobile-tools-toggle { display: none; }

@media (max-width: 767px) {
    #od-dg.has-mobile-tools-toggle .od-dg-mobile-tools-toggle { display: inline-flex; }
    #od-dg.has-mobile-tools-toggle:not(.is-mobile-tools-open) .od-dg-bar > .od-dg-map-switches,
    #od-dg.has-mobile-tools-toggle:not(.is-mobile-tools-open) .od-dg-bar > .od-dg-generate,
    #od-dg.has-mobile-tools-toggle:not(.is-mobile-tools-open) .od-dg-bar > .od-dg-tools {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #od-dg {
        height: auto;
        min-height: calc(100svh - 60px);
        overflow: visible;
        grid-template-rows: auto 1fr auto;
    }

    #od-dg .od-dg-bar {
        position: sticky;
        top: 0;
        flex-wrap: wrap;
        padding: 8px 10px;
    }

    #od-dg .od-dg-title,
    #od-dg h1.od-dg-title[data-logo] {
        flex: 1 1 0;
        margin: 0;
        font-size: 16px;
    }

    #od-dg .od-dg-options-toggle {
        padding: 0 10px;
    }

    #od-dg .od-dg-tools {
        order: 5;
        flex: 1 0 100%;
        flex-wrap: wrap;
        overflow: visible;
        margin: 2px 0 0;
        padding: 0;
    }

    #od-dg > main,
    #od-dg > main#content {
        overflow: visible;
        padding: 12px 10px 24px;
    }

    #od-dg article {
        padding: 14px;
        font-size: 16px;
    }

    #od-dg article [data-detail] {
        font-size: 14px;
    }

    #od-dg > footer,
    #od-dg > footer#footer {
        padding: 10px;
    }

    #od-dg .od-dg-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Full-screen room dialog */
    #od-dg .room-popup-content {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 56px 14px 32px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Icon toolbox becomes a bottom sheet */
    body.od-dg-page #dungeon-icon-toolbox {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-height: min(45dvh, 270px) !important;
        margin: 0 !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px auto;
        grid-template-rows: auto auto minmax(0, 150px);
        gap: 8px !important;
        overflow: hidden !important;
        border-width: 3px 0 0 !important;
        border-radius: 14px 14px 0 0 !important;
    }

    body.od-dg-page #dungeon-icon-toolbox > :not(.od-dg-icon-grid) {
        flex: 0 0 auto !important;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading {
        display: contents !important;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading-text {
        align-self: center;
        padding: 8px 10px;
        border: 1px solid #a58a46;
        border-radius: 5px;
        background: #eee0aa;
        color: #332c1b;
        font-size: 0;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-heading-text::after {
        content: 'Drag Icons';
        font-size: 14px;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-close-button {
        align-self: center;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 12px !important;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-grid {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 10px;
        width: 100%;
        min-height: 0;
        max-height: 150px; /* Two 70px rows, with a 10px gap. */
        flex: 0 1 230px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.od-dg-page #dungeon-icon-toolbox .od-dg-icon-search {
        grid-column: 1 / -1;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 16px fields stop iOS from zooming in on focus */
    #od-dg input,
    #od-dg select,
    #od-dg textarea,
    #od-dg form#knobs input,
    #od-dg form#knobs select {
        font-size: 16px;
    }
}

/* Touch screens: bigger targets */

@media (pointer: coarse) {
    #od-dg .od-dg-btn,
    #od-dg .od-dg-tools > button,
    #od-dg .od-dg-bar button.od-dg-generate[data-action="generate"] {
        min-height: 44px;
    }

    #od-dg .od-dg-options-toggle {
        min-width: 44px;
    }

    #od-dg form#knobs select,
    #od-dg form#knobs input[type="text"] {
        min-height: 44px;
    }

    #od-dg input[type="range"] {
        min-height: 32px;
    }
}

/* Comfortable top-bar targets on desktop as well as touch screens. */
#od-dg .od-dg-bar .od-dg-btn,
#od-dg .od-dg-bar .od-dg-tools > button {
    min-height: 48px;
    font-size: 14px;
}

#od-dg .od-dg-bar button.od-dg-generate[data-action="generate"] {
    min-height: 56px;
    padding: 0 22px;
    font-size: 16px;
}

/* Print: only the dungeon ---------------------------------------------- */

@media print {
    body.od-dg-page .od-site-header,
    body.od-dg-page .od-skip-link,
    body.od-dg-page #wpadminbar,
    body.od-dg-page #dungeon-icon-toolbox {
        display: none !important;
    }

    html,
    body.od-dg-page {
        margin: 0 !important;
        background: #fff !important;
    }

    #od-dg {
        display: block;
        height: auto !important;
        min-height: 0;
        overflow: visible;
        background: #fff;
    }

    #od-dg > main,
    #od-dg > main#content {
        display: block;
        overflow: visible;
        padding: 0;
    }
}

/* Site widgets that stay off this page (backup for the dequeue in PHP) */
body.od-dg-page #bookmarks-tab {
    display: none !important;
}

/* Options drawer button: orange so it reads as a button */
#od-dg .od-dg-bar .od-dg-options-toggle,
#od-dg .od-dg-bar #help-btn {
    border-color: #c2610f;
    background: #e07b1a;
    color: #fff;
}

#od-dg .od-dg-bar .od-dg-options-toggle:hover:not([disabled]),
#od-dg .od-dg-bar .od-dg-options-toggle[aria-expanded="true"],
#od-dg .od-dg-bar #help-btn:hover:not([disabled]) {
    border-color: #a8520b;
    background: #f08c2a;
}

/* Dice overlay buttons: moved from bottom left to bottom right on this page
   (resting state only; the full-screen dice view keeps its own layout) */
body.od-dg-page #odd-dice-overlay-root:not(.odd-dice-interactive) .odd-dice-fab-proxy,
body.od-dg-page .odd-dice-launcher {
    left: auto;
    right: max(20px, env(safe-area-inset-right));
}

body.od-dg-page #odd-dice-overlay-root:not(.odd-dice-interactive) .odd-dice-mode-toggle {
    left: auto;
    right: calc(92px + env(safe-area-inset-right));
}

@media (max-width: 640px) {
    body.od-dg-page #odd-dice-overlay-root:not(.odd-dice-interactive) .odd-dice-fab-proxy,
    body.od-dg-page .odd-dice-launcher {
        left: auto;
        right: max(12px, env(safe-area-inset-right));
    }

    body.od-dg-page #odd-dice-overlay-root:not(.odd-dice-interactive) .odd-dice-mode-toggle {
        left: auto;
        right: calc(76px + env(safe-area-inset-right));
    }
}

/* Monster / magic item detail popup ------------------------------------ */
/* Lives on <body>, outside #od-dg, so these rules are scoped to the page. */

body.od-dg-page .od-dg-detail {
    position: fixed;
    inset: 0;
    z-index: 100003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--font-default);
    font-size: 15px;
    line-height: 1.5;
}

body.od-dg-page .od-dg-detail[hidden] {
    display: none;
}

body.od-dg-page.od-dg-detail-open {
    overflow: hidden;
}

body.od-dg-page .od-dg-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

body.od-dg-page .od-dg-detail-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 22px;
    width: min(880px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 22px;
    border: 1px solid #4a3d25;
    border-radius: 12px;
    background: #16191a;
    color: #ece6d8;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    outline: none;
}

body.od-dg-page .od-dg-detail-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.od-dg-page .od-dg-detail-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Art: image or placeholder card */

body.od-dg-page .od-dg-detail-art {
    align-self: start;
}

body.od-dg-page .od-dg-detail-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #4a3d25;
    border-radius: 10px;
    background: #0e1011;
}

body.od-dg-page .od-dg-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid #6f5420;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 38%, rgba(217, 173, 98, 0.18), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px),
        #121415;
    box-shadow: inset 0 0 0 6px #121415, inset 0 0 0 7px rgba(217, 173, 98, 0.35);
    text-align: center;
}

body.od-dg-page .od-dg-detail-placeholder-mark {
    color: #d9ad62;
    font-family: var(--font-title);
    font-size: 88px;
    line-height: 1;
}

body.od-dg-page .od-dg-detail-placeholder-kind {
    color: #efe6d2;
    font-family: var(--font-title);
    font-size: 17px;
}

body.od-dg-page .od-dg-detail-placeholder-note {
    color: #8e8a80;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Text */

body.od-dg-page .od-dg-detail-body {
    min-width: 0;
}

body.od-dg-page .od-dg-detail-kind {
    margin: 0 0 2px;
    color: #d9ad62;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.od-dg-page .od-dg-detail-title {
    margin: 0 48px 4px 0;
    color: #fff;
    font-family: var(--font-title);
    font-size: 28px;
    line-height: 1.15;
}

body.od-dg-page .od-dg-detail-subtitle {
    margin: 0 0 10px;
    color: #a9a397;
    font-size: 14px;
}

body.od-dg-page .od-dg-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

body.od-dg-page .od-dg-detail-chips li {
    margin: 0;
    padding: 3px 10px;
    border: 1px solid #4a3d25;
    border-radius: 999px;
    background: #211d15;
    color: #f0d9a8;
    font-size: 13px;
    font-weight: 700;
}

body.od-dg-page .od-dg-detail-text h2,
body.od-dg-page .od-dg-detail-text h4 {
    margin: 16px 0 6px;
    color: #d9ad62;
    font-family: var(--font-title);
    font-size: 17px;
}

body.od-dg-page .od-dg-detail-text p {
    margin: 0 0 8px;
    color: #ece6d8;
}

body.od-dg-page .od-dg-detail-text .od-rh-statblock {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    margin: 0 0 14px;
}

body.od-dg-page .od-dg-detail-text .od-rh-stat {
    padding: 6px 10px;
    border: 1px solid #2c3131;
    border-radius: 8px;
    background: #1d2122;
}

body.od-dg-page .od-dg-detail-text .od-rh-stat dt {
    color: #8e8a80;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.od-dg-page .od-dg-detail-text .od-rh-stat dd {
    margin: 0;
    color: #fff;
    font-weight: 700;
}

body.od-dg-page .od-dg-detail-loading {
    color: #a9a397;
    font-style: italic;
}

body.od-dg-page .od-dg-detail-actions {
    margin-top: 16px;
}

body.od-dg-page .od-dg-detail-page {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #8a6a26;
    border-radius: 6px;
    background: #6f5420;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

body.od-dg-page .od-dg-detail-page:hover {
    background: #8a6a26;
    color: #fff;
}

/* Links that open the popup */

#od-dg a.od-dg-link {
    cursor: pointer;
    text-decoration: underline dotted;
}

/* Phone: full-screen sheet, art on top */

@media (max-width: 700px) {
    body.od-dg-page .od-dg-detail {
        padding: 0;
        align-items: stretch;
    }

    body.od-dg-page .od-dg-detail-card {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        max-height: none;
        height: 100%;
        padding: 14px 14px 32px;
        border: 0;
        border-radius: 0;
    }

    body.od-dg-page .od-dg-detail-art {
        width: min(100%, 320px);
        justify-self: center;
    }

    body.od-dg-page .od-dg-detail-title {
        font-size: 24px;
    }
}

/* Keep the dice buttons from floating over the detail popup */
body.od-dg-page.od-dg-detail-open .odd-dice-fab-proxy,
body.od-dg-page.od-dg-detail-open .odd-dice-mode-toggle {
    visibility: hidden;
}

/* Map legend wraps instead of pushing the page wider than the screen */
#od-dg ul[data-flex] {
    flex-wrap: wrap;
    row-gap: 6px;
}

@media (max-width: 767px) {
    /* Safety net: nothing inside the app may widen the phone page.
       clip (not hidden) keeps the sticky app bar working. */
    #od-dg {
        overflow-x: clip;
    }

    body.od-dg-page .od-dg-detail-card {
        display: block;
    }

    body.od-dg-page .od-dg-detail-art {
        margin: 0 auto 14px;
    }

    body.od-dg-page .od-dg-detail-close {
        position: fixed;
        top: 10px;
        right: 10px;
    }
}

/* Room editing: make the edit controls easy to spot ---------------------- */

#od-dg .od-dg-room-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 10px;
}

#od-dg .od-dg-room-actions .back-to-map {
    color: var(--link-color);
    font-size: 14px;
}

#od-dg button.od-dg-room-edit,
#od-dg #roomPopupContent button.edit-room-btn {
    min-height: 38px;
    margin: 0;
    padding: 0 16px !important;
    border: 1px solid #c2610f;
    border-radius: 6px;
    background: #e07b1a;
    color: #fff;
    font-size: 14px !important;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

#od-dg button.od-dg-room-edit:hover:not([disabled]),
#od-dg #roomPopupContent button.edit-room-btn:hover:not([disabled]) {
    background: #f08c2a;
    box-shadow: none;
    transform: none;
}

#od-dg button.od-dg-room-edit::before,
#od-dg #roomPopupContent button.edit-room-btn::before {
    content: "\270E";
    margin-right: 6px;
    font-size: 15px;
}

/* Save / Cancel while editing */
#od-dg #roomPopupContent .save-cancel-btns button {
    min-height: 38px;
    padding: 0 16px !important;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 700;
}

#od-dg #roomPopupContent .save-cancel-btns button:first-child {
    background: #1f9b1f;
}

/* Popup: keep the edit button clear of the close (x) button */
#od-dg #roomPopupContent > div:first-child {
    padding-right: 48px;
}

@media print {
    #od-dg .od-dg-room-actions {
        display: none !important;
    }
}

/* Room card "Edit Room" button: dark silver */
#od-dg button.od-dg-room-edit {
    border-color: #50555a;
    background: linear-gradient(180deg, #7d8389, #5f656b);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

#od-dg button.od-dg-room-edit:hover:not([disabled]) {
    border-color: #5f656b;
    background: linear-gradient(180deg, #8d949a, #6c7278);
}

/* Smaller art in the detail popup */
body.od-dg-page .od-dg-detail-card {
    grid-template-columns: 190px minmax(0, 1fr);
}

body.od-dg-page .od-dg-detail-placeholder-mark {
    font-size: 60px;
}

body.od-dg-page .od-dg-detail-placeholder-kind {
    font-size: 14px;
}

body.od-dg-page .od-dg-detail-placeholder-note {
    font-size: 10px;
}

@media (max-width: 700px) {
    body.od-dg-page .od-dg-detail-art {
        width: 160px;
    }

    body.od-dg-page .od-dg-detail-placeholder-mark {
        font-size: 52px;
    }
}

@media (max-width: 767px) {
    body.od-dg-page .od-dg-detail-art {
        width: 160px;
        margin: 0 auto 14px;
    }
}

/* Explored rooms -------------------------------------------------------- */

#od-dg .od-dg-room-actions .od-dg-explored-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 0;
    padding: 6px 12px 6px 8px;
    border: 1px solid #50555a;
    border-radius: 6px;
    background: #23272a;
    color: #e6e2d8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

#od-dg .od-dg-explored-toggle input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #3fae4a;
    cursor: pointer;
}

#od-dg article.od-dg-room-explored .od-dg-explored-toggle {
    border-color: #2f7d36;
    background: #1d3a21;
    color: #c9f2cd;
}

/* The card itself dims a little once explored */
#od-dg article.od-dg-room-explored {
    background: #2a2d2f;
}

#od-dg article.od-dg-room-explored h1.normal-title::after {
    content: "  \2713 Explored";
    color: #7fd48a;
    font-size: 0.55em;
    font-family: var(--font-default);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* On the map: dark silver room, stamp on top */
#od-dg .dungeon-map-svg .room-link.od-dg-explored path:not([fill="none"]):not(.od-dg-explored-mark *),
#od-dg .dungeon-map-svg .room-link.od-dg-explored rect:not(.od-dg-explored-pill),
#od-dg .dungeon-map-svg .room-link.od-dg-explored polygon,
#od-dg .dungeon-map-svg .room-link.od-dg-explored ellipse {
    fill: #80868c;
}

#od-dg .dungeon-map-svg .room-link.od-dg-explored text:not(.od-dg-explored-text) {
    fill: #f3f3f3;
}

#od-dg .dungeon-map-svg .od-dg-explored-pill {
    fill: #1f6f2a;
    stroke: #ffffff;
    stroke-width: 1;
}

#od-dg .dungeon-map-svg .od-dg-explored-text {
    fill: #ffffff;
    font-family: var(--font-default);
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (pointer: coarse) {
    #od-dg .od-dg-explored-toggle input {
        width: 24px;
        height: 24px;
    }
}

/* Explored toggle border: yellow, red once ticked */
#od-dg .od-dg-room-actions .od-dg-explored-toggle {
    border: 2px solid #f2c200;
}

#od-dg article.od-dg-room-explored .od-dg-room-actions .od-dg-explored-toggle,
#od-dg .od-dg-room-actions .od-dg-explored-toggle:has(input:checked) {
    border-color: #e02424;
}

/* Explored rooms on the map: dark gray */
#od-dg .dungeon-map-svg .room-link.od-dg-explored path:not([fill="none"]):not(.od-dg-explored-mark *),
#od-dg .dungeon-map-svg .room-link.od-dg-explored rect:not(.od-dg-explored-pill),
#od-dg .dungeon-map-svg .room-link.od-dg-explored polygon,
#od-dg .dungeon-map-svg .room-link.od-dg-explored ellipse {
    fill: #3f4346;
}

#od-dg .dungeon-map-svg .room-link.od-dg-explored .od-dg-explored-fill,
#od-dg .dungeon-map-svg .room-link.od-dg-explored circle:not(.od-dg-explored-pill) {
    fill: #3f4346;
}

/* Escape adventures: the room with the physical way out */
#od-dg .dungeon-map-svg .room-link .od-dg-exit-mark rect.od-dg-exit-pill {
    fill: #1f9b1f;
    stroke: #ffffff;
    stroke-width: 1;
}

#od-dg .dungeon-map-svg .room-link .od-dg-exit-mark text.od-dg-exit-text {
    fill: #ffffff;
    font-family: var(--font-default);
    font-weight: 700;
    letter-spacing: 0.04em;
}

#od-dg .od-dg-story-exit .od-dg-story-tag {
    color: #5fd35f;
}

/* Map key labels stay on one line ("Locked Door") */
#od-dg ul[data-flex] li span {
    white-space: nowrap;
}


/* Traps ------------------------------------------------------------------ */

body.od-dg-page .od-dg-detail-art-note {
    margin: 6px 0 0;
    color: #8e8a80;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

/* Room outlines on the map: red = monsters/traps, gold = treasure/magic items */
#od-dg .dungeon-map-svg .room-link.od-dg-danger path.od-dg-outline {
    stroke: #d11f1f;
    stroke-width: 3px;
}

#od-dg .dungeon-map-svg .room-link.od-dg-loot path.od-dg-outline {
    stroke: #d4a017;
    stroke-width: 3px;
}

/* Both: red outline with a gold line inside it */
#od-dg .dungeon-map-svg .room-link.od-dg-danger.od-dg-loot path.od-dg-outline {
    stroke: #d11f1f;
    stroke-width: 4.5px;
}

#od-dg .dungeon-map-svg .room-link path.od-dg-loot-inner {
    fill: none;
    stroke: #f2c200;
    stroke-width: 1.5px;
    pointer-events: none;
}


/* Colored outlines at the map's original line weight (2px) */
#od-dg .dungeon-map-svg .room-link.od-dg-danger path.od-dg-outline,
#od-dg .dungeon-map-svg .room-link.od-dg-loot path.od-dg-outline {
    stroke-width: 2px;
}

#od-dg .dungeon-map-svg .room-link.od-dg-danger.od-dg-loot path.od-dg-outline {
    stroke-width: 2.5px;
}

#od-dg .dungeon-map-svg .room-link path.od-dg-loot-inner {
    stroke-width: 0.9px;
}

/* Room 1: green start outline, wins over red/gold */
#od-dg .dungeon-map-svg .room-link.od-dg-start path.od-dg-outline {
    stroke: #1f9b1f !important;
    stroke-width: 2px !important;
}

/* Room count after Generate Adventure */
#od-dg .od-dg-room-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 6px;
    color: #c9c3b6;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Light dialogs must not inherit the site's pale text for dark backgrounds.
   Inline error colors and the separate Help theme retain their own styling. */
body.od-dg-page .success-popup,
body.od-dg-page .success-popup p,
body.od-dg-page .popup-overlay:not(.od-dg-help-overlay) .popup-content,
body.od-dg-page .popup-overlay:not(.od-dg-help-overlay) .popup-content p,
body.od-dg-page .popup-overlay:not(.od-dg-help-overlay) .popup-content label,
body.od-dg-page .popup-overlay:not(.od-dg-help-overlay) .popup-content li {
    color: #333;
}

/* A shared brass frame keeps the three map switches visually together. */
#od-dg .od-dg-map-switches {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
    max-width: 100%;
    margin-right: auto;
    padding: 8px 12px;
    border: 1px solid #927335;
    border-radius: 10px;
    background: linear-gradient(180deg, #383021, #28251d);
    box-shadow: inset 0 1px 0 rgb(238 203 128 / 12%), 0 2px 5px rgb(0 0 0 / 18%);
}

#od-dg .od-dg-map-switches .od-dg-wall-toggle {
    margin: 0;
}

/* Color / Plain switch for map wall colors -------------------------------- */

#od-dg .od-dg-wall-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: #c9c3b6;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
}

#od-dg button.od-dg-switch {
    position: relative;
    width: 40px;
    min-height: 0;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid #50555a;
    border-radius: 999px;
    background: linear-gradient(90deg, #d11f1f 0 34%, #d4a017 34% 67%, #1f9b1f 67%);
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

#od-dg button.od-dg-switch:hover:not([disabled]) {
    box-shadow: none;
    transform: none;
    filter: brightness(1.1);
}

#od-dg .od-dg-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: left 0.18s ease;
}

#od-dg.od-dg-plain-walls button.od-dg-switch {
    background: #5f656b;
}

#od-dg.od-dg-plain-walls .od-dg-switch-knob {
    left: 20px;
}

#od-dg .od-dg-wall-label:first-child {
    color: #f0d9a8;
}

#od-dg.od-dg-plain-walls .od-dg-wall-label:first-child {
    color: #8e8a80;
}

#od-dg .od-dg-wall-label:last-child {
    color: #8e8a80;
}

#od-dg.od-dg-plain-walls .od-dg-wall-label:last-child {
    color: #f0d9a8;
}

/* Plain: every room wall back to the map's own drawing color and weight */
#od-dg.od-dg-plain-walls .dungeon-map-svg .room-link path.od-dg-outline,
#od-dg.od-dg-plain-walls .dungeon-map-svg .room-link.od-dg-start path.od-dg-outline {
    stroke: #595959 !important;
    stroke-width: 2px !important;
}

#od-dg.od-dg-plain-walls .dungeon-map-svg .room-link path.od-dg-loot-inner {
    display: none;
}

@media (max-width: 767px) {
    #od-dg .od-dg-wall-label {
        display: none;
    }
}

/* Switch track: one plain color (gold on Color, gray on Plain) */
#od-dg button.od-dg-switch {
    background: #b8871b;
    border-color: #8a6a26;
}

#od-dg.od-dg-plain-walls button.od-dg-switch {
    background: #5f656b;
    border-color: #50555a;
}

/* Switch followed by its action label */
#od-dg .od-dg-wall-text {
    color: #c9c3b6;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 767px) {
    #od-dg .od-dg-wall-text {
        display: none;
    }
}

/* Wall-color label: visible down to small phones; switch sits right after the title */
@media (max-width: 767px) {
    #od-dg .od-dg-title,
    #od-dg h1.od-dg-title[data-logo] {
        flex: 0 1 auto;
    }

    #od-dg .od-dg-wall-toggle {
        margin-right: auto;
    }

    #od-dg .od-dg-wall-text {
        display: inline;
    }
}

@media (max-width: 520px) {
    #od-dg .od-dg-wall-text {
        display: none;
    }
}

/* Bigger wall-color switch */
#od-dg button.od-dg-switch {
    width: 52px;
    height: 28px;
}

#od-dg .od-dg-switch-knob {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
}

#od-dg.od-dg-plain-walls .od-dg-switch-knob {
    left: 27px;
}

#od-dg .od-dg-wall-text {
    font-size: 13px;
}

@media (pointer: coarse) {
    #od-dg button.od-dg-switch {
        width: 56px;
        height: 32px;
    }

    #od-dg .od-dg-switch-knob {
        width: 24px;
        height: 24px;
    }

    #od-dg.od-dg-plain-walls .od-dg-switch-knob {
        left: 27px;
    }
}

/* No title in the app bar: switch sits right after Options */
#od-dg .od-dg-wall-toggle {
    margin-left: 6px;
    margin-right: auto;
}

/* Intro screen: clear space between paragraphs */
#od-dg .od-dg-intro p {
    margin: 0 0 1em;
}

#od-dg .od-dg-intro p + p {
    margin-top: 0;
}

#od-dg .od-dg-intro h1 {
    margin: 0 0 0.6em;
}

/* Adventure Mode ---------------------------------------------------------- */

/* Its own switch state (independent of the wall-color switch) */
#od-dg .od-dg-adventure-toggle {
    margin-left: 10px;
}

#od-dg .od-dg-adventure-toggle button.od-dg-switch,
#od-dg.od-dg-plain-walls .od-dg-adventure-toggle button.od-dg-switch {
    background: #5f656b;
    border-color: #50555a;
}

#od-dg .od-dg-adventure-toggle .od-dg-switch-knob,
#od-dg.od-dg-plain-walls .od-dg-adventure-toggle .od-dg-switch-knob {
    left: 3px;
}

#od-dg.od-dg-adventure-switch-on .od-dg-adventure-toggle button.od-dg-switch {
    background: #7a3fb0;
    border-color: #5c2d87;
}

#od-dg.od-dg-adventure-switch-on .od-dg-adventure-toggle .od-dg-switch-knob {
    left: 27px;
}

#od-dg .od-dg-adventure-text {
    color: #c9c3b6;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

#od-dg.od-dg-adventure-switch-on .od-dg-adventure-text {
    color: #e2c8ff;
}

/* The wall-color switch no longer pushes the rest of the bar away */
#od-dg .od-dg-wall-toggle:not(.od-dg-adventure-toggle) {
    margin-right: 0;
}

#od-dg .od-dg-adventure-toggle {
    margin-right: auto;
}

@media (pointer: coarse) {
    #od-dg.od-dg-adventure-switch-on .od-dg-adventure-toggle .od-dg-switch-knob {
        left: 27px;
    }
}

@media (max-width: 520px) {
    #od-dg .od-dg-adventure-text {
        display: none;
    }
}

/* Fog over the map */
#od-dg .dungeon-map-svg .od-dg-fog-cover {
    fill: #0b0d0e;
    fill-opacity: 0.99;
}

#od-dg .dungeon-map-svg .od-dg-fog-dot {
    fill: #d9cfb8;
    fill-opacity: 0.4;
}

/* Hidden rooms: tap anywhere inside the real shape */
#od-dg.od-dg-adventure-on .dungeon-map-svg .room-link path {
    pointer-events: all;
}

#od-dg.od-dg-adventure-on .dungeon-map-svg .room-link:hover {
    opacity: 1;
}

/* Hidden rooms' cards and icons in fogged areas stay out of sight */
#od-dg article.od-dg-hidden-card,
#od-dg .map-placed-icon.od-dg-fog-hidden-icon {
    display: none !important;
}

/* Explored checkbox in the room popup (same look as on the room card) */
#od-dg #roomPopupContent .od-dg-popup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-right: 48px;
    text-align: left;
}

#od-dg #roomPopupContent .od-dg-popup-actions .edit-room-btn,
#od-dg #roomPopupContent .od-dg-popup-actions .save-cancel-btns {
    margin-left: auto;
}

#od-dg #roomPopupContent .od-dg-explored-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px 6px 8px;
    border: 2px solid #f2c200;
    border-radius: 6px;
    background: #23272a;
    color: #e6e2d8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

#od-dg #roomPopupContent .od-dg-explored-toggle:has(input:checked) {
    border-color: #e02424;
    background: #1d3a21;
    color: #c9f2cd;
}

#od-dg #roomPopupContent .od-dg-explored-toggle input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #3fae4a;
    cursor: pointer;
}

#od-dg .dungeon-map-svg .od-dg-fog-number {
    fill: #ffffff;
    font-family: var(--font-default);
    font-size: 18px;
    font-weight: 700;
    pointer-events: none;
}

/* Fog room numbers grow while the mouse is over them */
#od-dg .dungeon-map-svg .od-dg-fog-number {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.15s ease;
    paint-order: stroke;
    stroke: #0b0d0e;
    stroke-width: 0;
}

#od-dg .dungeon-map-svg .od-dg-fog-number:hover {
    transform: scale(1.8);
    stroke-width: 3px;
}

#od-dg .dungeon-map-svg .od-dg-fog-number {
    pointer-events: bounding-box;
}

/* Opt-in map navigation: one surface for the SVG, fog and placed icons. */
#od-dg .od-map-navigation { min-width: 0; width: 100%; }
#od-dg .od-map-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    color: #e8dfcd;
}
#od-dg .od-map-controls button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border: 1px solid #927335;
    border-radius: 6px;
    background: #30291e;
    color: #fff0ce;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}
#od-dg .od-map-controls button[aria-pressed="true"] {
    background: #a92323;
    border-color: #ff7770;
    color: #fff;
    box-shadow: 0 0 8px rgb(255 67 57 / 65%), 0 0 18px rgb(255 67 57 / 30%);
}
#od-dg .od-map-controls button:disabled { opacity: .45; cursor: default; }
#od-dg .od-map-controls [hidden] { display: none !important; }
#od-dg .od-map-zoom-hint { flex-basis: 100%; font-size: 13px; }
/* Pop Out Map: the button and its two choices */
#od-dg .od-map-popout { position: relative; display: inline-block; }
#od-dg .od-map-controls .od-map-popout-button.is-open { border-color: #3ad06a; box-shadow: 0 0 6px rgb(58 208 106 / 55%); }
#od-dg .od-map-popout-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    display: flex; flex-direction: column; gap: 6px; min-width: 260px; max-width: min(360px, 90vw); padding: 8px;
    background: #1b1f1f; border: 1px solid #927335; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 55%);
}
#od-dg .od-map-popout-menu[hidden] { display: none !important; }
#od-dg .od-map-controls .od-map-popout-menu button {
    display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; font-weight: 400; margin: 0; box-sizing: border-box;
}
#od-dg .od-map-controls .od-map-popout-menu button strong { font-size: 15px; }
#od-dg .od-map-controls .od-map-popout-menu button small { color: #cbbfa6; font-size: 12px; line-height: 1.3; }
#od-dg .od-map-controls .od-map-popout-menu button .od-map-popout-state { font-size: 12px; color: #8ff5a8; }
#od-dg .od-map-controls .od-map-popout-menu button .od-map-popout-state:empty { display: none; }
#od-dg .od-map-controls .od-map-popout-menu button.is-open { border-color: #3ad06a; }
#od-dg .od-map-popout-note { color: #a89f8c; font-size: 12px; line-height: 1.3; padding: 0 2px; }
@media (max-width: 640px) {
    #od-dg .od-map-popout { position: static; }
    #od-dg .od-map-popout-menu { left: 8px; right: 8px; max-width: none; }
}
#od-dg .od-map-zoom-value { min-width: 4ch; font-variant-numeric: tabular-nums; }
#od-dg .od-map-viewport { position: relative; min-width: 0; }
#od-dg .od-map-space { position: relative; }
#od-dg .od-map-viewport .dungeon-map-container { transform-origin: 0 0; }
#od-dg .od-map-navigation.is-activated .od-map-viewport {
    overflow: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    border-radius: 4px;
    background: transparent;
    scrollbar-width: thin;
}
#od-dg .od-map-viewport.is-enabled { touch-action: none; cursor: grab; user-select: none; }
#od-dg .od-map-viewport.is-enabled .room-link { cursor: grab; }
#od-dg .od-map-viewport.is-panning, #od-dg .od-map-viewport.is-panning * { cursor: grabbing !important; }
#od-dg .od-map-viewport:focus,
#od-dg .od-map-viewport:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
@media print {
    #od-dg .od-map-controls { display: none !important; }
    #od-dg .od-map-navigation .od-map-viewport,
    #od-dg .od-map-navigation .od-map-space { width: auto !important; height: auto !important; overflow: visible !important; }
    #od-dg .od-map-navigation .dungeon-map-container { position: relative !important; transform: none !important; width: 100% !important; }
}

/* Room hover zoom ------------------------------------------------------- */

#od-dg .dungeon-map-svg .od-dg-room-zoom-inner {
    transition: transform 0.16s ease-out;
}

#od-dg .dungeon-map-svg .od-dg-room-zoom-panel {
    fill: #f0f0f0;
    stroke: #3a3f44;
    stroke-width: 0.8px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

/* The copy is a picture only */
#od-dg .dungeon-map-svg .od-dg-room-zoom * {
    pointer-events: none !important;
}

/* The map's own hover dimming does not apply to the enlarged copy */
#od-dg .dungeon-map-svg .od-dg-room-zoom .room-link {
    opacity: 1;
}

/* Close Card button in the room popup */
#od-dg #roomPopupContent button.od-dg-close-card {
    min-height: 38px;
    margin: 0;
    padding: 0 16px !important;
    border: 1px solid #8f1d1d;
    border-radius: 6px;
    background: #b32626;
    color: #fff;
    font-size: 14px !important;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

#od-dg #roomPopupContent button.od-dg-close-card:hover:not([disabled]) {
    background: #cc3333;
    box-shadow: none;
    transform: none;
}

/* Room popup X: no focus border when the card opens (a soft highlight shows keyboard focus instead) */
#od-dg #roomPopup .close-popup,
#od-dg #roomPopup .close-popup:focus,
#od-dg #roomPopup .close-popup:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#od-dg #roomPopup .close-popup:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Never outline the map or content containers when a room is clicked. */
#od-dg main#content:focus,
#od-dg main#content:focus-visible,
#od-dg #content:focus,
#od-dg svg:focus,
#od-dg svg:focus-visible,
#od-dg svg a:focus,
#od-dg svg a:focus-visible,
#od-dg .room-link:focus,
#od-dg .room-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Party box: Party Level, Party Size and Encounter Difficulty sit in one outlined group. */
#od-dg form#knobs fieldset > div:has([name="partyLevel"]),
#od-dg form#knobs fieldset > div:has([name="partySize"]),
#od-dg form#knobs fieldset > div:has([name="encounterDifficulty"]) {
    border-left: 1px solid #6b7075;
    border-right: 1px solid #6b7075;
    background: rgba(255, 255, 255, 0.03);
}
#od-dg form#knobs fieldset > div:has([name="partyLevel"]) {
    border-top: 1px solid #6b7075;
    border-radius: 6px 6px 0 0;
    margin-top: 6px;
}
#od-dg form#knobs fieldset > div:has([name="encounterDifficulty"]) {
    border-bottom: 1px solid #6b7075;
    border-radius: 0 0 6px 6px;
    margin-bottom: 12px;
}

/* Room stock editor (edit mode): monsters, magic items and traps --------- */

#od-dg #roomPopupContent.od-dg-stock-editing [data-od-stock-section] {
    display: none;
}

#od-dg .od-dg-stock-editor {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #00ff00;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
}

#od-dg .od-dg-stock-title {
    margin: 0 0 4px;
    font-size: 18px;
}

#od-dg .od-dg-stock-hint {
    margin: 0 0 12px;
    color: #c9cccc;
    font-size: 13px;
}

#od-dg .od-dg-stock-group {
    padding: 10px 0;
    border-top: 1px solid #5a5f63;
}

#od-dg .od-dg-stock-heading {
    margin: 0 0 6px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#od-dg .od-dg-stock-list {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

#od-dg .od-dg-stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

#od-dg .od-dg-stock-label {
    flex: 1 1 auto;
    min-width: 0;
}

#od-dg .od-dg-stock-name {
    font-weight: 600;
}

#od-dg .od-dg-stock-detail {
    margin-left: 8px;
    color: #b8bcbc;
    font-size: 13px;
}

#od-dg input.od-dg-stock-count {
    flex: 0 0 auto;
    width: 58px;
    min-height: 32px;
    padding: 2px 6px;
    font-size: 15px;
}

#od-dg .od-dg-stock-times {
    color: #b8bcbc;
}

#od-dg button.od-dg-stock-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 1px solid #8a2020;
    border-radius: 5px;
    background: #b32626;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

#od-dg button.od-dg-stock-remove:hover {
    background: #d03030;
}

#od-dg .od-dg-stock-empty {
    margin: 0 0 8px;
    color: #9da1a1;
    font-style: italic;
}

#od-dg .od-dg-stock-summary {
    margin: 0 0 8px;
    color: #f0c040;
    font-size: 14px;
}

#od-dg .od-dg-stock-search {
    position: relative;
}

#od-dg input.od-dg-stock-input {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 16px; /* 16px keeps phones from zooming in */
}

#od-dg .od-dg-stock-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    margin: 2px 0 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #6b7075;
    border-radius: 6px;
    background: #1f2222;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#od-dg .od-dg-stock-results[hidden] {
    display: none;
}

#od-dg .od-dg-stock-option {
    margin: 0;
    padding: 7px 10px;
    cursor: pointer;
}

#od-dg .od-dg-stock-option:hover,
#od-dg .od-dg-stock-option.is-active {
    background: #3a3f44;
}

#od-dg .od-dg-stock-noresult {
    margin: 0;
    padding: 7px 10px;
    color: #9da1a1;
}

@media (max-width: 520px) {
    #od-dg .od-dg-stock-editor {
        padding: 10px;
    }
    #od-dg .od-dg-stock-detail {
        display: block;
        margin-left: 0;
    }
}

/* Room title edit box: same gap under "Room X" as the Description box has */
#od-dg [id^="room-title-suffix-"],
#od-dg [id^="room-title-suffix-"].editable-active {
    margin-top: 10px;
}

/* Edit mode: Description and Items boxes get breathing room inside the green border */
#od-dg #roomPopupContent [data-editable-section="description"].editable-active,
#od-dg #roomPopupContent [data-editable-section="items"].editable-active {
    margin: 0;
    padding: 6px 12px;
}
#od-dg #roomPopupContent [data-editable-section="items"].editable-active {
    padding-bottom: 12px;
}

/* Room cards: collapsed under the map until "Show All Rooms" is clicked */
#od-dg [data-grid].od-dg-rooms-collapsed {
    display: none !important;
}

#od-dg .od-dg-room-list-toggle {
    display: flex;
    justify-content: center;
    margin: 18px 0 24px;
}

#od-dg button[data-od-room-list] {
    min-height: 44px;
    padding: 0 28px;
    border: 1px solid #c2610f;
    border-radius: 6px;
    background: #e07b1a;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#od-dg button[data-od-room-list]:hover {
    background: #c96b12;
}

#od-dg button[data-od-room-list].is-open {
    border-color: #4a4f54;
    background: #3a3f44;
}

@media print {
    /* Printing always includes every room */
    #od-dg [data-grid].od-dg-rooms-collapsed {
        display: grid !important;
    }
}

/* Story Adventure ----------------------------------------------------------- */

#od-dg .od-dg-story-overview {
    margin: 0 0 24px;
}

#od-dg .od-dg-story-details {
    border: 1px solid #6b5a2e;
    border-radius: 8px;
    background: #1b1d1d;
}

#od-dg .od-dg-story-details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style-position: inside;
}

#od-dg .od-dg-story-summary-title {
    font-size: 20px;
    font-weight: 700;
    color: #f0c040;
}

#od-dg .od-dg-story-badge,
#od-dg .od-dg-story-tag-dn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: #7a1f1f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#od-dg .od-dg-story-body {
    padding: 0 16px 16px;
}

#od-dg .od-dg-story-body p {
    margin: 0 0 8px;
    text-align: left;
}

#od-dg .od-dg-story-meta,
#od-dg .od-dg-story-hint {
    color: #b8bcbc;
    font-size: 14px;
}

#od-dg .od-dg-story-sec {
    padding: 12px 0;
    border-top: 1px solid #3a3f44;
}

#od-dg .od-dg-story-sec h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: #f0c040;
}

#od-dg .od-dg-story-sec ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

#od-dg .od-dg-story-sec li {
    margin: 0 0 6px;
    text-align: left;
}

#od-dg .od-dg-story-list {
    list-style: none;
    padding-left: 0 !important;
}

#od-dg .od-dg-story-list li {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

#od-dg .od-dg-story-list label {
    cursor: pointer;
}

#od-dg .od-dg-story-list input,
#od-dg .od-dg-story-found input {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    vertical-align: -3px;
    accent-color: #f0c040;
}

#od-dg .od-dg-story-where {
    color: #b8bcbc;
}

#od-dg .od-dg-story-sec.is-player,
#od-dg .od-dg-story-read {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 4px solid #f0c040;
    border-radius: 0 6px 6px 0;
    background: rgba(240, 192, 64, 0.08);
}

#od-dg .od-dg-story-tag {
    display: inline-block;
    margin: 0 0 4px;
    color: #f0c040;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#od-dg .od-dg-story-sec h3 .od-dg-story-tag {
    margin-left: 8px;
    font-size: 11px;
}

#od-dg .od-dg-story-clock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#od-dg .od-dg-pips {
    display: inline-flex;
    gap: 4px;
}

#od-dg .od-dg-pip {
    width: 16px;
    height: 16px;
    border: 2px solid #f0c040;
    border-radius: 50%;
}

#od-dg .od-dg-pip.is-on {
    background: #f0c040;
}

#od-dg button.od-dg-clock-btn {
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    border: 1px solid #6b7075;
    border-radius: 6px;
    background: #3a3f44;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#od-dg .od-dg-story-clock .is-full {
    color: #ff8a80;
}

#od-dg textarea.od-dg-story-notes-input {
    width: 100%;
    min-height: 90px;
    padding: 8px 10px;
    font-size: 16px;
}

#od-dg .od-dg-story-notes-print,
#od-dg .od-dg-story-print-banner {
    display: none;
}

#od-dg .od-dg-story-warnings {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #b32626;
    border-radius: 6px;
    background: rgba(179, 38, 38, 0.12);
}

#od-dg .od-dg-story-warnings h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #ff8a80;
}

#od-dg .od-dg-story-warnings li.is-review {
    color: #f0c040;
}

#od-dg .od-dg-story-skipped {
    color: #b8bcbc;
    font-style: italic;
}

/* Room cards and popups */

#od-dg .od-dg-story-room {
    margin: 14px 0;
}

#od-dg .od-dg-story-block {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #6b5a2e;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

#od-dg h3.od-dg-story-heading {
    margin: 0 0 6px;
    font-size: 17px;
    color: #f0c040;
}

#od-dg .od-dg-story-kicker {
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #6b5a2e;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 2px;
}

#od-dg .od-dg-story-read p,
#od-dg .od-dg-story-dn p {
    margin: 0 0 6px;
    text-align: left;
}

#od-dg .od-dg-story-dn {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 4px solid #b32626;
    border-radius: 0 6px 6px 0;
    background: rgba(179, 38, 38, 0.08);
}

#od-dg .od-dg-story-dn .od-dg-story-tag-dn {
    margin-bottom: 6px;
}

#od-dg .od-dg-story-found {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

#od-dg .od-dg-story-found li {
    margin: 0 0 6px;
    text-align: left;
}

#od-dg .od-dg-story-warning {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(179, 38, 38, 0.15);
    color: #ffb4ab;
}

#od-dg .od-dg-story-warning.is-review {
    background: rgba(240, 192, 64, 0.12);
    color: #f0c040;
}

#od-dg a.od-dg-sref-link {
    color: #f0c040;
    text-decoration: underline;
    cursor: pointer;
}

#od-dg .od-dg-sref-hidden {
    font-style: italic;
    color: #9da1a1;
}

@media print {
    #od-dg .od-dg-story-print-banner {
        display: block;
        margin: 0 0 10px;
        padding: 6px 10px;
        border: 2px solid #000;
        font-weight: 700;
        text-align: center;
    }
    #od-dg .od-dg-story-notes-print {
        display: block;
        white-space: pre-wrap;
    }
    #od-dg .od-dg-story-details,
    #od-dg .od-dg-story-block,
    #od-dg .od-dg-story-list li {
        background: none !important;
    }
    #od-dg .od-dg-story-details > summary {
        list-style: none;
    }
}

/* Story checklists: plain inline labels (the theme styles form labels) */
#od-dg .od-dg-story-list label,
#od-dg .od-dg-story-found label {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}
#od-dg .od-dg-story-list li > div {
    margin-top: 4px;
}

/* Adventure Overview sits under the map key, above "Show All Rooms" */
#od-dg .od-dg-story-overview {
    margin: 20px 0 8px;
}

/* Adventure Mode (story) switch: its own state, green when on ----------- */
#od-dg .od-dg-story-toggle {
    margin-left: 10px;
}

#od-dg .od-dg-story-toggle button.od-dg-switch,
#od-dg.od-dg-plain-walls .od-dg-story-toggle button.od-dg-switch {
    background: #5f656b !important;
    border-color: #50555a !important;
}

#od-dg .od-dg-story-toggle .od-dg-switch-knob,
#od-dg.od-dg-plain-walls .od-dg-story-toggle .od-dg-switch-knob {
    left: 3px !important;
}

#od-dg .od-dg-story-toggle button.od-dg-switch[aria-checked="true"] {
    background: #2f8f4e !important;
    border-color: #23703c !important;
}

#od-dg .od-dg-story-toggle button.od-dg-switch[aria-checked="true"] .od-dg-switch-knob {
    left: 27px !important;
}

#od-dg .od-dg-story-text {
    color: #c9c3b6;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

#od-dg.od-dg-story-on .od-dg-story-text {
    color: #b7f0c8;
}

/* Keep all three switch labels visible on phones. Full names remain in the DOM. */
@media (max-width: 767px) {
    #od-dg .od-dg-map-switches {
        gap: 8px;
        padding: 8px;
    }

    #od-dg .od-dg-map-switches .od-dg-wall-text,
    #od-dg .od-dg-map-switches .od-dg-story-text,
    #od-dg .od-dg-map-switches .od-dg-adventure-text {
        display: inline;
        font-size: 0;
    }

    #od-dg .od-dg-map-switches .od-dg-wall-text::after { content: 'No WC'; }
    #od-dg .od-dg-map-switches .od-dg-story-text::after { content: 'AM'; }
    #od-dg .od-dg-map-switches .od-dg-adventure-text::after { content: 'Fog'; }

    #od-dg .od-dg-map-switches .od-dg-wall-text::after,
    #od-dg .od-dg-map-switches .od-dg-story-text::after,
    #od-dg .od-dg-map-switches .od-dg-adventure-text::after {
        font-size: 12px;
    }
}

/* These Options checkboxes only carry a value to the generator. */
#od-dg form#knobs fieldset > div:has([name="storyAdventure"]),
#od-dg form#knobs fieldset > div:has([name="dungeonNameTyped"]) {
    display: none !important;
}

/* "No story adventure for this map" notice */
#od-dg .od-dg-story-skipped {
    padding: 12px 16px;
    border: 1px solid #6b5a2e;
    border-left: 4px solid #f0c040;
    border-radius: 6px;
    background: rgba(240, 192, 64, 0.08);
    color: #e8e2d4;
    font-style: normal;
    text-align: left;
}

/* Blue outline: a trap and nothing else in the room */
#od-dg .dungeon-map-svg .room-link.od-dg-trap path.od-dg-outline {
    stroke: #2f7fd6;
    stroke-width: 2px;
}

/* Map key, second row: outline colors */
#od-dg ul.od-dg-color-key {
    margin-top: 6px;
}

#od-dg ul.od-dg-color-key li span.od-dg-key-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 0;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

#od-dg .od-dg-key-start    { background: #1f9b1f; }
#od-dg .od-dg-key-monster  { background: #d11f1f; }
#od-dg .od-dg-key-trap     { background: #2f7fd6; }
#od-dg .od-dg-key-treasure { background: #d4a017; }

/* With wall colors turned off the outlines are gray, so the color key hides. */
#od-dg.od-dg-plain-walls ul.od-dg-color-key {
    display: none;
}

/* Help ---------------------------------------------------------------------
   Appended to <body> (outside #od-dg), so these rules are scoped by class.
   Same palette as the Adventure Overview: dark panels, gold headings. */
.od-dg-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
}

.od-dg-help {
    display: flex;
    flex-direction: column;
    width: 680px;
    max-width: 100%;
    max-height: 88vh;
    overflow: hidden;
    border: 1px solid #6b5a2e;
    border-radius: 10px;
    background: #16181a;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    color: #e6e6e6;
    font-family: var(--font-default, 'DM Sans', sans-serif);
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
}

.od-dg-help-head {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #2c2f31;
    background: linear-gradient(180deg, #1f2224 0%, #16181a 100%);
}

.od-dg-help-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.od-dg-help-title {
    margin: 0;
    font-family: var(--font-title, 'Alegreya SC', serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #f0c040;
    letter-spacing: 0.02em;
}

.od-dg-help-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9aa0a3;
}

.od-dg-help-close {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid #3a3e41;
    border-radius: 50%;
    background: transparent;
    color: #c9cdd0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.od-dg-help-close:hover,
.od-dg-help-close:focus-visible {
    border-color: #f0c040;
    color: #f0c040;
    outline: none;
}

.od-dg-help-tools {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.od-dg-help-search {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #3a3e41;
    border-radius: 6px;
    background: #0f1112;
    color: #f2f2f2;
    font: inherit;
    font-size: 14px;
}

.od-dg-help-search::placeholder {
    color: #7d8488;
}

.od-dg-help-search:focus {
    border-color: #c49a3a;
    outline: none;
    box-shadow: 0 0 0 2px rgba(196, 154, 58, 0.25);
}

.od-dg-help-toggle {
    flex: none;
    padding: 0 12px;
    border: 1px solid #3a3e41;
    border-radius: 6px;
    background: #202326;
    color: #d8dbdd;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.od-dg-help-toggle:hover,
.od-dg-help-toggle:focus-visible {
    border-color: #c49a3a;
    color: #f0c040;
    outline: none;
}

.od-dg-help-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.od-dg-help-chip {
    padding: 4px 11px;
    border: 1px solid #3a3e41;
    border-radius: 999px;
    background: #1d2022;
    color: #c9cdd0;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.od-dg-help-chip:hover,
.od-dg-help-chip:focus-visible {
    border-color: #c49a3a;
    color: #f0c040;
    outline: none;
}

.od-dg-help-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 20px 18px;
}

.od-dg-help-group {
    scroll-margin-top: 8px;
}

.od-dg-help-group-title {
    margin: 18px 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c49a3a;
}

.od-dg-help-item {
    margin-bottom: 8px;
    border: 1px solid #2c2f31;
    border-radius: 8px;
    background: #1c1f21;
    transition: border-color 150ms ease;
}

.od-dg-help-item[open] {
    border-color: #4a4127;
    background: #1e2123;
}

.od-dg-help-summary {
    position: relative;
    padding: 11px 40px 11px 14px;
    font-weight: 600;
    color: #f2f2f2;
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}

.od-dg-help-summary::-webkit-details-marker {
    display: none;
}

.od-dg-help-summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #8d949a;
    border-bottom: 2px solid #8d949a;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 150ms ease;
}

.od-dg-help-item[open] > .od-dg-help-summary::after {
    border-color: #f0c040;
    transform: translateY(-30%) rotate(-135deg);
}

.od-dg-help-summary:hover {
    color: #f0c040;
}

.od-dg-help-summary:focus-visible {
    outline: 2px solid #c49a3a;
    outline-offset: -2px;
}

.od-dg-help-content {
    padding: 0 16px 14px;
}

.od-dg-help-lead {
    margin: 0 0 8px;
    color: #eceeef;
}

.od-dg-help-points {
    margin: 0 0 4px;
    padding-left: 20px;
    color: #c4c9cc;
}

.od-dg-help-points li {
    margin: 0 0 5px;
    padding-left: 2px;
}

.od-dg-help-points li::marker {
    color: #c49a3a;
}

.od-dg-help strong {
    color: #ffffff;
    font-weight: 600;
}

.od-dg-help-callout {
    margin: 10px 0 2px;
    padding: 9px 12px;
    border-left: 3px solid;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
}

.od-dg-help-note {
    border-color: #4fc3f7;
    background: rgba(79, 195, 247, 0.08);
    color: #cfe9f5;
}

.od-dg-help-warn {
    border-color: #f0c040;
    background: rgba(240, 192, 64, 0.1);
    color: #f5e2b0;
}

.od-dg-help-empty {
    margin: 24px 0;
    text-align: center;
    color: #9aa0a3;
}

.od-dg-help-foot {
    display: flex;
    justify-content: flex-start; /* the site's dice button floats bottom right */
    padding: 12px 20px;
    border-top: 1px solid #2c2f31;
    background: #16181a;
}

.od-dg-help-done {
    padding: 9px 22px;
    border: none;
    border-radius: 6px;
    background: #1f9b1f;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.od-dg-help-done:hover,
.od-dg-help-done:focus-visible {
    background: #2dc303;
    outline: none;
}

@media (max-width: 600px) {
    .od-dg-help-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .od-dg-help {
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }

    .od-dg-help-head {
        padding: 14px 14px 10px;
    }

    .od-dg-help-title {
        font-size: 24px;
    }

    /* Topic chips: one row that scrolls sideways, so the topics keep the room. */
    .od-dg-help-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -14px;
        padding-right: 14px;
        scrollbar-width: none;
    }

    .od-dg-help-nav::-webkit-scrollbar {
        display: none;
    }

    .od-dg-help-chip {
        flex: none;
    }

    .od-dg-help-body {
        padding: 4px 14px 14px;
    }

    .od-dg-help-foot {
        padding: 10px 14px;
    }

}

@media print {
    .od-dg-help-overlay {
        display: none !important;
    }
}

/* Generation choices stay together; view switches travel with the map controls. */
#od-dg .od-dg-generation-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-right:auto; }
#od-dg .od-dg-generation-controls .od-dg-story-toggle { margin:0; }
#od-dg .od-dg-generation-controls .od-dg-story-text { font-size:16px; }
#od-dg .od-map-controls .od-dg-map-switches { margin:0; padding:6px 10px; }
#od-dg .od-map-controls .od-dg-map-switches button.od-dg-switch { min-height:28px; min-width:52px; padding:0; }
#od-dg [aria-labelledby="od-dg-wall-text"][aria-checked="true"] .od-dg-switch-knob { left:27px; }
#od-dg [aria-labelledby="od-dg-wall-text"][aria-checked="false"] .od-dg-switch-knob { left:3px; }
@media (max-width:767px) {
 #od-dg.has-mobile-tools-toggle:not(.is-mobile-tools-open) .od-dg-generation-controls { display:none; }
 #od-dg .od-dg-map-switches .od-dg-wall-text::after { content:'Colors'; }
 #od-dg .od-map-controls .od-dg-map-switches { flex:0 1 auto; }
}
#od-dg .od-map-controls button[aria-labelledby="od-dg-wall-text"] { border-radius:999px; border:1px solid #666; background:#60666b; }
#od-dg .od-map-controls button[aria-labelledby="od-dg-wall-text"][aria-checked="true"] { background:#b58a16; border-color:#927335; }
#od-dg .od-map-controls .od-dg-map-switches button.od-dg-switch { border-radius:999px; }

/* Center the generation pair, keeping file actions on the right when space permits. */
@media (min-width: 1024px) {
 #od-dg .od-dg-bar { position:relative; flex-wrap:wrap; }
 #od-dg .od-dg-generation-controls { justify-content:center; flex:1 0 100%; margin:0; }
 #od-dg .od-dg-tools { margin-left:auto; }
}
@media (min-width: 1800px) {
 #od-dg .od-dg-bar { min-height:74px; }
 #od-dg .od-dg-generation-controls { position:absolute; left:50%; transform:translateX(-50%); flex:none; flex-wrap:nowrap; }
}
#od-dg .od-dg-reveal-undo { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:10020; padding:10px 16px; border:1px solid #c49a3a; border-radius:8px; background:#25251f; color:#fff; box-shadow:0 3px 15px #0008; }
#od-dg .od-dg-reveal-undo button { min-height:44px; margin-left:8px; padding:6px 14px; background:#e07b1a; color:white; }
#od-dg .od-dg-hide-room { background:#803e39; color:white; }

/* Fog corrections: full-size action button, with its explanation on a separate row. */
#od-dg #roomPopupContent .od-dg-popup-actions .od-dg-hide-room {
 display:inline-flex; align-items:center; justify-content:center;
 min-height:40px; margin:0; padding:8px 14px; border:1px solid #b66b62;
 border-radius:5px; background:#803e39; color:#fff; font-size:14px; font-weight:700;
}
#od-dg #roomPopupContent .od-dg-hide-room:disabled { opacity:.5; cursor:not-allowed; }
#od-dg #roomPopupContent .od-dg-hide-room-note {
 order:10; flex:0 0 100%; text-align:left; font-size:12px; line-height:1.5; color:#ddd;
}
#od-dg .od-dg-reveal-undo {
 display:flex; align-items:center; gap:12px; left:16px; bottom:16px; transform:none;
 box-sizing:border-box; max-width:calc(100vw - 32px); font-size:14px; line-height:1.4;
}
#od-dg .od-dg-reveal-undo button {
 flex:none; margin:0; border:1px solid #c2610f; border-radius:5px; font-size:14px; font-weight:700;
}
@media(max-width:767px) {
 #od-dg .od-dg-reveal-undo { bottom:84px; }
 #od-dg #roomPopupContent .od-dg-popup-actions .edit-room-btn { margin-left:0; }
}

/* Anchor reveal Undo above Show All Rooms without moving the button. */
#od-dg .od-dg-room-list-toggle { position:relative; }
#od-dg .od-dg-room-list-toggle .od-dg-reveal-undo {
 position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
 width:max-content; max-width:100%; z-index:10;
}