/* ============================================================
   Design Center — build-genre.css
   Single-Screen Game Menu Builder Layout
   Right-Side Builder Buttons + Left-Side Genre Buttons
   Desktop Focused
   ============================================================ */

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body{
  --genre-accent:#f0c86f;
  --genre-accent-strong:#9c6c24;
  --genre-accent-soft:rgba(240,200,111,.22);
  --genre-glow:rgba(240,200,111,.32);
  --genre-panel:rgba(28,30,38,.96);
  --genre-panel-deep:rgba(8,10,14,.96);
  --genre-paper:#fff8e8;
  --genre-paper-deep:#e1c696;
  --genre-ink:#281607;
  --genre-on-accent:#181008;
  color:#f8ecd8;
  background:
    linear-gradient(rgba(4,5,8,.18), rgba(4,5,8,.78)),
    url("../images/genre-bg/fantasy-loop-bg.png") center center / cover no-repeat fixed;
  overflow:hidden;
}

/* =========================
   GENRE BACKGROUNDS
   ========================= */

body.genre-fantasy{
  --genre-accent:#f0c86f;
  --genre-accent-strong:#9c6c24;
  --genre-accent-soft:rgba(240,200,111,.24);
  --genre-glow:rgba(240,200,111,.36);
  --genre-panel:rgba(38,28,18,.96);
  --genre-panel-deep:rgba(12,8,6,.96);
  --genre-paper:#fff2c4;
  --genre-paper-deep:#d9ad5d;
  --genre-ink:#241405;
  --genre-on-accent:#181008;
  background:
    linear-gradient(rgba(4,5,8,.18), rgba(4,5,8,.78)),
    url("../images/genre-bg/fantasy-loop-bg.png") center center / cover no-repeat fixed;
}

body.genre-scifi{
  --genre-accent:#78e8ff;
  --genre-accent-strong:#2367a8;
  --genre-accent-soft:rgba(120,232,255,.22);
  --genre-glow:rgba(120,232,255,.38);
  --genre-panel:rgba(14,32,46,.96);
  --genre-panel-deep:rgba(4,10,18,.97);
  --genre-paper:#e8fbff;
  --genre-paper-deep:#a8dff0;
  --genre-ink:#061b25;
  --genre-on-accent:#031018;
  background:
    linear-gradient(rgba(4,5,8,.22), rgba(4,5,8,.82)),
    url("../images/genre-bg/scifi-loop-bg.png") center center / cover no-repeat fixed;
}

body.genre-cyberpunk{
  --genre-accent:#ff3fb4;
  --genre-accent-strong:#00d8ff;
  --genre-accent-soft:rgba(255,63,180,.24);
  --genre-glow:rgba(255,63,180,.42);
  --genre-panel:rgba(34,13,46,.96);
  --genre-panel-deep:rgba(7,4,18,.97);
  --genre-paper:#ffe7f7;
  --genre-paper-deep:#c3f4ff;
  --genre-ink:#25051b;
  --genre-on-accent:#120016;
  background:
    linear-gradient(rgba(4,5,8,.22), rgba(4,5,8,.82)),
    url("../images/genre-bg/cyberpunk-loop-bg.png") center center / cover no-repeat fixed;
}

body.genre-steampunk{
  --genre-accent:#d99a45;
  --genre-accent-strong:#6b3e18;
  --genre-accent-soft:rgba(217,154,69,.24);
  --genre-glow:rgba(217,154,69,.36);
  --genre-panel:rgba(45,29,18,.96);
  --genre-panel-deep:rgba(15,9,6,.97);
  --genre-paper:#f8e2ba;
  --genre-paper-deep:#b98244;
  --genre-ink:#251306;
  --genre-on-accent:#170c04;
  background:
    linear-gradient(rgba(4,5,8,.22), rgba(4,5,8,.82)),
    url("../images/genre-bg/steampunk-loop-bg.png") center center / cover no-repeat fixed;
}

