:root{
    --ink:#182233;
    --paper:#FFF8EC;
    --sun:#FFC145;
    --sky:#4C6FFF;
    --leaf:#3DD68C;
    --coral:#FF6B6B;
    --radius:28px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
    margin:0;padding:0;height:100%;width:100%;
    background:#000;
    font-family:'Baloo 2','Nunito',system-ui,sans-serif;
    overscroll-behavior:none;
    user-select:none;
}

/* ---------- Overlay start / break / limit screens ---------- */
.overlay-screen{
    position:fixed;inset:0;z-index:50;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 30% 20%, #26305A 0%, #0E1220 70%);
}
.overlay-screen.hidden{display:none;}

.start-card{
    text-align:center;color:var(--paper);
    padding:32px;max-width:420px;
    position:relative;
}
.start-blob{
    width:140px;height:140px;margin:0 auto 18px;
    border-radius:44% 56% 62% 38% / 48% 40% 60% 52%;
    background:linear-gradient(135deg, var(--sun), var(--coral));
    animation:blobMove 6s ease-in-out infinite;
}
.blob-rest{background:linear-gradient(135deg, var(--leaf), var(--sky));}
.blob-sleep{background:linear-gradient(135deg, var(--sky), #7A5CFF);}
@keyframes blobMove{
    0%,100%{border-radius:44% 56% 62% 38% / 48% 40% 60% 52%;}
    50%{border-radius:60% 40% 40% 60% / 40% 60% 40% 60%;}
}
.start-card h1{font-size:2.6rem;margin:0 0 6px;}
.start-card h2{font-size:1.7rem;margin:0 0 8px;}
.start-card p{opacity:.85;margin:0 0 22px;font-size:1.05rem;}

.big-button{
    font-family:inherit;font-size:1.2rem;font-weight:700;
    color:var(--ink);background:var(--sun);
    border:none;border-radius:999px;
    padding:16px 40px;cursor:pointer;
    box-shadow:0 10px 0 #C8862A;
}
.big-button:active{transform:translateY(6px);box-shadow:0 4px 0 #C8862A;}

.text-button{
    margin-top:10px;background:none;border:none;
    color:rgba(255,248,236,.55);font-size:.85rem;
    text-decoration:underline;cursor:pointer;font-family:inherit;
}

.countdown{font-size:3rem;font-weight:800;color:var(--sun);}

/* ---------- Feed ---------- */
.feed{
    position:fixed;inset:0;
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
    background:#000;
}
.feed.hidden{display:none;}
.feed::-webkit-scrollbar{display:none;}

.video-slide{
    position:relative;
    height:100vh;height:100dvh;width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;align-items:center;justify-content:center;
    background:#000;
    overflow:hidden;
}
.video-slide iframe{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:100%;height:100%;
    pointer-events:none; /* the child can only scroll, not tap controls */
}
/* Force the embedded player to cover the slide like a portrait video */
@media (min-aspect-ratio: 9/16){
    .video-slide iframe{height:56.25vw;min-height:100%;}
}

.tap-shield{position:absolute;inset:0;z-index:2;background:transparent;}

.progress-pill{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,.45);color:#fff;font-size:.75rem;
    padding:5px 14px;border-radius:999px;z-index:3;
    font-family:'Nunito',sans-serif;
}

/* ---------- Parent gate corner button (deliberately subtle) ---------- */
.gate-btn{
    position:fixed;bottom:10px;right:10px;
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.06);border:none;
    z-index:40;cursor:pointer;
}

/* ---------- Modals ---------- */
.modal{
    position:fixed;inset:0;z-index:60;
    background:rgba(10,12,20,.72);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.modal.hidden{display:none;}
.modal-box{
    background:var(--paper);color:var(--ink);
    border-radius:var(--radius);
    padding:26px;max-width:360px;width:100%;
    text-align:center;
    font-family:'Nunito',sans-serif;
}
.modal-box-wide{max-width:420px;text-align:left;max-height:82vh;overflow-y:auto;}
.modal-box h3,.modal-box h4{margin:0 0 10px;}
.modal-box input[type=number],
.modal-box input[type=time],
#gateAnswer{
    width:100%;padding:10px 12px;border-radius:12px;
    border:2px solid #E7DFCB;font-size:1rem;font-family:inherit;
    margin-top:4px;
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.btn-primary,.btn-secondary,.btn-danger{
    font-family:inherit;font-weight:700;border:none;border-radius:999px;
    padding:10px 20px;cursor:pointer;font-size:.95rem;
}
.btn-primary{background:var(--sky);color:#fff;}
.btn-secondary{background:#E7E1D2;color:var(--ink);}
.btn-danger{background:var(--coral);color:#fff;}
.gate-error{color:var(--coral);font-size:.85rem;margin-top:8px;}
.gate-error.hidden{display:none;}

.tabs{display:flex;gap:8px;margin-bottom:16px;}
.tab-btn{
    flex:1;padding:8px;border:none;border-radius:12px;
    background:#EFE8D8;font-family:inherit;font-weight:700;cursor:pointer;
}
.tab-btn.active{background:var(--sky);color:#fff;}
.tab-content.hidden{display:none;}

.field-row{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-bottom:14px;font-size:.92rem;
}
.field-row input[type=number],.field-row input[type=time]{max-width:120px;margin-top:0;}
.field-row input[type=checkbox]{width:22px;height:22px;}

.stats-grid{display:flex;gap:10px;margin-bottom:16px;}
.stat-box{
    flex:1;background:#EFE8D8;border-radius:16px;
    padding:12px 8px;text-align:center;
}
.stat-box span{display:block;font-size:1.4rem;font-weight:800;color:var(--sky);}
.stat-box small{font-size:.7rem;opacity:.75;}
.stat-list{list-style:none;padding:0;margin:0 0 14px;font-size:.88rem;}
.stat-list li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #EFE8D8;}