@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,700&display=swap');

:root { --ink:#171715; --paper:#f3f0e8; --cream:#e8e1d4; --acid:#d9ff43; --purple:#7257ff; --red:#e24d35; --line:rgba(23,23,21,.15); }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
body { margin:0; min-height:100vh; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:72px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(243,240,232,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.brand { color:var(--ink); text-decoration:none; font-size:18px; font-weight:800; letter-spacing:-.04em; }
.brand span { color:var(--purple); }
.nav-user { display:flex; align-items:center; gap:20px; font-size:13px; font-weight:600; }
.nav-user form { margin:0; }
.nav-link { color:var(--ink); text-decoration:none; opacity:.68; }
.nav-link:hover,.nav-link.active { opacity:1; text-decoration:underline; text-underline-offset:5px; }
.link-button,.danger-link { border:0; padding:0; background:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.danger-link { color:var(--red); }
.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:700; margin:0 0 18px; }
.eyebrow.dark { color:#68665f; }
.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ink); padding:14px 20px; cursor:pointer; text-decoration:none; font-weight:700; transition:.18s ease; }
.primary { background:var(--ink); color:white; box-shadow:4px 4px 0 var(--acid); }
.primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--acid); }
.secondary { background:transparent; color:var(--ink); }
.secondary:hover { background:var(--ink); color:white; }
.full { width:100%; justify-content:space-between; }
.muted { color:#716e66; line-height:1.6; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr); }
.login-art { position:relative; overflow:hidden; min-height:680px; background:#1d1c1a; color:white; padding:8vw; display:flex; align-items:center; }
.noise { position:absolute; inset:0; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.art-copy { position:relative; z-index:2; max-width:660px; }
.art-copy h1 { font-size:clamp(60px,7vw,110px); line-height:.84; letter-spacing:-.075em; margin:0 0 38px; }
.art-copy em,.hero em { font-family:'Playfair Display',serif; font-weight:700; color:var(--acid); }
.art-copy p:last-child { max-width:420px; color:#c4c0b8; line-height:1.7; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); }
.orb-one { width:360px;height:360px;background:var(--purple);right:-120px;top:-120px; }
.orb-two { width:160px;height:160px;background:var(--acid);right:12%;bottom:-70px; }
.login-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px; background:var(--paper); position:relative; }
.login-form { width:min(100%,420px); }
.mini-logo { width:48px;height:48px;display:grid;place-items:center;background:var(--purple);color:white;font-weight:800;margin-bottom:52px;transform:rotate(-4deg); }
.login-form h2 { font-size:38px; letter-spacing:-.05em; margin:0 0 10px; }
label { display:grid; gap:8px; font-size:13px; font-weight:700; margin:22px 0; }
input,textarea { width:100%; border:1px solid #aaa69c; background:#faf8f2; padding:14px; outline:none; border-radius:0; }
input:focus,textarea:focus { border-color:var(--purple); box-shadow:0 0 0 2px rgba(114,87,255,.18); }
.alert,.notice { padding:13px 16px; background:#ffe0d9; border-left:4px solid var(--red); margin:20px 0; font-size:14px; }
.login-foot { position:absolute; bottom:28px; font-size:9px; letter-spacing:.2em; color:#99958d; }
.page { max-width:1440px; margin:auto; padding:0 clamp(20px,4vw,64px) 80px; }
.hero { min-height:360px; padding:70px 0 52px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--ink); }
.hero h1 { margin:0; font-size:clamp(52px,7vw,98px); line-height:.89; letter-spacing:-.075em; }
.hero em { color:var(--purple); }
.hero-copy { color:#66635c; max-width:440px; margin:25px 0 0; }
.library-head { display:flex; align-items:center; justify-content:space-between; padding:32px 0 22px; }
.library-head h2 { font-size:24px; margin:0; }
.library-head span { font-size:10px; letter-spacing:.15em; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.game-card { border:1px solid var(--ink); background:#faf8f2; }
.game-visual { height:230px; background:var(--purple); color:white; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; text-decoration:none; }
.game-card:nth-child(3n+2) .game-visual { background:#eb6c43; }
.game-card:nth-child(3n+3) .game-visual { background:#278e83; }
.html-card .game-visual { background:#171715; }
.html-card:nth-child(3n+2) .game-visual { background:#7257ff; }
.html-card:nth-child(3n+3) .game-visual { background:#b24fe1; }
.game-mark { font-size:96px; font-weight:800; opacity:.19; letter-spacing:-.1em; transform:rotate(-8deg); }
.play-pill { position:absolute; bottom:18px; right:18px; background:var(--acid); color:var(--ink); padding:9px 13px; font-size:11px; font-weight:800; transform:translateY(60px); transition:.2s; }
.game-visual:hover .play-pill { transform:translateY(0); }
.game-info { padding:20px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; }
.game-info h3 { font-size:22px; margin:0 0 6px; letter-spacing:-.03em; }
.game-info p { color:#6b685f; font-size:13px; line-height:1.5; margin:0; }
.game-meta { display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.06em; border-top:1px solid var(--line); padding-top:15px; margin-top:22px; }
.game-meta form { margin-left:auto; }
.empty { grid-column:1/-1; text-align:center; border:1px dashed #8a877e; padding:80px 20px; }
.empty>span { color:var(--purple); font-size:42px; }
.empty h3 { font-size:28px; margin:12px 0 4px; }
.empty p { color:#6b685f; margin:0 0 24px; }
dialog { width:min(580px,calc(100% - 30px)); border:1px solid var(--ink); padding:0; background:var(--paper); box-shadow:12px 12px 0 var(--purple); }
dialog::backdrop { background:rgba(17,17,15,.7); backdrop-filter:blur(4px); }
.upload-form { padding:34px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; }
.dialog-head h2 { font-size:34px; margin:0; letter-spacing:-.04em; }
.dialog-close { font-size:34px; border:0; background:none; cursor:pointer; line-height:.7; }
.dropzone { border:1px dashed #87837a; padding:26px; text-align:center; place-items:center; cursor:pointer; background:#ebe7dd; }
.dropzone input { display:none; }
.drop-icon { font-size:34px; }
.dropzone small { color:#706d65; font-weight:400; }
.dropzone b { margin-top:8px; text-decoration:underline; }
.upload-status { text-align:center; font-size:12px; color:#6b685f; }
.play-page { height:calc(100vh - 72px); padding:22px clamp(20px,3vw,45px) 32px; display:flex; flex-direction:column; }
.play-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
.play-head h1 { margin:5px 0 0; font-size:30px; }
.back { color:#66635c; font-size:12px; }
.game-frame-wrap { background:#111; border:1px solid var(--ink); flex:1; min-height:0; }
.game-frame-wrap iframe { width:100%; height:100%; border:0; display:block; }
.error-page { min-height:100vh; display:grid; place-content:center; text-align:center; padding:30px; }
.error-page h1 { font-size:clamp(42px,7vw,80px); max-width:800px; letter-spacing:-.06em; }
.error-page .primary { margin:auto; }
@media (max-width:900px) { .login-shell{grid-template-columns:1fr}.login-art{display:none}.login-panel{min-height:100vh;padding:35px}.game-grid{grid-template-columns:repeat(2,1fr)}.hero{align-items:flex-start;flex-direction:column;gap:35px}.hero .primary{align-self:flex-end} }
@media (max-width:600px) { .topbar{padding:0 16px}.nav-user{gap:12px}.game-grid{grid-template-columns:1fr}.game-visual{height:210px}.hero{min-height:330px;padding-top:50px}.nav-name{display:none}.play-head{align-items:center}.play-head h1{font-size:20px}.login-foot{display:none} }