*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101719;color:#f3f5ef}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,select,input,textarea{border:1px solid #3b494d;border-radius:8px;background:#233034;color:inherit;min-height:44px}button{padding:10px 16px;cursor:pointer}button:hover{background:#34434a}button:disabled{opacity:.4;cursor:default}a{color:inherit}input,select,textarea{padding:10px;width:100%;min-width:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent,#b8f27b);outline-offset:3px}[hidden]{display:none!important}h1,h2,p{margin-top:0}.primary{background:var(--accent,#b8f27b);color:#142012;border:0;font-weight:700}.primary:hover{filter:brightness(1.07);background:var(--accent,#b8f27b)}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:var(--accent,#b8f27b)}
#workspace{min-height:100dvh}#preview-workspace{min-width:0}#casino-shell{--accent:#b8f27b;--background:#101719;--surface:#1b2529;--text:#f3f5ef;background:var(--background);color:var(--text);min-width:0;margin:auto;container-type:inline-size}.site-header{display:flex;align-items:center;gap:24px;min-height:80px;padding:16px 5%;border-bottom:1px solid #ffffff12;background:var(--background)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:17px;letter-spacing:2px;font-weight:850;overflow-wrap:anywhere}.brand-mark{font-size:32px;color:var(--accent)}nav{display:flex;gap:6px;margin-left:24px}nav button{background:transparent;border:0;color:#a2b0b5}.nav-current{color:var(--accent);background:#ffffff08}.demo-badge{font-size:10px;letter-spacing:1.5px;border:1px solid #ffffff2a;border-radius:4px;padding:5px 8px;margin-left:auto;white-space:nowrap}.studio-link{font-size:12px;white-space:nowrap;min-height:44px;display:flex;align-items:center}#lobby{max-width:1600px;margin:auto;padding:32px 5% 0}.hero{border:1px solid #ffffff12;position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;background:linear-gradient(110deg,var(--surface),#31422c);border-radius:20px;padding:44px 5%;min-height:340px}.hero h1{font-size:clamp(32px,4cqw,62px);font-weight:650;line-height:1.08;letter-spacing:-2px;max-width:650px;margin-bottom:18px;overflow-wrap:anywhere}.hero p:not(.eyebrow){color:#c0cdc1;font-size:14px;line-height:1.7}.hero .primary{margin-top:10px;padding:14px 24px}.hero-art{position:relative;height:270px;display:grid;place-items:center}.orb{position:absolute;border:2px solid #b8f27b60;border-radius:50%;transform:rotate(-30deg);box-shadow:inset 0 0 50px #b8f27b18,0 0 50px #b8f27b08}.orb-a{width:230px;height:230px;background:radial-gradient(circle at 30% 30%,#b8f27b55,transparent 60%)}.orb-b{width:340px;height:160px}.orb-c{width:160px;height:340px}.orbit-label{position:relative;color:#d1f7b6;font-weight:850;font-size:38px;line-height:1.1;letter-spacing:-1.5px;transform:rotate(-10deg)}.discovery-bar{display:flex;gap:12px;margin-top:28px}.search-label{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid #ffffff12;border-radius:9px;padding:0 16px;flex:1}.search-label span{font-size:27px;color:#a7b5b8}.search-label input{background:none;border:0;padding-left:0;height:48px}.discovery-bar select{width:190px;background:var(--surface);border-color:#ffffff12}.feed-status{font-size:11px;color:#9ba9ad;margin:12px 0 28px;line-height:1.7}.feed-status.error{color:#ffd399}.collection{margin-bottom:36px;min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-heading h2{font-size:22px;letter-spacing:-.5px;margin:0;overflow-wrap:anywhere}.section-caption{font-size:11px;color:#9ba9ad;flex-shrink:0}.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.game-card{background:none;border:0;border-radius:12px;padding:0;text-align:left;min-width:0;display:flex;flex-direction:column;position:relative}.game-card:hover{background:none;transform:translateY(-3px)}.card-art{aspect-ratio:1.18;width:100%;border-radius:12px;background:var(--surface);display:grid;place-items:center;overflow:hidden;position:relative}.card-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.art-fallback{font-size:32px;color:var(--accent);font-weight:800;letter-spacing:3px}.play-chip{position:absolute;right:10px;bottom:10px;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#101719a0;color:white;font-size:12px;opacity:0}.game-card:hover .play-chip,.game-card:focus-visible .play-chip{opacity:1}.card-title{font-size:14px;line-height:1.35;font-weight:650;margin:10px 0 4px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-provider{font-size:11px;color:#9ba9ad}.provider-group h3{font-size:13px;letter-spacing:1px;color:var(--accent);margin:22px 0 12px}.empty-state{border:1px dashed #ffffff2a;border-radius:12px;padding:28px;color:#a7b5b8;font-size:14px}.skeleton{height:160px;background:linear-gradient(100deg,var(--surface),#354045,var(--surface));border-radius:12px;opacity:.7}footer{border-top:1px solid #ffffff12;margin-top:50px;padding:28px 0;color:#8a999e;font-size:11px;line-height:1.8}.brand-mini{font-size:13px;letter-spacing:2px;color:var(--text);display:block;margin-bottom:14px}
#play-room{height:calc(100dvh - 80px);min-height:280px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:12px 4%;}#game-host{min-width:0;min-height:0;border-radius:12px;overflow:hidden}.play-toolbar{display:flex;align-items:center;gap:12px}.play-toolbar strong{margin-right:auto;font-size:14px;overflow-wrap:anywhere;min-width:0}.play-toolbar select{width:190px}.game-advice{font-size:11px;color:#9ba9ad;display:flex;justify-content:space-between;gap:8px;padding-bottom:8px}.focused .site-header{display:none}.focused #play-room{height:100dvh}
body.editing #workspace{display:grid;grid-template-columns:310px minmax(0,1fr);height:100dvh;overflow:hidden}#editor{background:#151e21;border-right:1px solid #39464b;padding:22px 18px;overflow:auto;font-size:12px}#editor h1{font-size:22px;letter-spacing:-.7px;margin:8px 0}#editor h2{font-size:15px;margin:24px 0 10px}#editor p{color:#9caeb5;line-height:1.6}#editor label{display:block;margin:12px 0 8px;color:#b8c5cb;font-size:11px}#editor label input,#editor label select{margin-top:6px;font-size:12px}#editor button{font-size:11px;padding:8px 11px}.editor-actions{display:flex;gap:6px;flex-wrap:wrap}#editor-message{min-height:36px;margin:10px 0;color:#b8f27b!important}#editor-message.error{color:#ffc5a8!important}.layer{display:flex;align-items:center;gap:4px;margin:7px 0;border:1px solid #3b494d;border-radius:8px;padding:4px}.layer.selected{border-color:#b8f27b}.layer .select-layer{flex:1;text-align:left;border:0;background:transparent;overflow-wrap:anywhere}.layer .move-layer{padding:5px;min-width:34px}.hint{font-size:11px}fieldset{border:1px solid #3b494d;border-radius:10px;margin:18px 0;padding:10px}legend{font-size:12px}details{margin:18px 0;border-top:1px solid #3b494d;padding-top:14px}summary{cursor:pointer;min-height:30px}.sim-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}#layout-json{font-size:10px;margin:8px 0;resize:vertical}#preview-toolbar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#1a2428;font-size:11px;letter-spacing:1px;border-bottom:1px solid #3b494d;height:68px}#preview-toolbar select{width:auto;max-width:70%;font-size:12px}body.editing #preview-workspace{display:grid;grid-template-rows:auto minmax(0,1fr)}body.editing #preview-scroller{overflow:auto;background:#091013;padding:24px}body.editing #casino-shell{width:100%;min-height:100%;box-shadow:0 12px 80px #0008}body.editing #casino-shell.fixed-preview{overflow:auto;min-height:0}body.editing #casino-shell.fixed-preview #play-room{height:calc(var(--preview-height) - 80px)}body.editing #casino-shell.fixed-preview.focused #play-room{height:var(--preview-height)}body.editing #casino-shell:not(.fixed-preview) #play-room{height:calc(100dvh - 200px)}body.editing #casino-shell:not(.fixed-preview).focused #play-room{height:calc(100dvh - 120px)}.editing .collection{cursor:default}.editing .collection.selected-block{outline:2px dashed var(--accent);outline-offset:8px;border-radius:4px}
@container (max-width:1050px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{min-height:300px}.hero-art{transform:scale(.8)}.site-header{gap:12px}nav{margin-left:5px}.studio-link{display:none}}
@container (max-width:700px){.site-header{min-height:72px;padding:12px 5%;flex-wrap:wrap;gap:10px}.brand{font-size:14px;letter-spacing:1px;max-width:65%}.brand-mark{font-size:28px}.demo-badge{font-size:9px}nav{order:3;width:100%;margin:0}nav button{min-height:44px;padding:8px 12px}#lobby{padding-top:18px}.hero{grid-template-columns:1fr;padding:28px 24px;min-height:300px}.hero h1{max-width:90%;font-size:38px;position:relative;z-index:1}.hero .eyebrow{max-width:75%;line-height:1.8;font-size:9px}.hero-art{position:absolute;right:-95px;top:40px;opacity:.22;transform:scale(.7)}.hero p,.hero button{position:relative;z-index:1}.hero p:not(.eyebrow){max-width:80%}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.section-heading h2{font-size:20px}.section-caption{font-size:10px;max-width:130px;text-align:right}.discovery-bar{flex-wrap:wrap;margin-top:18px}.discovery-bar select{width:100%}.search-label{flex-basis:100%}.card-title{font-size:13px}.card-provider{font-size:10px}.play-toolbar{flex-wrap:wrap}.play-toolbar strong{max-width:calc(100% - 90px)}.play-toolbar select{width:auto;flex:1}.game-advice{flex-direction:column;font-size:10px}#play-room{height:calc(100dvh - 128px);padding:10px 4%}body.editing #casino-shell.fixed-preview #play-room{height:calc(var(--preview-height) - 128px)}}
@container (max-width:450px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:34px;letter-spacing:-1px}.section-heading{align-items:flex-start}.feed-status{font-size:10px}.hero{min-height:290px}}
@media(max-width:850px){body.editing #workspace{grid-template-columns:250px minmax(0,1fr)}#editor{padding:18px 12px}body.editing #preview-scroller{padding:12px}#preview-size{display:none}}
@media(max-width:600px){body.editing #workspace{display:block;height:auto;overflow:visible}#editor{max-height:50dvh;border-bottom:1px solid #3b494d}body.editing #preview-workspace{height:90dvh}#preview-toolbar{padding:8px 12px;gap:8px}body.editing #preview-scroller{padding:8px}}
@media(prefers-reduced-motion:reduce){.game-card:hover{transform:none}}
/* Play mode subtracts the actual header track, including wrapped long branding.
   No guessed casino-header height participates in game allocation. */
#casino-shell.playing{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:0}
#casino-shell.playing #play-room{grid-row:2;height:auto;min-height:0}
body.editing #casino-shell.playing:not(.fixed-preview){height:calc(100dvh - 116px);min-height:0}
body.editing #casino-shell.playing.fixed-preview{min-height:0}
body.editing #casino-shell.playing #play-room{height:auto}
.card-provider,.section-caption{font-size:11px}
#editor .layer .move-layer{min-width:44px}
#editor summary{min-height:44px}
.release-badge{font-size:10px;color:var(--accent);margin-top:5px;line-height:1.5}

@container (max-width:700px){.playing #play-room{padding-left:0;padding-right:0}.playing .play-toolbar,.playing .game-advice{padding-left:12px;padding-right:12px}.playing #game-host{border-radius:0}}

.brand-logo{display:block;width:40px;height:40px;object-fit:contain}#editor input[type=color]{width:100%;height:44px;padding:4px}#editor input[type=file]{max-width:100%;font-size:12px}nav button{overflow-wrap:anywhere}


nav{flex-wrap:wrap;min-width:0}nav button{max-width:100%;min-width:44px}.brand{min-width:0}.brand-mark{flex-shrink:0}.site-header .brand{overflow-wrap:anywhere}input,select{min-height:44px}


#casino-shell .hero{background:var(--surface)}#casino-shell .hero p,#casino-shell .card-provider,#casino-shell .section-caption,#casino-shell .feed-status,#casino-shell nav button,#casino-shell .game-advice,#casino-shell footer{color:var(--text)}#casino-shell .primary{color:#101719}


#casino-shell button,#casino-shell select{background:var(--surface);color:var(--text)}#casino-shell .primary{background:var(--accent);color:#101719}#casino-shell .game-card,#casino-shell nav button{background:transparent}#casino-shell .search-label input{color:var(--text)}


#casino-shell input::placeholder{color:var(--text);opacity:1}