:root{font-family:Futura,"Futura PT",Avenir,"Century Gothic",sans-serif;color:#f6eedb;background:#122b26;font-synthesis:none;--gold:#e8cd8d;--muted:#bbc9b8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#2e493b,transparent 65%),#122b26;min-height:100svh}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(165deg,transparent 40%,#35493633 40.1%,transparent 70%);pointer-events:none}button,input,a{font:inherit}button,a{touch-action:manipulation}button{border:1px solid #bcc6b247;border-radius:12px;background:#365343;color:#fff7e3;padding:14px 19px;min-height:48px;cursor:pointer;transition:background .18s,transform .18s}button:hover{background:#496550}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.66}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}a{color:inherit}header,main,footer{width:min(1180px,calc(100% - 64px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 0;gap:16px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:34px;font-weight:700;letter-spacing:2px}.brand>span{font-size:23px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:4px}.quiet{background:transparent}.intro{padding:24px 0 28px;max-width:800px}.eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:700;color:var(--gold);margin:0 0 12px}h1{font-size:clamp(30px,4.5vw,54px);line-height:1.1;letter-spacing:-1px;margin:0 0 16px}p{line-height:1.6}#subtitle{color:var(--muted);font-size:17px;max-width:650px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}.game-card{position:relative;border-radius:24px;overflow:hidden;min-height:465px;display:flex;align-items:flex-end;background:#334d3c center/cover;border:1px solid #f9e9bd25;box-shadow:0 18px 48px #020b1438}.solo{background-image:url('/online49-solo.webp')}.multi,.br{background-image:url('/online49-br.webp')}.wald{background-image:url('/online49-wald.webp')}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#112b2300 0%,#0c292666 22%,#102a26e8 58%,#102a26 100%)}.card-content{position:relative;padding:30px;width:100%;padding-top:145px;display:flex;flex-direction:column;height:100%;justify-content:flex-end}.card-content h2{font-size:36px;margin:0;line-height:1.1}.card-content>p:not(.eyebrow){color:#e3e9d9;font-size:15px;margin:14px 0 18px;max-width:430px}.card-content .mode-meta{font-size:12px!important;min-height:40px}.primary{background:var(--gold);color:#172e28;border-color:transparent;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:700}.primary:hover{background:#f6deb0}.primary:disabled{background:#537060;color:#d5ddcf;border:1px solid #cad7bb44}.card-link{background:transparent;border:0;min-height:44px;padding:12px 0 0;text-align:left;font-size:13px;color:#e1dac0}.card-note{font-size:12px!important;margin:14px 0 0!important;min-height:26px}.progress-block{font-size:12px;color:#d7decd;margin-bottom:18px;min-height:37px}.progress-block:empty{display:none}.track{height:4px;background:#f6efcf26;border-radius:5px;margin:10px 0 0;overflow:hidden}.track i{display:block;height:100%;background:var(--gold);border-radius:5px}.back{margin-bottom:20px;background:transparent}.panel{padding:30px;background:#1d382f;border-radius:22px;border:1px solid #bbd0ad30}.panel h2{font-size:32px;margin:0}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:24px 0}.player{padding:12px 15px;background:#ffffff09;border-radius:10px}.player small{display:block;color:var(--muted);margin-top:5px}.actions{display:flex;gap:10px;flex-wrap:wrap}.invite{font-size:12px;overflow-wrap:anywhere;color:var(--muted)}.character{margin-top:24px;padding:22px 26px;background:#ffffff06;border:1px solid #c2cfb427;border-radius:20px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px;align-items:center}.character h2{font-size:22px;margin:0}.character p:not(.eyebrow){font-size:12px;color:var(--muted);margin:7px 0 0}.character .eyebrow{font-size:9px;margin-bottom:6px}.attributes{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}.attribute{font-size:11px}.attribute span{float:right;color:var(--gold)}.attribute .track{margin-top:6px;height:3px}#status{min-height:24px;font-size:14px;color:var(--gold)}footer{padding:24px 0 28px;display:flex;justify-content:space-between;align-items:center;gap:14px;color:#a5b8a7;font-size:10px;border-top:1px solid #d2d3b31a}.text-button{border:0;padding:6px;background:none;color:#b5c5b5;font-size:11px}dialog{color:#f6eedb;background:#1d382f;border:1px solid #cabf953d;border-radius:24px;padding:34px;max-width:440px;width:calc(100% - 30px);box-shadow:0 30px 100px #0007}dialog::backdrop{background:#061b16ad;backdrop-filter:blur(8px)}dialog h2{font-size:29px;margin:0 0 15px}dialog p{font-size:14px;color:#c9d1c0}dialog label{display:block;font-size:13px;margin:22px 0}dialog input{width:100%;margin-top:8px;padding:15px;border:1px solid #80967e;border-radius:10px;background:#102a25;color:#fff8e7;font-size:17px}dialog .primary{width:100%}dialog a{font-size:12px}.close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:23px}.panel[hidden],section[hidden],article[hidden],label[hidden],div[hidden],button[hidden]{display:none!important}@media(max-width:850px){.character{grid-template-columns:1fr 1fr}.character>button{grid-column:1/-1}.card-content{padding:23px;padding-top:135px}.game-card{min-height:480px}}@media(max-width:600px){header,main,footer{width:calc(100% - 32px)}header{padding:20px 0;padding-top:max(20px,env(safe-area-inset-top))}.brand{font-size:26px;gap:8px}.brand>span{font-size:18px}.brand small{font-size:7px;letter-spacing:1px}#profileButton{padding:10px;font-size:12px}.intro{padding:16px 0}.intro p{font-size:14px}.cards{grid-template-columns:1fr;gap:16px}.game-card{min-height:420px}.card-content{padding:24px;padding-top:130px}.character{grid-template-columns:1fr;padding:22px;gap:20px}.character>button{grid-column:auto}footer{flex-wrap:wrap;padding-bottom:max(24px,env(safe-area-inset-bottom))}dialog{padding:28px}.panel{padding:22px}.actions>button{flex:1 1 auto}#status{overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Online 66: one clear action, fluid type and accessible login. */
header,main,footer{width:min(1160px,calc(100% - 40px))}header{padding:22px 0}.intro{padding:22px 0 30px}h1{font-size:clamp(32px,5.5vw,66px);line-height:1.12;text-wrap:balance}.intro>p:last-child{max-width:650px;line-height:1.65}.cards{gap:22px}.game-card{border-radius:24px}.card-content h2{font-size:clamp(32px,4vw,48px);line-height:1.15}.card-content p{line-height:1.65}.card-content{padding:28px}.card-link{min-height:44px}.character{gap:24px;padding:24px}.character h2{line-height:1.25}.actions{gap:10px;flex-wrap:wrap}footer{gap:16px;flex-wrap:wrap;line-height:1.5;font-size:11px}
dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid #b7c7ad44;border-radius:22px;box-shadow:0 24px 90px #0007}dialog h2{font-size:clamp(26px,5vw,36px);line-height:1.15;margin:8px 36px 14px 0}dialog p{line-height:1.6;font-size:14px}dialog .close{width:44px;height:44px;min-height:44px;right:8px;top:8px;padding:0;font-size:25px}dialog label{font-size:13px;line-height:1.5}dialog input{font-size:16px;min-height:48px;width:100%;min-width:0}dialog input[aria-invalid=true]{border-color:#e8a185}.password66{display:flex;align-items:stretch;gap:8px}.password66 input{flex:1}.password66 button{min-width:82px;padding:8px;font-size:12px;background:#233e32}#loginError{color:#efb69a;font-size:13px;min-height:1em}#loginForm[aria-busy=true] #loginSubmit{cursor:progress}#loginForm>button.primary{width:100%;margin-top:20px}dialog[open]::backdrop{background:#061b17b8;backdrop-filter:blur(5px)}
@media(max-width:650px){header,main,footer{width:calc(100% - 32px)}header{padding:18px 0;align-items:flex-start}.brand>span{font-size:19px}.brand small{font-size:8px;letter-spacing:1px}#profileButton{font-size:12px;padding:10px 12px;max-width:48%;white-space:normal;overflow-wrap:anywhere}.intro{padding:18px 0 24px}.cards{grid-template-columns:1fr}.card-content{padding:24px}.character{padding:20px;grid-template-columns:1fr}.attributes{grid-template-columns:1fr 1fr;gap:16px}.players{grid-template-columns:1fr}dialog{padding:24px}.password66 button{min-width:76px}footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){button{transition:none}dialog::backdrop{backdrop-filter:none}}