/*
Theme Name: Hattis
Theme URI: https://hattis.fi/
Author: Hattis.fi
Description: Muokattava Hattis-teema WordPressiin. Kuvia, tekstejä, nappeja, värejä ja some-linkkejä voi vaihtaa hallinnasta.
Version: 1.92.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: hattis
*/

:root{
  --hattis-teal:#109a9a;
  --hattis-teal-dark:#087777;
  --hattis-pink:#f04471;
  --hattis-yellow:#ffbd1f;
  --hattis-purple:#8657a7;
  --hattis-cream:#fffaf0;
  --hattis-ink:#1f2527;
  --hattis-card:#ffffff;
  --hattis-radius:26px;
  --hattis-shadow:0 10px 26px rgba(39,75,78,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hattis-cream);color:var(--hattis-ink);font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;line-height:1.55}
a{color:inherit}.screen-reader-text{position:absolute;left:-9999px}
.site-shell{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{position:relative;background:rgba(255,250,240,.96);z-index:10;border-bottom:1px solid rgba(16,154,154,.12)}
.header-inner{min-height:88px;display:flex;align-items:center;gap:28px}
.custom-logo-link{display:flex;align-items:center}.custom-logo{max-height:70px;width:auto}.site-title{font-size:2rem;font-weight:900;text-decoration:none;color:var(--hattis-teal)}
.primary-nav{margin-left:auto}.primary-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}.primary-nav a{text-decoration:none;font-weight:900;text-transform:uppercase;font-size:.93rem}.primary-nav a:hover,.primary-nav .current-menu-item>a{color:var(--hattis-pink)}
.header-cta{display:inline-flex;align-items:center;padding:12px 18px;border-radius:14px;background:var(--hattis-pink);color:white;text-decoration:none;font-weight:900;box-shadow:var(--hattis-shadow)}
.menu-toggle{display:none;border:0;background:var(--hattis-teal);color:#fff;border-radius:12px;padding:10px 12px;font-weight:900}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#e8fbfb 0%,#d7f7f4 100%);padding:56px 0 0}
.hero:after,.site-footer:before{content:"";display:block;height:32px;background:var(--hattis-cream);clip-path:polygon(0 38%,8% 54%,16% 34%,25% 58%,35% 35%,45% 57%,55% 34%,65% 56%,74% 35%,84% 58%,93% 37%,100% 50%,100% 100%,0 100%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:28px;min-height:500px}
.eyebrow{font-weight:1000;color:var(--hattis-teal);font-size:clamp(1.3rem,3vw,2.25rem);text-transform:uppercase;margin:0}
.hero h1{font-size:clamp(3rem,7vw,6.2rem);line-height:.88;letter-spacing:-.045em;margin:.08em 0 .22em;color:var(--hattis-pink);text-transform:uppercase}.hero h1 span{display:block;color:var(--hattis-teal);font-size:.62em;letter-spacing:-.02em;margin-top:.18em}.hero-copy{font-size:1.15rem;max-width:620px;font-weight:700}
.hero-art{position:relative;align-self:end;min-height:480px;display:flex;align-items:flex-end;justify-content:center}.hero-art img{display:block;max-width:100%;max-height:620px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 8px rgba(23,71,72,.08))}
.quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0 34px}.quick-link{min-height:112px;padding:18px 12px;border-radius:20px;text-decoration:none;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-weight:1000;line-height:1.1;box-shadow:var(--hattis-shadow);transition:transform .18s ease}.quick-link:hover{transform:translateY(-4px)}.quick-icon{font-size:2rem;margin-bottom:8px}.quick-link:nth-child(1){background:var(--hattis-teal)}.quick-link:nth-child(2){background:var(--hattis-pink)}.quick-link:nth-child(3){background:var(--hattis-yellow)}.quick-link:nth-child(4){background:var(--hattis-purple)}
.section{padding:30px 0}.section-title{margin:0 0 18px;color:var(--hattis-teal);font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;letter-spacing:-.03em}.section-intro{max-width:720px;margin-top:-10px;margin-bottom:24px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{overflow:hidden;background:#fff;border-radius:var(--hattis-radius);box-shadow:var(--hattis-shadow);border:2px solid rgba(16,154,154,.13);display:flex;flex-direction:column}.feature-card:nth-child(2){background:#fff3f6;border-color:rgba(240,68,113,.17)}.feature-card:nth-child(3){background:#fff8dd;border-color:rgba(255,189,31,.24)}.feature-image{height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden}.feature-image img{width:100%;height:100%;object-fit:contain}.feature-body{padding:22px;display:flex;flex-direction:column;align-items:flex-start;flex:1}.feature-body h3{font-size:1.75rem;text-transform:uppercase;margin:0 0 8px}.feature-card:nth-child(1) h3{color:var(--hattis-teal)}.feature-card:nth-child(2) h3{color:var(--hattis-pink)}.feature-card:nth-child(3) h3{color:#dc9100}.feature-body p{margin:0 0 18px}.button{display:inline-flex;margin-top:auto;padding:11px 18px;border:0;border-radius:13px;background:var(--hattis-teal);color:#fff;text-decoration:none;font-weight:1000;text-transform:uppercase}.button.pink{background:var(--hattis-pink)}.button.yellow{background:#e89b00}.button.purple{background:var(--hattis-purple)}
.collection{background:rgba(134,87,167,.06);border-radius:32px;padding:28px}.card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.content-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 7px 18px rgba(30,60,60,.07);display:flex;flex-direction:column}.content-card-thumb{aspect-ratio:4/3;background:#eef9f7;display:flex;align-items:center;justify-content:center;overflow:hidden}.content-card.book .content-card-thumb{aspect-ratio:3/4}.content-card-thumb img{width:100%;height:100%;object-fit:cover}.content-card.book .content-card-thumb img{object-fit:contain}.content-card-body{padding:16px;display:flex;flex-direction:column;align-items:flex-start;flex:1}.content-card h3{margin:0 0 7px;font-size:1.25rem}.content-card p{margin:0 0 14px;font-size:.94rem}.empty-note{padding:24px;border:2px dashed rgba(16,154,154,.3);border-radius:18px;background:#fff;text-align:center;grid-column:1/-1}
.adults{background:#e9f8f6;border-radius:32px;padding:30px;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}.adults-art img{width:100%;max-height:340px;object-fit:contain}.adults>div:last-child{width:100%;min-width:0}.adult-links{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.adult-link{display:flex;min-width:0;min-height:96px;padding:18px;background:#fff;border-radius:18px;text-decoration:none;font-weight:900;box-shadow:0 6px 16px rgba(30,60,60,.06);flex-direction:column;justify-content:center}.adult-link strong{display:block;color:var(--hattis-teal);margin-bottom:4px}
.site-footer{position:relative;margin-top:32px;background:var(--hattis-teal);color:#fff;padding-top:0}.site-footer:before{background:var(--hattis-cream);transform:rotate(180deg);margin-top:-1px}.footer-grid{display:grid;grid-template-columns:180px 1fr 1fr 1fr;gap:28px;align-items:end;padding:18px 0 36px}.footer-mascot{height:165px;display:flex;align-items:flex-end}.footer-mascot img{max-width:180px;max-height:190px;object-fit:contain;object-position:bottom}.footer-heading{font-weight:1000;text-transform:uppercase;margin-bottom:8px}.footer-links a,.footer-contact a{display:block;color:#fff;text-decoration:none;margin:4px 0}.social-links{display:flex;gap:10px;flex-wrap:wrap}.social-link{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--hattis-teal);text-decoration:none;font-weight:1000}.copyright{text-align:center;padding:0 0 18px;font-size:.85rem;opacity:.85}
.site-main.standard{padding:40px 0}.entry-content{max-width:820px}.entry-content img{max-width:100%;height:auto}

@media(max-width:900px){.header-inner{flex-wrap:wrap;padding:12px 0}.menu-toggle{display:block;margin-left:auto}.primary-nav{display:none;width:100%;order:10}.primary-nav.is-open{display:block}.primary-nav ul{flex-direction:column;align-items:flex-start;padding:12px 0}.header-cta{display:none}.hero{padding-top:30px}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-art{min-height:250px}.hero-art img{max-height:460px}.quick-links{grid-template-columns:repeat(2,1fr)}.feature-grid,.card-row{grid-template-columns:repeat(2,1fr)}.adults{grid-template-columns:1fr}.adult-links{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-mascot{grid-column:1/-1}}
@media(max-width:560px){.site-shell{width:min(100% - 22px,1180px)}.hero h1{font-size:3.25rem}.quick-links,.feature-grid,.card-row,.footer-grid{grid-template-columns:1fr}.feature-image{height:220px}.collection,.adults{padding:20px}.footer-mascot{height:130px}.footer-mascot img{max-height:150px}.custom-logo{max-height:56px}.site-title{font-size:1.6rem}}

/* 1.3: merellisempi hero, fanigalleria ja responsiiviset allergiakortit */
.hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 24%,rgba(255,255,255,.72) 0 4px,transparent 5px),
    radial-gradient(circle at 16% 31%,rgba(255,255,255,.45) 0 8px,transparent 9px),
    radial-gradient(circle at 84% 19%,rgba(255,255,255,.48) 0 6px,transparent 7px),
    radial-gradient(circle at 88% 27%,rgba(255,255,255,.30) 0 12px,transparent 13px),
    linear-gradient(180deg,#e9fcfc 0%,#d6f8f6 48%,#c9f1ef 100%);
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.48;
  background:
    radial-gradient(120% 38% at 50% 105%,transparent 58%,rgba(255,255,255,.55) 59% 61%,transparent 62%),
    radial-gradient(100% 30% at 38% 102%,transparent 55%,rgba(16,154,154,.08) 56% 59%,transparent 60%),
    radial-gradient(110% 26% at 76% 100%,transparent 56%,rgba(255,255,255,.5) 57% 59%,transparent 60%);
}
.hero:after{height:46px;clip-path:polygon(0 28%,6% 43%,12% 31%,18% 49%,25% 33%,31% 46%,38% 29%,45% 48%,52% 34%,59% 50%,66% 31%,73% 46%,80% 30%,87% 49%,94% 32%,100% 45%,100% 100%,0 100%)}
.adult-links{grid-template-columns:repeat(2,minmax(0,1fr))}.adult-link{width:100%}
.fan-gallery{margin-top:32px}.fan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.fan-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--hattis-shadow)}.fan-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.fan-card-body{padding:16px}.fan-card-body h2{margin:0 0 6px;color:var(--hattis-teal);font-size:1.2rem}.fan-upload{margin-top:34px;padding:26px;border-radius:26px;background:#e9f8f6}.fan-upload h2{margin-top:0;color:var(--hattis-pink);text-transform:uppercase}.fan-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fan-form label{display:flex;flex-direction:column;font-weight:900;gap:6px}.fan-form label:nth-child(2),.fan-form label:nth-child(3),.fan-form .button{grid-column:1/-1}.fan-form input,.fan-form textarea{width:100%;padding:12px;border:2px solid rgba(16,154,154,.2);border-radius:12px;font:inherit;background:#fff}.fan-form .button{justify-self:start}.fan-message{padding:12px 14px;border-radius:12px;background:#fff3f6}.fan-message.success{background:#eefaf4}
@media(max-width:900px){.fan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fan-grid,.fan-form{grid-template-columns:1fr}.fan-form label:nth-child(2),.fan-form label:nth-child(3),.fan-form .button{grid-column:auto}}


/* 1.4: elävä vedenalainen maailma – kuplat + merenpohja-footer */
.hero-bubbles,.footer-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero .site-shell,.site-footer .site-shell,.site-footer .copyright{position:relative;z-index:2}
.bubble{position:absolute;bottom:-90px;width:18px;height:18px;border:2px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 3px 3px 7px rgba(255,255,255,.35);animation:bubble-rise 13s linear infinite,bubble-wobble 3.8s ease-in-out infinite alternate;opacity:.68}
.bubble::after{content:"";position:absolute;width:28%;height:28%;left:20%;top:18%;border-radius:50%;background:rgba(255,255,255,.75)}
.bubble:nth-child(1){left:5%;width:15px;height:15px;animation-duration:11s;animation-delay:-4s}.bubble:nth-child(2){left:14%;width:31px;height:31px;animation-duration:17s;animation-delay:-10s}.bubble:nth-child(3){left:27%;width:11px;height:11px;animation-duration:9s;animation-delay:-2s}.bubble:nth-child(4){left:39%;width:23px;height:23px;animation-duration:15s;animation-delay:-8s}.bubble:nth-child(5){left:53%;width:13px;height:13px;animation-duration:12s;animation-delay:-5s}.bubble:nth-child(6){left:65%;width:38px;height:38px;animation-duration:20s;animation-delay:-14s}.bubble:nth-child(7){left:76%;width:18px;height:18px;animation-duration:14s;animation-delay:-7s}.bubble:nth-child(8){left:87%;width:28px;height:28px;animation-duration:18s;animation-delay:-12s}.bubble:nth-child(9){left:94%;width:10px;height:10px;animation-duration:10s;animation-delay:-1s}
@keyframes bubble-rise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.62}88%{opacity:.55}100%{transform:translate3d(0,-720px,0);opacity:0}}
@keyframes bubble-wobble{from{margin-left:-7px}to{margin-left:10px}}
.hero-grid{position:relative;z-index:2}

/* Syvempi vesitunnelma ilman että sisältö tummuu */
.hero{background:linear-gradient(180deg,#dffafa 0%,#c6f2ef 50%,#aee6e2 100%)}
.hero:before{opacity:.7}

/* Merenpohja footerissa */
.site-footer{overflow:hidden;background:linear-gradient(180deg,#118d91 0%,#087277 70%,#075f64 100%);padding-top:94px}
.site-footer:before{position:absolute;left:0;right:0;top:0;height:64px;z-index:3;background:var(--hattis-cream);transform:none;clip-path:polygon(0 0,100% 0,100% 42%,94% 55%,88% 37%,81% 58%,74% 41%,67% 61%,60% 39%,53% 57%,46% 36%,39% 59%,32% 40%,25% 58%,18% 38%,11% 56%,5% 39%,0 51%)}
.seabed{position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;z-index:1;overflow:hidden}
.seabed::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-45px;height:95px;border-radius:50% 50% 0 0/60% 60% 0 0;background:#e5b66b;box-shadow:0 -12px 0 rgba(255,226,161,.18)}
.sea-plant{position:absolute;bottom:30px;width:14px;height:118px;border-radius:80% 20% 65% 35%;background:#58b66f;transform-origin:50% 100%;animation:sea-sway 4.8s ease-in-out infinite alternate;opacity:.95}
.sea-plant::before,.sea-plant::after{content:"";position:absolute;width:12px;height:55px;background:inherit;border-radius:80% 20% 65% 35%;bottom:20px;transform-origin:50% 100%}
.sea-plant::before{left:-15px;transform:rotate(-28deg)}.sea-plant::after{right:-14px;bottom:42px;transform:rotate(32deg)}
.sea-plant.pink{background:#d96a8d;height:95px}.sea-plant.purple{background:#8d6ab0;height:132px}.sea-plant.dark{background:#2e8d68;height:145px}
.sea-plant:nth-child(1){left:3%;animation-delay:-1.4s}.sea-plant:nth-child(2){left:11%;animation-delay:-3s}.sea-plant:nth-child(3){left:21%;animation-delay:-.8s}.sea-plant:nth-child(4){left:73%;animation-delay:-2.2s}.sea-plant:nth-child(5){left:84%;animation-delay:-4s}.sea-plant:nth-child(6){left:94%;animation-delay:-1.1s}
@keyframes sea-sway{0%{transform:rotate(-5deg) translateX(-2px)}100%{transform:rotate(7deg) translateX(4px)}}
.footer-bubbles .bubble{bottom:10px;opacity:.4;animation-name:footer-bubble-rise,bubble-wobble}
@keyframes footer-bubble-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.45}100%{transform:translateY(-300px);opacity:0}}
.footer-grid{padding-top:12px;padding-bottom:72px}.copyright{padding-bottom:72px}

@media(max-width:560px){.site-footer{padding-top:76px}.seabed{height:150px}.sea-plant{height:90px}.sea-plant.purple,.sea-plant.dark{height:105px}.footer-grid{padding-bottom:58px}.copyright{padding-bottom:58px}.bubble:nth-child(2),.bubble:nth-child(6),.bubble:nth-child(8){display:none}}
@media(prefers-reduced-motion:reduce){.bubble,.sea-plant{animation:none!important}.bubble{opacity:.22;transform:none!important}}


/* 1.6: koko sivun syvä vedenalainen tausta + näkyvämmät kuplat */
body{
  position:relative;
  background:linear-gradient(180deg,#118d91 0%,#0b7d82 48%,#075f64 100%);
  background-attachment:fixed;
}
.site-header{z-index:20}
main,.site-footer{position:relative;z-index:2}
.global-bubbles{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.global-bubbles .bubble{
  border-width:2px;
  border-color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.13);
  box-shadow:inset 3px 3px 8px rgba(255,255,255,.42),0 0 10px rgba(255,255,255,.08);
  opacity:.82;
  animation-name:global-bubble-rise,bubble-wobble;
}
.global-bubbles .bubble:nth-child(1){left:2%;width:12px;height:12px;animation-duration:13s;animation-delay:-3s}
.global-bubbles .bubble:nth-child(2){left:7%;width:30px;height:30px;animation-duration:19s;animation-delay:-12s}
.global-bubbles .bubble:nth-child(3){left:13%;width:17px;height:17px;animation-duration:15s;animation-delay:-8s}
.global-bubbles .bubble:nth-child(4){left:20%;width:42px;height:42px;animation-duration:24s;animation-delay:-17s}
.global-bubbles .bubble:nth-child(5){left:27%;width:10px;height:10px;animation-duration:11s;animation-delay:-5s}
.global-bubbles .bubble:nth-child(6){left:34%;width:24px;height:24px;animation-duration:18s;animation-delay:-14s}
.global-bubbles .bubble:nth-child(7){left:41%;width:15px;height:15px;animation-duration:14s;animation-delay:-9s}
.global-bubbles .bubble:nth-child(8){left:48%;width:36px;height:36px;animation-duration:22s;animation-delay:-6s}
.global-bubbles .bubble:nth-child(9){left:55%;width:11px;height:11px;animation-duration:12s;animation-delay:-10s}
.global-bubbles .bubble:nth-child(10){left:61%;width:26px;height:26px;animation-duration:17s;animation-delay:-2s}
.global-bubbles .bubble:nth-child(11){left:68%;width:48px;height:48px;animation-duration:26s;animation-delay:-20s}
.global-bubbles .bubble:nth-child(12){left:74%;width:14px;height:14px;animation-duration:13s;animation-delay:-7s}
.global-bubbles .bubble:nth-child(13){left:80%;width:31px;height:31px;animation-duration:20s;animation-delay:-15s}
.global-bubbles .bubble:nth-child(14){left:86%;width:9px;height:9px;animation-duration:10s;animation-delay:-4s}
.global-bubbles .bubble:nth-child(15){left:91%;width:22px;height:22px;animation-duration:16s;animation-delay:-11s}
.global-bubbles .bubble:nth-child(16){left:96%;width:39px;height:39px;animation-duration:23s;animation-delay:-18s}
.global-bubbles .bubble:nth-child(17){left:17%;width:8px;height:8px;animation-duration:9s;animation-delay:-1s}
.global-bubbles .bubble:nth-child(18){left:71%;width:19px;height:19px;animation-duration:15s;animation-delay:-13s}
@keyframes global-bubble-rise{0%{transform:translate3d(0,110vh,0);opacity:0}7%{opacity:.82}92%{opacity:.72}100%{transform:translate3d(0,-130px,0);opacity:0}}
.hero{background:linear-gradient(180deg,#159ba0 0%,#0f898e 52%,#0a7479 100%)}
.hero:before{opacity:.28}
.hero:after{background:transparent}
.hero .eyebrow,.hero h1 span{color:#eaffff;text-shadow:0 2px 0 rgba(0,0,0,.08)}
.hero-copy{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.section-title{color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.12)}
.section-intro{color:#fff}
.collection{background:rgba(255,250,240,.94);box-shadow:0 12px 34px rgba(0,45,48,.16)}
.collection .section-title{color:var(--hattis-teal);text-shadow:none}
.adults{background:rgba(233,248,246,.96);box-shadow:0 12px 34px rgba(0,45,48,.16)}
.adults .section-title{color:var(--hattis-teal);text-shadow:none}
.site-footer{margin-top:0;background:linear-gradient(180deg,#0b7d82 0%,#075f64 70%,#054e53 100%)}
.site-footer:before{background:transparent}
.site-main.standard{color:#fff}
.site-main.standard .entry-content{background:rgba(255,250,240,.96);color:var(--hattis-ink);padding:28px;border-radius:26px;box-shadow:0 12px 34px rgba(0,45,48,.16)}
@media(max-width:560px){.global-bubbles .bubble:nth-child(4n){display:none}.global-bubbles .bubble{opacity:.7}}
@media(prefers-reduced-motion:reduce){.global-bubbles .bubble{animation:none!important;opacity:.18;transform:none!important}}


/* 1.7: runsaampi kuplamaailma + kunnollinen siirtymä herosta syvään veteen */
.global-bubbles .bubble{opacity:.9}
.global-bubbles .bubble:nth-child(19){left:4%;width:20px;height:20px;animation-duration:16s;animation-delay:-9s}
.global-bubbles .bubble:nth-child(20){left:10%;width:8px;height:8px;animation-duration:10s;animation-delay:-6s}
.global-bubbles .bubble:nth-child(21){left:16%;width:34px;height:34px;animation-duration:21s;animation-delay:-18s}
.global-bubbles .bubble:nth-child(22){left:23%;width:14px;height:14px;animation-duration:12s;animation-delay:-7s}
.global-bubbles .bubble:nth-child(23){left:30%;width:46px;height:46px;animation-duration:27s;animation-delay:-11s}
.global-bubbles .bubble:nth-child(24){left:37%;width:9px;height:9px;animation-duration:9s;animation-delay:-4s}
.global-bubbles .bubble:nth-child(25){left:44%;width:27px;height:27px;animation-duration:18s;animation-delay:-15s}
.global-bubbles .bubble:nth-child(26){left:51%;width:16px;height:16px;animation-duration:14s;animation-delay:-2s}
.global-bubbles .bubble:nth-child(27){left:58%;width:38px;height:38px;animation-duration:23s;animation-delay:-19s}
.global-bubbles .bubble:nth-child(28){left:64%;width:12px;height:12px;animation-duration:11s;animation-delay:-8s}
.global-bubbles .bubble:nth-child(29){left:70%;width:29px;height:29px;animation-duration:19s;animation-delay:-5s}
.global-bubbles .bubble:nth-child(30){left:77%;width:7px;height:7px;animation-duration:8s;animation-delay:-3s}
.global-bubbles .bubble:nth-child(31){left:82%;width:43px;height:43px;animation-duration:25s;animation-delay:-16s}
.global-bubbles .bubble:nth-child(32){left:89%;width:15px;height:15px;animation-duration:13s;animation-delay:-10s}
.global-bubbles .bubble:nth-child(33){left:94%;width:26px;height:26px;animation-duration:17s;animation-delay:-13s}
.global-bubbles .bubble:nth-child(34){left:33%;width:6px;height:6px;animation-duration:8s;animation-delay:-1s}
.global-bubbles .bubble:nth-child(35){left:60%;width:19px;height:19px;animation-duration:15s;animation-delay:-12s}
.global-bubbles .bubble:nth-child(36){left:98%;width:11px;height:11px;animation-duration:10s;animation-delay:-7s}

/* Hero ei enää pääty irrallisiin viivoihin: leveä kerrostettu vesiaalto yhdistää sen taustaan. */
.hero:before{
  opacity:.22;
  background:
    radial-gradient(circle at 10% 25%,rgba(255,255,255,.28) 0 3px,transparent 4px),
    radial-gradient(circle at 86% 18%,rgba(255,255,255,.24) 0 5px,transparent 6px);
}
.hero:after{
  content:"";
  display:block;
  height:92px;
  margin-top:-8px;
  background:linear-gradient(180deg,#0a7479 0%,#087076 42%,#0b7d82 100%);
  clip-path:polygon(0 34%,5% 26%,10% 35%,15% 23%,20% 33%,25% 20%,30% 31%,35% 22%,40% 35%,45% 24%,50% 32%,55% 20%,60% 30%,65% 23%,70% 35%,75% 21%,80% 31%,85% 24%,90% 35%,95% 22%,100% 30%,100% 100%,0 100%);
}

@media(max-width:560px){
  .global-bubbles .bubble:nth-child(4n){display:block}
  .global-bubbles .bubble:nth-child(3n){opacity:.65}
  .hero:after{height:68px}
}


/* 1.8: yhtenäinen syvenevä meri + kuplat myös keskiosan taustalla */
body{
  min-height:100%;
  background:linear-gradient(180deg,
    #1aa7aa 0%,
    #148f96 18%,
    #0e7882 38%,
    #096270 58%,
    #064b5c 78%,
    #033746 100%
  );
  background-attachment:scroll;
}

/* Hero sulautuu samaan mereen eikä muodosta omaa turkoosia laatikkoa. */
.hero{
  background:linear-gradient(180deg,
    rgba(28,174,177,.94) 0%,
    rgba(20,143,150,.90) 56%,
    rgba(14,120,130,.86) 100%
  );
}
.hero:after{
  height:78px;
  margin-top:-3px;
  background:linear-gradient(180deg,rgba(14,120,130,.86) 0%,rgba(11,105,117,.68) 52%,transparent 100%);
  clip-path:polygon(0 18%,5% 9%,10% 20%,16% 8%,22% 19%,28% 10%,34% 22%,40% 9%,46% 20%,52% 8%,58% 19%,64% 10%,70% 22%,76% 9%,82% 19%,88% 10%,94% 21%,100% 12%,100% 100%,0 100%);
}

/* Kuplat nostetaan taustapinnan päälle, mutta kaikki varsinainen sisältö niiden päälle. */
main,.site-footer{position:relative;z-index:1;background:transparent}
.global-bubbles{z-index:2}
.site-shell{position:relative;z-index:3}
.hero-bubbles,.footer-bubbles{z-index:2}
.hero-grid,.footer-grid{z-index:3}

/* Kuplia näkyy myös keskellä sivua: hieman kirkkaammat ja vaihtelevammat. */
.global-bubbles .bubble{
  border-color:rgba(230,255,255,.90);
  background:rgba(225,255,255,.16);
  box-shadow:inset 3px 3px 9px rgba(255,255,255,.55),0 0 13px rgba(184,247,249,.18);
}
@keyframes global-bubble-rise{
  0%{transform:translate3d(0,112vh,0) scale(.88);opacity:0}
  6%{opacity:.86}
  48%{opacity:.78}
  92%{opacity:.68}
  100%{transform:translate3d(0,-150px,0) scale(1.05);opacity:0}
}

/* Vaaleat sisältöpinnat pysyvät täysin selkeinä kuplien yläpuolella. */
.feature-card,.collection,.adults,.site-main.standard .entry-content{position:relative;z-index:4}

/* Footer jatkaa meren syvintä sävyä ilman selvää saumaa. */
.site-footer{
  background:linear-gradient(180deg,rgba(4,60,73,.86) 0%,#033746 48%,#022b38 100%);
}

@media(max-width:560px){
  .hero:after{height:58px}
  .global-bubbles .bubble{opacity:.76}
}

/* 1.9: voimakkaampi syvyysliuku + runsaampi kuplatiheys koko näkymään */
body{
  background:
    radial-gradient(ellipse at 50% -4%,rgba(237,255,255,.30) 0%,rgba(180,247,247,.12) 22%,transparent 43%),
    linear-gradient(180deg,
      #72dfe1 0%,
      #46c9cd 10%,
      #21aab1 23%,
      #12858f 40%,
      #0a6774 57%,
      #07505f 73%,
      #043c4c 87%,
      #022b38 100%
    );
}
.hero{
  background:linear-gradient(180deg,
    rgba(112,224,226,.97) 0%,
    rgba(72,203,207,.95) 38%,
    rgba(31,164,173,.92) 72%,
    rgba(18,133,143,.88) 100%
  );
}
.hero .eyebrow,.hero h1 span{color:#075f68;text-shadow:0 1px 0 rgba(255,255,255,.22)}
.hero-copy{color:#073f47;text-shadow:none}
.hero:after{
  background:linear-gradient(180deg,rgba(18,133,143,.88) 0%,rgba(12,112,123,.58) 58%,transparent 100%);
}

/* Näkyvämpi kuplakerros. Kuplia on 72 ja keskialueelle on tarkoituksella enemmän sijoituksia. */
.global-bubbles .bubble{
  opacity:.96;
  border-color:rgba(239,255,255,.94);
  background:rgba(236,255,255,.14);
  box-shadow:inset 3px 3px 9px rgba(255,255,255,.60),0 0 14px rgba(196,250,252,.23);
}
.global-bubbles .bubble:nth-child(37){left:5%;width:15px;height:15px;animation-duration:12s;animation-delay:-10s}
.global-bubbles .bubble:nth-child(38){left:9%;width:37px;height:37px;animation-duration:24s;animation-delay:-4s}
.global-bubbles .bubble:nth-child(39){left:14%;width:11px;height:11px;animation-duration:11s;animation-delay:-8s}
.global-bubbles .bubble:nth-child(40){left:19%;width:23px;height:23px;animation-duration:17s;animation-delay:-15s}
.global-bubbles .bubble:nth-child(41){left:24%;width:7px;height:7px;animation-duration:9s;animation-delay:-2s}
.global-bubbles .bubble:nth-child(42){left:29%;width:32px;height:32px;animation-duration:21s;animation-delay:-13s}
.global-bubbles .bubble:nth-child(43){left:34%;width:13px;height:13px;animation-duration:13s;animation-delay:-6s}
.global-bubbles .bubble:nth-child(44){left:38%;width:45px;height:45px;animation-duration:28s;animation-delay:-21s}
.global-bubbles .bubble:nth-child(45){left:41%;width:9px;height:9px;animation-duration:10s;animation-delay:-5s}
.global-bubbles .bubble:nth-child(46){left:44%;width:20px;height:20px;animation-duration:15s;animation-delay:-12s}
.global-bubbles .bubble:nth-child(47){left:47%;width:29px;height:29px;animation-duration:19s;animation-delay:-7s}
.global-bubbles .bubble:nth-child(48){left:50%;width:8px;height:8px;animation-duration:9s;animation-delay:-3s}
.global-bubbles .bubble:nth-child(49){left:52%;width:39px;height:39px;animation-duration:25s;animation-delay:-18s}
.global-bubbles .bubble:nth-child(50){left:54%;width:12px;height:12px;animation-duration:12s;animation-delay:-9s}
.global-bubbles .bubble:nth-child(51){left:56%;width:24px;height:24px;animation-duration:17s;animation-delay:-1s}
.global-bubbles .bubble:nth-child(52){left:59%;width:6px;height:6px;animation-duration:8s;animation-delay:-6s}
.global-bubbles .bubble:nth-child(53){left:62%;width:34px;height:34px;animation-duration:22s;animation-delay:-16s}
.global-bubbles .bubble:nth-child(54){left:65%;width:14px;height:14px;animation-duration:13s;animation-delay:-11s}
.global-bubbles .bubble:nth-child(55){left:68%;width:48px;height:48px;animation-duration:29s;animation-delay:-23s}
.global-bubbles .bubble:nth-child(56){left:72%;width:9px;height:9px;animation-duration:10s;animation-delay:-4s}
.global-bubbles .bubble:nth-child(57){left:76%;width:27px;height:27px;animation-duration:18s;animation-delay:-14s}
.global-bubbles .bubble:nth-child(58){left:81%;width:17px;height:17px;animation-duration:14s;animation-delay:-8s}
.global-bubbles .bubble:nth-child(59){left:85%;width:35px;height:35px;animation-duration:23s;animation-delay:-19s}
.global-bubbles .bubble:nth-child(60){left:90%;width:10px;height:10px;animation-duration:11s;animation-delay:-5s}
.global-bubbles .bubble:nth-child(61){left:95%;width:25px;height:25px;animation-duration:18s;animation-delay:-13s}
.global-bubbles .bubble:nth-child(62){left:12%;width:6px;height:6px;animation-duration:8s;animation-delay:-1s}
.global-bubbles .bubble:nth-child(63){left:26%;width:18px;height:18px;animation-duration:14s;animation-delay:-10s}
.global-bubbles .bubble:nth-child(64){left:36%;width:7px;height:7px;animation-duration:9s;animation-delay:-7s}
.global-bubbles .bubble:nth-child(65){left:43%;width:14px;height:14px;animation-duration:12s;animation-delay:-4s}
.global-bubbles .bubble:nth-child(66){left:46%;width:7px;height:7px;animation-duration:9s;animation-delay:-8s}
.global-bubbles .bubble:nth-child(67){left:49%;width:18px;height:18px;animation-duration:14s;animation-delay:-11s}
.global-bubbles .bubble:nth-child(68){left:53%;width:7px;height:7px;animation-duration:8s;animation-delay:-2s}
.global-bubbles .bubble:nth-child(69){left:57%;width:16px;height:16px;animation-duration:13s;animation-delay:-9s}
.global-bubbles .bubble:nth-child(70){left:63%;width:8px;height:8px;animation-duration:9s;animation-delay:-5s}
.global-bubbles .bubble:nth-child(71){left:74%;width:21px;height:21px;animation-duration:16s;animation-delay:-12s}
.global-bubbles .bubble:nth-child(72){left:88%;width:8px;height:8px;animation-duration:9s;animation-delay:-6s}

@media(max-width:560px){
  body{background:linear-gradient(180deg,#67d9dc 0%,#20a8af 25%,#0b6976 57%,#043e4e 82%,#022b38 100%)}
  .global-bubbles .bubble:nth-child(5n){display:none}
  .global-bubbles .bubble{opacity:.82}
}

/* 1.10: kevyt aalto hero-osion alle + Hattiksen pelipaidan väriset pikanapit */
.hero:after{
  height:46px;
  background:rgba(238,255,255,.22);
  clip-path:polygon(0 58%,7% 44%,14% 56%,22% 38%,30% 53%,39% 41%,48% 57%,57% 39%,66% 54%,75% 40%,84% 56%,92% 42%,100% 52%,100% 100%,0 100%);
}
.quick-link{
  border:2px solid rgba(255,255,255,.78);
  color:#073f47;
}
.quick-link:nth-child(odd){
  background:#8dcced;
  border-color:#bce8fb;
  color:#073f47;
}
.quick-link:nth-child(even){
  background:#fff;
  border-color:#8dcced;
  color:#0b6173;
}
.quick-icon{
  width:46px;
  height:46px;
  object-fit:contain;
  display:block;
  margin:0 0 8px;
  font-size:0;
  filter:drop-shadow(0 3px 2px rgba(3,61,74,.12));
  transform-origin:50% 70%;
  transition:transform .18s ease;
}
.quick-link:hover .quick-icon{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
@media(max-width:560px){.hero:after{height:34px}.quick-icon{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.quick-link:hover .quick-icon{transform:none}}


/* 1.11: Hattiksen paidan musta reunus pikanappeihin */
.quick-link,
.quick-link:nth-child(odd),
.quick-link:nth-child(even){
  border:3px solid #111 !important;
}


/* 1.12: selkeämpi footer ilman sähköpostia, somea ja saavutettavuuslinkkiä */
.footer-grid-simple{
  grid-template-columns:minmax(150px,.9fr) minmax(160px,.8fr) minmax(160px,.8fr) minmax(220px,1.25fr);
  align-items:end;
  gap:34px;
}
.footer-contact-link a,.footer-brand{color:inherit}
.footer-contact-link a{display:inline-block;text-decoration:none;font-weight:700}
.footer-contact-link a:hover,.footer-links a:hover{text-decoration:underline}
.footer-brand{max-width:330px}
@media(max-width:850px){
  .footer-grid-simple{grid-template-columns:1fr 1fr;align-items:start}
}
@media(max-width:560px){
  .footer-grid-simple{grid-template-columns:1fr;text-align:center}
  .footer-mascot{justify-self:center}
  .footer-brand{max-width:none}
}


/* 1.13: tumma oliivinvihreä yläpalkki + suurempi, palkista ulos tuleva logo */
.site-header{
  background:#3c4b24 !important;
  position:relative;
  z-index:50;
  overflow:visible;
}
.site-header .site-shell{
  min-height:92px;
  position:relative;
  overflow:visible;
}
.site-header a,
.site-header nav a,
.site-title a{
  color:#fff !important;
}
.site-header nav a:hover,
.site-header nav a:focus{
  color:#f7c7d4 !important;
}

/* WordPress custom logo */
.custom-logo-link{
  display:block;
  position:relative;
  z-index:70;
  line-height:0;
  overflow:visible;
  align-self:center;
}
.custom-logo{
  display:block;
  width:auto;
  max-width:none;
  height:118px;
  object-fit:contain;
  transform:translateY(17px);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.18));
}

/* Tekstilogo jää fallbackiksi jos kuvaa ei ole */
.site-title{
  position:relative;
  z-index:70;
}

/* Anna logon tulla palkin alapuolelle ilman että seuraava osio leikkaa sen */
.site-header + *{
  position:relative;
  z-index:1;
}

@media (max-width: 900px){
  .site-header .site-shell{
    min-height:82px;
  }
  .custom-logo{
    height:100px;
    transform:translateY(13px);
  }
}
@media (max-width: 640px){
  .site-header .site-shell{
    min-height:72px;
  }
  .custom-logo{
    height:84px;
    transform:translateY(10px);
  }
}


/* 1.14: todella suuri kansilogon kaltainen logo + oranssi menu */
.site-header{
  overflow:visible !important;
}
.site-header .site-shell{
  min-height:104px !important;
  overflow:visible !important;
}
.site-header nav a,
.site-header .main-navigation a,
.site-header .menu a{
  color:#e2682b !important;
}
.site-header nav a:hover,
.site-header nav a:focus,
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus,
.site-header .menu a:hover,
.site-header .menu a:focus{
  color:#f39a68 !important;
}

/* Selvästi suurempi kuin 1.13:ssa. */
.custom-logo-link{
  width:310px;
  height:104px;
  display:flex !important;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible !important;
}
.custom-logo{
  height:190px !important;
  width:auto !important;
  max-width:360px !important;
  object-fit:contain;
  object-position:left top;
  transform:translateY(-13px) !important;
  transform-origin:left top;
  position:relative;
  z-index:100;
}

@media (max-width:900px){
  .custom-logo-link{width:245px;height:90px}
  .custom-logo{height:155px !important;max-width:285px !important;transform:translateY(-8px) !important}
}
@media (max-width:640px){
  .site-header .site-shell{min-height:78px !important}
  .custom-logo-link{width:185px;height:78px}
  .custom-logo{height:120px !important;max-width:215px !important;transform:translateY(-5px) !important}
}


/* 1.15: korjaus logoon — isompi ja alas palkin yli, ei enää ylöspäin */
.site-header .site-shell{
  min-height:104px !important;
}
.custom-logo-link{
  width:390px !important;
  height:104px !important;
  overflow:visible !important;
  align-items:flex-start !important;
}
.custom-logo{
  height:255px !important;
  width:auto !important;
  max-width:none !important;
  transform:translateY(14px) !important;
  transform-origin:left top !important;
  position:relative !important;
  z-index:100 !important;
}

@media (max-width:900px){
  .custom-logo-link{width:300px !important;height:90px !important}
  .custom-logo{height:195px !important;transform:translateY(10px) !important}
}
@media (max-width:640px){
  .custom-logo-link{width:215px !important;height:78px !important}
  .custom-logo{height:145px !important;transform:translateY(8px) !important}
}


/* 1.16: päävalikon tekstiväri */
.site-header .main-navigation a,
.site-header nav a,
.site-header .menu a {
  color:#ecbaa2 !important;
}
.site-header .main-navigation a:hover,
.site-header nav a:hover,
.site-header .menu a:hover {
  color:#ecbaa2 !important;
}


/* 1.17: ylävalikon lopulliset värit */
.site-header {
  background:#7dbc45 !important;
}
.site-header .main-navigation a,
.site-header nav a,
.site-header .menu a {
  color:#e2682b !important;
}
.site-header .main-navigation a:hover,
.site-header nav a:hover,
.site-header .menu a:hover {
  color:#e2682b !important;
}


/* 1.18: pinkki yläpalkki + tumma menu + kiinteä musta kansilogo */
.site-header{
  background:#f0adba !important;
  overflow:visible !important;
  position:relative;
  z-index:50;
}
.site-header .site-shell{
  min-height:112px !important;
  overflow:visible !important;
}
.site-header nav a,
.site-header .primary-nav a,
.site-header .main-navigation a,
.site-header .menu a{
  color:#172f35 !important;
}
.site-header nav a:hover,
.site-header nav a:focus,
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus,
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus,
.site-header .menu a:hover,
.site-header .menu a:focus{
  color:#000 !important;
}

/* Logo ei enää riipu WordPressin logoasetuksesta. */
.branding{
  position:relative !important;
  width:440px !important;
  min-width:440px !important;
  height:112px !important;
  overflow:visible !important;
  z-index:100 !important;
}
.hattis-fixed-logo{
  display:block !important;
  position:absolute !important;
  left:-8px !important;
  top:-18px !important;
  width:455px !important;
  height:auto !important;
  line-height:0 !important;
  z-index:110 !important;
}
.hattis-fixed-logo img{
  display:block !important;
  width:455px !important;
  height:auto !important;
  max-width:none !important;
  filter:none !important;
}

/* Logo saa tulla selvästi pinkin palkin alapuolelle. */
.site-header + *{
  position:relative;
  z-index:1;
}

@media (max-width:900px){
  .site-header .site-shell{min-height:96px !important}
  .branding{width:330px !important;min-width:330px !important;height:96px !important}
  .hattis-fixed-logo{width:345px !important;top:-8px !important}
  .hattis-fixed-logo img{width:345px !important}
}
@media (max-width:640px){
  .site-header .site-shell{min-height:82px !important}
  .branding{width:220px !important;min-width:220px !important;height:82px !important}
  .hattis-fixed-logo{width:235px !important;top:0 !important;left:0 !important}
  .hattis-fixed-logo img{width:235px !important}
}


/* 1.19: uusi logo + pinkki header + tumma menu + mustat reunukset */
.site-header{
  background:#f0adba !important;
}
.site-header nav a,
.site-header .primary-nav a,
.site-header .main-navigation a,
.site-header .menu a{
  color:#172f35 !important;
}

/* Uusi logo hieman maltillisemman kokoiseksi kuin v1.18 */
.branding{
  width:350px !important;
  min-width:350px !important;
  height:105px !important;
}
.hattis-fixed-logo{
  width:350px !important;
  left:0 !important;
  top:-4px !important;
}
.hattis-fixed-logo img{
  width:350px !important;
  max-width:none !important;
}

/* HATTIKSEN: pinkki täyttö + musta piirrosmainen reunus */
.hero-title .accent,
.hero h1 .accent,
.hero-title strong,
.hero h1 strong{
  -webkit-text-stroke:2px #000 !important;
  paint-order:stroke fill !important;
  text-shadow:
    1px 0 #000,
    -1px 0 #000,
    0 1px #000,
    0 -1px #000 !important;
}

/* Etusivun kolme isoa sisältökorttia: musta reunus */
.cards-grid > article,
.cards-grid > .card,
.home-cards > article,
.home-cards > .card,
.feature-cards > article,
.feature-cards > .card{
  border:2px solid #000 !important;
}

@media (max-width:900px){
  .branding{width:290px !important;min-width:290px !important;height:92px !important}
  .hattis-fixed-logo,.hattis-fixed-logo img{width:290px !important}
}
@media (max-width:640px){
  .branding{width:215px !important;min-width:215px !important;height:76px !important}
  .hattis-fixed-logo,.hattis-fixed-logo img{width:215px !important}
}


/* 1.20: mustat reunukset oikeisiin elementteihin */
.hero h1 .hero-main-title{
  display:block !important;
  color:var(--hattis-pink) !important;
  -webkit-text-stroke:2px #000 !important;
  paint-order:stroke fill !important;
  text-shadow:
    1px 0 0 #000,
   -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000 !important;
}

.hero h1 .hero-subtitle{
  display:block !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Nämä ovat front-page.php:n kolme näkyvää yläkorttia */
#hattis .feature-grid .feature-card{
  border:3px solid #000 !important;
  box-sizing:border-box !important;
}

/* Pidetään korttien omat taustavärit, vain reunus vaihtuu mustaksi */
#hattis .feature-grid .feature-card:nth-child(1),
#hattis .feature-grid .feature-card:nth-child(2),
#hattis .feature-grid .feature-card:nth-child(3){
  border-color:#000 !important;
}


/* 1.22: Pelit-kirjasto ja täysikokoinen pelisivu */
.games-library{max-width:1050px;margin:28px auto 70px}
.game-library-card{
  max-width:760px;margin:0 auto;background:#fff;border:3px solid #000;border-radius:28px;
  overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.16)
}
.game-thumb-link{display:block;background:#10182e}
.game-thumb-link img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.game-library-body{padding:24px 26px 28px;text-align:center}
.game-library-body h2{margin:0 0 10px;font-size:clamp(1.6rem,3vw,2.35rem)}
.game-library-body p{max-width:600px;margin:0 auto 20px}
.hattis-game-page{width:100%;max-width:1200px;margin:0 auto 55px}
.game-toolbar{margin:0 0 14px}
.game-frame-wrap{
  position:relative;width:100%;height:min(78vh,780px);min-height:540px;
  overflow:hidden;border:3px solid #000;border-radius:22px;background:#10182e;
  box-shadow:0 14px 34px rgba(0,0,0,.2)
}
.hattis-game-frame{display:block;width:100%;height:100%;border:0;background:#10182e}
.game-mobile-note{text-align:center;font-weight:700;margin:12px 0 0}
@media(max-width:700px){
  .site-main.standard .site-shell{width:100%;padding-left:10px;padding-right:10px}
  .hattis-game-page{margin-bottom:25px}
  .game-frame-wrap{height:calc(100svh - 145px);min-height:440px;border-radius:14px}
  .game-toolbar{padding-left:2px}
  .game-library-card{border-radius:20px}
  .game-library-body{padding:18px}
}


/* 1.23: peli oikeasti isoksi */
.hattis-game-page{
  width:min(1280px, calc(100vw - 48px)) !important;
  max-width:none !important;
  margin:0 auto 55px !important;
}

.hattis-game-page .game-frame-wrap{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:3px solid #000 !important;
  border-radius:22px !important;
  background:#10182e !important;
}

.hattis-game-page .hattis-game-frame{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  background:#10182e !important;
}

/* Älä anna tavallisten sisältöalueiden kaventaa pelisivua */
body.page-hattis-vastaan-kinderin-isoaiti .site-main .site-shell,
body.page-hattis-vastaan-kinderin-isoaiti .site-main.standard .site-shell{
  width:100% !important;
  max-width:none !important;
  padding-left:24px !important;
  padding-right:24px !important;
}

@media (max-width:700px){
  .hattis-game-page{
    width:calc(100vw - 16px) !important;
    margin-bottom:28px !important;
  }
  .hattis-game-page .game-frame-wrap{
    aspect-ratio:16 / 9 !important;
    border-radius:14px !important;
  }
  body.page-hattis-vastaan-kinderin-isoaiti .site-main .site-shell,
  body.page-hattis-vastaan-kinderin-isoaiti .site-main.standard .site-shell{
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* 1.24: varsinainen pelisivu lukitaan paikalleen.
   Hahmon ohjaaminen ei saa vierittää koko sivua ylös/alas. */
body.page-hattis-vastaan-kinderin-isoaiti{
  height:100svh !important;
  min-height:100svh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .site-footer{
  display:none !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .site-main{
  height:calc(100svh - 112px) !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .site-main .site-shell{
  height:100% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .hattis-game-page{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .game-toolbar{
  flex:0 0 auto !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .game-frame-wrap{
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  touch-action:none !important;
  overscroll-behavior:none !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .hattis-game-frame{
  width:100% !important;
  height:100% !important;
  touch-action:none !important;
  overscroll-behavior:none !important;
}

body.page-hattis-vastaan-kinderin-isoaiti .game-mobile-note{
  flex:0 0 auto !important;
  margin:8px 0 0 !important;
}

@media(max-width:900px){
  body.page-hattis-vastaan-kinderin-isoaiti .site-main{
    height:calc(100svh - 96px) !important;
  }
}

@media(max-width:640px){
  body.page-hattis-vastaan-kinderin-isoaiti .site-main{
    height:calc(100svh - 82px) !important;
  }
  body.page-hattis-vastaan-kinderin-isoaiti .game-mobile-note{
    font-size:.9rem;
    margin-top:5px !important;
  }
}


/* 1.25: fullscreen + vaakatilan pyyntö + mobiilin orientaatio-ohje */
html.hattis-game-active,
body.hattis-game-active{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  height:100% !important;
}

.hattis-game-page{
  touch-action:manipulation;
}

.game-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.game-fullscreen-btn{
  cursor:pointer;
}

.game-orientation-overlay[hidden]{
  display:none !important;
}

.game-orientation-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(7,23,43,.94);
  color:#172f35;
}

.game-orientation-card{
  width:min(92vw,480px);
  background:#fff7d9;
  border:3px solid #000;
  border-radius:26px;
  padding:26px 22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.game-orientation-card h2{
  margin:8px 0 10px;
  font-size:clamp(1.6rem,7vw,2.4rem);
}

.game-orientation-card p{
  margin:0 auto 18px;
  max-width:36ch;
}

.turn-phone-icon{
  font-size:56px;
  line-height:1;
}

.game-orientation-card .button{
  margin:5px;
}

.game-continue-btn{
  background:#fff !important;
  color:#172f35 !important;
  border:2px solid #172f35 !important;
}

/* Fullscreenissa näkyy vain peli. */
#gameFullscreenTarget:fullscreen,
#gameFullscreenTarget:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:#10182e !important;
}

#gameFullscreenTarget:fullscreen .hattis-game-frame,
#gameFullscreenTarget:-webkit-full-screen .hattis-game-frame{
  width:100vw !important;
  height:100vh !important;
}

/* Pienellä ruudulla pelin yläpuoliset kontrollit pysyvät kompakteina. */
@media(max-width:700px){
  .game-toolbar{
    gap:8px;
  }
  .game-toolbar .button{
    font-size:.88rem;
    padding:9px 12px;
  }
  .game-mobile-note{
    display:none;
  }
}


/* 1.26: poistetaan mobiilin jumittava vaakatila-overlay kokonaan */
.game-orientation-overlay{
  display:none !important;
  pointer-events:none !important;
}

.game-orientation-hint{
  display:none;
  margin:0 0 10px;
  padding:9px 12px;
  text-align:center;
  font-weight:700;
  background:#fff7d9;
  border:2px solid #000;
  border-radius:14px;
  color:#172f35;
}

@media(max-width:700px){
  .game-orientation-hint{
    display:block;
  }
}

#gameFullscreenTarget:fullscreen,
#gameFullscreenTarget:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  border:0 !important;
  border-radius:0 !important;
  background:#10182e !important;
}

/* 1.27: Hahmot-sivu */
.characters-page{max-width:1120px;margin:0 auto 70px}
.characters-intro{text-align:center;margin:10px auto 46px;max-width:780px}
.characters-intro h1{margin:0 0 12px;text-transform:uppercase;font-size:clamp(2.35rem,6vw,4.7rem);line-height:.95;color:#f0adba;-webkit-text-stroke:2px #111;text-shadow:3px 3px 0 rgba(0,0,0,.12)}
.characters-intro p{font-size:1.15rem;font-weight:700;margin:0}
.characters-list{display:flex;flex-direction:column;gap:42px}
.character-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:30px}
.character-row.is-reverse .character-picture{order:2}.character-row.is-reverse .character-info{order:1}
.character-picture{background:#fff;border:3px solid #111;border-radius:34px;padding:18px;min-height:390px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.14);overflow:hidden}
.character-picture img{display:block;width:100%;height:100%;max-height:570px;object-fit:contain;border-radius:22px}
.character-info{position:relative;border:3px solid #111;border-radius:34px;padding:42px 42px 38px;min-height:300px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.14);overflow:hidden}
.character-info h2{position:relative;z-index:1;margin:0 0 18px;text-transform:uppercase;font-size:clamp(2rem,5vw,3.8rem);line-height:1;color:#173b45}
.character-info p{position:relative;z-index:1;font-size:1.14rem;line-height:1.65;margin:0;font-weight:650}
.character-pink{background:#f0adba}.character-blue{background:#88c7e8}.character-yellow{background:#fff1b9}.character-green{background:#a9d978}
.character-bubbles{position:absolute;right:24px;top:12px;font-size:42px;letter-spacing:2px;color:rgba(255,255,255,.48);font-weight:400}
.character-placeholder{width:100%;min-height:350px;border:3px dashed #111;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffaf0;text-align:center;color:#173b45}
.character-placeholder span{font-size:2rem;font-weight:900;line-height:1.05}.character-placeholder b{margin-top:20px;font-size:2rem;color:#f0adba}
.characters-extra{margin-top:36px}
@media(max-width:760px){
  .characters-page{margin-bottom:42px}.characters-intro{margin-bottom:28px}.characters-intro h1{-webkit-text-stroke:1.4px #111}
  .character-row,.character-row.is-reverse{grid-template-columns:1fr;gap:14px}
  .character-row.is-reverse .character-picture,.character-row.is-reverse .character-info{order:initial}
  .character-picture{min-height:0;padding:12px;border-radius:24px}.character-picture img{max-height:520px}
  .character-info{min-height:0;padding:28px 24px;border-radius:24px}.character-info h2{font-size:2.25rem}.character-info p{font-size:1.03rem}
  .character-placeholder{min-height:280px}
}


/* 1.28: dynaamisten hahmojen sisältö */
.character-description{
  position:relative;
  z-index:1;
  font-size:1.14rem;
  line-height:1.65;
  font-weight:650;
}
.character-description p{margin:0 0 .9em}
.character-description p:last-child{margin-bottom:0}
@media(max-width:760px){
  .character-description{font-size:1.03rem}
}


/* 1.29: hahmoesittelyjen kontrasti + etusivun hahmojen siisti esikatselu */
.character-yellow,
.character-yellow p,
.character-yellow .character-description,
.character-yellow .character-description p{
  color:#173b45 !important;
}

/* Etusivulla vain neljä hahmoa esikatseluna. Ei Lue lisää -nappeja. */
.home-character-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.home-character-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.home-character-image{
  height:245px;
  background:#fff;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-character-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
}
.home-character-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed #173b45;
  border-radius:14px;
  font-weight:800;
}
.home-character-copy{
  padding:14px 14px 18px;
  flex:1;
}
.home-character-copy h3{
  margin:0 0 8px;
}
.home-character-copy p{
  margin:0;
}
.home-characters-more{
  text-align:center;
  margin-top:22px;
}
.home-characters-more a{
  display:inline-block;
  font-weight:900;
  font-size:1.08rem;
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid currentColor;
}
.home-characters-more a:hover{
  opacity:.82;
}
@media(max-width:900px){
  .home-character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .home-character-grid{grid-template-columns:1fr 1fr;gap:10px}
  .home-character-image{height:190px;padding:7px}
  .home-character-copy{padding:10px 10px 14px}
  .home-character-copy p{font-size:.9rem}
}


/* 1.30: mobiilin pikalinkit pois */
@media(max-width:760px){
  .hero .quick-links{display:none !important}
}

/* Etusivun hahmokortit: vain kuva + nimi */
.home-character-copy{padding:12px 14px 16px;text-align:center}
.home-character-copy h3{margin:0;font-size:1.08rem}
.home-characters-more a{color:#173b45 !important;border-bottom-color:#173b45 !important}

/* Ajankohtaista */
.home-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.home-news-grid.news-count-1{grid-template-columns:1fr}
.home-news-grid.news-count-3,.home-news-grid.news-count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-news-card{background:#fff;border:3px solid #111;border-radius:24px;padding:24px 26px}
.home-news-card time,.news-history-card time{display:block;font-weight:900;color:#159a9c;margin-bottom:8px}
.home-news-card h3{margin:0 0 10px;font-size:1.45rem;color:#173b45}
.home-news-copy p{margin:.45em 0 0}
.home-news-more{text-align:center;margin-top:20px}
.home-news-more a{font-weight:900;color:#173b45;text-decoration:none;border-bottom:2px solid currentColor}
.news-page{max-width:1050px;margin:0 auto 70px}
.news-page-intro{text-align:center;margin:12px auto 38px}
.news-page-intro h1{margin:0 0 10px;text-transform:uppercase;font-size:clamp(2.5rem,6vw,4.6rem);color:#f0adba;-webkit-text-stroke:2px #111}
.news-page-intro p{font-weight:700;font-size:1.1rem}
.news-history{display:flex;flex-direction:column;gap:22px}
.news-history-card{background:#fff;border:3px solid #111;border-radius:28px;padding:28px 32px}
.news-history-card h2{margin:0 0 14px;color:#173b45;font-size:2rem}
.news-history-image{margin:16px 0}.news-history-image img{max-width:100%;height:auto;border-radius:18px}
.news-history-copy{font-size:1.06rem;line-height:1.65}
@media(max-width:760px){
  .home-news-grid,.home-news-grid.news-count-3,.home-news-grid.news-count-4{grid-template-columns:1fr}
  .home-news-card{padding:20px}
  .news-history-card{padding:22px 20px}
  .news-page-intro h1{-webkit-text-stroke:1.4px #111}
}


/* 1.31: Ajankohtaista parannukset */
.home-news-copy{
  color:#173b45 !important;
  line-height:1.55;
}
.news-history-copy,
.news-history-copy p{
  color:#173b45 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.news-history-copy p{
  margin:.5em 0 0;
}


/* 1.32: kolme Ajankohtaista-korttia rinnakkain desktopilla */
.home-news-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.home-news-grid.news-count-1{grid-template-columns:1fr !important}
.home-news-grid.news-count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.home-news-grid.news-count-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.home-news-card{
  padding:18px 20px !important;
}
.home-news-card h3{
  font-size:1.25rem !important;
  line-height:1.18;
}
.home-news-copy{
  font-size:.96rem;
}
@media(max-width:900px){
  .home-news-grid,
  .home-news-grid.news-count-2,
  .home-news-grid.news-count-4{grid-template-columns:1fr !important}
}

/* Kirja-sivu */
.books-page{max-width:1120px;margin:0 auto 75px}
.books-page-intro{text-align:center;margin:12px auto 42px}
.books-page-intro h1{
  margin:0 0 10px;text-transform:uppercase;font-size:clamp(2.7rem,6vw,4.8rem);
  color:#f0adba;-webkit-text-stroke:2px #111;
}
.books-page-intro p{font-size:1.1rem;font-weight:700}
.books-list{display:flex;flex-direction:column;gap:60px}
.book-entry{
  background:rgba(255,250,240,.94);
  border-radius:34px;
  padding:34px;
}
.book-top{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:30px;
  align-items:start;
}
.book-cover-wrap{
  background:#fff;
  border:3px solid #111;
  border-radius:28px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-cover{
  display:block;
  width:100%;
  height:auto;
  max-height:720px;
  object-fit:contain;
  border-radius:16px;
}
.book-cover-placeholder{
  min-height:520px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px dashed #111;
  border-radius:18px;
  font-weight:900;
}
.book-info-stack{display:flex;flex-direction:column;gap:22px}
.book-info-box{
  border:3px solid #111;
  border-radius:28px;
  padding:28px 30px;
}
.book-basic-box{background:#88c7e8}
.book-back-box{background:#f0adba}
.book-info-box h2{
  margin:0 0 16px;
  font-size:clamp(2rem,4vw,3.2rem);
  color:#173b45;
  text-transform:uppercase;
}
.book-info-box h3{
  margin:0 0 14px;
  font-size:1.75rem;
  color:#173b45;
}
.book-basic,.book-info-box p{
  color:#173b45;
  font-size:1.05rem;
  line-height:1.65;
  margin:0;
}
.book-buy-section{
  margin-top:28px;
  background:#fff1b9;
  border:3px solid #111;
  border-radius:28px;
  padding:26px 30px;
}
.book-buy-section h3{
  margin:0 0 18px;
  font-size:1.8rem;
  color:#173b45;
}
.book-buy-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.book-buy-links a{
  display:inline-block;
  background:#fff;
  color:#173b45;
  border:2px solid #111;
  border-radius:999px;
  padding:11px 18px;
  font-weight:900;
  text-decoration:none;
}
.book-buy-links a:hover{transform:translateY(-1px)}
.book-empty-tip{
  color:#173b45;
  font-weight:700;
  opacity:.76;
}
.book-extra-content{
  margin-top:28px;
  background:#fff;
  border-radius:24px;
  padding:24px 28px;
  color:#173b45;
}
@media(max-width:760px){
  .books-page{margin-bottom:45px}
  .books-page-intro h1{-webkit-text-stroke:1.4px #111}
  .book-entry{padding:18px;border-radius:24px}
  .book-top{grid-template-columns:1fr;gap:16px}
  .book-cover-wrap,.book-info-box,.book-buy-section{border-radius:22px}
  .book-cover{max-height:620px}
  .book-info-box,.book-buy-section{padding:22px}
}


/* 1.33: kirjasivun tekstit varmasti näkyviin */
.book-basic,
.book-back-text,
.book-back-text p,
.book-extra-content,
.book-extra-content p{
  color:#173b45 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.book-back-text{
  font-size:1.05rem;
  line-height:1.65;
}
.books-page-intro h1{
  text-transform:none !important;
}


/* 1.35: Kirja-sivu ilmavammaksi ja kansi pääosaan */
.books-page{
  max-width:1180px;
  margin:0 auto 80px;
}
.books-list{
  display:flex;
  flex-direction:column;
  gap:80px;
}
.book-entry-clean{
  background:rgba(255,250,240,.94) !important;
  border-radius:34px !important;
  padding:38px !important;
  box-shadow:none !important;
}
.book-showcase{
  display:grid;
  grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr);
  gap:42px;
  align-items:start;
}
.book-cover-hero{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.book-cover-hero .book-cover{
  width:100% !important;
  max-width:470px !important;
  max-height:none !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:18px !important;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.book-content-panel{
  background:transparent !important;
  border:0 !important;
  padding:8px 4px 0 !important;
}
.book-content-panel h2{
  margin:0 0 20px;
  color:#173b45;
  font-size:clamp(2.4rem,5vw,4.4rem);
  line-height:.98;
  text-transform:uppercase;
}
.book-content-panel h3{
  margin:0 0 12px;
  color:#173b45;
  font-size:1.55rem;
}
.book-basic-clean{
  color:#173b45;
  font-size:1.06rem;
  line-height:1.65;
}
.book-divider{
  height:1px;
  background:rgba(23,59,69,.22);
  margin:26px 0;
}
.book-back-text-clean{
  color:#173b45;
  font-size:1.04rem;
  line-height:1.72;
}
.book-buy-links-clean{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.book-buy-links-clean a{
  display:inline-block;
  background:#fff;
  color:#173b45;
  border:2px solid #111;
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  text-decoration:none;
}
.book-buy-links-clean a:hover{
  transform:translateY(-1px);
}
.book-reviews-preview{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(23,59,69,.22);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.book-reviews-kicker{
  display:block;
  margin-bottom:6px;
  color:#159a9c;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.book-reviews-preview h3{
  margin:0 0 8px;
  color:#173b45;
  font-size:1.55rem;
}
.book-reviews-preview p{
  margin:0;
  color:#173b45;
  max-width:650px;
  line-height:1.55;
}
.book-reviews-link{
  flex:0 0 auto;
  font-weight:900;
  color:#173b45;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}
.book-extra-clean{
  margin-top:30px !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}
@media(max-width:900px){
  .book-showcase{
    grid-template-columns:1fr;
    gap:26px;
  }
  .book-cover-hero .book-cover{
    max-width:560px !important;
  }
  .book-reviews-preview{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:620px){
  .book-entry-clean{
    padding:20px !important;
    border-radius:24px !important;
  }
  .book-content-panel h2{
    font-size:2.3rem;
  }
  .book-cover-hero .book-cover{
    max-width:100% !important;
  }
}


/* 1.36: Tekijät yhdestä paikasta etusivulle, kirjasivulle ja Tekijät-sivulle */
.book-team-preview{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(23,59,69,.22);
}
.book-team-heading h3{
  margin:0 0 18px;
  color:#173b45;
  font-size:1.55rem;
}
.team-circles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  max-width:720px;
}
.team-circle-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
  color:#173b45;
  text-decoration:none;
}
.team-circle-image{
  width:130px;
  height:130px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  border:3px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:7px;
}
.team-circle-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.team-circle-placeholder{
  font-weight:900;
  font-size:.9rem;
}
.team-circle-link strong{font-size:1.03rem}
.team-circle-link small{font-size:.9rem;opacity:.8}
.book-team-more{margin-top:18px}
.book-team-more a{
  color:#173b45;
  font-weight:900;
  text-decoration:none;
  border-bottom:2px solid currentColor;
}

/* Etusivun tekijät */
.home-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:720px;
  gap:28px;
  margin:0 auto;
}
.home-team-person{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#173b45;
  text-decoration:none;
}
.home-team-photo{
  width:150px;
  height:150px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  border:3px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.home-team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-team-person strong{font-size:1.08rem}
.home-team-person small{font-size:.92rem;opacity:.82}
.home-team-more{text-align:center;margin-top:22px}
.home-team-more a{color:#173b45;font-weight:900;text-decoration:none;border-bottom:2px solid currentColor}

/* Tekijät-sivu */
.team-page{max-width:1080px;margin:0 auto 75px}
.team-page-intro{text-align:center;margin:12px auto 46px}
.team-page-intro h1{
  margin:0 0 10px;
  color:#f0adba;
  font-size:clamp(2.7rem,6vw,4.8rem);
  -webkit-text-stroke:2px #111;
}
.team-page-intro p{font-weight:700;font-size:1.1rem}
.team-page-list{display:flex;flex-direction:column;gap:42px}
.team-profile{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:34px;
  align-items:center;
  background:rgba(255,250,240,.94);
  border-radius:30px;
  padding:28px;
}
.team-profile.is-reverse .team-profile-image{order:2}
.team-profile.is-reverse .team-profile-copy{order:1}
.team-profile-image{
  display:flex;
  align-items:center;
  justify-content:center;
}
.team-profile-image img{
  width:100%;
  max-width:340px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:3px solid #111;
  background:#fff;
}
.team-profile-placeholder{
  width:300px;
  max-width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:3px dashed #111;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  font-weight:900;
}
.team-profile-copy h2{
  margin:0 0 6px;
  color:#173b45;
  font-size:clamp(2rem,4vw,3.4rem);
}
.team-profile-role{
  color:#159a9c;
  font-weight:900;
  margin-bottom:16px;
  text-transform:uppercase;
}
.team-profile-text{
  color:#173b45;
  line-height:1.7;
}
.team-profile-text p:first-child{margin-top:0}
@media(max-width:760px){
  .team-circles,.home-team-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .team-circle-image{width:92px;height:92px}
  .home-team-photo{width:96px;height:96px}
  .team-profile,.team-profile.is-reverse{grid-template-columns:1fr;gap:18px}
  .team-profile.is-reverse .team-profile-image,.team-profile.is-reverse .team-profile-copy{order:initial}
  .team-page-intro h1{-webkit-text-stroke:1.4px #111}
}
@media(max-width:460px){
  .team-circle-link strong,.home-team-person strong{font-size:.9rem}
  .team-circle-link small,.home-team-person small{font-size:.76rem}
}


/* 1.37: Taustajoukot + kuvien parempi rajaus */
.team-profile-image img{
  width:100% !important;
  max-width:430px !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:24px !important;
  border:3px solid #111 !important;
  background:#fff !important;
}
.team-profile-placeholder{
  width:100% !important;
  max-width:430px !important;
  min-height:380px !important;
  aspect-ratio:auto !important;
  border-radius:24px !important;
}
.home-team-photo img,
.team-circle-image img{
  object-fit:cover !important;
  object-position:center 20% !important;
}


/* 1.38: Taustajoukot-sivusta värikkäämpi ja elävämpi */
.team-page{
  max-width:1120px !important;
}

.team-page-list{
  gap:58px !important;
}

.team-profile{
  position:relative;
  overflow:visible !important;
  border:3px solid #111;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  padding:34px !important;
  gap:42px !important;
}

.team-profile:nth-child(4n+1){
  background:#88c7e8 !important;
}
.team-profile:nth-child(4n+2){
  background:#f0adba !important;
}
.team-profile:nth-child(4n+3){
  background:#fff1b9 !important;
}
.team-profile:nth-child(4n+4){
  background:#a9d978 !important;
}

/* Kuvat saavat olla samanarvoisia, suuria ja hieman "paperimaisesti" vinossa. */
.team-profile-image{
  position:relative;
  z-index:2;
}

.team-profile-image img{
  width:100% !important;
  max-width:440px !important;
  height:auto !important;
  max-height:620px !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#fff !important;
  border:3px solid #111 !important;
  border-radius:26px !important;
  padding:10px;
  box-shadow:0 14px 26px rgba(0,0,0,.18);
  transform:rotate(-2.2deg);
}

.team-profile:nth-child(even) .team-profile-image img{
  transform:rotate(2.2deg);
}

.team-profile:nth-child(3n) .team-profile-image img{
  transform:rotate(-1.2deg);
}

/* Ei pienennetä Hattista tai mitään muutakaan tiettyä taustajoukkoa. */
.team-profile-image img,
.team-profile.is-reverse .team-profile-image img{
  min-width:0 !important;
}

.team-profile-copy{
  position:relative;
  z-index:1;
  color:#173b45;
}

.team-profile-copy h2{
  font-size:clamp(2.35rem,4.5vw,4rem) !important;
  line-height:1.02;
}

.team-profile-role{
  display:inline-block !important;
  background:#fff;
  color:#173b45 !important;
  border:2px solid #111;
  border-radius:999px;
  padding:7px 13px;
  margin:0 0 16px !important;
  font-size:.82rem;
  letter-spacing:.05em;
}

.team-profile-text{
  font-size:1.08rem;
  line-height:1.72;
  color:#173b45 !important;
}

/* Pieniä kuplamaisia koristeita ilman uutta kuvitusta. */
.team-profile::before,
.team-profile::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.65);
  pointer-events:none;
}
.team-profile::before{
  width:44px;height:44px;
  right:24px;top:20px;
}
.team-profile::after{
  width:20px;height:20px;
  right:82px;top:66px;
}

/* Etusivun pyörylöiden rajaus: kasvot ylemmäs ja vähemmän satunnaista kroppacropia. */
.home-team-photo img,
.team-circle-image img{
  object-fit:cover !important;
  object-position:center 16% !important;
}

/* Etusivun taustajoukot vähän elävämmiksi */
.home-team-person:nth-child(1) .home-team-photo{transform:rotate(-2deg)}
.home-team-person:nth-child(2) .home-team-photo{transform:rotate(2deg)}
.home-team-person:nth-child(3) .home-team-photo{transform:rotate(-1deg)}

@media(max-width:760px){
  .team-profile,
  .team-profile.is-reverse{
    grid-template-columns:1fr !important;
    padding:22px !important;
    gap:22px !important;
  }
  .team-profile.is-reverse .team-profile-image,
  .team-profile.is-reverse .team-profile-copy{
    order:initial !important;
  }
  .team-profile-image img{
    max-width:520px !important;
    margin:0 auto;
    transform:rotate(-1deg);
  }
  .team-profile:nth-child(even) .team-profile-image img{
    transform:rotate(1deg);
  }
}


/* 1.40: Kirja-sivulle Taustajoukot-sivun energiaa */
.book-entry-clean{
  position:relative;
  overflow:visible !important;
  border:3px solid #111;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
}
.book-entry-clean.book-color-1{background:#88c7e8 !important}
.book-entry-clean.book-color-2{background:#f0adba !important}
.book-entry-clean.book-color-3{background:#fff1b9 !important}
.book-entry-clean.book-color-4{background:#a9d978 !important}

.book-showcase{
  position:relative;
}

.book-cover-hero .book-cover{
  transform:rotate(-1.8deg);
  border:3px solid #111;
  box-shadow:0 18px 34px rgba(0,0,0,.22) !important;
  background:#fff;
  padding:8px;
}
.book-entry-clean:nth-child(even) .book-cover-hero .book-cover{
  transform:rotate(1.8deg);
}

.book-content-panel{
  background:rgba(255,255,255,.72) !important;
  border:2px solid rgba(17,17,17,.9) !important;
  border-radius:26px !important;
  padding:30px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.book-basic-clean{
  display:inline-block;
  background:#fff;
  border:2px solid #111;
  border-radius:20px;
  padding:14px 16px;
  margin-bottom:4px;
}

.book-buy-links-clean a{
  background:#fff !important;
  box-shadow:0 4px 0 rgba(0,0,0,.10);
}

.book-team-preview,
.book-reviews-preview{
  background:rgba(255,255,255,.68);
  border:2px solid rgba(17,17,17,.9);
  border-radius:24px;
  padding:22px 24px !important;
  margin-top:28px !important;
}

.book-team-preview{
  border-top:2px solid #111 !important;
}
.book-reviews-preview{
  border-top:2px solid #111 !important;
}

.book-bubble{
  position:absolute;
  display:block;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  pointer-events:none;
}
.book-bubble-one{width:46px;height:46px;right:18px;top:-14px}
.book-bubble-two{width:20px;height:20px;right:72px;top:34px}

.book-content-panel h2{
  text-shadow:2px 2px 0 rgba(255,255,255,.35);
}

/* Taustajoukkojen kotisivu- ja someikonit */
.team-socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.team-social{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color:#173b45;
  border:2px solid #111;
  border-radius:999px;
  padding:8px 12px;
  text-decoration:none;
  font-weight:900;
  font-size:.9rem;
}
.team-social:hover{
  transform:translateY(-1px);
}
.team-social-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f0adba;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
}
.team-social-instagram .team-social-icon{background:#f0adba}
.team-social-tiktok .team-social-icon{background:#88c7e8}
.team-social-youtube .team-social-icon{background:#fff1b9}
.team-social-facebook .team-social-icon{background:#a9d978}
.team-social-website .team-social-icon{background:#fff}

.home-team-socials{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:7px;
}
.home-team-social-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1.5px solid #111;
  font-size:.72rem;
  font-weight:900;
}

@media(max-width:760px){
  .book-content-panel{
    padding:22px !important;
  }
  .book-team-preview,
  .book-reviews-preview{
    padding:18px !important;
  }
  .team-social{
    font-size:.82rem;
    padding:7px 10px;
  }
}


/* 1.41: Hattiksen unboxausvideo popup */
.team-video-button{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#173b45;
  color:#fff;
  border:2px solid #111;
  border-radius:999px;
  padding:10px 15px;
  font-weight:900;
  cursor:pointer;
  font:inherit;
}
.team-video-button:hover{
  transform:translateY(-1px);
}

.hattis-video-modal[hidden]{display:none !important}
.hattis-video-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.hattis-video-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.hattis-video-dialog{
  position:relative;
  z-index:1;
  width:min(430px,92vw);
  background:#111;
  border:3px solid #fff;
  border-radius:24px;
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.hattis-video-frame-wrap{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:16px;
  background:#000;
}
.hattis-video-frame-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.hattis-video-close{
  position:absolute;
  right:-12px;
  top:-12px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:50%;
  border:2px solid #111;
  background:#fff;
  color:#111;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
body.hattis-video-open{
  overflow:hidden;
}

/* 1.42: etusivun nostot elävämmiksi + Kirja-sivu vaaleammaksi */
.home-section-lead{margin:-8px 0 24px;color:#173b45;font-weight:800;font-size:1rem}
.home-characters,.home-team{position:relative;overflow:hidden}
.home-character-card{position:relative;border:3px solid #111;box-shadow:0 9px 0 rgba(23,59,69,.08);overflow:visible;transition:transform .18s ease}
.home-character-card:nth-child(1){background:#f0adba;transform:rotate(-1.4deg)}
.home-character-card:nth-child(2){background:#fff1b9;transform:rotate(1.2deg)}
.home-character-card:nth-child(3){background:#88c7e8;transform:rotate(-.8deg)}
.home-character-card:nth-child(4){background:#a9d978;transform:rotate(1.4deg)}
.home-character-card:hover{transform:translateY(-4px) rotate(0deg)}
.home-character-image{background:rgba(255,255,255,.82);margin:10px 10px 0;border-radius:15px;height:225px;padding:8px}
.home-character-copy{background:transparent}
.home-character-card::after{content:"";position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.9);border-radius:50%;right:-8px;top:18px}

.home-team-grid{max-width:800px;gap:36px}
.home-team-person{position:relative;padding:18px 12px 14px;border-radius:24px;transition:transform .18s ease}
.home-team-person:nth-child(1){background:#f0adba;transform:rotate(-1.5deg)}
.home-team-person:nth-child(2){background:#fff1b9;transform:rotate(1.4deg)}
.home-team-person:nth-child(3){background:#88c7e8;transform:rotate(-1deg)}
.home-team-person:hover{transform:translateY(-4px) rotate(0deg)}
.home-team-photo{width:165px;height:165px;background:#fff;margin-top:-4px;box-shadow:0 7px 0 rgba(23,59,69,.10)}
.home-team-person::before{content:"";position:absolute;width:30px;height:30px;border:2px solid rgba(255,255,255,.8);border-radius:50%;top:8px;right:12px}
.home-team-socials{display:none !important}

/* Kirja: ei enää sinistä sinisen päällä */
.book-entry-clean,.book-entry-clean.book-color-1,.book-entry-clean.book-color-2,.book-entry-clean.book-color-3,.book-entry-clean.book-color-4{background:#fffaf0 !important;border:0 !important;box-shadow:0 16px 34px rgba(0,45,48,.14) !important}
.book-showcase{grid-template-columns:minmax(390px,.95fr) minmax(0,1.05fr);gap:46px}
.book-left-column{display:flex;flex-direction:column;gap:26px;min-width:0}
.book-content-panel{background:transparent !important;border:0 !important;box-shadow:none !important;padding:8px 0 0 !important}
.book-basic-clean{background:#dff3fa;border:2px solid #111}
.book-content-panel h2{text-shadow:none}
.book-creators-mini{background:#f8d7df;border:2px solid #111;border-radius:25px;padding:20px 22px;position:relative;overflow:hidden}
.book-creators-mini::after{content:"";position:absolute;width:36px;height:36px;border:2px solid rgba(255,255,255,.8);border-radius:50%;right:14px;top:12px}
.book-creators-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 14px}
.book-creator{display:flex;align-items:center;gap:10px;color:#173b45;text-decoration:none;min-width:0}
.book-creator-photo{width:68px;height:68px;flex:0 0 68px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #111;display:grid;place-items:center}
.book-creator-photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.book-creator strong,.book-creator small{display:block}.book-creator small{opacity:.78;font-size:.8rem}.book-creators-more{color:#173b45;font-weight:900;text-decoration:none;border-bottom:2px solid currentColor}
.book-reviews-preview{background:#e6f5f3 !important;border:0 !important;border-radius:24px !important}

@media(max-width:900px){.book-showcase{grid-template-columns:1fr}.book-left-column{max-width:600px;margin:0 auto;width:100%}}
@media(max-width:620px){.home-section-lead{margin-top:-4px}.home-character-image{height:175px}.home-team-grid{gap:12px}.home-team-photo{width:100px;height:100px}.home-team-person{padding:12px 5px}.book-creators-grid{grid-template-columns:1fr}.book-creator-photo{width:58px;height:58px;flex-basis:58px}}


/* 1.45: etusivun neljä Taustajoukkoa samalle riville */
.home-team-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  max-width:1000px !important;
  width:100% !important;
  gap:22px !important;
  margin:18px auto 0 !important;
}
.home-team-person{
  min-width:0 !important;
  width:auto !important;
  padding:18px 12px 16px !important;
}
.home-team-person:nth-child(1){
  background:#f0adba !important;
  transform:rotate(-1.4deg) !important;
}
.home-team-person:nth-child(2){
  background:#fff1b9 !important;
  transform:rotate(1.2deg) !important;
}
.home-team-person:nth-child(3){
  background:#88c7e8 !important;
  transform:rotate(-1deg) !important;
}
.home-team-person:nth-child(4){
  background:#a9d978 !important;
  transform:rotate(1.3deg) !important;
}
.home-team-photo{
  width:145px !important;
  height:145px !important;
}
.home-team-person strong{
  line-height:1.18 !important;
  margin-top:3px !important;
}
.home-team-socials{
  display:none !important;
}

/* 1.45: koko levyinen ostoalue ja kirjailijanosto aina näkyviin */
.book-buy-wide{
  width:100% !important;
  margin-top:30px !important;
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) !important;
  gap:24px !important;
  background:#fff1b9 !important;
  border:3px solid #111 !important;
  border-radius:28px !important;
  padding:25px 28px !important;
}
.book-author-shop{
  background:#f0adba !important;
  border:2px solid #111 !important;
  border-radius:22px !important;
  padding:19px 21px !important;
}
.book-author-shop h3,
.book-shop-list h3{
  color:#173b45 !important;
  margin:0 0 9px !important;
}
.book-author-shop p{
  color:#173b45 !important;
  margin:0 !important;
  font-weight:800 !important;
}
.book-author-shop-textlink{
  color:#173b45 !important;
  font-weight:900 !important;
  text-decoration:none !important;
  border-bottom:2px solid currentColor !important;
}
.book-shop-list{
  align-self:center !important;
}
.book-shop-list h3{
  font-size:1.35rem !important;
}
.book-buy-links-clean{
  justify-content:flex-start !important;
}

@media(max-width:900px){
  .home-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:650px !important;
  }
  .home-team-person{transform:none !important}
  .book-buy-wide{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:520px){
  .home-team-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .home-team-photo{
    width:105px !important;
    height:105px !important;
  }
  .book-buy-wide{
    padding:18px !important;
  }
}

/* 1.46 */
.book-author-shop{position:relative!important;overflow:hidden!important;background:#f08fa8!important;box-shadow:7px 7px 0 #111!important;transform:rotate(-1deg)!important;padding:24px!important}
.book-author-shop:after{content:"★";position:absolute;right:18px;top:10px;font-size:2.4rem;color:#fff1b9;transform:rotate(13deg)}
.book-author-shop h3{max-width:85%;font-size:1.35rem!important;line-height:1.2!important}
.book-author-shop-button{display:inline-block;margin-top:12px;background:#173b45;color:#fff!important;border:2px solid #111;border-radius:999px;padding:11px 17px;font-weight:900;text-decoration:none!important;box-shadow:3px 3px 0 #111}
.news-history{gap:28px!important}
.news-history-card{position:relative;overflow:hidden;box-shadow:7px 7px 0 #111;padding:30px 34px!important}
.news-history-card:nth-child(4n+1){background:#f7cbd5!important;transform:rotate(-.35deg)}
.news-history-card:nth-child(4n+2){background:#fff1b9!important;transform:rotate(.35deg)}
.news-history-card:nth-child(4n+3){background:#d9f1f3!important;transform:rotate(-.25deg)}
.news-history-card:nth-child(4n+4){background:#dff1c9!important;transform:rotate(.3deg)}
.news-history-card:after{content:"";position:absolute;width:54px;height:54px;right:22px;top:18px;border:2px solid rgba(255,255,255,.85);border-radius:50%}
.news-history-card time{display:inline-block!important;background:#fff!important;color:#173b45!important;border:2px solid #111;border-radius:999px;padding:7px 12px;margin-bottom:13px!important;box-shadow:2px 2px 0 #111}
.news-history-card h2{max-width:88%;line-height:1.12}
@media(max-width:760px){.news-history-card,.book-author-shop{transform:none!important}.news-history-card{box-shadow:4px 4px 0 #111}}


/* 1.47: raikkaampi signeerausnosto */
.book-author-shop{
  background:#f7cbd5 !important;
  box-shadow:6px 6px 0 #111 !important;
}
.book-author-shop:after{
  color:#fff !important;
}
.book-author-shop-button{
  background:#173b45 !important;
  color:#fff !important;
}

/* 1.47: etusivun Ajankohtaista-kortit leikkisämmiksi */
.home-news-grid article,
.home-news-grid .news-card,
.home .news-card,
.home .home-news-card{
  position:relative;
  overflow:hidden;
  border:2px solid #111 !important;
  box-shadow:5px 5px 0 #111 !important;
}
.home-news-grid article:nth-child(odd),
.home-news-grid .news-card:nth-child(odd),
.home .news-card:nth-child(odd),
.home .home-news-card:nth-child(odd){
  background:#fff1b9 !important;
  transform:rotate(-.3deg);
}
.home-news-grid article:nth-child(even),
.home-news-grid .news-card:nth-child(even),
.home .news-card:nth-child(even),
.home .home-news-card:nth-child(even){
  background:#d9f1f3 !important;
  transform:rotate(.3deg);
}
.home-news-grid article:after,
.home-news-grid .news-card:after,
.home .news-card:after,
.home .home-news-card:after{
  content:"";
  position:absolute;
  right:15px;
  top:13px;
  width:34px;
  height:34px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  pointer-events:none;
}
.home-news-grid time,
.home .news-card time,
.home .home-news-card time{
  display:inline-block;
  background:#fff;
  border:2px solid #111;
  border-radius:999px;
  padding:5px 9px;
  box-shadow:2px 2px 0 #111;
  margin-bottom:8px;
}
@media(max-width:760px){
  .home-news-grid article,
  .home-news-grid .news-card,
  .home .news-card,
  .home .home-news-card{
    transform:none !important;
  }
}

/* 1.48 Lukijoiden terkut */
.reader-hero{text-align:center;margin-bottom:38px}.reader-hero h1{font-size:clamp(2.5rem,6vw,4.6rem);margin:5px 0}.reader-kicker{display:inline-block;background:#fff1b9;border:2px solid #111;border-radius:999px;padding:6px 12px;font-weight:900;box-shadow:2px 2px 0 #111}.reader-top-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}.reader-official h2,.reader-form-card h2,.reader-public h2{font-size:2rem}.reader-review-list{display:grid;gap:20px}.reader-review-card{background:#d9f1f3;border:3px solid #111;border-radius:24px;padding:24px;box-shadow:6px 6px 0 #111}.reader-review-card:nth-child(even){background:#fff1b9;transform:rotate(.3deg)}.reader-review-card:nth-child(3n){background:#f7cbd5;transform:rotate(-.3deg)}.reader-review-image img{max-width:100%;height:auto;border-radius:14px}.reader-quote{font-size:1.12rem;font-weight:800;line-height:1.5;margin-bottom:12px}.reader-review-card strong{display:block}.reader-review-card a{display:inline-block;margin-top:8px;color:#173b45;font-weight:900}.reader-form-card{position:sticky;top:24px;background:#f7cbd5;border:3px solid #111;border-radius:30px;padding:30px;box-shadow:8px 8px 0 #111}.reader-form-sticker{float:right;font-size:2rem}.reader-form{display:grid;gap:15px}.reader-form label,.star-field legend{font-weight:900}.reader-form input:not([type=radio]):not([type=checkbox]):not([type=file]),.reader-form textarea{display:block;width:100%;margin-top:6px;border:2px solid #111;border-radius:14px;padding:11px;background:#fff;font:inherit}.reader-two{display:grid;grid-template-columns:1fr 100px;gap:12px}.star-field{border:0;padding:0}.stars{display:inline-flex;flex-direction:row-reverse}.stars input{position:absolute;opacity:0}.stars label{font-size:2.4rem;color:#fff;cursor:pointer;-webkit-text-stroke:1.5px #111}.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#ffd34e}.drawing-upload{background:#fff1b9;border:2px dashed #111;border-radius:16px;padding:13px}.drawing-upload input{display:block;margin-top:8px}.permission{display:grid!important;grid-template-columns:auto 1fr;gap:9px;font-size:.88rem}.reader-form button{border:2px solid #111;border-radius:999px;background:#173b45;color:#fff;padding:13px;font-weight:900;box-shadow:3px 3px 0 #111}.reader-thanks{background:#dff1c9;border:2px solid #111;border-radius:15px;padding:12px;font-weight:900}.reader-public{margin-top:58px;padding-top:35px;border-top:3px solid #173b45}.reader-greeting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.reader-greeting-card{background:#fff1b9;border:3px solid #111;border-radius:24px;padding:23px;box-shadow:5px 5px 0 #111}.reader-greeting-card:nth-child(even){background:#d9f1f3}.reader-stars{font-size:1.4rem;color:#e7a900}.reader-message{background:#ffffffaa;border-radius:14px;padding:12px;margin-top:12px}.reader-drawing{display:block;margin-top:14px;color:#173b45;font-weight:900}.reader-drawing img{width:110px;height:110px;object-fit:cover;border:2px solid #111;border-radius:14px;display:block}.reader-empty{background:#fff;border:2px dashed #173b45;border-radius:20px;padding:24px;font-weight:800}.reader-empty-wide{grid-column:1/-1;text-align:center}@media(max-width:820px){.reader-top-grid{grid-template-columns:1fr}.reader-form-card{position:static}.reader-greeting-grid{grid-template-columns:1fr}.reader-review-card{transform:none!important}}

/* 1.49 Lukijoiden terkut */
.reader-page,.reader-page p,.reader-page label,.reader-page legend,
.reader-page h2,.reader-page h3,.reader-page strong,.reader-page .reader-quote{
 color:#173b45;
}
.reader-hero h1{
 color:#efa7b8;
 -webkit-text-stroke:2px #111;
 paint-order:stroke fill;
 text-shadow:none;
 font-weight:800;
 letter-spacing:.01em;
}
.reader-hero>p{color:#fff;font-weight:800}
.reader-form-card{background:#f8d8df}
.reader-form-card h2,.reader-form-card p,.reader-form-card label,.reader-form-card legend{color:#173b45}
.reader-form-card .reader-form button{color:#fff}
.reader-form input,.reader-form textarea{color:#173b45}
.reader-hero-quote{
 display:block;max-width:690px;margin:24px auto 0;padding:15px 24px;
 background:#fff4c7;color:#173b45;border:2px solid #111;
 border-radius:20px 20px 20px 5px;box-shadow:4px 4px 0 #111;
 font-size:1.05rem;font-weight:800;line-height:1.45;transform:rotate(-.5deg);
}
@media(max-width:820px){
 .reader-hero h1{-webkit-text-stroke:1.5px #111}
 .reader-hero-quote{transform:none;margin-left:12px;margin-right:12px}
}


/* Reader reviews: strong readable quote treatment */
.reader-review-card,
.reader-review-card .reader-quote,
.reader-review-card strong,
.reader-review-card p { color:#173b45 !important; }

.reader-review-card { position:relative; overflow:visible; }

.reader-review-card .reader-quote{
  position:relative;
  padding:22px 24px 12px 34px;
  margin:0 0 10px;
  font-size:1.12rem;
  font-weight:800;
  line-height:1.5;
}

.reader-review-card .reader-quote::before{
  content:"“";
  position:absolute;
  left:-4px;
  top:-16px;
  font-size:5.5rem;
  line-height:1;
  font-weight:900;
  color:#ef7899;
  font-family:Georgia,serif;
}

.reader-review-card .reader-quote::after{
  content:"”";
  position:absolute;
  right:0;
  bottom:-34px;
  font-size:5.5rem;
  line-height:1;
  font-weight:900;
  color:#ef7899;
  font-family:Georgia,serif;
}

/* 1.52 Lukijoiden terkut – header cleanup + fan art */
.reader-hero .reader-kicker{
  display:none !important;
}
.reader-hero-quote{
  max-width:720px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:4px 20px !important;
  color:#173b45 !important;
  font-style:italic;
  font-size:1.08rem;
  transform:none !important;
}
.reader-hero-quote::before{
  content:"“";
  margin-right:5px;
  color:#ef7899;
  font-size:2rem;
  font-family:Georgia,serif;
  vertical-align:-.2em;
}
.reader-hero-quote::after{
  content:"”";
  margin-left:5px;
  color:#ef7899;
  font-size:2rem;
  font-family:Georgia,serif;
  vertical-align:-.2em;
}
.drawing-upload{
  background:#fff1b9 !important;
  border:3px dashed #111 !important;
  padding:16px !important;
}
.drawing-upload .drawing-help{
  display:block;
  margin-top:4px;
  font-weight:700;
  font-size:.9rem;
}

/* 1.53 Hattis katkarapukursori – desktop only */
@media (hover:hover) and (pointer:fine){
  html, body, body *{
    cursor:url("assets/images/katkarapu-cursor.png") 4 4, auto !important;
  }
  a, button, input[type="submit"], input[type="button"], input[type="radio"],
  input[type="checkbox"], label[for], select, summary{
    cursor:url("assets/images/katkarapu-cursor.png") 4 4, pointer !important;
  }
}

/* 1.54 Hyväksyttyjen lukijaterkkujen luettavuus */
.reader-public,
.reader-public h2,
.reader-public h3,
.reader-public p,
.reader-public b,
.reader-public strong,
.reader-greeting-card,
.reader-greeting-card h3,
.reader-greeting-card p,
.reader-greeting-card b,
.reader-greeting-card strong,
.reader-greeting-card .reader-message,
.reader-greeting-card .reader-drawing,
.reader-greeting-card .reader-drawing span {
  color:#173b45 !important;
}

.reader-greeting-card{
  background:#fff1b9 !important;
}

.reader-greeting-card:nth-child(even){
  background:#d9f1f3 !important;
}

.reader-greeting-card .reader-message{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(23,59,69,.15);
}

.reader-greeting-card .reader-stars{
  color:#e3a400 !important;
  -webkit-text-stroke:.4px #111;
}

/* 1.55 Lukijoiden terkut – kiitosviesti näkyväksi */
.reader-thanks,
.reader-form-card .reader-thanks,
.reader-form-card .reader-thanks *{
  color:#173b45 !important;
}
.reader-thanks{
  background:#dff1c9 !important;
  border:2px solid #111 !important;
  box-shadow:2px 2px 0 #111;
}
.reader-review-list{align-content:start}
.reader-review-card{padding:20px 22px !important}


/* 1.56 Värityskuvat */
.coloring-hero{
  text-align:center;
  margin-bottom:30px;
}
.coloring-hero h1{
  margin:0;
  color:#efa7b8;
  -webkit-text-stroke:2px #111;
  paint-order:stroke fill;
  font-size:clamp(2.8rem,6vw,4.8rem);
}
.coloring-hero p{
  color:#fff;
  font-weight:800;
  max-width:650px;
  margin:12px auto 0;
}
.coloring-intro{
  max-width:820px;
  margin:0 auto 36px;
  background:#fff1b9;
  border:3px solid #111;
  border-radius:24px;
  padding:18px 22px;
  box-shadow:5px 5px 0 #111;
  transform:rotate(-.35deg);
  color:#173b45;
}
.coloring-intro-badge{
  display:inline-block;
  background:#fff;
  border:2px solid #111;
  border-radius:999px;
  padding:5px 10px;
  font-weight:900;
  font-size:.82rem;
  margin-bottom:7px;
}
.coloring-intro p{margin:0;font-weight:800}
.coloring-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:34px;
}
.coloring-card{
  position:relative;
  background:#f7cbd5;
  border:3px solid #111;
  border-radius:26px;
  padding:18px;
  box-shadow:7px 7px 0 #111;
}
.coloring-card:nth-child(3n+2){background:#d9f1f3;transform:rotate(.5deg)}
.coloring-card:nth-child(3n+3){background:#fff1b9;transform:rotate(-.45deg)}
.coloring-card:nth-child(3n+1){transform:rotate(-.25deg)}
.coloring-paper{
  background:#fff;
  border:2px solid #111;
  border-radius:17px;
  padding:10px;
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.coloring-paper img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.coloring-placeholder{
  font-weight:900;
  color:#173b45;
}
.coloring-copy{
  padding:15px 4px 3px;
  color:#173b45;
}
.coloring-copy h2{
  margin:0 0 6px;
  font-size:1.35rem;
  color:#173b45;
}
.coloring-desc p{margin:0 0 12px}
.coloring-download{
  display:inline-block;
  margin-top:5px;
  background:#173b45;
  color:#fff !important;
  border:2px solid #111;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  text-decoration:none !important;
  box-shadow:3px 3px 0 #111;
}
.coloring-download:hover{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 #111;
}
.coloring-empty{
  grid-column:1/-1;
  background:#fff;
  border:3px dashed #173b45;
  border-radius:24px;
  padding:35px;
  text-align:center;
  color:#173b45;
}
.coloring-empty strong,.coloring-empty span{display:block}
.coloring-empty span{margin-top:7px}
@media(max-width:900px){
  .coloring-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coloring-card{transform:none !important}
}
@media(max-width:580px){
  .coloring-grid{grid-template-columns:1fr}
  .coloring-intro{transform:none}
}


/* 1.58 Etusivun arvostelunostot */
.home-reviews{
  background:#f7f5ec;
  border-radius:28px;
  padding:28px 24px 30px;
  margin-top:28px;
}
.home-reviews h2{
  color:#159c9c;
  margin:0 0 22px;
}
.home-review-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.home-review-card{
  position:relative;
  border:3px solid #111;
  border-radius:22px;
  padding:24px 20px 20px;
  box-shadow:5px 5px 0 #111;
  color:#173b45;
}
.home-review-card:nth-child(1){background:#d9f1f3;transform:rotate(-.35deg)}
.home-review-card:nth-child(2){background:#fff1b9;transform:rotate(.35deg)}
.home-review-card:nth-child(3){background:#f7cbd5;transform:rotate(-.25deg)}
.home-review-quote{
  position:relative;
  padding:14px 14px 12px 25px;
  font-weight:800;
  line-height:1.5;
  color:#173b45;
}
.home-review-quote:before{
  content:"“";
  position:absolute;
  left:-4px;
  top:-18px;
  font:900 4.8rem/1 Georgia,serif;
  color:#ef7899;
}
.home-review-card strong{
  display:block;
  margin-top:8px;
  color:#173b45;
}
.home-review-card a{
  display:inline-block;
  margin-top:7px;
  color:#173b45;
  font-weight:900;
}
.home-review-empty{
  grid-column:1/-1;
  padding:22px;
  border:2px dashed #173b45;
  border-radius:18px;
  text-align:center;
  color:#173b45;
  background:#fff;
}
.home-section-link{
  text-align:center;
  margin-top:20px;
}
.home-section-link a{
  color:#173b45;
  font-weight:900;
  text-decoration:none;
  border-bottom:2px solid currentColor;
}
@media(max-width:900px){
  .home-review-grid{grid-template-columns:1fr}
  .home-review-card{transform:none !important}
}


/* 1.59 Etusivun arvostelut samaan kokoon muiden osioiden kanssa */
.home-reviews{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:28px 24px 30px !important;
  background:#f7f5ec !important;
  border-radius:28px !important;
}
#arviot{
  margin-top:0;
}






/* 1.62 Etusivun arvosteluille välikoko: ei koko ruudun levyinen eikä liian kapea */
#arviot .site-shell.home-reviews{
  width:calc(100% - 48px) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* v1.65: Kirja-sivun pienet arvostelunostot */
.book-reviews-preview{display:block !important;padding:22px !important}
.book-review-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 14px}
.book-review-mini{position:relative;background:#d9f1f3;border:2px solid #111;border-radius:16px;padding:16px 14px 13px;box-shadow:3px 3px 0 #111;min-width:0}
.book-review-mini:nth-child(2){background:#fff1b9}.book-review-mini:nth-child(3){background:#f7cbd5}.book-review-mini:nth-child(4){background:#d9f1f3}
.book-review-mini-quote{font-size:.88rem;line-height:1.4;font-weight:700;padding-top:13px}
.book-review-mini-quote:before{content:'“';position:absolute;top:2px;left:10px;font-size:2.3rem;line-height:1;color:#f26b9a;font-weight:900}
.book-review-mini strong{display:block;margin-top:9px;font-size:.8rem}
.book-reviews-preview .book-reviews-link{display:block;width:max-content;margin-left:auto;font-weight:900}
.book-review-mini-empty{grid-column:1/-1}
@media(max-width:900px){.book-review-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.book-review-mini-grid{grid-template-columns:1fr}}


/* 1.66 Kirja-sivun arvostelukorttien luettavuus */
.book-reviews-preview,
.book-reviews-preview .book-reviews-kicker,
.book-review-mini,
.book-review-mini-quote,
.book-review-mini strong,
.book-review-mini p,
.book-reviews-preview .book-reviews-link{
  color:#173b45 !important;
}
.book-review-mini-quote{color:#173b45 !important}
.book-review-mini strong{color:#173b45 !important}


/* 1.66 Yhteystiedot */
.contact-hero{text-align:center;margin-bottom:34px}
.contact-hero h1{margin:0;color:#efa7b8;-webkit-text-stroke:2px #111;paint-order:stroke fill;font-size:clamp(2.8rem,6vw,4.8rem)}
.contact-hero p{color:#fff;font-weight:800;margin:10px auto 0}
.contact-editable{max-width:980px;margin:0 auto 28px;background:#f7f5ec;border:3px solid #111;border-radius:24px;padding:20px 24px;color:#173b45;box-shadow:5px 5px 0 #111}
.contact-editable *{color:#173b45}
.contact-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:start}
.contact-form-card{position:relative;background:#f7cbd5;border:3px solid #111;border-radius:28px;padding:28px;box-shadow:8px 8px 0 #111;color:#173b45}
.contact-form-card h2{margin:0 0 4px;font-size:2rem;color:#173b45}.contact-form-card>p{margin:0 0 20px;color:#173b45}
.contact-sticker{position:absolute;right:22px;top:-20px;width:54px;height:54px;display:grid;place-items:center;background:#fff1b9;border:3px solid #111;border-radius:50%;font-size:1.45rem;transform:rotate(8deg)}
.contact-form{display:grid;gap:14px}.contact-form label{font-weight:900;color:#173b45}.contact-form input,.contact-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;border:2px solid #111;border-radius:14px;background:#fff;padding:11px;font:inherit;color:#173b45}
.contact-form textarea{resize:vertical}.contact-form button{border:2px solid #111;border-radius:999px;background:#173b45;color:#fff;padding:13px 18px;font-weight:900;box-shadow:3px 3px 0 #111;cursor:pointer}.contact-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.contact-notice{border:2px solid #111;border-radius:14px;padding:11px 13px;margin:0 0 14px;font-weight:900;color:#173b45}.contact-notice.success{background:#dff1c9}.contact-notice.error{background:#fff1b9}
.contact-info-stack{display:grid;gap:20px}.contact-info-card{border:3px solid #111;border-radius:24px;padding:24px;box-shadow:6px 6px 0 #111;color:#173b45}.contact-info-card.pink{background:#f7cbd5;transform:rotate(.35deg)}.contact-info-card.yellow{background:#fff1b9;transform:rotate(-.3deg)}.contact-info-card.blue{background:#d9f1f3;transform:rotate(.25deg)}
.contact-info-card h2{margin:7px 0 9px;color:#173b45}.contact-info-card p{color:#173b45}.contact-mini{display:inline-block;background:#fff;border:2px solid #111;border-radius:999px;padding:5px 9px;font-size:.75rem;font-weight:900}.contact-email{display:inline-block;margin-top:4px;font-size:1.05rem;color:#173b45}.contact-info-card a{color:#173b45;font-weight:900}
@media(max-width:850px){.contact-layout{grid-template-columns:1fr}.contact-info-card{transform:none!important}}

/* 1.67 retro käyntilaskuri */
.hattis-counter-wrap{max-width:1180px;margin:34px auto 8px;padding:0 24px;text-align:center}.hattis-counter{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#173b45;border:3px solid #111;border-radius:18px;padding:11px 16px;box-shadow:4px 4px 0 #111;color:#fff}.counter-label{font-size:.72rem;font-weight:900;letter-spacing:.07em;color:#fff}.counter-digits{display:flex;gap:2px}.counter-digits b{display:grid;place-items:center;min-width:22px;height:30px;background:#050505;border:1px solid #8aa0a5;border-radius:3px;color:#7fffd4;font:700 1.05rem/1 monospace;text-shadow:0 0 5px rgba(127,255,212,.7)}
/* 1.67 tietosuoja */
.privacy-page{color:#173b45}.privacy-hero{text-align:center;margin-bottom:34px}.privacy-hero h1{margin:0;color:#efa7b8;-webkit-text-stroke:2px #111;paint-order:stroke fill;font-size:clamp(2.8rem,6vw,4.8rem)}.privacy-hero p{color:#fff;font-weight:800}.privacy-editable{max-width:940px;margin:0 auto 22px;background:#fff;border:3px solid #111;border-radius:22px;padding:22px}.privacy-stack{max-width:940px;margin:0 auto;display:grid;gap:20px}.privacy-card{background:#fff;border:3px solid #111;border-radius:24px;padding:24px 26px;box-shadow:5px 5px 0 #111}.privacy-card:nth-child(3n+1){background:#d9f1f3}.privacy-card:nth-child(3n+2){background:#fff1b9}.privacy-card:nth-child(3n){background:#f7cbd5}.privacy-card h2{margin:0 0 12px;color:#173b45}.privacy-card p{color:#173b45!important;line-height:1.6}


/* 1.68 Hattis-evästebanneri */
.hattis-cookie-banner{
  position:fixed;
  left:18px; right:18px; bottom:18px;
  z-index:99999;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.hattis-cookie-banner[hidden]{display:none!important}
.hattis-cookie-inner{
  pointer-events:auto;
  width:min(820px,100%);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  background:#fff1b9;
  color:#173b45;
  border:3px solid #111;
  border-radius:24px;
  padding:16px 18px;
  box-shadow:7px 7px 0 #111;
}
.hattis-cookie-shrimp{font-size:2rem}
.hattis-cookie-copy strong{display:block;font-size:1.15rem;margin-bottom:3px}
.hattis-cookie-copy p{margin:0 0 5px!important;color:#173b45!important;font-size:.9rem;line-height:1.35}
.hattis-cookie-copy a{color:#173b45;font-weight:900;font-size:.85rem}
.hattis-cookie-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hattis-cookie-actions button,
.footer-cookie-settings button{
  border:2px solid #111;
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  cursor:pointer;
}
.cookie-accept{background:#173b45;color:#fff}
.cookie-deny{background:#fff;color:#173b45}
.footer-cookie-settings{text-align:center;margin-top:8px}
.footer-cookie-settings button{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.45);
  padding:5px 10px;
  font-size:.75rem;
}
@media(max-width:720px){
  .hattis-cookie-inner{grid-template-columns:auto 1fr}
  .hattis-cookie-actions{grid-column:1/-1;justify-content:center}
}


/* 1.69 Evästebanneri: Hattiksen oma värimaailma */
.hattis-cookie-inner{
  grid-template-columns:1fr auto;
  background:#d8f1f3;
  border-color:#111;
  box-shadow:7px 7px 0 #111;
}
.hattis-cookie-shrimp{display:none!important}
.hattis-cookie-copy strong{color:#173b45}
.hattis-cookie-actions .cookie-accept{
  background:#ef7598;
  color:#fff;
  border-color:#111;
}
.hattis-cookie-actions .cookie-deny{
  background:#fff;
  color:#173b45;
  border-color:#111;
}
@media(max-width:720px){
  .hattis-cookie-inner{grid-template-columns:1fr}
  .hattis-cookie-actions{grid-column:1}
}


/* 1.70 Tietosuojasivu: ei WordPressin englanninkielistä oletustekstiä */
.privacy-editable{display:none!important}

/* 1.70 Kävijälaskuri paperilapuiksi */
.hattis-counter-wrap{
  margin:40px auto 12px;
}
.hattis-counter{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:10px 12px !important;
  gap:12px !important;
}
.hattis-counter .counter-label{
  color:#fff !important;
  font-size:.82rem;
  letter-spacing:.05em;
  text-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.hattis-counter .counter-shrimp{display:none!important}
.hattis-counter .counter-digits{
  display:flex;
  gap:7px;
  align-items:center;
}
.hattis-counter .counter-digits b{
  position:relative;
  min-width:34px !important;
  height:40px !important;
  padding:2px 5px !important;
  display:grid;
  place-items:center;
  background:#fff8dc !important;
  color:#173b45 !important;
  border:2px solid #111 !important;
  border-radius:3px 7px 4px 6px !important;
  box-shadow:2px 3px 0 rgba(0,0,0,.55) !important;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive !important;
  font-size:1.55rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:none !important;
}
.hattis-counter .counter-digits b:nth-child(1){transform:rotate(-4deg)}
.hattis-counter .counter-digits b:nth-child(2){transform:rotate(2deg) translateY(1px)}
.hattis-counter .counter-digits b:nth-child(3){transform:rotate(-2deg) translateY(-1px)}
.hattis-counter .counter-digits b:nth-child(4){transform:rotate(4deg)}
.hattis-counter .counter-digits b:nth-child(5){transform:rotate(-3deg) translateY(1px)}
.hattis-counter .counter-digits b:nth-child(6){transform:rotate(2deg)}
.hattis-counter .counter-digits b:nth-child(7){transform:rotate(-1deg) translateY(-1px)}
.hattis-counter .counter-digits b::before{
  content:"";
  position:absolute;
  inset:2px;
  border:1px dashed rgba(23,59,69,.18);
  pointer-events:none;
}
@media(max-width:620px){
  .hattis-counter{gap:7px!important}
  .hattis-counter .counter-label{width:100%;text-align:center}
  .hattis-counter .counter-digits b{
    min-width:27px!important;
    height:34px!important;
    font-size:1.25rem!important;
  }
}


/* 1.71 Hattiksen käsin väkertämä käyntilaskuri hero-osioon */
.hero-counter{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  max-width:560px;
  padding:12px 15px 11px;
  position:relative;
}
.hero-counter-note{
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;
  font-weight:900;
  font-size:.95rem;
  color:#173b45;
  transform:rotate(-2deg);
}
.hero-counter-note-last{
  transform:rotate(3deg);
}
.hero-counter-digits{
  display:flex;
  align-items:center;
  gap:7px;
}
.hero-counter-paper{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:56px;
  background:#fff6d8;
  border:2.5px solid #111;
  box-shadow:3px 4px 0 rgba(0,0,0,.55);
  overflow:visible;
}
.hero-counter-paper b{
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;
  font-size:2.15rem;
  line-height:1;
  color:#173b45;
  font-weight:900;
  transform:rotate(-3deg);
}
.hero-counter-paper::before{
  content:"";
  position:absolute;
  width:24px;
  height:9px;
  top:-7px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,255,255,.58);
  border:1px solid rgba(23,59,69,.12);
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.hero-counter-paper::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px dashed rgba(23,59,69,.18);
  pointer-events:none;
}
.hero-counter-paper:nth-child(1){
  transform:rotate(-6deg) translateY(2px);
  border-radius:4px 8px 3px 7px;
  background:#fff1b9;
}
.hero-counter-paper:nth-child(2){
  transform:rotate(4deg) translateY(-2px);
  border-radius:7px 3px 8px 4px;
  background:#f7d6df;
}
.hero-counter-paper:nth-child(3){
  transform:rotate(-2deg) translateY(1px);
  border-radius:3px 7px 5px 4px;
  background:#d9f1f3;
}
.hero-counter-paper:nth-child(4){
  transform:rotate(5deg);
  border-radius:8px 4px 6px 3px;
  background:#fff6d8;
}
.hero-counter-paper:nth-child(5){
  transform:rotate(-5deg) translateY(-1px);
  border-radius:4px 8px 3px 6px;
  background:#f3cfda;
}
.hero-counter-paper:nth-child(2) b{transform:rotate(4deg)}
.hero-counter-paper:nth-child(3) b{transform:rotate(-5deg)}
.hero-counter-paper:nth-child(4) b{transform:rotate(2deg)}
.hero-counter-paper:nth-child(5) b{transform:rotate(-2deg)}

@media(max-width:700px){
  .hero-counter{
    justify-content:center;
    margin-top:20px;
    padding:8px 4px;
  }
  .hero-counter-note{
    width:100%;
    text-align:center;
  }
  .hero-counter-note-last{
    width:auto;
  }
  .hero-counter-paper{
    width:40px;
    height:48px;
  }
  .hero-counter-paper b{
    font-size:1.8rem;
  }
}


/* 1.72 Laskurin teksti numeroiden yläpuolelle */
.hero-counter{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:7px !important;
}
.hero-counter-note{
  width:auto !important;
  text-align:left !important;
  margin:0 !important;
}
.hero-counter-note-last{
  display:none !important;
}
.hero-counter-note:first-child::after{
  content:" kertaa!";
}
.hero-counter-digits{
  margin-left:0 !important;
}
@media(max-width:700px){
  .hero-counter{
    align-items:center !important;
  }
  .hero-counter-note{
    text-align:center !important;
  }
}


/* 1.73 "kertaa!" takaisin numeroiden alle */
.hero-counter-note:first-child::after{
  content:"" !important;
}
.hero-counter-note-last{
  display:block !important;
  margin-top:1px !important;
  transform:rotate(3deg) !important;
}

/* Kirja: esittelyaukeama ennen ostolinkkejä */
.book-spread-preview {
  margin: 28px auto 34px;
  max-width: 900px;
  text-align: center;
}
.book-spread-preview img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}


/* v1.76: hide empty content bars/containers beneath pages */
.site-main > .container:empty,
.site-main > .wrap:empty,
.site-main > .content-wrap:empty,
main > .container:empty,
main > .wrap:empty,
main > .content-wrap:empty,
.page-content > div:empty,
.entry-content > div:empty,
.page-shell > div:empty {
  display: none !important;
}

/* Kirja: whole author purchase card is clickable */
.author-buy-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.author-buy-link:hover,
.author-buy-link:focus {
  color: inherit;
  text-decoration: none;
}


/* v1.77: do not show the styled page-content box when the page editor is empty */
.site-main.standard .entry-content:empty,
.entry-content:empty {
  display: none !important;
}


/* 1.78 Pelihalli uusiksi */
.games-page-new{
  max-width:1040px;
  margin:0 auto 30px;
  color:#173b45;
}
.games-page-hero{
  text-align:center;
  margin:0 0 24px;
}
.games-page-hero h1{
  margin:0;
  color:#efa7b8;
  -webkit-text-stroke:2px #111;
  paint-order:stroke fill;
  font-size:clamp(2.5rem,5vw,4.2rem);
  line-height:1.05;
}
.games-page-hero p{
  color:#fff;
  font-weight:800;
  margin:12px 0 0;
}
.games-playstation-art{
  max-width:880px;
  margin:0 auto 34px;
  transform:rotate(-.6deg);
}
.games-playstation-art img{
  display:block;
  width:100%;
  height:auto;
  border:3px solid #111;
  border-radius:24px;
  box-shadow:8px 8px 0 #111;
}
.games-main-card{
  background:#f7cbd5;
  border:3px solid #111;
  border-radius:28px;
  padding:20px;
  box-shadow:8px 8px 0 #111;
}
.games-thumb-big{
  position:relative;
  display:block;
  overflow:hidden;
  border:3px solid #111;
  border-radius:22px;
  background:#121a33;
}
.games-thumb-big img{
  display:block;
  width:100%;
  height:auto;
}
.games-thumb-big::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 48%);
  pointer-events:none;
}
.games-play-button{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%) rotate(-1deg);
  z-index:2;
  background:#fff1b9;
  color:#173b45;
  border:3px solid #111;
  border-radius:999px;
  padding:15px 34px;
  font-weight:900;
  font-size:1.3rem;
  box-shadow:5px 5px 0 #111;
}
.games-thumb-big:hover .games-play-button{
  transform:translateX(-50%) translateY(-2px) rotate(1deg);
}
.games-main-copy{
  padding:18px 8px 4px;
}
.games-main-copy h2{
  margin:0 0 7px;
  font-size:clamp(1.5rem,2.5vw,2.2rem);
}
.games-main-copy p{
  margin:0;
  font-weight:700;
}
@media(max-width:700px){
  .games-page-new{padding:0 4px}
  .games-playstation-art{transform:none}
  .games-main-card{padding:12px}
  .games-play-button{bottom:16px;padding:11px 24px;font-size:1.05rem}
}


/* 1.79 Pelihallin introkuva pienemmäksi ja leikkisämmäksi */
.games-playstation-art-wrap{
  max-width:610px;
  margin:0 auto 40px;
  text-align:center;
  position:relative;
}
.games-playstation-art{
  max-width:560px !important;
  margin:0 auto !important;
  transform:rotate(-2.2deg) !important;
  position:relative;
}
.games-playstation-art::before,
.games-playstation-art::after{
  content:"";
  position:absolute;
  width:70px;
  height:20px;
  top:-11px;
  z-index:3;
  background:rgba(255,241,185,.82);
  border:1px solid rgba(23,59,69,.18);
}
.games-playstation-art::before{
  left:42px;
  transform:rotate(-8deg);
}
.games-playstation-art::after{
  right:38px;
  transform:rotate(7deg);
}
.games-playstation-art img{
  border:3px solid #111 !important;
  border-radius:16px !important;
  box-shadow:8px 8px 0 #111 !important;
}
.games-playstation-note{
  display:inline-block;
  margin-top:18px;
  padding:7px 12px;
  background:#fff1b9;
  border:2px solid #111;
  border-radius:7px 10px 6px 9px;
  box-shadow:3px 3px 0 #111;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;
  font-weight:900;
  color:#173b45;
  transform:rotate(1.5deg);
}
.games-page-hero{
  margin-bottom:28px !important;
}
.games-page-hero h1{
  font-size:clamp(2.8rem,5vw,4.4rem) !important;
}
@media(max-width:700px){
  .games-playstation-art-wrap{max-width:92%}
  .games-playstation-art{max-width:100%!important;transform:rotate(-1deg)!important}
}


/* 1.81 Upotettu peli kokonaan näkyviin ilman koko näyttöä */
.hattis-game-page{
  padding-bottom:70px !important;
}
.game-frame-wrap{
  width:100% !important;
  max-width:1100px !important;
  margin:0 auto 36px !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  border-radius:22px;
}
.hattis-game-frame{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;
  border:0 !important;
}
@media(max-width:900px){
  .hattis-game-page{
    padding-bottom:48px !important;
  }
  .game-frame-wrap{
    margin-bottom:28px !important;
  }
}


/* 1.82 Desktop: koko pelilauta näkyviin ilman fullscreenia.
   Kumotaan vanha 100svh/flex-lukitus vain tavallisessa desktop-näkymässä. */
@media (min-width:901px){
  body.page-hattis-vastaan-kinderin-isoaiti{
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.page-hattis-vastaan-kinderin-isoaiti .site-main{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.page-hattis-vastaan-kinderin-isoaiti .hattis-game-page{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding-bottom:70px !important;
  }

  body.page-hattis-vastaan-kinderin-isoaiti .game-frame-wrap{
    flex:none !important;
    width:min(1100px, calc((100svh - 350px) * 16 / 9), calc(100vw - 64px)) !important;
    max-width:1100px !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    margin:0 auto 44px !important;
    overflow:hidden !important;
  }

  body.page-hattis-vastaan-kinderin-isoaiti .hattis-game-frame{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }
}

/* Fullscreen saa edelleen käyttää koko ruudun. */
#gameFullscreenTarget:fullscreen,
#gameFullscreenTarget:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  border-radius:0 !important;
}


/* 1.83 Peli oikeasti kokonaan ruudulle desktopilla.
   Ei luoteta WordPressin body-luokkaan, vaan kohdistetaan suoraan pelisivun elementteihin. */
@media (min-width:901px){
  .hattis-game-page{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    margin:0 auto 60px !important;
    padding-bottom:35px !important;
  }

  .hattis-game-page .game-frame-wrap{
    flex:none !important;
    width:min(920px, calc(100vw - 80px)) !important;
    max-width:920px !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    margin:0 auto 42px !important;
    overflow:hidden !important;
  }

  .hattis-game-page .hattis-game-frame{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }

  .hattis-game-page .game-toolbar{
    width:min(920px, calc(100vw - 80px)) !important;
    margin:0 auto 14px !important;
  }
}

/* fullscreen edelleen koko ruudulle */
#gameFullscreenTarget:fullscreen,
#gameFullscreenTarget:-webkit-full-screen{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  aspect-ratio:auto !important;
  margin:0 !important;
}


/* 1.84 Peli niin suureksi kuin viewporttiin mahtuu, mutta ei yli.
   Koko määrittyy sekä ruudun leveyden että käytettävissä olevan korkeuden mukaan. */
@media (min-width:901px){
  .hattis-game-page .game-frame-wrap{
    width:min(
      1280px,
      calc(100vw - 48px),
      calc((100svh - 220px) * 16 / 9)
    ) !important;
    max-width:none !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    margin:0 auto 34px !important;
  }

  .hattis-game-page .game-toolbar{
    width:min(
      1280px,
      calc(100vw - 48px),
      calc((100svh - 220px) * 16 / 9)
    ) !important;
    max-width:none !important;
    margin:0 auto 12px !important;
  }
}


/* 1.85 Desktop: pelin koko lasketaan oikeasti viewportin korkeudesta.
   Jätetään ylävalikolle + työkalupalkille + alareunan hengitystilalle ~285 px.
   Näin peli on mahdollisimman iso ilman että alareuna menee ruudun alle. */
@media (min-width:901px){
  .hattis-game-page .game-frame-wrap,
  .hattis-game-page .game-toolbar{
    width:min(
      1180px,
      calc(100vw - 56px),
      calc((100svh - 285px) * 16 / 9)
    ) !important;
    max-width:none !important;
  }

  .hattis-game-page .game-frame-wrap{
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    margin:0 auto 30px !important;
  }

  .hattis-game-page .game-toolbar{
    margin:0 auto 12px !important;
  }
}


/* 1.92 Edge/Windows: yläpalkin linkkien klikattavuus.
   Nostetaan navigaatio varmasti kaikkien koriste- ja logokerrosten päälle. */
.site-header,
.header-inner{
  isolation:isolate;
}
.site-header .primary-nav{
  position:relative !important;
  z-index:500 !important;
  pointer-events:auto !important;
}
.site-header .primary-nav ul,
.site-header .primary-nav li{
  position:relative !important;
  z-index:501 !important;
  pointer-events:auto !important;
}
.site-header .primary-nav a{
  position:relative !important;
  z-index:502 !important;
  display:block !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

/* Logo saa näkyä normaalisti, mutta sen läpinäkyvä PNG ei saa napata
   klikkauksia linkkien päältä Edge-selaimessa. */
.site-header .branding{
  z-index:20 !important;
}
.site-header .hattis-fixed-logo{
  z-index:21 !important;
}
.site-header .hattis-fixed-logo img{
  pointer-events:none !important;
}

/* Myös kuplakoristeet pidetään varmasti täysin ei-interaktiivisina. */
.global-bubbles,
.global-bubbles *{
  pointer-events:none !important;
}