/* ASOC CREATOR (Load Shell) - armory skin
   Same language as the board plates: gunmetal slabs, chamfered corners, gold
   engraving, rivets, hazard stripe. Scoped to the Forge overlay. */
html body #forge-overlay {
  --gold: #e3c16a; --gold-d: #a67f2d; --violet: #b06be0; --edge: #3a4650; --edge-hi: #66777f;
  --slab: linear-gradient(160deg, #161c23, #0b0f14 70%);
  --grain: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* shell: chamfered housing */
html body #forge-overlay .forge-shell:has(.creator-grid) {
  border: 0; border-radius: 0; --cut: 26px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #313c46;
  background: radial-gradient(900px 260px at 0% 0%, rgba(227,193,106,.07), transparent 70%), radial-gradient(800px 300px at 100% 0%, rgba(137,62,169,.09), transparent 70%), linear-gradient(160deg, #0d1117, #07090d 70%);
}
html body #forge-overlay .forge-shell:has(.creator-grid)::before,
html body #forge-overlay .forge-shell:has(.creator-grid)::after {
  content: ""; position: absolute; z-index: 20; width: 26px; height: 26px; pointer-events: none;
}
html body #forge-overlay .forge-shell:has(.creator-grid)::before { top: 0; left: 0; background: linear-gradient(135deg, transparent 17.4px, var(--gold) 0 19px, transparent 0); }
html body #forge-overlay .forge-shell:has(.creator-grid)::after { right: 0; bottom: 0; background: linear-gradient(315deg, transparent 17.4px, var(--gold) 0 19px, transparent 0); }
html body #forge-overlay .forge-shell:has(.creator-grid) .forge-header { padding: 12px 22px 12px 34px; background: linear-gradient(90deg, #121821, #0b0e14 60%, #15101c); }
html body #forge-overlay .forge-shell:has(.creator-grid) .forge-title {
  display: flex; align-items: center; gap: 12px; font: 900 .84rem var(--font-machine, monospace); letter-spacing: .26em; color: #dfe5e8; text-shadow: 0 1px 0 #000;
}
html body #forge-overlay .forge-shell:has(.creator-grid) .forge-title::before {
  content: ""; width: 12px; height: 12px; transform: rotate(45deg); background: linear-gradient(135deg, #f0d587, #a96fd0); box-shadow: 0 0 12px rgba(227,193,106,.6);
}

/* generic bevel for buttons, chips, fields */
html body #forge-overlay :is(.forge-close, .creator-progress, .creator-template-tools .forge-btn, .creator-tool-btn, .creator-test-btn, .creator-maker-toolbar button, .creator-maker-generate, .upload-zone .upload-label, .creator-form > .forge-actions .forge-btn, .creator-hint-suggest, .maker-clue-column header button, .creator-palette-card > button, .creator-paste-card .forge-btn) {
  --cut: 8px; --edge: #404c56; --fill: linear-gradient(180deg, #29313a, #151a20);
  border: 0 !important; border-radius: 0 !important; color: #c3ccd1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 1px rgba(255,255,255,.07);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  transition: color .14s, box-shadow .14s, filter .14s;
}
html body #forge-overlay :is(.creator-template-tools .forge-btn, .creator-tool-btn, .creator-test-btn, .creator-maker-toolbar button, .upload-zone .upload-label, .creator-hint-suggest, .creator-form > .forge-actions .forge-btn.ghost, .creator-palette-card > button):hover:not(:disabled) {
  --edge: var(--gold); --fill: linear-gradient(180deg, #3a3321, #1c1a12); color: #fbe9b0; filter: drop-shadow(0 0 6px rgba(227,193,106,.25));
}
html body #forge-overlay :is(.creator-maker-generate, .creator-form > .forge-actions .forge-btn.primary, .creator-paste-card .forge-btn.primary) {
  --edge: #d7b155; --fill: linear-gradient(180deg, #f1d684, #c39a3e 55%, #8f6b22); color: #1c1405; text-shadow: 0 1px 0 rgba(255,255,255,.4); font-weight: 900;
}
html body #forge-overlay :is(.creator-maker-generate, .creator-form > .forge-actions .forge-btn.primary, .creator-paste-card .forge-btn.primary):hover:not(:disabled) { filter: brightness(1.12) drop-shadow(0 0 8px rgba(227,193,106,.4)); color: #1c1405; }
html body #forge-overlay .creator-clear-board { --edge: #8c3441; --fill: linear-gradient(180deg, #3a171d, #1d0b0f); color: #ff9aa6 !important; }
html body #forge-overlay .creator-clear-board:hover:not(:disabled) { --edge: #ef5a6b; --fill: linear-gradient(180deg, #55202a, #2a1015); color: #ffd1d7 !important; filter: drop-shadow(0 0 6px rgba(239,90,107,.3)); }
html body #forge-overlay :is(button, .forge-btn):disabled { filter: saturate(.5); opacity: .55; cursor: not-allowed; }
html body #forge-overlay .creator-test-btn.active { --edge: #ef5a6b; --fill: linear-gradient(180deg, #3a171d, #1d0b0f); color: #ffb1ba; }
html body #forge-overlay .forge-header .creator-progress { --cut: 7px; --edge: #6f5a24; --fill: linear-gradient(180deg, #2b2410, #17120a); color: var(--gold); padding: 7px 14px; font-size: .66rem; letter-spacing: .14em; }
html body #forge-overlay .forge-header .creator-progress.is-ready { --edge: #3f8a52; --fill: linear-gradient(180deg, #102a18, #0a170e); color: #8fe0a0; }
html body #forge-overlay .forge-close { --cut: 9px; width: 36px; height: 36px; }

