.studio-directory-card { position:relative; overflow:hidden; padding:0; }
.studio-directory-link { display:flex; flex:1; flex-direction:column; color:inherit; text-decoration:none; }
button.studio-directory-link { background:none; border:0; padding:0; width:100%; text-align:left; font:inherit; cursor:pointer; }
.studio-directory-link:focus-visible { outline:2px solid white; outline-offset:-3px; }
.studio-directory-cover { position:relative; aspect-ratio:1.85; overflow:hidden; background:#1d2424; }
.studio-directory-cover img { position:absolute; width:200%; height:200%; max-width:none; left:-50%; top:-50%; object-fit:cover; }
.studio-game-cover img { width:100%; height:100%; left:0; top:0; }
.studio-cover-tag { position:absolute; left:16px; bottom:14px; background:#101010d9; color:#fff; border:1px solid #ffffff29; border-radius:4px; padding:5px 9px; font:10px ui-monospace,monospace; letter-spacing:.08em; }
.studio-world-status { left:auto; bottom:auto; top:20px; right:16px; }
.studio-status-with-favorite { right:68px; }
.play-update { position:fixed; z-index:6; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; padding:12px 16px; max-width:calc(100vw - 40px); box-sizing:border-box; border:1px solid #52654f; border-radius:10px; background:#172018; color:#e2f3df; font:12px system-ui,sans-serif; }
.play-update[hidden] { display:none; }
.play-update button { flex:none; padding:8px 12px; border:1px solid #b9d9b0; border-radius:6px; background:#d8efcf; color:#15210f; font:inherit; cursor:pointer; }
.play-update button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:620px) { .play-update { flex-wrap:wrap; justify-content:center; width:calc(100vw - 32px); gap:8px; text-align:center; } }
.studio-cover-placeholder { display:grid; height:100%; padding:24px; box-sizing:border-box; place-items:center; text-align:center; color:#8d9b9d; font:14px system-ui,sans-serif; letter-spacing:.03em; }
.studio-directory-content { padding:20px; flex:1; display:flex; flex-direction:column; }
.studio-origin { margin:0 0 14px; color:#888; font-size:11px; letter-spacing:.02em; }
.studio-directory-content .world-card-head { flex-wrap:wrap; }
.studio-directory-content .world-card-summary { font-size:13px; line-height:1.65; }
.studio-directory-content .world-card-foot { margin-top:auto; }
.studio-directory-content .world-card-foot strong { color:#eee; }
.studio-card-edit { padding:13px 20px; border:0; border-top:1px solid #2b2b2b; background:transparent; color:#aaa; font-family:inherit; font-size:12px; text-align:left; cursor:pointer; text-decoration:none; }
.studio-card-edit:hover { color:#fff; background:#1c1c1c; }
.chrona-play { margin:0; color:#eee; background:#08090b; font:14px system-ui,sans-serif; height:100dvh; overflow:hidden; }
.play-header { height:60px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #292b30; }
.play-header a { color:#ccc; text-decoration:none; }
.play-brand { display:flex; gap:16px; align-items:center; }
/* The source mark has generous transparent padding. A fixed, cover-fitted frame
   keeps the visible Chrona logo legible without increasing the header height. */
.play-brand img { flex:none; width:154px; height:36px; object-fit:cover; object-position:center; }
.play-header nav { display:flex; align-items:center; gap:18px; }
.play-header button { background:transparent; border:0; color:#999; cursor:pointer; }
#world-account { color:#aaa; font-size:12px; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
#world-runtime { height:calc(100dvh - 61px); }
#world-runtime iframe { display:block; width:100%; height:100%; border:0; }
.play-network { position:absolute; z-index:5; top:76px; right:18px; max-width:min(420px,calc(100vw - 36px)); padding:12px 16px; background:#10151dea; border:1px solid #ffffff25; border-radius:10px; color:#d8dfe8; box-shadow:0 8px 30px #0003; font-size:12px; }
.play-network > span { margin-right:12px; }
.play-network button { background:#263449; color:#e7eefb; border:1px solid #52647e; border-radius:5px; padding:5px 9px; cursor:pointer; margin:3px; }
.play-network button:disabled { opacity:.5; cursor:wait; }
#network-message { margin:8px 0 0; max-width:380px; line-height:1.5; color:#a9b7c7; }
#network-message:empty { display:none; }
#network-invite-url { box-sizing:border-box; width:100%; background:#070c14; color:#ddd; border:1px solid #455267; padding:7px; margin-top:8px; }
#world-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#111d; border:1px solid #444; padding:16px 24px; border-radius:8px; }
@media(max-width:720px) { .play-brand img,#world-account { display:none; } .play-header { padding:0 12px; font-size:12px; gap:8px; } .play-header nav { gap:10px; } }

/* One playable surface, one creation action; keyboard focus follows the same split. */
.studio-directory-link:hover .studio-directory-cover img { filter:brightness(1.08); }
.studio-enter-hint { font-size:11px; color:#b5b9c3; }
.studio-card-edit { width:100%; display:flex; align-items:center; justify-content:space-between; font-weight:550; padding:15px 20px; color:#d6dce7; }
.studio-card-edit:focus-visible { outline:2px solid #b8c9ff; outline-offset:-4px; }
.studio-card-edit:disabled { opacity:.4; cursor:not-allowed; }
.play-header #world-role { border:1px solid #394d69; border-radius:20px; padding:6px 10px; color:#c6d5f8; background:#1b293f; white-space:nowrap; font-size:12px; }
.play-header #world-role[data-role=owner],.play-header #world-role[data-role=manager] { color:#e4d6ac; border-color:#645737; background:#322c1c; }
.play-header #world-role[data-role=player],.play-header #world-role[data-role=viewer] { color:#b7d5c6; border-color:#38594b; background:#192e25; }
.play-header #world-remix { border:1px solid #424955; border-radius:7px; padding:7px 10px; color:#eee; white-space:nowrap; }
.play-header button:focus-visible { outline:2px solid #b8c9ff; outline-offset:3px; }
#world-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1000px) { .play-brand img { display:none; } .play-header nav { gap:9px; } }
@media(max-width:720px) { .play-header #world-remix { display:none; } #world-title { max-width:22vw; } .play-header #world-role { font-size:11px; padding:5px 8px; } }

.platform-admin-badge { display:inline-flex; align-items:center; padding:5px 9px; border:1px solid #645737; border-radius:16px; color:#e4d6ac; background:#322c1c; font:11px system-ui,sans-serif; white-space:nowrap; }

/* Player navigation and creator controls belong to different levels. */
.directory-context { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:20px 0; }
.directory-context p { max-width:780px; margin:0; color:#999; font-size:14px; line-height:1.6; }
.directory-admin { flex-shrink:0; background:none; color:#baa97e; border:1px solid #51462f; border-radius:8px; padding:9px 12px; font:inherit; font-size:12px; cursor:pointer; }
.directory-filters { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
#worldsFilters { display:flex; gap:8px; flex-wrap:wrap; }
.directory-filter { background:transparent; border:1px solid #303030; border-radius:30px; color:#aaa; padding:9px 14px; cursor:pointer; font:inherit; font-size:12px; }
.directory-filter[aria-pressed=true] { background:#232323; border-color:#666; color:#fff; }
.directory-selects { display:flex; gap:16px; }
.directory-selects label { display:flex; align-items:center; gap:8px; color:#888; font-size:11px; }
.directory-selects select { max-width:185px; background:#111; color:#ddd; border:1px solid #333; border-radius:7px; padding:9px; font:inherit; font-size:12px; }
.directory-card-actions { display:flex; border-top:1px solid #2b2b2b; flex-wrap:wrap; margin-top:auto; }
.directory-action { flex:1; border:0; background:transparent; color:#bbb; padding:14px 12px; text-decoration:none; text-align:center; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.directory-action:hover { background:#1c1c1c; color:#fff; }
.directory-action[aria-pressed=true] { color:#dbebd2; }
.directory-action:disabled { cursor:wait; opacity:.5; }
.directory-edit { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.directory-edit-note { color:#cfb980; font-size:10px; line-height:1.4; font-weight:400; }
.directory-card-actions .directory-release { margin:8px; padding:10px 14px; border-radius:7px; background:#f3f3f3; color:#141414; font-weight:600; }
.directory-card-actions .directory-release:hover { background:#fff; }
.directory-release-current { display:flex; align-items:center; justify-content:center; color:#91a098; white-space:normal; line-height:1.35; cursor:default; }
.directory-discovery { border-top:1px solid #2b2b2b; padding:14px 20px; }
.directory-discovery p { margin:7px 0 0; color:#999; font-size:11px; line-height:1.5; }
.directory-discovery-toggle { display:flex; align-items:center; gap:12px; min-height:32px; width:100%; padding:0; border:0; background:none; color:#ddd; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.directory-discovery-toggle::after { content:''; margin-left:auto; flex-shrink:0; width:34px; height:20px; border:1px solid #666; border-radius:20px; background:radial-gradient(circle at 9px 50%,#ddd 6px,transparent 6.5px) #292929; }
.directory-discovery-toggle[aria-checked=true]::after { border-color:#acd9b6; background:radial-gradient(circle at 25px 50%,#102418 6px,transparent 6.5px) #acd9b6; }
.directory-discovery-toggle:disabled { opacity:.5; cursor:not-allowed; }
.directory-discovery-toggle:focus-visible { outline:2px solid #ddd; outline-offset:4px; border-radius:3px; }
.directory-favorite { position:absolute; top:12px; right:12px; z-index:1; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff40; border-radius:50%; background:#101014d9; color:#fff; cursor:pointer; box-shadow:0 2px 12px #0003; transition:background .15s,color .15s,border-color .15s; }
.directory-favorite svg { display:block; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.directory-favorite:hover { background:#232329; border-color:#ffffff85; }
.directory-favorite[aria-pressed=true] { color:#ff526f; border-color:#ff526f70; }
.directory-favorite[aria-pressed=true] svg { fill:currentColor; }
.directory-favorite:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.directory-favorite:disabled { cursor:wait; opacity:.65; }
@media(prefers-reduced-motion:reduce) { .directory-favorite { transition:none; } }
.directory-relation,.directory-visibility { font-size:12px; line-height:1.5; color:#999; margin:0 0 10px; }
.directory-playing { font-size:12px; color:#b6d8b0; margin:0 0 12px; }
#worldsEmpty { text-align:center; padding:48px 24px; border:1px dashed #333; border-radius:16px; }
#worldsEmpty h2 { color:#ddd; font-size:22px; margin:0 0 12px; }
#worldsEmpty p { max-width:480px; margin:0 auto 24px; line-height:1.65; }
.directory-filter:focus-visible,.directory-action:focus-visible,.directory-admin:focus-visible,.directory-selects select:focus-visible { outline:2px solid #ddd; outline-offset:3px; }
.studio-directory-card .world-card-head h2 { overflow-wrap:anywhere; }
@media(max-width:760px) {
  .directory-context { align-items:flex-start; flex-direction:column; gap:12px; }
  .directory-selects { width:100%; flex-wrap:wrap; }
  .worlds-toolbar .worlds-tabs { width:100%; justify-content:space-between; gap:4px; }
  .worlds-toolbar .worlds-tab { padding:12px; }
  .directory-filter { padding:8px 11px; }
}
.directory-context-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.directory-card-menu{margin-left:auto;flex:none;align-self:center;position:relative;padding:4px 8px}
.directory-card-menu>summary{display:grid;place-items:center;min-width:44px;min-height:44px;list-style:none;cursor:pointer;color:#bbb;font-size:22px;border-radius:6px}
.directory-card-menu>summary::-webkit-details-marker{display:none}
.directory-card-menu>summary:hover,.directory-card-menu[open]>summary{background:#242424;color:#fff}
.directory-card-menu>summary:focus-visible,.directory-delete:focus-visible{outline:2px solid #ddd;outline-offset:2px}
.directory-delete{position:absolute;bottom:calc(100% - 4px);right:8px;z-index:4;min-width:145px;min-height:44px;padding:12px 16px;border:1px solid #4e3333;border-radius:8px;background:#1b1414;color:#ff9696;box-shadow:0 6px 24px #0008;font:12px system-ui,sans-serif;cursor:pointer}
.directory-delete:hover{background:#342020}
.world-trash-row{padding:16px 0;border-bottom:1px solid #ffffff20}
.world-trash-row h3{overflow-wrap:anywhere}

/* Coding client onboarding stays on the Worlds page. */
#worldsRefresh{flex:none;width:auto;white-space:nowrap;line-height:1.4}
.worlds-creation{display:flex;align-items:center;justify-content:flex-end;gap:15px;flex-wrap:wrap;max-width:560px}.worlds-client-support{display:flex;align-items:center;gap:11px;color:#aaa;font-size:12px;flex-wrap:wrap}.worlds-client-support>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.worlds-client-support img{width:20px;height:20px;object-fit:contain}
.client-logo-openai{filter:invert(1)}.client-logo-claude{filter:invert(57%) sepia(52%) saturate(1305%) hue-rotate(331deg) brightness(96%)}
.create-client-dialog{box-sizing:border-box;width:min(780px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:30px 34px;border:1px solid #393939;border-radius:22px;background:#111110;color:#f2f2ef;box-shadow:0 28px 100px #000a;font:14px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:auto;color-scheme:dark}
.create-client-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.create-client-dialog *{box-sizing:border-box}
.create-client-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.create-client-header h2{margin:8px 0 10px;font-size:27px;letter-spacing:-.8px;line-height:1.15}.create-client-header p{margin:0;color:#a5a5a0;line-height:1.6}
.create-client-header .creator-eyebrow{font-size:10px;letter-spacing:2px;color:#9d9d96}
.create-client-close{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #383833;border-radius:50%;background:none;color:#bdbdb7;font-size:25px;cursor:pointer}
.create-client-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:21px 0 6px}.create-client-tools>span{display:flex;align-items:center;gap:9px;border:1px solid #383833;border-radius:30px;padding:8px 14px;font-size:13px}.create-client-tools img{width:23px;height:23px;object-fit:contain}.create-client-tools>.create-client-more{border:0;padding:0;color:#7f7f77;font-size:11px}
.create-client-steps{list-style:none;margin:0;padding:0}.create-client-steps>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:21px 0;border-bottom:1px solid #ffffff12}.create-client-steps>li:last-child{border:0}.create-step-number{display:grid;place-items:center;width:27px;height:27px;border:1px solid #56564e;border-radius:50%;font-size:12px;color:#ccc}
.create-client-steps h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 8px;font-size:16px;font-weight:600}.create-client-steps h3 small{font-weight:400;font-size:10px;color:#bbcaaf;background:#283023;border:1px solid #44533b;border-radius:20px;padding:3px 8px}.create-client-steps p{margin:0;color:#a6a6a0;line-height:1.65;font-size:13px}.create-client-steps strong{color:#e5e5df;font-weight:500}
.create-prompt-box{position:relative;margin-top:12px;background:#1b1b19;border:1px solid #383833;border-radius:10px;overflow:hidden}.create-prompt-box textarea{display:block;width:100%;resize:none;border:0;outline:0;background:transparent;color:#e1e1da;padding:15px 54px 15px 15px;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:86px;overflow:hidden}.create-prompt-box button{position:absolute;top:10px;right:9px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:6px;color:#b1b1aa;background:#292925;cursor:pointer}.create-prompt-box button:hover{color:#fff;background:#3a3a33}.create-prompt-box svg{width:18px;height:18px}
.create-client-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:18px;border-top:1px solid #ffffff16;font-size:11px;line-height:1.6}.create-client-footer p{margin:0;color:#aeb5a6}.create-client-footer a{color:#c1c1b9;white-space:nowrap;text-underline-offset:4px}.create-client-dialog :focus-visible{outline:2px solid #dbe1d4;outline-offset:3px}.create-prompt-box:focus-within{border-color:#909c83}
@media(max-width:640px){.worlds-hero{flex-wrap:wrap}#worldsRefresh{font-size:12px;padding:12px 16px}.create-client-dialog{padding:24px 19px}.create-client-header h2{font-size:23px}.create-client-steps>li{gap:10px}.create-client-footer{align-items:flex-start;flex-direction:column}.create-prompt-box textarea{min-height:116px;font-size:11px}}

.create-install-step h3{font-size:18px}.create-install-box{border-color:#60684f;background:#20221b}.create-install-step .create-connect-note{margin-top:10px;font-size:12px;color:#b4bdaa}.create-example-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.create-example-grid section{min-width:0}.create-example-grid h4{margin:0 0 6px;font-size:14px;font-weight:500;color:#ddd}.create-example-grid .create-prompt-box{margin-top:10px}.create-example-grid textarea{font-size:11px}.create-client-steps .create-member-note{margin-top:14px;font-size:12px;color:#96968c}
@media(max-width:1100px){.worlds-hero{grid-template-columns:1fr}.worlds-creation{justify-content:flex-start;max-width:none}}
@media(max-width:640px){.worlds-creation{gap:12px}.worlds-client-support{font-size:11px;gap:10px}.worlds-client-support img{width:18px;height:18px}.create-example-grid{grid-template-columns:1fr;gap:18px}.create-client-tools{gap:8px}.create-client-tools>span{padding:7px 10px;font-size:12px}.create-prompt-box textarea{min-height:0}}