/* Adventskalender (Schwedisch) – gemeinsames Grunddesign aller Tage.
   Bewusst immer dunkles „Nacht“-Design (wie die übrigen Sprachversionen des Kalenders), daher in
   Light und Dark Mode identisch. Hintergrund rein per CSS, ohne Fotos. */
:root{color-scheme:dark;--text:#fbf7ef;--muted:#cfe0e2;--gold:#e7cb94;--line:rgba(231,203,148,.3);--ink:#102630}
*{box-sizing:border-box}html{min-height:100%;background:#091a22}body{margin:0;min-height:100svh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;line-height:1.45;background:transparent!important}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,13,18,.65),rgba(3,13,18,.35) 45%,rgba(3,13,18,.8)),radial-gradient(1.5px 1.5px at 12% 18%,#ffffffb0,transparent),radial-gradient(1px 1px at 28% 8%,#ffffff90,transparent),radial-gradient(1.5px 1.5px at 47% 22%,#ffffff80,transparent),radial-gradient(1px 1px at 66% 12%,#ffffffa0,transparent),radial-gradient(1.5px 1.5px at 83% 26%,#ffffff90,transparent),radial-gradient(1px 1px at 92% 6%,#ffffff80,transparent),radial-gradient(ellipse 70% 40% at 25% -5%,rgba(70,190,160,.32),transparent 70%),radial-gradient(ellipse 60% 35% at 80% 0%,rgba(90,140,220,.28),transparent 70%),radial-gradient(circle at 12% 92%,rgba(231,203,148,.16),transparent 30%),radial-gradient(circle at 88% 80%,rgba(231,203,148,.12),transparent 28%),linear-gradient(180deg,#0c2430 0%,#091a22 55%,#051017 100%)}
.container{width:min(100%,920px);height:100svh;min-height:600px;margin:auto;padding:18px 26px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px}.day-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;font-size:12px;color:var(--muted)}.back-link{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--muted)}.back-link:hover{color:var(--gold)}.day-label{color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-size:11px}.header{text-align:center}.title{font-size:clamp(22px,3.4vw,32px);font-weight:650;letter-spacing:-.7px;line-height:1.2;color:var(--text)!important;margin:0 0 10px}.divider{height:2px;width:36px;background:var(--gold);margin:12px auto}.subtitle{font-size:13px;color:var(--muted);margin:0;line-height:1.5}.game-area{min-height:0;display:flex;justify-content:center;align-items:center;width:100%}.vocab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(100%,calc((100svh - 260px)*1.3333));max-width:760px}
.vocab-card{width:100%;min-width:0;aspect-ratio:1;cursor:pointer;perspective:1000px;border-radius:13px;transition:transform .18s}.vocab-card:active{transform:scale(.98)}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.vocab-card.flipped .card-inner,.vocab-card.matched .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border:1px solid var(--line);border-radius:13px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;box-shadow:0 4px 14px #0002}.card-back{background:rgba(12,40,52,.82)!important;border-color:rgba(231,203,148,.25)}.card-front{transform:rotateY(180deg);background:#13364a!important;border-color:var(--gold)!important}.vocab-card.matched .card-front{background:#081d26!important;box-shadow:inset 0 0 0 1px #e7cb9433,0 5px 16px #0003}.vocab-card.matched .card-front:after{content:"✓";position:absolute;right:8px;top:4px;font-size:12px;color:var(--gold)}.card-back-icon{font-size:clamp(25px,3.5vw,38px);line-height:1.2}.vocab-icon{font-size:clamp(24px,3.1vw,34px);line-height:1.2}.vocab-word{font-size:clamp(13px,1.7vw,17px);font-weight:600;color:var(--text);text-align:center;line-height:1.25;overflow-wrap:anywhere;margin:0}.vocab-translation{font-size:clamp(12px,1.4vw,14px);line-height:1.25;color:var(--muted);text-align:center;margin:0}
.footer{width:min(100%,500px);margin:auto;text-align:center}.progress-bar{height:4px;border-radius:20px;background:#ffffff15;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;width:0;background:var(--gold)!important;border-radius:20px;transition:width .35s}.score-display{font-size:12px;color:var(--muted);margin-bottom:12px}.score-number{color:var(--gold)!important;font-weight:600}.start-button{min-height:44px;border:0;border-radius:10px;background:var(--gold);color:#102630;padding:10px 26px;font:600 14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}.start-button:hover{background:#f4dba9}a:focus-visible,button:focus-visible{outline:3px solid #ffdc98;outline-offset:4px}
@media(hover:hover){.vocab-card:hover .card-back{border-color:var(--gold)}}
@media(max-width:739px){.container{padding:12px 18px;gap:12px;min-height:640px}.vocab-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,calc((100svh - 270px)*.75));gap:8px}.card-face{padding:8px;gap:4px}.vocab-word{font-size:13px}.vocab-translation{font-size:12px}.title{font-size:24px}.subtitle{font-size:12px}}
/* Small heights and zoom keep content reachable rather than clipping the board. */
@media(max-width:739px) and (max-height:640px){.container{height:auto;min-height:100svh}.vocab-grid{width:100%;max-width:380px}.vocab-card{min-height:88px}.game-area{padding:4px 0}}
@media(min-width:740px) and (max-height:600px){.container{height:auto;min-height:100svh;gap:8px;padding:10px 22px}.vocab-grid{grid-template-columns:repeat(6,minmax(0,1fr));width:100%;max-width:780px}.vocab-card{min-height:86px}.divider{margin:8px auto}.title{font-size:24px}.subtitle{font-size:12px}.score-display{margin-bottom:8px}.day-nav{min-height:36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Shared cinematic day intro. The exercise code does not depend on it. */
.day-cinema{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,rgba(20,62,72,.92),rgba(1,8,11,.99));animation:day-curtain 3.2s ease forwards;overflow:hidden}.day-cinema[hidden]{display:none}.cinema-content{text-align:center;padding:28px;pointer-events:none}.cinema-credit{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 22px;animation:day-text 1s ease .1s both}.cinema-title{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(60px,13vw,110px);line-height:1.1;letter-spacing:1px;color:#fff6e5;margin:0;animation:day-title 1.7s cubic-bezier(.2,.65,.2,1) .3s both}.cinema-line{width:110px;height:1px;margin:24px auto 18px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:day-line 1.1s ease .6s both}.cinema-subtitle{font-size:12px;letter-spacing:2px;color:var(--gold);margin:0;animation:day-text 1.1s ease .8s both}.skip-intro{position:absolute;right:22px;bottom:max(22px,env(safe-area-inset-bottom));min-height:44px;padding:10px 16px;border:1px solid #ffffff30;border-radius:30px;background:transparent;color:var(--muted);font:12px system-ui;cursor:pointer}.intro-running:before{animation:day-camera 3.2s ease both}.header,.day-nav,.footer{animation:day-text .6s ease backwards}.vocab-card{animation:day-text .55s cubic-bezier(.2,.7,.2,1) var(--enter-delay,.2s) backwards}.intro-running .header,.intro-running .day-nav,.intro-running .footer,.intro-running .vocab-card{animation-play-state:paused}
@keyframes day-curtain{0%,55%{opacity:1}100%{opacity:0}}@keyframes day-camera{from{transform:scale(1.06)}to{transform:scale(1)}}@keyframes day-title{from{opacity:0;transform:scale(1.1) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes day-text{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes day-line{from{opacity:0;transform:scaleX(.1)}to{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.day-cinema{display:none!important}}
/* Completion dialog shared by the memory days. */
.completion{width:calc(100% - 32px);max-width:390px;max-height:calc(100svh - 36px);overflow:auto;border:1px solid var(--gold);border-radius:20px;padding:28px;background:#0f2c38;color:var(--text);text-align:center;box-shadow:0 24px 90px #0008}.completion::backdrop{background:#040a1ab8;backdrop-filter:blur(5px)}.completion[open]{animation:completion-in .3s ease}.completion-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 17px;border:1px solid var(--gold);border-radius:50%;font-size:27px;color:var(--gold)}.completion h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400;line-height:1.2;margin:0 0 12px}.completion p{font-size:14px;color:var(--muted);margin:0 0 24px}.completion-actions{display:grid;gap:10px}.completion-actions button,.completion-actions a{display:block;min-height:46px;border-radius:10px;padding:12px 16px;font:600 14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;text-align:center}.completion-actions a{color:#102630;background:var(--gold)}.completion-actions a:hover{background:#f4dba9}.completion-actions button{border:1px solid var(--line);color:var(--text);background:transparent;cursor:pointer}.completion-actions button:hover{background:#ffffff08}@keyframes completion-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}