/* template strip */
html body #forge-overlay .creator-command-strip {
  --cut: 12px; margin: 10px 18px 0; padding: 7px 12px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #28333c; background: var(--grain), linear-gradient(90deg, #10161d, #0a0d12);
}
html body #forge-overlay .creator-template-tools .forge-btn { min-height: 32px; padding: 6px 14px; font: 800 .62rem var(--font-machine, monospace); letter-spacing: .12em; }
html body #forge-overlay .creator-shortcuts { font: 700 .6rem var(--font-machine, monospace); letter-spacing: .12em; color: #6e7d85; }

/* form: two columns, slab panels */
html body #forge-overlay .creator-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-content: start; padding: 16px 18px 0; counter-reset: csec;
}
html body #forge-overlay .creator-form > * { grid-column: 1 / -1; min-width: 0; }
html body #forge-overlay .creator-form > .creator-section:nth-of-type(1),
html body #forge-overlay .creator-form > .creator-section:nth-of-type(2) { grid-column: auto; }
html body #forge-overlay .creator-form > .creator-section:nth-of-type(4) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
html body #forge-overlay .creator-form > .creator-section:nth-of-type(4) > .creator-label,
html body #forge-overlay .creator-form > .creator-section:nth-of-type(4) > .cell-field:nth-of-type(3) { grid-column: 1 / -1; }
html body #forge-overlay .creator-form > .creator-section:nth-of-type(4) textarea { min-height: 56px; resize: vertical; }
html body #forge-overlay .creator-form > .creator-section {
  --cut: 16px; position: relative; margin: 0; padding: 14px 16px 12px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #27313a, inset 0 1px 0 1px rgba(255,255,255,.05), inset 0 -22px 30px -24px rgba(0,0,0,.7);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--gold) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), #6a5a8a 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    radial-gradient(circle, #aeb8bf 0 1.2px, #2a3138 1.8px 2.8px, transparent 3.4px) right 8px top 8px / 8px 8px no-repeat,
    radial-gradient(circle, #aeb8bf 0 1.2px, #2a3138 1.8px 2.8px, transparent 3.4px) left 8px bottom 8px / 8px 8px no-repeat,
    linear-gradient(90deg, rgba(227,193,106,.5), rgba(176,107,224,.25) 55%, transparent) 0 26px / 100% 1px no-repeat,
    var(--grain), var(--slab);
}
html body #forge-overlay .creator-form > .creator-section::before { content: none; }

/* engraved gold section plates */
html body #forge-overlay .creator-form .creator-label {
  display: flex; align-items: center; gap: 9px; width: fit-content; max-width: calc(100% - 20px); height: 26px; margin: -2px 0 16px; padding: 0 24px 0 5px; border: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(180deg, #f2d98c, #cba447 55%, #a27a28);
  color: #1c1405; font: 900 .66rem var(--font-machine, monospace); letter-spacing: .22em; text-shadow: 0 1px 0 rgba(255,255,255,.38);
}
html body #forge-overlay .creator-form .creator-label::after { content: none; }
html body #forge-overlay .creator-form .creator-label::before {
  counter-increment: csec; content: counter(csec, decimal-leading-zero);
  display: inline-grid; place-items: center; min-width: 26px; height: 18px; margin-left: 8px; padding: 0 4px;
  background: #1c1405; color: var(--gold); font: 800 .58rem var(--font-mono, monospace); letter-spacing: .06em; text-shadow: none;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* fields: recessed, chamfered */
