/* Home screen structure. Default layout = Voltage Vixen; other skins rearrange it. */
.logo { display: flex; align-items: center; gap: 1.6rem; height: 12rem; white-space: nowrap; }
.logo-mark { width: 4.6rem; height: 5.8rem; flex: none; }
.streak-chip b { font-weight: 800; }
.hero > * { position: absolute; }
.mascot { left: 7rem; top: 30rem; width: 42rem; }
.mascot-refl { left: 7rem; top: 90.5rem; width: 42rem; transform: scaleY(-1); opacity: .28; filter: blur(3px); -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.9), transparent 35%); mask-image: linear-gradient(0deg, rgba(0,0,0,.9), transparent 35%); }
.halo { left: 5rem; top: 85rem; width: 46rem; height: 9rem; border-radius: 50%; }
.bubble { left: 47rem; top: 22rem; width: 38rem; padding: 3rem 3.4rem; font-size: 3.4rem; font-weight: 600; line-height: 1.25; border-radius: 3.6rem 3.6rem 3.6rem .8rem; }
.bubble small { display: block; font-family: var(--font-display); font-size: 2rem; letter-spacing: .3rem; color: var(--accent); margin-bottom: 1.2rem; }
.charge { left: 53rem; top: 56rem; width: 32rem; padding: 2.6rem 3rem; border-radius: 3rem; }
.charge-a { font-size: 2.4rem; color: var(--muted); letter-spacing: .1rem; }
.cells { display: flex; gap: .8rem; margin-top: 1.4rem; height: 3.6rem; padding: .5rem; border: .2rem solid rgba(140,200,255,.35); border-radius: 1.2rem; }
.cells i { flex: 1; border-radius: .5rem; background: rgba(255,255,255,.06); }
.cells i.on { background: linear-gradient(180deg, #e2ff9c, #B6FF3B); box-shadow: 0 0 1.4rem #B6FF3B; }
.charge-n { font-family: var(--font-display); font-weight: 800; font-size: 4.4rem; margin-top: 1.2rem; }
.charge-n span { font-family: var(--font-body); font-size: 2.6rem; color: var(--muted); font-weight: 600; }
.hero-text { display: none; }
.cta { left: 5.6rem; width: 80rem; top: 101rem; height: 14rem; font-size: 4.4rem; }
.cta-b, .cta-c { display: none; }

.cards { position: absolute; left: 90rem; right: 5.6rem; top: 19rem; bottom: 5rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 2.6rem; }
.card { display: flex; align-items: center; gap: .8rem; padding: 0 3rem 0 1.8rem; overflow: hidden; text-align: left; min-height: 12rem; transition: transform .12s; }
.card .ic { width: 17rem; height: 20rem; flex: none; background: var(--ic) center / contain no-repeat; filter: drop-shadow(0 1.2rem 1.8rem rgba(0,0,0,.6)); }
.mode-word .ic { width: 17rem; } .mode-trivia .ic { background-size: 75%; } .mode-sudoku .ic { background-size: 85%; } .mode-nono .ic { background-size: 88%; } .mode-plates .ic { background-size: 94%; }
.card .tx { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tag { display: inline-block; margin-bottom: 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: .2rem; padding: 1.2rem 2.2rem; border-radius: 99rem; border: .2rem solid; background: rgba(0,0,0,.35); text-transform: uppercase; }
.tag-new { color: #00E5FF; border-color: #00E5FF; box-shadow: 0 0 1.6rem #00E5FF55; }
.tag-warn { color: #FFB020; border-color: #FFB020; box-shadow: 0 0 1.6rem #FFB02055; }
.tag-good { color: #B6FF3B; border-color: #B6FF3B; box-shadow: 0 0 1.6rem #B6FF3B55; }
.tt { font-size: 4.2rem; font-weight: 700; letter-spacing: -.05rem; line-height: 1.05; white-space: nowrap; }
.ts { font-size: 2.6rem; color: var(--muted); margin-top: .8rem; }
.streak-card { flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 4rem; }
.streak-card .sc-a { margin: 0; font-size: 2.8rem; letter-spacing: .1rem; }
.big { font-family: var(--font-display); font-weight: 900; font-size: 12rem; line-height: 1; margin-top: 1rem; }