/* Base */
:root{
  --bg:#0b0b0b;
  --surface:#070708;
  --card:#0f0f12;
  --text:#e8eef6;
  --muted:#9aa3b2;
  --accent:#a855f7;
  --accent-soft:rgba(168,85,247,0.14);
  --border:#111418;
  --success:#2e7d32;
  --danger:#e53935;
}
html[data-theme="light"]{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --card:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#8b5cf6;
  --accent-soft:rgba(139,92,246,0.14);
  --border:#d1d5db;
  --success:#166534;
  --danger:#b91c1c;
}
*{box-sizing:border-box}
body{font-family:Segoe UI,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);margin:0;padding:0}
a{color:inherit}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;background:color-mix(in srgb,var(--surface) 92%,var(--accent) 8%);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{font-weight:800;font-size:18px;color:var(--text);text-decoration:none}
.brand-lockup{display:inline-flex;align-items:center;gap:10px;min-width:0}
.brand-lockup img{width:34px;height:34px;border-radius:10px;box-shadow:0 8px 24px rgba(168,85,247,0.28)}
.brand-lockup span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .search{flex:1;margin:0 18px}
.topbar .search form{display:flex;gap:8px}
.search{position:relative}
.search-suggestions{position:absolute;left:0;right:0;top:calc(100% + 8px);display:grid;gap:4px;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,0.28);z-index:20}
.search-suggestion{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;text-decoration:none}
.search-suggestion:hover,.search-suggestion:focus{background:var(--accent-soft);outline:none}
.search-suggestion-thumb{width:38px;height:38px;border-radius:8px;background:var(--card) center/cover no-repeat;border:1px solid var(--border);flex:0 0 auto}
.search-suggestion-copy{display:grid;gap:2px;min-width:0}
.search-suggestion-copy strong,.search-suggestion-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggestion-copy span{color:var(--muted);font-size:12px}
.topbar input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.topbar button{margin-left:8px;padding:8px 12px;border-radius:8px;border:none;background:var(--accent);color:#fff}
.topbar .actions .btn{background:var(--accent);padding:8px 12px;border-radius:8px;color:#fff;text-decoration:none}
.topbar .actions .btn.secondary{background:var(--border);color:var(--text);border:1px solid var(--border)}
.topbar .actions .theme-toggle{background:transparent;color:var(--text);border:1px solid var(--border);padding:8px 12px;margin-left:8px;border-radius:8px;cursor:pointer}
.topbar .actions .install-app-button,.install-app-button{background:var(--success);color:#fff;border:1px solid color-mix(in srgb,var(--success) 85%,#fff 15%);padding:8px 12px;border-radius:8px;cursor:pointer}
.install-app-button[hidden]{display:none!important}
.install-app-button:disabled{opacity:.68;cursor:wait}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline-form{display:inline}
.inline-form button{margin-left:0}
.file-upload{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;background:var(--border);color:var(--text);border:1px solid var(--border);cursor:pointer}
.file-upload input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.profile-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;max-width:220px}
.profile-avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--accent);color:#f8fafc;font-weight:800;font-size:14px;flex:0 0 auto}
.profile-avatar.large{width:54px;height:54px;font-size:22px}
.profile-avatar-img{display:block;width:30px;height:30px;border-radius:999px;object-fit:cover;background:var(--surface);border:1px solid var(--border);flex:0 0 auto}
.profile-avatar-img.large{width:54px;height:54px}
.profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}

/* Hero */
.hero{padding:36px 20px;text-align:center;background:linear-gradient(90deg, rgba(168,85,247,0.10), transparent)}
.hero h1{margin:0;font-size:28px}
.hero p{margin:8px 0 0;color:var(--muted)}