html body #forge-overlay .creator-form .cell-field { margin-bottom: 9px; gap: 4px; }
html body #forge-overlay .creator-form .cell-field-label { color: #8795a0; font: 800 .62rem var(--font-machine, monospace); letter-spacing: .14em; }
html body #forge-overlay .creator-form :is(.forge-input, .forge-select, .forge-textarea) {
  --cut: 7px; --edge: #34414b; min-height: 37px; padding: 7px 12px; border: 0 !important; border-radius: 0 !important;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(180deg, #080b0f, #0f141a);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 8px rgba(0,0,0,.65);
  font-size: .8rem; transition: box-shadow .14s;
}
html body #forge-overlay .creator-form :is(.forge-input, .forge-select, .forge-textarea):hover { --edge: #51626e; }
html body #forge-overlay .creator-form :is(.forge-input, .forge-select, .forge-textarea):focus {
  --edge: var(--gold); outline: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 16px rgba(227,193,106,.2), inset 0 3px 8px rgba(0,0,0,.5);
}
html body #forge-overlay .creator-form .forge-input.is-missing { --edge: #c0414c; }
html body #forge-overlay .creator-form .forge-input.is-duplicate { --edge: #d49a2a; }
html body #forge-overlay .creator-form .cell-field.final .forge-input {
  --edge: #8c6b2f; min-height: 46px; font-size: .95rem; letter-spacing: .16em; color: #f4d77f;
  box-shadow: inset 4px 0 #d1a33c, inset -4px 0 #9e59bd, inset 0 0 0 1px var(--edge), inset 0 3px 8px rgba(0,0,0,.6);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(90deg, rgba(86,62,14,.35), #0c1015 30% 70%, rgba(86,40,110,.3));
}
html body #forge-overlay .creator-form .cell-field.final .cell-field-label { color: #e3b84f; }

/* background upload */
html body #forge-overlay .upload-zone { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 0; padding: 10px 0 0; border: 0; background: linear-gradient(90deg, rgba(60,75,86,.7) 50%, transparent 0) 0 0 / 8px 1px repeat-x; }
html body #forge-overlay .upload-zone .upload-label { padding: 7px 14px; font: 800 .62rem var(--font-machine, monospace); letter-spacing: .14em; color: var(--gold); cursor: pointer; --edge: #6f5a24; }
html body #forge-overlay .upload-note { font: 700 .58rem var(--font-machine, monospace); letter-spacing: .06em; color: #667780; }

/* board command deck */
html body #forge-overlay .creator-board-tools {
  --cut: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #2a353e; background: var(--grain), linear-gradient(180deg, #0a0e13, #080b0f);
}
html body #forge-overlay .creator-tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 14px; font: 800 .62rem var(--font-machine, monospace); letter-spacing: .13em; }
html body #forge-overlay .creator-tool-btn .creator-ico { width: 14px; height: 14px; flex: 0 0 auto; opacity: .9; color: var(--gold); }
html body #forge-overlay .creator-clear-board .creator-ico { color: #ff7e8d; }
html body #forge-overlay .creator-tip { margin-left: auto; font: 700 .58rem var(--font-machine, monospace); letter-spacing: .08em; color: #66757d; text-align: right; }

