/* ---------- Home: Ink Splash ----------
   Practice paper with a faint 田字格 grid, ink drops that splat into characters (js/home.js draws
   them on #ink-bg), and chunky game tiles. Tapping a tile splats on #ink-fg, above the tiles. */
#home {
  --ink: #1d2233;
  --pop-pink: #ff3d7f; --pop-cyan: #19b6d6; --pop-yellow: #ffc22e; --pop-violet: #7a5cff; --pop-green: #2ec27e; --pop-coral: #ff7a59;
  --f-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  --f-brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", serif;
  position: relative; isolation: isolate;
  overflow-x: hidden; overflow-y: auto;
  padding: 0;
  background: #fdfbf7; color: var(--ink);
  font-family: var(--f-body);
}
#home .ink-paper, #home .ink-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#home .ink-paper {
  z-index: -2;
  background-color: #fdfbf7;
  background-image:
    linear-gradient(rgba(220, 70, 70, .10) 2px, transparent 2px), linear-gradient(90deg, rgba(220, 70, 70, .10) 2px, transparent 2px),
    linear-gradient(rgba(220, 70, 70, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 70, 70, .06) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 60px 60px, 60px 60px;
  background-position: -2px -2px;
}
#home #ink-bg { z-index: -1; }
#home .ink-fg { z-index: 30; }

/* the first screenful: header, the board, the bottom bar */
.home-fold {
  min-height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 20px max(32px, env(safe-area-inset-left));
}

/* ---- header ---- */
#home .home-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* (the brand gives way first: on a 1024-wide iPad its hello wraps rather than pushing the pills onto a
   second row, which the board needs the room of) */
#home .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
#home .paopao { width: 62px; height: 68px; flex: none; display: block; animation: ink-bob 2.6s ease-in-out infinite; }
#home .paopao .eye { transform-origin: center; transform-box: fill-box; animation: ink-blink 4.2s infinite; }
#home .logo { font-family: var(--f-display); font-weight: 400; font-size: 50px; line-height: .9; letter-spacing: 1px; margin: 0; color: var(--ink); }
#home .logo span { color: var(--pop-pink); }
#home .hello { font-weight: 800; color: #6b6578; font-size: 17px; margin-top: 4px; }
#home .head-right { display: flex; align-items: center; gap: 12px; }
#home .streak-pill, #home .stars-total, #home .home-head .icon-btn, #home .profile-badge {
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--ink);
}
#home .streak-pill {
  position: relative; overflow: hidden;
  border-radius: 999px; padding: 6px 16px 9px; font-weight: 900; font-size: 20px; white-space: nowrap;
}
#home .streak-pill i { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--pop-yellow); border-radius: 0 3px 3px 0; }
#home .streak-pill.done i { background: var(--pop-green); }
#home .streak-pill.cracked { background: #fff3f0; }
#home .stars-total { font-size: 20px; font-weight: 900; border-radius: 999px; padding: 6px 16px; }
#home .home-head .icon-btn { width: 52px; height: 52px; border-radius: 50%; font-size: 24px; display: grid; place-items: center; padding: 0; }
#home .profile-badge { padding: 4px 16px 4px 4px; border-radius: 999px; }
#home .profile-badge .pb-avatar { width: 46px; height: 46px; font-size: 30px; background: #ffe7ef; }
#home .profile-badge .pb-name { font-size: 20px; font-weight: 900; }
#home .home-head button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* ---- the board ----
   The hero down the left, four tiles in two rows, and along the bottom Brush Duel and Brainrot Lab
   (the two Game Lab graduates). .no-duel / .no-rotlab: that tile is hidden (games/lab/lab.js), so the
   other one takes the whole bottom row; with neither, two rows as before. */
