/* TJF Kids Games responsive and smart TV layer */
:root{
  --page-gutter:clamp(16px,3vw,48px);
  --content-max:1440px;
  --touch-target:46px;
  --section-space:clamp(42px,6vw,84px);
  --card-radius:clamp(18px,2vw,28px);
}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:320px;margin:0;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
iframe{display:block;max-width:100%;border:0}
button,input,select,textarea{max-width:100%;font:inherit}
input,select,textarea{width:100%;min-height:var(--touch-target);font-size:16px}
button,.btn,[role=button]{min-height:var(--touch-target);touch-action:manipulation}
a,button,input,select,textarea,[tabindex]{outline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:4px solid rgba(108,92,231,.5);outline-offset:4px}
.container{width:min(calc(100% - 2*var(--page-gutter)),var(--content-max));margin-inline:auto}
section{min-width:0}

/* Header */
.nav{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{min-width:0;flex:0 1 auto}
.brand span{min-width:0}
.nav nav,.actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{padding-block:clamp(38px,5vw,76px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);align-items:center;gap:clamp(30px,5vw,72px)}
.hero-grid>*{min-width:0}
.hero h1{max-width:11ch;margin-top:12px;font-size:clamp(3rem,6vw,6.3rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.hero p{max-width:58ch;font-size:clamp(1.03rem,1.35vw,1.34rem);line-height:1.55}
.hero-actions,.hero-buttons{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;margin-block:clamp(22px,3vw,34px) 18px}
.hero-actions .btn,.hero-buttons .btn{white-space:normal;text-align:center}
.trust-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.trust-row span{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid rgba(80,105,115,.14);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(38,50,56,.06);font-size:clamp(.78rem,.9vw,.92rem);font-weight:700;white-space:nowrap}
.hero-art{position:relative;width:100%;min-width:0;height:auto!important;aspect-ratio:4/3;overflow:hidden;border-radius:clamp(26px,3vw,38px)}
.hero-art .mascot,.hero-art .lion,.lion{position:absolute;left:50%;top:44%;z-index:5;transform:translate(-50%,-50%);font-size:clamp(8rem,12vw,12rem)!important;line-height:1;filter:drop-shadow(0 15px 16px rgba(0,0,0,.16))}
.hero-art .sun,.sun{right:clamp(14px,4%,34px);top:clamp(14px,4%,30px);font-size:clamp(3.5rem,7vw,6.2rem)}
.hero-art .cloud1,.hero-art .c1,.c1{left:clamp(14px,4%,34px);top:clamp(16px,5%,38px);font-size:clamp(3.2rem,6vw,5.5rem)}
.hero-art .cloud2,.hero-art .c2,.c2{right:clamp(70px,18%,150px);top:clamp(90px,24%,150px);opacity:.6}
.hero-art .bubble{z-index:7;max-width:calc(50% - 24px);white-space:nowrap}
.hero-art .bubble.learn,.hero-art .b1,.b1{left:clamp(12px,4%,30px);bottom:clamp(14px,5%,34px);top:auto}
.hero-art .bubble.smile,.hero-art .b2,.b2{right:clamp(12px,4%,30px);bottom:clamp(14px,5%,34px);left:auto;top:auto}
.hero-art .ground,.hero-art .hill,.hill{left:-7%;right:-7%;bottom:-20%;height:42%}

/* Sections and grids */
.compact-section{padding-block:var(--section-space)}
.section-heading,.heading{max-width:760px;margin-bottom:clamp(22px,3vw,38px)}
.heading{margin-inline:auto}
.section-heading h1,.section-heading h2,.heading h2{text-wrap:balance}
.category-grid,.video-grid,.game-card-grid,.review-grid,.stats,.admin-grid{display:grid;align-items:stretch;gap:clamp(16px,2vw,28px)}
.category-grid,.compact-category-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr))}
.video-grid,.compact-video-grid,.game-card-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.review-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.category-card,.video-card,.game-card,.review-card,.stat,.table-card,.form-card,.side-card{min-width:0;height:100%;overflow:hidden;border-radius:var(--card-radius)}
.category-cover,.thumb,.game-card-image{width:100%;overflow:hidden;aspect-ratio:16/9}
.category-cover img,.thumb img,.game-card-image img{width:100%;height:100%;object-fit:cover}
.category-card-content,.video-body,.game-card-body,.review-card{padding:clamp(16px,2vw,24px)}
.category-card-content h3,.video-body h3,.game-card-body h3{overflow-wrap:anywhere;text-wrap:balance}
.category-card-content p,.video-body p,.game-card-body p,.review-card p{overflow-wrap:anywhere}

/* Request form */
.request-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,42px);padding:clamp(24px,4vw,42px)}
.request-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.request-form textarea,.request-form button{grid-column:1/-1}
textarea{min-height:120px;resize:vertical}

