:root { color-scheme:dark; --ink:#ecebe6; --muted:#a3aaa9; --paper:#101415; --surface:#191e20; --line:#343c3e; --accent:#d5b981; --red:#ac5753; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
header,main,footer { max-width:1160px; margin:auto; padding:26px 40px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; }
.wordmark { font-size:17px; font-weight:750; letter-spacing:.08em; }
.light { display:block; font-size:9px; letter-spacing:.3em; color:var(--muted); line-height:1.6; }
.ball { width:30px; height:30px; flex-shrink:0; border:2px solid #b3b7b3; border-radius:50%; background:linear-gradient(var(--red) 44%,var(--paper) 44%,var(--paper) 56%,#c8cbc3 56%); position:relative; }
.ball:after { content:""; position:absolute; width:10px; height:10px; border:2px solid var(--paper); border-radius:50%; background:#e1dfd6; top:8px; left:8px; }
main { padding-top:42px; min-height:76vh; }
.eyebrow,.step { font-size:10px; letter-spacing:.16em; font-weight:650; color:var(--accent); }
h1 { font-size:clamp(32px,4.5vw,48px); line-height:1.15; letter-spacing:-.035em; margin:16px 0; font-weight:650; }
h1 span { color:var(--accent); }
h2 { font-size:25px; line-height:1.3; letter-spacing:-.025em; margin:10px 0 16px; font-weight:600; }
h3 { font-size:17px; font-weight:600; margin:0 0 18px; }
p { color:var(--muted); margin:10px 0 20px; }
.intro { margin-bottom:25px; font-size:15px; }
.signed-in main>.eyebrow,.signed-in main>h1,.signed-in main>.intro { display:none; }
.signed-in main { padding-top:12px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:28px; }
.login-panel { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; overflow:hidden; margin-top:26px; }
.adventure-art { position:relative; text-align:center; padding:30px 24px 26px; background:radial-gradient(ellipse at 50% 40%,#34302b 0%,#1d2425 55%,#191e20 100%); border-right:1px solid var(--line); }
.adventure-art .step { color:#b0b6b1; font-size:9px; }
.adventure-art h2 { font-size:24px; margin:12px 0 20px; }
.adventure-art .edition { font-size:9px; letter-spacing:.14em; margin-bottom:4px; }
.edition span { color:#9d855e; margin:0 12px; }
.pokeball-scene { height:210px; position:relative; max-width:290px; margin:12px auto 0; }
.hero-ball { display:block; width:142px; height:142px; position:absolute; top:33px; left:calc(50% - 71px); border-radius:50%; background:linear-gradient(#a35a53 0%,#804741 46%,#161c1e 46%,#161c1e 54%,#a8aaa1 54%,#767f7d 100%); border:1px solid #c0a98b66; box-shadow:inset -14px -8px 24px #10141560,0 16px 35px #0005; z-index:1; }
.hero-ball span { position:absolute; width:38px; height:38px; border:7px solid #192022; border-radius:50%; background:#c7c8bd; top:51px; left:51px; box-shadow:inset 0 0 0 2px #8f9690; }
.orbit { position:absolute; width:202px; height:202px; border:1px solid #b69c6b30; border-radius:50%; left:calc(50% - 101px); top:3px; }
.orbit:after { content:""; position:absolute; inset:12px; border:1px solid #b69c6b18; border-radius:50%; }
#login-form { padding:36px 40px 30px; align-self:center; }
#login-form h2 { font-size:27px; margin-top:9px; }
#login-form>p { font-size:14px; }
#login-form button { width:100%; margin-top:4px; display:flex; justify-content:space-between; }
.hint { font-size:12px; line-height:1.6; color:var(--muted); }
#login-form .hint { font-size:11px; text-align:center; margin:18px 0 0; }
label,legend { display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
input:not([type=radio]),select { display:block; width:100%; min-width:0; background:#111719; border:1px solid #4c5658; border-radius:6px; padding:11px 14px; font:inherit; color:var(--ink); margin-bottom:17px; }
input::placeholder { color:#8c9696; opacity:1; }
input[type=radio] { accent-color:var(--accent); }
input:disabled { color:#a3aaa9; background:#171c1e; }
input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button,.download-button { background:var(--accent); color:#191c1c; border:1px solid var(--accent); padding:11px 17px; font:650 13px/1.5 system-ui; border-radius:6px; cursor:pointer; }
button:hover:not(:disabled),.download-button:hover { background:#e3c997; border-color:#e3c997; }
button:disabled { cursor:not-allowed; background:#30383a; border-color:#475052; color:#a3aaa9; }
.quiet { background:transparent; color:var(--ink); border-color:#596263; }
.quiet:hover:not(:disabled) { background:#293133; border-color:#899392; }
.back { background:transparent; border:0; color:var(--accent); padding:0; margin-bottom:20px; }
.back:hover:not(:disabled) { background:transparent; color:#f0d5a4; text-decoration:underline; }
#identity { display:flex; align-items:center; gap:16px; font-size:13px; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:30px 0 15px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:18px; }
.campaign-card { padding:25px; position:relative; border-top:2px solid #9b8057; }
.campaign-card h3 { font-size:22px; margin:16px 0 9px; overflow-wrap:anywhere; }
.campaign-card p { font-size:13px; }
.campaign-card button { width:100%; }
.badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.06em; background:#2a302e; color:#d2c2a2; border:1px solid #515245; border-radius:4px; padding:5px 10px; }
.lobby-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; }
.lobby-grid>* { min-width:0; }
#lobby-name { overflow-wrap:anywhere; }
.member { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.member:first-child { padding-top:0; }
.member-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.member-info strong { display:block; font-size:14px; }
.member-info small { font-size:12px; color:var(--muted); }
.member-status { font-size:11px; color:var(--muted); }
.member-status.is-ready { color:#a5c5a5; }
.avatar { width:42px; height:42px; display:inline-grid; place-items:center; background:#3c2c2b; border:1px solid #6e4b47; border-radius:6px; color:#dfada5; font-weight:650; flex-shrink:0; }
.avatar.leaf { background:#293831; color:#b5ceaf; border-color:#4c6554; }
fieldset { border:0; padding:0; margin:24px 0; }
.sprite-option { display:inline-flex; align-items:center; gap:9px; margin-right:28px; }
.sprite-option .avatar { width:34px; height:34px; }
#ready { margin-left:7px; }
.availability { display:flex; gap:14px; align-items:flex-start; padding:20px 24px; background:#1c2425; border:1px solid var(--line); border-radius:8px; margin:24px 0; font-size:13px; }
.availability p { margin:5px 0 0; }
.status-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; margin-top:8px; flex-shrink:0; }
#notice { padding:13px 18px; border-radius:6px; border:1px solid #815652; background:#352523; color:#f0c1b8; margin:20px 0; }
#create-form { margin-top:20px; max-width:620px; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); font-size:10px; font-weight:500; letter-spacing:.06em; color:var(--muted); margin-top:25px; }
[hidden] { display:none!important; }
.download-button { display:inline-block; padding:12px 22px; text-decoration:none; }
.play-panel { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:22px; border-color:#77684e; }
.play-panel>div:first-child { flex:1; min-width:200px; }
.play-panel h3 { margin-bottom:6px; }
.play-panel p { margin:0; font-size:13px; }
.play-panel select { margin:0; }
#play-game { min-width:130px; }
#launch-message,#launch-help { flex-basis:100%; }
#launch-help p { margin-bottom:12px; }
#launch-help a { margin:0 8px 8px 0; }
#open-client:not([href]) { display:none; }
summary { cursor:pointer; color:var(--muted); font-size:13px; }
details[open]>summary { margin-bottom:24px; }
@media(max-width:700px) {
  header,main,footer { padding-left:22px; padding-right:22px; }
  .wordmark { font-size:14px; }
  #identity { gap:8px; }
  #username { max-width:90px; overflow-wrap:anywhere; }
  main { padding-top:28px; }
  .login-panel,.lobby-grid { grid-template-columns:1fr; gap:0; }
  .lobby-grid { gap:20px; }
  .adventure-art { border-right:0; border-bottom:1px solid var(--line); padding:22px 16px; }
  .pokeball-scene { height:178px; margin-top:4px; }
  .hero-ball { top:18px; }
  .orbit { width:172px; height:172px; left:calc(50% - 86px); }
  .adventure-art h2 { font-size:21px; margin-top:10px; }
  #login-form { padding:26px; }
  .section-heading { align-items:flex-start; flex-wrap:wrap; }
  h2 { font-size:23px; }
  .panel:not(.login-panel) { padding:22px; }
  .member-status { max-width:76px; }
  footer { flex-wrap:wrap; }
}
@media(max-width:420px) {
  header { flex-wrap:wrap; }
  #identity { width:100%; justify-content:space-between; }
  #username { max-width:none; }
  #ready { margin:10px 0 0; }
}