.board {
  flex: 1; min-height: 500px;
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr .84fr; gap: 22px;
  padding-bottom: 9px;   /* room for the tiles' drop shadow */
}
.board.no-duel.no-rotlab { min-height: 470px; grid-template-rows: 1fr 1fr; }
.tile {
  position: relative; overflow: hidden; min-width: 0;
  border-radius: 30px; border: 4px solid var(--ink); box-shadow: 0 9px 0 var(--ink);
  padding: 20px 24px; text-align: left; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  transition: transform .12s, box-shadow .12s;
  font-family: var(--f-body);
}
.tile:active, .tile.press { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink); }
.tile:focus-visible { outline: 4px solid var(--pop-yellow); outline-offset: 4px; }
.tile .nm { font-family: var(--f-display); font-size: 34px; line-height: 1; position: relative; z-index: 2; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.tile .sb { font-weight: 800; font-size: 16px; line-height: 1.25; opacity: .96; position: relative; z-index: 2; margin-top: 6px; }
.tile .art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tile .hz { position: absolute; right: 16px; top: 8px; font-family: var(--f-brush); font-size: 84px; line-height: 1; opacity: .22; z-index: 1; pointer-events: none; }
.tile.paws { background: var(--pop-coral); }
.tile.garden { background: var(--pop-green); }
.tile.write { background: var(--pop-violet); }
.tile.dict { background: var(--pop-pink); }
.tile.paws .hz, .tile.garden .hz, .tile.write .hz, .tile.dict .hz, .tile.duel .hz, .tile.rotlab .hz { right: auto; left: 18px; top: 10px; }

/* hero: practice (Write it!), a character writing itself in a 田字格 box, and the three steps */
.tile.hero { grid-row: span 3; background: linear-gradient(180deg, #8f74ff 0%, #6a4cf0 60%, #5134d0 100%); padding: 24px 28px 28px; container-type: size; }
.board.no-duel.no-rotlab .tile.hero { grid-row: span 2; }
.tile.hero .nm { font-size: 54px; }
.tile.hero .sb { font-size: 18px; max-width: 28ch; }
.tile.hero.write .hz { font-size: 120px; top: auto; bottom: 14px; right: 20px; left: auto; opacity: .18; }
.tile.hero .badge {
  position: absolute; z-index: 2; top: 20px; left: 22px;
  background: var(--pop-yellow); color: var(--ink); font-weight: 900; font-size: 16px;
  padding: 6px 14px; border-radius: 999px; border: 3px solid var(--ink); transform: rotate(-4deg);
}
.tile.hero .steps { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tile.hero .steps i {
  font-style: normal; font-weight: 900; font-size: 16px; white-space: nowrap;
  background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; padding: 4px 12px;
}
.tile.hero .play {
  position: relative; z-index: 2; margin-top: 18px; align-self: flex-start;
  background: var(--pop-yellow); color: var(--ink); font-family: var(--f-display); font-size: 32px;
  padding: 10px 32px; border-radius: 999px; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  animation: ink-pulse 1.6s ease-in-out infinite;
}
.tile.hero .tzg {
  position: absolute; left: 50%; top: 68px; width: min(52cqw, 230px, 100cqh - 330px); aspect-ratio: 1; translate: -50% 0;
  background:
    linear-gradient(rgba(220, 70, 70, .45), rgba(220, 70, 70, .45)) center / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(220, 70, 70, .45), rgba(220, 70, 70, .45)) center / 2px 100% no-repeat,
    #fffdf8;
  border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 rgba(0, 0, 0, .22); rotate: -3deg;
}
/* (the box shrinks to fit above the title, and goes when there's no room for it) */
@container (max-height: 420px) { .tile.hero .tzg { display: none; } }
.tile.hero .tzg-char { position: absolute; inset: 12%; width: 76%; height: 76%; }
.tile.hero .tzg-char path { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; animation: ink-draw 3.6s ease-in-out infinite; }

/* Brainrot Invasion: a small tile now, the sea with a shark fin going by */
.tile.invasion { background: linear-gradient(180deg, #1aa3d6 0%, #0d6fae 70%, #0b4f86 100%); }
.tile.invasion .hz { right: auto; left: 18px; top: 10px; }
.tile.invasion .waves { position: absolute; left: 0; top: 34%; width: 220%; height: 40px; animation: ink-wave 6s linear infinite; }
.tile.invasion .waves path { fill: rgba(255, 255, 255, .18); }
.tile.invasion .fin-lane { position: absolute; left: 8%; right: 8%; top: 20%; height: 46px; container-type: inline-size; }
.tile.invasion .fin { position: absolute; left: 0; top: 0; width: 56px; height: 46px; color: #0b2f52; animation: ink-swim-s 7s ease-in-out infinite; }
.tile.invasion .brainrot { position: absolute; font-size: 32px; animation: ink-float 3s ease-in-out infinite; }

/* duel: two kids at a tug of war, the warm side against the cool side (like the game) */
.tile.duel { grid-column: 2 / -1; background: #ec5a3d; }
.tile.duel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #2f7fe0; clip-path: polygon(73% 0, 100% 0, 100% 100%, 65% 100%);
}
.tile.duel .nm, .tile.duel .sb { max-width: 44%; }
.tug-rope {
  position: absolute; left: 47%; right: 10%; top: 40%; height: 16px; margin-top: -8px;
  border: 3px solid var(--ink); border-radius: 8px; background: repeating-linear-gradient(-55deg, #e2ad68 0 7px, #b77a37 7px 11px);
  animation: ink-tug 2.6s ease-in-out infinite;
}
.tug-rope i {   /* the red ribbon in its middle */
  position: absolute; left: 50%; top: -9px; width: 16px; height: 28px; margin-left: -8px;
  background: #ff4b5c; border: 3px solid var(--ink); border-radius: 4px 4px 8px 8px;
}
.tug-kid {
  position: absolute; top: 40%; width: 62px; height: 62px; margin: -31px 0 0 -31px; overflow: hidden;
  display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-size: 36px; line-height: 1; transform-origin: 50% 100%;
}
.tug-kid svg { width: 38px; height: 42px; }
.tug-l { left: 47%; background: #ffd3bf; animation: ink-lean-l 2.6s ease-in-out infinite; }
.tug-r { left: 90%; background: #c4defd; animation: ink-lean-r 2.6s ease-in-out infinite; }

/* side by side with Brainrot Lab, Brush Duel's tug of war goes across its top, above the title */
.board:not(.no-rotlab) .tile.duel { grid-column: auto; }
.board:not(.no-rotlab) .tile.duel::before { clip-path: polygon(62% 0, 100% 0, 100% 100%, 52% 100%); }
.board:not(.no-rotlab) .tile.duel .nm, .board:not(.no-rotlab) .tile.duel .sb { max-width: none; }
.board:not(.no-rotlab) .tug-rope, .board:not(.no-rotlab) .tug-kid { top: 27%; }
.board:not(.no-rotlab) .tug-rope { left: 24%; right: 22%; }
.board:not(.no-rotlab) .tug-l { left: 24%; }
.board:not(.no-rotlab) .tug-r { left: 78%; }
.board:not(.no-rotlab) .tug-kid { width: 50px; height: 50px; margin: -25px 0 0 -25px; font-size: 28px; }
.board:not(.no-rotlab) .tug-kid svg { width: 30px; height: 34px; }

/* rotlab: a bubbling flask with a creature in its goo, on lab purple with comic dots */
.tile.rotlab {
  background: radial-gradient(rgba(255, 255, 255, .13) 22%, transparent 24%) 0 0 / 14px 14px, linear-gradient(160deg, #b04fe6, #8a2fc9);
}
.board.no-duel .tile.rotlab { grid-column: 2 / -1; }
.flask { position: absolute; right: 18px; top: 10px; width: 92px; height: 100px; overflow: visible; }
.flask-bubbles circle { fill: #fff; opacity: 0; animation: ink-bubble 2.4s ease-in infinite; }
.flask-bubbles circle:nth-child(2) { animation-delay: .8s; }
.flask-bubbles circle:nth-child(3) { animation-delay: 1.6s; }
.flask-goo { animation: ink-goo 2.4s ease-in-out infinite; }
.flask-eye { animation: ink-peek 3.2s ease-in-out infinite; }

/* paws: prints stepping in */
.paw { position: absolute; width: 34px; height: 34px; color: rgba(255, 255, 255, .55); opacity: 0; rotate: var(--r); animation: ink-step 3s infinite; }
/* garden: a sprout grows */
.sprout { position: absolute; right: 26px; top: 22px; width: 100px; height: 110px; }
.sprout .stem { stroke: #fff; stroke-width: 7; fill: none; stroke-linecap: round; stroke-dasharray: 120; animation: ink-grow 4s ease-in-out infinite; }
.sprout .leaf { fill: #fff; transform-box: fill-box; animation: ink-leaf 4s ease-in-out infinite; }
.sprout .l1 { transform-origin: 100% 100%; }
.sprout .l2 { transform-origin: 0 100%; }
/* write: a brush stroke draws itself */
.stroke { position: absolute; right: 16px; top: 12px; width: 140px; height: 120px; }
.stroke path { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; animation: ink-draw 3.6s ease-in-out infinite; }
/* dictation: a speaker with sound rings */
.rings { position: absolute; right: 42px; top: 40px; width: 60px; height: 60px; }
.rings i { position: absolute; inset: 0; border: 5px solid rgba(255, 255, 255, .7); border-radius: 50%; animation: ink-ring 2.2s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: .7s; }
.rings i:nth-child(3) { animation-delay: 1.4s; }
.rings svg { position: absolute; inset: 8px; width: 44px; height: 44px; color: #fff; }
/* with Brush Duel's row the four small tiles are shorter: their art moves up out of the title's way
   (a big iPad still has room for it as it was) */
@media (max-height: 900px), (max-width: 820px) {
  .board:not(.no-duel.no-rotlab) .tile.paws .art { bottom: 42%; }
  .board:not(.no-duel.no-rotlab) .sprout { top: 14px; right: 18px; width: 82px; height: 90px; }
  .board:not(.no-duel.no-rotlab) .stroke { top: 10px; width: 118px; height: 101px; }
  .board:not(.no-duel.no-rotlab) .rings { top: 20px; right: 28px; width: 48px; height: 48px; }
  .board:not(.no-duel.no-rotlab) .rings svg { inset: 6px; width: 36px; height: 36px; }
  .flask { top: 8px; right: 14px; width: 72px; height: 78px; }
}

/* ---- bottom bar ---- */
.home-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.home-bottom .pills { display: flex; gap: 12px; flex-wrap: wrap; }
.pill {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 8px 20px 8px 14px;
  font-family: var(--f-body); font-weight: 900; font-size: 19px; color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pill svg { width: 28px; height: 28px; flex: none; }
.home-bottom .today { font-weight: 800; color: #6b6578; font-size: 17px; background: rgba(253, 251, 247, .85); border-radius: 12px; padding: 4px 8px; }
.home-bottom .today b { color: var(--ink); }

/* ---- My words, below the fold ---- */
.home-words { padding: 4px max(32px, env(safe-area-inset-right)) 40px max(32px, env(safe-area-inset-left)); }
#home .list-title { font-family: var(--f-display); font-weight: 400; font-size: 28px; color: var(--ink); margin: 8px 0 14px; }
#home .word-card { border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); border-radius: 22px; }

/* ---- smaller screens ---- */
@media (max-width: 1080px) {
  .tile .nm { font-size: 30px; }
  .tile.hero .nm { font-size: 46px; }
  #home .logo { font-size: 42px; }
}
/* narrow (phone, or a small window): two columns, the hero across the top */
@media (max-width: 820px) {
  /* (flex: none: the screen is a flex column as tall as the window, and here the tiles stack taller than
     the window, so the fold mustn't shrink to it or My words sits on top of the board) */
  .home-fold { flex: none; padding-left: 16px; padding-right: 16px; gap: 14px; }
  .home-words { padding-left: 16px; padding-right: 16px; }
  #home .head-right { flex-wrap: wrap; gap: 8px; }
  .board, .board.no-duel.no-rotlab { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(360px, 1.3fr) repeat(2, minmax(170px, 1fr)) minmax(170px, .9fr); gap: 16px; min-height: 0; }
  .board.no-duel.no-rotlab { grid-template-rows: minmax(360px, 1.3fr) repeat(2, minmax(170px, 1fr)); }
  .tile.hero, .board.no-duel.no-rotlab .tile.hero { grid-row: auto; grid-column: 1 / -1; padding-top: 70px; }
  .tile.hero .tzg { left: auto; right: 24px; top: 22px; width: min(150px, 100cqh - 250px); translate: none; }
  .board.no-rotlab .tile.duel, .board.no-duel .tile.rotlab { grid-column: 1 / -1; }
  .tile .hz { font-size: 64px; }
}
@media (max-width: 520px) {
  .board, .board.no-duel.no-rotlab { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(160px, auto); flex: none; }
  .tile.duel, .tile.rotlab, .board.no-duel .tile.rotlab { grid-column: auto; }
  /* (one column: Brush Duel is a wide tile again, its tug of war beside the title) */
  .board .tile.duel .nm, .board .tile.duel .sb { max-width: 40%; }
  .board .tile.duel::before { clip-path: polygon(73% 0, 100% 0, 100% 100%, 65% 100%); }
  .board .tug-rope, .board .tug-kid { top: 40%; }
  .board .tug-rope { left: 47%; right: 10%; }
  .board .tug-l { left: 47%; }
  .board .tug-r { left: 90%; }
  .board .tug-kid { width: 62px; height: 62px; margin: -31px 0 0 -31px; font-size: 36px; }
  .board .tug-kid svg { width: 38px; height: 42px; }
  .tile.hero { min-height: 380px; }
  #home .logo { font-size: 36px; }
  #home .paopao { width: 48px; height: 52px; }
  .tile.hero .nm { font-size: 40px; }
  #home .stars-total, #home .streak-pill { font-size: 17px; }
}

@keyframes ink-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ink-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ink-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ink-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ink-swim-s {
  0% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(calc(100cqw - 56px)) scaleX(1); }
  50% { transform: translateX(calc(100cqw - 56px)) scaleX(-1); }
  95% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes ink-swim {
  0% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(calc(100cqw - 84px)) scaleX(1); }
  50% { transform: translateX(calc(100cqw - 84px)) scaleX(-1); }
  95% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes ink-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes ink-step { 0% { opacity: 0; transform: scale(.6); } 10% { opacity: 1; transform: scale(1); } 60% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes ink-grow { 0% { stroke-dashoffset: 120; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
@keyframes ink-leaf { 0%, 30% { transform: scale(0); } 45% { transform: scale(1.1); } 55%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes ink-draw { 0% { stroke-dashoffset: 400; } 50%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } }
@keyframes ink-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes ink-bubble { 0% { opacity: 0; transform: translateY(14px) scale(.5); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-30px) scale(1.1); } }
@keyframes ink-goo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ink-peek { 0%, 40%, 100% { transform: translate(0, 0); } 55%, 75% { transform: translate(2px, -1px); } 85% { transform: translate(-2px, 0); } }
@keyframes ink-tug { 0%, 100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
@keyframes ink-lean-l { 0%, 100% { transform: translateX(-12px) rotate(-14deg); } 50% { transform: translateX(12px) rotate(5deg); } }
@keyframes ink-lean-r { 0%, 100% { transform: translateX(-12px) rotate(-5deg); } 50% { transform: translateX(12px) rotate(14deg); } }

@media (prefers-reduced-motion: reduce) {
  #home *, #home *::before, #home *::after { animation: none !important; transition: none !important; }
  #home .paw { opacity: 1; }
  #home .sprout .leaf { transform: none; }
  #home .stroke path { stroke-dashoffset: 0; }
  #home .rings i { opacity: .5; transform: scale(1.3); }
}