/* Hovedsiden (/): farverig fest med klistermærker. Hvert spil har sin egen stil på sin egen side. */

:root {
    --ink: #151515;
    --sun: #ffde59;
    --pink: #ff5c8a;
    --mint: #3ddc97;
    --punchy: #ff5a36;
    --bluff: #5b8cff;
    --shadow: 6px 6px 0 var(--ink);
}

* { box-sizing: border-box; }

body.hub {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Archivo", system-ui, sans-serif;
    background: var(--sun) radial-gradient(var(--ink) 1.2px, transparent 1.5px) 0 0 / 22px 22px;
}
.hub main, .hub-nav, .hub-footer { max-width: 1100px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Klistermærke: hvid flade, sort kant og hård skygge. */
.sticker {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.hub-btn {
    display: inline-block;
    font: 900 1.05rem "Archivo Black", sans-serif;
    color: var(--ink);
    text-decoration: none;
    background: var(--mint);
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--ink);
    padding: 10px 18px;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.hub-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.hub-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.hub-btn.white { background: #fff; }
.hub-btn:disabled { opacity: .6; cursor: default; }

.hub-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.hub-brand { display: block; line-height: 0; }
.hub-brand img { height: 58px; width: auto; }
@media (max-width: 480px) { .hub-brand img { height: 44px; } }

/* Toppen */
.hub-hero { text-align: center; padding: 40px 0 30px; }
.hub-hero h1 {
    font: 900 clamp(2.4rem, 7vw, 4rem)/1.05 "Archivo Black", sans-serif;
    letter-spacing: -.02em;
    margin: 0 auto 18px;
    max-width: 1000px;
}
.hub-hero h1 em {
    font-style: normal;
    display: inline-block;
    background: var(--pink);
    color: #fff;
    padding: 0 14px;
    border: 3px solid var(--ink);
    box-shadow: var(--shadow);
    transform: rotate(-2deg);
}
.hub-lead { font-size: 1.2rem; font-weight: 600; line-height: 1.5; margin: 0 auto 26px; max-width: 600px; }

.hub-join { display: inline-flex; flex-direction: column; gap: 8px; padding: 12px; text-align: left; }
.hub-join label { font-weight: 800; }
.hub-join-row { display: flex; gap: 10px; }
.hub-join input {
    width: 200px;
    min-width: 0;
    border: 3px solid var(--ink);
    border-radius: 10px;
    font: 800 1.3rem "Archivo", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 8px 12px;
}
.hub-join input:focus { outline: 3px solid var(--pink); outline-offset: 2px; }
.hub-error { color: #c4002b; font-weight: 700; margin: 0; }

/* Spillene */
.hub-section { padding: 30px 0 50px; }
.hub-section > h2 { font: 900 clamp(1.8rem, 4vw, 2.4rem) "Archivo Black", sans-serif; text-align: center; margin: 0 0 30px; }
.hub-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.hub-game { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); }
.hub-game:nth-child(odd) { transform: rotate(-1deg); }
.hub-game:nth-child(even) { transform: rotate(1deg); }
.hub-badge {
    align-self: flex-start;
    font: 900 2rem "Archivo Black", sans-serif;
    color: #fff;
    text-decoration: none;
    padding: 2px 14px;
    border: 3px solid var(--ink);
    border-radius: 12px;
}
.hub-game.punchy .hub-badge { background: var(--punchy); }
.hub-game.bluff .hub-badge { background: var(--bluff); }
.hub-game.gotcha .hub-badge { background: #e1061b; }
.hub-game.magnet .hub-badge { background: #2f9e6e; }
.hub-game p { margin: 0; line-height: 1.5; font-weight: 500; }
.hub-avatars { display: flex; gap: 6px; }
.hub-avatars img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.hub-game-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: auto; }
.hub-game-row small { font-weight: 700; flex: 1; }
.hub-game-row a:not(.hub-btn) { color: var(--ink); font-weight: 800; }
.hub-soon {
    position: absolute;
    top: -16px;
    right: 18px;
    background: var(--sun);
    font: 900 1rem "Archivo Black", sans-serif;
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 4px 14px;
    transform: rotate(4deg);
}

/* Sådan virker det */
.hub-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-step { padding: 22px; }
.hub-step span {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    background: var(--pink);
    color: #fff;
    font: 900 1.2rem "Archivo Black", sans-serif;
}
.hub-step h3 { font: 900 1.3rem "Archivo Black", sans-serif; margin: 12px 0 6px; }
.hub-step p { margin: 0; line-height: 1.5; }
.hub-step:nth-child(2) { background: #e9f0ff; }
.hub-step:nth-child(3) { background: #e6fbf1; }

/* Discord */
.hub-discord { display: flex; align-items: center; gap: 20px; padding: 22px 26px; max-width: 760px; margin: 0 auto; transform: rotate(-.5deg); }
.hub-discord h2 { font: 900 1.5rem "Archivo Black", sans-serif; margin: 0 0 4px; }
.hub-discord p { margin: 0; line-height: 1.5; }
.hub-discord > div { flex: 1; }

/* Bunden */
.hub-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-top: 10px; padding-bottom: 14px; }
.hub-footer a { color: var(--ink); font-weight: 700; }
.hub-langs { display: flex; justify-content: center; gap: 14px; padding: 10px 0 34px; }
.hub-langs button {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 800 .95rem "Archivo", sans-serif;
    padding: 6px 12px 6px 6px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 3px 3px 0 var(--ink);
    opacity: .7;
}
.hub-langs button[aria-pressed="true"] { opacity: 1; background: var(--mint); }
.hub-langs svg { width: 34px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; }

@media (max-width: 760px) {
    .hub-games, .hub-steps { grid-template-columns: 1fr; }
    .hub-discord { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .hub main, .hub-nav, .hub-footer { padding-left: 16px; padding-right: 16px; }
    .hub-join { display: flex; }
    .hub-join input { width: auto; flex: 1; }
}

/* Om-siden (/about) */
.about .hub-hero h1 { max-width: 760px; }
.ab-story { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; }
.ab-card { padding: 26px 28px; }
.ab-card h2 { font: 900 1.6rem "Archivo Black", sans-serif; margin: 0 0 12px; }
.ab-card p { margin: 0 0 12px; line-height: 1.6; font-size: 1.05rem; }
.ab-story .ab-card:nth-child(1) { transform: rotate(-.6deg); }
.ab-name { position: relative; background: #ffe9f0; transform: rotate(.8deg); }
.ab-glyph { position: absolute; right: -18px; top: -26px; width: 86px; transform: rotate(8deg); filter: drop-shadow(4px 4px 0 var(--ink)); }
.ab-glyph img { width: 100%; display: block; }
.ab-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ab-game { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: transform .1s; }
.ab-game:hover { transform: translate(-2px, -2px) rotate(-.5deg); }
.ab-game p { margin: 0; line-height: 1.5; }
.ab-sym { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #444; }
.ab-sym b { font: 900 2.2rem/1 "Archivo Black", sans-serif; color: var(--ink); width: 44px; text-align: center; }
.ab-promise { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ab-promise li { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.ab-promise span { font-size: 2rem; }
.ab-promise b { font: 900 1.15rem "Archivo Black", sans-serif; }
.ab-promise small { font-size: .95rem; line-height: 1.45; color: #444; }
.ab-contact { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
@media (max-width: 860px) { .ab-story, .ab-games { grid-template-columns: 1fr; } .ab-promise { grid-template-columns: 1fr 1fr; } .ab-contact { justify-content: center; max-width: none; } }
@media (max-width: 480px) { .ab-promise { grid-template-columns: 1fr; } .ab-glyph { width: 60px; right: -6px; } }
.ib-char { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", serif; font-weight: 700; font-size: 1.35em; line-height: 1; color: var(--pink); vertical-align: -.08em; }
.hub-nav-links { display: flex; gap: 12px; align-items: center; }
@media (max-width: 480px) { .hub-nav-links { gap: 8px; } .hub-nav-links .hub-btn { padding: 8px 12px; font-size: .95rem; } }
.hub-btn.coffee { background: #ffdd00; }

/* SEO-siderne (bygget af tools/seo/build.py) */
.seo .hub-hero h1 { max-width: 920px; }
.seo-kicker { font: 800 .85rem "Archivo", sans-serif; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.seo-start { font-size: 1.25rem; padding: 14px 26px; }
.seo-note { font-size: .9rem; margin: 10px 0 0; color: #444; }
.seo .hub-game .hub-game-row { justify-content: flex-end; }
.seo-prose { max-width: 820px; margin: 0 auto; padding: 26px 30px; }
.seo-prose h2 { font: 900 1.5rem "Archivo Black", sans-serif; margin: 0 0 12px; text-align: left; }
.seo-prose p { line-height: 1.65; font-size: 1.05rem; margin: 0 0 12px; }
.seo-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.seo-faq details { padding: 14px 18px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
.seo-faq summary { cursor: pointer; font: 900 1.05rem "Archivo Black", sans-serif; }
.seo-faq p { margin: 10px 0 2px; line-height: 1.6; }
.seo-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; margin: 0 auto; }
.seo-links a { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; color: var(--ink); font-weight: 700; text-decoration: none; }
.seo-links a:hover { background: var(--mint); }

/* "Til enhver anledning" på forsiden: kun kortene på sidens sprog vises. */
.hub-occasions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1060px; margin: 0 auto; }
.hub-occasion { width: 136px; }
html:not([lang="da"]) .hub-occasion[lang="da"], html[lang="da"] .hub-occasion[lang="en"] { display: none; }
.hub-occasion { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 16px; text-align: center; color: var(--ink); text-decoration: none; transition: transform .15s; }
.hub-occasion:nth-child(4n+1) { transform: rotate(-1.5deg); }
.hub-occasion:nth-child(4n+2) { transform: rotate(1deg); background: #e9f0ff; }
.hub-occasion:nth-child(4n+3) { transform: rotate(-.5deg); background: #ffe3ec; }
.hub-occasion:nth-child(4n) { transform: rotate(1.5deg); background: #e6fbf1; }
.hub-occasion:hover { transform: rotate(0) translateY(-4px) scale(1.03); }
.hub-occasion-emoji { font-size: 2.4rem; line-height: 1.1; }
.hub-occasion strong { font: 900 .95rem "Archivo Black", sans-serif; }
.hub-occasion small { font-size: .75rem; color: #444; }
@media (max-width: 480px) { .hub-occasions { gap: 14px; } .hub-occasion { width: calc(50% - 7px); } }

/* Jule-tema (julefrokost-siderne): grangrøn baggrund med sne, rød fremhævning og guldknapper.
   Sne og lyskæde kommer fra xmas.css via applyTheme('xmas'). */
body.hub.theme-xmas {
    --xmas-red: #e23b3b;
    --xmas-gold: #ffc94a;
    color: #fff;
    background: #17573a radial-gradient(rgb(255 255 255 / .22) 1.3px, transparent 1.6px) 0 0 / 22px 22px;
}
body.hub.theme-xmas .hub-nav, body.hub.theme-xmas main, body.hub.theme-xmas .hub-footer { position: relative; z-index: 1; }
body.hub.theme-xmas .hub-nav { padding-top: 46px; }
body.hub.theme-xmas .sticker { color: var(--ink); }
body.hub.theme-xmas .hub-hero h1, body.hub.theme-xmas .hub-section > h2 { text-shadow: 3px 3px 0 var(--ink); }
body.hub.theme-xmas .hub-hero h1 em { background: var(--xmas-red); text-shadow: none; }
body.hub.theme-xmas .seo-note { color: rgb(255 255 255 / .8); }
body.hub.theme-xmas .hub-btn:not(.white) { background: var(--xmas-gold); }
body.hub.theme-xmas .hub-footer a { color: #fff; }
body.hub.theme-xmas .seo-links a:hover { background: var(--xmas-gold); }
.seo-season { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border: 2px dashed var(--xmas-gold, var(--ink)); border-radius: 10px; font-weight: 700; }
.seo-when { margin: 0 0 -4px; font: 800 .8rem "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #555; }
.seo-prompts { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.seo-prompts li { padding: 16px 20px; font-weight: 700; line-height: 1.4; }
.seo-prompts li:nth-child(odd) { transform: rotate(-.8deg); }
.seo-prompts li:nth-child(even) { transform: rotate(.6deg); }
.seo-intro { max-width: 680px; margin: -14px auto 26px; text-align: center; line-height: 1.55; font-weight: 600; }
@media (max-width: 760px) { .seo-prompts { grid-template-columns: 1fr; } }