/* The Live Studio: code on one side, the game running on the other. Uses the shared brand tokens
   in brand.css. Nothing here styles the game itself, which runs in its own frame on its own origin. */
body[data-brand-page="studio"].live-on main{max-width:none;padding:0}
body[data-brand-page="studio"].live-on .topbar{padding:10px 16px;position:relative;z-index:6}
body[data-brand-page="studio"].live-on footer{padding:18px 16px 26px}
.ls{--ls-bar:54px;display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - var(--ls-top,64px));min-height:520px;outline:none;position:relative}
.ls *{min-width:0}
.ls-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--af-edge);background:var(--af-glass-deep)}
.ls-grow{flex:1 1 0}
.ls input.ls-title{flex:0 1 300px;width:auto;border:1px solid transparent;background:transparent;color:var(--af-cream);font:800 17px/1.2 var(--af-font-body);padding:8px 10px;border-radius:var(--af-control-radius);text-overflow:ellipsis}
.ls input.ls-title:hover{border-color:var(--af-edge)}
.ls input.ls-title:focus{border-color:var(--af-gold);background:var(--af-ink)}
.ls-state{font:600 12px/1.3 var(--af-font-mono);color:var(--af-mint);overflow-wrap:anywhere}
.ls-state.error{color:var(--af-coral)}
.ls-state.wait{color:var(--af-muted)}
.ls-body{display:grid;grid-template-columns:64px minmax(230px,300px) minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
.ls-rail{display:flex;flex-direction:column;gap:6px;padding:10px 7px;border-right:1px solid var(--af-edge);background:#100c2988}
.ls-rail button{display:grid;justify-items:center;gap:3px;padding:9px 2px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--af-muted);font:700 10.5px/1.2 var(--af-font-body)}
.ls-rail button span{font-size:19px;line-height:1}
.ls-rail button[aria-pressed="true"]{background:#7cf8d214;border-color:var(--af-mint);color:var(--af-cream)}
.ls-side{border-right:1px solid var(--af-edge);background:#150f3399;overflow:auto;overscroll-behavior:contain}
.ls-panel{padding:14px;display:grid;gap:11px;align-content:start}
.ls-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ls-panel header>div{display:flex;gap:6px}
.ls-panel h2{font:800 16px/1.2 var(--af-font-body);margin:0;letter-spacing:0}
.ls-panel h3{font:700 11px/1.3 var(--af-font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--af-muted);margin:10px 0 0}
.ls-panel .fine{margin:0}
.ls-file{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12px;font-weight:750;color:var(--af-cream);cursor:pointer}
.ls-file input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.ls-file:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.ls-tree,.ls-owned,.ls-log{list-style:none;margin:0;padding:0}
.ls-tree li{display:flex;align-items:center}
.ls-tree button.ls-name{flex:1;text-align:left;background:transparent;color:var(--af-cream);border:1px solid transparent;border-radius:9px;padding:7px 9px;font:500 13px/1.3 var(--af-font-mono);overflow-wrap:anywhere}
.ls-tree button.ls-name:hover{background:#ffffff0d}
.ls-tree li[aria-current="true"] button.ls-name{background:#b59aff26;border-color:var(--af-violet)}
.ls-tree .ls-dir{font:700 10.5px/1.3 var(--af-font-mono);color:var(--af-muted);padding:9px 9px 3px;letter-spacing:.6px}
.ls-mini{background:transparent;border:0;color:var(--af-muted);padding:6px 8px;border-radius:8px;font-size:13px}
.ls-mini:hover{color:var(--af-cream);background:#ffffff12}
.ls-owned li.fine{display:block}
.ls-owned li:not(.fine){display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0}
.ls-owned img,.ls-owned .ls-glyph{inline-size:38px;block-size:38px;border-radius:8px;background:#0b0820;object-fit:contain;display:grid;place-items:center;color:var(--af-muted);font-size:17px}
.ls-owned code{font:500 11.5px/1.35 var(--af-font-mono);overflow-wrap:anywhere;color:var(--af-cream)}
.ls-owned small{display:block;color:var(--af-muted);font-size:10.5px}
.ls-chips{display:flex;gap:6px;flex-wrap:wrap}
.ls-chips button{padding:6px 10px;border-radius:999px;border:1px solid var(--af-edge);background:transparent;color:var(--af-muted);font:650 11.5px/1.2 var(--af-font-body)}
.ls-chips button[aria-pressed="true"]{background:var(--af-gold);border-color:var(--af-gold);color:#2d1b0a}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.ls-asset{display:grid;gap:5px;padding:6px;border:1px solid var(--af-edge);border-radius:12px;background:#100c2970;color:var(--af-cream);text-align:center;font:600 10.5px/1.25 var(--af-font-body)}
.ls-asset:hover,.ls-asset[aria-pressed="true"]{border-color:var(--af-gold);background:#ffbf5314}
.ls-asset .ls-thumb{aspect-ratio:1;border-radius:8px;background:#0b0820 center/contain no-repeat;display:grid;place-items:center;font-size:24px;color:var(--af-muted);overflow:hidden}
.ls-asset .ls-thumb img{inline-size:100%;block-size:100%;object-fit:contain;image-rendering:auto}
.ls-asset b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ls-detail{border:1px solid var(--af-gold);border-radius:14px;padding:12px;background:#ffbf530f;display:grid;gap:9px}
.ls-detail h4{margin:0;font:800 14px/1.3 var(--af-font-body);overflow-wrap:anywhere}
.ls-detail .ls-big{aspect-ratio:16/10;border-radius:10px;background:#0b0820;display:grid;place-items:center;overflow:hidden;color:var(--af-muted);font-size:13px;text-align:center;padding:6px}
.ls-detail .ls-big img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.ls-detail audio{inline-size:100%}
.ls-detail dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0;font-size:11.5px}
.ls-detail dt{color:var(--af-muted)}
.ls-detail dd{margin:0;overflow-wrap:anywhere}
.ls-detail pre{margin:0;padding:8px;border-radius:8px;background:#0b0820;font:11px/1.5 var(--af-font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.ls-detail .project-actions{margin:0}
.ls-cards{display:grid;gap:8px}
.ls-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;text-align:left;padding:9px;border-radius:14px;border:1px solid var(--af-edge);background:#100c2970;color:var(--af-cream)}
.ls-card:hover{border-color:var(--af-mint)}
.ls-card .ls-cover{inline-size:54px;block-size:54px;border-radius:10px;background:linear-gradient(140deg,#3b2a78,#15102f) center/cover;display:grid;place-items:center;font:400 22px/1 var(--af-font-display);color:var(--af-gold)}
.ls-card b{display:block;font:750 13.5px/1.25 var(--af-font-body);overflow-wrap:anywhere}
.ls-card small{display:block;color:var(--af-muted);font:450 11.5px/1.4 var(--af-font-body);margin-top:2px;overflow-wrap:anywhere}
.ls-editor{display:grid;grid-template-rows:auto minmax(0,1fr);border-right:1px solid var(--af-edge);background:#120d2e}
.ls-tabline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--af-edge);background:#150f33}
.ls-filename{font:600 12.5px/1.3 var(--af-font-mono);color:var(--af-gold);overflow-wrap:anywhere}
.ls-code{min-height:0;overflow:hidden}
.ls-code .cm-editor{block-size:100%}
.ls-code textarea.ls-plain{inline-size:100%;block-size:100%;border:0;border-radius:0;background:#120d2e;color:var(--af-cream);font:13px/1.55 var(--af-font-mono);padding:12px;resize:none;white-space:pre;tab-size:2}
.ls-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0b0820}
.ls-stagebar{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--af-edge);background:#150f33;flex-wrap:wrap}
.ls-seg{display:flex;gap:4px}
body[data-brand="arcade"] .ls .ls-stagebar button.quiet[aria-pressed="true"]{background:#7cf8d226;border-color:var(--af-mint);color:var(--af-mint);box-shadow:inset 0 0 0 1px var(--af-mint)}
.ls-screen{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.ls-screen iframe{border:0;inline-size:100%;block-size:100%;background:#000;color-scheme:normal}
.ls-screen[data-device="mobile"] iframe{inline-size:min(390px,100%);block-size:min(760px,100%);border-radius:22px;box-shadow:0 0 0 8px #241a43,0 0 0 9px var(--af-edge)}
.ls-screen:fullscreen iframe{inline-size:100%;block-size:100%;border-radius:0;box-shadow:none}
.ls-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:20px;color:var(--af-muted);background:radial-gradient(ellipse at center,#302244,#0b0820 72%);font-size:13px}
.ls-empty p{margin:0;max-inline-size:34ch;line-height:1.6}
.ls-console{margin:0;border:0;border-top:1px solid var(--af-edge);border-radius:0;background:#150f33;padding:8px 12px}
.ls-console[open]{max-block-size:38%;overflow:auto}
.ls-console[open]>summary{margin-bottom:8px}
.ls-count{display:inline-block;min-inline-size:20px;padding:1px 7px;border-radius:999px;background:var(--af-coral);color:#2a0b16;font:700 11px/1.5 var(--af-font-mono);text-align:center}
.ls-count.calm{background:#ffffff26;color:var(--af-cream)}
.ls-consolebar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px}
.ls-log li{font:11.5px/1.5 var(--af-font-mono);padding:5px 8px;border-left:2px solid var(--af-edge);margin-bottom:4px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--af-cream)}
.ls-log li.error{border-color:var(--af-coral);background:#ff879e14}
.ls-log li.warn{border-color:var(--af-gold)}
.ls-log li button{all:unset;cursor:pointer;color:var(--af-mint);text-decoration:underline;font:inherit}
.ls-log li button:focus-visible{outline:2px solid var(--orange)}
.ls-tabs{display:none}
.ls-toast{position:absolute;inset-inline:0;inset-block-end:18px;margin-inline:auto;inline-size:max-content;max-inline-size:min(92%,560px);z-index:5;padding:11px 16px;border-radius:14px;background:var(--af-glass-deep);border:1px solid var(--af-mint);color:var(--af-cream);font:600 13px/1.45 var(--af-font-body);box-shadow:var(--af-shadow);overflow-wrap:anywhere}
.ls-toast.error{border-color:var(--af-coral)}
.ls-toast button{margin-inline-start:10px}
.ls-drop::after{content:"Drop to add to your game";position:absolute;inset:8px;z-index:7;display:grid;place-items:center;border:3px dashed var(--af-mint);border-radius:18px;background:#100c29e6;color:var(--af-mint);font:400 22px/1.3 var(--af-font-display);text-align:center;pointer-events:none}
dialog.ls-dialog{max-inline-size:620px;max-block-size:92dvh;overflow:auto}
dialog.ls-dialog form{display:grid;gap:14px}
dialog.ls-dialog h2{margin:0}
.ls-gamelist{display:grid;gap:8px;max-block-size:46dvh;overflow:auto}
.ls-gamelist>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--af-edge);border-radius:12px}
.ls-gamelist>div[aria-current="true"]{border-color:var(--af-mint);background:#7cf8d20f}
.ls-gamelist b{display:block;overflow-wrap:anywhere}
.ls-gamelist small{color:var(--af-muted);font-size:11.5px}
.ls-gamelist .row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ls-key{border:1px solid var(--af-gold);border-radius:14px;padding:14px;background:#ffbf5312;display:grid;gap:10px}
.ls-key p{margin:0}
.ls-key code{font:600 13px/1.5 var(--af-font-mono);overflow-wrap:anywhere;user-select:all;background:#0b0820;padding:10px;border-radius:8px}
/* The wallet workspace (Arcade AI, credits, saved versions, your own AI) lives in a sheet over the studio. */
.ls-sheet{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(1040px,100vw);z-index:20;overflow:auto;overscroll-behavior:contain;padding:18px 26px 40px;background:var(--af-night);border-inline-start:1px solid var(--af-edge-bright);box-shadow:-30px 0 80px #05021599;transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
body.ls-sheet-open .ls-sheet{transform:none;visibility:visible;transition:transform .22s ease}
body.ls-sheet-open::before{content:"";position:fixed;inset:0;z-index:19;background:#0e0819a8}
.ls-sheethead{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-bottom:14px;position:sticky;inset-block-start:-18px;background:var(--af-night);padding:14px 0 10px;z-index:2}
.ls-sheethead h2{margin:0}
.ls-sheethead .eyebrow{margin-bottom:4px}
.ls-sheet .intro{grid-template-columns:minmax(0,1fr) 260px!important;gap:24px!important;margin-bottom:20px}
.ls-sheet .intro .af-studio-art,.ls-sheet .intro h1{display:none}
.ls-sheet .intro .eyebrow{display:none}
.ls-sheet .play-area,.ls-sheet #download,.ls-sheet .workspace-mode{display:none}
.ls-sheet .build-columns{grid-template-columns:1fr}
.ls-sheet .workspace{min-height:0}
.ls-sheet #lsCloudBanner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px;color:var(--af-cream)}
.ls-sheet #versionsPanel{margin-top:18px}
@media (prefers-reduced-motion:reduce){.ls-sheet{transition:none}}
@media (max-width:1180px){.ls-body{grid-template-columns:56px minmax(200px,250px) minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){
  .ls{height:calc(100dvh - var(--ls-top,58px));grid-template-rows:auto minmax(0,1fr) auto}
  .ls-bar{flex-wrap:wrap;gap:7px;padding:8px 10px}
  .ls input.ls-title{flex:1 1 140px;font-size:15px}
  .ls-state{order:9;flex:1 1 100%}
  .ls-bar #lsDownload{display:none}
  .ls-body{grid-template-columns:minmax(0,1fr)}
  .ls-body>*{display:none}
  .ls-body[data-view="play"]>.ls-stage,.ls-body[data-view="code"]>.ls-editor{display:grid}
  .ls-body[data-view="tools"]{grid-template-rows:auto minmax(0,1fr)}
  .ls-body[data-view="tools"]>.ls-rail{display:flex;flex-direction:row;border-right:0;border-bottom:1px solid var(--af-edge)}
  .ls-body[data-view="tools"]>.ls-rail button{flex:1;grid-auto-flow:column;justify-content:center;gap:7px;font-size:12.5px}
  .ls-body[data-view="tools"]>.ls-side{display:block;border-right:0}
  .ls-editor{border-right:0}
  .ls-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--af-edge);background:var(--af-glass-deep)}
  .ls-tabs button{padding:11px 6px;border-radius:12px;border:1px solid var(--af-edge);background:transparent;color:var(--af-muted);font:750 13px/1.2 var(--af-font-body)}
  .ls-tabs button[aria-pressed="true"]{background:var(--af-gold);border-color:var(--af-gold);color:#2d1b0a}
  .ls-screen[data-device="mobile"] iframe{inline-size:100%;block-size:100%;border-radius:0;box-shadow:none}
  .ls-stagebar .ls-seg{display:none}
  .ls-toast{inset-block-end:76px}
  .ls-sheet{padding:12px 14px 34px}
  .ls-sheet .intro{grid-template-columns:1fr!important}
  .ls-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
}
@media (forced-colors:active){.ls-rail button[aria-pressed="true"],.ls-chips button[aria-pressed="true"],.ls-tabs button[aria-pressed="true"]{outline:2px solid Highlight}}

.ls-panel textarea{min-height:76px;font-size:13px}
.ls-opts{display:grid;gap:9px}
.ls-opts label:not(.tick){display:grid;gap:5px;font-size:12px}
.ls-gate:empty{display:none}
.ls-gate{display:grid;gap:8px;padding:11px;border:1px dashed var(--af-edge-bright);border-radius:12px;background:#ffffff08;font-size:12.5px;line-height:1.5}
.ls-gate .project-actions{margin:0}
.ls-tiers{display:grid;gap:8px}
.ls-tiers legend{margin-bottom:6px}
.ls-tiers #lsTiers{display:grid;gap:8px}
.ls-tiers label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:11px;border:1px solid var(--af-edge);border-radius:12px;background:#100c2970;font-weight:500;cursor:pointer}
.ls-tiers label:has(input:checked){border-color:var(--af-gold);background:#ffbf5314}
.ls-tiers input{margin-top:3px;accent-color:var(--af-gold)}
.ls-tiers b{display:block;font:400 15px/1.2 var(--af-font-display);color:var(--af-gold);letter-spacing:.5px}
.ls-tiers small{display:block;color:var(--af-muted);font-size:11.5px;line-height:1.45;margin-top:3px}
.ls-tiers em{font-style:normal;color:var(--af-mint);font:600 11px/1.4 var(--af-font-mono)}
.ls-jobs{display:grid;gap:8px}
.ls-job{display:grid;gap:7px;padding:10px;border:1px solid var(--af-edge);border-radius:12px;background:#100c2970;font-size:12px;line-height:1.45}
.ls-job.failed{border-color:var(--af-coral)}
.ls-job.succeeded{border-color:#7cf8d266}
.ls-job header{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ls-job b{font-weight:700;overflow-wrap:anywhere}
.ls-job small{color:var(--af-muted);font:500 11px/1.4 var(--af-font-mono);white-space:nowrap}
.ls-job p{margin:0;color:var(--af-muted);overflow-wrap:anywhere}
.ls-job .ls-shots{display:flex;gap:6px;flex-wrap:wrap}
.ls-job .ls-shots img{inline-size:64px;block-size:64px;object-fit:contain;border-radius:8px;background:#0b0820 repeating-conic-gradient(#ffffff10 0 25%,transparent 0 50%) 0 0/14px 14px}
.ls-job video{inline-size:100%;max-block-size:340px;border-radius:10px;background:#000}
.ls-job .project-actions{margin:0;gap:6px}
.ls-spin{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;border:2px solid var(--af-mint);border-inline-end-color:transparent;animation:ls-spin .8s linear infinite;margin-inline-end:6px;vertical-align:-1px}
@keyframes ls-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.ls-spin{animation:none}}