@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { color-scheme: dark; --cream:#f3ead8; --muted:#aaa99f; --ink:#101a19; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:#101a19; color:var(--cream); font-family:'DM Sans',system-ui,sans-serif; overflow-x:hidden; }
.ambient { position:fixed; width:45vw; height:45vw; border-radius:50%; filter:blur(110px); opacity:.12; pointer-events:none; }
.ambient-one { background:#cc8b4b; top:-30vw; left:-10vw; }
.ambient-two { background:#4b8b78; right:-25vw; bottom:-25vw; }
.screen-shell { position:relative; min-height:100vh; max-width:1800px; margin:auto; padding:clamp(28px,3.4vw,68px); display:flex; flex-direction:column; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-bottom:clamp(25px,3vw,50px); border-bottom:1px solid rgba(243,234,216,.16); }
.identity { display:flex; align-items:center; gap:22px; }
.mark { width:62px; height:62px; display:grid; grid-template-columns:1fr 1fr; gap:4px; transform:rotate(45deg); }
.mark span { display:block; background:#d29655; border-radius:3px 12px 3px 12px; }
.mark span:nth-child(2),.mark span:nth-child(3) { background:#e9ddc6; }
.eyebrow,.card-type { margin:0 0 7px; color:#d4a46e; font-size:clamp(11px,.85vw,16px); font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
h1 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(25px,2.35vw,45px); line-height:1.1; }
.timebox { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.timebox { cursor:pointer; user-select:none; }
.timebox time { display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(35px,4vw,76px); line-height:.9; }
.timebox span { display:block; margin-top:10px; color:var(--muted); font-size:clamp(13px,1vw,19px); text-transform:capitalize; }
.welcome { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:clamp(28px,3.6vw,60px) 0 clamp(22px,2.7vw,46px); }
.welcome p { margin:0; max-width:950px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(32px,4.6vw,82px); line-height:1.02; }
.welcome span { color:var(--muted); font-size:clamp(13px,1vw,19px); padding-bottom:8px; }
.block-grid { flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(270px,1fr); gap:clamp(14px,1.4vw,26px); }
.info-card { position:relative; min-height:230px; padding:clamp(25px,2.2vw,42px); border:1px solid rgba(255,255,255,.12); border-radius:26px; background:linear-gradient(145deg,color-mix(in srgb,var(--card),75%,#182321),color-mix(in srgb,var(--card),45%,#101817)); color:white; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; text-decoration:none; isolation:isolate; }
.info-card.clickable { cursor:pointer; }
.info-card.clickable:focus-visible { outline:4px solid #f3ead8; outline-offset:4px; }
.info-card.large { grid-column:span 2; grid-row:span 1; }
.info-card.wide { grid-column:span 3; }
.card-shine { position:absolute; width:320px; height:320px; right:-140px; top:-170px; background:rgba(255,255,255,.13); border-radius:50%; filter:blur(10px); z-index:-1; }
.card-icon { width:clamp(48px,4vw,75px); height:clamp(48px,4vw,75px); color:#fff7e8; opacity:.95; }
.card-icon svg { width:100%; height:100%; fill:currentColor; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.card-icon .cut { fill:none; stroke:color-mix(in srgb,var(--card),50%,#0c1514); }
.club-logo { width:min(72%,280px); height:clamp(74px,7vw,118px); padding:14px 18px; border:1px solid rgba(255,255,255,.38); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 12px 35px rgba(0,0,0,.13); display:flex; align-items:center; justify-content:center; }
.club-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.club-logo.dammen { width:clamp(76px,7vw,118px); padding:7px; }
.club-logo.dammen img { border-radius:10px; }
.club-logo.bridge { width:clamp(76px,7vw,118px); padding:8px; }
.card-copy { margin-top:30px; }
.card-copy h2 { margin:0 0 10px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(25px,2.2vw,42px); line-height:1.05; }
.card-copy > p:last-child { margin:0; color:rgba(255,255,255,.72); font-size:clamp(13px,1vw,18px); }
.qr-wrap { position:absolute; top:clamp(18px,1.5vw,28px); right:clamp(18px,1.5vw,28px); width:228px; padding:9px 9px 8px; border-radius:14px; background:#fff; color:#24322e; box-shadow:0 12px 32px rgba(0,0,0,.2); text-align:center; text-decoration:none; z-index:2; }
.qr-code { width:210px; height:210px; }
.qr-code img,.qr-code canvas { display:block; width:210px!important; height:210px!important; }
.qr-wrap span { display:block; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.info-card:has(.qr-wrap) .club-logo,.info-card:has(.qr-wrap) .card-icon { max-width:calc(100% - 245px); }
.info-card:has(.qr-wrap) .card-copy { max-width:calc(100% - 245px); }
footer { display:flex; justify-content:space-between; align-items:center; padding-top:clamp(20px,2vw,36px); color:var(--muted); font-size:14px; }
footer p { margin:0; } footer a { color:#747d78; text-decoration:none; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:#74ac8d; box-shadow:0 0 12px #74ac8d; }
@media (max-width:1050px) { .block-grid{grid-template-columns:repeat(2,1fr)} .info-card.wide{grid-column:span 2} .welcome span{display:none} }
@media (max-width:650px) { .screen-shell{padding:22px}.topbar{align-items:flex-start}.mark{width:42px;height:42px}.timebox span{display:none}.block-grid{grid-template-columns:1fr}.info-card.large,.info-card.wide{grid-column:span 1}.welcome p{font-size:36px} }