body.genre-horror{
  --genre-accent:#d93636;
  --genre-accent-strong:#4f0909;
  --genre-accent-soft:rgba(217,54,54,.24);
  --genre-glow:rgba(217,54,54,.38);
  --genre-panel:rgba(33,10,12,.96);
  --genre-panel-deep:rgba(5,4,6,.98);
  --genre-paper:#f1e5d6;
  --genre-paper-deep:#b48a83;
  --genre-ink:#1b0707;
  --genre-on-accent:#fff3e6;
  background:
    linear-gradient(rgba(4,5,8,.35), rgba(4,5,8,.9)),
    url("../images/genre-bg/horror-loop-bg.png") center center / cover no-repeat fixed;
}

body.genre-postapoc{
  --genre-accent:#c8dd62;
  --genre-accent-strong:#6e7a2d;
  --genre-accent-soft:rgba(200,221,98,.24);
  --genre-glow:rgba(200,221,98,.34);
  --genre-panel:rgba(33,39,24,.96);
  --genre-panel-deep:rgba(10,12,8,.97);
  --genre-paper:#edf0c8;
  --genre-paper-deep:#a4a95d;
  --genre-ink:#20240d;
  --genre-on-accent:#111406;
  background:
    linear-gradient(rgba(4,5,8,.28), rgba(4,5,8,.86)),
    url("../images/genre-bg/postapoc-loop-bg.png") center center / cover no-repeat fixed;
}

/* =========================
   HEADER
   ========================= */