/* column focus: plated selector */
html body #forge-overlay .creator-column-focus {
  --cut: 10px; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2px; margin: 0 0 14px; padding: 3px; border: 0; border-radius: 0; overflow: visible;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #2a353e; background: #070a0d;
}
html body #forge-overlay .creator-column-tab {
  min-height: 32px; margin: 0; padding: 6px 8px; border: 0 !important; border-radius: 0; background: linear-gradient(180deg, #151b21, #0d1217); color: #75848d;
  font: 800 .6rem var(--font-machine, monospace); letter-spacing: .14em; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
html body #forge-overlay .creator-column-tab:hover { color: #e6d3f2; background: linear-gradient(180deg, #25192f, #150f1c); }
html body #forge-overlay .creator-column-tab.active { color: #fff; background: linear-gradient(180deg, #a56ad0, #6f3d96 60%, #55307a); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px rgba(176,107,224,.4); text-shadow: 0 1px 0 rgba(0,0,0,.6); }

/* automatic game maker */
html body #forge-overlay .creator-maker {
  --cut: 14px; margin: 0 0 14px; border: 0; border-radius: 0; overflow: visible;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #5b3e6e, inset 4px 0 #b553dd, 0 0 0 transparent;
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), #b06be0 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), #b06be0 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    radial-gradient(circle at 8% 0, rgba(137,62,169,.26), transparent 38%), var(--grain), linear-gradient(145deg, #130d19, #090d11 62%);
}
html body #forge-overlay .creator-maker-head { padding: 12px 16px 12px 18px; gap: 16px; border-bottom: 1px solid #3a2a46; }
html body #forge-overlay .creator-maker-kicker { font: 800 .6rem var(--font-machine, monospace); letter-spacing: .24em; color: #62dcff; }
html body #forge-overlay .creator-maker h5 { margin: 3px 0; font: 900 .86rem var(--font-machine, monospace); letter-spacing: .18em; color: #f0d4fb; }
html body #forge-overlay .creator-maker p { font-size: .68rem; line-height: 1.4; max-width: 46ch; color: #8d97a0; }
html body #forge-overlay .creator-maker-generate { min-height: 36px; padding: 7px 16px; font: 900 .62rem var(--font-machine, monospace); letter-spacing: .12em; }
html body #forge-overlay .creator-maker-toolbar { gap: 6px; padding: 9px 14px 10px 18px; border-bottom: 1px solid rgba(91,65,102,.35); }
html body #forge-overlay .creator-maker-toolbar button { min-height: 28px; padding: 4px 10px; font: 800 .58rem var(--font-machine, monospace); letter-spacing: .08em; --edge: #4b3a58; color: #b69cc4; }
html body #forge-overlay .creator-maker-toolbar .maker-source { margin-left: auto; align-self: center; font: 800 .56rem var(--font-machine, monospace); letter-spacing: .14em; color: #5fd0a0; }
html body #forge-overlay .creator-maker-columns { padding: 10px 14px 10px 18px; }
html body #forge-overlay .creator-maker-clues { padding: 0 14px 14px 18px; gap: 8px; }
html body #forge-overlay .maker-clue-column { border: 0; box-shadow: inset 0 0 0 1px #343c46; background: linear-gradient(180deg, #0b1015, #080b0f); }
html body #forge-overlay .maker-clue-column header small { font-size: .62rem; }

/* clue columns: slabs with a colour cap */
html body #forge-overlay .creator-cols { margin: 0 0 14px; padding: 0; border: 0; background: none; gap: 12px; }
html body #forge-overlay .creator-col {
  --cut: 10px; --acc: #b8c3ca; padding: 10px 10px 4px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #28323b;
  background: linear-gradient(var(--acc), var(--acc)) 0 0 / 100% 3px no-repeat, var(--grain), linear-gradient(180deg, #121920, #0a0e12);
}
html body #forge-overlay .creator-col:nth-child(2) { --acc: #c79be0; }
html body #forge-overlay .creator-col:nth-child(3) { --acc: #72c4a8; }
html body #forge-overlay .creator-col:nth-child(4) { --acc: #e0a85e; }
html body #forge-overlay .creator-col-header { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 0 0 7px; border: 0; border-bottom: 1px solid #28323b; font: 900 .66rem var(--font-machine, monospace); letter-spacing: .22em; color: var(--acc); }
html body #forge-overlay .creator-col-header::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; }
html body #forge-overlay .creator-col .cell-field { margin-bottom: 6px; gap: 2px; }
html body #forge-overlay .creator-col .forge-input { min-height: 33px; padding: 5px 10px; }
html body #forge-overlay .creator-col .cell-field.solution .cell-field-label { color: #e3b84f; }
html body #forge-overlay .creator-col .cell-field.solution .forge-input { --edge: #7a5f25; background-color: transparent; }