/* Watch page */
.watch-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(20px,3vw,32px)}
.player video{width:100%;height:auto;max-height:calc(100dvh - 180px);object-fit:contain;background:#000}

/* Responsive PowerPoint and HTML5 games */
.game-view-section{padding-block:clamp(26px,4vw,58px)}
.game-view-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:20px}
.game-view-header>div{min-width:0}
.game-view-header h1{margin:8px 0;font-size:clamp(1.8rem,3.5vw,4rem);line-height:1.05;overflow-wrap:anywhere;text-wrap:balance}
.game-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.embed-shell{width:min(100%,calc((100dvh - 235px)*4/3));min-width:0;min-height:0!important;margin-inline:auto;overflow:hidden;aspect-ratio:4/3;border-radius:clamp(14px,2vw,26px);background:#10151a;box-shadow:0 18px 48px rgba(20,30,36,.22)}
.embed-shell iframe{width:100%;height:100%;min-height:0;background:#fff}
.embed-note{max-width:960px;margin:14px auto 0;text-align:center}
body.game-fullscreen{overflow:hidden}
.embed-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}
.embed-shell:fullscreen iframe{width:100%;height:100%}

/* Admin forms and tables */
.admin-head,.admin-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.admin-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.table-card{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
table{width:100%;min-width:720px;border-collapse:collapse}
th,td{vertical-align:top;overflow-wrap:anywhere}
.check-grid,.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.inline{display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* Footer */
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.foot .brand img{width:48px;height:48px;object-fit:contain}

/* Tablet */
@media(max-width:1023px){
 :root{--page-gutter:clamp(16px,4vw,34px)}
 .hero-grid,.request-panel,.watch-grid{grid-template-columns:1fr}
 .hero-art{width:min(100%,760px);margin-inline:auto;aspect-ratio:16/10}
 .hero h1{max-width:12ch}
 .admin-grid{grid-template-columns:1fr}
}

/* Mobile */
@media(max-width:767px){
 :root{--page-gutter:16px;--section-space:44px}
 .nav{align-items:flex-start;flex-wrap:wrap;padding-block:10px}
 .brand small{display:none}
 .nav nav,.actions{width:100%;justify-content:stretch}
 .nav nav>* ,.actions>*{flex:1 1 auto;text-align:center}
 .nav nav a,.actions .btn{display:flex;justify-content:center;width:100%}
 .hero{padding-top:34px}
 .hero h1{max-width:none;font-size:clamp(2.7rem,14vw,4.6rem)}
 .hero-actions,.hero-buttons{display:grid;grid-template-columns:1fr}
 .hero-actions .btn,.hero-buttons .btn{width:100%}
 .trust-row{align-items:stretch;flex-direction:column}
 .trust-row span{justify-content:center;width:100%;white-space:normal;text-align:center}
 .hero-art{aspect-ratio:1/1}
 .hero-art .mascot,.hero-art .lion,.lion{top:45%;font-size:clamp(8rem,36vw,10.5rem)!important}
 .hero-art .cloud2,.hero-art .c2,.c2{display:none}
 .hero-art .bubble{max-width:46%;padding:10px 13px;font-size:.86rem}
 .category-grid,.compact-category-grid,.video-grid,.compact-video-grid,.game-card-grid,.review-grid{grid-template-columns:1fr}
 .request-form{grid-template-columns:1fr}
 .request-form>*{grid-column:1!important}
 .game-view-header{align-items:flex-start;flex-direction:column}
 .game-toolbar{width:100%;display:grid;grid-template-columns:1fr}
 .game-toolbar .btn{width:100%}
 .embed-shell{width:100%;aspect-ratio:4/3}
 .check-grid,.checks{grid-template-columns:1fr}
 .admin-head,.admin-heading{align-items:flex-start;flex-direction:column}
 .foot{align-items:flex-start;flex-direction:column}
}

@media(max-width:390px){
 .hero-art .bubble.learn,.hero-art .b1,.b1{display:none}
 .hero-art .bubble.smile,.hero-art .b2,.b2{left:50%;right:auto;transform:translateX(-50%)}
}

/* Large desktop */
@media(min-width:1440px){
 :root{--content-max:1540px}
 .category-grid,.compact-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .video-grid,.compact-video-grid,.game-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Full HD and TV safe area */
@media(min-width:1600px){
 :root{--page-gutter:max(48px,3.5vw);--content-max:1660px}
 body{font-size:18px}
 .hero{min-height:min(760px,calc(100vh - 96px));display:grid;align-items:center}
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(520px,.9fr)}
 .hero h1{font-size:clamp(5.2rem,5.8vw,7.4rem)}
 .btn,button,input,select{min-height:52px}
}

/* Samsung Tizen and other remote-controlled TV browsers */
.tv-mode{--page-gutter:4vw;--touch-target:60px}
.tv-mode body{font-size:20px}
.tv-mode .container{width:min(calc(100% - 8vw),1680px)}
.tv-mode .nav{padding-block:12px}
.tv-mode .btn:focus,.tv-mode button:focus,.tv-mode a.category-card:focus,.tv-mode a.video-card:focus,.tv-mode a.game-card:focus{transform:scale(1.035);outline:6px solid rgba(255,209,102,.98);outline-offset:6px;box-shadow:0 18px 48px rgba(0,0,0,.25)}
.tv-mode .category-grid,.tv-mode .compact-category-grid,.tv-mode .video-grid,.tv-mode .compact-video-grid,.tv-mode .game-card-grid{gap:30px}
.tv-mode .embed-shell{width:min(100%,calc((100dvh - 250px)*4/3))}

/* 4K screens */
@media(min-width:2500px){
 :root{--content-max:2100px;--page-gutter:5vw}
 body{font-size:24px}
 .hero h1{font-size:8rem}
 .category-grid,.compact-category-grid,.video-grid,.compact-video-grid,.game-card-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Landscape phones and short browser windows */
@media(orientation:landscape) and (max-height:620px){
 .hero{padding-block:24px}
 .hero-grid{grid-template-columns:1fr 1fr;gap:24px}
 .hero h1{font-size:clamp(2.5rem,8vh,4rem)}
 .hero-art{max-height:calc(100vh - 110px);aspect-ratio:4/3}
 .embed-shell{width:min(100%,calc((100dvh - 155px)*4/3))}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}