header{
  height:74px;
  background:rgba(5,6,8,.9);
  border-bottom:2px solid rgba(240,200,111,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  position:relative;
  z-index:30;
}

header .topbar{
  height:74px;
  padding:0 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  line-height:1;
  padding-top:8px;
}

/* =========================
   FULL SCREEN SHELL
   ========================= */

.realm-screen{
  height:calc(100vh - 74px);
  padding:20px 32px;
  box-sizing:border-box;
  overflow:hidden;
}

.realm-main-section{
  width:100%;
  max-width:1880px;
  height:100%;
  margin:0 auto;
}

.realm-layout{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:150px minmax(320px, 1fr);
  gap:28px;
  align-items:stretch;
  position:relative;
}

/* =========================
   LEFT SIDE GENRE BUTTONS
   ========================= */

.realm-sidebar{
  grid-column:1;
  height:100%;
  box-sizing:border-box;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  overflow:hidden;
  position:relative;
  z-index:12;
}

.realm-genre-panel{
  height:100%;
  position:relative;
}

.realm-genre-panel h3{
  display:none;
}

.genre-menu-grid{
  position:absolute;
  inset:0;
}

.genre-btn{
  appearance:none;
  cursor:pointer;
  pointer-events:auto;
  position:absolute;
  left:0;
  width:120px;
  min-height:108px;
  padding:12px 8px;
  background:
    radial-gradient(circle at top, rgba(240,200,111,.22), transparent 48%),
    linear-gradient(180deg, rgba(28,30,38,.96), rgba(8,10,14,.96));
  border:3px solid rgba(240,200,111,.42);
  color:#f8ecd8;
  box-shadow:
    6px 6px 0 rgba(0,0,0,.42),
    0 0 18px rgba(0,0,0,.4);
  transition:.18s ease;
  text-align:center;
  border-radius:14px;
  font-size:.72rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:bold;
}

.genre-btn:hover,
.genre-btn.active{
  transform:translateY(-6px) scale(1.04);
  border-color:#9fe6e6;
  box-shadow:
    6px 6px 0 rgba(0,0,0,.42),
    0 0 24px rgba(159,230,230,.34);
}

.genre-btn[data-genre="fantasy"]{
  top:6px;
}

.genre-btn[data-genre="scifi"]{
  top:118px;
}

.genre-btn[data-genre="cyberpunk"]{
  top:230px;
}

.genre-btn[data-genre="steampunk"]{
  top:342px;
}

.genre-btn[data-genre="horror"]{
  top:454px;
}

.genre-btn[data-genre="postapoc"]{
  top:566px;
}

/* =========================
   PAID BUILD SCREEN AREA
   ========================= */

.realm-command-board{
  grid-column:2;
  height:100%;
  box-sizing:border-box;
  background:rgba(5,6,8,.84);
  border:0;
  box-shadow:none;
  padding:22px;
  overflow:auto;
  position:relative;
  z-index:8;
}
.realm-command-board-paid{
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0;
  overflow:hidden;
}

.module-board{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.builder-game-form{
  position:relative;
  width:100%;
  height:100%;
}

/* =========================
   STATUS CARD
   ========================= */

.builder-status-card{
  position:absolute;
  top:-58px;
  left:50%;
  transform:translateX(-50%);
  z-index:25;
  min-width:260px;
  max-width:360px;
  padding:10px 18px;
  background:rgba(5,6,8,.88);
  border:2px solid rgba(240,200,111,.34);
  color:#f8e3af;
  box-shadow:
    5px 5px 0 rgba(0,0,0,.35),
    0 0 18px rgba(0,0,0,.35);
  font-size:.88rem;
  line-height:1.25;
  text-align:center;
}

/* =========================
   RIGHT SIDE VERTICAL BUILDER BUTTONS
   ========================= */

.builder-icon-nav{
  position:absolute;
  inset:0;
  z-index:15;
  pointer-events:none;
}

.builder-nav-btn{
  appearance:none;
  cursor:pointer;
  pointer-events:auto;
  position:absolute;
  width:120px;
  min-height:108px;
  padding:12px 8px;
  background:
    radial-gradient(circle at top, rgba(240,200,111,.22), transparent 48%),
    linear-gradient(180deg, rgba(28,30,38,.96), rgba(8,10,14,.96));
  border:3px solid rgba(240,200,111,.42);
  color:#f8ecd8;
  box-shadow:
    6px 6px 0 rgba(0,0,0,.42),
    0 0 18px rgba(0,0,0,.4);
  transition:.18s ease;
  text-align:center;
  border-radius:14px;
}

.builder-nav-btn:hover,
.builder-nav-btn.active{
  transform:translateY(-6px) scale(1.04);
  border-color:#9fe6e6;
  box-shadow:
    6px 6px 0 rgba(0,0,0,.42),
    0 0 24px rgba(159,230,230,.34);
}

.builder-nav-icon{
  display:block;
  font-size:2.1rem;
  line-height:1;
  margin-bottom:8px;
}

.builder-nav-label{
  display:block;
  font-size:.72rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:bold;
}

/* =========================
   RIGHT SIDE BUTTON PLACEMENT
   Two-column desktop layout
   ========================= */

.builder-nav-btn[data-panel="builderPanelRealm"]{
  right:164px;
  top:6px;
}

.builder-nav-btn[data-panel="builderPanelVisual"]{
  right:32px;
  top:6px;
}

.builder-nav-btn[data-panel="builderPanelIdentity"]{
  right:164px;
  top:124px;
}

.builder-nav-btn[data-panel="builderPanelMedia"]{
  right:32px;
  top:124px;
}

.builder-nav-btn[data-panel="builderPanelContent"]{
  right:164px;
  top:242px;
}

.builder-nav-btn[data-panel="builderPanelModules"]{
  right:32px;
  top:242px;
}

.builder-nav-btn[data-panel="builderPanelGenerate"]{
  right:98px;
  top:360px;
  bottom:auto;
  border-color:rgba(159,230,230,.65);
}

.builder-nav-btn[data-panel="builderPanelGenerate"]:hover,
.builder-nav-btn[data-panel="builderPanelGenerate"].active{
  transform:translateY(-6px) scale(1.04);
}
/* =========================
   CENTER POPUP PANELS
   ========================= */

.builder-panel-stage{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}

.builder-panel{
  display:none;
  pointer-events:auto;
  position:absolute;
  left:58%;
  top:20px;
  transform:translateX(-50%);
  width:min(700px, 76%);
  height:auto;
  max-height:calc(100vh - 150px);
  overflow:auto;
  padding:24px;
  box-sizing:border-box;
  background:
    linear-gradient(180deg, rgba(14,16,22,.95), rgba(5,6,8,.97));
  border:3px solid rgba(240,200,111,.5);
  box-shadow:
    9px 9px 0 rgba(0,0,0,.45),
    0 0 42px rgba(0,0,0,.65);
  animation:builderPanelIn .16s ease-out;
}

.builder-panel-large{
  width:min(820px, 80%);
  height:calc(100vh - 150px);
  max-height:calc(100vh - 150px);
  padding-bottom:180px;
}
.builder-panel.active{
  display:block;
}

.builder-panel-close{
  position:absolute;
  right:10px;
  top:8px;
  width:36px;
  height:36px;
  border:2px solid rgba(240,200,111,.35);
  background:rgba(5,6,8,.9);
  color:#f8e3af;
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  font-family:Arial, sans-serif;
font-weight:bold;
}

.builder-panel-close:hover{
  border-color:#9fe6e6;
  color:#9fe6e6;
}

@keyframes builderPanelIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(8px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

/* =========================
   SCROLLBARS ONLY INSIDE PANELS
   ========================= */

.realm-command-board::-webkit-scrollbar,
.builder-panel::-webkit-scrollbar{
  width:10px;
}

.realm-command-board::-webkit-scrollbar-track,
.builder-panel::-webkit-scrollbar-track{
  background:rgba(0,0,0,.3);
}

.realm-command-board::-webkit-scrollbar-thumb,
.builder-panel::-webkit-scrollbar-thumb{
  background:#f0c86f;
}

/* =========================
   CONTENT STYLES
   ========================= */

.realm-command-title,
.realm-field-group{
  margin-bottom:22px;
}

.realm-command-title h2,
.realm-field-group h2{
  margin:0 44px 14px 0;
  color:#f0c86f;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:1.45rem;
}

.realm-command-title p{
  color:#f8ecd8;
  line-height:1.55;
}

.modules{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:24px;
}

.note{
  margin:0;
  padding:15px 16px;
  background:linear-gradient(180deg, rgba(246,226,184,.97), rgba(225,198,150,.97));
  color:#281607;
  border:2px solid rgba(45,25,8,.92);
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
}

.note h3{
  margin:0 0 8px;
  color:#5c2f0e;
  font-size:1rem;
  text-transform:uppercase;
}

.note p{
  margin:0;
  color:#281607;
  line-height:1.5;
}

.builder-panel .note,
.builder-game-form .note{
  transform:none !important;
}

/* =========================
   FORM CONTROLS
   ========================= */

input,
select,
textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
  padding:12px;
  border:2px solid rgba(80,45,12,.35);
  background:rgba(255,248,232,.96);
  color:#1d1208;
}

input[type="checkbox"]{
  width:auto;
  margin-right:8px;
}

input[type="color"]{
  min-height:44px;
  padding:3px;
}

textarea{
  min-height:120px;
}

.builder-markup-source{
  display:none !important;
}

.builder-markup-write{
  display:block;
  min-height:150px;
  margin:0;
  padding:13px 14px;
  border:3px solid rgba(80,45,12,.82);
  background:#ffffff;
  color:#120b05;
  caret-color:#000000;
  font-size:1rem;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  box-sizing:border-box;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.8),
    4px 4px 0 rgba(0,0,0,.16);
}

.builder-markup-write:empty:before{
  content:attr(data-placeholder);
  color:rgba(40,22,7,.58);
  pointer-events:none;
}

.builder-markup-write:focus{
  outline:none;
  border-color:#d94f8a;
  caret-color:#000000;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    0 0 0 3px rgba(217,79,138,.24),
    4px 4px 0 rgba(0,0,0,.18);
}

.builder-markup-editor textarea[data-markup-source]{
  display:block;
  min-height:150px;
  margin:0;
  padding:13px 14px;
  border:3px solid rgba(80,45,12,.82);
  background:#fffdf4;
  color:#120b05;
  caret-color:#e0005a !important;
  font-size:1rem;
  line-height:1.55;
  resize:vertical;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    4px 4px 0 rgba(0,0,0,.16);
}

.builder-markup-editor textarea[data-markup-source]::placeholder{
  color:rgba(40,22,7,.58);
}

.builder-markup-editor textarea[data-markup-source]:focus{
  outline:none;
  border-color:#d94f8a;
  background:#ffffff;
  caret-color:#e0005a !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.8),
    0 0 0 3px rgba(217,79,138,.24),
    4px 4px 0 rgba(0,0,0,.18);
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#d94f8a;
  box-shadow:0 0 12px rgba(217,79,138,.25);
}

.builder-markup-editor{
  display:grid;
  gap:8px;
}

.builder-editor-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:3px 7px;
  border:2px solid rgba(80,45,12,.72);
  background:#281607;
  color:#fff8e8;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  line-height:1;
  box-shadow:2px 2px 0 rgba(0,0,0,.18);
}

