/* The Game Project — Listmonk public pages.
   Paste into Settings → Appearance → Public custom CSS. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');
:root { --ink:#0a1630; --ink-soft:#34425d; --paper:#fbfaf6; --paper-blue:#eef8fc; --white:#fff; --blue:#087fe7; --blue-dark:#0565be; --cyan:#35d6ff; --orange:#ff7a45; --line:#cbd9e4; --display:'Sora','Trebuchet MS',sans-serif; --body:'Source Sans 3','Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; color:var(--ink); background:var(--paper); font:17px/1.55 var(--body); }
body::before { content:''; position:fixed; inset:0; z-index:-1; opacity:.23; background-image:radial-gradient(rgb(10 22 48 / 16%) .6px,transparent .6px); background-size:8px 8px; }
a { color:var(--blue-dark); text-underline-offset:.2em; }
a:hover { color:var(--blue); }
h1,h2,h3,h4 { margin-top:0; color:var(--ink); font-family:var(--display); letter-spacing:-.04em; line-height:1.12; }
h1 { font-size:2rem; }
h2 { font-size:1.65rem; }
h3 { font-size:1.25rem; }
.container,.container.wrap { width:min(680px,calc(100% - 32px)); margin-inline:auto; }
.container.wrap { padding-block:42px 70px; }
.header { margin-bottom:32px; text-align:center; }
.logo { display:inline-block; }
.logo img { display:none !important; }
.logo a { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.logo a::before { content:''; width:76px; height:42px; background:url('https://app.thegameproject.net/data/logo.svg') center/contain no-repeat; }
.logo a::after { content:'THE\A Game Project'; white-space:pre; font:600 1.35rem/.82 var(--display); letter-spacing:-.04em; text-align:left; }
section { margin-bottom:20px; padding:clamp(24px,5vw,36px); border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:14px; background:var(--white); box-shadow:0 22px 50px rgb(1 48 90 / 10%); }
section.error { border-top-color:var(--orange); }
section.success,section.confirm { border-top-color:var(--cyan); }
form.form { display:block; }
form.form label,.lists label { color:var(--ink); font:700 .78rem/1.2 var(--display); }
form.form p { margin:0 0 18px; }
input,select,textarea { width:100%; min-height:46px; padding:10px 13px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--white); font:inherit; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); outline:3px solid rgb(53 214 255 / 32%); }
.button,button.button,input[type='submit'] { display:inline-flex; min-height:48px; width:auto; align-items:center; justify-content:center; padding:0 22px; border:1px solid var(--blue); border-radius:7px; color:var(--white)!important; background:var(--blue); box-shadow:5px 5px 0 var(--cyan); font:700 .9rem/1 var(--display); text-decoration:none; cursor:pointer; }
.button:hover,button.button:hover,input[type='submit']:hover { background:var(--blue-dark); }
.home-options { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
input.nonce { display:none!important; }
ul.lists { display:block; margin:22px 0; padding:16px 18px; list-style:none; border:1px solid var(--line); border-radius:7px; background:var(--paper-blue); }
ul.lists h2 { margin:0 0 10px; font-size:1.2rem; letter-spacing:-.025em; }
ul.lists li { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); }
ul.lists li:last-child { border-bottom:0; }
ul.lists li label { flex:1; margin:0; font-family:var(--body); font-size:1rem; font-weight:600; cursor:pointer; }
ul.lists li input[type='checkbox'] { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 22px; width:22px; min-height:22px; height:22px; margin:0; padding:0; border:2px solid var(--blue); border-radius:4px; background:var(--white); cursor:pointer; }
ul.lists li input[type='checkbox']:checked { background:var(--blue); }
ul.lists li input[type='checkbox']:checked::after { content:''; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(42deg); }
table { width:100%; border-collapse:collapse; }
th,td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
th { color:var(--ink); background:var(--paper-blue); font:700 .78rem/1.2 var(--display); }
footer.container { display:none; }
:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
@media (max-width:540px) { .container.wrap{padding-top:28px} section{padding:24px 20px} }