/* Main grid */
main{padding:20px}
.empty{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:18px}
.card{background:var(--card);padding:14px;border-radius:10px;border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:12px;background:var(--surface)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.card h3{margin:0;font-size:16px}
.muted{color:var(--muted)}
.desc{margin:8px 0;color:var(--muted);font-size:13px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--accent-soft);color:var(--accent);padding:4px 8px;border-radius:999px;font-size:12px}
.card-actions{margin-top:12px}
.card .view{display:inline-block;padding:8px 12px;background:var(--success);color:#fff;border-radius:8px;text-decoration:none}
.card:hover{transform:translateY(-4px);transition:all 0.16s ease}
.people-results{margin:0 0 20px}
.people-results h2{font-size:18px;margin:0 0 10px}
.people-list{display:flex;gap:10px;flex-wrap:wrap}
.person-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.person-pill span:last-child{display:grid;gap:1px}
.person-pill small{color:var(--muted);font-size:12px}
.rating-summary{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:13px}
.rating-summary strong{color:var(--text)}
.rating-stars{color:#f5b301;font-weight:900}

/* Upload & view pages */
.upload-main,.view-main{max-width:980px;margin:24px auto;padding:0 18px}
.upload-form{background:var(--card);padding:16px;border-radius:10px;border:1px solid var(--border)}
.upload-form label{display:block;margin-bottom:10px}
.upload-form input,.upload-form textarea,.upload-form select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.upload-form textarea{min-height:110px;resize:vertical}
button, .upload-form button{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;border:none}
button.danger{background:var(--danger)}

.view-header{max-width:980px;margin:14px auto;padding:0 18px}
.rating-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.rating-panel > div{display:flex;align-items:center;gap:7px}
.rating-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rating-form label{font-size:13px;color:var(--muted)}
.rating-form select{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.game-toolbar{max-width:980px;margin:8px auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.iframe-wrap{max-width:980px;margin:8px auto}
.iframe-wrap iframe{width:100%;height:min(80vh,760px);border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.installer-panel{max-width:980px;margin:8px auto 18px;display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.installer-panel h2{margin:0 0 6px;font-size:20px}
.installer-icon{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--surface);border:1px solid var(--border)}
.game-control-overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:9999;text-align:center;font-weight:900;font-size:clamp(38px,12vw,120px);letter-spacing:0;color:#fff;pointer-events:none}
.game-control-kick{background:rgba(0,0,0,0.86)}
.game-control-jumpscare{background:#d90429;animation:jumpscare-pop 0.12s steps(2,end) infinite}
.game-control-freeze{background:rgba(120,190,255,0.32);backdrop-filter:blur(8px);color:#eff6ff;text-shadow:0 4px 20px rgba(0,0,0,0.5)}
.game-control-fly{animation:game-fly 5s ease-in-out}
@keyframes jumpscare-pop{0%{transform:scale(1)}100%{transform:scale(1.08) rotate(-2deg)}}
@keyframes game-fly{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-60px) rotate(-2deg)}70%{transform:translateY(22px) rotate(2deg)}}
.btn.small{padding:6px 10px;font-size:13px}
button.small{padding:6px 10px;font-size:13px}
.comments-panel{max-width:980px;margin:20px auto 0;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.comments-panel h2{margin:0 0 12px;font-size:20px}
.comment-form{display:grid;gap:8px;margin-bottom:16px}
.comment-form label{font-size:13px;color:var(--muted)}
.comment-form textarea{width:100%;min-height:90px;resize:vertical;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.comment-form button{justify-self:start}
.comments-list{display:grid;gap:10px}
.comment{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.comment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.comment-author{display:flex;align-items:center;gap:8px;min-width:0}
.comment-author span:last-child{display:grid;gap:1px}
.comment-author small{color:var(--muted);font-size:12px}
.comment p{margin:10px 0 0;line-height:1.5;overflow-wrap:anywhere}

.auth-main{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at top left, var(--accent-soft), transparent 34%),var(--bg)}
.auth-shell{width:min(1040px,100%);display:grid;grid-template-columns:minmax(260px,0.9fr) minmax(320px,1.1fr);gap:28px;align-items:start}
.auth-intro{padding:28px 4px}
.auth-brand{color:var(--accent);font-weight:800;text-decoration:none;margin-bottom:28px}
.auth-intro h1{font-size:clamp(34px,5vw,56px);line-height:1.02;margin:0 0 18px;max-width:10ch}
.auth-intro p{color:var(--muted);font-size:17px;line-height:1.6;max-width:48ch}
.guest-link,.google-link{display:inline-block;margin-top:12px;color:var(--text);text-decoration:none;border:1px solid var(--border);border-radius:8px;padding:10px 14px;background:var(--surface)}
.auth-panel{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:18px}
.auth-panel h2{font-size:20px;margin:0 0 4px}
.auth-forms{display:grid;gap:14px;text-align:left}
.auth-form{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px}
.auth-form-soft{background:transparent}
.form-note{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.45}
.auth-form label{display:block;margin-bottom:12px;color:var(--muted);font-size:13px}
.auth-form input{width:100%;margin-top:5px;padding:11px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit;box-sizing:border-box}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.auth-form button{width:100%;cursor:pointer}
.auth-form .check-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--text)}
.auth-form .check-row input{width:auto;margin-top:2px}
.flashes{background:var(--accent-soft);border:1px solid var(--border);border-radius:8px;padding:12px 16px;color:var(--text)}
.notice{background:var(--accent-soft);border:1px solid var(--border);border-radius:8px;padding:10px 12px}

.legal-main{max-width:860px;margin:28px auto;padding:0 18px;line-height:1.6}
.legal-main h1{margin-bottom:4px}
.legal-main h2{margin-top:24px;font-size:20px}
.legal-main a, footer a, .auth-form a{color:var(--accent)}

.banned-body{min-height:100vh;background:#7f0000;color:#fff}
.banned-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#ef4444 0,#991b1b 42%,#450a0a 100%)}
.banned-panel{width:min(640px,100%);padding:28px;border:2px solid rgba(255,255,255,0.35);border-radius:8px;background:rgba(69,10,10,0.88);box-shadow:0 24px 80px rgba(0,0,0,0.4);text-align:center}
.banned-kicker{margin:0 0 8px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;color:#fecaca}
.banned-panel h1{margin:0;font-size:clamp(38px,8vw,72px);line-height:1}
.banned-panel p{font-size:17px;line-height:1.55}
.banned-info{margin:22px 0;text-align:left;border:1px solid rgba(255,255,255,0.3);border-radius:8px;background:rgba(0,0,0,0.22)}
.banned-info summary{padding:14px 16px;cursor:pointer;font-weight:800;text-align:center}
.banned-info div{padding:0 16px 16px}
.banned-info h2{margin:14px 0 4px;font-size:15px;color:#fecaca}
.banned-info p{margin:0;overflow-wrap:anywhere}
.banned-panel button{background:#fff;color:#991b1b;font-weight:800}

.account-main{max-width:720px;margin:28px auto;padding:0 18px}
.account-panel{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:18px}
.friend-message-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:10px}
.friend-message-form input{min-width:0;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.message-status{grid-column:1/-1;min-height:1.2em;color:var(--muted);font-size:13px}
.profile-form{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px}
.profile-form h2{margin:0 0 8px;font-size:20px}
.profile-preview{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.profile-preview div{display:grid;gap:2px}
.profile-preview span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.profile-form label{display:block;margin:14px 0;color:var(--muted);font-size:13px}
.profile-form input,.profile-form textarea{width:100%;margin-top:6px;padding:11px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.profile-form textarea{min-height:92px;resize:vertical;font-family:inherit}
.profile-bio{line-height:1.55;overflow-wrap:anywhere}
.profile-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0;padding:0;border:0}
.avatar-picker legend{grid-column:1/-1;color:var(--muted);font-size:13px;margin-bottom:2px}
.avatar-choice{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)!important;cursor:pointer}
.avatar-choice input{width:auto!important;margin:0!important}
.avatar-choice strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danger-zone{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px}
.danger-zone h2{margin:0 0 8px;font-size:20px}
.danger-zone p{color:var(--muted);line-height:1.5}

.admin-main{max-width:1100px;margin:24px auto;padding:0 18px}
.admin-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.admin-search,.lulu-form{display:flex;gap:8px;flex:1;min-width:min(280px,100%)}
.admin-search input,.lulu-form input,.avatar-admin-form input,.password-admin-form input,.project-metadata-form input,.project-metadata-form textarea{flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:inherit}
.admin-section{margin-top:22px}
.player-admin-search{margin:0 0 12px}
.admin-list{display:grid;gap:10px}
.admin-row{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px}
.admin-row p{margin:4px 0 0}
.admin-actions-stack{display:grid;gap:8px;justify-items:end}
.game-control-form{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:360px}
.project-metadata-form{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:8px;margin-top:12px;max-width:620px}
.project-metadata-form textarea{grid-column:1/-1;min-height:74px;resize:vertical;font-family:inherit}
.project-metadata-form button{justify-self:start}
.password-admin-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.password-admin-form input{min-width:180px}
.avatar-admin-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.avatar-admin-list{display:flex;gap:8px;flex-wrap:wrap}
.avatar-admin-item{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:13px}

footer{padding:18px 20px;color:var(--muted);border-top:1px solid var(--border)}

@media (hover:none){
  .card:hover{transform:none}
}

@media (max-width:980px){
  .hero{padding:30px 18px}
  .hero h1{font-size:26px}
  .admin-header{align-items:stretch}
  .admin-header h1{width:100%;margin-bottom:0}
}

@media (max-width:760px){
  .auth-main{padding:18px}
  .auth-shell{grid-template-columns:1fr;gap:10px}
  .auth-intro{padding:6px 0}
  .auth-intro h1{max-width:12ch}
  .topbar{align-items:flex-start;gap:12px;flex-wrap:wrap}
  .topbar .search{order:3;flex-basis:100%;margin:0}
  .topbar .actions{width:100%;justify-content:flex-start}
  .topbar .actions .btn,.topbar .actions button,.inline-form{flex:1 1 auto}
  .topbar .actions button,.topbar .actions .btn{text-align:center}
  .topbar .actions .theme-toggle{margin-left:0}
  .card-head{display:block}
  .tags{margin-top:8px}
  .admin-row{align-items:stretch;flex-direction:column}
  .admin-row form,.admin-row button{width:100%}
  .admin-search,.lulu-form,.avatar-admin-form{flex-direction:column}
  .admin-search button,.lulu-form button,.avatar-admin-form button{width:100%}
  .project-metadata-form{grid-template-columns:1fr}
  .upload-main,.view-main,.admin-main{margin:18px auto;padding:0 14px}
  .view-header{padding:0}
  .iframe-wrap iframe{height:68vh}
}

@media (max-width:480px){
  .topbar{padding:12px 14px}
  .brand{font-size:16px;overflow-wrap:anywhere}
  .topbar .search form{flex-direction:column}
  .topbar .search button{width:100%;margin-left:0}
  .actions{gap:6px}
  .topbar .actions .btn,.topbar .actions button{padding:9px 10px;font-size:14px}
  .hero{padding:24px 14px;text-align:left}
  .hero h1{font-size:24px}
  main{padding:14px}
  .grid{gap:12px}
  .card{padding:12px}
  .auth-main{padding:12px;place-items:start center}
  .auth-intro h1{font-size:32px;max-width:100%}
  .auth-intro p{font-size:15px}
  .auth-panel{padding:12px}
  .auth-form{padding:14px}
  .legal-main{margin:18px auto;padding:0 14px}
  .iframe-wrap iframe{height:62vh}
}