.builder-editor-preview-label{
  margin-top:2px;
}

.builder-markup-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.builder-markup-toolbar button{
  width:auto;
  min-width:34px;
  min-height:32px;
  margin:0;
  padding:6px 8px;
  border:2px solid rgba(80,45,12,.55);
  background:rgba(255,248,232,.96);
  color:#281607;
  font-weight:900;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.22);
}

.builder-markup-toolbar button:hover{
  transform:translateY(-1px);
  background:#f0c86f;
}

.builder-markup-preview{
  min-height:74px;
  max-height:220px;
  overflow:auto;
  padding:12px;
  border:2px dashed rgba(80,45,12,.42);
  background:rgba(255,248,232,.68);
  color:#281607;
  font-size:.92rem;
  line-height:1.45;
}

.builder-markup-preview p,
.builder-markup-preview ul,
.builder-markup-preview ol,
.builder-markup-preview h3,
.builder-markup-preview h4,
.builder-markup-preview h5{
  margin:0 0 8px;
  color:#281607;
  text-transform:none;
}

.builder-markup-preview h3,
.builder-markup-preview h4,
.builder-markup-preview h5{
  font-size:1rem;
}

.builder-markup-preview ul,
.builder-markup-preview ol{
  padding-left:22px;
}

.builder-preview-empty{
  opacity:.62;
  font-style:italic;
}

