/* FORGE, THE GAME MAKER (2026-10-31). The operator: "I want forge to be a full on game creator that can
   easily switch between 2D and 3D, I want it to be highly advanced allowing you to make incredible games
   but at the same time I want it to be simple and minimalistic."
   One screen: the game's world fills it, a quiet rail of tools on the left (each opens a panel only when
   pressed), the AI a bar floating over the foot, and Play one press away. The parts every tool shares -
   the home menu, the bar, the rail, the drawer, the floating AI, sheets, menus, toasts - come from
   /tool-shell.css (its class contract is at its top) so the suite reads as one; this file is Forge's own
   parts, fg-*, and a few sizes of the shared ones. The tool's colour is --tc. */

/* the bar: the shell's own parts (Play is one .st-tool toggle, pressed = .st-preview-on) */
.st-badge.d3{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 55%,transparent)}
.st-pace{padding:2px}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:10px}
.btn.xs{min-height:30px;padding:0 10px;font-size:13px;border-radius:9px;gap:5px}
.btn.wide{width:100%}
.btn.danger{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line2));background:transparent}

/* the first scene, and the empty stage's offers */
.st-cover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,18,.55);cursor:pointer;border:0;color:#fff;font:800 22px var(--display)}
.st-cover span{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;background:var(--gold);color:var(--on-gold);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.st-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;margin:0;padding:0;border:0}
.st-pick legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--muted)}
.st-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--ink);text-align:left;font:500 14px/1.4 var(--body);cursor:pointer}
.st-pick button b{display:flex;align-items:center;gap:8px;font:800 20px var(--display)}
.st-pick button span{color:var(--muted)}
.st-pick button:hover{border-color:var(--line2)}
.st-pick button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--soft));box-shadow:inset 0 0 0 1px var(--gold)}
.st-pick button[aria-pressed="true"] b{color:var(--gold)}
.st-pick .tiny{grid-column:1/-1;margin:0}
@media(max-width:560px){.st-pick{grid-template-columns:1fr}}
.st-vars{display:grid;gap:6px;margin-top:8px}
.st-var{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;font:inherit}
.st-var:hover{border-color:var(--gold)}
.st-var small{color:var(--muted)}

/* ------------------------------------------------------------------ the editor: rail, stage, drawer */
.fg-root .st-rail button{position:relative}
.fg-root .st-rail button[disabled]{opacity:.35;cursor:default}
.st-rail .fg-rail-gap{flex:1}
.st-rail button .fg-count{position:absolute;top:6px;right:8px;min-width:16px;padding:0 4px;border-radius:8px;background:var(--line2);color:var(--ink);font:800 10px/16px var(--body);text-align:center}
.fg-stage{display:block;padding:0;background:var(--soft)}
.fg-root .st-drawer{width:min(380px,calc(100% - 76px));padding-bottom:110px}
.dr-head .dr-back{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;border-radius:9px;background:var(--soft);color:var(--ink);cursor:pointer;font-size:16px}
.dr-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-note{line-height:1.4}

/* a scene's type, switched in one press */
.fg-type{display:inline-flex;flex:none;padding:2px;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.fg-type button{border:0;background:none;color:var(--faint);min-width:30px;height:24px;border-radius:6px;font:800 11px var(--body);cursor:pointer}
.fg-type button[aria-pressed="true"]{background:var(--soft);color:var(--tc);box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 55%,transparent)}
.fg-type button:not([aria-pressed="true"]):hover{color:var(--ink)}

