/* Homepage art direction. Deliberately scoped: no game-board or global token changes. */
.kokomo-home{margin:0;--home-outline:#2b2150;--home-paper:var(--lu-surface);--home-sky:#d8f2f0;--home-shadow:0 5px 0 #2b2150;--home-width:1120px}
:root[data-theme="dark"] .kokomo-home{--home-outline:#c7a6ff;--home-sky:#293e55;--home-shadow:0 5px 0 #0b0818}
.kokomo-home>.lu-topbar{max-width:var(--home-width);margin:auto;padding:22px 0 18px;border-bottom:2px solid var(--lu-line)}
.kokomo-home .lu-topbar__brand{color:var(--lu-grape);font-size:36px;letter-spacing:-1.5px;gap:0}
.kokomo-home .lu-topbar__brand .dot{color:var(--lu-bubblegum)}
.kokomo-home .lu-account,.kokomo-home .lu-icon-btn{border:2px solid var(--home-outline);box-shadow:none;border-radius:12px}
.kokomo-home .lu-account{min-height:44px;padding-inline:14px}
.kokomo-home .home-welcome{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:24px;max-width:var(--home-width);margin:28px auto 24px;padding:0;text-align:left;isolation:isolate}
.kokomo-home .home-intro{padding:12px 0}
.kokomo-home .home-wordmark{display:none}
.kokomo-home .home-welcome h1{font-size:clamp(30px,3.5vw,44px);font-weight:600;line-height:1.14;letter-spacing:-.8px;max-width:590px;margin:0;color:var(--lu-ink)}
.kokomo-home .home-personal .home-intro{min-width:0;overflow-wrap:anywhere}
.kokomo-home .home-greeting{font-family:var(--lu-font-display);font-size:clamp(34px,4.5vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.8px;margin:0 0 14px;color:var(--lu-ink)}
.kokomo-home .home-greeting-line{font-size:clamp(18px,2vw,25px);font-weight:700;line-height:1.4;max-width:540px;margin:0 0 20px;color:var(--lu-ink)}
.kokomo-home .home-personal h1{font-family:var(--lu-font-ui);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:0;max-width:460px;color:var(--lu-ink-soft)}
.kokomo-home #vedur-lina{margin:20px 0 0!important;font-size:15px!important;opacity:1!important;line-height:1.5;color:var(--lu-ink-soft)}
.kokomo-home .home-personal #vedur-lina{display:none!important}
.kokomo-home .home-island{position:relative;background:var(--home-sky);border:2.5px solid var(--home-outline);border-radius:37% 41% 28% 25% / 28% 34% 23% 25%;aspect-ratio:520/350;min-width:0;overflow:visible}
.kokomo-home .home-island-art{display:block;width:100%;height:100%;pointer-events:none}
.kokomo-home .home-island .lu-hero__mascot{position:absolute;left:23%;bottom:14%;width:43%;height:auto;aspect-ratio:220/240;display:block;filter:none;transform-origin:50% 95%;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
.kokomo-home .home-island .lu-hero__mascot>img{object-fit:contain}
.kokomo-home #today-slate,.kokomo-home #recommended-card{max-width:var(--home-width)!important;width:100%;padding:0!important;margin:0 auto 18px!important}
.kokomo-home #recommended-card>div{border:2px solid var(--home-outline)!important;box-shadow:var(--home-shadow)!important;border-radius:18px!important;padding:19px 23px!important}

/* Illustrated paper cards. The hero above is the approved, unchanged reference. */
.kokomo-home :is(.lu-game,.fag){--home-tint:#eae2fa;--home-patch:var(--lu-grape)}
.kokomo-home :is(.g-sky,[data-litur="sky"]){--home-tint:#e0f1f8;--home-patch:var(--lu-sky)}
.kokomo-home :is(.g-grass,[data-litur="grass"]){--home-tint:#e0f2eb;--home-patch:var(--lu-grass)}
.kokomo-home :is(.g-sunny,[data-litur="sunny"]){--home-tint:#fff0c4;--home-patch:var(--lu-sunny)}
.kokomo-home :is(.g-coral,[data-litur="coral"]){--home-tint:#ffebe4;--home-patch:var(--lu-coral)}
.kokomo-home :is(.g-bubblegum,[data-litur="bubblegum"]){--home-tint:#fbe5ef;--home-patch:var(--lu-bubblegum)}
:root[data-theme="dark"] .kokomo-home :is(.lu-game,.fag){--home-tint:#322849}
:root[data-theme="dark"] .kokomo-home :is(.g-sky,[data-litur="sky"]){--home-tint:#263d4a}
:root[data-theme="dark"] .kokomo-home :is(.g-grass,[data-litur="grass"]){--home-tint:#263f3d}
:root[data-theme="dark"] .kokomo-home :is(.g-sunny,[data-litur="sunny"]){--home-tint:#473d30}
:root[data-theme="dark"] .kokomo-home :is(.g-coral,[data-litur="coral"]){--home-tint:#493139}
:root[data-theme="dark"] .kokomo-home :is(.g-bubblegum,[data-litur="bubblegum"]){--home-tint:#432f48}

.kokomo-home .lu-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--home-width);padding:0;gap:18px;margin:0 auto 26px;align-items:stretch}
.kokomo-home .lu-game{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr) 22px;gap:12px;align-items:center;min-height:126px;padding:17px 15px;border:1.8px solid var(--home-outline);border-radius:17px 19px 16px 20px;background:var(--home-paper);color:var(--lu-ink);box-shadow:0 3px 0 var(--home-outline);text-decoration:none;transition:transform var(--lu-dur-fast) ease,box-shadow var(--lu-dur-fast) ease,background-color var(--lu-dur-fast) ease}
.kokomo-home .lu-game__icon{position:relative;isolation:isolate;display:grid;place-items:center;width:78px;height:82px;flex:none;background:none;border-radius:0;box-shadow:none}
.kokomo-home .lu-game__icon::before{content:"";position:absolute;inset:7px 2px 4px;background:var(--home-patch);border-radius:45% 38% 42% 35%;transform:rotate(-5deg);z-index:-1}
.kokomo-home .lu-game__icon img{display:block;width:78px;height:78px;object-fit:contain;filter:none}
.kokomo-home .lu-game__info{min-width:0;overflow-wrap:anywhere}
.kokomo-home .lu-game__info :is(h2,h3){font-family:var(--lu-font-display);font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:0;margin:0 0 7px;color:var(--lu-ink)}
.kokomo-home .lu-game__info p{font-family:var(--lu-font-ui);font-size:.875rem;line-height:1.5;font-weight:700;margin:0;color:var(--lu-ink-soft)}
.kokomo-home .lu-game__go{width:22px;height:32px;border:0;border-radius:7px;box-shadow:none;background:var(--lu-primary);color:var(--lu-primary-fg);font-size:19px;align-self:center}
.kokomo-home .lu-game:active{transform:translateY(3px);box-shadow:0 0 0 var(--home-outline)}

/* Two destinations, each shown once. Illustration and name form one target. */
.kokomo-home .home-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px auto 28px;scroll-margin-top:24px}
.kokomo-home .home-collection .lu-game{grid-template-columns:136px minmax(0,1fr) 22px;gap:18px;min-height:158px;padding:15px 22px 15px 12px;background:var(--home-paper);border-width:2px;border-radius:21px 24px 20px 23px;box-shadow:0 4px 0 var(--home-outline)}
.kokomo-home .home-collection .lu-game__icon{width:136px;height:122px}
.kokomo-home .home-collection .lu-game__icon::before{display:none}
.kokomo-home .home-collection .lu-game__icon img{width:136px;height:122px}
.kokomo-home .home-collection .lu-game__info h3{font-size:1.625rem;margin:0 0 9px}
.kokomo-home .home-collection .lu-game__info p{font-size:1rem;line-height:1.45}

/* Category controls have a quieter, horizontal shape distinct from game cards. */
.kokomo-home .fog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--home-width);gap:14px;padding:0;margin:22px auto 32px}
.kokomo-home .fag{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:15px;row-gap:4px;min-width:0;min-height:109px;padding:14px 16px;border:1.8px solid var(--home-outline);border-radius:15px 18px 15px 17px;background:var(--home-paper);color:var(--lu-ink);box-shadow:0 3px 0 var(--home-outline);text-align:left;transition:transform var(--lu-dur-fast) ease,box-shadow var(--lu-dur-fast) ease,background-color var(--lu-dur-fast) ease}
.kokomo-home .fag .fag-takn{position:relative;isolation:isolate;grid-row:1/3;width:74px;height:74px;display:grid;place-items:center;border-radius:0;background:none;box-shadow:none;transform:none}
.kokomo-home .fag .fag-takn::before{content:"";position:absolute;inset:5px 0;background:var(--home-patch);border-radius:42% 38% 43% 36%;transform:rotate(5deg);z-index:-1}
.kokomo-home .fag .fag-takn img{display:block;width:74px;height:74px;object-fit:contain;transform:none}
.kokomo-home .fag-nafn{font-family:var(--lu-font-display);font-size:1.25rem;font-weight:600;line-height:1.2;text-align:left;letter-spacing:0;align-self:end;overflow-wrap:anywhere}
.kokomo-home .fag-fj{font-size:.875rem;font-weight:700;line-height:1.4;color:var(--lu-ink-soft);align-self:start}
.kokomo-home .fag[aria-pressed="true"]{background:var(--lu-primary);color:var(--lu-primary-fg);border-color:var(--home-outline);box-shadow:0 1px 0 var(--home-outline);transform:translateY(2px)}
.kokomo-home .fag[aria-pressed="true"] :is(.fag-nafn,.fag-fj){color:var(--lu-primary-fg)}
.kokomo-home .fag[aria-pressed="true"] .fag-takn::before{background:#ffffff}
.kokomo-home .fag[aria-pressed="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:7px;height:3px;border-radius:3px;background:var(--lu-primary-fg)}
.kokomo-home .fag:active{transform:translateY(3px);box-shadow:none}

/* The recommendation uses the same paper and ink, with a single clear action. */
.kokomo-home #recommended-card>div{background:var(--home-paper)!important;color:var(--lu-ink)!important;box-shadow:0 3px 0 var(--home-outline)!important;padding:18px 20px!important;gap:18px!important}
.kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:first-child{display:grid;place-items:center;width:58px;height:58px;flex:none;border:1.8px solid #2b2150;border-radius:13px 15px 12px 15px;background:#ffe099;transform:rotate(-4deg)}
.kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:nth-child(2)>div:first-child{font-size:.875rem!important;letter-spacing:0!important;text-transform:none!important;opacity:1!important;color:var(--lu-ink-soft)}
.kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:nth-child(2)>div:nth-child(2){font-size:1.5rem!important;font-weight:600!important;line-height:1.2!important;margin:3px 0!important}
.kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:nth-child(2)>div:last-child{font-size:.875rem!important;line-height:1.4!important;font-weight:700!important;opacity:1!important;color:var(--lu-ink-soft)}
.kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:last-child{padding:11px 16px;border:1.8px solid #2b2150;border-radius:11px 13px 11px 12px;background:var(--lu-primary);color:var(--lu-primary-fg);font-size:1rem!important;box-shadow:0 2px 0 #2b2150}

.kokomo-home #streak-bar{max-width:var(--home-width);background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:22px auto 14px;justify-content:flex-start;gap:10px}
.kokomo-home #streak-bar .lu-chip{font-size:14px;min-height:35px;border-radius:9px!important;padding:7px 12px}
.kokomo-home #threp-progress{max-width:var(--home-width)!important;padding:0!important;margin:0 auto 22px!important}
.kokomo-home #threp-progress:has(#threp-label:empty){display:none!important}
.kokomo-home #personuradir,.kokomo-home .fag-efni,.kokomo-home .lu-efni{max-width:var(--home-width)!important;margin-inline:auto;padding-inline:0!important}
.kokomo-home .home-search{max-width:var(--home-width)!important;margin:26px auto 0!important;padding:0!important}
.kokomo-home #leikja-leit{border:1.8px solid var(--home-outline)!important;border-radius:12px 15px 12px 14px!important;font-size:1rem!important;padding:13px 16px!important}
.kokomo-home .fag-titill{font-size:1.875rem;letter-spacing:0;text-align:left;margin:28px 0 20px}
.kokomo-home .fag-efni{scroll-margin-top:24px}
.kokomo-home .lu-section-title{max-width:var(--home-width);padding:0}
.kokomo-home .lu-cta{max-width:var(--home-width);padding:0}
.kokomo-home .lu-cta .lu-btn{border:1.5px solid var(--home-outline);border-radius:13px;box-shadow:0 2px 0 var(--home-outline);background:var(--home-paper);color:var(--lu-ink)}
.kokomo-home .lu-footer{max-width:var(--home-width);margin:40px auto 0;border-top:2px solid var(--lu-line);padding:25px 0 35px;font-size:14px}
.kokomo-home .en-prose{max-width:var(--home-width);padding-inline:0}
.kokomo-home .en-prose>p{max-width:750px;font-size:17px}
.kokomo-home a:focus-visible,.kokomo-home button:focus-visible,.kokomo-home input:focus-visible{outline:3px solid var(--lu-ink-accent)!important;outline-offset:5px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .kokomo-home .lu-game:hover{background:var(--home-tint);transform:translateY(-2px);box-shadow:0 5px 0 var(--home-outline)}
 .kokomo-home .fag:hover{background:var(--home-tint);transform:translateY(-1px);box-shadow:0 4px 0 var(--home-outline)}
 .kokomo-home .fag[aria-pressed="true"]:hover{background:var(--lu-primary);transform:translateY(2px);box-shadow:0 1px 0 var(--home-outline)}
}
@media(max-width:1180px){.kokomo-home{padding-inline:24px}}
@media(max-width:1000px){.kokomo-home .lu-games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .kokomo-home .home-collection{grid-template-columns:1fr;gap:15px}
 .kokomo-home .home-collection .lu-game{grid-template-columns:110px minmax(0,1fr) 22px;min-height:128px;padding:12px 22px 12px 12px;gap:18px}
 .kokomo-home .home-collection .lu-game__icon,.kokomo-home .home-collection .lu-game__icon img{width:110px;height:100px}
 .kokomo-home .home-collection .lu-game__info h3{font-size:1.5rem;margin-bottom:6px}
 .kokomo-home .fog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .kokomo-home{padding-inline:16px}
 .kokomo-home>.lu-topbar{padding:16px 0}
 .kokomo-home .lu-topbar__brand{font-size:30px}
 .kokomo-home .home-welcome{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin:24px auto}
 .kokomo-home .home-welcome h1{font-size:30px}
 .kokomo-home .fag{grid-template-columns:62px minmax(0,1fr);column-gap:12px;padding:12px}
 .kokomo-home .fag .fag-takn,.kokomo-home .fag .fag-takn img{width:62px;height:68px}
 .kokomo-home .fag-nafn{font-size:1.125rem}
}
@media(max-width:640px){
 .kokomo-home .lu-games{grid-template-columns:1fr;gap:14px}
 .kokomo-home .lu-game{grid-template-columns:78px minmax(0,1fr) 22px;min-height:112px;padding:14px;gap:14px}
 .kokomo-home .home-collection .lu-game{grid-template-columns:96px minmax(0,1fr) 18px;padding:12px;gap:14px}
 .kokomo-home .home-collection .lu-game__icon,.kokomo-home .home-collection .lu-game__icon img{width:96px;height:100px}
 .kokomo-home .home-collection .lu-game__info p{font-size:.9375rem}
 .kokomo-home #recommended-card>div{gap:12px!important;padding:14px!important;flex-wrap:wrap}
 .kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:nth-child(2){min-width:150px}
 .kokomo-home #recommended-card>div:has(>div:nth-child(3))>div:last-child{margin-left:auto}
}
@media(max-width:520px){
 .kokomo-home .fog{gap:13px}
 .kokomo-home .fag{grid-template-columns:1fr;grid-template-rows:60px auto 1fr;gap:6px;justify-items:center;min-height:147px;padding:12px 9px;text-align:center}
 .kokomo-home .fag .fag-takn{grid-row:auto;width:64px;height:60px}
 .kokomo-home .fag .fag-takn img{width:64px;height:64px}
 .kokomo-home .fag-nafn{text-align:center;align-self:center;font-size:1.0625rem}
 .kokomo-home .fag-fj{font-size:.875rem;text-align:center}
 .kokomo-home .fag[aria-pressed="true"]::after{bottom:5px}
}
@media(max-width:480px){
 .kokomo-home{padding-inline:14px}
 .kokomo-home .home-welcome{gap:9px;grid-template-columns:1fr 145px;margin:20px auto}
 .kokomo-home .home-welcome h1{font-size:25px;letter-spacing:-.35px;line-height:1.18}
 .kokomo-home .home-island{min-height:175px;aspect-ratio:auto}
 .kokomo-home .home-island-art{position:absolute;inset:0;width:100%;object-fit:cover;object-position:65% 50%;border-radius:inherit}
 .kokomo-home .home-island .lu-hero__mascot{left:5%;bottom:8%;width:78%}
 .kokomo-home #vedur-lina{font-size:13px!important;margin-top:12px!important}
 .kokomo-home .home-collection .lu-game{grid-template-columns:83px minmax(0,1fr) 16px;gap:10px;min-height:118px}
 .kokomo-home .home-collection .lu-game__icon,.kokomo-home .home-collection .lu-game__icon img{width:83px;height:90px}
 .kokomo-home .home-collection .lu-game__info h3{font-size:1.375rem}
 .kokomo-home .lu-topbar__right{gap:7px}
 .kokomo-home .lu-account{padding-inline:9px}
}
@media(max-width:380px){.kokomo-home .lu-topbar__brand{font-size:24px}}
@media(max-width:640px){
 .kokomo-home .home-personal{grid-template-columns:minmax(0,1fr) 135px;gap:12px}
 .kokomo-home .home-personal .home-greeting{font-size:30px;letter-spacing:-.35px;margin-bottom:10px}
 .kokomo-home .home-personal .home-greeting-line{font-size:17px;line-height:1.4;margin-bottom:14px}
 .kokomo-home .home-personal h1{font-size:13px;line-height:1.5;letter-spacing:0}
}
@media(max-width:380px){.kokomo-home .home-personal{grid-template-columns:minmax(0,1fr) 110px;gap:9px}}
@media(prefers-reduced-motion:reduce){.kokomo-home .fag,.kokomo-home .lu-game{transition:none;transform:none!important}}