/* ==================================================
   GRUNDLAG
================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }

body{
    font-family:"Pixelify Sans","Courier New",monospace;
    background:#f5f7fa;
    color:#222;
}

.page{
    display:none;
    min-height:100vh;
    min-height:100dvh;
    padding:20px;
    overflow-x:hidden;
}

.page.active{
    display:flex;
    justify-content:center;
    align-items:center;
}

.container{ width:100%; max-width:1600px; text-align:center; }

h1{ font-size:3rem; color:#003366; margin-bottom:10px; }
.subtitle{ margin-bottom:30px; }

button{
    margin-top:30px;
    background:#0066ff;
    color:white;
    border:none;
    border-bottom:5px solid #003a99;
    padding:15px 30px;
    cursor:pointer;
    font-family:inherit;
    font-size:1.1rem;
    transition:.3s;
}

button:hover{
    background:#004ed1;
    border-bottom-color:#00287a;
    transform:translateY(-2px);
}

.hint{ font-size:1rem; min-height:1.5em; }

/* ==================================================
   SIDE 0 - FORSIDE
================================================== */

#page-landing{
    padding:0;
    background-image:url("images/intro.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.landing-overlay{
    position:relative;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    text-align:center;
    color:white;
    background:rgba(0,0,0,.35);
}

.landing-title{ font-size:4rem; color:white; margin-bottom:20px; }
.landing-text{ max-width:700px; font-size:1.4rem; line-height:1.6; margin-bottom:10px; }
.landing-credit{ position:absolute; left:20px; bottom:20px; font-size:1rem; opacity:.7; }

/* ==================================================
   KARAKTERVALG I KROEN
================================================== */

#page-character{
    position:relative;
    background-image:url("images/inside.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#page-character::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

#page-character .container{
    position:relative;
    z-index:2;
    width:60vw;
    max-width:1200px;
}

#page-character h1{ color:white; text-shadow:0 4px 12px rgba(0,0,0,.8); }
#page-character .subtitle{ color:white; text-shadow:0 2px 8px rgba(0,0,0,.8); }
#page-character .hint{ color:#ffd1d1; margin-top:15px; text-shadow:0 2px 8px rgba(0,0,0,.8); }