/* hint / report */
html body #forge-overlay .creator-hint-bar,
html body #forge-overlay .creator-quality-report { border-radius: 0; box-shadow: inset 0 0 0 1px #2b4a5e; }
html body #forge-overlay .creator-quality-report { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 8px; max-height: 280px; overflow-y: auto; box-shadow: inset 0 0 0 1px #40505a; }
html body #forge-overlay .creator-quality-report > b { grid-column: 1 / -1; }
html body #forge-overlay .creator-quality-report span { padding: 4px 7px; }

/* save bar with hazard edge */
html body #forge-overlay .creator-form > .forge-errors:empty { display: none; }
html body #forge-overlay .creator-form > .forge-actions {
  position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; margin: 0 -18px; padding: 15px 18px 11px; border: 0;
  background: linear-gradient(180deg, rgba(10,13,18,.94), #080b0f); backdrop-filter: blur(4px);
}
html body #forge-overlay .creator-form > .forge-actions::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(-45deg, #e3c16a 0 9px, #15120a 9px 18px); opacity: .8;
}
html body #forge-overlay .creator-form > .forge-actions .forge-btn { min-height: 36px; padding: 7px 20px; font: 900 .64rem var(--font-machine, monospace); letter-spacing: .15em; }

/* preview: bezelled monitor */
html body #forge-overlay .creator-preview { background: radial-gradient(circle at 50% 45%, rgba(76,42,88,.18), transparent 50%), #04070a; border-left: 1px solid #2b353e; }
html body #forge-overlay .creator-preview-header { min-height: 42px; padding: 6px 16px; border-bottom: 0; background: linear-gradient(90deg, #0d131a, #14101c); box-shadow: inset 0 -1px 0 #2e3944; }
html body #forge-overlay .creator-preview-header > span:first-child { display: inline-flex; align-items: center; gap: 9px; color: #8fd0ff; font: 800 .62rem var(--font-machine, monospace); letter-spacing: .24em; }
html body #forge-overlay .creator-preview-header > span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0485a; box-shadow: 0 0 10px #e0485a; animation: cp-live 1.8s ease-in-out infinite; }
@keyframes cp-live { 50% { opacity: .3; } }
html body #forge-overlay .creator-test-btn { min-height: 28px; padding: 5px 12px; font: 800 .6rem var(--font-machine, monospace); letter-spacing: .12em; }
html body #forge-overlay .creator-preview-stage { padding: 20px 22px; align-items: center; justify-content: center; }
html body #forge-overlay .creator-preview-frame {
  border: 7px solid transparent; border-radius: 0;
  border-image: linear-gradient(135deg, #b4bec6, #3a434b 22%, #8f9aa3 48%, #2a3036 74%, #aab4bc) 1;
  box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 40px rgba(145,75,173,.14), inset 0 0 0 2px #000;
}
html body #forge-overlay .creator-preview-frame::before,
html body #forge-overlay .creator-preview-frame::after { content: ""; position: absolute; z-index: 5; width: 16px; height: 16px; pointer-events: none; border: 0 solid rgba(227,193,106,.85); }
html body #forge-overlay .creator-preview-frame::before { top: 5px; left: 5px; border-top-width: 2px; border-left-width: 2px; }
html body #forge-overlay .creator-preview-frame::after { right: 5px; bottom: 5px; border-bottom-width: 2px; border-right-width: 2px; }

