/* The dev kit pages: game.html (a developer's game, full screen under a thin GrowBlocks bar) and developers-kit.html (the
   developer portal: upload, test, submit, earnings). */
:root{--dk-bg:#0e1020;--dk-panel:#171a33;--dk-line:#2f3160;--dk-ink:#f4f1ff;--dk-dim:#a9a6c9;--dk-accent:#9d93ff;--dk-hot:#ff5fa2;--dk-ok:#5ff0a8;--dk-warn:#ffd23a;--dk-radius:14px}
@font-face{font-family:Nunito;src:url(assets/ui-fonts/Nunito.ttf) format('truetype');font-weight:200 1000;font-display:swap}
/* Classes like .dk-btn and .dk-card set display, which beats the hidden attribute: without this a hidden button still shows. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;background:var(--dk-bg);color:var(--dk-ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--dk-accent)}
.dk-btn{appearance:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--dk-line);background:#22254a;color:var(--dk-ink);border-radius:10px;padding:8px 14px;font:600 14px system-ui;cursor:pointer;min-height:40px}
.dk-btn:hover{border-color:var(--dk-accent)}
.dk-btn:disabled{opacity:.5;cursor:default}
.dk-primary{background:var(--dk-accent);border-color:var(--dk-accent);color:#120f2a}
.dk-danger{border-color:#ff6b8a;color:#ffb3c2}

/* ---- game.html ---- */
body.dk-play{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.dk-bar{display:flex;align-items:center;gap:12px;padding:6px 12px;background:#152350;border-bottom:1px solid var(--dk-line);min-height:52px}
.dk-back{color:var(--dk-ink);text-decoration:none;font-weight:700;white-space:nowrap;display:flex;align-items:center;flex:none}
/* The brand kit (assets/ui-launch): the colour lockup on navy at 180px or more, the cube alone at 24px or more. */
.dk-lockup{width:180px;height:auto;display:block}
.dk-cube{width:32px;height:32px;display:none}
.dk-built{position:absolute;right:10px;bottom:10px;z-index:5;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:99px;background:#152350e6;border:1px solid #2c4a8f;color:#f5f2df;font:800 12px/1 Nunito,system-ui,sans-serif;text-decoration:none;letter-spacing:.01em}
.dk-built img{width:24px;height:24px;display:block}
.dk-built:hover{border-color:#baff38}
.dk-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-decoration:none}
.dk-brand img{width:200px;height:auto;display:block}
.dk-brand span{font:800 12px system-ui;letter-spacing:.14em;padding:4px 10px;border-radius:99px;background:#baff38;color:#152350}
.dk-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dk-title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-title small{color:var(--dk-dim)}
.dk-logo{width:30px;height:30px;border-radius:8px;object-fit:cover}
.dk-badge{font:800 11px system-ui;letter-spacing:.1em;padding:3px 8px;border-radius:99px;background:var(--dk-warn);color:#231b00}
.dk-stage{position:relative;min-height:0;flex:1}
.dk-warning{margin:0;padding:6px 12px;font:600 12px/1.35 system-ui;background:var(--dk-warn);color:#231b00;text-align:center}
.dk-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0e1020}
.dk-note{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:var(--dk-dim)}
.dk-sheet{position:fixed;inset:0;background:#05061088;display:grid;place-items:center;padding:16px;z-index:50}
.dk-sheet[hidden]{display:none}
.dk-sheet-box{max-width:420px;width:100%;background:var(--dk-panel);border:1px solid var(--dk-accent);border-radius:var(--dk-radius);padding:20px;display:grid;gap:10px}
.dk-sheet-box h3{margin:0}
.dk-sheet-box p{margin:0;color:var(--dk-dim)}
.dk-sheet-box small{color:var(--dk-dim);font-size:12px}
@media (max-width:560px){.dk-lockup{display:none}.dk-cube{display:block}.dk-title small{display:none}.dk-built{font-size:11px;right:6px;bottom:6px}}

/* ---- the developer portal ---- */
.dk-portal{max-width:1080px;margin:0 auto;padding:24px 16px 80px}
.dk-hero{display:grid;gap:10px;padding:24px 0 8px}
.dk-hero h1{margin:0;font-size:clamp(30px,5vw,52px);line-height:1.05}
.dk-hero p{margin:0;color:var(--dk-dim);max-width:720px}
.dk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.dk-card{background:var(--dk-panel);border:1px solid var(--dk-line);border-radius:var(--dk-radius);padding:16px;display:grid;gap:8px;align-content:start;min-width:0}
.dk-card h2,.dk-card h3{margin:0}
.dk-card p{margin:0;color:var(--dk-dim)}
.dk-step{color:var(--dk-accent);font:800 12px/1 Nunito,system-ui,sans-serif;letter-spacing:.08em}
.dk-steps .dk-card{border-color:var(--dk-accent)}
.dk-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dk-field{display:grid;gap:4px}
.dk-field span{font-size:13px;color:var(--dk-dim)}
.dk-field input,.dk-field textarea,.dk-field select{background:#0f1126;border:1px solid var(--dk-line);border-radius:10px;color:var(--dk-ink);padding:9px 11px;font:15px system-ui;width:100%}
.dk-status{font:800 11px system-ui;letter-spacing:.08em;padding:3px 8px;border-radius:99px;background:#2a2d55;color:var(--dk-dim);justify-self:start}
.dk-status[data-s="live"]{background:#123d2c;color:var(--dk-ok)}
.dk-status[data-s="review"]{background:#3d3412;color:var(--dk-warn)}
.dk-status[data-s="rejected"],.dk-status[data-s="suspended"]{background:#3d1220;color:#ff9fb4}
.dk-log{font:12px/1.5 ui-monospace,Consolas,monospace;background:#0a0b18;border:1px solid var(--dk-line);border-radius:10px;padding:10px;max-height:220px;overflow:auto;white-space:pre-wrap;color:var(--dk-dim)}
.dk-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dk-money div{background:#0f1126;border:1px solid var(--dk-line);border-radius:12px;padding:12px}
.dk-money b{display:block;font-size:22px}
.dk-money small{color:var(--dk-dim)}
.dk-code{font:13px/1.55 ui-monospace,Consolas,monospace;background:#0a0b18;border:1px solid var(--dk-line);border-radius:12px;padding:14px;overflow:auto;white-space:pre;color:#d9d5ff}
.dk-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dk-game{display:grid;gap:8px;text-decoration:none;color:inherit;background:var(--dk-panel);border:1px solid var(--dk-line);border-radius:var(--dk-radius);padding:14px}
.dk-game:hover{border-color:var(--dk-accent)}
.dk-game img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#22254a}
.dk-game small{color:var(--dk-dim)}

/* ---- games.html: the live games, for players ---- */
body.gp{min-height:100dvh;display:flex;flex-direction:column;background:#0e1020 radial-gradient(1200px 500px at 50% -120px,#1d2d66 0%,transparent 70%) no-repeat}
.gp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;max-width:1180px;width:100%;margin:0 auto}
.gp-home img{width:170px;height:auto;display:block}
.gp-bar nav{display:flex;gap:6px;align-items:center}
.gp-bar nav a{color:var(--dk-ink);text-decoration:none;font:700 14px Nunito,system-ui,sans-serif;padding:8px 12px;border-radius:99px}
.gp-bar nav a:hover{background:#ffffff14}
.gp-bar nav .gp-dev{background:#baff38;color:#152350}
.gp-bar nav .gp-dev:hover{background:#d2ff7a}
.gp-main{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:12px 16px 48px}
.gp-hero{padding:28px 0 26px;max-width:680px}
.gp-tag{display:inline-block;font:800 12px system-ui;letter-spacing:.14em;padding:4px 10px;border-radius:99px;background:#baff38;color:#152350}
.gp-hero h1{font:900 clamp(32px,6vw,54px)/1.02 Nunito,system-ui,sans-serif;margin:14px 0 10px;color:#f5f2df;letter-spacing:-.01em}
.gp-hero p{margin:0;color:var(--dk-dim);font-size:16px;max-width:560px}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gp-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--dk-panel);border:1px solid var(--dk-line);border-radius:18px;overflow:hidden;transition:transform .15s,border-color .15s}
.gp-card:hover,.gp-card:focus-visible{border-color:#baff38;transform:translateY(-2px);outline:none}
.gp-art{aspect-ratio:1/1;background:#152350;display:grid;place-items:center}
.gp-art img{width:100%;height:100%;object-fit:cover;display:block}
.gp-initial{font:900 88px Nunito,system-ui,sans-serif;color:#baff38}
.gp-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.gp-body h2{margin:0;font:900 22px/1.15 Nunito,system-ui,sans-serif;color:#f5f2df}
.gp-by{margin:0;color:var(--dk-dim);font-size:13px}
.gp-line{margin:6px 0 0;font-size:14px;color:#d8d5f0}
.gp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;font-size:13px;color:var(--dk-dim)}
.gp-play{font:800 15px Nunito,system-ui,sans-serif;background:#baff38;color:#152350;border-radius:99px;padding:8px 18px}
.gp-yours{border-style:dashed;background:transparent;min-height:220px}
.gp-yours .gp-body{justify-content:center}
.gp-yours .gp-play{background:#22254a;color:var(--dk-ink);border:1px solid var(--dk-line)}
.gp-yours .gp-meta{justify-content:flex-start}
.gp-skeleton{min-height:360px;background:linear-gradient(90deg,#171a33,#1f2345,#171a33);background-size:200% 100%}
.gp-empty{grid-column:1/-1;margin:0;color:var(--dk-dim)}
.gp-foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;padding:22px 16px;border-top:1px solid var(--dk-line);font-size:13px}
.gp-foot a{color:var(--dk-dim);text-decoration:none}
.gp-foot a:hover{color:var(--dk-ink)}
@media (max-width:520px){.gp-home img{width:130px}.gp-bar nav a{padding:7px 10px;font-size:13px}.gp-hero{padding-top:16px}.gp-grid{grid-template-columns:1fr}}
.dk-coin{border:1px solid var(--dk-line);border-radius:10px;padding:8px 12px;margin:8px 0}
.dk-coin summary{cursor:pointer;font-weight:700}
.dk-coin input{background:#0e1020;border:1px solid var(--dk-line);border-radius:8px;color:var(--dk-ink);padding:8px 10px;font:inherit;min-width:0;flex:1}