miles/gd-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b4c6c48958115de9916b3d3b67e9ab1239a259ea
gd-list/styles.css
T
miles b4c6c48958 Add Guess Game page and UI/JS support 
Introduce a new Guess The Rank feature: add guess.html and associated styles and logic. app.js gains video modal utilities (extractYouTubeID, openVideoModal, renderApprovedRunsForLevel) and the full guessing-game flow (modes, round lifecycle, input handling). Refactor existing video-open usage to the new modal and enable showing approved runs in the modal. Update multiple navs and index highlights to link to the new Guess Game. Add CSS for guess UI and responsive tweaks, and adjust some UI copy (e.g. "View Video").
2026-04-01 16:47:22 -05:00

290 lines
29 KiB
CSS
Raw Blame History

:root{--bg:#0f1724;--panel:#071326;--accent:#5cc5ff;--muted:#9fb3c8;--text:#e6eef8;--card:#081220;--accent-warm:#ffb84d}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Space Grotesk","Trebuchet MS",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top,rgba(92,197,255,0.14),transparent 28%),linear-gradient(180deg,#061021 0%,#071426 100%)}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.05)}
header h1{margin:0;font-size:1.1rem}
nav a{color:var(--muted);margin-left:14px;text-decoration:none;transition:color .2s ease,opacity .2s ease}
nav a:hover{color:var(--text)}
main{padding:18px 20px}
h1,h2,h3,h4{line-height:1.15}
.layout{display:flex;gap:16px;align-items:flex-start}
.sidebar{width:220px}
.sidebar .panel{padding:12px;height:calc(100vh - 120px);overflow:auto}
.sidebar h2{margin:0 0 8px 0;font-size:0.95rem}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin:6px 0}
.sidebar-kicker{margin:0 0 8px 0;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800;color:var(--accent)}
.level-link{display:block;width:100%;text-align:left;padding:8px;border-radius:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:600}
.level-link.active{background:rgba(92,197,255,0.06);color:var(--accent)}
.content{flex:1}
.panel{background:var(--panel);padding:14px;border-radius:10px;margin-bottom:12px;box-shadow:0 3px 12px rgba(2,6,23,0.6)}
.search-row{display:flex;gap:14px;align-items:end;margin-bottom:0}
.search-row input[type=text]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.search-row select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.table-wrap{overflow:auto;border-radius:8px}
table.levels-table{width:100%;border-collapse:collapse;background:linear-gradient(180deg,rgba(255,255,255,0.012),transparent)}
table.levels-table th,table.levels-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.02);text-align:left}
table.levels-table th{color:var(--muted);font-size:0.85rem;font-weight:600}
table.levels-table tr:hover td{background:rgba(255,255,255,0.01)}
.levels-table input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text)}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;background:var(--accent);color:#042;cursor:pointer;border:none;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(92,197,255,0.22)}
.muted{color:var(--muted);font-size:0.9rem}
.error-text{color:#ff9f9f}
.small-btn{padding:8px 12px}
.danger-btn{background:#ff7b7b;color:#2a0909}
.admin-shell{padding:18px 20px}
.admin-shell-content[hidden]{display:none}
.admin-locked{overflow:hidden}
.admin-locked #admin-page-header,.admin-locked #admin-shell-content{visibility:hidden}
.admin-login-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:30px;background:
radial-gradient(circle at top,rgba(255,184,77,0.16),transparent 24%),
linear-gradient(180deg,rgba(6,16,33,0.98),rgba(7,20,38,0.99))}
.admin-login-card{width:min(100%,520px);padding:34px;border-radius:28px;background:linear-gradient(145deg,rgba(255,184,77,0.12),rgba(7,19,38,0.96) 42%),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 35%);border:1px solid rgba(255,184,77,0.16)}
.admin-login-card h2{margin:0 0 10px 0;font-size:clamp(2rem,4vw,2.8rem)}
.admin-login-form{display:grid;gap:16px;margin-top:20px}
.admin-login-actions{display:grid;gap:12px}
.admin-login-screen[hidden]{display:none}
.admin-panel{padding:20px}
.admin-overview-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:28px;background:linear-gradient(135deg,rgba(255,184,77,0.12),rgba(7,19,38,0.95));border:1px solid rgba(255,184,77,0.16)}
.admin-overview-panel h2{margin:0 0 8px 0;font-size:clamp(1.9rem,4vw,2.8rem)}
.admin-overview-badges{display:flex;flex-wrap:wrap;gap:10px}
.admin-overview-badges span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:#eef5ff;font-weight:700}
.admin-password-field{display:grid;gap:8px;width:100%;font-weight:700;color:#f2f7fd}
.admin-password-field span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.admin-password-field input,.admin-actions input[type=text],.admin-actions input[type=password]{min-width:220px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text)}
.admin-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}
.admin-toolbar h2{margin:0 0 8px 0}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-table td:last-child{text-align:center}
.run-admin-cell{display:grid;gap:6px}
.run-admin-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.run-admin-detail-row td{padding-top:0}
.run-admin-detail{display:grid;gap:8px;padding:0 0 14px 0;color:#dce8f5}
.run-admin-detail a{color:var(--accent)}
.hero-kicker{margin:0 0 12px 0;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;font-weight:800;color:var(--accent-warm)}
.home-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:22px;align-items:stretch;min-height:calc(100vh - 132px)}
.home-copy,.hero-stage{position:relative;overflow:hidden}
.home-copy{display:flex;flex-direction:column;justify-content:center;padding:34px;border-radius:28px;background:linear-gradient(145deg,rgba(255,184,77,0.12),rgba(7,19,38,0.96) 42%),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 35%);border:1px solid rgba(255,184,77,0.16)}
.home-copy::before{content:"";position:absolute;inset:auto -80px -90px auto;width:240px;height:240px;border-radius:50%;background:rgba(92,197,255,0.12);filter:blur(16px)}
.home-copy h2{margin:0 0 14px 0;font-size:clamp(2.6rem,6vw,5.3rem);max-width:12ch;position:relative;z-index:1}
.hero-text{max-width:60ch;margin:0;position:relative;z-index:1;color:#dce8f5;line-height:1.75;font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;position:relative;z-index:1}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px;position:relative;z-index:1}
.stat-card{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(10px)}
.stat-card strong{display:block;margin-bottom:8px;font-size:clamp(1.4rem,3vw,2rem);color:#fff}
.stat-card span{display:block;color:#c7d7ea;line-height:1.45;font-size:.94rem}
.hero-stage{padding:28px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.08)}
.stage-label{margin:0 0 8px 0;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800}
.hero-stage h3{margin:0 0 8px 0;font-size:2rem}
.featured-list{display:grid;gap:12px;margin-top:22px}
.featured-card{padding:18px;border-radius:18px;background:rgba(8,18,32,0.74);border:1px solid rgba(255,255,255,0.08)}
.featured-rank{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:7px 12px;border-radius:999px;background:rgba(92,197,255,0.14);color:var(--accent);font-size:.82rem;font-weight:800}
.featured-card strong{display:block;margin:14px 0 8px 0;font-size:1.1rem}
.featured-card p{margin:0;color:#ccdbeb;line-height:1.55}
.home-section-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.info-panel{padding:24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.info-panel h3{margin:0 0 10px 0;font-size:1.45rem}
.text-link{display:inline-block;margin-top:18px;color:var(--accent);font-weight:700;text-decoration:none}
.text-link:hover{color:#a9e5ff}
.spotlight-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start;margin-top:18px;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.12),rgba(7,19,38,0.95));border:1px solid rgba(92,197,255,0.16)}
.spotlight-copy h2{margin:0 0 12px 0;font-size:2.1rem}
.spotlight-text{margin:0;color:#dce8f5;line-height:1.7}
.spotlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spotlight-card{padding:18px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.spotlight-card h3{margin:0 0 10px 0;font-size:1.08rem}
.spotlight-card p{margin:0;color:#dce8f5;line-height:1.6}
.list-page-shell{display:flex;flex-direction:column;gap:16px}
.list-sidebar-panel{padding:18px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.list-sidebar-panel h2{margin:0 0 10px 0;font-size:1.2rem}
.list-sidebar-panel .muted{margin:0 0 16px 0;line-height:1.55}
.list-hero-panel{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.14),rgba(7,19,38,0.95));border:1px solid rgba(92,197,255,0.16)}
.list-hero-copy h2{margin:0 0 10px 0;font-size:clamp(2rem,4vw,3rem)}
.list-hero-text{max-width:60ch;line-height:1.7}
.list-hero-badge{max-width:230px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)}
.list-hero-badge strong{display:block;margin-bottom:8px;font-size:1rem}
.list-hero-badge span{display:block;color:#d7e5f4;line-height:1.55;font-size:.92rem}
.list-controls-panel{padding:20px 22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.06)}
.control-block{display:flex;flex:1;flex-direction:column;gap:8px;font-weight:700;color:#f2f7fd}
.control-block span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.control-block input,.control-block select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text)}
.control-select{max-width:220px}
.list-table-panel{padding:22px 22px 16px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.table-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.table-header h3{margin:0;font-size:1.45rem}
.table-hint{max-width:320px;line-height:1.6;text-align:right}
table.levels-table{border-radius:18px;overflow:hidden}
table.levels-table th{background:rgba(255,255,255,0.03)}
table.levels-table td{font-size:.98rem}
table.levels-table td:last-child{text-align:right}
table.levels-table .btn{padding:9px 14px}
.wip-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:22px;align-items:stretch;min-height:calc(100vh - 132px)}
.wip-copy,.wip-stage{position:relative}
.wip-copy{display:flex;flex-direction:column;justify-content:center;padding:32px;border-radius:26px;background:linear-gradient(145deg,rgba(255,184,77,0.1),rgba(7,19,38,0.96) 40%),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 36%);border:1px solid rgba(255,184,77,0.16);overflow:hidden}
.wip-copy::after{content:"";position:absolute;inset:auto -60px -80px auto;width:220px;height:220px;border-radius:50%;background:rgba(92,197,255,0.12);filter:blur(14px)}
.wip-copy h2{margin:0 0 14px 0;font-size:clamp(2.4rem,6vw,5rem);max-width:11ch}
.hero-text{max-width:58ch;margin:0;color:#dce8f5;line-height:1.7;font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.wip-stage{display:flex;align-items:center;justify-content:center;padding:12px}
.construction-card{width:min(100%,380px);padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.09);box-shadow:0 30px 80px rgba(0,0,0,0.28);animation:floatCard 4.6s ease-in-out infinite}
.construction-pill{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(255,184,77,0.16);color:#ffd79b;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.construction-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}
.construction-grid span{display:block;aspect-ratio:1;border-radius:16px;background:linear-gradient(135deg,rgba(92,197,255,0.22),rgba(255,184,77,0.08));border:1px solid rgba(255,255,255,0.08);animation:pulseTile 3.4s ease-in-out infinite}
.construction-grid span:nth-child(2){animation-delay:.35s}
.construction-grid span:nth-child(3){animation-delay:.7s}
.construction-grid span:nth-child(4){animation-delay:1.05s}
.progress-shell{height:14px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}
.progress-bar{height:100%;width:48%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-warm),var(--accent));animation:progressShift 2.8s ease-in-out infinite}
.construction-card p{margin:18px 0 0 0;color:#dce8f5;line-height:1.6}
.wip-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.status-panel{padding:22px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.status-label{margin:0 0 8px 0;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-warm);font-weight:800}
.status-panel h3{margin:0 0 10px 0;font-size:1.4rem}
.coming-shell{position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 132px);overflow:hidden}
.coming-panel{position:relative;z-index:1;width:min(100%,720px);padding:42px 30px;text-align:center;border-radius:28px;background:linear-gradient(145deg,rgba(92,197,255,0.12),rgba(7,19,38,0.96) 52%),radial-gradient(circle at top,rgba(255,255,255,0.1),transparent 32%);border:1px solid rgba(92,197,255,0.18);box-shadow:0 24px 70px rgba(2,6,23,0.42)}
.coming-panel h2{margin:0 0 14px 0;font-size:clamp(2.8rem,8vw,4.8rem)}
.coming-text{max-width:44ch;margin:0 auto;color:#dce8f5;line-height:1.7}
.coming-loader{display:flex;justify-content:center;gap:12px;margin:28px 0 22px}
.coming-loader span{width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,var(--accent-warm),var(--accent));animation:bounceDot 1.2s ease-in-out infinite}
.coming-loader span:nth-child(2){animation-delay:.15s}
.coming-loader span:nth-child(3){animation-delay:.3s}
.dad-joke{margin:0 auto 24px;padding:16px 18px;max-width:42ch;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.07);color:#eef6ff;line-height:1.65}
.coming-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.8;animation:drift 8s ease-in-out infinite}
.orb-one{top:10%;left:12%;width:180px;height:180px;background:rgba(92,197,255,0.12)}
.orb-two{right:10%;bottom:12%;width:220px;height:220px;background:rgba(255,184,77,0.12);animation-delay:1.8s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseTile{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.04);opacity:1}}
@keyframes progressShift{0%{transform:translateX(-18%);width:36%}50%{transform:translateX(58%);width:50%}100%{transform:translateX(-18%);width:36%}}
@keyframes bounceDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-12px);opacity:1}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(20px,-18px,0)}}
.video-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1200}
.video-modal .inner{width:90%;max-width:960px;max-height:88vh;overflow:auto;background:var(--card);padding:12px;border-radius:8px}
.video-modal iframe{width:100%;height:540px;border:0;border-radius:6px}
.modal-runs-wrap{margin-top:16px;padding:16px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.modal-runs-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-runs-list{display:grid;gap:10px;max-height:240px;overflow:auto;padding-right:4px}
.modal-run-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
.modal-run-card strong,.modal-run-card span,.modal-run-card a{align-self:center;line-height:1.2}
.modal-run-card strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-run-card span{color:#dce8f5;font-weight:700;white-space:nowrap}
.modal-run-card a{margin:0;white-space:nowrap}
@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%}.video-modal iframe{height:320px}.wip-hero{grid-template-columns:1fr;min-height:auto}.wip-copy{padding:28px 22px}.wip-status-grid{grid-template-columns:1fr}.coming-panel{padding:34px 22px}.coming-shell{min-height:auto;padding:30px 0}}
/* small helpers reused */
.small{font-size:0.9rem}
.roulette-shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:start}
.roulette-main-column{display:grid;gap:18px}
.roulette-rules{margin-bottom:18px}
.roulette-panel{margin-top:0;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.14),rgba(7,19,38,0.96));border:1px solid rgba(92,197,255,0.18)}
.roulette-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.roulette-kicker{margin:0 0 8px 0;text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:700;color:var(--accent)}
.roulette-head h2{margin:0 0 8px 0;font-size:clamp(2rem,4vw,3rem)}
.roulette-intro{max-width:50ch;line-height:1.7}
.roulette-btn{min-width:120px;font-weight:700}
.roulette-card{padding:24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 40px rgba(2,6,23,0.28)}
.roulette-status{margin:0 0 8px 0}
.roulette-card h3{margin:0 0 10px 0;font-size:clamp(1.6rem,3vw,2.3rem)}
.roulette-rank{margin:0 0 16px 0;font-size:1.02rem;color:#dce8f5}
.roulette-meta{margin:0 0 10px 0;font-size:1rem;color:#dce8f5}
.roulette-note{margin:10px 0 16px 0}
.roulette-open{color:#042}
.roulette-guess-panel{background:linear-gradient(135deg,rgba(255,184,77,0.12),rgba(7,19,38,0.96));border-color:rgba(255,184,77,0.18)}
.guess-card{display:grid;gap:12px}
.guess-form{display:grid;gap:10px;margin-top:4px}
.guess-label{font-size:.9rem;font-weight:700;color:#eef5ff}
.guess-controls{display:flex;gap:12px;align-items:center}
.guess-controls input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text);font:inherit}
.guess-answer{margin:0}
.roulette-rules-card{padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08)}
.roulette-rules-card h2{margin:0 0 16px 0;font-size:1.8rem}
.roulette-rule-list{display:grid;gap:14px}
.roulette-rule-list article{padding:16px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
.roulette-rule-list strong{display:block;margin-bottom:8px;font-size:1rem;color:#fff}
.roulette-rule-list p{margin:0;color:#dce8f5;line-height:1.6}
.run-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;align-items:start}
.run-panel{padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.14),rgba(7,19,38,0.96));border:1px solid rgba(92,197,255,0.18)}
.run-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.run-head h2{margin:0 0 10px 0;font-size:clamp(2rem,4vw,3rem)}
.run-intro{max-width:58ch;line-height:1.7}
.run-head-badge{max-width:240px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)}
.run-head-badge strong{display:block;margin-bottom:8px}
.run-head-badge span{display:block;color:#dce8f5;line-height:1.55;font-size:.92rem}
.run-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.run-notes-block{grid-column:1/-1}
.run-form textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text);resize:vertical;min-height:150px}
.run-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.run-side-panel{padding:24px 22px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08)}
.run-side-panel h2{margin:0 0 16px 0;font-size:1.8rem}
.run-checklist{display:grid;gap:14px}
.run-checklist article{padding:16px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
.run-checklist strong{display:block;margin-bottom:8px}
.run-checklist p{margin:0;color:#dce8f5;line-height:1.6}
.submission-panel{margin-top:18px;padding:22px 22px 16px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.submission-header{margin-bottom:18px}
.submission-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.submission-card{padding:18px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.submission-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.submission-card strong{font-size:1.05rem}
.submission-card p{margin:10px 0 0 0;color:#dce8f5;line-height:1.55}
.submission-meta{font-size:.92rem;color:var(--muted)!important}
.submission-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.status-pending{background:rgba(255,184,77,0.16);color:#ffd07d}
.status-approved{background:rgba(70,196,121,0.16);color:#8cf0ae}
.status-rejected{background:rgba(255,123,123,0.16);color:#ffaeae}
.discord-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:26px 28px;background:linear-gradient(135deg,rgba(88,101,242,0.18),rgba(7,19,38,0.95));border:1px solid rgba(88,101,242,0.22)}
.discord-copy{flex:1}
.discord-badge{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.discord-logo{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:#5865f2;color:#fff;box-shadow:0 10px 24px rgba(88,101,242,0.32)}
.discord-logo img{width:34px;height:34px;display:block}
.discord-label{margin:0 0 6px 0;text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:700;color:#bfc7ff}
.discord-panel h2{margin:0;font-size:1.9rem}
.discord-text{max-width:720px;margin:0 0 16px 0;line-height:1.65;color:#dce8f5}
.discord-highlights{display:flex;flex-wrap:wrap;gap:10px}
.discord-highlights span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.07);color:#eef3ff;font-size:0.92rem}
.discord-actions{display:flex;align-items:center;justify-content:center}
.discord-btn{padding:12px 18px;background:#5865f2;color:#fff;font-weight:700}
.rules-view header{padding:18px 28px}
.rules-view header h1{font-size:2rem;font-weight:800;letter-spacing:0.02em}
.rules-view main{display:flex;justify-content:center;padding:40px 20px 64px}
.rules-page{width:min(100%,920px);margin:0 auto;padding:32px 36px;background:linear-gradient(180deg,rgba(8,18,32,0.98),rgba(7,19,38,0.94));border:1px solid rgba(92,197,255,0.12);box-shadow:0 18px 48px rgba(2,6,23,0.48)}
.rules-hero{text-align:center;margin:0 auto 30px;max-width:680px}
.rules-kicker{margin:0 0 10px 0;text-transform:uppercase;letter-spacing:0.18em;font-size:0.72rem;color:var(--accent);font-weight:700}
.rules-page h2{margin:0 0 12px 0;font-size:2.1rem;font-weight:800}
.rule-section + .rule-section{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06)}
.rule-section h3{margin:0 0 12px 0;font-size:1.28rem;font-weight:750;color:#f4f8ff}
.rule-section h4{margin:18px 0 10px 0;font-size:0.95rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.rule-section p{margin:0 0 12px 0;line-height:1.7;color:#dce8f5}
.rules-list{margin:0;padding-left:22px}
.rules-list li{margin:0 0 8px 0;line-height:1.55;color:#dce8f5}
.error-shell main{min-height:calc(100vh - 84px);display:flex;align-items:center;justify-content:center;padding:32px 20px 56px}
.error-page{width:min(100%,980px);padding:0;overflow:hidden;border:1px solid rgba(92,197,255,0.12);background:
linear-gradient(140deg,rgba(92,197,255,0.1),rgba(7,19,38,0.95) 34%),
radial-gradient(circle at top right,rgba(255,255,255,0.07),transparent 36%),
linear-gradient(180deg,rgba(8,18,32,0.98),rgba(7,19,38,0.94))}
.error-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,0.85fr);gap:0}
.error-copy{padding:34px 36px}
.error-code{display:inline-block;margin:0 0 16px 0;padding:8px 14px;border-radius:999px;background:rgba(92,197,255,0.1);color:var(--accent);font-size:0.84rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase}
.error-copy h2{margin:0 0 12px 0;font-size:clamp(2.2rem,5vw,4.6rem);font-weight:900;letter-spacing:0.03em}
.error-copy p{margin:0 0 14px 0;max-width:56ch;line-height:1.7;color:#dce8f5}
.error-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.error-actions .btn{font-weight:700;text-decoration:none}
.ghost-btn{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.14)}
.error-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:34px 30px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))}
.error-side h3{margin:0 0 10px 0;font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;color:#eef6ff}
.error-list{margin:0;padding:0;list-style:none}
.error-list li + li{margin-top:10px}
.error-list a{display:block;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);color:#eaf2fb;text-decoration:none}
.error-list a span{display:block;color:var(--muted);font-size:0.88rem}
.error-tip{margin:0;padding:14px 16px;border-radius:12px;background:rgba(92,197,255,0.08);border:1px solid rgba(92,197,255,0.12);color:#d9ecff}
.error-collection{width:min(100%,1100px)}
.error-collection h2{margin:0 0 12px 0;font-size:2rem}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.status-card{display:block;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06);text-decoration:none;color:var(--text)}
.status-card strong{display:block;margin-bottom:6px;font-size:1.65rem}
.status-card span{display:block;color:var(--muted);line-height:1.5}
@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%}.sidebar .panel{height:auto}.video-modal iframe{height:320px}.modal-runs-head,.modal-run-card{grid-template-columns:1fr}.home-hero{grid-template-columns:1fr;min-height:auto}.home-copy,.hero-stage{padding:24px 22px}.hero-stats,.home-section-grid,.spotlight-grid{grid-template-columns:1fr}.spotlight-panel{grid-template-columns:1fr;padding:24px 22px}.list-hero-panel,.table-header,.search-row,.roulette-head,.guess-controls{flex-direction:column;align-items:flex-start}.control-select{max-width:none;width:100%}.roulette-shell{grid-template-columns:1fr}.discord-panel{flex-direction:column;align-items:flex-start;padding:22px 20px}.discord-panel h2{font-size:1.55rem}.discord-actions{width:100%;justify-content:flex-start}.rules-view header{padding:16px 18px}.rules-view header h1{font-size:1.55rem}.rules-page{padding:24px 20px}.rules-page h2{font-size:1.65rem}.guess-controls input,.guess-controls .btn{width:100%}}
@media(max-width:900px){.error-grid{grid-template-columns:1fr}.error-copy,.error-side{padding:24px 20px}.error-copy h2{font-size:2.5rem}}
@media(max-width:900px){.admin-overview-panel,.admin-toolbar{flex-direction:column;align-items:stretch}.admin-actions{flex-direction:column;align-items:stretch}.admin-password-field input,.admin-actions input[type=text],.admin-actions input[type=password]{min-width:0;width:100%}.run-shell{grid-template-columns:1fr}.run-head{flex-direction:column;align-items:flex-start}.run-form{grid-template-columns:1fr}.admin-login-screen{padding:18px}.admin-login-card{padding:26px 22px}}
@media(max-width:640px){header{flex-direction:column;align-items:flex-start;gap:12px}nav{display:flex;flex-wrap:wrap;gap:10px}nav a{margin-left:0}.home-copy h2{max-width:none}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn,.roulette-btn{width:100%;text-align:center}.list-hero-panel,.list-controls-panel,.list-table-panel,.roulette-panel,.roulette-rules-card,.run-panel,.run-side-panel,.submission-panel{padding:22px 18px}.table-hint{text-align:left}.run-admin-actions{justify-content:flex-start}}
Reference in New Issue View Git Blame Copy Permalink