/* studio-web.css — a game made in ARCIRCLE Studio, on the web (studio-web.html, world-studio-web.js): /game/@<creator>/<game>.
   The Game World's look (gw.css): deep navy, blue glass, cyan / mint glow; the game's own key art behind its title. */
:root{--bg:#050a1a;--ink:#eef5ff;--ink2:#a9bddb;--ink3:#7088ab;--glass:rgba(16,32,64,.62);--edge:rgba(120,190,255,.22);--cyan:#39d3ff;--mint:#5cf2c0;--gold:#ffd23a;--th:#39d3ff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.sgw{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.5 Sora,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
body.sgw::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 15% 0%,rgba(57,211,255,.16),transparent 70%),radial-gradient(50% 40% at 100% 20%,rgba(92,242,192,.1),transparent 70%),radial-gradient(70% 50% at 50% 110%,rgba(120,90,255,.12),transparent 70%)}
.sgw a{color:inherit}
.sgw-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px max(16px,env(safe-area-inset-left));background:rgba(5,10,26,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.sgw-logo img{display:block;height:34px;width:auto}
.sgw-crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink3)}.sgw-crumb a{text-decoration:none}.sgw-crumb a:hover{color:var(--ink)}.sgw-crumb b{color:var(--ink2);font-weight:600}
.sgw-sp{flex:1}
.sgw-lang{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--edge);border-radius:10px;padding:6px 8px;font:inherit;font-size:13px}
.sgw-world{text-decoration:none;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--mint));color:#04121c;box-shadow:0 4px 18px rgba(57,211,255,.3)}
.sgw-main{position:relative;max-width:1120px;margin:0 auto;padding:22px 16px 40px}
.sgw-skel{display:grid;gap:14px}.sgw-skel i{display:block;height:120px;border-radius:20px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:sgwSk 1.2s linear infinite}.sgw-skel i:first-child{height:340px}
@keyframes sgwSk{to{background-position:-200% 0}}
/* the hero: the game's key art, its title over it */
.sgw-hero{position:relative;border-radius:26px;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;border:1px solid var(--edge);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);isolation:isolate}
.sgw-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--art) center/cover no-repeat;transform:scale(1.03);animation:sgwPan 18s ease-in-out infinite alternate}
.sgw-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,10,26,.94) 0%,rgba(5,10,26,.72) 42%,rgba(5,10,26,.1) 78%),linear-gradient(0deg,rgba(5,10,26,.9),transparent 55%)}
@keyframes sgwPan{to{transform:scale(1.1) translateX(-2%)}}
.sgw-hero-in{padding:34px 36px;max-width:620px}
.sgw-chip{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(57,211,255,.14);border:1px solid color-mix(in srgb,var(--th) 50%,transparent);color:var(--ink)}
.sgw-hero h1{margin:14px 0 10px;font:900 clamp(34px,6vw,60px)/1.02 "Exo 2",Sora,sans-serif;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.5);word-break:break-word}
html[lang=ko] .sgw-hero h1{font-family:"Black Han Sans","Exo 2",sans-serif;font-weight:400}
.sgw-by{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.sgw-by:hover{background:rgba(255,255,255,.1)}
.sgw-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--mint));color:#04121c}.sgw-av.off{background:linear-gradient(135deg,#7f6bff,var(--cyan));color:#fff}
.sgw-by span{display:flex;flex-direction:column;line-height:1.15}.sgw-by small{color:var(--ink3);font-size:12px}
.sgw-off{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);border:1px solid rgba(255,210,58,.4);border-radius:999px;padding:2px 8px}
.sgw-hero.cr .sgw-by{margin-top:14px;padding:8px 18px 8px 8px}.sgw-hero.cr .sgw-av{width:56px;height:56px;font-size:24px}.sgw-hero.cr .sgw-by b{font:800 26px/1.1 "Exo 2",Sora,sans-serif}
.sgw-stats{display:flex;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.sgw-stats span{display:flex;flex-direction:column;min-width:86px;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);font-size:12px;color:var(--ink3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sgw-stats b{font:800 22px/1.1 "Exo 2",Sora,sans-serif;color:var(--ink)}
.sgw-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:center}
.sgw-play{appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font:800 18px/1 "Exo 2",Sora,sans-serif;letter-spacing:.02em;padding:16px 30px;border-radius:16px;color:#04121c;background:linear-gradient(90deg,var(--cyan),var(--mint));box-shadow:0 10px 34px rgba(57,211,255,.38),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.sgw-play::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sgwShine 3.2s ease-in-out infinite}
@keyframes sgwShine{0%,60%{left:-60%}100%{left:130%}}
.sgw-play:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(57,211,255,.5)}
.sgw-play.busy{opacity:.7;pointer-events:none}.sgw-play.sm{font-size:15px;padding:13px 22px}
.sgw-btn{appearance:none;cursor:pointer;text-decoration:none;font:700 14px/1 Sora,sans-serif;padding:14px 18px;border-radius:14px;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--edge);transition:background .15s}
.sgw-btn:hover{background:rgba(255,255,255,.13)}.sgw-btn.on{color:#ff8fb6;border-color:rgba(255,120,170,.5)}.sgw-btn:disabled{opacity:.6}
.sgw-note{margin:14px 0 0;color:var(--ink2);font-size:13px}
/* the board and the how-to */
.sgw-row{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:18px}
.sgw-card{padding:20px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sgw-card h2,.sgw-sec h2,.sgw-cta h2{margin:0 0 12px;font:800 18px/1.2 "Exo 2",Sora,sans-serif;letter-spacing:.01em}
.sgw-board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sgw-board li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.sgw-board li i{font-style:normal;text-align:center;color:var(--ink3);font-weight:700}.sgw-board li b{font-family:"Exo 2",Sora,sans-serif;font-size:16px}
.sgw-board li.m1{background:linear-gradient(90deg,rgba(255,210,58,.18),rgba(255,255,255,.03));border:1px solid rgba(255,210,58,.3)}.sgw-board li.m2{background:linear-gradient(90deg,rgba(200,220,255,.14),rgba(255,255,255,.03))}.sgw-board li.m3{background:linear-gradient(90deg,rgba(255,160,90,.14),rgba(255,255,255,.03))}
.sgw-board li.none{display:block;text-align:center;color:var(--ink2);padding:18px}
.sgw-how{margin:0 0 10px;font-size:15px;color:var(--ink)}.sgw-how.sm{font-size:13px;color:var(--ink2)}
.sgw-link{display:inline-block;margin-top:6px;color:var(--cyan);text-decoration:none;font-weight:700;font-size:14px}.sgw-link:hover{text-decoration:underline}
/* game cards */
.sgw-sec{margin-top:26px}
.sgw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sgw-g{display:flex;flex-direction:column;text-decoration:none;border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--edge);transition:transform .18s,border-color .18s,box-shadow .18s}
.sgw-g:hover{transform:translateY(-3px);border-color:rgba(57,211,255,.55);box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 0 1px rgba(57,211,255,.2)}
.sgw-g-art{aspect-ratio:16/9;background:var(--art) center/cover;position:relative}
.sgw-g-art em{position:absolute;left:10px;bottom:10px;font-style:normal;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(5,10,26,.72);backdrop-filter:blur(6px)}
.sgw-g b{padding:12px 14px 2px;font:800 16px/1.2 "Exo 2",Sora,sans-serif}.sgw-g small{padding:0 14px 14px;color:var(--ink3);font-size:12px}
.sgw-empty{color:var(--ink2)}
.sgw-cta{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px;border-radius:22px;background:linear-gradient(120deg,rgba(57,211,255,.16),rgba(92,242,192,.1) 60%,rgba(120,90,255,.14));border:1px solid rgba(92,242,192,.3)}
.sgw-cta p{margin:0;color:var(--ink2)}
.sgw-foot{max-width:1120px;margin:0 auto;padding:20px 16px 40px;color:var(--ink3);font-size:13px;display:flex;flex-wrap:wrap;gap:8px}.sgw-foot a{text-decoration:none}.sgw-foot a:hover{color:var(--ink)}.sgw-foot p{flex-basis:100%;margin:6px 0 0;font-size:12px}
.sgw-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:30000;padding:12px 18px;border-radius:14px;background:rgba(10,20,44,.95);border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:14px;transition:.3s;max-width:calc(100vw - 32px)}.sgw-toast.on{opacity:1;transform:translate(-50%,0)}
/* the run: the canvas takes the page */
.sgw-cv{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;z-index:50;background:#000}.sgw-cv[hidden]{display:none}
body.sgw-on{overflow:hidden}body.sgw-on .sgw-top,body.sgw-on .sgw-main,body.sgw-on .sgw-foot{visibility:hidden}
.sgw-load{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:linear-gradient(0deg,rgba(5,10,26,.92),rgba(5,10,26,.6)),var(--art) center/cover;transition:opacity .45s}
.sgw-load.out{opacity:0}
.sgw-load div{display:grid;gap:12px;justify-items:center;text-align:center;padding:24px}
.sgw-load b{font:900 clamp(26px,5vw,42px)/1.1 "Exo 2",Sora,sans-serif}
.sgw-load i{width:min(320px,70vw);height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}.sgw-load em{display:block;height:100%;width:40%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--mint));animation:sgwBar 1.1s ease-in-out infinite}
@keyframes sgwBar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.sgw-load small{color:var(--ink2)}
@media (max-width:760px){
  .sgw-crumb{display:none}.sgw-world{padding:7px 11px;font-size:12px}
  .sgw-main{padding:14px 12px 30px}
  .sgw-hero{min-height:0;border-radius:20px}
  .sgw-hero::after{background:linear-gradient(0deg,rgba(5,10,26,.97) 30%,rgba(5,10,26,.5) 70%,rgba(5,10,26,.15))}
  .sgw-hero-in{padding:150px 18px 22px}
  .sgw-stats span{min-width:0;flex:1}
  .sgw-play{flex:1 1 100%;justify-content:center}.sgw-btn{flex:1}
  .sgw-row{grid-template-columns:1fr}
  .sgw-grid{grid-template-columns:repeat(2,1fr);gap:10px}.sgw-g b{font-size:14px;padding:10px 10px 2px}.sgw-g small{padding:0 10px 10px}
  .sgw-cta{flex-direction:column;align-items:stretch;text-align:left}
}
@media (prefers-reduced-motion:reduce){.sgw-hero::before,.sgw-play::after,.sgw-skel i,.sgw-load em{animation:none}}
/* the Studio's styles (world.min.css, loaded for the run) carry the site's own rules too: the page keeps its own */
body.sgw{padding:0!important}
body.sgw .sgw-card h2,body.sgw .sgw-sec h2,body.sgw .sgw-cta h2{color:var(--ink)}
body.sgw .sgw-main a,body.sgw .sgw-foot a{color:inherit}body.sgw .sgw-link{color:var(--cyan)}
.sgw-hero.cr .sgw-chip{display:flex;width:max-content}.sgw-hero.cr .sgw-by{display:flex;width:max-content;max-width:100%}
/* STB5 (2026-10-27): remix a game from its web page (opens the World's Studio with a copy) */
.sgw-remix{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:999px;border:1px solid rgba(124,245,226,.5);background:rgba(8,24,56,.6);color:#dff6ff;font:800 15px/1 "Exo 2",Sora,sans-serif;text-decoration:none}
.sgw-remix:hover{border-color:#7cf5e2;box-shadow:0 0 14px rgba(124,245,226,.35)}
/* STB7 (2026-10-27): reactions, comments, a creator's level, badges and picks */
.sgw-rx{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sgw-rxb{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font:700 16px/1 Sora,sans-serif;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--edge);transition:transform .15s,background .15s}
.sgw-rxb b{font-size:13px;color:var(--ink2)}.sgw-rxb:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}.sgw-rxb.on{border-color:var(--mint);background:rgba(92,242,192,.14)}
.sgw-rxb.pop{animation:sgwPop .45s cubic-bezier(.2,1.6,.4,1)}@keyframes sgwPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
.sgw-cmts h2 small{font-size:14px;color:var(--ink3);margin-left:6px}
.sgw-cf{display:flex;gap:8px;margin:0 0 14px}.sgw-cf input{flex:1;min-width:0;padding:13px 14px;border-radius:14px;border:1px solid var(--edge);background:rgba(5,12,30,.7);color:var(--ink);font:600 14px/1.2 Sora,sans-serif}
.sgw-cf input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(57,211,255,.18)}
.sgw-cl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sgw-cl li{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--edge)}.sgw-cl li.none{color:var(--ink3);justify-content:center}
.sgw-cl li.mk{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}.sgw-cl li.new{animation:sgwIn .4s ease-out}@keyframes sgwIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sgw-cl li>div{min-width:0;flex:1}.sgw-cl b{font-size:14px}.sgw-cl b em{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,210,58,.18);color:var(--gold);margin-left:4px}
.sgw-cl small{color:var(--ink3);font-size:12px;margin-left:8px}.sgw-cl p{margin:4px 0 0;color:var(--ink2);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.sgw-lv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:14px 0 6px;max-width:460px}
.sgw-lvn{font:800 13px/1 Sora,sans-serif;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--mint));color:#04122a}
.sgw-lv i{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.sgw-lv em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--mint));box-shadow:0 0 10px var(--cyan);animation:sgwGrow 1s ease-out}
@keyframes sgwGrow{from{width:0}}.sgw-lv small{color:var(--ink3);font-size:12px}
.sgw-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}.sgw-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:rgba(255,210,58,.1);border:1px solid rgba(255,210,58,.35);font-size:16px}.sgw-badge small{font-size:12px;color:var(--ink2)}
/* ---------------- /studio: ARCIRCLE Studio as a page of its own (2026-10-27) ---------------- */
body.sga{--sga-h:64px;min-height:100vh;overflow:hidden;background:#050a1a url(/images/studio/ui/bg-1344.webp) center/cover fixed}
body.sga::before{content:"";position:fixed;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(57,211,255,.18),transparent 60%),linear-gradient(180deg,rgba(3,8,22,.35),rgba(3,8,22,.78));pointer-events:none}
.sga-top{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--sga-h);box-sizing:border-box;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(8,18,42,.88),rgba(8,18,42,.62));border-bottom:1px solid rgba(124,245,226,.22);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.sga-name{display:flex;align-items:baseline;gap:6px;font:900 19px/1 "Exo 2",Sora,sans-serif;letter-spacing:.02em;color:#fff;margin-left:4px;white-space:nowrap}
.sga-name em{font-style:normal;background:linear-gradient(90deg,#39d3ff,#5cf2c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.sga-name i{font:700 11px/1 Sora,sans-serif;font-style:normal;color:var(--ink3);padding:4px 8px;border-radius:999px;border:1px solid var(--edge);margin-left:4px;align-self:center}
.sga-me{appearance:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;box-sizing:border-box;padding:0 16px 0 5px;margin-right:8px;border-radius:999px;font:800 13px/1 Sora,sans-serif;color:#fff;border:1.5px solid transparent;background:linear-gradient(180deg,#12244a,#0a1631) padding-box,linear-gradient(120deg,#39d3ff,#5cf2c0 55%,#9b8cff) border-box;box-shadow:0 6px 20px rgba(57,211,255,.22),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s,box-shadow .2s}
.sga-me:hover{box-shadow:0 8px 28px rgba(92,242,192,.38),inset 0 1px 0 rgba(255,255,255,.16)}.sga-me:active{transform:scale(.96)}
.sga-me::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%) -120% 0/250% 100% no-repeat;animation:sgaShine 3.6s ease-in-out infinite;pointer-events:none}
.sga-me.on::after{display:none}
@keyframes sgaShine{0%,60%{background-position:-120% 0}100%{background-position:220% 0}}
.sga-me-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#39d3ff,#5cf2c0);box-shadow:0 0 12px rgba(57,211,255,.55)}
.sga-me-ic svg{width:17px;height:17px;fill:#0b1630}
.sga-me span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.sga-me span b{font:800 13px/1 Sora,sans-serif;letter-spacing:.01em}
.sga-me span small{font:700 9px/1 Sora,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7cf5e2}
.sga-me.on{background:linear-gradient(180deg,#0f2a2b,#0a1a24) padding-box,linear-gradient(120deg,#5cf2c0,#39d3ff) border-box;box-shadow:0 4px 16px rgba(92,242,192,.18)}
.sga-me.on .sga-me-ic{position:relative;background:conic-gradient(from 40deg,hsl(var(--h1) 85% 60%),hsl(var(--h2) 85% 58%),hsl(var(--h1) 85% 60%));box-shadow:none}
.sga-me.on .sga-me-ic em{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#3dff9e;border:2px solid #0a1a24;box-shadow:0 0 8px #3dff9e}
.sga-me.on span b{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;color:#d9fff5}
.sga-or{display:flex;flex:none;padding:3px;margin-right:8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.sga-or[hidden]{display:none}
.sga-or button{appearance:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 10px;border:0;border-radius:9px;background:none;color:var(--ink3);font:800 12px/1 Sora,sans-serif;transition:background .2s,color .2s}
.sga-or button.on{background:linear-gradient(135deg,rgba(57,211,255,.32),rgba(92,242,192,.26));color:#fff;box-shadow:inset 0 0 0 1px rgba(124,245,226,.5)}
.sga-or i{display:block;box-sizing:border-box;border:2px solid currentColor;border-radius:3px}.sga-or i.p{width:10px;height:15px}.sga-or i.l{width:15px;height:10px}
.sga-or.busy{opacity:.6;pointer-events:none}
.sga-me,.sga-top .sgw-world{white-space:nowrap;flex:none}
@media (max-width:1100px){.sga-name i{display:none}.sga-or span{display:none}.sga-or button{padding:7px 9px}}
@media (max-width:900px){.sga-name b{display:none}.sga-top .sgw-world{padding-left:14px;padding-right:14px;font-size:13px}}
.sga-main{position:relative;z-index:1;padding:0;margin:0;max-width:none;min-height:calc(100vh - var(--sga-h))}
.sga-boot{position:fixed;inset:var(--sga-h) 0 0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;color:var(--ink);font:800 16px/1.3 Sora,sans-serif}
.sga-boot img{filter:drop-shadow(0 10px 24px rgba(57,211,255,.45));animation:sgaBob 1.6s ease-in-out infinite}
.sga-boot i{display:block;width:min(320px,70vw);height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.sga-boot i em{display:block;height:100%;width:8%;border-radius:inherit;background:linear-gradient(90deg,#39d3ff,#5cf2c0);box-shadow:0 0 14px #39d3ff;transition:width .2s}
.sga-boot.err{gap:12px}.sga-boot.err a{min-width:220px}
@keyframes sgaBob{50%{transform:translateY(-8px) rotate(-3deg)}}
/* the Studio window is the page, under the bar; the canvas (preview, runs) behind it */
body.sga .sgw-cv{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
body.sga.sga-on .wst{top:var(--sga-h);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px}
body.sga.sga-on .wst>.wst-card,body.sga.sga-on .wst>div:first-child{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(124,245,226,.18)}
body.sga.sga-run .sga-top{display:none}body.sga.sga-run .wst{top:0}
body.sga .wst-x{display:none}
@media (max-width:640px){body.sga{--sga-h:56px}.sga-name i,.sga-top .sgw-world{display:none}.sga-name{font-size:16px}.sga-top .sgw-logo img{width:76px;height:auto}}
/* /studio on a phone held upright: one tidy row — the logo, the name, a short wallet chip, the language */
@media (max-width:640px){
  .sga-top{gap:8px;padding:0 10px}
  .sga-top .sgw-logo{flex:none}.sga-top .sgw-logo img{width:58px;height:auto}
  .sga-name{font-size:15px;min-width:0;overflow:hidden}
  .sga-me{margin:0;height:36px;padding:0 12px 0 4px;gap:7px}.sga-me-ic{width:27px;height:27px}.sga-me span b{font-size:12px}.sga-me span small{display:none}
  .sga-top .sgw-lang{flex:none;padding:6px 4px;font-size:12px;max-width:62px}
}
@media (max-width:420px){.sga-name b{display:none}.sga-name{font-size:16px}.sga-top{gap:6px;padding:0 8px}.sga-or{margin-right:0;padding:2px}.sga-or button{padding:7px 7px}.sga-me{padding:0 10px 0 4px}.sga-top .sgw-lang{max-width:54px}}
@media (max-width:420px){.sga-name{display:none}}
/* /studio on a phone held sideways (2026-10-27, the owner's screenshot: the banner, the Test/Next bar and the tabs left
   ~110 px to work in): a thin top bar, and the window drawn smaller so it has a wide screen's room and takes the
   rail-and-columns layout (world-studio.js isWide divides by the zoom) — like the in-game Studio's 980 px phone page */
@media (orientation:landscape) and (max-height:520px){
  body.sga{--sga-h:48px}
  .sga-top{gap:8px;padding:0 12px}.sga-top .sgw-logo img{width:58px;height:auto}.sga-name{font-size:15px}
  .sga-me{height:34px;padding:0 12px 0 4px;gap:7px}.sga-me-ic{width:26px;height:26px}.sga-me span small{display:none}
  .sga-or button{padding:5px 8px}.sga-top .sgw-world{padding:9px 14px;font-size:12px}.sga-top .sgw-lang{padding:6px 4px}
  /* RM4 (2026-10-27): a phone held sideways gets a layout of its own, not a smaller computer page — no rail: the sections
     are a tab bar along the bottom, the page uses the whole width, the cards keep their size */
  body.sga.sga-on .wst{padding:0}
  body.sga .wst.wide .wst-in{width:100%;height:calc(100dvh - var(--sga-h,48px));border-radius:0;border-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"b" "t"}
  body.sga .wst.wide .wst-h,body.sga .wst.wide .wst-foot{display:none}
  body.sga .wst.wide .wst-body{border-left:0;padding:10px 14px 8px}
  body.sga .wst.wide .wst-tabs{flex-direction:row;justify-content:center;gap:6px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid rgba(124,245,200,.25);background:rgba(4,10,26,.92);backdrop-filter:blur(8px)}
  body.sga .wst.wide .wst-tabs button{flex:1 1 0;max-width:240px;flex-direction:row;justify-content:center;gap:8px;padding:8px 10px!important;min-height:44px;font-size:14px!important;border-radius:12px!important}
  body.sga .wst.wide .wst-tabs button .wst-ic{width:24px;height:24px}
  body.sga .wst.wide .wst-hero{min-height:0;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}body.sga .wst.wide .wst-hero .wst-hcv{min-height:170px}
  body.sga .wst.wide .wst-hbody h3{font-size:22px}body.sga .wst.wide .wst-hrow{grid-auto-columns:minmax(210px,36%)}
}


/* PRO (2026-10-28): the /studio bar in Studio Pro's graphite — one line, thin edge, one filled button */
body.sga{background:#07090c}
body.sga::before{background:radial-gradient(80% 50% at 50% 0%,rgba(79,227,193,.06),transparent 70%)}
.sga-top{background:rgba(11,14,18,.94);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
.sga-name{font:700 16px/1 Sora,sans-serif;letter-spacing:0}.sga-name em{background:none;-webkit-background-clip:initial;background-clip:initial;color:#e9eef3;font-weight:700}
.sga-name i{border-color:rgba(255,255,255,.13);color:#68737e;font-weight:600;border-radius:5px}
.sga-me{height:36px;border-radius:8px;box-shadow:none;background:transparent;border:1px solid rgba(255,255,255,.13);font:600 12.5px/1 Sora,sans-serif}
.sga-me::after{display:none}.sga-me:hover{box-shadow:none;border-color:rgba(255,255,255,.3)}
.sga-me-ic{width:24px;height:24px;border-radius:6px;box-shadow:none;background:#4fe3c1}.sga-me-ic svg{width:14px;height:14px}
.sga-me.on{background:transparent;border:1px solid rgba(79,227,193,.4);box-shadow:none}
.sga-top .sgw-world{border-radius:8px;background:#4fe3c1;color:#04130f;box-shadow:none;font-weight:700}
.sga-top .sgw-lang{border-radius:8px;background:transparent;border-color:rgba(255,255,255,.13)}
.sga-or{border-radius:8px;border-color:rgba(255,255,255,.13);background:transparent}.sga-or button{border-radius:6px}.sga-or button.on{background:rgba(79,227,193,.12);box-shadow:inset 0 0 0 1px rgba(79,227,193,.45)}
body.sga.sga-on .wst.pro.wide .wst-in{height:calc(100dvh - var(--sga-h) - 28px)}
body.sga .wst.pro>div:first-child{box-shadow:0 24px 70px rgba(0,0,0,.6)!important}
.sga-boot img{filter:none}.sga-boot i em{background:#4fe3c1;box-shadow:none}
/* PRO: on a phone the window fills the page under the bar (it was a full screen tall under a 56 px bar, so the bar of
   Back / Test / Next sat below the screen) */
@media (max-width:900px){body.sga.sga-on .wst.pro:not(.wide){padding:0;align-items:stretch}body.sga .wst.pro:not(.wide) .wst-in{width:100%;height:calc(100dvh - var(--sga-h));max-height:none;min-height:0;border-radius:0;border-width:0!important}}
/* PRO: a game's page in another site's frame (/embed/game/@…) — no site bar or footer, the game first */
body.sgw-embed .sgw-top,body.sgw-embed .sgw-foot,body.sgw-embed footer,body.sgw-embed .sgw-cta{display:none}
body.sgw-embed .sgw-main{padding-top:12px}
body.sga .wsb{top:var(--sga-h,64px)}
/* ===== PRO (2026-10-28, SP1): a game's / creator's web page in Studio Pro's graphite — thin lines, one mint accent, gold marks */
body.sgw{--bg:#0b0e12;--ink:#e9eef3;--ink2:#9ba7b3;--ink3:#68737e;--glass:#12161b;--edge:rgba(255,255,255,.09);--cyan:#4fe3c1;--mint:#4fe3c1;--gold:#e6c36a;background:#0b0e12;font-family:Sora,system-ui,sans-serif}
body.sgw::before{background:radial-gradient(70% 40% at 50% 0%,rgba(79,227,193,.05),transparent 70%)}
.sgw-top{background:rgba(11,14,18,.94);border-bottom:1px solid rgba(255,255,255,.08)}
.sgw-world{border-radius:8px;background:#4fe3c1;color:#04130f;box-shadow:none;font-weight:700}
.sgw-lang{border-radius:8px;background:transparent}
.sgw-hero{border-radius:14px;border:1px solid var(--edge);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sgw-hero::after{background:linear-gradient(90deg,rgba(11,14,18,.96) 0%,rgba(11,14,18,.78) 42%,rgba(11,14,18,.1) 78%),linear-gradient(0deg,rgba(11,14,18,.92),transparent 55%)}
.sgw-hero h1{font:800 clamp(32px,5.5vw,54px)/1.04 Sora,sans-serif;letter-spacing:-.02em;text-shadow:none}
.sgw-chip{border-radius:6px;background:rgba(11,14,18,.8);border:1px solid rgba(79,227,193,.45);color:var(--mint);font:600 11px/1 Sora,sans-serif;letter-spacing:.08em}
.sgw-by{border-radius:8px;background:rgba(11,14,18,.7);border-color:var(--edge)}
.sgw-av{background:#1f252c;color:var(--mint);border:1px solid rgba(79,227,193,.4)}
.sgw-off{border-radius:5px;border-color:rgba(230,195,106,.5);color:var(--gold)}
.sgw-stats span{border-radius:8px;background:rgba(11,14,18,.75);border-color:var(--edge)}
.sgw-stats b{font:700 20px/1.1 ui-monospace,"SF Mono",Menlo,monospace}
.sgw-play{border-radius:8px;background:#4fe3c1!important;color:#04130f;box-shadow:none;font:700 16px/1 Sora,sans-serif;letter-spacing:0;padding:15px 28px}
.sgw-play::after{display:none}.sgw-play:hover{transform:none;box-shadow:none;background:#6ff0d2!important}
.sgw-btn,.sgw-remix,.sgw-rxb{border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--ink);font:600 13.5px/1 Sora,sans-serif;box-shadow:none}
.sgw-btn:hover,.sgw-remix:hover,.sgw-rxb:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);box-shadow:none;transform:none}
.sgw-btn.on{color:#ff8fb6;border-color:rgba(255,120,170,.5)}.sgw-rxb.on{border-color:var(--mint);background:rgba(79,227,193,.1)}
.sgw-card,.sgw-g,.sgw-cl li{border-radius:12px;background:#12161b;border:1px solid var(--edge);box-shadow:none;backdrop-filter:none}
.sgw-card h2,.sgw-sec h2,.sgw-cta h2{font:700 16px/1.2 Sora,sans-serif;letter-spacing:0}
.sgw-board li{border-radius:8px;background:#181d23}.sgw-board li b{font:600 15px/1 ui-monospace,"SF Mono",Menlo,monospace}
.sgw-board li.m1{background:#181d23;border:1px solid rgba(230,195,106,.45)}.sgw-board li.m1 i{color:var(--gold)}
.sgw-g:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2);box-shadow:none}
.sgw-g b{font:700 15px/1.2 Sora,sans-serif}.sgw-g-art em{border-radius:5px;background:rgba(11,14,18,.82)}
.sgw-cta{border-radius:14px;background:#12161b;border:1px solid var(--edge)}
.sgw-cf input{border-radius:8px;background:#0b0e12;border-color:rgba(255,255,255,.14)}.sgw-cf input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(79,227,193,.12)}
.sgw-lvn{border-radius:6px;background:transparent;border:1px solid rgba(79,227,193,.5);color:var(--mint)}
.sgw-lv i{height:4px}.sgw-lv em{background:var(--mint);box-shadow:none}
.sgw-badge{border-radius:8px;background:rgba(230,195,106,.08);border-color:rgba(230,195,106,.35)}
.sgw-load{background:linear-gradient(0deg,rgba(11,14,18,.94),rgba(11,14,18,.7)),var(--art) center/cover}.sgw-load b{font:800 clamp(24px,4.5vw,38px)/1.1 Sora,sans-serif}.sgw-load em{background:var(--mint)}
.sgw-toast{border-radius:8px;background:#12161b}
/* the embed: just the game — a big Play, no site bar, footer or call to action */
body.sgw-embed .sgw-main{padding:10px}
body.sgw-embed .sgw-row,body.sgw-embed .sgw-sec,body.sgw-embed .sgw-cmts{display:none}
body.sgw-embed .sgw-hero{min-height:calc(100vh - 20px)}
body.sgw-embed .sgw-hero-in::after{content:"ARCIRCLE Studio";display:block;margin-top:16px;color:var(--ink3);font:600 11px/1 Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* phones: the top bar fits in one row — the Creator Hub button keeps its arrow, the logo shrinks (2026-10-29) */
@media (max-width:560px){
  .sga-top{gap:6px;padding:0 8px}
  .sga-hub span{display:none}.sga-hub{padding:0 9px;flex:none;width:40px;justify-content:center}.sga-hub svg{flex:none;width:18px;height:18px}
  .sga-top .sgw-logo img{width:52px;height:auto}
  .sga-name{display:none}
  .sga-or button span{display:none}
  .sga-me{max-width:130px;overflow:hidden}
}
@media (max-width:430px){.sga-me span{display:none}.sga-me{padding:0 6px}.sga-top .sgw-logo img{width:46px}}