/* Kivolo Kids — /watch/:slug styles. CC0. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff8ec;color:#0d3b66;font-family:'Nunito',system-ui,-apple-system,sans-serif;}
a{color:#0d3b66;}

.watch-top{
  position:sticky;top:0;background:#fff8ec;border-bottom:1px solid #eadbbf;
  padding:10px 16px;z-index:10;display:flex;align-items:center;gap:12px;
}
.watch-brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;}
.watch-brand img{display:block;height:auto;max-height:44px;width:auto;}
.watch-back{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;
  background:#fff;border:1px solid rgba(13,59,102,.1);border-radius:999px;
  padding:8px 16px;box-shadow:0 2px 8px rgba(13,59,102,.08);
  color:#0d3b66;cursor:pointer;font-size:14px;
}
.watch-back:hover,.watch-back:focus-visible{background:#ffd56b;outline:0;}
.watch-top-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.watch-lang{display:inline-flex;}
.watch-signin{
  display:inline-block;font-weight:800;text-decoration:none;
  background:#fff;border-radius:999px;padding:8px 16px;
  box-shadow:0 2px 8px rgba(13,59,102,.1);color:#0d3b66;font-size:14px;
}
.watch-signin:hover,.watch-signin:focus-visible{background:#ffd56b;outline:0;}
/* legacy class kept for backwards-compat with any cached HTML */
.back{display:inline-block;font-weight:800;text-decoration:none;background:#fff;border-radius:999px;padding:8px 16px;box-shadow:0 2px 8px rgba(13,59,102,.1);}
.back:hover{background:#ffd56b;}

/* 404 screen — shown when video missing, no Parent Gate */
.watch-404{max-width:520px;margin:40px auto 0;text-align:center;padding:32px 24px;}
.watch-404-art{margin-bottom:18px;display:flex;justify-content:center;}
.watch-404-title{font-family:'Fredoka One','Fredoka',system-ui,sans-serif;font-size:28px;color:#0d3b66;margin:0 0 10px;}
.watch-404-sub{font-size:16px;color:#5a6a7a;line-height:1.45;margin:0 0 22px;}
.watch-404-cta{
  display:inline-block;padding:12px 24px;border-radius:999px;
  background:#ffd56b;color:#0d3b66;font-weight:900;text-decoration:none;
  box-shadow:0 6px 16px rgba(255,213,107,.5);transition:transform .12s;
}
.watch-404-cta:hover,.watch-404-cta:focus-visible{transform:scale(1.04);outline:0;}
@media (max-width:520px){
  .watch-back span:last-child{display:none;}
  .watch-signin{padding:6px 12px;font-size:13px;}
}

.watch-main{max-width:960px;margin:0 auto;padding:24px 16px 60px;}

.watch-head{margin-bottom:16px;}
.watch-channel{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14px;color:#5a6a7a;}
.watch-channel img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#ffd56b;}
.watch-title{font-family:'Fredoka One','Fredoka',system-ui,sans-serif;font-size:28px;line-height:1.2;margin:4px 0 8px;color:#0d3b66;}
.watch-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:#5a6a7a;}
.watch-meta .age-badge{background:#a8e063;color:#0d3b66;padding:2px 10px;border-radius:999px;font-weight:800;font-size:13px;}

.player-slot{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;background:#0d3b66;
  box-shadow:0 10px 30px rgba(13,59,102,.15);
}
.player-poster{
  position:absolute;inset:0;background:#0d3b66 center/cover no-repeat;filter:brightness(.6);
}
.player-gate-card{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#fff;text-align:center;padding:22px;
}
.gate-icon{font-size:56px;}
.gate-title{font-family:'Fredoka One','Fredoka',system-ui,sans-serif;font-size:24px;}
.gate-sub{font-size:15px;max-width:440px;line-height:1.4;color:rgba(255,255,255,.88);}
.gate-btn{
  margin-top:6px;padding:12px 26px;border:0;border-radius:999px;
  background:#ffd56b;color:#0d3b66;font-size:16px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 16px rgba(255,213,107,.5);transition:transform .15s;
}
.gate-btn:hover,.gate-btn:focus-visible{transform:scale(1.05);outline:0;}

.player-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:20px;}

.related{margin-top:36px;}
.related h2{font-family:'Fredoka One','Fredoka',system-ui,sans-serif;font-size:22px;color:#0d3b66;margin:0 0 14px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.related-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(13,59,102,.08);transition:transform .15s;}
.related-card:hover{transform:translateY(-3px);}
.related-thumb{position:relative;aspect-ratio:16/9;background:#ddd;}
.related-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.related-duration{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;}
.related-body{padding:10px 12px 14px;}
.related-title{font-size:14px;font-weight:700;color:#0d3b66;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Parental gate modal */
.pg-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(13,59,102,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.pg-backdrop.open{display:flex;}
.pg-modal{
  background:#fff;border-radius:24px;padding:30px 28px;
  max-width:440px;width:100%;text-align:center;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.pg-close{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:26px;cursor:pointer;color:#5a6a7a;width:40px;height:40px;border-radius:50%;}
.pg-close:hover{background:#f0f2f5;}
.pg-modal h2{font-family:'Fredoka One','Fredoka',system-ui,sans-serif;font-size:22px;color:#0d3b66;margin:4px 0 18px;}
.pg-question{font-size:44px;font-weight:900;color:#0d3b66;margin:0 0 20px;letter-spacing:.02em;}
.pg-options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.pg-opt{
  min-width:84px;padding:14px 18px;border:0;border-radius:16px;
  background:#7ec8e3;color:#0d3b66;font-size:28px;font-weight:900;cursor:pointer;
  transition:transform .12s, background .12s;
}
.pg-opt:hover,.pg-opt:focus-visible{transform:scale(1.05);outline:0;background:#5ab4d6;}
.pg-opt.wrong{background:#ff9ec7;animation:pg-shake .3s;}
@keyframes pg-shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.pg-hint{font-size:13px;color:#8694a3;}

@media (max-width:520px){
  .watch-title{font-size:22px;}
  .gate-title{font-size:20px;}
  .gate-sub{font-size:14px;}
}