/* TigKid Festival Experience: vivid seasonal artwork without images, tracking or external assets. */
:root { --tk-fest-accent:#6b9b5a; --tk-fest-light:#f4faf4; --tk-fest-dark:#142029; }
.tk-festival-ribbon[hidden],.tk-festival-scene[hidden],.tk-festival-card[hidden] {display:none!important}
.tk-festival-ribbon {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:9px max(18px,calc((100vw - 1200px)/2)); overflow:hidden;
  border-bottom:2px solid var(--tk-fest-accent); position:relative; z-index:2;
  background:var(--tk-fest-dark); color:#fff7df; font-size:12px;
  text-align:center; box-shadow:0 5px 24px rgba(0,0,0,.15);
}
.tk-festival-ribbon span{white-space:nowrap;font-size:18px;letter-spacing:10px;opacity:.9}
.tk-festival-ribbon strong{font-size:13px;letter-spacing:.09em;white-space:nowrap}
.tk-festival-card {
  position:relative; z-index:2; display:flex; flex-direction:column; gap:4px;
  width:fit-content; max-width:100%; padding:10px 15px; margin:12px 0;
  border-radius:14px; border:1px solid var(--tk-fest-accent);
  background:var(--tk-fest-dark); color:#fff7ee;
  box-shadow:0 8px 30px rgba(0,0,0,.17);
}
.tk-festival-card-title{font-size:1.03rem;line-height:1.35;}
.tk-festival-card-text{font-size:.84rem;line-height:1.35;color:#fff7ea}
.tk-festival-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;border-radius:inherit}
.tk-festival-symbol{position:absolute;display:block;font-size:clamp(22px,3.4vw,55px);filter:drop-shadow(0 5px 9px rgba(0,0,0,.22));animation:tkFestivalFloat 5.5s ease-in-out infinite alternate}
.tk-festival-symbol-1{left:2%;top:4%;font-size:55px}
.tk-festival-symbol-2{right:3%;top:2%;font-size:50px;animation-delay:-1.5s}
.tk-festival-symbol-3{right:12%;bottom:3%;font-size:60px;animation-delay:-3s}
.tk-festival-symbol-4{left:3%;bottom:8%;font-size:35px;animation-delay:-2s}
.tk-festival-symbol-5{left:36%;top:6%;font-size:32px;animation-delay:-1s}
.tk-festival-symbol-6{right:23%;top:43%;font-size:37px;animation-delay:-4s}
.tk-festival-symbol-7{left:20%;bottom:20%;font-size:36px;animation-delay:-.8s}
.tk-festival-symbol-8{right:3%;bottom:35%;font-size:26px;animation-delay:-2.7s}
.tk-festival-symbol-9{left:62%;bottom:8%;font-size:28px;animation-delay:-3.4s}
@keyframes tkFestivalFloat{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-14px) rotate(9deg)}}
:root[data-tk-motion="off"] .tk-festival-symbol{animation:none!important}
/* The homepage banner is a real illustrated scene, not merely an accent recolour. */
:root[data-tk-look]:not([data-tk-look="classic"]) .tig-logo-card,
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero{
  position:relative; isolation:isolate;
  box-shadow:inset 0 0 0 2px var(--tk-fest-accent),0 18px 36px rgba(0,0,0,.17);
}
:root[data-tk-look]:not([data-tk-look="classic"]) .tig-logo-card img{position:relative;z-index:2;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero>.eyebrow,
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero>h1,
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero>p,
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero>.button-row{position:relative;z-index:2}
:root[data-tk-look]:not([data-tk-look="classic"]) .tk-festival-scene{background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.1),transparent 58%)}
:root[data-tk-look="halloween"] body.tigkid-page,
:root[data-tk-look="halloween"] .app-shell{
  background-image:radial-gradient(ellipse at 90% 0,rgba(223,94,21,.18),transparent 33rem),radial-gradient(ellipse at 4% 30%,rgba(139,62,188,.21),transparent 32rem)!important;
}
:root[data-tk-look="halloween"] .tig-logo-card,
:root[data-tk-look="halloween"] #homeScreen .hero{
  background: radial-gradient(circle at 78% 16%,#e78d3e 0 8%,transparent 8.5%),radial-gradient(circle at 78% 16%,rgba(241,139,53,.35),transparent 38%),linear-gradient(150deg,#251231,#371734 62%,#150f2d)!important;
}
:root[data-tk-look="halloween"] .tk-festival-ribbon {background:repeating-linear-gradient(110deg,#261333 0 24px,#301342 25px 45px)}
:root[data-tk-look="halloween"] .tk-festival-card{background:linear-gradient(120deg,#231035,#4a1a32);color:#ffe0ab}
:root[data-tk-look="christmas"] body.tigkid-page,
:root[data-tk-look="christmas"] .app-shell{
  background-image:radial-gradient(circle at 95% 2%,rgba(255,255,255,.12),transparent 35rem),radial-gradient(circle at 5% 25%,rgba(35,160,100,.2),transparent 30rem)!important;
}
:root[data-tk-look="christmas"] .tig-logo-card,
:root[data-tk-look="christmas"] #homeScreen .hero{
  background:radial-gradient(circle at 80% 12%,rgba(255,245,192,.7),transparent 28%),linear-gradient(150deg,#083b39,#145845 63%,#092b40)!important;
}
:root[data-tk-look="christmas"] .tk-festival-ribbon {background:repeating-linear-gradient(115deg,#164635 0 34px,#932f43 35px 67px);border-bottom:3px solid #eac77c}
:root[data-tk-look="christmas"] .tk-festival-card{background:linear-gradient(130deg,#7e2134,#135d43);border-color:#f1ce7c}
:root[data-tk-look="newyear"] .tig-logo-card,
:root[data-tk-look="newyear"] #homeScreen .hero{
  background:radial-gradient(circle at 30% 13%,rgba(245,207,97,.5),transparent 28%),linear-gradient(135deg,#14224d,#362458 70%,#101b34)!important;
}
:root[data-tk-look="newyear"] .tk-festival-ribbon{background:linear-gradient(100deg,#161b43,#4b2766,#161b43)}
:root[data-tk-look="newyear"] .tk-festival-card{background:#20204b;color:#ffeca8}
:root[data-tk-look="spring"] .tig-logo-card,
:root[data-tk-look="spring"] #homeScreen .hero,
:root[data-tk-look="easter"] .tig-logo-card,
:root[data-tk-look="easter"] #homeScreen .hero{background:linear-gradient(140deg,#d7f3e5,#f8dff6 60%,#fff2ce)!important}
:root[data-tk-look="summer"] .tig-logo-card,
:root[data-tk-look="summer"] #homeScreen .hero{background:linear-gradient(140deg,#ffe6a2,#a7e1f4 65%,#7ccbb4)!important}
:root[data-tk-look="valentines"] .tig-logo-card,
:root[data-tk-look="valentines"] #homeScreen .hero{background:linear-gradient(140deg,#f9bacf,#f4d5eb 60%,#fef1ea)!important}
:root[data-tk-look="bonfire"] .tig-logo-card,
:root[data-tk-look="bonfire"] #homeScreen .hero{background:linear-gradient(140deg,#1b203e,#4c2044 65%,#1b152d)!important}
:root[data-tk-look]:not([data-tk-look="classic"]) body.tigkid-page .category-art,
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .category-card {
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--tk-fest-accent) 15%,transparent),transparent)!important;
  border-color:var(--tk-fest-accent)!important;
}
:root[data-tk-look]:not([data-tk-look="classic"]) body.tigkid-page .tigkid-header,
:root[data-tk-look]:not([data-tk-look="classic"]) .topbar{border-bottom:3px solid var(--tk-fest-accent)}
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero .tk-festival-card{margin-bottom:12px}
:root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero{padding-bottom:25px}
@media(max-width:700px){
 .tk-festival-ribbon {padding:9px 10px;gap:7px}
 .tk-festival-ribbon span{font-size:15px;letter-spacing:1px;flex:1;overflow:hidden}
 .tk-festival-ribbon strong{white-space:normal;font-size:11px;flex:2}
 .tk-festival-symbol{opacity:.9;transform:scale(.8)}
 .tk-festival-symbol-6,.tk-festival-symbol-7,.tk-festival-symbol-8,.tk-festival-symbol-9{display:none}
 .tk-festival-card{font-size:.9rem}
}
@media(max-width:520px){
 :root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero{padding-right:16px;padding-top:120px}
 :root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .hero::before{right:18px;top:64px;width:75px;height:75px}
 :root[data-tk-look]:not([data-tk-look="classic"]) #homeScreen .tk-festival-scene{max-height:125px;bottom:auto}
 .tk-festival-symbol-1{font-size:38px}
 .tk-festival-symbol-2{font-size:43px}
 .tk-festival-symbol-3{font-size:36px}
 .tk-festival-card{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.tk-festival-symbol{animation:none!important}}

/* Themes should be a visual choice, not only a dropdown. */
.tk-theme-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:13px}
.tk-theme-preview{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;min-height:72px;padding:8px 4px;background:#17232a;color:#eaf5e8;border:1px solid #597164;border-radius:11px;font:700 11px/1.25 system-ui;cursor:pointer;text-align:center}
.tk-theme-preview-emoji{font-size:27px;line-height:1.3}
.tk-theme-preview.selected{border:2px solid #f3c369;box-shadow:0 0 0 2px rgba(243,195,105,.21);background:#304d40}
.tk-theme-preview:focus-visible{outline:3px solid #f3c369;outline-offset:2px}
.tk-web-theme-settings .tk-theme-preview{min-height:69px;padding:7px 3px}
:root[data-tk-custom="yes"][data-tk-appearance="light"] .tig-logo-card,
:root[data-tk-custom="yes"][data-tk-appearance="light"] #homeScreen .hero{
  background:linear-gradient(150deg,var(--tk-fest-light),color-mix(in srgb,var(--tk-fest-accent) 42%,white))!important;
}
:root[data-tk-custom="yes"][data-tk-appearance="dark"] .tig-logo-card,
:root[data-tk-custom="yes"][data-tk-appearance="dark"] #homeScreen .hero{
  background:linear-gradient(150deg,var(--tk-fest-dark),color-mix(in srgb,var(--tk-fest-accent) 24%,#15181e))!important;
}
:root[data-tk-custom="yes"][data-tk-appearance="light"] .tk-festival-card{background:var(--tk-fest-dark)}
.tig-logo-card .tk-festival-scene{z-index:3}
@media(max-width:410px){.tk-theme-preview-grid{gap:5px}.tk-theme-preview{font-size:10px}}

/* Festive hat overlays leave the original TigKid logo artwork untouched. */
:root[data-tk-look]:not([data-tk-look="classic"]) body.tigkid-page .brand,
:root[data-tk-look]:not([data-tk-look="classic"]) .brand-button{position:relative;isolation:isolate}
:root[data-tk-look="halloween"] body.tigkid-page .brand::after,
:root[data-tk-look="halloween"] .brand-button::after{content:"🧙"}
:root[data-tk-look="christmas"] body.tigkid-page .brand::after,
:root[data-tk-look="christmas"] .brand-button::after{content:"🎅"}
:root[data-tk-look="newyear"] body.tigkid-page .brand::after,
:root[data-tk-look="newyear"] .brand-button::after{content:"🥳"}
:root[data-tk-look="easter"] body.tigkid-page .brand::after,
:root[data-tk-look="easter"] .brand-button::after{content:"🐰"}
:root[data-tk-look="valentines"] body.tigkid-page .brand::after,
:root[data-tk-look="valentines"] .brand-button::after{content:"💖"}
:root[data-tk-look="summer"] body.tigkid-page .brand::after,
:root[data-tk-look="summer"] .brand-button::after{content:"☀️"}
:root[data-tk-look="spring"] body.tigkid-page .brand::after,
:root[data-tk-look="spring"] .brand-button::after{content:"🌼"}
:root[data-tk-look="bonfire"] body.tigkid-page .brand::after,
:root[data-tk-look="bonfire"] .brand-button::after{content:"🎆"}
:root[data-tk-look]:not([data-tk-look="classic"]) body.tigkid-page .brand::after,
:root[data-tk-look]:not([data-tk-look="classic"]) .brand-button::after{
 position:absolute;top:-11px;left:18px;font-size:24px;line-height:1;z-index:5;
 transform:rotate(-16deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));pointer-events:none;
}
:root[data-tk-custom="yes"][data-tk-appearance="light"] .tig-logo-card,
:root[data-tk-custom="yes"][data-tk-appearance="light"] #homeScreen .hero{
 background:linear-gradient(150deg,var(--tk-fest-light),var(--tk-fest-accent))!important;
 background:linear-gradient(150deg,var(--tk-fest-light),color-mix(in srgb,var(--tk-fest-accent) 42%,white))!important;
}

/* Distinctive holiday illustration layers drawn entirely in CSS. */
:root[data-tk-look]:not([data-tk-look="classic"]) .tk-festival-scene::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none
}
:root[data-tk-look="halloween"] .tk-festival-scene::before{
 opacity:.5;
 background:
  radial-gradient(circle at 82% 17%,rgba(255,234,156,.95) 0 9%,rgba(253,167,65,.35) 12%,transparent 26%),
  repeating-radial-gradient(circle at 0 0,transparent 0 14px,rgba(242,206,255,.23) 15px 16px,transparent 17px 31px);
 -webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%);
}
:root[data-tk-look="christmas"] .tk-festival-scene::before{
 opacity:.84;
 background-image:
  radial-gradient(circle at 12px 17px,#ffe59c 0 5px,transparent 7px),
  radial-gradient(circle at 34px 15px,#e75a65 0 5px,transparent 7px),
  radial-gradient(circle at 55px 19px,#5ed6b0 0 5px,transparent 7px),
  radial-gradient(circle at 75px 17px,#7bcdf3 0 5px,transparent 7px),
  linear-gradient(to bottom,transparent 0 10px,#d7a754 11px 13px,transparent 14px);
 background-size:85px 40px;background-repeat:repeat-x;
}
:root[data-tk-look="newyear"] .tk-festival-scene::before,
:root[data-tk-look="bonfire"] .tk-festival-scene::before{
 opacity:.68;
 background:
  repeating-conic-gradient(from 0deg at 75% 24%,transparent 0 15deg,rgba(248,219,126,.75) 17deg 18deg,transparent 20deg 35deg),
  repeating-conic-gradient(from 4deg at 22% 65%,transparent 0 17deg,rgba(203,147,255,.45) 18deg 19deg,transparent 20deg 34deg);
 -webkit-mask-image:radial-gradient(circle at 75% 24%,#000,transparent 30%),radial-gradient(circle at 22% 65%,#000,transparent 24%);
 mask-image:radial-gradient(circle at 75% 24%,#000,transparent 30%),radial-gradient(circle at 22% 65%,#000,transparent 24%);
}
@media(prefers-reduced-motion:reduce){.tk-festival-scene::before{animation:none!important}}


/* Poster artwork is drawn locally as SVG; no third-party calls. */
.tk-season-showcase[hidden]{display:none!important}
.tk-season-showcase{
 position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
 width:min(1200px,calc(100% - 28px));min-height:clamp(230px,28vw,355px);
 margin:0 auto 36px;padding:clamp(22px,4vw,54px);border:2px solid #c97535;
 border-radius:24px;background:#211328;color:#fff9ee;
 box-shadow:0 18px 44px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)
}
.tk-season-poster{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none}
.tk-season-showcase::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(16,11,31,.99),rgba(24,15,35,.92) 31%,rgba(28,14,37,.42) 62%,transparent 92%)}
.tk-season-showcase-copy{position:relative;z-index:1;width: min(530px,66%)}
.tk-season-showcase-overline{display:block;margin-bottom:11px;font:800 .72rem/1.4 system-ui;letter-spacing:.13em;color:#f8c780}
.tk-season-showcase-title{display:block;margin:0 0 12px!important;color:#fff8ee!important;font-size:clamp(1.75rem,3.5vw,3.4rem)!important;line-height:1.08!important;letter-spacing:-.036em!important;text-wrap:balance}
.tk-season-showcase-description{max-width:380px;margin:0 0 20px!important;color:#ffeccb!important;font-size:clamp(.93rem,1.2vw,1.1rem)!important;line-height:1.5}
.tk-season-showcase-shop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;border:1px solid #ffebc2;border-radius:11px;background:#f6c67c;color:#241523!important;font:800 .94rem/1.3 system-ui;text-decoration:none!important;cursor:pointer}
.tk-season-showcase-shop:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tk-season-showcase-shop:hover{background:#ffdfa3}
.tk-season-showcase[data-look="christmas"]{border-color:#f1c875;background:#134a42}
.tk-season-showcase[data-look="christmas"]::after{background:linear-gradient(90deg,rgba(3,39,40,.99),rgba(4,46,43,.93) 31%,rgba(4,43,43,.39) 62%,transparent 92%)}
.tk-season-showcase[data-look="newyear"]{border-color:#f4d583;background:#182452}
.tk-season-showcase[data-look="newyear"]::after{background:linear-gradient(90deg,rgba(11,16,40,.99),rgba(16,22,55,.93) 31%,rgba(22,21,49,.42) 62%,transparent 92%)}
.tk-season-showcase[data-look="christmas"] .tk-season-showcase-shop{background:#f7d987;color:#09392f!important}
.tk-season-showcase[data-look="newyear"] .tk-season-showcase-shop{background:#f9dc8e}
:root[data-tk-appearance="light"] .tk-season-showcase{color:#fff9ee}
body.tigkid-page .tig-hero:has(> .tk-season-showcase:not([hidden])){padding-top:28px}
#homeScreen>.tk-season-showcase{width:100%;min-height:205px;margin:0 0 15px;padding:20px;border-radius:18px}
#homeScreen>.tk-season-showcase .tk-season-showcase-copy{width:70%}
#homeScreen>.tk-season-showcase .tk-season-showcase-overline{font-size:.6rem}
#homeScreen>.tk-season-showcase .tk-season-showcase-title{font-size:clamp(1.36rem,4.7vw,2.25rem)!important}
#homeScreen>.tk-season-showcase .tk-season-showcase-description{font-size:.83rem!important;margin-bottom:13px!important}
#homeScreen>.tk-season-showcase .tk-season-showcase-shop{min-height:39px;padding:8px 12px;font-size:.82rem}
@media(max-width:700px){
 .tk-season-showcase{min-height:220px;padding:18px;border-radius:18px}
 .tk-season-showcase-copy{width:70%}
 .tk-season-showcase-title{font-size:clamp(1.42rem,5.1vw,2.3rem)!important}
}
@media(max-width:440px){
 .tk-season-showcase{min-height:205px;padding:14px}
 .tk-season-showcase-copy{width:75%}
 .tk-season-showcase-title{font-size:1.38rem!important}
 .tk-season-showcase-description{font-size:.78rem!important;margin-bottom:11px!important}
 .tk-season-showcase-overline{font-size:.57rem}
 #homeScreen>.tk-season-showcase{min-height:190px;padding:14px}
 #homeScreen>.tk-season-showcase .tk-season-showcase-title{font-size:1.28rem!important}
}
.tk-theme-preview{
 overflow:hidden!important;background-color:#213442!important;
 background-size:cover!important;background-position:center!important;
 color:white!important;text-shadow:0 2px 6px #111!important;
 min-height:96px!important;padding:10px 5px 8px!important
}
.tk-theme-preview-emoji{filter:drop-shadow(0 2px 4px #111)}
.tk-theme-preview.selected{outline:3px solid #ffe197;outline-offset:-3px}