.characters{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    width:min(760px,100%);
    margin:0 auto 20px;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.character{
    background:#2b1a12;
    padding:5px;
    overflow:hidden;
    cursor:pointer;
    user-select:none;
    rotate:var(--r,0deg);
    transition:scale .25s, translate .25s, background .25s;
}

.character:hover{ scale:1.05; translate:0 -10px; z-index:100; position:relative; }
.character.selected{ translate:0 -10px; background:#ffd23f; }

.character:nth-child(1){--r:-5deg;}
.character:nth-child(2){--r:3deg;}
.character:nth-child(3){--r:-2deg;}
.character:nth-child(4){--r:8deg;}
.character:nth-child(5){--r:-4deg;}

.character-image{ width:100%; aspect-ratio:2/3; background:#ddd; }

.character-image img{
    width:100%; height:100%;
    object-fit:cover; display:block; pointer-events:none;
}

.character h3{ background:white; padding:12px 12px 2px; font-size:1.3rem; }
.character-desc{ background:white; padding:0 12px 12px; font-size:.95rem; color:#555; }

/* ==================================================
   BORDSIDER (fælles for alle sider på bordet)
================================================== */

.table-page{
    background-image:url("images/table.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.table-page .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:calc(100dvh - 40px);
}

.table-page h1{ color:white; margin:20px 0; text-shadow:0 4px 12px rgba(0,0,0,.8); }

.table-page .hint{
    color:white;
    padding:16px 0 4px;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* ---- Trækkort ---- */

.card-grid{
    width:min(900px,92vw);
    margin:auto 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}

.game-card{
    --r:0deg;
    width:130px;
    height:182px;
    margin:-12px;
    position:relative;
    perspective:1000px;
    cursor:pointer;
    rotate:var(--r);
    transition:scale .3s, rotate .3s;
    filter:drop-shadow(0 6px 0 rgba(0,0,0,.4));
}

.game-card:hover{ z-index:900; scale:1.08; }

/* Det valgte (vendte) kort rettes op og forstørres */
.game-card.chosen,
.game-card.chosen:hover{ z-index:999; rotate:0deg; scale:1.5; }

.card-inner{
    width:100%; height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .8s;
}

.game-card.flipped .card-inner{ transform:rotateY(180deg); }

.card-front,
.card-back{
    position:absolute;
    inset:0;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.card-front{ background:white; }

.card-front img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    pointer-events:none;
    image-rendering:pixelated;
}

.card-back{
    transform:rotateY(180deg);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px;
    text-align:center;
    font-size:.85rem;
    font-weight:bold;
    line-height:1.3;
    overflow-wrap:anywhere;
    hyphens:auto;
    color:black;
    border:4px solid #3b2a1e;
    image-rendering:pixelated;
    background-image:url("images/cards/card-front-bg.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* ==================================================
   SPILLEREGLER
================================================== */

.rules{
    width:min(1000px,92vw);
    margin:auto 0;
    padding:20px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    text-align:left;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.rule-card{
    background:white;
    padding:28px 32px;
    border:4px solid #2b1a12;
    border-top:12px solid #888;
    rotate:var(--r,0deg);
}

.rule-card:nth-child(1){--r:-1.5deg;}
.rule-card:nth-child(2){--r:1.5deg;}
.rule-no{border-top-color:#d64545;}
.rule-yes{border-top-color:#2e9e5b;}

.rule-card h2{ color:#003366; font-size:2rem; margin-bottom:15px; }
.rule-card ul{ list-style:none; }
.rule-card li{ font-size:1.5rem; line-height:1.35; padding:12px 0; border-bottom:1px solid #e3e8ef; }
.rule-card li:last-child{ border-bottom:none; }

/* ==================================================
   VÆLG UDDANNELSE
================================================== */

.edu-grid{
    width:min(900px,92vw);
    margin:20px 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.edu-card{
    margin:0;
    min-height:90px;
    padding:18px;
    background:white;
    color:#003366;
    font-size:1.4rem;
    border:none;
    border-bottom:none;
    rotate:var(--r,0deg);
    transition:scale .25s, translate .25s, background .25s;
}

.edu-card:nth-child(3n+1){--r:-2deg;}
.edu-card:nth-child(3n+2){--r:1.5deg;}
.edu-card:nth-child(3n){--r:-1deg;}

.edu-card:hover{ background:#ffd23f; scale:1.05; translate:0 -6px; transform:none; }

.edu-card small{ display:block; font-size:.9rem; color:#777; margin-top:4px; }
.edu-card:disabled{ background:#cfc6b8; color:#666; cursor:not-allowed; }
.edu-card:disabled:hover{ scale:1; translate:0; background:#cfc6b8; }

/* ==================================================
   INTRODUKTION TIL EFFECTUATION (kort på bordet)
================================================== */

.compare{
    width:min(1100px,94vw);
    margin:10px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.intro-card{
    background:white;
    padding:24px 28px;
    border:4px solid #2b1a12;
    border-top:12px solid #888;
    text-align:left;
    rotate:var(--r,0deg);
}

.intro-card:nth-child(1){--r:-1deg;}
.intro-card:nth-child(2){--r:1deg;}

.intro-card.causation,
.intro-card.before{border-top-color:#d64545;}
.intro-card.effectuation,
.intro-card.after{border-top-color:#2e9e5b;}

.intro-card h2{ color:#003366; font-size:1.9rem; margin-bottom:12px; }
.intro-card ul{ list-style:none; }

.intro-card li{
    font-size:1.35rem;
    line-height:1.35;
    padding:8px 0;
    border-bottom:1px solid #e3e8ef;
}
.intro-card li:last-child{ border-bottom:none; }

.intro-quote{ font-size:1.5rem; line-height:1.4; color:#222; }

.journey{ margin-top:16px; padding-top:14px; border-top:3px dashed #b9a88c; }
.journey small{ display:block; font-size:.95rem; color:#777; margin-bottom:6px; }
.journey p{ font-size:1.25rem; line-height:1.4; color:#8a2a1a; }

.intro-progress{
    align-self:center;
    margin-top:30px;
    color:white;
    font-size:1.2rem;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* ==================================================
   INTRO TIL SPILLET
================================================== */

.welcome{
    width:min(900px,94vw);
    margin:10px auto;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.intro-card.welcome-card{
    border-top-color:#ffd23f;
    padding:30px 36px;
}

.welcome-card p{
    font-size:1.4rem;
    line-height:1.5;
    margin-bottom:14px;
    color:#222;
}

.welcome-card .lead{ font-size:1.8rem; color:#003366; margin-bottom:4px; }
.welcome-card .reassure{ color:#8a2a1a; }

.welcome-card .goal{
    margin:20px 0 0;
    padding:14px 18px;
    background:#fff3c4;
    border-left:8px solid #ffd23f;
    font-weight:bold;
    color:#003366;
}

@media(max-width:900px){
    .welcome-card{ padding:22px 20px; }
    .welcome-card p{ font-size:1.15rem; }
    .welcome-card .lead{ font-size:1.4rem; }
}

/* ==================================================
   GENERERET CASE
================================================== */

.results{
    width:min(1100px,92vw);
    margin:auto 0;
    padding:20px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.result-card{
    width:calc((100% - 48px) / 3);
    rotate:var(--r,0deg);
    transition:scale .3s, translate .3s;
}

.result-card:hover{ scale:1.04; translate:0 -4px; }

.result-card:nth-child(1){--r:-3deg;}
.result-card:nth-child(2){--r:2deg;}
.result-card:nth-child(3){--r:-2deg;}
.result-card:nth-child(4){--r:3deg;}
.result-card:nth-child(5){--r:-3deg;}
.result-card:nth-child(6){--r:2deg;}

.result-card img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    display:block;
    padding:5px;
    background:#2b1a12;
}

.card-value{
    aspect-ratio:3/2;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    border:5px solid #3b2a1e;
    image-rendering:pixelated;
    background-image:url("images/cards/card-front-bg.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.card-value p{
    font-size:1.5rem;
    font-weight:bold;
    color:#003366;
    text-align:center;
}

.card-footer{
    margin-top:12px;
    font-size:1.6rem;
    font-weight:bold;
    color:white;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
    text-align:center;
}

.card-sub{
    color:white;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
    font-size:1.1rem;
}

.summary{
    max-width:900px;
    margin:10px auto 0;
    padding:0 10px;
    font-size:1.4rem;
    line-height:1.5;
    color:white;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* ==================================================
   TIMER (sprint og pitch)
================================================== */

.timer{
    font-size:9rem;
    line-height:1;
    color:white;
    letter-spacing:.05em;
    margin:10px 0 20px;
    text-shadow:0 6px 0 rgba(0,0,0,.6);
}

.timer.done{ color:#ff6b6b; animation:blink 1s steps(2) infinite; }

@keyframes blink{ 50%{ opacity:.25; } }

.subtitle-light{
    color:white;
    font-size:1.4rem;
    margin-bottom:10px;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
}

.reminders{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    max-width:1000px;
    margin:10px auto;
}

.reminders li{
    background:white;
    color:#003366;
    border:4px solid #2b1a12;
    padding:12px 20px;
    font-size:1.3rem;
    filter:drop-shadow(0 5px 0 rgba(0,0,0,.45));
}

.timer-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

/* ==================================================
   PIXELHJØRNER
   To-trins trappehjørner i stedet for runde hjørner.
   --px er størrelsen på ét "pixeltrin".
================================================== */

button,
.character,
.card-front,
.card-back,
.result-card img,
.card-value,
.rule-card,
.intro-card,
.reminders li{
    border-radius:0;
    clip-path:polygon(
        0 calc(var(--px) * 2),
        var(--px) calc(var(--px) * 2),
        var(--px) var(--px),
        calc(var(--px) * 2) var(--px),
        calc(var(--px) * 2) 0,

        calc(100% - var(--px) * 2) 0,
        calc(100% - var(--px) * 2) var(--px),
        calc(100% - var(--px)) var(--px),
        calc(100% - var(--px)) calc(var(--px) * 2),
        100% calc(var(--px) * 2),

        100% calc(100% - var(--px) * 2),
        calc(100% - var(--px)) calc(100% - var(--px) * 2),
        calc(100% - var(--px)) calc(100% - var(--px)),
        calc(100% - var(--px) * 2) calc(100% - var(--px)),
        calc(100% - var(--px) * 2) 100%,

        calc(var(--px) * 2) 100%,
        calc(var(--px) * 2) calc(100% - var(--px)),
        var(--px) calc(100% - var(--px)),
        var(--px) calc(100% - var(--px) * 2),
        0 calc(100% - var(--px) * 2)
    );
}

button{--px:3px;}
.character{--px:5px;}
.card-front,
.card-back{--px:4px;}
.result-card img,
.card-value{--px:6px;}
.rule-card,
.intro-card{--px:6px;}
.reminders li{--px:4px;}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1200px){
    #page-character .container{ width:90vw; }
}

@media(max-width:900px){
    h1{ font-size:2rem; }
    .landing-title{ font-size:2.5rem; }

    .rules,
    .edu-grid{ grid-template-columns:1fr 1fr; }
    .rules{ grid-template-columns:1fr; }

    .result-card{ width:calc((100% - 24px) / 2); }
    .compare{ grid-template-columns:1fr; }

    .timer{ font-size:5rem; }
    .summary{ font-size:1.15rem; }

    .game-card{ width:100px; height:140px; margin:-8px; }
    .game-card.chosen,
    .game-card.chosen:hover{ scale:1.8; }

    .card-back{ padding:8px; font-size:.7rem; }
    .card-front,
    .card-back{ --px:3px; }
}

@media(max-width:600px){
    .characters{ grid-template-columns:1fr; width:min(260px,100%); }
    .edu-grid{ grid-template-columns:1fr; }
    .result-card{ width:100%; }
}

@media(prefers-reduced-motion:reduce){
    .card-inner,
    .game-card,
    .character,
    .edu-card{ transition-duration:.01ms; }
    .timer.done{ animation:none; }
}

/* ==================================================
   JERES CASE – SKAL ALTID VÆRE MAKS 100vh
   Siden låses til skærmhøjden, og kortene deler den plads, der er til rådighed
   (3 x 2 kort på computer, 2 x 3 på mobil). Ingen scroll.
================================================== */

#page-case{
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    padding:12px 20px;
    align-items:stretch;
}

#page-case .container{
    height:100%;
    min-height:0;
    justify-content:flex-start;
}

#page-case h1{
    flex-shrink:0;
    margin:0 0 8px;
    font-size:clamp(1.3rem,4.5vh,2.4rem);
}

/* Kortområdet fylder resten af højden */
#page-case .results{
    flex:1 1 0;
    min-height:0;
    width:min(1100px,92vw);
    margin:0;
    padding:6px 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:12px 22px;
}

#page-case .result-card{
    width:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
}

#page-case .card-value{
    flex:1 1 0;
    min-height:0;
    aspect-ratio:auto;
    padding:10px 14px;
    overflow:hidden;
}

#page-case .card-value p{
    font-size:clamp(.95rem,2.8vh,1.5rem);
    line-height:1.25;
}

/* Karakterbilledet beskæres, så det passer i kortet */
#page-case .result-card img{
    flex:1 1 0;
    height:0;
    min-height:0;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 20%;
    padding:4px;
}

#page-case .card-footer{
    flex-shrink:0;
    margin-top:6px;
    font-size:clamp(.95rem,2.6vh,1.5rem);
}

#page-case .card-sub{
    flex-shrink:0;
    font-size:clamp(.8rem,2.2vh,1.1rem);
}

#page-case .summary{
    flex-shrink:0;
    margin:6px auto 0;
    font-size:clamp(.85rem,2.4vh,1.25rem);
    line-height:1.35;
}

#page-case #caseBtn{
    flex-shrink:0;
    margin-top:10px;
    padding:10px 24px;
}

@media(max-width:900px){
    #page-case{ padding:8px 12px; }

    #page-case .results{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(3,minmax(0,1fr));
        gap:8px 12px;
    }

    #page-case .card-value{ padding:6px 8px; }
    #page-case .card-value p{ font-size:clamp(.75rem,2.1vh,1rem); }
    #page-case .summary{ font-size:.8rem; max-height:20vh; overflow:auto; }
}

/* ==================================================
   FULD SKÆRM-KNAP (øverst til højre)
================================================== */

.fs-btn{
    position:fixed;
    top:12px;
    right:12px;
    z-index:2000;
    margin:0;
    width:46px;
    height:46px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.55);
    border-bottom:4px solid rgba(0,0,0,.8);
    --px:3px;
}

.fs-btn[hidden]{ display:none; }

.fs-btn:hover{ background:#0066ff; border-bottom-color:#003a99; }

.fs-btn svg{
    fill:none;
    stroke:white;
    stroke-width:3;
    stroke-linecap:square;
    shape-rendering:crispEdges;
}

/* Vis udvid-ikon normalt og luk-ikon i fuld skærm */
.fs-btn .fs-exit{ display:none; }
.fs-btn[data-on="true"] .fs-enter{ display:none; }
.fs-btn[data-on="true"] .fs-exit{ display:block; }

@media(max-width:600px){
    .fs-btn{ top:8px; right:8px; width:40px; height:40px; }
}

/* ==================================================
   UNDERVISER-VERSION (knap øverst til venstre på forsiden)
================================================== */

.teacher-btn{
    position:absolute;
    top:12px;
    left:12px;
    z-index:5;
    margin:0;
    padding:12px 18px;
    font-size:1rem;
    background:rgba(0,0,0,.55);
    border-bottom:4px solid rgba(0,0,0,.8);
    --px:3px;
}

.teacher-btn:hover{ background:#0066ff; border-bottom-color:#003a99; }

/* Når underviser-versionen er slået til */
.teacher-btn.on{
    background:#ffd23f;
    color:#2b1a12;
    border-bottom-color:#b8921a;
}

.teacher-btn.on:hover{ background:#ffe07a; }

@media(max-width:600px){
    .teacher-btn{ top:8px; left:8px; padding:9px 12px; font-size:.85rem; }
}