.builder-upload-field{
  margin-top:12px;
  display:grid;
  gap:6px;
}

.builder-upload-button{
  width:max-content;
  max-width:100%;
  padding:9px 12px;
  border:2px solid rgba(80,45,12,.72);
  background:#281607;
  color:#fff8e8;
  font-weight:900;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.22);
}

.builder-upload-button:hover{
  transform:translateY(-1px);
  background:#5c2f0e;
}

.builder-upload-status{
  font-size:.78rem;
  line-height:1.35;
  opacity:.78;
}

.builder-upload-popup[hidden]{
  display:none !important;
}

.builder-upload-popup{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,6,8,.62);
}

.builder-upload-popup-panel{
  position:relative;
  width:min(420px, 100%);
  padding:20px;
  border:3px solid rgba(80,45,12,.9);
  background:#fff8e8;
  color:#281607;
  box-shadow:10px 10px 0 rgba(0,0,0,.32);
}

.builder-upload-popup-panel strong{
  display:block;
  margin:0 36px 8px 0;
  font-size:1.05rem;
  color:#281607;
  text-transform:none;
}

.builder-upload-popup-panel p{
  margin:0 0 14px 0;
  color:#281607;
}

.builder-upload-popup-panel input[type="file"]{
  width:100%;
  max-width:100%;
}

.builder-upload-popup-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border:2px solid rgba(80,45,12,.72);
  background:#281607;
  color:#fff8e8;
  font-weight:900;
  cursor:pointer;
}

/* =========================
   ACTION BUTTONS
   ========================= */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px !important;
}