/* rows of controls (the inspector, the editors) */
.fg-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;margin-top:8px;font:600 12.5px var(--body);color:var(--muted)}
.fg-row.stack{grid-template-columns:1fr}
.fg-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-slider{display:flex;align-items:center;gap:6px;min-width:0}
.fg-slider input[type=range]{flex:1;min-width:0;accent-color:var(--gold)}
.fg-slider input[type=number]{width:64px;flex:none;font:600 12.5px var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:6px 7px;text-align:right}
.fg-slider input[type=number]:focus,.fg-text:focus,.fg-select:focus{outline:none;border-color:var(--gold)}
.fg-text,.fg-select{width:100%;min-width:0;font:600 13.5px var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.fg-select{appearance:auto}
.fg-colour{display:flex;align-items:center;gap:8px}
.fg-colour input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--line2);border-radius:8px;background:none;cursor:pointer;flex:none}
.fg-colour input[type=text]{flex:1;min-width:0}
.fg-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;font:600 13px var(--body);color:var(--ink);cursor:pointer}
.fg-toggle input{accent-color:var(--gold);width:16px;height:16px}
.fg-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fg-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--soft);color:var(--ink);border-radius:999px;padding:6px 11px;font:600 13px var(--body);cursor:pointer;max-width:100%}
.fg-chips button i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.fg-chips button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 18%,var(--soft))}
.fg-chips button.add{border-style:dashed;color:var(--muted)}
.fg-chips button[disabled]{opacity:.4;cursor:default}
.fg-hint{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.4}
.fg-box{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.fg-box.ai{border-color:color-mix(in srgb,var(--gold) 35%,var(--line));background:color-mix(in srgb,var(--gold) 7%,var(--soft))}
.fg-box h3{margin:0 0 4px;font:800 13px var(--body);display:flex;align-items:center;gap:6px}
.fg-box .price,.price{color:var(--muted);font-weight:600}
.fg-err{margin:8px 0 0;color:var(--warn);font-size:13px}
.fg-working{display:flex;align-items:flex-start;gap:10px;margin-top:8px;padding:10px;border-radius:10px;background:rgba(0,0,0,.18);font-size:13px;line-height:1.4}
.fg-working img{width:52px;height:52px;flex:none;border-radius:8px;object-fit:contain;background:rgba(0,0,0,.25)}
.fg-working small{display:block;color:var(--muted)}

/* art cards and editors */
.fg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fg-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--soft);color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:0}
.fg-card:hover{border-color:color-mix(in srgb,var(--tc) 60%,var(--line))}
.fg-card .pic{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#232a3d,#0d0f16);overflow:hidden}
.fg-card .pic.check{background:repeating-conic-gradient(#1b1e27 0% 25%,#15171e 0% 50%);background-size:16px 16px}
.fg-card .pic img,.fg-card .pic canvas{width:100%;height:100%;object-fit:contain}
.fg-card .pic.wait{color:var(--faint)}
.fg-card b{padding:7px 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-card .tag{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;background:var(--gold);color:var(--on-gold);font:800 10px var(--body)}
.fg-card.add{border-style:dashed;background:transparent;min-height:120px;align-items:center;justify-content:center;color:var(--muted);font:600 13px var(--body);gap:4px}
.fg-card.add:hover{color:var(--ink)}
.fg-view{position:relative;height:240px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#262e45,#0b0d13);margin-top:10px}
.fg-view canvas{display:block;width:100%;height:100%;touch-action:none}
.fg-view .fg-note,.fg-view3d .fg-note{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:13px;margin:0;padding:20px;text-align:center}
.fg-board-box{display:grid;place-items:center;padding:12px;margin-top:10px;border-radius:14px;background:repeating-conic-gradient(#1b1e27 0% 25%,#15171e 0% 50%);background-size:18px 18px}
.fg-board-box canvas{touch-action:none;max-width:100%}
.fg-sound{display:flex;align-items:center;gap:8px}
.fg-sound .play{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;cursor:pointer;font-size:14px}
.fg-sound .name{flex:1;min-width:0}
.fg-sound .name b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-sound .name select{margin-top:4px}
.fg-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fg-thumbs button{width:48px;height:48px;padding:0;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--soft);cursor:pointer}
.fg-thumbs button img{width:100%;height:100%;object-fit:contain}
.fg-thumbs button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ------------------------------------------------------------------ the world on the stage */
.fg-world{position:absolute;inset:0}
.fg-view3d{position:absolute;inset:0}
.fg-view3d canvas{display:block;width:100%;height:100%;touch-action:none}
.fg-board-wrap{position:absolute;inset:0;display:grid;place-items:center;padding:56px 16px 110px}
.fg-board{touch-action:none;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px var(--line2)}
.fg-tools{position:absolute;top:12px;left:12px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px;pointer-events:none}
.fg-tools>*{pointer-events:auto}
.fg-tb{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);color:var(--ink);font:600 13px var(--body);cursor:pointer;white-space:nowrap}
.fg-tb:hover{border-color:var(--gold);color:var(--gold)}
.fg-tb[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.fg-tb[disabled]{opacity:.45;cursor:default}
.fg-tb.ghost{opacity:.85}
.fg-inspector{position:absolute;top:12px;right:12px;bottom:110px;width:300px;z-index:6;overflow-y:auto;padding:14px 14px 16px;border:1px solid var(--line2);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);box-shadow:0 24px 54px -26px rgba(0,0,0,.7)}
.fg-inspector h3{margin:0;font:800 15px var(--body);display:flex;align-items:center;gap:8px}
.fg-inspector h3 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-inspector h3 button{width:28px;height:28px;flex:none;border:0;border-radius:8px;background:var(--soft);color:var(--muted);cursor:pointer}
.fg-inspector .fg-row{grid-template-columns:84px minmax(0,1fr)}
.fg-empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px 24px 120px;text-align:center;color:var(--muted)}
.fg-empty>div{max-width:440px}
.fg-empty img{width:200px;max-width:70%;margin:0 auto 14px;display:block}
.fg-empty b{display:block;color:var(--ink);font:800 22px var(--display);margin-bottom:6px}
.fg-empty .st-first{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.fg-legend{position:absolute;left:12px;bottom:110px;z-index:4;padding:6px 10px;border-radius:9px;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--muted);font:600 12px var(--body);pointer-events:none}

/* the game itself: Play, and the AI's live build */
.fg-frame{position:absolute;inset:14px;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px var(--line2)}
.fg-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.fg-frame iframe.fg-edit{background:#fff}
.fg-frame iframe.fg-live{background:#fff;opacity:.97}
.fg-root.fg-playing .st-rail,.fg-root.fg-playing .st-drawer,.fg-root.fg-playing .fg-tools,.fg-root.fg-playing .fg-inspector{display:none!important}
.fg-root.fg-playing .st-main{grid-template-columns:minmax(0,1fr)}
.fg-root.fg-playing .fg-stage{grid-column:1}
.fg-root.fg-playing .st-float{left:50%}
.fg-root.fg-fullscreen .fg-frame{inset:0;border-radius:0}
.fg-root.fg-fullscreen .st-float,.fg-root.fg-fullscreen .st-ai-pill,.fg-root.fg-fullscreen .st-bar{display:none!important}
.fg-exit{position:absolute;top:10px;right:10px;z-index:7;width:38px;height:38px;border-radius:50%;border:0;background:rgba(5,8,18,.5);color:#fff;font-size:18px;cursor:pointer;opacity:.6}
.fg-exit:hover{opacity:1}
.fg-screen-pick{position:absolute;top:12px;left:12px;z-index:7;display:flex;gap:6px;flex-wrap:wrap}
/* the AI's progress keeps its tool colour in the shared work card */
.fg-root .st-work{border-color:color-mix(in srgb,var(--tc) 45%,var(--line))}

/* ------------------------------------------------------------------ phones and small screens (the shell folds the rail into the project menu) */
@media(max-width:1000px){
  .fg-stage{grid-column:1}
  .fg-inspector{top:auto;right:8px;left:8px;bottom:8px;width:auto;max-height:52%}
  .fg-board-wrap{padding:52px 10px 90px}
  .fg-frame{inset:8px}
  .fg-legend{display:none}
  .fg-root.fg-playing .st-float{bottom:8px}
}
@media(max-width:560px){
  #fg-theme{display:none}
  .fg-tools{top:8px;left:8px}
  .fg-tb{height:32px;padding:0 10px;font-size:12.5px}
  .st-sheet .card{padding:20px 16px}
}