/* ==========================================================
   Rain Hope Games — Home page styles
   ========================================================== */
:root{
  --orange:#F26B1F;
  --orange-deep:#D9551A;
  --orange-soft:#FFE6D2;
  --teal:#2FA9A0;
  --teal-deep:#1F7A74;
  --teal-soft:#CFEFEC;
  --cream:#FFF7EC;
  --cream-2:#FBEAD3;
  --ink:#2A2118;
  --ink-2:#5A4A3A;
  --line:#EFD9B8;
  --yellow:#FFC44D;
  --navy:#1B2A3A;
  --shadow-soft:0 5px 0 var(--line);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Top promo */
.topbar{
  background:var(--orange); color:#fff; text-align:center;
  font-weight:700; font-size:14px; padding:9px 20px;
}
.topbar a{color:#fff; text-decoration:underline; font-weight:800}

/* Shell */
.shell{
  display:grid; grid-template-columns: 1fr;
  margin:0 auto; min-height:100vh;
}
.menu-toggle{
  display:none; position:fixed; top:14px; left:14px; z-index:50;
  background:var(--orange); color:#fff; border:0; border-radius:12px;
  width:42px;height:42px; font-size:20px; box-shadow:0 4px 0 var(--orange-deep); cursor:pointer;
}

/* Sidebar */
.sidebar{
  border-right:2px solid var(--line); padding:22px 18px;
  position:sticky; top:0; align-self:start; height:100vh; overflow:auto;
  scrollbar-width:thin;
}
.logo{display:flex; align-items:center; gap:10px; padding:6px 8px 18px; border-bottom:1px dashed var(--line); margin-bottom:14px;}
.logo .mark{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(140deg,#FFB36B,#F26B1F);
  display:grid;place-items:center;color:#fff;
  font-family:'Fredoka', sans-serif;font-weight:700;font-size:22px;
  box-shadow:0 6px 0 #C94B12;
}
.logo b{font-family:'Fredoka', sans-serif; font-size:18px; line-height:1.05}
.logo small{display:block; color:var(--ink-2); font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.nav-label{
    font-size: 14px;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 14px 10px 8px;
    font-weight: 800;
    font-family: 'Chillax Semibold';
}
.sidebar nav a{
    display: flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 45px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    margin: 2px 0;
    transition: background .15s, transform .12s;
    font-family: 'Chillax Regular';
}
.sidebar nav a:hover{background:var(--cream-2)}
.sidebar nav a.active{background:var(--orange); color:#fff;}
.sidebar nav a .ic{width:20px;height:20px;display:inline-grid;place-items:center; flex:0 0 20px}
.sidebar nav a .dot{width:8px;height:8px;border-radius:99px;background:var(--orange);opacity:.6}
.sidebar nav a.active .dot{background:#fff;opacity:1}

.agecard{
  margin-top:16px;
  background:linear-gradient(160deg,#FFE6D2,#FFD3B0);
  border-radius:18px; padding:14px; position:relative; overflow:hidden;
  border:1.5px solid #F4B988;
}
.agecard h5{margin:0;font-family:'Fredoka',sans-serif;font-size:15px}
.agecard p{margin:4px 0 10px; font-size:11.5px; color:var(--ink-2); line-height:1.4; font-weight:600}
.agecard button{background:var(--ink); color:#fff; border:0; border-radius:99px; padding:7px 12px; font-weight:800; font-size:11px; cursor:pointer; transition:transform .15s}
.agecard button:hover{transform:translateY(-1px)}
.agecard .cloud{position:absolute; right:-8px; bottom:-12px; width:60px; height:40px; background:#fff; border-radius:30px; opacity:.6}
.agecard .cloud:before{content:"";position:absolute;width:30px;height:30px;background:#fff;border-radius:99px;left:6px;top:-12px}
.agecard .cloud:after{content:"";position:absolute;width:24px;height:24px;background:#fff;border-radius:99px;left:30px;top:-8px}
nav.js-nav {
    margin-top: 20px;
}
/* Main */
main{
    padding: 0px 32px 0px;
    min-width: 0;
    width: 95%;
    max-width: 1350px;
    margin: 0px auto 0px;
}
.topnav{display:flex; align-items:center; gap:14px;}
.search{
  flex:1; border-radius:99px; padding:10px 16px;
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line);
}
.search input{
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    font: inherit;
    color: #171717;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Chillax Regular';
}
.search .kbd{background:var(--cream-2); border-radius:6px; padding:3px 7px; font-size:11px; font-weight:800; color:var(--ink-2);}
.pill{
  background:#fff; border:1.5px solid var(--line); border-radius:99px;
  padding:8px 12px; font-weight:800; font-size:13px; display:flex; align-items:center; gap:8px;
  cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.pill:hover{transform:translateY(-1px); box-shadow:0 3px 0 var(--line)}
.pill.is-on{background:var(--orange); color:#fff; border-color:var(--orange-deep)}
.pill .badge{background:var(--orange); color:#fff; border-radius:99px; padding:1px 7px; font-size:11px}
.pill.is-on .badge{background:#fff; color:var(--orange)}
.profile{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid var(--line); border-radius:99px; padding:5px 14px 5px 5px;
}
.profile .av{
    width: 34px;
    height: 34px;
    border-radius: 99px;
    background-size: cover;
    background: radial-gradient(ellipse at 30% 100%, rgba(47, 169, 160, .3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 196, 77, .25), transparent 50%);
    background-color: #506fb2;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    line-height: 32px;
}
.profile b{font-size:13px}
.profile small{display:block; color:var(--ink-2); font-size:11px; font-weight:700}

/* Hero */
.hero{
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    margin: 80px 0px 110px;
}
.hero-left h1{
    font-family: 'Chillax Semibold';
    font-size: 56px;
    line-height: 1.1;
    margin: 0 0 10px;
}
.hero-left h1 .acc{color:var(--orange)}
.hero-left .lede{
    color: #222;
    line-height: 1.5;
    font-family: 'Chillax Regular';
}
.hero-left .ctas{
    display: flex;
    gap: 10px;
    margin-top: 35px;
}
a.play-btn{
    display: table;
    margin: 10px auto 0px;
    background-color: #142f37;
    border: 1px solid #142f37;
    color: #fff;
    padding: 2px 14px;
    font-family: 'Chillax Medium';
    border-radius: 40px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
}
a.play-btn:hover{
  color: #ff6e2c;
  background-color: transparent;
}
.btn{border:0; cursor:pointer; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; padding:13px 22px; border-radius:99px; transition:transform .12s, box-shadow .12s;}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{transform:translateY(1px);}
.btn-primary:active{transform:translateY(3px);}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{transform:translateY(1px);}

.hero-right{
  background:linear-gradient(160deg, #2FA9A0, #1F7A74);
  color:#fff; border-radius:22px; padding:18px;
  position:relative; overflow:hidden;;
}
.hero-right::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 40%),
             radial-gradient(circle at 10% 100%, rgba(255,255,255,.12), transparent 40%);
}
.hero-right h4{margin:0; font-family:'Fredoka',sans-serif; font-size:18px; display:flex; align-items:center; gap:8px}
.hero-right h4 .star{display:inline-grid; place-items:center; width:24px;height:24px;border-radius:8px; background:var(--yellow); color:var(--ink); font-weight:900}
.hero-right p{
    font-size: 12px;
    margin: 8px 0 14px;
    line-height: 1.45;
    font-weight: 500;
}
.hero-right .form{display:flex; gap:6px; background:rgba(255,255,255,.12); padding:5px; border-radius:99px; border:1px solid rgba(255,255,255,.25);}
.hero-right .form input{flex:1; border:0; outline:0; background:transparent; color:#fff; padding:8px 12px; font:inherit; font-weight:700; font-size:13px;}
.hero-right .form input::placeholder{color:rgba(255,255,255,.7)}
.hero-right .form button{background:var(--yellow); border:0; color:var(--ink); font-weight:800; padding:8px 16px; border-radius:99px; font-size:13px; cursor:pointer; transition:transform .12s}
.hero-right .form button:hover{transform:translateY(-1px)}
.form-msg{font-size:12px; font-weight:800; margin:8px 0 0; color:var(--yellow)}

/* Featured carousel */
.featured{
    background: radial-gradient(circle at 50% 0%, rgba(47, 169, 160, .18), transparent 60%), var(--cream);
    border-radius: 24px;
    padding: 18px 18px 28px;
    position: relative;
    margin: 0px 0px 80px;
}
.tile-row{
  position:relative; perspective:1400px; height:300px;
  display:flex; align-items:center; justify-content:center;
}
.tile{
  position:absolute; top:50%; left:50%;
  width:170px; aspect-ratio:3/4; border-radius:22px; overflow:hidden; cursor:pointer;
  background:repeating-linear-gradient(45deg, #E5D5BC 0 8px, #DCCAB0 8px 16px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.5,.05,.2,1), opacity .45s, filter .35s;
  will-change:transform;
}
.tile:hover{filter:brightness(1.05)}
/* slot positions — all anchored at row center; transforms move them outward */
.tile[data-slot="-2"]{transform:translate(-260%,-50%) rotateY(28deg) scale(.78); opacity:.55; z-index:1}
.tile[data-slot="-1"]{transform:translate(-130%,-50%) rotateY(15deg) scale(.9);  opacity:.85; z-index:2}
.tile[data-slot="0"] {transform:translate(-50%,-50%)   rotateY(0)     scale(1.18); opacity:0; z-index:3; pointer-events:none}
.tile[data-slot="1"] {transform:translate(30%,-50%)    rotateY(-15deg) scale(.9);  opacity:.85; z-index:2}
.tile[data-slot="2"] {transform:translate(160%,-50%)   rotateY(-28deg) scale(.78); opacity:.55; z-index:1}
.tile .badge-shot{position:absolute; left:0; right:0; top:0; padding:10px; color:#fff; font-family:'Fredoka',sans-serif; font-size:13px; text-shadow:0 2px 6px rgba(0,0,0,.4); display:flex; justify-content:space-between; align-items:center;}
.tile .placeholder-label{position:absolute; inset:auto 12px 12px; color:#fff; font-family:'Fredoka',sans-serif; font-size:14px; text-shadow:0 2px 6px rgba(0,0,0,.5);}
.tile .placeholder-label small{display:block; opacity:.85; font-family:'Nunito', sans-serif; font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.t-jonah3{
    background-image: url(/assets/covers/topcover6.webp);
}
.t-esther{
    background-image: url(/assets/covers/topcover3.webp);
}
.t-noah{
    background-image: url(/assets/covers/topcover1.webp);
}
.t-jonah{
    background-image: url(/assets/covers/topcover2.webp);
}
.t-david{
    background-image: url(/assets/covers/topcover4.webp);
}
.t-jonah2{
    background-image: url(/assets/covers/topcover5.webp);
}

.tile .iso{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.22), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.06) 18px 19px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(255,255,255,.06) 18px 19px);
}

.featured-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:220px; aspect-ratio: 3/4.4; border-radius:24px; z-index:5;
  border:4px solid #fff; box-shadow:0 25px 50px rgba(0,0,0,.25);
  color:#fff; padding:16px; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; transition: background .4s;
}
.featured-card::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 160px;
    height: 238px;
    z-index: 0;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
}
.featured-card h3{
    font-family: 'Chillax SemiBold';
    font-size: 23px;
    margin: 0;
    position: relative;
    letter-spacing: -1px;
}
.featured-card .kicker{
    font-size: 10px;
    position: relative;
    font-family: 'Chillax Medium';
}
.featured-card .play{
    margin-top: 12px;
    align-self: flex-start;
    background: #f26b1f;
    color: #fff;
    padding: 7px 14px;
    border-radius: 99px;
    font-weight: 900;
    font-size: 11px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
    transition: transform .12s;
}
.featured-card .play:hover{transform:translateY(-1px)}
.featured-card .stars{position:absolute; top:14px; right:14px; font-size:10px; color:var(--yellow); letter-spacing:2px}

.carousel-nav{position:absolute; right:18px; bottom:18px; display:flex; gap:8px; z-index:10}
.carousel-nav button{
  width:38px;height:38px;border-radius:99px;background:#fff; border:1.5px solid var(--line);
  color:var(--orange); font-weight:900; font-size:18px; cursor:pointer; box-shadow:0 3px 0 var(--line);
  transition:transform .12s;
}
.carousel-nav button:hover{transform:translateY(-1px)}

.showcharacters, .showothermagazines, .showsettings, .showfamily{
  display: none;
}

/* Stats */
.stats{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 6px; border-bottom:1px dashed var(--line); margin: 10px 0px 30px; flex-wrap:wrap;}
.stat{display:flex; align-items:center; gap:10px}
.stat .n{
    font-family: 'Chillax Semibold';
    font-size: 26px;
    line-height: 1;
    color: #e46026;
}
.stat small{
    display: block;
    color: #222;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Chillax Semibold';
}
.platforms{display:flex; gap:18px; align-items:center; color:var(--ink-2); font-weight:800; font-size:13px; flex-wrap:wrap}
.platforms span{display:inline-flex; align-items:center; gap:6px; opacity:.5}
.platforms span.on{color:var(--ink); opacity:1}
.cover_allgmes {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0px;
    border-radius: 25px;
}
/* Section header */
.sec-head{display:flex; align-items:center; justify-content:space-between; margin:34px 0 14px;}
.sec-head h2{
    font-family: 'Chillax Semibold';
    font-size: 33px;
    margin: 0;
    letter-spacing: -1px;
}
.sec-head h2 .acc{color:var(--orange)}
.sec-head a{color:var(--ink-2); font-weight:800; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:4px}

/* Filters */
.filters{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    margin-bottom: 90px;
    align-items: center;
}
.chip{
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 13px;
    cursor: pointer;
    color: #222;
    font-family: 'Chillax Medium';
    display: inline-flex;
    align-items: center;
    gap: 6px; 
    border: 0;
    background: transparent;
    transition: background .15s, color .15s, transform .12s;
}
.chip:hover{background:var(--cream-2); transform:translateY(-1px)}
.chip.active{background:var(--orange); color:#fff}
.chip .ic{font-size:12px}
.filters .right{margin-left:auto; padding-right:6px; color:var(--ink-2); font-weight:800; font-size:12px; display:flex; align-items:center; gap:8px}
.sort-btn{background:transparent; border:0; font:inherit; color:var(--ink); font-weight:900; cursor:pointer}

/* Game cards */
.games-row{display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; align-items:end; margin-bottom: 90px;}
.gcard{
    background: #fff;
    border-radius: 22px;
    box-shadow: 0px 0px 7px rgb(164 184 187 / 32%);
    text-align: center;
    position: relative;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
    overflow: hidden;
}
article.gcard a {
    position: relative;
    padding: 10px 10px 14px;
    width: 100%;
    height: 100%;
    display: block;
}
article.gcard a:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(11, 18, 35) 0%, rgba(0, 0, 0, 0) 40%);
    z-index: 2;
}
.gcard:hover{transform:translateY(-2px);}
.gcard.feat{transform:translateY(-22px);}
.gcard.feat:hover{transform:translateY(-26px);}
.gthumb{aspect-ratio:1/1.4; border-radius:16px; overflow:hidden; position:relative;}

.gthumb .ph{
    position: absolute;
    inset: auto 8px 8px;
    color: #fff;
    font-family: 'Chillax Semibold';
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
    z-index: 5;
}
.gthumb .age{position:absolute; top:8px; left:8px; background:#fff; color:var(--ink); border-radius:99px; padding:2px 8px; font-size:10px; font-weight:900;}
.gthumb .fav{position:absolute; top:8px; right:8px; background:#fff; border:0; width:26px; height:26px; border-radius:99px; cursor:pointer; font-size:14px; display:grid; place-items:center; transition:transform .15s;}
.gthumb .fav:hover{transform:scale(1.1)}
.gthumb .fav.on{background:var(--orange); color:#fff}
.gcard h4{
    font-family: 'Chillax Semibold';
    font-size: 17px;
    margin: 10px 0 4px;
    letter-spacing: 0.5px;
    position: absolute;
    bottom: 20px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 2;
}
.gcard .stars{
    color: #ffd600;
    font-size: 11px;
    letter-spacing: 2px;
    position: absolute;
    top: 19px;
    left: 50%;
    transform: translate(-50%, 0px);
}
.gcard.feat .meta{display:none; justify-content:space-between; padding:0 4px; margin-top:8px; color:var(--ink-2); font-weight:800; font-size:11px;}
.gcard.feat .meta .price{
    color: var(--orange);
    font-family: 'Chillax Semibold';
    font-size: 12px;
}
.gcard.is-hidden{display:none}

/* Top games */
.top-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0px 115px;
}
.big-game{
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    min-height: 280px;
    background: url(/assets/covers/bigcoverdavid.webp);
    color: #fff;
    padding: 20px;
    border: 2px solid #fff;
}
.big-game .scene-label{position:absolute; top:16px; left:16px; background:rgba(0,0,0,.3); color:#fff; padding:4px 10px; border-radius:99px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(10px);}
.big-game .info{position:absolute; left:20px; right:20px; bottom:16px; display:flex; align-items:flex-end; justify-content:space-between}
.big-game h3{
    font-family: 'Chillax Semibold';
    font-size: 30px;
    margin: 0 0 6px;
}
.big-game .stars{color:var(--yellow); letter-spacing:3px; font-size:12px}
.big-game .tags{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.big-game .tags span{background:rgba(255,255,255,.18); padding:4px 10px; border-radius:99px; font-size:11px; font-weight:800; backdrop-filter:blur(4px)}
.big-game .price{
    font-family: 'Chillax Semibold';
    font-size: 20px;
    color: #fff;
}
.big-game .rs{display:flex; gap:14px; margin-top:8px; opacity:.85; font-size:11px; font-weight:800; flex-wrap:wrap}
.big-game .play{
    margin-top: 8px;
    background: var(--orange);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: 99px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s;
    display: table;
}
.big-game .play:hover{transform:translateY(1px); box-shadow:0 3px 0 var(--orange-deep)}
.th.storgame {
    background-image: url(/assets/covers/tormenta.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.th.warriorsgame {
    background-image: url(/assets/covers/warrior_book.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.th.biblewords {
    background-image: url(/assets/covers/biblecover.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.top-list{display:flex; flex-direction:column; gap:14px}
.topcard{display:grid; grid-template-columns: 130px 1fr; gap:14px; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:10px; transition:transform .15s; cursor:pointer;}
.topcard:hover{transform:translateY(-2px)}
.topcard .th{aspect-ratio: 16/12; border-radius:14px; position:relative; overflow:hidden;}
.topcard .th.alt-2{background:linear-gradient(140deg,#FFD3B0,#F26B1F)}
.topcard .th.alt-3{background:linear-gradient(140deg,#FFE9B0,#E89C2A)}
.topcard .body{padding:6px 4px; display:flex; flex-direction:column; justify-content:center}
.topcard h4{
    margin: 0;
    font-family: 'Chillax Semibold';
    font-size: 18px;
}
.topcard .meta{display:flex; gap:10px; margin-top:4px; color:var(--ink-2); font-size:11px; font-weight:800}
.topcard .meta b{color:var(--orange)}
.topcard a.dl{color:var(--orange); font-weight:900; font-size:12px; margin-top:6px; text-decoration:none}

/* Marquee */
.marquee{
  background:var(--orange); color:#fff; transform: rotate(-1.4deg);
  margin:30px -20px; padding:14px 0; overflow:hidden; white-space:nowrap;
  border-top:3px solid var(--orange-deep); border-bottom:3px solid var(--orange-deep);
}
.marquee .track{display:inline-flex; gap:50px; animation:scroll 28s linear infinite; font-family:'Fredoka',sans-serif; font-size:18px}
.marquee .track:hover{animation-play-state:paused}
.marquee .track span{display:inline-flex; gap:50px; align-items:center}
.marquee .dot{width:8px; height:8px; background:var(--yellow); border-radius:99px; display:inline-block}
@keyframes scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee.alt{
    background: var(--teal);
    border-color: var(--teal-deep);
    transform: rotate(.8deg);
    margin: 0px 0px 100px;
}

/* Reviews */
.review{
  border-radius:22px; padding:30px 20px 20px; margin-bottom: 70px;
  display:grid; grid-template-columns: 1fr; gap:24px; align-items:center;
  border:1.5px solid var(--line); position:relative;
}
.review .photos{position:relative; aspect-ratio: 1/1; border-radius:18px; background:linear-gradient(140deg,#FFE6D2,#FFC09B); overflow:hidden;}
.review .photos::after{content:"FAMILY · GAME NIGHT"; position:absolute; inset:auto 12px 12px; color:#fff; font-weight:800; font-size:10px; letter-spacing:.14em; text-shadow:0 2px 4px rgba(0,0,0,.3);}
.review .photos::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.06) 10px 11px), radial-gradient(circle at 60% 40%, rgba(255,255,255,.45), transparent 50%);}
.review .body p{font-size:16px; line-height:1.55; color:var(--ink); margin:0 0 14px; transition:opacity .25s;}
.review .body .stars{color:var(--orange); letter-spacing:3px; font-size:14px; margin-bottom: 15px;}
.review .badges{display:flex; gap:6px; margin:8px 0 14px}
.review .badges span{width:28px; height:28px; border-radius:99px; background:var(--orange-soft); display:inline-grid; place-items:center; font-size:13px;}
.review .who b{font-family:'Fredoka',sans-serif; font-size:16px; display:block}
.review .who small{color:var(--ink-2); font-weight:700}
.review-nav{position:absolute; right:18px; top:18px; display:flex; gap:6px}
.review-nav button{width:34px;height:34px;border-radius:99px;background:var(--orange-soft);border:0;color:var(--orange); font-weight:900; cursor:pointer; transition:background .15s;}
.review-nav button:hover{background:var(--orange); color:#fff}
.review-dots{position:absolute; left:24px; bottom:14px; display:flex; gap:6px}
.review-dots i{width:7px;height:7px;border-radius:99px;background:var(--cream-2); display:inline-block; cursor:pointer; transition:background .15s, transform .15s;}
.review-dots i.on{background:var(--orange); transform:scale(1.3)}
.review .body.fading p{opacity:0}

/* Videos */
.videos{display:grid; grid-template-columns: 320px 1fr; gap:18px; margin-bottom: 80px;}
.vidlist{display:flex; flex-direction:column; gap:12px}
.vidlist .v{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:8px; display:grid; grid-template-columns: 90px 1fr; gap:10px; align-items:center; cursor:pointer; transition:transform .12s;}
.vidlist .v:hover{transform:translateY(-1px)}
.vidlist .v.active{border-color:var(--orange); }
.vidlist .vt{aspect-ratio: 16/12; border-radius:12px; position:relative; background:linear-gradient(140deg,#FFD3B0,#D9551A); overflow:hidden;}
.vidlist .vt.alt-1{background:linear-gradient(140deg,#CFEFEC,#1F7A74)}
.vidlist .vt.alt-2{background:linear-gradient(140deg,#FFE9B0,#E89C2A)}
.vidlist .vt::after{content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:18px; text-shadow:0 2px 4px rgba(0,0,0,.4);}
.vidlist .vb h5{
    margin: 0;
    font-family: 'Chillax Medium';
    font-size: 14px;
    line-height: 1.2;
}
.vidlist .vb small{font-size:11px; color:var(--ink-2); font-weight:800}
.feat-vid{
  border-radius:22px; min-height:330px; position:relative; overflow:hidden;
  color:#fff; padding:18px;
  transition:background .35s;
}
.feat-vid.bigfishvideo {
    background-image: url(/assets/bigfishvideo.png);
    background-size: cover;
    background-position: center center;
}
.vt.bigfishvideo {
    background-image: url(/assets/bigfishvideo.png);
    background-size: cover;
    background-position: center center;
}
.feat-vid.callingvideo{
    background-image: url(/assets/callingvideo.png);
    background-size: cover;
    background-position: center center;
}
.vt.callingvideo{
    background-image: url(/assets/callingvideo.png);
    background-size: cover;
    background-position: center center;
}
.feat-vid.skin-1{background:linear-gradient(180deg,#3a5a8a,#1b2a3a)}
.feat-vid.skin-2{background:linear-gradient(180deg,#9b5a2a,#4a2a14)}
.feat-vid.skin-3{background:linear-gradient(180deg,#c9802a,#6a3a14)}
.feat-vid .play-big{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px;height:74px;border-radius:99px; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:24px; box-shadow:0 6px 0 var(--orange-deep); border:4px solid #fff; cursor:pointer; transition:transform .15s;}
.feat-vid .play-big:hover{transform:translate(-50%,-50%) scale(1.05)}
.feat-vid .info{position:absolute; left:18px; right:18px; bottom:16px; display:flex; justify-content:space-between; align-items:flex-end}
.feat-vid h3{font-family:'Fredoka',sans-serif; font-size:24px; margin:0}
.feat-vid .meta{display:flex; gap:14px; opacity:.9; font-size:12px; font-weight:800; margin-top:4px; flex-wrap:wrap}

/* Adventures */
.adv-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 90px;}
.acard{aspect-ratio: 1/1; border-radius:24px; position:relative; overflow:hidden; background:linear-gradient(160deg,#3a5a8a,#1b2a3a); color:#fff; padding:14px; border:2px solid #fff; cursor:pointer; transition:transform .15s;}
.acard:hover{transform:translateY(-3px)}
.acard.a-2{background:linear-gradient(160deg,#9b5a2a,#4a2a14)}
.acard.a-3{background:linear-gradient(160deg,#c9802a,#6a3a14)}
.acard.a-4{background:linear-gradient(160deg,#2FA9A0,#155854)}
.acard h4{
    position: absolute;
    left: 14px;
    bottom: 46px;
    font-family: 'Chillax Semibold';
    font-size: 18px;
    margin: 0px 0px 12px;
}
.cover_magazns {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
.acard small{position:absolute; left:14px; top:14px; background:rgba(0,0,0,.3); padding:3px 9px; border-radius:99px; font-size:10px; font-weight:800; backdrop-filter:blur(8px); letter-spacing:.1em}
.acard .gobtn{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:var(--yellow); color:var(--ink); border:0; padding:7px 14px; border-radius:99px; font-weight:900; font-size:11px; cursor:pointer; transition:transform .12s}
.acard .gobtn:hover{transform:translate(-50%,-2px)}

/* Popular */
.pop-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 90px;
}
.pcard{aspect-ratio: 16/8.5; border-radius:22px; position:relative; overflow:hidden; background:linear-gradient(160deg,#FFE9B0,#E89C2A); color:#fff; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; border:2px solid #fff; cursor:pointer; transition:transform .15s;}
.pcard:hover{transform:translateY(-3px)}
.pcard.alt-1{background:linear-gradient(160deg,#CFEFEC,#1F7A74)}
.pcard.alt-2{background:linear-gradient(160deg,#FFD3B0,#D9551A)}
.pcard.alt-3{background:linear-gradient(160deg,#D7CFFF,#7A5BD4)}
.pcard h3{font-family: 'Chillax Semibold'; font-size:34px; margin:0; position:relative; line-height:.95}
.pcard .kicker{
      font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .95;
    position: relative;
    font-family: 'Chillax Semibold';
}
article.pcard.stone {
    background-image: url(/assets/covers/piedradavid.webp);
}
article.pcard.ester{
    background-image: url(/assets/covers/esterpalace.webp);
}
.pcard .more{position:absolute; right:18px; bottom:18px; background:#fff; color:var(--ink); border:0; padding:8px 14px; border-radius:99px; font-weight:900; font-size:12px; cursor:pointer; transition:transform .12s;}
.pcard .more:hover{transform:translateY(-1px)}
ul li a.actv-shpwng {
    color: #f26b1f !important;
}
ul li a.actv-shpwng::after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #f26b1f;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0px 0px 4px #f26b1f;
    vertical-align: middle;
    margin-left: 7px;
    position: relative;
    top: -1px;
}
/* Blog */
.blog-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; margin-bottom: 0px;}
.blog-feat{border-radius:22px; min-height:320px; position:relative; overflow:hidden; background:linear-gradient(180deg,#1B2A3A 0%, #0a121a 100%); color:#fff; padding:20px; border:2px solid #fff;}
.blog-feat::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 100%, rgba(47,169,160,.3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,196,77,.25), transparent 50%);}
.blog-feat .info{position:absolute; left:20px; right:20px; bottom:18px}
.blog-feat .date{display:inline-flex; gap:6px; font-size:11px; font-weight:800; letter-spacing:.1em; opacity:.9}
.blog-feat h3{font-family:'Fredoka',sans-serif; font-size:24px; margin:6px 0 10px}
.blog-feat .read{background:var(--orange); color:#fff; border:0; padding:8px 14px; border-radius:99px; font-weight:800; font-size:12px; box-shadow:0 4px 0 var(--orange-deep); cursor:pointer;}
.blog-side{display:flex; flex-direction:column; gap:14px}
.blog-row{display:grid; grid-template-columns:140px 1fr; gap:14px; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:10px; align-items:center; cursor:pointer; transition:transform .12s;}
.blog-row:hover{transform:translateY(-1px)}
.blog-row .th{aspect-ratio: 4/3; border-radius:12px; background:linear-gradient(140deg,#FFD3B0,#F26B1F); position:relative; overflow:hidden;}
.blog-row .th.alt{background:linear-gradient(140deg,#CFEFEC,#1F7A74)}
.blog-row .th.alt-2{background:linear-gradient(140deg,#FFE9B0,#E89C2A)}
.blog-row .th::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 50%), repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.06) 10px 11px);}
.blog-row h4{margin:0; font-family:'Fredoka',sans-serif; font-size:15px}
.blog-row .date{font-size:10px; font-weight:800; color:var(--ink-2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; display:block}

/* Final CTA */
.final-cta{
  margin-top:40px; border-radius:28px;
  background:linear-gradient(120deg,#F26B1F,#FFB36B);
  padding:32px 40px; position:relative; overflow:hidden; color:#fff;
  display:grid; grid-template-columns: 1fr 200px; gap:20px; align-items:center;
  margin-bottom: 90px;
}
.final-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 100%, rgba(255,255,255,.25), transparent 40%), radial-gradient(circle at 80% 0%, rgba(255,196,77,.4), transparent 40%);}
.final-cta h2{font-family:'Fredoka',sans-serif; font-size:38px; margin:0; line-height:1; position:relative}
.final-cta p{position:relative; font-weight:700; max-width:480px; margin:8px 0 16px}
.final-cta .btn{background:#fff; color:var(--orange-deep); box-shadow:0 5px 0 #C94B12}
.final-cta .ph{position:relative; aspect-ratio: 1/1; border-radius:20px; background:repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 10px, rgba(255,255,255,.05) 10px 20px); border:2px dashed rgba(255,255,255,.5); display:grid; place-items:center; color:#fff; font-weight:800; font-size:11px; letter-spacing:.1em; text-align:center; padding:12px;}

/* Footer */
footer{
  background:var(--navy); color:#fff;
  margin:40px -32px -60px; padding:50px 60px 30px;
  position:relative; overflow:hidden;
}
.foot-grid{display:grid; grid-template-columns: 2fr repeat(4,1fr); gap:32px}
.foot-grid h5{font-family:'Fredoka',sans-serif; font-size:14px; margin:0 0 14px; opacity:.85}
.foot-grid a{display:block; color:rgba(255,255,255,.7); text-decoration:none; font-weight:700; font-size:13px; padding:4px 0; transition:color .15s;}
.foot-grid a:hover{color:var(--orange)}
.foot-grid p{font-size:13px; color:rgba(255,255,255,.65); line-height:1.6; font-weight:600}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:rgba(255,255,255,.5); font-weight:700;}
.socials{display:flex; gap:8px}
.socials a{width:36px;height:36px;border-radius:99px;background:rgba(255,255,255,.1); display:grid; place-items:center; color:#fff !important; font-size:14px;}
.socials a:hover{background:var(--orange)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(27,42,58,.65); display:grid; place-items:center; z-index:100; backdrop-filter:blur(6px); animation:fadeIn .2s}
.modal[hidden]{display:none}
.modal-card{background:var(--cream); border-radius:24px; padding:32px; max-width:480px; width:90%; position:relative; border:2px solid #fff; box-shadow:0 15px 40px rgba(0,0,0,.3); animation:popIn .25s cubic-bezier(.2,.7,.3,1.3)}
.modal-card h3{font-family:'Fredoka',sans-serif; font-size:24px; margin:0 0 10px; color:var(--ink)}
.modal-card p{margin:0; line-height:1.5; font-weight:600; color:var(--ink-2)}
.modal-close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:99px; background:#fff; border:0; cursor:pointer; font-weight:900; color:var(--ink-2)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:scale(1)}}

/* Toast */
.toast{position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:99px; font-weight:800; font-size:13px; z-index:200; box-shadow:0 6px 20px rgba(0,0,0,.2); animation:slideIn .25s cubic-bezier(.2,.7,.3,1.3);}
.toast[hidden]{display:none}
@keyframes slideIn{from{transform:translateY(20px); opacity:0}to{transform:translateY(0); opacity:1}}

/* Responsive */
@media (max-width: 1100px){
  .games-row{grid-template-columns:repeat(3,1fr)}
  .gcard:nth-child(n+4){display:none}
  .videos{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .top-grid, .pop-grid, .blog-grid, .final-cta{grid-template-columns:1fr}
  .tile-row{height:240px}
  .tile{width:130px}
  .featured-card{width:170px}
}
@media (max-width: 800px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; left:-100%; top:0; height:100vh; width:280px; z-index:60; transition:left .25s; box-shadow:6px 0 30px rgba(0,0,0,.15);}
  .sidebar.open{left:0}
  .menu-toggle{display:grid; place-items:center}
  main{padding:64px 18px 40px}
  footer{margin:40px -18px -40px; padding:40px 24px 24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr}
  .hero-left h1{font-size:34px}
  .topnav{flex-wrap:wrap}
  .search{order:1; flex-basis:100%}
  .review{grid-template-columns:1fr}
  .review .photos{aspect-ratio:16/10}
  .vidlist{grid-template-columns:1fr}
  .pcard h3{font-size:24px}
}


/* ==========================================================
   ROUTE SECTIONS — Characters / Magazines / Settings / Family
   ========================================================== */
.route-section{margin-top:40px; scroll-margin-top:24px}

/* ---------- CHARACTERS ---------- */
.char-hero{
  display:flex; gap:14px; padding:18px; margin-top:18px; flex-wrap:wrap;
  border:2px solid var(--ink-10); border-radius:24px; box-shadow:var(--sh-sm);
}
.char-portrait{
  position:relative; width:78px; height:78px; border-radius:22px; padding:0;
  border:3px solid transparent; background:#FFF1E0; cursor:pointer; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.char-portrait img{width:100%; height:100%; object-fit:cover; object-position:top}
.char-portrait-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:700; color:var(--orange); font-size:14px;
  pointer-events:none;
}
.char-portrait img:not([src=""]){position:relative; z-index:1}
.char-portrait:hover{transform:translateY(-3px)}
.char-portrait.active{border-color:var(--orange); box-shadow:0 8px 22px rgba(217,85,26,.28); transform:translateY(-3px) scale(1.04)}

.char-spotlight{
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 0;
    margin-top: 18px;
    border-radius: 32px;
    overflow: hidden;
    border: 2px solid var(--ink-10);
    box-shadow: var(--sh-md);
}
.char-stage{
    position: relative;
    min-height: 520px;
    padding: 0px 0px 159px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #1B2A3A 0%, #0a121a 100%);
}
.char-stage:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 100%, rgba(47, 169, 160, .3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 196, 77, .25), transparent 50%);
}
.char-aura{
  position:absolute; left:50%; top:55%; transform:translate(-50%,-50%);
  width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  filter:blur(6px);
}
.char-figure{
    position: relative;
    z-index: 2;
    height: 320px;
    width: auto;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .22));
    animation: charBob 4.5s ease-in-out infinite;
}
@keyframes charBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.char-name-band{
  position:absolute; left:0; right:0; bottom:0; padding:18px 26px 22px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color:#fff; z-index:3;
}
.char-era{
    font-family: 'Chillax Semibold';
    display: inline-block;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    margin-bottom: 8px;
}
.char-name-band h3{font:700 38px/1 var(--ff-display); margin:0 0 6px; font-family: 'Chillax Semibold';}
.char-verse{
    font-size: 14px;
    opacity: .95;
    display: block;
    font-family: 'Chillax Medium';
}

.char-meta{padding:32px 32px 28px; display:flex; flex-direction:column; gap:18px}
.char-pill-row{display:flex; flex-wrap:wrap; gap:8px}
.char-pill{
  font:700 12px/1 var(--ff-body); padding:7px 12px; border-radius:999px;
  background:#FFE9D2; color:var(--orange);
  font-family: 'Chillax Medium';
}
.char-pill.teal{background:#D7F0E8; color:#0F7A5F}
.char-pill.blue{background:#D9E8FF; color:#1E5DB8}
.char-pill.violet{background:#E7DCFA; color:#5B33A8}

.char-stats{display:grid; gap:10px}
.cs{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:12px}
.cs label{font:700 13px var(--ff-body); color:var(--ink-70)}
.cs .bar{height:10px; background:var(--ink-10); border-radius:999px; overflow:hidden}
.cs .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--orange),#FFB36C); border-radius:inherit; transition:width .6s ease}

.char-bio{font:500 15px/1.55 var(--ff-body); color:var(--ink-70); margin:0}

.char-actions{display:flex; gap:10px; flex-wrap:wrap}

.char-quick{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding-top:14px; border-top:1px dashed var(--ink-10);
}
.char-quick > div{display:flex; flex-direction:column; gap:2px}
.char-quick b{font:700 14px var(--ff-display); color:var(--ink)}
.char-quick small{font:600 11px var(--ff-body); color:var(--ink-70); text-transform:uppercase; letter-spacing:.05em}

.char-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px}
.ch-card{
  background:#fff; border:2px solid var(--ink-10); border-radius:18px; padding:18px 14px;
  text-align:center; box-shadow:var(--sh-sm);
}
.ch-card .lock{font-size:24px; margin-bottom:6px; opacity:.55}
.ch-card b{display:block; font:700 15px var(--ff-display); color:var(--ink)}
.ch-card small{display:block; font:500 11px var(--ff-body); color:var(--ink-70); margin-top:2px}
.ch-card.locked{opacity:.7}
.ch-card.more{
  background:linear-gradient(135deg, var(--orange), #F08A3F); color:#fff; opacity:1;
  font:700 28px var(--ff-display); display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ch-card.more small{color:rgba(255,255,255,.85); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-top:4px}

/* ---------- MAGAZINES ---------- */
.mag-feature{
  display:grid; grid-template-columns:1.3fr 1fr; gap:0; margin-top:18px;
  background:#fff; border:2px solid var(--ink-10); border-radius:28px; overflow:hidden; box-shadow:var(--sh-md);
}
.mag-cover{
  position:relative; padding:36px 36px 32px;
  background:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.4), transparent 50%),
    linear-gradient(135deg, #2A6FDB 0%, #1A4A99 100%);
  color:#fff; min-height:380px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
}
.mag-cover::before{
  content:""; position:absolute; right:-30px; top:-30px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,168,.7), transparent 60%);
}
.mag-issue{
  display:inline-block; align-self:flex-start; font:700 11px/1 var(--ff-body); letter-spacing:.16em;
  text-transform:uppercase; padding:7px 12px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; backdrop-filter:blur(4px);
}
.mag-cover h3{font:700 42px/1.05 var(--ff-display); margin:0; max-width:11ch}
.mag-cover p{font:500 15px/1.5 var(--ff-body); margin:0; opacity:.92}
.mag-meta{display:flex; flex-wrap:wrap; gap:14px; font:600 13px var(--ff-body); opacity:.92}
.mag-cover .btn{align-self:flex-start; background:#fff; color:var(--ink); margin-top:6px}
.mag-cover .btn:hover{background:#FFE9D2}

.mag-side{padding:30px 32px; background:#FFFAF2}
.mag-side h4{font:700 18px var(--ff-display); margin:0 0 14px}
.toc{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.toc li{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  font:600 14px var(--ff-body); color:var(--ink); background:#fff; border:1px solid var(--ink-10);
  cursor:pointer; transition:transform .2s, border-color .2s;
}
.toc li:hover{transform:translateX(4px); border-color:var(--orange)}
.toc li span:first-child{
  font:700 12px/1 var(--ff-body); color:var(--orange); background:#FFE9D2;
  padding:5px 8px; border-radius:8px; min-width:28px; text-align:center;
}
.toc li small{margin-left:auto; color:var(--ink-70); font-weight:600}

.mag-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 14px}
.mtab{
  font:700 13px var(--ff-body); padding:8px 16px; border-radius:999px;
  background:#fff; border:2px solid var(--ink-10); color:var(--ink-70); cursor:pointer;
  transition:all .2s;
}
.mtab:hover{border-color:var(--orange)}
.mtab.active{background:var(--orange); color:#fff; border-color:var(--orange)}

.mag-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px}
.mag-card{
  background:#fff; border:2px solid var(--ink-10); border-radius:20px; overflow:hidden;
  box-shadow:var(--sh-sm); cursor:pointer; transition:transform .25s, box-shadow .25s;
}
.mag-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.mc-cover{
  position:relative; aspect-ratio:3/4; padding:14px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.mc-cover.c1{background:linear-gradient(160deg,#D9534F,#8C2A26); color:#fff}
.mc-cover.c2{background:linear-gradient(160deg,#7AB07A,#3F6A40); color:#fff}
.mc-cover.c3{background:linear-gradient(160deg,#FFB36C,#D97326); color:#fff}
.mc-cover.c4{background:linear-gradient(160deg,#5DA9D6,#1F5A85); color:#fff}
.mc-cover.c5{background:linear-gradient(160deg,#B883E0,#6A38A8); color:#fff}
.mc-cover.c6{background:linear-gradient(160deg,#3D3D3D,#0F0F0F); color:#fff}
.mc-tag{font:700 10px/1 var(--ff-body); letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; background:rgba(255,255,255,.22); border-radius:999px; align-self:flex-start; backdrop-filter:blur(4px)}
.mc-num{font:700 38px var(--ff-display); align-self:flex-end; opacity:.55}
.mag-card h4{font:700 16px/1.2 var(--ff-display); margin:14px 16px 4px}
.mag-card small{display:block; font:500 12px var(--ff-body); color:var(--ink-70); padding:0 16px 16px}

.mag-banner{
  margin-top:24px; padding:24px 28px; border-radius:24px;
  background:linear-gradient(135deg, #FFE9D2, #FFD9A8);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:space-between;
  border:2px solid #F8B47C;
}
.mag-banner h4{font:700 22px var(--ff-display); margin:0 0 4px}
.mag-banner p{font:500 14px var(--ff-body); margin:0; color:var(--ink-70); max-width:50ch}

/* ---------- SETTINGS ---------- */
.set-saved{
  font:700 13px var(--ff-body); color:#0F7A5F; padding:6px 14px;
  background:#D7F0E8; border-radius:999px; animation:fadeIn .3s;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

.set-grid{
  display:grid; grid-template-columns:240px 1fr; gap:0; margin-top:18px;
  background:#fff; border:2px solid var(--ink-10); border-radius:28px; overflow:hidden; box-shadow:var(--sh-md);
}
.set-side{
  display:flex; flex-direction:column; gap:4px; padding:18px;
  background:#FFFAF2; border-right:1px solid var(--ink-10);
}
.set-tab{
  text-align:left; padding:12px 14px; border-radius:14px; cursor:pointer;
  font:600 14px var(--ff-body); color:var(--ink-70); background:transparent; border:0;
  transition:all .2s;
}
.set-tab:hover{background:#fff; color:var(--ink)}
.set-tab.active{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(217,85,26,.28)}

.set-body{padding:32px 36px}
.set-pane{display:none}
.set-pane.active{display:block; animation:fadeIn .3s}
.set-pane h3{font:700 24px var(--ff-display); margin:0 0 22px}

.set-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px dashed var(--ink-10);
}
.set-row:last-child{border-bottom:0}
.set-row label{display:flex; flex-direction:column; gap:6px; flex:1; font:700 13px var(--ff-body); color:var(--ink-70)}
.set-row label input[type="text"], .set-row label input[type="email"], .set-row label select{
  padding:11px 14px; border-radius:12px; border:2px solid var(--ink-10); background:#fff;
  font:500 14px var(--ff-body); color:var(--ink); max-width:340px;
}
.set-row label input:focus, .set-row label select:focus{outline:none; border-color:var(--orange)}
.set-row label input[type="range"]{appearance:none; width:100%; max-width:340px; height:6px; background:var(--ink-10); border-radius:999px; outline:none}
.set-row label input[type="range"]::-webkit-slider-thumb{appearance:none; width:20px; height:20px; border-radius:50%; background:var(--orange); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2)}
.set-row.toggle b{font:700 14px var(--ff-body)}
.set-row.toggle input[type="checkbox"]{
  appearance:none; width:46px; height:26px; border-radius:999px; background:var(--ink-10);
  position:relative; cursor:pointer; transition:background .2s;
}
.set-row.toggle input[type="checkbox"]::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.set-row.toggle input[type="checkbox"]:checked{background:var(--orange)}
.set-row.toggle input[type="checkbox"]:checked::after{transform:translateX(20px)}
.set-row.danger b{color:#C9472A}
.set-row span a, .set-note a{color:var(--orange); font-weight:700; text-decoration:none}
.set-row span a:hover, .set-note a:hover{text-decoration:underline}
.set-note{font:500 13px var(--ff-body); color:var(--ink-70); margin:-8px 0 14px}

.plan-card{
  display:flex; align-items:center; gap:20px; justify-content:space-between;
  padding:22px 24px; border-radius:18px; margin-bottom:18px;
  background:linear-gradient(135deg, #FFE9D2, #FFD0A0); border:2px solid #F8B47C;
}
.plan-tag{font:700 11px/1 var(--ff-body); letter-spacing:.14em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:4px}
.plan-card h4{font:700 22px var(--ff-display); margin:0 0 4px}
.plan-card p{font:500 13px var(--ff-body); color:var(--ink-70); margin:0}
.plan-price{font:700 36px var(--ff-display); color:var(--ink); white-space:nowrap}
.plan-price small{font:600 14px var(--ff-body); color:var(--ink-70)}

/* ---------- FAMILY ---------- */
.fam-summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;
}
.fs-card{
  padding:24px; border-radius:24px; box-shadow:var(--sh-sm);
  background:linear-gradient(135deg, #FFE9D2, #FFD0A0); border:2px solid #F8B47C;
}
.fs-card.alt{background:linear-gradient(135deg, #D9E8FF, #B8D2FF); border-color:#7FA8E8}
.fs-card.alt2{background:linear-gradient(135deg, #D7F0E8, #A8DDC8); border-color:#6FB89A}
.fs-num{font:700 48px/1 var(--ff-display); color:var(--ink)}
.fs-num small{font:600 18px var(--ff-body); opacity:.6}
.fs-lbl{font:700 14px var(--ff-body); margin-top:4px}
.fs-trend{font:600 12px var(--ff-body); color:var(--ink-70); margin-top:10px}
.fs-bar{height:8px; background:rgba(255,255,255,.6); border-radius:999px; margin-top:12px; overflow:hidden}
.fs-bar i{display:block; height:100%; background:#1E5DB8; border-radius:inherit}
.fs-pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.fs-pills span{font:700 11px var(--ff-body); padding:5px 9px; background:rgba(255,255,255,.7); border-radius:999px; color:#0F7A5F}

.kids-row{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; margin-top:14px;
}
.kid-card{
  background: linear-gradient(rgb(27, 42, 58) 0%, rgb(10, 18, 26) 100%);
  border:2px solid var(--ink-10); border-radius:24px;
  padding:22px 20px 18px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:12px;
}
.kid-avatar{
  width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font:700 28px var(--ff-display); color:#fff;
}
.kid-avatar.a1{background:linear-gradient(135deg,#FF8A4D,#D97326)}
.kid-avatar.a2{background:linear-gradient(135deg,#5DC4A8,#2F8A6E)}
.kid-avatar.a3{background:linear-gradient(135deg,#B883E0,#6A38A8)}
.kid-card h3{color: #fff; font:700 22px var(--ff-display); margin:0; display:flex; align-items:baseline; gap:8px}
.kid-card h3 small{font:500 13px var(--ff-body); color:var(--ink-70)}
.kid-stats{display:flex; flex-wrap:wrap; gap:10px; font:600 12px var(--ff-body); color: #fff;}
.kid-progress label{display:block; font:600 12px var(--ff-body); color:#fff; margin-bottom:6px}
.kid-progress .bar{height:8px; background:var(--ink-10); border-radius:999px; overflow:hidden}
.kid-progress .bar i{display:block; height:100%; background:var(--orange); border-radius:inherit}
.kid-fav{
    font-size: 12px;
    color: #fff;
    padding: 10px 12px;
    background: #fffaf230;
    border-radius: 12px;
}
.kid-fav b{color:var(--ink)}
.kid-actions{display:flex; gap:8px; margin-top:auto}
.kid-actions .btn{
    flex: 1;
    padding: 9px 12px;
    font-size: 13px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
}

.kid-add{
    border: 2px dashed var(--ink-10);
    background: #f9feff;
    box-shadow: 0px 0px 10px rgb(87 103 104 / 25%);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    cursor: pointer;
    transition: all .2s;
    min-height: 240px;
}
.kid-add:hover{border-color:var(--orange); background:#FFFAF2}
.kid-add .plus{font:700 38px var(--ff-display); color:var(--orange); line-height:1}
.kid-add b{font:700 15px var(--ff-display)}
.kid-add small{font:500 12px var(--ff-body); color:var(--ink-70)}

.fam-bottom{
  display:grid; grid-template-columns:1fr 1.1fr; gap:14px; margin-top:18px;
}
.devo-card{
  padding:28px; border-radius:24px; box-shadow:var(--sh-md);
  background:linear-gradient(160deg, #2A6FDB, #1A4A99); color:#fff;
  display:flex; flex-direction:column; gap:14px;
}
.devo-card .kicker{font:700 11px/1 var(--ff-body); letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.devo-card h3{font:700 28px var(--ff-display); margin:0}
.devo-card p{font:500 14px/1.5 var(--ff-body); margin:0; opacity:.9}
.devo-progress{height:8px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden}
.devo-progress i{display:block; height:100%; background:#FFB36C; border-radius:inherit}
.devo-card .btn{align-self:flex-start; background:#fff; color:var(--ink)}
.devo-card .btn:hover{background:#FFE9D2}

.badges-card{
  padding:24px; border-radius:24px; background:#fff; border:2px solid var(--ink-10); box-shadow:var(--sh-sm);
}
.badges-card h4{font:700 18px var(--ff-display); margin:0 0 14px}
.badges-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.badge-pill{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  background:#FFFAF2; border:1px solid var(--ink-10);
}
.badge-pill span{font-size:24px}
.badge-pill b{display:block; font:700 13px var(--ff-display)}
.badge-pill small{display:block; font:500 11px var(--ff-body); color:var(--ink-70)}
.badge-pill.locked{opacity:.55}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .char-spotlight{grid-template-columns:1fr}
  .char-stage{min-height:420px}
  .mag-feature{grid-template-columns:1fr}
  .set-grid{grid-template-columns:1fr}
  .set-side{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--ink-10)}
  .set-tab{white-space:nowrap}
  .fam-summary{grid-template-columns:1fr}
  .fam-bottom{grid-template-columns:1fr}
  .char-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 700px){
  .char-quick{grid-template-columns:repeat(2,1fr)}
  .char-strip{grid-template-columns:repeat(2,1fr)}
  .badges-grid{grid-template-columns:1fr}
  .set-body{padding:22px 18px}
  .mag-cover{padding:24px}
  .mag-cover h3{font-size:32px}
}