.btn{
  display:inline-block;
  padding:13px 18px;
  border:2px solid rgba(240,200,111,.28);
  background:linear-gradient(180deg, rgba(28,30,38,.96), rgba(8,10,14,.96));
  color:#f8ecd8;
  text-decoration:none;
  font-weight:bold;
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
  cursor:pointer;
  transition:.18s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn.primary{
  background:linear-gradient(180deg, #f0c86f, #9c6c24);
  color:#181008;
  border-color:#fff0c8;
}

/* =========================
   FOOTER
   ========================= */

footer{
  display:none;
}/* =========================
   REMOVE UNUSED CENTER FRAME / GHOST BORDER
   ========================= */

.module-board::before,
.builder-game-form::before,
form.module-board.builder-game-form::before{
  display:none !important;
  content:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
}
/* =========================
   ALLOW FLOATING SIDE BUTTONS TO SHOW FULLY
   ========================= */

.realm-layout,
.realm-sidebar,
.realm-genre-panel,
.genre-menu-grid,
.realm-command-board-paid,
.builder-game-form,
.builder-icon-nav{
  overflow:visible !important;
}

/* =========================
   GENRE-AWARE BUILD CONTROLS
   ========================= */

header{
  border-bottom-color:var(--genre-accent-soft);
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 22px var(--genre-glow);
}

.builder-status-card,
.builder-panel{
  border-color:var(--genre-accent);
  box-shadow:
    9px 9px 0 rgba(0,0,0,.45),
    0 0 42px var(--genre-glow);
}

.builder-status-card{
  color:var(--genre-paper);
}

.builder-panel{
  background:
    radial-gradient(circle at top left, var(--genre-accent-soft), transparent 42%),
    linear-gradient(180deg, var(--genre-panel), var(--genre-panel-deep));
}

.realm-field-group h2,
.realm-command-title h2{
  color:var(--genre-accent);
}

.genre-btn,
.builder-nav-btn,
.btn{
  background:
    radial-gradient(circle at top, var(--genre-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--genre-panel), var(--genre-panel-deep));
  border-color:var(--genre-accent-soft);
}

.genre-btn:hover,
.genre-btn.active,
.builder-nav-btn:hover,
.builder-nav-btn.active{
  border-color:var(--genre-accent);
  box-shadow:
    6px 6px 0 rgba(0,0,0,.42),
    0 0 24px var(--genre-glow);
}

.builder-nav-btn[data-panel="builderPanelGenerate"],
.builder-nav-btn[data-panel="builderPanelGenerate"]:hover,
.builder-nav-btn[data-panel="builderPanelGenerate"].active{
  border-color:var(--genre-accent);
}

.builder-panel-close,
.builder-upload-popup-close{
  border-color:var(--genre-accent-soft);
  background:var(--genre-panel-deep);
  color:var(--genre-paper);
}

.builder-panel-close:hover,
.builder-upload-popup-close:hover{
  border-color:var(--genre-accent);
  color:var(--genre-accent);
}

.realm-command-board::-webkit-scrollbar-thumb,
.builder-panel::-webkit-scrollbar-thumb{
  background:var(--genre-accent);
}

.note{
  background:linear-gradient(180deg, var(--genre-paper), var(--genre-paper-deep));
  color:var(--genre-ink);
  border-color:var(--genre-ink);
}

.note h3,
.note p{
  color:var(--genre-ink);
}

input,
select,
textarea,
.builder-markup-write{
  border-color:rgba(0,0,0,.46);
  background:#ffffff;
  color:#120b05;
}

input:focus,
select:focus,
textarea:focus,
.builder-markup-write:focus{
  border-color:var(--genre-accent);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    0 0 0 3px var(--genre-accent-soft),
    4px 4px 0 rgba(0,0,0,.18);
}

.builder-editor-label,
.builder-markup-toolbar button,
.builder-upload-button{
  border-color:rgba(0,0,0,.48);
}

.builder-editor-label,
.builder-upload-button{
  background:linear-gradient(180deg, var(--genre-panel), var(--genre-panel-deep));
  color:var(--genre-paper);
}

.builder-markup-toolbar button{
  background:var(--genre-paper);
  color:var(--genre-ink);
}

.builder-markup-toolbar button:hover,
.builder-upload-button:hover{
  background:var(--genre-accent);
  color:var(--genre-on-accent);
  box-shadow:
    3px 3px 0 rgba(0,0,0,.22),
    0 0 14px var(--genre-glow);
}

.builder-markup-preview{
  border-color:var(--genre-accent-soft);
  background:rgba(255,255,255,.58);
}

.builder-upload-popup{
  background:rgba(5,6,8,.68);
}

.builder-upload-popup-panel{
  border-color:var(--genre-accent);
  background:linear-gradient(180deg, var(--genre-paper), #fffaf0);
  color:var(--genre-ink);
  box-shadow:
    10px 10px 0 rgba(0,0,0,.32),
    0 0 28px var(--genre-glow);
}

.builder-upload-popup-panel strong,
.builder-upload-popup-panel p{
  color:var(--genre-ink);
}

.btn.primary{
  background:linear-gradient(180deg, var(--genre-accent), var(--genre-accent-strong));
  color:var(--genre-on-accent);
  border-color:var(--genre-paper);
}