@media (max-width: 1180px) {
  html body #forge-overlay .creator-form > .creator-section:nth-of-type(1),
  html body #forge-overlay .creator-form > .creator-section:nth-of-type(2) { grid-column: 1 / -1; }
  html body #forge-overlay .creator-tip { display: none; }
}
@media (max-width: 760px) {
  html body #forge-overlay .creator-column-focus { grid-template-columns: repeat(3, 1fr); }
  html body #forge-overlay .creator-form > .creator-section:nth-of-type(4) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html body #forge-overlay .creator-preview-header > span:first-child::before { animation: none; } }

/* ===== LIBRARY, row menu, paste dialog, commands palette ===== */
html body #forge-overlay.active .forge-shell:has(.forge-library) {
  --cut: 26px; display: flex; flex-direction: column; height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none;
  border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #313c46;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: radial-gradient(900px 260px at 0% 0%, rgba(227,193,106,.07), transparent 70%), radial-gradient(800px 300px at 100% 0%, rgba(137,62,169,.09), transparent 70%), linear-gradient(160deg, #0d1117, #07090d 70%);
}
html body #forge-overlay .forge-shell:has(.forge-library) > * { flex: 0 0 auto; }
html body #forge-overlay .forge-shell:has(.forge-library) > .forge-library { flex: 1 1 auto; min-height: 0; max-height: none; }
html body #forge-overlay .forge-shell:has(.forge-library)::before,
html body #forge-overlay .forge-shell:has(.forge-library)::after { content: ""; position: absolute; z-index: 20; width: 26px; height: 26px; pointer-events: none; }
html body #forge-overlay .forge-shell:has(.forge-library)::before { top: 0; left: 0; background: linear-gradient(135deg, transparent 17.4px, var(--gold) 0 19px, transparent 0); }
html body #forge-overlay .forge-shell:has(.forge-library)::after { right: 0; bottom: 0; background: linear-gradient(315deg, transparent 17.4px, var(--gold) 0 19px, transparent 0); }
html body #forge-overlay .forge-shell:has(.forge-library) .forge-header { position: relative; padding: 12px 22px 12px 34px; background: linear-gradient(90deg, #121821, #0b0e14 60%, #15101c); }
html body #forge-overlay .forge-shell:has(.forge-library) .forge-header::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, #d4a843, rgba(168,87,200,.8), transparent 72%); }
html body #forge-overlay .forge-shell:has(.forge-library) .forge-title { display: flex; align-items: center; gap: 12px; font: 900 .84rem var(--font-machine, monospace); letter-spacing: .26em; color: #dfe5e8; text-shadow: 0 1px 0 #000; }
html body #forge-overlay .forge-shell:has(.forge-library) .forge-title::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); background: linear-gradient(135deg, #f0d587, #a96fd0); box-shadow: 0 0 12px rgba(227,193,106,.6); }

/* toolbars as command strips */
html body #forge-overlay .forge-toolbar,
html body #forge-overlay .forge-toolbar-row {
  --cut: 12px; margin: 10px 18px 0; padding: 8px 12px; border: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #28333c; background: var(--grain), linear-gradient(90deg, #10161d, #0a0d12);
}
html body #forge-overlay .forge-toolbar-row .forge-input { min-width: 220px; }
html body #forge-overlay :is(.forge-toolbar, .forge-toolbar-row) :is(.forge-input, .forge-select) {
  --cut: 7px; --edge: #34414b; min-height: 36px; padding: 7px 12px; border: 0 !important; border-radius: 0 !important; font-size: .8rem;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(180deg, #080b0f, #0f141a);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 8px rgba(0,0,0,.65);
}
html body #forge-overlay :is(.forge-toolbar, .forge-toolbar-row) :is(.forge-input, .forge-select):hover { --edge: #51626e; }
html body #forge-overlay :is(.forge-toolbar, .forge-toolbar-row) :is(.forge-input, .forge-select):focus { --edge: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 16px rgba(227,193,106,.2), inset 0 3px 8px rgba(0,0,0,.5); }

/* shared button plate for the library, menus and dialogs */
html body #forge-overlay :is(.forge-toolbar .forge-btn, .game-list-actions .forge-btn, .game-list-more > summary, .game-list-more-menu .forge-btn, .forge-empty .forge-btn, .creator-paste-card .forge-btn, .creator-palette-card > button) {
  --cut: 8px; --edge: #404c56; --fill: linear-gradient(180deg, #29313a, #151a20);
  border: 0 !important; border-radius: 0 !important; color: #c3ccd1; min-height: 36px; padding: 7px 16px; font: 800 .64rem var(--font-machine, monospace); letter-spacing: .14em;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 1px rgba(255,255,255,.07);
  text-shadow: 0 1px 0 rgba(0,0,0,.7); transition: color .14s, filter .14s;
}
html body #forge-overlay :is(.forge-toolbar .forge-btn, .game-list-actions .forge-btn, .game-list-more > summary, .game-list-more-menu .forge-btn, .forge-empty .forge-btn, .creator-paste-card .forge-btn, .creator-palette-card > button):hover:not(:disabled) {
  --edge: var(--gold); --fill: linear-gradient(180deg, #3a3321, #1c1a12); color: #fbe9b0; filter: drop-shadow(0 0 6px rgba(227,193,106,.25));
}
html body #forge-overlay :is(.forge-toolbar .forge-btn.primary, .game-list-actions .forge-btn.primary, .forge-empty .forge-btn.primary, .creator-paste-card .forge-btn.primary) {
  --edge: #d7b155; --fill: linear-gradient(180deg, #f1d684, #c39a3e 55%, #8f6b22); color: #1c1405; text-shadow: 0 1px 0 rgba(255,255,255,.4); font-weight: 900;
}
html body #forge-overlay :is(.forge-toolbar .forge-btn.primary, .game-list-actions .forge-btn.primary, .forge-empty .forge-btn.primary, .creator-paste-card .forge-btn.primary):hover:not(:disabled) { filter: brightness(1.12) drop-shadow(0 0 8px rgba(227,193,106,.4)); color: #1c1405; }
html body #forge-overlay .forge-btn.danger { --edge: #8c3441; --fill: linear-gradient(180deg, #3a171d, #1d0b0f); color: #ff9aa6; }
html body #forge-overlay .forge-btn.danger:hover:not(:disabled) { --edge: #ef5a6b; --fill: linear-gradient(180deg, #55202a, #2a1015); color: #ffd1d7; filter: drop-shadow(0 0 6px rgba(239,90,107,.3)); }
html body #forge-overlay .forge-btn.ghost { color: #8d9aa3; }
html body #forge-overlay .game-list-actions .forge-btn, html body #forge-overlay .game-list-more > summary { min-height: 38px; padding: 7px 16px; font-size: .66rem; }

/* list */
html body #forge-overlay .forge-library { padding: 14px 18px 18px; scrollbar-color: #745083 #0a0e13; scrollbar-width: thin; gap: 8px; }
html body #forge-overlay .game-list-head {
  top: -14px; margin: 0 0 2px; padding: 9px 16px; background: #0a0e13; border: 0; box-shadow: inset 0 -1px 0 #2e3944;
  font: 800 .58rem var(--font-machine, monospace); letter-spacing: .24em; color: var(--gold);
}
html body #forge-overlay .forge-library > .game-list-row {
  --cut: 14px; --acc: #7e8b94; position: relative; min-height: 78px; padding: 12px 16px 12px 20px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #27313a, inset 0 1px 0 1px rgba(255,255,255,.04);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--acc) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0 0 / 3px 100% no-repeat,
    radial-gradient(circle, #aeb8bf 0 1.2px, #2a3138 1.8px 2.8px, transparent 3.4px) right 8px top 8px / 8px 8px no-repeat,
    var(--grain), linear-gradient(160deg, #141a21, #0b0f14 75%);
  transition: filter .15s, box-shadow .15s;
}
html body #forge-overlay .forge-library > .game-list-row:nth-child(odd) { background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--acc) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0 0 / 3px 100% no-repeat,
    radial-gradient(circle, #aeb8bf 0 1.2px, #2a3138 1.8px 2.8px, transparent 3.4px) right 8px top 8px / 8px 8px no-repeat,
    var(--grain), linear-gradient(160deg, #141a21, #0b0f14 75%); }
html body #forge-overlay .forge-library > .game-list-row:hover { z-index: 2; border-color: transparent; box-shadow: inset 0 0 0 1px var(--acc), inset 0 0 40px rgba(227,193,106,.05); filter: brightness(1.1); }
html body #forge-overlay .game-list-row:has(.diff-green) { --acc: #3fbf6a; }
html body #forge-overlay .game-list-row:has(.diff-yellow) { --acc: #e0c030; }
html body #forge-overlay .game-list-row:has(.diff-amber) { --acc: #e48a30; }
html body #forge-overlay .game-list-row:has(.diff-red) { --acc: #e3504a; }
html body #forge-overlay .game-list-row:has(.diff-purple) { --acc: #a86bd2; }
html body #forge-overlay .game-list-row:has(.diff-black) { --acc: #8a8fb0; }
html body #forge-overlay .game-card-title { font: 900 1.05rem var(--font-display, var(--font-machine, sans-serif)); letter-spacing: .08em; color: #eef1f3; text-shadow: 0 1px 0 #000; }
html body #forge-overlay .game-card-theme { font: 800 .64rem var(--font-machine, monospace); letter-spacing: .16em; color: #8795a0; }
html body #forge-overlay .game-card-sample { border-radius: 0; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); padding: 2px 8px; background: #2a3138; color: #aab5bc; }
html body #forge-overlay .game-list-solutions span {
  border: 0; border-radius: 0; padding: 3px 9px; background: #0a0e13; box-shadow: inset 0 0 0 1px #2c3640;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); font: 700 .62rem var(--font-machine, monospace); letter-spacing: .08em;
}
html body #forge-overlay .game-list-solutions .game-list-final { background: linear-gradient(180deg, rgba(120,90,25,.35), rgba(60,44,10,.3)); box-shadow: inset 0 0 0 1px #8c6b2f; color: #f1d98c; }
html body #forge-overlay .difficulty-badge { border: 0; border-radius: 0; padding: 4px 12px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); font: 900 .62rem var(--font-machine, monospace); letter-spacing: .16em; }
html body #forge-overlay .game-list-date { font: 800 .66rem var(--font-machine, monospace); letter-spacing: .14em; color: #7e8c95; }

/* row menu */
html body #forge-overlay .game-list-more-menu {
  --cut: 12px; padding: 10px; border: 0; border-radius: 0; gap: 7px; min-width: 184px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #5a4a2a; background: var(--grain), linear-gradient(160deg, #181e26, #0a0d12);
}
html body #forge-overlay .game-list-more[open] > summary { --edge: var(--gold); color: #fbe9b0; }
html body #forge-overlay .game-list-more-menu .forge-btn { justify-content: flex-start; }

/* empty state */
html body #forge-overlay .forge-empty-title { font: 900 .9rem var(--font-machine, monospace); letter-spacing: .3em; color: var(--gold); }
html body #forge-overlay .forge-empty-sub { font: 700 .66rem var(--font-machine, monospace); letter-spacing: .1em; }

/* paste dialog + commands palette */
html body #forge-overlay .creator-paste,
html body #forge-overlay .creator-palette { background: radial-gradient(circle at 50% 40%, rgba(40,24,50,.82), rgba(3,5,8,.9)); backdrop-filter: blur(3px); }
html body #forge-overlay :is(.creator-paste-card, .creator-palette-card) {
  --cut: 18px; position: relative; padding: 22px 22px 18px; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px #5a4a2a, inset 0 1px 0 1px rgba(255,255,255,.05);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--gold) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), #6a5a8a 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    radial-gradient(circle, #aeb8bf 0 1.2px, #2a3138 1.8px 2.8px, transparent 3.4px) right 8px top 8px / 8px 8px no-repeat,
    var(--grain), linear-gradient(160deg, #181e26, #0a0d12);
}
html body #forge-overlay :is(.creator-paste-card, .creator-palette-card)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; opacity: .8;
  background: repeating-linear-gradient(-45deg, #e3c16a 0 9px, #15120a 9px 18px);
}
html body #forge-overlay :is(.creator-paste-card, .creator-palette-card) h4 {
  display: flex; align-items: center; width: fit-content; height: 26px; margin: 4px 0 14px; padding: 0 26px 0 14px; border: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); background: linear-gradient(180deg, #f2d98c, #cba447 55%, #a27a28);
  color: #1c1405; font: 900 .68rem var(--font-machine, monospace); letter-spacing: .22em; text-shadow: 0 1px 0 rgba(255,255,255,.38);
}
html body #forge-overlay .creator-paste-card p { font-size: .8rem; color: #9aa6ae; }
html body #forge-overlay .creator-paste-card p b { color: var(--gold); }
html body #forge-overlay .creator-paste-card textarea {
  --cut: 8px; --edge: #34414b; padding: 10px 12px; border: 0 !important; border-radius: 0 !important; min-height: 200px; font-size: .78rem; color: #dfe5e8;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(180deg, #080b0f, #0f141a);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 8px rgba(0,0,0,.65);
}
html body #forge-overlay .creator-paste-card textarea:focus { --edge: var(--gold); outline: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 16px rgba(227,193,106,.2); }
html body #forge-overlay .creator-paste-card .forge-actions { display: flex; gap: 10px; margin-top: 14px; }
html body #forge-overlay .creator-palette-card { gap: 6px; }
html body #forge-overlay .creator-palette-card > button { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 40px; text-align: left; }
html body #forge-overlay .creator-palette-card kbd { padding: 2px 8px; background: #0a0e13; box-shadow: inset 0 0 0 1px #3a4650; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); color: var(--gold); font: 800 .6rem var(--font-mono, monospace); }
html body #forge-overlay .forge-library > .game-list-row:has(.game-list-more[open]) { clip-path: none; z-index: 6; }