@font-face { font-family: "Pixel"; src: url(../fonts/pixelify-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Pixel"; src: url(../fonts/pixelify-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Classic"; src: url(../fonts/lexend-latin-500-normal.woff2) format("woff2"); font-weight: 400 500; }
@font-face { font-family: "Classic"; src: url(../fonts/lexend-latin-700-normal.woff2) format("woff2"); font-weight: 600 800; }
@font-face { font-family: "Dys"; src: url(../fonts/opendyslexic-latin-400-normal.woff2) format("woff2"); font-weight: 400 500; }
@font-face { font-family: "Dys"; src: url(../fonts/opendyslexic-latin-700-normal.woff2) format("woff2"); font-weight: 600 800; }
@font-face { font-family: "Lecture"; src: url(../fonts/andika-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Lecture"; src: url(../fonts/andika-latin-700-normal.woff2) format("woff2"); font-weight: 700; }

:root {
  --ink: #2b1d12;
  --ink-soft: #4a3424;
  --sky: #7ec8f5;
  --sky-low: #b9e3fb;
  --grass: #5faa3c;
  --grass-hi: #7fcf52;
  --grass-lo: #3f7f27;
  --dirt: #86603f;
  --dirt-lo: #5f4029;
  --stone: #9a9a9a;
  --stone-hi: #c4c4c4;
  --stone-lo: #6b6b6b;
  --wood: #b07a45;
  --wood-hi: #d39a5e;
  --wood-lo: #7c522a;
  --gold: #f5c542;
  --gold-lo: #c8921c;
  --gem: #4fe3d8;
  --gem-lo: #1fa59b;
  --red: #e5533d;
  --red-lo: #a3321f;
  --blue: #3d7be5;
  --purple: #9b59d0;
  --paper: #fff8e7;
  --syl-a: #1f5fd1;
  --syl-b: #d12f2f;
  --u: min(1vw, 1vh);
  --gap: clamp(8px, 1.6vmin, 18px);
  --radius: 0px;
  --safe-t: env(safe-area-inset-top, 0px);
  --top-h: calc(clamp(56px, 9vmin, 84px) + var(--safe-t));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Classic", system-ui, sans-serif;
  color: var(--ink);
  background: var(--sky);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; color: inherit; }
textarea, input { font-family: "Lecture", system-ui, sans-serif; user-select: text; -webkit-user-select: text; }

/* ---------- World background ---------- */
#world-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #5fb4ee 0%, var(--sky) 45%, var(--sky-low) 100%); }
.sun { position: absolute; top: 7vh; right: 9vw; width: 11vmin; height: 11vmin; background: #fff27a;
  box-shadow: 0 0 0 1.4vmin #ffe14d, 0 0 0 2.8vmin rgba(255, 225, 77, .35); animation: sunpulse 4s steps(4) infinite; }
@keyframes sunpulse { 50% { box-shadow: 0 0 0 1.4vmin #ffe14d, 0 0 0 3.6vmin rgba(255, 225, 77, .25); } }
.cloud { position: absolute; height: 5vmin; background: #fff; opacity: .92;
  box-shadow: 4vmin -3vmin 0 0 #fff, 9vmin 0 0 0 #fff, 13vmin -1.5vmin 0 0 #f2f8ff; animation: drift linear infinite; }
.cloud.c1 { top: 10vh; width: 14vmin; animation-duration: 80s; animation-delay: -10s; }
.cloud.c2 { top: 24vh; width: 10vmin; animation-duration: 110s; animation-delay: -60s; opacity: .8; }
.cloud.c3 { top: 5vh; width: 18vmin; animation-duration: 140s; animation-delay: -95s; }
.cloud.c4 { top: 34vh; width: 8vmin; animation-duration: 95s; animation-delay: -30s; opacity: .7; }
@keyframes drift { from { transform: translateX(-30vmin); } to { transform: translateX(130vw); } }
.hills { position: absolute; left: 0; right: 0; bottom: 9vh; height: 14vh;
  background:
    linear-gradient(90deg, transparent 0 8%, #6fbf4a 8% 20%, transparent 20% 34%, #6fbf4a 34% 41%, transparent 41% 62%, #6fbf4a 62% 80%, transparent 80%) 0 0 / 100% 40% no-repeat,
    linear-gradient(90deg, #6fbf4a 0 3%, transparent 3% 5%, #6fbf4a 5% 26%, transparent 26% 30%, #6fbf4a 30% 48%, transparent 48% 55%, #6fbf4a 55% 86%, transparent 86% 90%, #6fbf4a 90%) 0 40% / 100% 30% no-repeat,
    linear-gradient(#6fbf4a, #6fbf4a) 0 70% / 100% 30% no-repeat;
  opacity: .55; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh;
  background:
    repeating-linear-gradient(90deg, var(--grass) 0 4vmin, var(--grass-hi) 4vmin 5vmin, var(--grass) 5vmin 9vmin, var(--grass-lo) 9vmin 10vmin) top / 100% 1.8vh no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3vmin, var(--grass) 3vmin 4vmin, transparent 4vmin 7vmin) 0 1.8vh / 100% 1vh no-repeat,
    repeating-linear-gradient(90deg, var(--dirt) 0 2vmin, var(--dirt-lo) 2vmin 3vmin, var(--dirt) 3vmin 6vmin, #9b7250 6vmin 7vmin) 0 0 / 100% 100%;
  border-top: 3px solid var(--grass-lo); }

/* ---------- Top bar ---------- */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); z-index: 20;
  display: flex; align-items: center; gap: var(--gap); padding: 0 clamp(10px, 2vmin, 22px);
  padding-top: env(safe-area-inset-top); }
#screen-title { flex: 1; font-size: clamp(20px, 3.8vmin, 38px); font-weight: 700; color: #fff;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-back { visibility: hidden; }
body.can-back #btn-back { visibility: visible; }
#hud { display: flex; gap: clamp(6px, 1.2vmin, 12px); align-items: center; }
.hud-chip { display: flex; align-items: center; gap: 6px; background: rgba(43, 29, 18, .78); color: #fff;
  font-weight: 700; font-size: clamp(15px, 2.6vmin, 24px); padding: 6px 12px; border: 3px solid var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.12); min-height: 42px; }
.hud-chip svg, .hud-chip img { width: 1.4em; height: 1.4em; }
#hud-streak:empty { display: none; }
#hud-level { flex-direction: column; align-items: stretch; gap: 3px; padding: 4px 10px; min-width: 96px; }
.lvl-num { font-size: .8em; text-align: center; line-height: 1; }
.xpbar { height: 10px; background: #1a120b; border: 2px solid #000; }
.xpfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #8cf25c 0 6px, #6ad13c 6px 8px); transition: width .8s steps(12); }
.hud-chip.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.25) rotate(-4deg); } 60% { transform: scale(.95); } }

/* ---------- Screen ---------- */
#screen { position: fixed; top: var(--top-h); left: 0; right: 0; bottom: 0; z-index: 10; overflow-y: auto; overflow-x: hidden;
  padding: var(--gap) clamp(12px, 3vmin, 40px) calc(9vh + var(--gap)); -webkit-overflow-scrolling: touch; }
#screen.full { padding-bottom: var(--gap); }
.screen-enter { animation: screenIn .35s steps(6) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.center-col { max-width: 1200px; margin: 0 auto; }

/* ---------- Pixel buttons ---------- */
.pix-btn { --c: var(--stone); --hi: var(--stone-hi); --lo: var(--stone-lo); --fg: #fff;
  position: relative; border: 4px solid var(--ink); background: var(--c); color: var(--fg);
  font-weight: 700; font-size: clamp(16px, 2.6vmin, 26px); padding: .55em 1em; cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  box-shadow: inset 4px 4px 0 var(--hi), inset -4px -6px 0 var(--lo), 0 6px 0 var(--ink);
  transform: translateY(0); transition: transform .06s, box-shadow .06s; display: inline-flex; align-items: center; justify-content: center; gap: .45em; }
.pix-btn:active, .pix-btn.pressed { transform: translateY(5px); box-shadow: inset 4px 4px 0 var(--hi), inset -4px -6px 0 var(--lo), 0 1px 0 var(--ink); }
.pix-btn:disabled { filter: grayscale(.8) brightness(.85); opacity: .7; }
.pix-btn svg { width: 1.3em; height: 1.3em; flex: none; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.pix-btn.green { --c: var(--grass); --hi: var(--grass-hi); --lo: var(--grass-lo); }
.pix-btn.wood { --c: var(--wood); --hi: var(--wood-hi); --lo: var(--wood-lo); }
.pix-btn.gold { --c: var(--gold); --hi: #ffe58a; --lo: var(--gold-lo); --fg: var(--ink); text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
.pix-btn.red { --c: var(--red); --hi: #ff8a72; --lo: var(--red-lo); }
.pix-btn.gem { --c: #36c9bf; --hi: #8ff5ee; --lo: var(--gem-lo); }
.pix-btn.blue { --c: var(--blue); --hi: #79a8ff; --lo: #2552a8; }
.pix-btn.purple { --c: var(--purple); --hi: #c48bf0; --lo: #6b3398; }
.pix-btn.big { font-size: clamp(20px, 3.6vmin, 36px); padding: .6em 1.2em; }
.pix-btn.small { font-size: clamp(14px, 2.1vmin, 20px); padding: .4em .7em; border-width: 3px;
  box-shadow: inset 3px 3px 0 var(--hi), inset -3px -4px 0 var(--lo), 0 4px 0 var(--ink); }
.pix-btn.small:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--hi), inset -3px -4px 0 var(--lo), 0 1px 0 var(--ink); }
.icon-btn { width: clamp(48px, 7.5vmin, 66px); height: clamp(48px, 7.5vmin, 66px); padding: 0; flex: none; }
.icon-btn svg { width: 60%; height: 60%; }
.pix-btn.on { --c: var(--grass); --hi: var(--grass-hi); --lo: var(--grass-lo); }

/* ---------- Panels ---------- */
.panel { background: var(--paper); border: 4px solid var(--ink); padding: clamp(12px, 2.4vmin, 26px);
  box-shadow: inset 0 0 0 4px #f3e2bf, 0 8px 0 rgba(43,29,18,.45); }
.panel.wood { background: repeating-linear-gradient(180deg, var(--wood) 0 3.4vmin, var(--wood-lo) 3.4vmin calc(3.4vmin + 3px));
  box-shadow: inset 4px 4px 0 var(--wood-hi), inset -4px -4px 0 var(--wood-lo), 0 8px 0 rgba(43,29,18,.45); color: #fff; }
.panel.stone { background-color: var(--stone); box-shadow: inset 4px 4px 0 var(--stone-hi), inset -4px -4px 0 var(--stone-lo), 0 8px 0 rgba(43,29,18,.45); color: #fff; }
.panel h2, .panel h3 { margin: 0 0 .5em; }
h2.pix-title { font-size: clamp(22px, 4vmin, 40px); color: #fff; margin: .2em 0 .6em;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.muted { opacity: .7; }
.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.center { justify-content: center; }
.spacer { flex: 1; }

/* ---------- Home ---------- */
.home-hero { display: flex; align-items: center; gap: clamp(10px, 3vmin, 40px); justify-content: center; margin: 1vmin 0 3vmin; }
.logo { font-size: clamp(38px, 9vmin, 96px); font-weight: 700; line-height: .95; color: #fff; letter-spacing: 2px;
  text-shadow: 0 .08em 0 var(--grass-lo), .06em .14em 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink); }
.logo span { display: inline-block; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.12em); } }
.bubble { position: relative; background: #fff; border: 4px solid var(--ink); padding: .6em .9em; font-size: clamp(16px, 2.8vmin, 28px);
  font-weight: 700; max-width: 40ch; box-shadow: 0 6px 0 rgba(43,29,18,.35); animation: pop .5s steps(5) both .3s; }
.bubble::after { content: ""; position: absolute; left: -20px; bottom: 18px; width: 16px; height: 16px; background: #fff;
  border-left: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: skewY(-35deg); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.08); } }
.mascot { width: clamp(90px, 18vmin, 190px); height: auto; animation: bob 1.6s steps(4) infinite; filter: drop-shadow(0 8px 0 rgba(43,29,18,.3)); }
.mascot.small { width: clamp(64px, 11vmin, 120px); }
.mascot.jump { animation: jump .6s steps(6); }
.mascot.sad { animation: sad .6s steps(6); }
@keyframes bob { 50% { transform: translateY(-6%); } }
@keyframes jump { 40% { transform: translateY(-35%) rotate(-8deg) scale(1.05); } 70% { transform: translateY(0) scale(1.1, .9); } }
@keyframes sad { 20%, 60% { transform: translateX(-6%) rotate(-4deg); } 40%, 80% { transform: translateX(6%) rotate(4deg); } }
.mascot .eye { animation: blink 4s steps(1) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes blink { 0%, 94% { transform: scaleY(1); } 95%, 99% { transform: scaleY(.15); } }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 26vmin, 260px), 1fr)); gap: clamp(12px, 2.6vmin, 30px); }
.tile { position: relative; border: 5px solid var(--ink); cursor: pointer; padding: clamp(14px, 3vmin, 30px) 12px;
  min-height: clamp(150px, 30vmin, 290px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vmin;
  color: #fff; font-weight: 700; font-size: clamp(20px, 3.6vmin, 36px); text-align: center; text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  background-size: 64px 64px; image-rendering: pixelated;
  box-shadow: inset 6px 6px 0 rgba(255,255,255,.25), inset -6px -8px 0 rgba(0,0,0,.28), 0 10px 0 var(--ink);
  animation: tileIn .5s steps(5) both; transition: transform .08s; }
.tile:active { transform: translateY(6px) scale(.98); box-shadow: inset 6px 6px 0 rgba(255,255,255,.25), inset -6px -8px 0 rgba(0,0,0,.28), 0 3px 0 var(--ink); }
.tile .ic { width: clamp(64px, 13vmin, 130px); height: clamp(64px, 13vmin, 130px); animation: float 2.4s ease-in-out infinite; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.35)); }
.tile:nth-child(2) .ic { animation-delay: -.6s; } .tile:nth-child(3) .ic { animation-delay: -1.2s; } .tile:nth-child(4) .ic { animation-delay: -1.8s; }
.tile .sub { font-size: .55em; opacity: .95; }
.tile .badge { position: absolute; top: -14px; right: -10px; background: var(--red); border: 3px solid var(--ink); font-size: .5em; padding: 4px 8px; transform: rotate(6deg); animation: badge 1s steps(2) infinite; }
@keyframes badge { 50% { transform: rotate(-4deg) scale(1.08); } }
@keyframes tileIn { from { transform: translateY(40px) scale(.7); opacity: 0; } 70% { transform: translateY(-6px) scale(1.03); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(-3deg); } }

.parent-lock-row { display: flex; justify-content: flex-end; margin-top: var(--gap); }

/* ---------- Word chips & lists ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: "Lecture"; font-weight: 700; font-size: clamp(20px, 3.4vmin, 34px); background: #fff; border: 3px solid var(--ink); padding: .15em .55em;
  box-shadow: 0 4px 0 rgba(43,29,18,.35); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; animation: pop .4s steps(4) both; }
.chip .star { width: .8em; height: .8em; }
.chip:active { transform: translateY(3px); }
.list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 40vmin, 420px), 1fr)); gap: var(--gap); }
.list-card { cursor: pointer; animation: tileIn .45s steps(5) both; }
.list-card .title { font-size: clamp(18px, 3vmin, 30px); font-weight: 700; }
.progress { height: 18px; border: 3px solid var(--ink); background: #3b2a1c; margin-top: 10px; }
.progress > div { height: 100%; background: repeating-linear-gradient(90deg, var(--gem) 0 10px, #39c4ba 10px 13px); transition: width .6s steps(10); }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 24vmin, 230px), 1fr)); gap: var(--gap); }
.game-tile { min-height: clamp(120px, 21vmin, 200px); font-size: clamp(16px, 2.7vmin, 26px); }
.game-tile .ic { width: clamp(48px, 9vmin, 90px); height: clamp(48px, 9vmin, 90px); }

/* ---------- Game common ---------- */
.game { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vmin, 26px); min-height: 100%; }
.game-progress { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.game-progress i { width: clamp(16px, 2.6vmin, 26px); height: clamp(16px, 2.6vmin, 26px); border: 3px solid var(--ink); background: rgba(255,255,255,.5); }
.game-progress i.done { background: var(--gem); box-shadow: inset -3px -3px 0 var(--gem-lo); animation: pop .4s steps(4); }
.game-progress i.cur { background: var(--gold); animation: badge .8s steps(2) infinite; }
.prompt { font-size: clamp(18px, 3.2vmin, 32px); font-weight: 700; color: #fff; text-align: center;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.word-big { font-family: "Lecture"; font-weight: 700; font-size: clamp(44px, 11vmin, 120px); background: #fff; border: 5px solid var(--ink);
  padding: .1em .5em; box-shadow: 0 8px 0 rgba(43,29,18,.4); letter-spacing: .03em; animation: pop .5s steps(5) both; position: relative; }
.word-big.covered::after { content: ""; position: absolute; inset: -5px; background: var(--dirt);
  background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.15) 18px 22px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,.12) 18px 22px);
  border: 5px solid var(--ink); animation: dropIn .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes dropIn { from { transform: translateY(-120%); } }
.syl-a { color: var(--syl-a); } .syl-b { color: var(--syl-b); }
.speak-btn { --c: var(--gold); --hi: #ffe58a; --lo: var(--gold-lo); }

.slots { display: flex; gap: clamp(4px, 1vmin, 10px); flex-wrap: wrap; justify-content: center; }
.slot { width: clamp(42px, 8vmin, 84px); height: clamp(52px, 9.5vmin, 100px); border: 4px dashed rgba(43,29,18,.6); background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; font-family: "Lecture"; font-weight: 700; font-size: clamp(28px, 6vmin, 64px); }
.slot.filled { border-style: solid; border-color: var(--ink); background: #fff; animation: pop .25s steps(3); }
.slot.space { border: none; background: transparent; width: clamp(14px, 2vmin, 24px); }
.slot.bad { background: #ffb3a6; } .slot.good { background: #b8f5a0; }
.slot.cursor { border-color: var(--gold-lo); border-style: solid; animation: cursor 1s steps(2) infinite; }
@keyframes cursor { 50% { background: #fff6c8; } }

.letter-blocks { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vmin, 16px); justify-content: center; max-width: 1000px; }
.lblock { width: clamp(56px, 10vmin, 104px); height: clamp(56px, 10vmin, 104px); border: 4px solid var(--ink); cursor: pointer;
  font-family: "Lecture"; font-weight: 700; font-size: clamp(30px, 6.4vmin, 64px); color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  background-size: cover; image-rendering: pixelated; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), inset -4px -5px 0 rgba(0,0,0,.3), 0 6px 0 var(--ink); animation: blockDrop .5s cubic-bezier(.3,1.5,.5,1) both; }
.lblock:active { transform: translateY(4px); }
.lblock.used { visibility: hidden; }
@keyframes blockDrop { from { transform: translateY(-60vh) rotate(20deg); } }

.choices { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vmin, 22px); justify-content: center; }
.choice { font-family: "Lecture"; font-weight: 700; font-size: clamp(26px, 5.4vmin, 56px); min-width: clamp(90px, 15vmin, 160px); }
.ore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.6vmin, 30px); width: min(100%, 900px); }
.ore { position: relative; height: clamp(110px, 20vmin, 200px); border: 5px solid var(--ink); cursor: pointer; background-size: 25% auto; image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 6px 6px 0 rgba(255,255,255,.25), inset -6px -8px 0 rgba(0,0,0,.3), 0 8px 0 var(--ink);
  animation: tileIn .45s steps(5) both; overflow: hidden; }
.ore span { font-family: "Lecture"; font-weight: 700; font-size: clamp(26px, 5.6vmin, 58px); background: rgba(255,255,255,.92); border: 3px solid var(--ink); padding: 0 .4em; }
.ore.wrong { animation: shake .4s; filter: sepia(1) saturate(4) hue-rotate(-30deg) brightness(.85); pointer-events: none; }
.ore .crack { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(45deg, transparent 46%, var(--ink) 46% 50%, transparent 50%) 30% 20% / 40% 40% no-repeat,
  linear-gradient(-45deg, transparent 46%, var(--ink) 46% 50%, transparent 50%) 60% 60% / 45% 45% no-repeat,
  linear-gradient(80deg, transparent 47%, var(--ink) 47% 51%, transparent 51%) 20% 75% / 30% 40% no-repeat; opacity: 0; }
.ore.mined .crack { animation: crack .5s steps(3) forwards; }
.ore.mined { animation: mined .6s steps(6) .45s forwards; }
@keyframes crack { to { opacity: 1; } }
@keyframes mined { to { transform: scale(.2) rotate(15deg); opacity: 0; } }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(5px); } }

#screen.typing .mascot-box { display: none; }
#screen.typing .game { gap: clamp(6px, 1.3vh, 16px); }
#screen.typing .word-big { font-size: clamp(30px, 7.5vh, 96px); }
#screen.typing .slot { height: clamp(40px, 7.2vh, 96px); width: clamp(32px, 6vh, 80px); font-size: clamp(24px, 5vh, 60px); }
#screen.typing .key { height: clamp(36px, 6.3vh, 76px); }
#screen.typing .prompt { font-size: clamp(16px, 2.8vh, 30px); }
#screen.typing .kbd { gap: clamp(4px, .8vh, 9px); padding: clamp(6px, 1.1vh, 14px); }

/* ---------- Keyboard ---------- */
.kbd { width: min(100%, 1100px); display: flex; flex-direction: column; gap: clamp(5px, .9vmin, 9px); padding: clamp(8px, 1.4vmin, 14px);
  background: var(--stone-lo); border: 4px solid var(--ink); box-shadow: inset 4px 4px 0 var(--stone), 0 6px 0 rgba(43,29,18,.4); }
.kbd .krow { display: flex; gap: clamp(4px, .8vmin, 8px); justify-content: center; }
.key { flex: 1 1 0; max-width: 92px; height: clamp(44px, 7.4vmin, 76px); border: 3px solid var(--ink); background: #e9e2d2; color: var(--ink);
  font-family: "Lecture"; font-weight: 700; font-size: clamp(20px, 3.8vmin, 38px); box-shadow: inset 3px 3px 0 #fff, inset -3px -4px 0 #b9ad95, 0 4px 0 var(--ink); padding: 0; }
.key:active, .key.pressed { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fff, inset -3px -4px 0 #b9ad95, 0 1px 0 var(--ink); }
.key.acc { background: #ffe9b8; }
.key.wide { flex: 2 1 0; max-width: 180px; font-family: inherit; font-size: clamp(16px, 2.8vmin, 28px); }
.key.ok { background: var(--grass); color: #fff; box-shadow: inset 3px 3px 0 var(--grass-hi), inset -3px -4px 0 var(--grass-lo), 0 4px 0 var(--ink); }
.key.del { background: var(--red); color: #fff; box-shadow: inset 3px 3px 0 #ff8a72, inset -3px -4px 0 var(--red-lo), 0 4px 0 var(--ink); }

/* ---------- Rain game ---------- */
.rain-area { position: relative; width: 100%; height: calc(100vh - var(--top-h) - 9vh - 120px); min-height: 300px; overflow: hidden; }
.drop { position: absolute; top: 0; padding: .15em .5em; font-family: "Lecture"; font-weight: 700; font-size: clamp(22px, 4.4vmin, 44px);
  background: #fff; border: 4px solid var(--ink); cursor: pointer; box-shadow: 0 5px 0 rgba(43,29,18,.4); will-change: transform; white-space: nowrap; }
.drop.hit { pointer-events: none; animation: mined .35s steps(4) forwards; background: #b8f5a0; }
.drop.miss { pointer-events: none; animation: shake .4s, fadeout .6s .3s forwards; background: #ffb3a6; }
@keyframes fadeout { to { opacity: 0; } }
.hearts { display: flex; gap: 6px; } .hearts svg { width: clamp(28px, 4.4vmin, 44px); height: auto; }
.hearts svg.lost { filter: grayscale(1) brightness(.6); animation: shake .4s; }
.target-banner { font-family: "Lecture"; font-weight: 700; font-size: clamp(22px, 4vmin, 40px); background: var(--gold); border: 4px solid var(--ink); padding: .1em .6em; }

/* ---------- FX ---------- */
#fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 14px; height: 14px; will-change: transform, opacity; }
.flygem { position: absolute; width: 40px; height: 40px; will-change: transform; z-index: 61; }
.float-text { position: absolute; font-weight: 700; font-size: clamp(26px, 5vmin, 50px); color: #fff; white-space: nowrap;
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); animation: floatUp 1.1s ease-out forwards; }
@keyframes floatUp { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -20px) scale(1.15); opacity: 1; } to { transform: translate(-50%, -120px) scale(1); opacity: 0; } }

/* ---------- Modals ---------- */
#modal-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.modal-back { position: absolute; inset: 0; background: rgba(20, 12, 6, .62); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fadein .2s; padding: 16px; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: min(94vw, 760px); max-height: 92vh; overflow: auto; animation: pop .35s steps(5); }
.modal.wide { width: min(96vw, 1100px); }
.modal h2 { font-size: clamp(22px, 4vmin, 40px); margin-top: 0; }
.result-stars { display: flex; gap: 2vmin; justify-content: center; margin: 1vmin 0 2vmin; }
.result-stars svg { width: clamp(60px, 12vmin, 120px); height: auto; opacity: .25; filter: grayscale(1); }
.result-stars svg.on { opacity: 1; filter: none; animation: starIn .6s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes starIn { from { transform: scale(0) rotate(-120deg); } }
.rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255,230,120,.35) 0 10deg, transparent 10deg 20deg); animation: spin 12s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.levelup { position: relative; overflow: hidden; text-align: center; }
.levelup > *:not(.rays) { position: relative; }
.big-num { font-size: clamp(60px, 16vmin, 160px); font-weight: 700; color: var(--gold); text-shadow: 5px 5px 0 var(--ink); line-height: 1; }

#toast-root { position: fixed; left: 50%; bottom: calc(9vh + 20px); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; border: 3px solid #000; padding: 10px 18px; font-size: clamp(16px, 2.4vmin, 22px); animation: pop .3s steps(4); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: clamp(16px, 2.4vmin, 22px); font-weight: 700; }
.field input, .field textarea, .field select { font-size: clamp(18px, 2.8vmin, 26px); padding: 10px 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); width: 100%; }
.field textarea { min-height: 30vh; resize: vertical; line-height: 1.4; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--gap); }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 3px dashed rgba(43,29,18,.25); font-size: clamp(16px, 2.4vmin, 22px); }
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 700; }
.list-row .s { font-family: "Lecture"; opacity: .75; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Gate ---------- */
.gate-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.gate-keys .key { max-width: none; height: clamp(54px, 9vmin, 80px); }
.gate-display { font-family: "Lecture"; font-weight: 700; font-size: clamp(30px, 6vmin, 56px); text-align: center; background: #fff; border: 4px solid var(--ink); margin: 10px auto; max-width: 360px; min-height: 1.5em; }

/* ---------- Fluence ---------- */
.sheet-type { display: inline-flex; align-items: center; gap: 6px; font-size: .8em; padding: 2px 8px; border: 3px solid var(--ink); color: #fff; }
.t-sons { background: var(--purple); } .t-mots { background: var(--blue); } .t-phrases { background: #e08a1e; } .t-texte { background: var(--grass); }
.reader-wrap { display: flex; flex-direction: column; gap: var(--gap); height: 100%; }
.reader-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reader-tools .pix-btn.small { font-size: clamp(15px, 2.4vmin, 24px); padding: .4em .6em; }
.reader { flex: 1; min-height: 30vh; overflow: auto; background: var(--paper); border: 5px solid var(--ink); position: relative;
  padding: clamp(14px, 3vmin, 36px); font-family: "Lecture"; color: #1b140e; line-height: 1.9; box-shadow: inset 0 0 0 5px #f3e2bf, 0 8px 0 rgba(43,29,18,.4); }
.reader .w { cursor: pointer; padding: 0 .04em; border-radius: 0; transition: background .1s; }
.reader .w.hl { background: #ffe066; box-shadow: 0 0 0 3px #ffe066; }
.reader .w.done { color: #6d8f5a; }
.reader.grid-mode { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vmin, 22px); align-content: flex-start; line-height: 1.3; }
.reader.grid-mode .item { border: 4px solid var(--ink); background: #fff; padding: .15em .55em; cursor: pointer; box-shadow: 0 5px 0 rgba(43,29,18,.35); }
.reader.grid-mode .item.hl { background: #ffe066; transform: translateY(-4px) scale(1.06); }
.reader .line { display: block; padding: .1em .3em; transition: opacity .2s, background .2s; }
.reader.ruler .line { opacity: .18; }
.reader.ruler .line.focus { opacity: 1; background: #fff3b0; outline: 4px solid var(--gold); }
.reader.ruler.grid-mode .item { opacity: .25; } .reader.ruler.grid-mode .item.focus { opacity: 1; outline: 4px solid var(--gold); }
.chrono-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
.chrono { font-weight: 700; font-size: clamp(36px, 8vmin, 84px); color: #fff; background: var(--ink); border: 4px solid #000; padding: 0 .4em; min-width: 4.2em; text-align: center;
  box-shadow: inset 0 -6px 0 rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.chrono.running { color: #8cf25c; }
.rec-dot { width: 22px; height: 22px; background: var(--red); border: 3px solid var(--ink); animation: blinkrec 1s steps(2) infinite; }
@keyframes blinkrec { 50% { opacity: .2; } }
.countdown { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.countdown span { font-size: clamp(120px, 40vmin, 400px); font-weight: 700; color: #fff; text-shadow: 10px 10px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink); animation: cd .9s steps(6) both; }
@keyframes cd { from { transform: scale(2.5); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } to { transform: scale(.6); opacity: 0; } }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 8px; background: rgba(43,29,18,.08); border: 3px solid var(--ink); }
.bars .bar { flex: 1; max-width: 46px; background: var(--blue); border: 3px solid var(--ink); position: relative; min-height: 8px; animation: grow .6s steps(6) both; transform-origin: bottom; }
.bars .bar.best { background: var(--gold); }
.bars .bar span { position: absolute; top: -1.4em; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; white-space: nowrap; }
@keyframes grow { from { transform: scaleY(0); } }
.photo-view { width: 100%; height: auto; border: 4px solid var(--ink); display: block; }
.spinner { width: 64px; height: 64px; margin: 20px auto; background: var(--grass); border: 4px solid var(--ink); animation: spinblock 1s steps(8) infinite; }
@keyframes spinblock { to { transform: rotate(360deg); } }

/* ---------- World builder ---------- */
.world-wrap { display: flex; flex-direction: column; gap: var(--gap); align-items: center; }
.world-grid { display: grid; border: 5px solid var(--ink); background: rgba(185, 227, 251, .55); touch-action: none; image-rendering: pixelated;
  background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); }
.world-grid .cell { background-size: cover; image-rendering: pixelated; }
.world-grid .cell.placed { animation: pop .2s steps(3); }
.palette { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 1100px; }
.pal { width: clamp(56px, 9vmin, 84px); height: clamp(56px, 9vmin, 84px); border: 4px solid var(--ink); background-size: cover; image-rendering: pixelated; position: relative; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink); display: flex; align-items: flex-end; justify-content: center; }
.pal.sel { outline: 5px solid var(--gold); outline-offset: 2px; transform: translateY(-4px); }
.pal.locked { filter: saturate(.45) brightness(.55); }
.pal .price { background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 1px 4px; margin-bottom: -10px; display: flex; align-items: center; gap: 2px; }
.pal .price svg { width: 14px; height: 14px; }

@media (orientation: portrait) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ore-grid { grid-template-columns: 1fr; }
  .home-hero { flex-direction: column; }
  .bubble::after { display: none; }
}
@media (max-height: 520px) {
  .logo { font-size: 34px; }
  .mascot { width: 70px; }
}

/* ---------- Trading cards ---------- */
.booster-bar { display: flex; align-items: center; gap: clamp(14px, 3vmin, 36px); flex-wrap: wrap; }
.pack-mini { width: clamp(80px, 13vmin, 130px); flex: none; }
.pack { position: relative; aspect-ratio: 63 / 92; width: 100%; border: 4px solid var(--ink); overflow: hidden;
  background: linear-gradient(135deg, #9b59d0 0%, #3d7be5 45%, #4fe3d8 100%); box-shadow: inset 4px 4px 0 rgba(255,255,255,.35), inset -4px -6px 0 rgba(0,0,0,.3), 0 8px 0 rgba(43,29,18,.45); }
.pack-top { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: repeating-linear-gradient(90deg, #c8921c 0 8%, #f5c542 8% 16%); border-bottom: 3px solid var(--ink); }
.pack-body { position: absolute; inset: 12% 8% 6%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; }
.pack-logo { width: 46%; animation: bob 1.6s steps(4) infinite; }
.pack-title { font-weight: 700; color: #fff; font-size: calc(var(--pw, 120px) * .13); line-height: 1; text-shadow: 3px 3px 0 var(--ink); }
.pack-mini .pack { --pw: clamp(80px, 13vmin, 130px); }
.pack-sub { background: var(--gold); border: 3px solid var(--ink); font-weight: 700; padding: 0 .4em; font-size: calc(var(--pw, 120px) * .09); }
.pack-shine { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); animation: shine 2.6s ease-in-out infinite; z-index: 2; pointer-events: none; }
@keyframes shine { from { transform: translateX(-60%); } 60%, to { transform: translateX(60%); } }

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 17vmin, 180px), 1fr)); gap: clamp(10px, 1.8vmin, 18px); margin-top: var(--gap); }
.album .tcard { animation: pop .35s steps(4) both; cursor: pointer; }
.tcard { --w: 100%; position: relative; width: 100%; aspect-ratio: 63 / 88; container-type: inline-size; transition: transform .15s; transform-style: preserve-3d; }
.tc-in { position: absolute; inset: 0; border: 3px solid var(--ink); padding: 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; overflow: hidden;
  background: var(--f); box-shadow: inset 0 0 0 2.5cqw var(--f), inset 0 0 0 3.5cqw var(--f2), 0 5px 0 rgba(43,29,18,.4); }
.tcard .tc-in > * { position: relative; z-index: 1; }
.tc-top { display: flex; align-items: center; gap: 2cqw; background: rgba(255,255,255,.88); border: 2px solid var(--ink); padding: 1.5cqw 3cqw; margin: 2cqw 2cqw 0; }
.tc-name { flex: 1; font-weight: 700; font-size: 9cqw; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pv { font-size: 6cqw; font-weight: 700; color: var(--red-lo); white-space: nowrap; } .tc-pv b { font-size: 1.35em; margin-left: 1cqw; }
.tc-el { width: 9cqw; height: 9cqw; display: inline-flex; flex: none; }
.tc-art { margin: 0 2cqw; flex: 1 1 auto; min-height: 0; border: 2px solid var(--ink); background: var(--bg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 50% 70%, rgba(255,255,255,.75) 0 30%, transparent 31%), repeating-linear-gradient(0deg, transparent 0 8cqw, rgba(0,0,0,.05) 8cqw 9cqw); }
.tc-art img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1.5cqw 2cqw 0 rgba(0,0,0,.25)); }
.tc-meta { font-size: 5.2cqw; text-align: center; color: #fff; text-shadow: 1px 1px 0 var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; }
.tc-atk { display: flex; align-items: center; gap: 2cqw; background: rgba(255,255,255,.9); border: 2px solid var(--ink); margin: 0 2cqw; padding: 1.5cqw 3cqw; font-size: 6.8cqw; }
.tc-atk b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cost { display: inline-flex; } .tc-cost svg { width: 7cqw; height: 7cqw; }
.tc-dmg { font-weight: 700; font-size: 1.4em; }
.tc-txt { font-family: "Lecture"; font-style: italic; font-size: 5.4cqw; line-height: 1.2; background: rgba(255,255,255,.75); border: 2px solid var(--ink); margin: 0 2cqw 2cqw; padding: 1.5cqw 3cqw; min-height: 2.6em; }
.tc-count { position: absolute; top: -8px; right: -8px; z-index: 3; background: var(--ink); color: #fff; font-weight: 700; border: 2px solid #000; padding: 1px 6px; font-size: clamp(12px, 1.8vmin, 16px); }
.tc-new { position: absolute; top: 47%; left: -6px; z-index: 3; background: var(--red); color: #fff; font-weight: 700; border: 3px solid var(--ink); padding: 1px 6px; font-size: clamp(11px, 6cqw, 22px); transform: rotate(-8deg); animation: badge 1s steps(2) infinite; }

/* holo for rare+ */
.tcard.r-r .tc-art::after, .tcard.r-ur .tc-art::after, .tcard.r-or .tc-in::after { content: ""; position: absolute; inset: -30%; pointer-events: none; z-index: 2; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 55%); animation: shine 3s ease-in-out infinite; }
.tcard.r-ur .tc-in { background: linear-gradient(135deg, #ff8fb1, #f5c542, #8fdc5c, #7ec8f5, #c48bf0, #ff8fb1); background-size: 300% 300%; animation: holo 5s linear infinite; }
.tcard.r-ur .tc-in { box-shadow: inset 0 0 0 3.5cqw rgba(255,255,255,.25), 0 5px 0 rgba(43,29,18,.4); }
.tcard.r-ur .tc-art { background-image: linear-gradient(135deg, rgba(255,143,177,.5), rgba(126,200,245,.5), rgba(143,220,92,.5)); }
@keyframes holo { to { background-position: 300% 300%; } }
/* golden */
.tcard.r-or .tc-in { background: linear-gradient(135deg, #8a5a10, #f5c542 20%, #fff2a8 35%, #c8921c 50%, #ffe58a 65%, #b37a12 80%, #f5c542); background-size: 250% 250%; animation: holo 4s linear infinite;
  box-shadow: inset 0 0 0 3.5cqw rgba(255,240,160,.35), 0 5px 0 rgba(43,29,18,.4), 0 0 18px rgba(245,197,66,.8); }
.tcard.r-or .tc-art { background: radial-gradient(circle at 50% 60%, #fff8d0 0 30%, #f5c542 60%, #c8921c 100%); }
.tcard.r-or .tc-top, .tcard.r-or .tc-atk, .tcard.r-or .tc-txt { background: rgba(255,248,214,.92); }
.tcard.r-or .tc-meta { color: #fff8d0; }
.tcard.r-or::before { content: "✦"; position: absolute; z-index: 4; top: -6%; right: 8%; font-size: 14cqw; color: #fff8b0; text-shadow: 0 0 6px #f5c542; animation: twinkle 1.4s steps(3) infinite; }
.tcard.r-or::after { content: "✦"; position: absolute; z-index: 4; bottom: 10%; left: -4%; font-size: 10cqw; color: #fff8b0; text-shadow: 0 0 6px #f5c542; animation: twinkle 1.4s steps(3) infinite .7s; }
@keyframes twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
/* missing */
.tcard.missing .tc-in { background: rgba(43,29,18,.35); border-style: dashed; box-shadow: none; align-items: center; justify-content: center; }
.tcard.missing .tc-art { border: none; background: transparent; flex: none; width: 80%; aspect-ratio: 1; }
.tcard.missing img { filter: brightness(0) opacity(.45); }
.tc-num { color: #fff; font-weight: 700; font-size: 10cqw; text-shadow: 2px 2px 0 var(--ink); }
/* back */
.tcard.back .tc-in { background: repeating-linear-gradient(45deg, #3d7be5 0 6cqw, #2552a8 6cqw 12cqw); box-shadow: inset 0 0 0 4cqw #f5c542, inset 0 0 0 5.5cqw var(--ink); align-items: center; justify-content: center; }
.tc-back-logo { display: flex; flex-direction: column; align-items: center; gap: 4cqw; color: #fff; font-weight: 700; font-size: 11cqw; text-align: center; line-height: 1; text-shadow: 3px 3px 0 var(--ink); }
.tc-back-logo svg { width: 45cqw; }

.zoom-modal { width: auto; background: transparent; border: none; box-shadow: none; padding: 0; overflow: visible; }
.zoom-card { width: min(78vw, 46vh, 420px); perspective: 900px; margin: 0 auto; }

/* booster stage */
.booster-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vmin, 22px); min-height: 100%; }
.booster-stage.golden-flash::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle, rgba(255,240,150,.9), rgba(245,197,66,.4) 50%, transparent 75%); animation: flash 1.6s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.pack-big { width: min(46vw, 40vh, 320px); cursor: pointer; animation: packIn .7s cubic-bezier(.3,1.5,.5,1) both, packIdle 2s ease-in-out .7s infinite; }
.pack-big .pack { --pw: min(46vw, 40vh, 320px); }
.pack-big.wiggle { animation: wiggle .45s steps(6); }
.pack-big.torn .pack-top { animation: tear .6s ease-in forwards; }
.pack-big.torn { animation: packOut .7s ease-in forwards; }
@keyframes packIn { from { transform: translateY(60vh) rotate(-20deg) scale(.5); } }
@keyframes packIdle { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes wiggle { 20% { transform: rotate(-10deg) scale(1.05); } 40% { transform: rotate(10deg) scale(1.08); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
@keyframes tear { to { transform: translate(60%, -200%) rotate(40deg); } }
@keyframes packOut { 40% { transform: scale(1.15); } to { transform: translateY(50vh) scale(.6); opacity: 0; } }
.reveal-zone { position: relative; width: min(60vw, 46vh, 360px); aspect-ratio: 63 / 88; }
.reveal-zone:empty { display: none; }
.flip { position: absolute; inset: 0; perspective: 1200px; transform: translate(calc(var(--k) * 6px), calc(var(--k) * 6px)); cursor: pointer; animation: dealIn .4s ease-out both; }
@keyframes dealIn { from { transform: translateY(-40vh) rotate(-15deg); opacity: 0; } }
.flip-in { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.flip.flipped .flip-in { transform: rotateY(180deg) scale(1.04); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .front-face { transform: rotateY(180deg); }
.flip.top { z-index: 5; }
.flip.away { animation: away .35s ease-in forwards; }
@keyframes away { to { transform: translate(0, 60vh) scale(.3) rotate(12deg); opacity: 0; } }
.pulled-row { display: flex; gap: clamp(6px, 1.4vmin, 14px); justify-content: center; flex-wrap: wrap; }
.mini-card { width: clamp(70px, 11vmin, 120px); animation: pop .35s steps(4) both; cursor: pointer; }
.pulled-row.done .mini-card { width: clamp(110px, 17vmin, 190px); }

.zoom-card .tc-atk b { white-space: normal; }

/* complex sounds */
.snd { border-bottom: .09em solid currentColor; padding: 0 .02em; border-radius: 0; }
.snd-ou { color: #1e9e52; background: rgba(63,217,122,.14); }
.snd-o { color: #d9731a; background: rgba(255,157,46,.15); }
.snd-oi { color: #8e3fc9; background: rgba(155,89,208,.13); }
.snd-an { color: #b5462f; background: rgba(229,83,61,.12); }
.snd-on { color: #1f5fd1; background: rgba(61,123,229,.13); }
.snd-in { color: #d13f86; background: rgba(255,143,177,.2); }
.snd-oin { color: #7a4fd1; background: rgba(155,89,208,.13); }
.snd-ai { color: #a77b00; background: rgba(245,197,66,.22); }
.snd-eu { color: #13878a; background: rgba(79,227,216,.18); }
.snd-ill { color: #6b3398; background: rgba(155,89,208,.16); }
.snd-ch, .snd-gn, .snd-ph, .snd-qu { color: #c0392b; background: rgba(229,83,61,.1); }
.snd-mute { color: #b3aaa0; }

.pin-dots { display: flex; gap: 16px; justify-content: center; margin: 16px 0; }
.pin-dots i { width: 28px; height: 28px; border: 4px solid var(--ink); background: #fff; }
.pin-dots i.on { background: var(--grass); box-shadow: inset -4px -4px 0 var(--grass-lo); animation: pop .2s steps(3); }
#hud-me:empty { display: none; }
#hud-me .av { width: 1.6em; height: 1.6em; }
.av { display: inline-flex; align-items: center; justify-content: center; }
.av img, .av svg { width: 100%; height: 100%; image-rendering: pixelated; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 15vmin, 150px), 1fr)); gap: var(--gap); width: min(100%, 1000px); }
.avatar-pick { aspect-ratio: 1; border: 5px solid var(--ink); background: rgba(255,255,255,.85); cursor: pointer; padding: 10%; box-shadow: 0 6px 0 rgba(43,29,18,.4); animation: tileIn .45s steps(5) both; }
.avatar-pick.sel { background: #fff3b0; outline: 6px solid var(--gold); transform: translateY(-6px) scale(1.06); }
.avatar-pick .av { width: 100%; height: 100%; }
.avatar-pick.sel .av { animation: jump .6s steps(6) infinite; }
.name-display { font-family: "Lecture"; font-weight: 700; font-size: clamp(36px, 8vmin, 80px); background: #fff; border: 5px solid var(--ink); min-width: 6em; min-height: 1.4em; text-align: center; padding: 0 .4em; box-shadow: 0 8px 0 rgba(43,29,18,.4); }
.name-display::after { content: "▌"; color: var(--gold-lo); animation: blinkrec 1s steps(2) infinite; }

/* =====================================================================
   THEME : CENTRE ÉQUESTRE (kawaii, vectoriel, pastel)
   ===================================================================== */
@font-face { font-family: "Kawaii"; src: url(../fonts/fredoka-latin-500-normal.woff2) format("woff2"); font-weight: 400 500; }
@font-face { font-family: "Kawaii"; src: url(../fonts/fredoka-latin-700-normal.woff2) format("woff2"); font-weight: 600 800; }

body.theme-poney {
  --ink: #6b4a5a; --ink-soft: #8a6a7a;
  --grass: #8fd49b; --grass-hi: #b8ebc0; --grass-lo: #5fae6e;
  --stone: #c9b8f0; --stone-hi: #e2d8fb; --stone-lo: #a08cd8;
  --wood: #ffb38f; --wood-hi: #ffd2bc; --wood-lo: #e8916a;
  --gold: #ffd966; --gold-lo: #e0b23a;
  --red: #ff8fa3; --red-lo: #e06a80;
  --blue: #8fc4f5; --purple: #c49bf0; --paper: #fffafc;
  --syl-a: #3d6fe0; --syl-b: #e0457a;
  font-family: "Kawaii", system-ui, sans-serif; color: var(--ink);
  background: #ffe6f2;
}
.theme-poney .key.wide { font-family: "Kawaii"; }
.theme-poney *, .theme-poney *::before, .theme-poney *::after { animation-timing-function: cubic-bezier(.3, 1.3, .6, 1); }
.theme-poney .mascot, .theme-poney .tile .ic, .theme-poney .pack-logo, .theme-poney .logo span, .theme-poney .badge, .theme-poney .pack-big,
.theme-poney .sun, .theme-poney .slot.cursor, .theme-poney .rec-dot, .theme-poney .tc-new { animation-timing-function: ease-in-out; }
.theme-poney .rays, .theme-poney .pack-shine, .theme-poney .cloud, .theme-poney .spinner, .theme-poney .tc-in, .theme-poney .tc-art::after, .theme-poney .tc-in::after { animation-timing-function: linear; }

/* background: pastel sky, round clouds, soft hills, white fence */
.theme-poney #world-bg { background: linear-gradient(180deg, #ffd6ea 0%, #ffe9f2 35%, #e6f4ff 70%, #f0fff4 100%); }
.theme-poney .sun { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff8c8, #ffe27a); box-shadow: 0 0 0 1.6vmin rgba(255, 236, 150, .5), 0 0 6vmin 2vmin rgba(255, 220, 120, .5); }
.theme-poney .sun::before, .theme-poney .sun::after { content: ""; position: absolute; top: 42%; width: 10%; height: 10%; border-radius: 50%; background: #8a5a4a; }
.theme-poney .sun::before { left: 30%; } .theme-poney .sun::after { right: 30%; }
.theme-poney .cloud { border-radius: 999px; height: 6vmin; background: #fff; box-shadow: 4vmin -2.6vmin 0 1vmin #fff, 9vmin -.6vmin 0 .4vmin #fff, 12.5vmin .4vmin 0 0 #fff; }
.theme-poney .hills { bottom: 8vh; height: 22vh; opacity: 1;
  background:
    radial-gradient(ellipse 38% 60% at 15% 100%, #b8ebc0 98%, transparent 100%),
    radial-gradient(ellipse 45% 75% at 62% 100%, #a8e3b4 98%, transparent 100%),
    radial-gradient(ellipse 35% 55% at 95% 100%, #c2f0c9 98%, transparent 100%); }
.theme-poney .ground { height: 9vh; border-top: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 9vmin, #ffffff 9vmin 10.6vmin, transparent 10.6vmin 12vmin) 0 0 / 100% 4.2vh no-repeat,
    linear-gradient(#ffffff, #ffffff) 0 .9vh / 100% .8vh no-repeat,
    linear-gradient(#ffffff, #ffffff) 0 2.6vh / 100% .8vh no-repeat,
    linear-gradient(180deg, #9ee0a8 0, #7ccf8c 100%) 0 0 / 100% 100%; }

/* top bar & HUD */
.theme-poney #screen-title, .theme-poney h2.pix-title, .theme-poney .prompt {
  color: #ffffff; text-shadow: 0 3px 0 #e08ab0, 0 0 2px #e08ab0, 2px 0 0 #e08ab0, -2px 0 0 #e08ab0, 0 -2px 0 #e08ab0; font-weight: 700; }
.theme-poney .hud-chip { background: rgba(255,255,255,.92); color: var(--ink); border: 3px solid #ffc2dc; border-radius: 999px; box-shadow: 0 4px 0 rgba(224,138,176,.35); }
.theme-poney .xpbar { background: #ffe1ee; border: 2px solid #ffc2dc; border-radius: 999px; overflow: hidden; }
.theme-poney .xpfill { background: linear-gradient(90deg, #ff9cc6, #c49bf0); }

/* buttons */
.theme-poney .pix-btn { --fg: var(--ink); border: 3px solid var(--ink); border-radius: 22px; text-shadow: none; font-weight: 700;
  background: linear-gradient(180deg, var(--hi), var(--c));
  box-shadow: inset 0 -5px 0 var(--lo), 0 5px 0 rgba(107,74,90,.35); }
.theme-poney .pix-btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--lo), 0 1px 0 rgba(107,74,90,.35); }
.theme-poney .pix-btn svg { filter: none; }
.theme-poney .pix-btn.small { border-radius: 16px; box-shadow: inset 0 -4px 0 var(--lo), 0 4px 0 rgba(107,74,90,.3); }
.theme-poney .pix-btn.gold { --c: #ffd966; --hi: #fff0b0; --lo: #e8bd45; }
.theme-poney .pix-btn.gem { --c: #8fe0d8; --hi: #c8f5f0; --lo: #5cc0b6; }
.theme-poney .pix-btn.blue { --c: #8fc4f5; --hi: #c8e2ff; --lo: #5f9ee0; }
.theme-poney .pix-btn.purple { --c: #c49bf0; --hi: #e2ccff; --lo: #9c70d0; }
.theme-poney .pix-btn.on { --c: #8fd49b; --hi: #c6f0cc; --lo: #5fae6e; }
.theme-poney .icon-btn { border-radius: 50%; }

/* panels, tiles, bubbles */
.theme-poney .panel { background: #fffafc; border: 3px solid #ffc2dc; border-radius: 26px; box-shadow: 0 8px 0 rgba(224,138,176,.25); }
.theme-poney .panel.stone, .theme-poney .panel.wood { color: var(--ink); background: #fff; }
.theme-poney .tile { border: 4px solid #ffffff; border-radius: 30px; color: var(--ink); background-size: 64px 64px; image-rendering: auto;
  text-shadow: 0 2px 0 #fff, 0 0 6px #fff, 0 0 10px #fff;
  box-shadow: inset 0 -8px 0 rgba(107,74,90,.12), 0 9px 0 rgba(224,138,176,.35), 0 12px 24px rgba(224,138,176,.25); }
.theme-poney .tile:active { box-shadow: inset 0 -8px 0 rgba(107,74,90,.12), 0 3px 0 rgba(224,138,176,.35); }
.theme-poney .tile .ic { filter: drop-shadow(0 5px 0 rgba(107,74,90,.18)); }
.theme-poney .tile .badge { border-radius: 999px; color: #fff; border: 3px solid #fff; background: #ff7aa8; }
.theme-poney .bubble { border: 3px solid #ffc2dc; border-radius: 24px; box-shadow: 0 6px 0 rgba(224,138,176,.3); color: var(--ink); }
.theme-poney .bubble::after { border-color: #ffc2dc; border-radius: 0 0 0 6px; }
.theme-poney .logo { font-family: "Kawaii"; letter-spacing: 1px; color: #ff8fc0;
  text-shadow: 0 .06em 0 #ffffff, 0 .1em 0 #e8a0c8, 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 0 .14em .2em rgba(224,138,176,.5); }
.theme-poney .logo span:nth-child(3n+1) { color: #ff8fc0; } .theme-poney .logo span:nth-child(3n+2) { color: #b38cf0; } .theme-poney .logo span:nth-child(3n) { color: #6fc3ee; }
.theme-poney .mascot { filter: drop-shadow(0 8px 0 rgba(224,138,176,.25)); overflow: visible; }

/* chips, words, slots, blocks */
.theme-poney .chip { border-radius: 999px; border: 3px solid #ffc2dc; box-shadow: 0 4px 0 rgba(224,138,176,.3); }
.theme-poney .word-big { border: 4px solid #ffc2dc; border-radius: 26px; box-shadow: 0 8px 0 rgba(224,138,176,.3); }
.theme-poney .word-big.covered::after { border-radius: 26px; border: 4px solid #fff; inset: -4px;
  background: radial-gradient(circle at 25% 35%, #fff 0 6%, transparent 7%), radial-gradient(circle at 70% 60%, #fff 0 5%, transparent 6%), linear-gradient(135deg, #ffc2dc, #d8c2ff); }
.theme-poney .slot { border-radius: 14px; border-color: #e0a0c4; }
.theme-poney .slot.filled { border-color: var(--ink); }
.theme-poney .lblock { border-radius: 18px; border: 3px solid #fff; color: var(--ink); text-shadow: 0 2px 0 #fff; image-rendering: auto;
  box-shadow: inset 0 -5px 0 rgba(107,74,90,.15), 0 6px 0 rgba(224,138,176,.4); }
.theme-poney .ore { border-radius: 24px; border: 4px solid #fff; image-rendering: auto; box-shadow: inset 0 -6px 0 rgba(107,74,90,.12), 0 8px 0 rgba(224,138,176,.35); }
.theme-poney .ore span { border-radius: 14px; border-color: #ffc2dc; }
.theme-poney .ore .crack { display: none; }
.theme-poney .ore.mined { animation: ponyHappy .7s ease-out .1s forwards; }
@keyframes ponyHappy { 40% { transform: scale(1.12) rotate(-3deg); background-color: #c6f0cc; } to { transform: scale(.2) translateY(-40vh); opacity: 0; } }
.theme-poney .game-progress i { border-radius: 50%; border-color: #e0a0c4; }
.theme-poney .game-progress i.done { background: #ff9cc6; box-shadow: none; }
.theme-poney .progress { border-radius: 999px; border-color: #ffc2dc; background: #ffe6f2; overflow: hidden; }
.theme-poney .progress > div { background: linear-gradient(90deg, #ff9cc6, #c49bf0); }
.theme-poney .particle { border-radius: 50%; box-shadow: none !important; }
.theme-poney .float-text { color: #fff; text-shadow: 0 3px 0 #e08ab0, 2px 0 0 #e08ab0, -2px 0 0 #e08ab0, 0 -2px 0 #e08ab0; }
.theme-poney .toast { border-radius: 999px; background: #ffffff; color: var(--ink); border: 3px solid #ffc2dc; }

/* keyboard & keypad */
.theme-poney .kbd { border-radius: 26px; background: #f3e8ff; border: 3px solid #d8c2ff; box-shadow: 0 6px 0 rgba(156,112,208,.25); }
.theme-poney .key { border-radius: 14px; border: 2px solid #d8c2ff; background: #fff; color: var(--ink); box-shadow: 0 4px 0 #d8c2ff; }
.theme-poney .key:active, .theme-poney .key.pressed { box-shadow: 0 1px 0 #d8c2ff; }
.theme-poney .key.acc { background: #fff4d6; }
.theme-poney .key.ok { background: #8fd49b; color: #fff; border-color: #5fae6e; box-shadow: 0 4px 0 #5fae6e; }
.theme-poney .key.del { background: #ff9cb0; color: #fff; border-color: #e06a80; box-shadow: 0 4px 0 #e06a80; }
.theme-poney .pin-dots i { border-radius: 50%; border-color: #e0a0c4; }
.theme-poney .pin-dots i.on { background: #ff9cc6; box-shadow: none; }
.theme-poney .gate-display, .theme-poney .name-display { border-radius: 20px; border-color: #ffc2dc; }

/* modals, results */
.theme-poney .modal-back { background: rgba(107, 74, 90, .45); }
.theme-poney .rays { background: repeating-conic-gradient(rgba(255, 200, 230, .45) 0 10deg, transparent 10deg 20deg); }
.theme-poney .big-num { color: #ff8fc0; text-shadow: 0 5px 0 #fff, 0 6px 0 #e08ab0; }
.theme-poney .result-stars svg { filter: grayscale(1); }
.theme-poney .result-stars svg.on { filter: none; }
.theme-poney .countdown span { color: #fff; text-shadow: 0 10px 0 #e08ab0, 0 0 4px #e08ab0, 6px 0 0 #e08ab0, -6px 0 0 #e08ab0; }

/* reading */
.theme-poney .reader { border: 4px solid #ffc2dc; border-radius: 26px; box-shadow: 0 8px 0 rgba(224,138,176,.25); }
.theme-poney .reader.grid-mode .item { border-radius: 18px; border-color: #ffc2dc; }
.theme-poney .reader .w.hl, .theme-poney .reader.grid-mode .item.hl { background: #fff0a8; box-shadow: 0 0 0 3px #fff0a8; border-radius: 8px; }
.theme-poney .reader.ruler .line.focus { outline-color: #ff9cc6; background: #fff4f9; border-radius: 12px; }
.theme-poney .chrono { border-radius: 22px; background: #ffffff; color: var(--ink); border: 3px solid #ffc2dc; }
.theme-poney .chrono.running { color: #ff5c9a; }
.theme-poney .rec-dot { border-radius: 50%; border-color: #fff; }
.theme-poney .bars { border-radius: 16px; border-color: #ffc2dc; }
.theme-poney .bars .bar { border-radius: 10px 10px 4px 4px; background: #8fc4f5; border-color: var(--ink); }
.theme-poney .bars .bar.best { background: #ffd966; }
.theme-poney .sheet-type { border-radius: 999px; border-color: #fff; }
.theme-poney .avatar-pick { border-radius: 26px; border-color: #ffc2dc; }
.theme-poney .avatar-pick.sel { outline-color: #ff9cc6; }

/* cards */
.theme-poney .tc-in { border-radius: 7cqw; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2.5cqw var(--f), inset 0 0 0 3.5cqw rgba(255,255,255,.7), 0 5px 0 rgba(224,138,176,.35); }
.theme-poney .tc-top, .theme-poney .tc-atk, .theme-poney .tc-txt { border-radius: 4cqw; border-color: rgba(107,74,90,.5); }
.theme-poney .tc-art { border-radius: 5cqw; border-color: rgba(107,74,90,.5); }
.theme-poney .tc-art img { image-rendering: auto; filter: drop-shadow(0 2cqw 0 rgba(107,74,90,.12)); }
.theme-poney .tc-meta { color: #fff; text-shadow: 0 1px 0 rgba(107,74,90,.6); }
.theme-poney .tc-pv { color: #e0457a; }
.theme-poney .tcard.missing .tc-in { background: rgba(255,255,255,.4); border-color: #e0a0c4; box-shadow: none; }
.theme-poney .tcard.missing img { filter: brightness(0) opacity(.18); }
.theme-poney .tc-num { color: #c48aa8; text-shadow: none; }
.theme-poney .tcard.back .tc-in { background: radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%) 0 0 / 20cqw 20cqw, linear-gradient(135deg, #ffb3d1, #c49bf0); box-shadow: inset 0 0 0 4cqw #fff; }
.theme-poney .tc-back-logo { color: #fff; text-shadow: 0 3px 0 #e08ab0; }
.theme-poney .tc-new, .theme-poney .tc-count { border-radius: 999px; border-color: #fff; }
.theme-poney .pack { border-radius: 22px; border: 4px solid #fff; background: linear-gradient(135deg, #ffb3d1 0%, #c49bf0 55%, #8fc4f5 100%); box-shadow: 0 8px 0 rgba(224,138,176,.4); }
.theme-poney .pack-top { background: repeating-linear-gradient(90deg, #fff 0 8%, #ffe6f2 8% 16%); border-bottom: 3px solid #fff; }
.theme-poney .pack-title { text-shadow: 0 3px 0 #e08ab0; }
.theme-poney .pack-sub { border-radius: 999px; border-color: #fff; color: var(--ink); background: #fff0a8; }
.theme-poney .booster-stage.golden-flash::before { background: radial-gradient(circle, rgba(255,240,200,.95), rgba(255,200,230,.5) 50%, transparent 75%); }

/* theme picker */
.theme-pick { width: min(100%, 900px); }
.theme-tile.tt-pixel { background-image: linear-gradient(180deg, #7ec8f5 0 55%, #5faa3c 55% 62%, #86603f 62%); border-radius: 0; color: #fff; font-family: "Pixel"; }
.theme-tile.tt-poney { background: linear-gradient(135deg, #ffd6ea, #e2d4ff); border: 4px solid #fff; border-radius: 30px; color: #6b4a5a; font-family: "Kawaii"; text-shadow: 0 2px 0 #fff; }
.theme-tile .ic { width: clamp(90px, 18vmin, 170px); height: clamp(90px, 18vmin, 170px); }
.theme-poney .zoom-modal { background: transparent; border: none; box-shadow: none; }
.zoom-card .tc-name { white-space: normal; font-size: 7.5cqw; }
.theme-tile { background-size: cover !important; }

/* =====================  RESPONSIVE (phones, small tablets, landscape phones)  ===================== */
#topbar { padding-left: max(clamp(10px, 2vmin, 22px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(10px, 2vmin, 22px), env(safe-area-inset-right, 0px)); }
#hud { flex-shrink: 0; }
#screen-title { min-width: 0; }
.kbd .krow { flex-wrap: wrap; }
.key { min-width: 0; }
@media (max-width: 760px) {
  :root { --gap: 10px; }
  #screen { padding-left: 10px; padding-right: 10px; }
  .hud-chip { font-size: 15px; padding: 4px 9px; min-height: 36px; gap: 4px; border-width: 2px; }
  #hud { gap: 5px; }
  #hud-me > span:not(.av) { display: none; }
  #hud-level { min-width: 64px; padding: 3px 7px; }
  #hud-level .lvl-num { font-size: 11px; }
  #screen-title { font-size: 18px; }
  .icon-btn { width: 44px; height: 44px; }
  .home-hero { flex-direction: column; gap: 8px; margin: 4px 0 14px; }
  .logo { font-size: clamp(34px, 12vw, 60px); text-align: center; }
  .mascot { width: clamp(80px, 26vw, 130px); }
  .bubble { font-size: 16px; max-width: 100%; }
  .bubble::after { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { min-height: clamp(130px, 38vw, 210px); font-size: clamp(16px, 4.6vw, 24px); padding: 12px 8px; border-width: 4px; }
  .tile .ic { width: clamp(48px, 15vw, 84px); height: clamp(48px, 15vw, 84px); }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-tile { min-height: 110px; font-size: 16px; }
  .list-cards { grid-template-columns: 1fr; }
  .panel { padding: 12px; }
  .word-big { font-size: clamp(34px, 11vw, 64px); padding: .1em .35em; max-width: 100%; overflow-wrap: anywhere; }
  .slot { width: clamp(28px, 8.5vw, 48px); height: clamp(38px, 11vw, 58px); font-size: clamp(22px, 7vw, 36px); border-width: 3px; }
  .lblock { width: clamp(46px, 14vw, 70px); height: clamp(46px, 14vw, 70px); font-size: clamp(24px, 8vw, 40px); }
  .choice { font-size: clamp(22px, 7vw, 36px); min-width: 70px; }
  .ore-grid { grid-template-columns: 1fr; }
  .ore { height: clamp(80px, 22vw, 130px); }
  .ore span { font-size: clamp(22px, 7vw, 36px); }
  .kbd { padding: 6px; gap: 4px; border-width: 3px; }
  .kbd .krow { gap: 3px; }
  .key { height: clamp(38px, 11vw, 52px); font-size: clamp(16px, 5vw, 24px); border-width: 2px; }
  .key.acc { flex: 0 0 calc(14.28% - 3px); }
  .key.wide { font-size: 15px; }
  .reader-tools .pix-btn.small { font-size: 13px; padding: .35em .5em; }
  .chrono { font-size: clamp(30px, 10vw, 50px); }
  .chrono-bar .pix-btn.big { font-size: 18px; }
  .album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .booster-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .pack-mini { margin: 0 auto; }
  .tabs .pix-btn.small { font-size: 13px; padding: .3em .5em; }
  .pix-btn.big { font-size: 18px; }
  .avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .parent-lock { width: 46px; height: 46px; }
  .theme-pick { grid-template-columns: 1fr; }
  .result-stars svg { width: 54px; }
  .rain-area { height: calc(100vh - var(--top-h) - 9vh - 110px); }
  .modal { padding: 14px; }
}
@media (max-width: 380px) {
  #hud-level { display: none; }
  .album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* landscape phones: very little height */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: calc(48px + var(--safe-t)); }
  .home-hero { flex-direction: row; margin: 0 0 8px; }
  .logo { font-size: 30px; }
  .mascot { width: 64px; }
  .bubble { font-size: 14px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { min-height: 110px; font-size: 15px; padding: 8px; }
  .tile .ic { width: 44px; height: 44px; }
  .tile .sub { display: none; }
  #screen { padding-bottom: 12px; }
  .ground { height: 6vh; } .hills { bottom: 6vh; }
  .icon-btn { width: 40px; height: 40px; }
  .hud-chip { min-height: 32px; font-size: 14px; padding: 3px 8px; }
  #screen.typing .word-big { font-size: 9vh; }
  #screen.typing .key { height: 8.4vh; font-size: 5vh; }
  #screen.typing .kbd { gap: 1vh; padding: 1vh; }
  #screen.typing .slot { height: 10vh; width: 8vh; font-size: 7vh; }
  .reader { min-height: 40vh; }
  .zoom-card { width: min(60vw, 80vh, 300px); }
}

/* pixel theme: classic readable font everywhere except the logo */
.theme-pixel .logo { font-family: "Pixel"; }
/* dyslexia-friendly font option */
body.dys :is(.reader, .reader *, .word-big, .word-big *, .chip, .chip *, .slot, .lblock, .ore span, .choice, .drop, .target-banner, .key, .name-display, .list-row .s, .tc-txt) { font-family: "Dys", "Lecture", sans-serif !important; }
body.dys .reader { word-spacing: .1em; }
body.dys .reader { line-height: 2.1; }
body.dys .word-big { font-size: clamp(36px, 9vmin, 100px); }

/* child picker */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 22vmin, 220px), 1fr)); gap: clamp(14px, 3vmin, 32px); width: min(100%, 1000px); }
.profile-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(255,255,255,.9); border: 5px solid var(--ink); padding: clamp(12px, 2.4vmin, 24px);
  cursor: pointer; box-shadow: 0 8px 0 rgba(43,29,18,.4); animation: tileIn .45s steps(5) both; font: inherit; color: var(--ink); }
.profile-pick:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(43,29,18,.4); }
.profile-pick .av { width: clamp(80px, 16vmin, 160px); height: clamp(80px, 16vmin, 160px); }
.profile-pick .av img { width: 100%; height: 100%; object-fit: contain; }
.profile-pick .pname { font-weight: 700; font-size: clamp(18px, 3.4vmin, 32px); }
.profile-pick.add { background: rgba(255,255,255,.55); border-style: dashed; }
.profile-pick.add .av { width: clamp(50px, 9vmin, 90px); height: clamp(50px, 9vmin, 90px); margin: clamp(15px, 3.5vmin, 35px) 0; }
.theme-poney .profile-pick { border: 4px solid #ffc2dc; border-radius: 30px; box-shadow: 0 8px 0 rgba(224,138,176,.3); }
.theme-poney .profile-pick.add { border-style: dashed; }
#hud-me .av img { width: 100%; height: 100%; object-fit: contain; }

/* booster reveal (2-step flip, no 3D backface tricks) */
.reveal-zone { position: relative; width: min(60vw, 46vh, 360px); aspect-ratio: 63 / 88; }
.deck { position: absolute; inset: 0; }
.deck-back { position: absolute; inset: 0; transform: translate(calc(var(--k) * 5px), calc(var(--k) * 5px)); }
.reveal-card { position: absolute; inset: 0; cursor: pointer; z-index: 2; transition: transform .26s ease-in; }
.reveal-card.deal { animation: dealIn .45s cubic-bezier(.3,1.4,.5,1) both; }
.reveal-card.flip-out { transform: scaleX(0) scaleY(1.06); }
.reveal-card.flip-in { animation: flipIn .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes flipIn { from { transform: scaleX(0) scaleY(1.06); } to { transform: scaleX(1); } }
.reveal-card.away { animation: away .38s ease-in forwards; }
.reveal-card.r-glow-r { filter: drop-shadow(0 0 14px rgba(126, 200, 245, .9)); }
.reveal-card.r-glow-ur { filter: drop-shadow(0 0 18px rgba(255, 143, 177, .95)); }
.reveal-card.r-glow-or { filter: drop-shadow(0 0 26px rgba(245, 197, 66, 1)); }
.set-tabs .pix-btn small { opacity: .8; font-size: .75em; }
.tcard.set2 .tc-art img { width: 90%; height: 90%; }
.theme-pixel .tcard.set2 .tc-art img { image-rendering: pixelated; }

/* =====================  HOME 2 : compagnon + tuiles  ===================== */
.home2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(12px, 2.4vmin, 28px); max-width: 1300px; margin: 0 auto; align-items: start; }
.home-main { display: flex; flex-direction: column; gap: clamp(10px, 2vmin, 20px); }
.small-logo { font-size: clamp(30px, 6vmin, 64px); text-align: center; white-space: nowrap; }
.home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.home-tiles .tile { min-height: clamp(120px, 24vmin, 230px); font-size: clamp(17px, 3vmin, 30px); }
.home-tiles .tile .ic { width: clamp(52px, 10vmin, 100px); height: clamp(52px, 10vmin, 100px); }
#hud-stars:empty { display: none; }

.pet-panel { display: flex; flex-direction: column; gap: clamp(8px, 1.4vmin, 14px); padding: clamp(10px, 1.8vmin, 18px) !important; }
.pet-head { display: flex; align-items: center; gap: 10px; }
.pet-name { font-weight: 700; font-size: clamp(20px, 3.6vmin, 34px); }
.pet-lvl { font-size: clamp(13px, 2vmin, 18px); background: var(--ink); color: #fff; padding: 2px 8px; }
.stars-chip { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(16px, 2.6vmin, 24px); background: #fff3b0; border: 3px solid var(--ink); padding: 2px 10px; }
.stars-chip .ic { width: 1.2em; height: 1.2em; display: inline-flex; }
.pet-scene { position: relative; height: clamp(220px, 40vmin, 400px); overflow: hidden; border: 4px solid var(--ink); touch-action: none;
  background: linear-gradient(180deg, #8fd3ff 0%, #c8ecff 62%, #6fbf4a 62%, #5faa3c 74%, #86603f 74%); }
.pet-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: repeating-linear-gradient(90deg, #86603f 0 18px, #79563a 18px 22px, #956c49 22px 40px); border-top: 6px solid #5faa3c; }
.pet { position: absolute; left: 50%; bottom: 14%; width: 46%; max-width: 260px; aspect-ratio: 1; transform: translateX(-50%); cursor: pointer; transform-origin: 50% 100%; }
.pet.stage-1 { width: 36%; } .pet.stage-3 { width: 54%; }
.pet.stage-3::after { content: "✦"; position: absolute; right: 4%; top: 2%; font-size: 26px; color: #fff6b0; text-shadow: 0 0 6px #f5c542; animation: twinkle 1.4s steps(3) infinite; }
.pet-body { width: 100%; height: 100%; animation: petIdle 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.pet-body img, .pet-body svg { width: 100%; height: 100%; image-rendering: pixelated; display: block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.18)); overflow: visible; }
@keyframes petIdle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }
.pet[data-mood="sad"] .pet-body { animation: petSad 3s ease-in-out infinite; filter: saturate(.75); }
@keyframes petSad { 50% { transform: rotate(-4deg) scale(.98); } }
.pet[data-mood="happy"] .pet-body { animation: petHappy .9s ease-in-out infinite; }
@keyframes petHappy { 50% { transform: translateY(-5%) scale(1.03, .98); } }
.pet[data-mood="eat"] .pet-body { animation: none; transform: scale(1.06, .94); }
.pet.jump .pet-body { animation: petJump .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes petJump { 40% { transform: translateY(-22%) scale(.95, 1.06); } 75% { transform: translateY(0) scale(1.08, .92); } }
.pet .eye { animation: blink 4s steps(1) infinite; transform-origin: center; transform-box: fill-box; }
.dirt { position: absolute; width: 14%; height: 10%; background: radial-gradient(circle, #6b4a2a 0 40%, transparent 41%), radial-gradient(circle at 70% 60%, #6b4a2a 0 25%, transparent 26%); opacity: .75; pointer-events: none; border-radius: 50%; }
.pet-bubble { position: absolute; left: 50%; top: 6%; transform: translateX(-50%) scale(.6); max-width: 86%; background: #fff; border: 3px solid var(--ink); padding: .4em .7em; font-weight: 700;
  font-size: clamp(13px, 2.2vmin, 20px); text-align: center; opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); z-index: 3; pointer-events: none; }
.pet-bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.pet-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.pet-pop { position: absolute; bottom: 45%; font-size: clamp(20px, 4vmin, 36px); font-weight: 700; color: #fff; text-shadow: 2px 2px 0 var(--ink); animation: petPop 1.3s ease-out forwards; }
.pet-pop.heart { color: #ff5c8a; }
@keyframes petPop { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1.2); } to { transform: translateY(-90px) scale(1); opacity: 0; } }
.pet-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pbar span { font-size: clamp(12px, 1.9vmin, 17px); font-weight: 700; }
.pbar-track { height: 14px; border: 3px solid var(--ink); background: #3b2a1c; overflow: hidden; }
.pbar-track i { display: block; height: 100%; transition: width .6s; }
[data-bar=hunger] i { background: #ffb36b; } [data-bar=joy] i { background: #ff8fb1; } [data-bar=clean] i { background: #7ec8f5; }
.pbar.low .pbar-track { animation: badge .8s steps(2) infinite; }
.pet-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pet-actions .pix-btn { flex-direction: column; gap: 2px; padding: .35em .2em; font-size: clamp(12px, 1.9vmin, 18px); }
.pet-actions .pix-btn svg { width: 1.7em; height: 1.7em; }
.pet-hint { text-align: center; font-weight: 700; margin: 0; }
.pet-tray { position: absolute; left: 4%; right: 4%; bottom: 4%; background: rgba(255,255,255,.96); border: 4px solid var(--ink); padding: 8px; z-index: 5; animation: pop .3s steps(4); }
.tray-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; font-size: clamp(13px, 2vmin, 18px); }
.tray-items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tray-item { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid var(--ink); background: #fff8e7; padding: 4px 2px; font: inherit; font-size: clamp(11px, 1.6vmin, 15px); font-weight: 700; color: var(--ink); cursor: pointer; }
.tray-item.poor { opacity: .5; }
.tray-item .fi { width: clamp(30px, 6vmin, 52px); height: clamp(30px, 6vmin, 52px); display: inline-flex; }
.tray-item .fi svg { width: 100%; height: 100%; }
.tray-item .cost { display: inline-flex; align-items: center; gap: 2px; }
.tray-item .cost .ic { width: 1em; height: 1em; display: inline-flex; }
.flying-food { position: absolute; left: 50%; bottom: 8%; width: 14%; transform: translate(-50%, 0) scale(1.2); transition: transform .6s cubic-bezier(.3,.0,.4,1), bottom .6s cubic-bezier(.2,1.4,.5,1); z-index: 4; }
.flying-food svg { width: 100%; height: auto; }
.flying-food.go { bottom: 40%; transform: translate(-50%, 0) scale(.4); }
.ball { position: absolute; width: 16%; max-width: 70px; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--ink); z-index: 4; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), conic-gradient(#e5533d 0 25%, #ffe14d 0 50%, #3d7be5 0 75%, #5faa3c 0); animation: ballBounce .6s ease-in-out infinite alternate; transition: left .25s, top .25s; }
@keyframes ballBounce { to { transform: translateY(-12px) rotate(40deg); } }
.bubble-spot { position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; z-index: 4; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, rgba(200,236,255,.55) 19% 70%, rgba(126,200,245,.9) 71%); border: 2px solid rgba(43,29,18,.35); animation: pop .3s steps(3); }
.bubble-spot.popped { animation: mined .3s forwards; }
.egg-scene { display: flex; align-items: center; justify-content: center; }
.egg { width: 30%; cursor: pointer; animation: eggWobble 2s ease-in-out infinite; }
.egg.big { width: min(50vw, 40vh, 260px); }
.egg.wobble { animation: wiggle .45s steps(6); }
.egg .crack { opacity: 0; } .egg.c2 .crack, .egg.c3 .crack { opacity: 1; }
@keyframes eggWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.hatched { width: min(50vw, 40vh, 260px); margin: 0 auto; animation: pop .6s steps(6); }
.hatched img, .hatched svg { width: 100%; height: auto; image-rendering: pixelated; }
.adopt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vmin, 20px); width: min(100%, 900px); }
.adopt-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 5px solid var(--ink); background: rgba(255,255,255,.88); padding: 10px; font: inherit; font-size: clamp(16px, 2.8vmin, 26px); color: var(--ink); cursor: pointer; animation: tileIn .45s steps(5) both; box-shadow: 0 6px 0 rgba(43,29,18,.35); }
.adopt-pick .ap { width: clamp(80px, 16vmin, 150px); aspect-ratio: 1; }
.adopt-pick .ap img, .adopt-pick .ap svg { width: 100%; height: 100%; image-rendering: pixelated; }
.adopt-pick.sel { background: #fff3b0; outline: 6px solid var(--gold); transform: translateY(-6px); }
.adopt-mini { width: clamp(70px, 12vmin, 120px); display: inline-block; } .adopt-mini img, .adopt-mini svg { width: 100%; image-rendering: pixelated; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 3px solid var(--ink); padding: 8px; background: #fff; }
.shop-item.worn { background: #fff3b0; }
.shop-prev { width: clamp(70px, 13vmin, 120px); aspect-ratio: 1; } .shop-prev img, .shop-prev svg { width: 100%; height: 100%; image-rendering: pixelated; }

/* pony theme flavour */
.theme-poney .pet-scene { border-radius: 26px; border-color: #ffc2dc; background: radial-gradient(ellipse 60% 18% at 50% 88%, rgba(107,74,90,.12), transparent 70%), linear-gradient(180deg, #ffe0ef 0%, #fff0f7 55%, #b8ebc0 55%, #9ee0a8 100%); }
.theme-poney .pet-floor { height: 12%; border-top: none; background: repeating-linear-gradient(90deg, transparent 0 40px, #fff 40px 46px, transparent 46px 60px), linear-gradient(#fff, #fff) 0 30% / 100% 4px no-repeat; opacity: .9; }
.theme-poney .pet { bottom: 10%; width: 54%; } .theme-poney .pet.stage-1 { width: 42%; } .theme-poney .pet.stage-3 { width: 62%; }
.theme-poney .pet-bubble { border-radius: 18px; border-color: #ffc2dc; }
.theme-poney .pet-lvl { border-radius: 999px; background: #c49bf0; }
.theme-poney .stars-chip { border-radius: 999px; border-color: #ffc2dc; background: #fff8d6; }
.theme-poney .pbar-track { border-radius: 999px; border-color: #ffc2dc; background: #fff0f7; }
.theme-poney .pet-tray, .theme-poney .tray-item, .theme-poney .shop-item, .theme-poney .adopt-pick { border-radius: 18px; border-color: #ffc2dc; }
.theme-poney .ball { border-color: #fff; background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), conic-gradient(#ff8fb1 0 25%, #ffe066 0 50%, #8fc4f5 0 75%, #8fe0a0 0); }

@media (max-width: 760px), (orientation: portrait) {
  .home2 { grid-template-columns: 1fr; }
  .small-logo { display: none; }
}
@media (max-width: 760px) {
  .pet-scene { height: 52vw; max-height: 300px; }
  .tray-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adopt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-tiles .tile .sub { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .home2 { grid-template-columns: 1fr 1fr; }
  .pet-scene { height: 46vh; }
  .small-logo { display: none; }
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ===== new games ===== */
.traffic { display: flex; gap: 10px; background: var(--ink); padding: 8px 14px; border: 4px solid #000; }
.traffic i { width: clamp(26px, 5vmin, 44px); aspect-ratio: 1; border-radius: 50%; opacity: .25; }
.traffic .g { background: #5fdc5c; } .traffic .o { background: #ffb02e; } .traffic .r { background: #ff4b3a; }
.traffic i.on { opacity: 1; box-shadow: 0 0 14px currentColor; animation: pop .3s steps(3); }
.traffic .g.on { color: #5fdc5c; } .traffic .o.on { color: #ffb02e; } .traffic .r.on { color: #ff4b3a; }
.word-big .lt { transition: background .1s, transform .1s; display: inline-block; }
.word-big .lt.hl { background: #fff0a0; transform: translateY(-6px) scale(1.12); color: var(--syl-b); }
.cd-dots { display: flex; gap: 10px; } .cd-dots i { width: 22px; height: 22px; border: 3px solid var(--ink); background: #fff; } .cd-dots i.on { background: #ffb02e; animation: pop .3s steps(3); }
.syl-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.syl-slot { min-height: clamp(54px, 10vmin, 96px); padding: 0 .3em; border: 4px dashed rgba(43,29,18,.55); background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center;
  font-family: "Lecture"; font-weight: 700; font-size: clamp(30px, 6.5vmin, 66px); }
.syl-slot.filled { border-style: solid; border-color: var(--ink); background: #fff; animation: pop .25s steps(3); }
.syl-slot.good { background: #b8f5a0; } .syl-slot.bad { background: #ffb3a6; }
.syl-slots.ok .syl-slot { background: #b8f5a0; }
.syl-block { width: auto !important; min-width: clamp(70px, 13vmin, 130px); padding: 0 .35em; }
.fade-word .gone { transition: opacity .6s, filter .6s; }
.fade-word .gone.vanish { opacity: 0; filter: blur(6px); }
.mem-grid { display: grid; gap: clamp(8px, 1.6vmin, 16px); width: min(100%, 900px); }
.mem-card { position: relative; aspect-ratio: 4 / 3; border: 4px solid var(--ink); background: var(--purple); cursor: pointer; padding: 0; font: inherit; color: var(--ink);
  box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), inset -4px -5px 0 rgba(0,0,0,.25), 0 6px 0 var(--ink); animation: tileIn .4s steps(5) both; }
.mem-card .mem-back, .mem-card .mem-front { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.mem-card .mem-back svg { width: 40%; height: 40%; }
.mem-card .mem-front { opacity: 0; background: #fff; font-family: "Lecture"; font-size: clamp(18px, 3.6vmin, 36px); }
.mem-card .mem-snd svg { width: 3em; height: 3em; }
.mem-card.up .mem-front, .mem-card.done .mem-front { opacity: 1; }
.mem-card.up { animation: pop .25s steps(3); }
.mem-card.done { background: #b8f5a0; } .mem-card.done .mem-front { background: #d8fbc8; }
.mm-wrap { display: flex; gap: clamp(12px, 2.4vmin, 28px); align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.mm-grid { display: grid; gap: 3px; width: min(92vw, 62vh, 620px); aspect-ratio: 1; background: var(--ink); border: 4px solid var(--ink); touch-action: none; user-select: none; }
.mm-cell { display: flex; align-items: center; justify-content: center; background: #fff8e7; font-family: "Lecture"; font-weight: 700; font-size: clamp(14px, 3.6vmin, 32px); text-transform: lowercase; }
.mm-cell.sel { background: #ffe066; }
.mm-cell.found.f0 { background: #b8f5a0; } .mm-cell.found.f1 { background: #9fd8ff; } .mm-cell.found.f2 { background: #ffc6dd; }
.mm-cell.found.f3 { background: #ffd8a8; } .mm-cell.found.f4 { background: #d8c2ff; } .mm-cell.found.f5 { background: #b8f0e8; }
.mm-side { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.mm-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-word.done { text-decoration: line-through; opacity: .55; }
.boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 3vmin; }
.box { position: relative; text-align: center; background: var(--wood); border: 4px solid var(--ink); color: #fff; padding: 18px 8px 10px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 4px 4px 0 var(--wood-hi), inset -4px -5px 0 var(--wood-lo), 0 6px 0 var(--ink); text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.box2 { background: #c9a35a; } .box3 { background: var(--grass); box-shadow: inset 4px 4px 0 var(--grass-hi), inset -4px -5px 0 var(--grass-lo), 0 6px 0 var(--ink); }
.box-lid { position: absolute; left: -6px; right: -6px; top: -10px; height: 14px; background: inherit; border: 4px solid var(--ink); }
.box-n { font-size: clamp(30px, 6vmin, 56px); font-weight: 700; }
.box small { opacity: .9; font-size: clamp(11px, 1.7vmin, 15px); }
.theme-poney .traffic { border-radius: 999px; background: #fff; border-color: #ffc2dc; }
.theme-poney .mem-card { border-radius: 18px; border-color: #fff; background: linear-gradient(135deg, #ffb3d1, #c49bf0); box-shadow: 0 6px 0 rgba(224,138,176,.4); overflow: hidden; }
.theme-poney .syl-slot { border-radius: 16px; }
.theme-poney .mm-grid { border-radius: 18px; overflow: hidden; border-color: #ffc2dc; background: #ffc2dc; }
.theme-poney .box { border-radius: 18px; border-color: #fff; color: var(--ink); text-shadow: 0 1px 0 #fff; background: #ffd8c4; box-shadow: 0 6px 0 rgba(224,138,176,.3); }
.theme-poney .box2 { background: #fff0a8; } .theme-poney .box3 { background: #c6f0cc; }
.theme-poney .box-lid { border-radius: 10px; border-color: #fff; }
@media (max-width: 760px) { .mm-side { max-width: none; width: 100%; } .boxes { gap: 8px; } }

.slot.hinted { background: #fff0a0 !important; border-color: var(--gold-lo) !important; animation: pop .35s steps(4); }
/* shop & auras */
.shop-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.shop-me { width: clamp(80px, 14vmin, 130px); aspect-ratio: 1; position: relative; flex: none; }
.shop-me img, .shop-me svg { width: 100%; height: 100%; image-rendering: pixelated; position: relative; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 18vmin, 170px), 1fr)) !important; max-height: 58vh; overflow: auto; padding: 4px; }
.shop-item { position: relative; text-align: center; font-size: clamp(13px, 2vmin, 17px); }
.shop-item.owned { background: #eefbe6; }
.shop-item .slot-tag { position: absolute; top: 4px; left: 4px; font-size: 11px; background: var(--ink); color: #fff; padding: 1px 6px; }
.save-bar { width: 90%; height: 8px; border: 2px solid var(--ink); background: #fff; } .save-bar i { display: block; height: 100%; background: #ffd54f; }
.shop-item small { opacity: .7; font-size: 11px; }
.aura-sparkle::before, .aura-rainbow::before { content: ""; position: absolute; inset: -10%; border-radius: 50%; z-index: 0; pointer-events: none; }
.aura-sparkle::before { background: radial-gradient(circle, rgba(255,240,150,.85) 0 30%, rgba(255,240,150,0) 65%); animation: auraPulse 1.8s ease-in-out infinite; }
.aura-rainbow::before { background: conic-gradient(from 0deg, rgba(255,143,177,.6), rgba(255,224,102,.6), rgba(143,224,160,.6), rgba(126,200,245,.6), rgba(196,155,240,.6), rgba(255,143,177,.6)); filter: blur(10px); animation: spin 6s linear infinite; }
@keyframes auraPulse { 50% { transform: scale(1.12); opacity: .7; } }
.pet.aura-sparkle::after, .pet.aura-rainbow::after { content: "✦ ✧ ✦"; position: absolute; left: 0; right: 0; top: -6%; text-align: center; color: #fff6b0; text-shadow: 0 0 6px #f5c542; font-size: 20px; animation: twinkle 1.4s steps(3) infinite; pointer-events: none; }
.pet .pet-body, .shop-prev > *, .shop-me > * { position: relative; z-index: 1; }
.shop-prev { position: relative; }
.theme-poney .shop-item .slot-tag { border-radius: 999px; background: #c49bf0; }
.theme-poney .save-bar { border-radius: 999px; border-color: #ffc2dc; overflow: hidden; }

/* word path */
.stage-ic { font-size: .7em; }
.path { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.path-step { flex: 1; min-width: 0; border: 3px solid var(--ink); background: #fff; padding: 6px; }
.path-step.st0 { background: #eaf7df; } .path-step.st1 { background: #e3edff; } .path-step.st2 { background: #fff2d6; } .path-step.st3 { background: #fff7b8; }
.path-h { display: flex; align-items: center; gap: 4px; font-size: clamp(12px, 1.9vmin, 17px); }
.path-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-n { background: var(--ink); color: #fff; padding: 0 6px; font-weight: 700; }
.path-words { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; font-family: "Lecture"; font-size: clamp(11px, 1.7vmin, 15px); }
.path-words span { background: rgba(255,255,255,.8); border: 1px solid rgba(43,29,18,.3); padding: 0 4px; }
.path-arrow { align-self: center; font-size: 18px; opacity: .6; }
.promo { display: inline-block; background: #fff3b0; border: 2px solid var(--ink); padding: 2px 8px; margin: 2px 0; animation: pop .4s steps(4) both .6s; }
.box4 { background: var(--gold); color: var(--ink); text-shadow: none; }
.theme-poney .path-step { border-radius: 14px; border-color: #ffc2dc; }
.theme-poney .path-n { border-radius: 999px; background: #c49bf0; }
.theme-poney .promo { border-radius: 999px; border-color: #ffc2dc; }
.theme-poney .box4 { background: #fff0a8; }
@media (max-width: 760px) { .path { flex-direction: column; } .path-arrow { transform: rotate(90deg); } .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* pet needs animations */
.needs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.thought { position: absolute; left: 62%; top: 14%; width: clamp(54px, 10vmin, 84px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; animation: thoughtFloat 2.2s ease-in-out infinite; }
.thought::before, .thought::after { content: ""; position: absolute; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.thought::before { width: 16px; height: 16px; left: -14px; bottom: -8px; } .thought::after { width: 9px; height: 9px; left: -24px; bottom: -20px; }
.th-icon { width: 64%; height: 64%; display: flex; } .th-icon svg { width: 100%; height: 100%; }
.th-ball { width: 56%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); background: conic-gradient(#e5533d 0 25%, #ffe14d 0 50%, #3d7be5 0 75%, #5faa3c 0); }
@keyframes thoughtFloat { 50% { transform: translateY(-8px) scale(1.04); } }
.tear { position: absolute; left: 41%; top: 58%; width: 10px; height: 14px; background: #7ec8f5; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: tear 1.8s ease-in infinite; }
@keyframes tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
.stink { position: absolute; left: 34%; top: 30%; display: flex; gap: 14%; width: 32%; }
.stink i { flex: 1; height: 40px; border-left: 4px solid #7bbf4a; border-radius: 50%; animation: stink 1.6s ease-in-out infinite; opacity: .8; }
.stink i:nth-child(2) { animation-delay: .5s; } .stink i:nth-child(3) { animation-delay: 1s; }
@keyframes stink { 0% { transform: translateY(10px) scaleX(1); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-26px) scaleX(-1); opacity: 0; } }
.fly { position: absolute; left: 40%; top: 40%; width: 6px; height: 6px; background: #2b1d12; border-radius: 50%; animation: fly 2.4s linear infinite; }
.fly::before { content: ""; position: absolute; left: -4px; top: -4px; width: 6px; height: 4px; background: rgba(255,255,255,.8); border-radius: 50%; }
.fly.f2 { animation-duration: 3.1s; animation-direction: reverse; }
@keyframes fly { 0% { transform: translate(0, 0); } 25% { transform: translate(60px, -30px); } 50% { transform: translate(110px, 10px); } 75% { transform: translate(40px, 30px); } 100% { transform: translate(0, 0); } }
.zzz { position: absolute; left: 60%; top: 18%; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3b2a7a; }
.zzz b { position: absolute; font-size: 26px; animation: zzz 3s ease-out infinite; opacity: 0; } .zzz b:nth-child(2) { animation-delay: 1s; font-size: 20px; } .zzz b:nth-child(3) { animation-delay: 2s; font-size: 16px; }
@keyframes zzz { 0% { transform: translate(0, 20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(30px, -50px); opacity: 0; } }
.sparkle-fx { position: absolute; left: 30%; top: 30%; color: #fff6b0; font-size: 22px; text-shadow: 0 0 6px #f5c542; animation: twinkle 1.6s steps(3) infinite; }
.sparkle-fx.s2 { left: 66%; top: 22%; animation-delay: .8s; }
.night-sky { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,70,.75), rgba(40,40,100,.35) 70%, transparent); opacity: 0; transition: opacity .8s; pointer-events: none; z-index: 1; }
.pet-scene.night .night-sky { opacity: 1; }
.night-sky .moon { position: absolute; right: 10%; top: 10%; width: 34px; height: 34px; border-radius: 50%; box-shadow: -8px 4px 0 0 #fff6b0; }
.night-sky i { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; animation: twinkle 2s steps(3) infinite; }
.night-sky i:nth-child(2) { left: 15%; top: 15%; } .night-sky i:nth-child(3) { left: 35%; top: 8%; animation-delay: .5s; } .night-sky i:nth-child(4) { left: 52%; top: 20%; animation-delay: 1s; } .night-sky i:nth-child(5) { left: 25%; top: 32%; animation-delay: 1.5s; }
.pet { z-index: 2; }
.pet.need-hungry .pet-body { animation: rumble 2.4s ease-in-out infinite; }
@keyframes rumble { 0%, 70%, 100% { transform: translateX(0); } 75% { transform: translateX(-3%) rotate(-2deg); } 80% { transform: translateX(3%) rotate(2deg); } 85% { transform: translateX(-2%); } 90% { transform: translateX(2%); } }
.pet.need-bored .pet-body { animation: sigh 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sigh { 50% { transform: scale(1.02, .93) rotate(-3deg); } }
.pet.need-sleep .pet-body { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03, .96); } }
.pet.need-dirty .pet-body { filter: sepia(.25) saturate(.8); }
.pet.need-happy .pet-body { animation: petHappy 1.1s ease-in-out infinite; }

/* ===== Poésie ===== */
.home-tiles .wide-tile { grid-column: 1 / -1; min-height: clamp(80px, 13vmin, 130px); flex-direction: row; gap: 2vmin; }
.home-tiles .wide-tile .ic { width: auto; height: auto; }
.emo-ic { font-size: clamp(36px, 7vmin, 70px); line-height: 1; text-shadow: none; }
.poem-head .poem-title { font-size: clamp(22px, 4vmin, 38px); font-weight: 700; }
.poem-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: clamp(18px, 3vmin, 28px); }
.poem-progress .progress { flex: 1; margin: 0; height: 22px; }
.strophe-stars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: clamp(13px, 2vmin, 17px); }
.sst { background: rgba(255,255,255,.7); border: 2px solid rgba(43,29,18,.3); padding: 2px 8px; } .sst i { color: #e0a81c; font-style: normal; letter-spacing: 1px; }
.advice { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; background: #fff3b0; border: 3px dashed var(--gold-lo); padding: 8px 10px; }
.scope-tabs { margin-top: var(--gap); }
.poem-acts .emo { font-size: clamp(34px, 6.5vmin, 62px); line-height: 1; text-shadow: none; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
.tips { margin-top: var(--gap); font-size: clamp(14px, 2.2vmin, 19px); } .tips ol { margin: 6px 0 0; padding-left: 1.3em; } .tips li { margin: 3px 0; }
.poem-game { gap: clamp(10px, 2vmin, 20px); }
.poem-text { background: var(--paper); border: 4px solid var(--ink); padding: clamp(12px, 2.4vmin, 28px); font-family: "Lecture"; font-size: clamp(20px, 3.6vmin, 36px); line-height: 1.55; width: min(100%, 900px); box-shadow: 0 6px 0 rgba(43,29,18,.35); }
.poem-text.small { font-size: clamp(15px, 2.4vmin, 22px); }
.poem-text .pl { padding: 0 .3em; transition: background .2s; cursor: pointer; }
.poem-text .pl.new-s { margin-top: .7em; }
.poem-text .pl.hl { background: #fff0a0; }
.rhyme { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .15em; }
.gap { display: inline-block; cursor: pointer; color: var(--ink-soft); background: rgba(126,200,245,.25); padding: 0 .1em; }
.gap i { font-style: normal; letter-spacing: .05em; opacity: .55; }
.gap.peek { background: #ffe0a0; color: var(--ink); }
.gap.big { min-width: 3em; text-align: center; background: #fff3b0; }
.erase-dots { display: flex; gap: 8px; } .erase-dots i { width: 18px; height: 18px; border: 3px solid var(--ink); background: #fff; } .erase-dots i.on { background: var(--gold); }
.big-line { font-family: "Lecture"; font-weight: 700; font-size: clamp(24px, 5vmin, 50px); text-align: center; background: #fff; border: 4px solid var(--ink); padding: .4em .8em; max-width: 100%; box-shadow: 0 6px 0 rgba(43,29,18,.35); }
.choices.lines { flex-direction: column; align-items: stretch; width: min(100%, 900px); }
.choices.lines .choice { font-size: clamp(17px, 3vmin, 28px); text-align: left; justify-content: flex-start; }
.voice-btns .pix-btn { min-width: 9em; }
.snow-box { width: min(100%, 900px); font-family: "Lecture"; font-size: clamp(22px, 4vmin, 40px); line-height: 1.6; background: var(--paper); border: 4px solid var(--ink); padding: 14px 20px; transition: filter .3s; }
.snow-box .pl.fresh { background: #fff3b0; animation: pop .4s steps(4); }
.snow-box.hidden-lines .pl { filter: blur(12px); opacity: .5; }
.order-done { width: min(100%, 900px); min-height: 2em; font-family: "Lecture"; font-size: clamp(20px, 3.4vmin, 34px); background: rgba(255,255,255,.7); border: 4px dashed rgba(43,29,18,.4); padding: 8px 14px; }
.order-pool { display: flex; flex-direction: column; gap: 10px; width: min(100%, 900px); }
.order-line { font-family: "Lecture"; font-size: clamp(17px, 3vmin, 28px); justify-content: flex-start; text-align: left; }
.draw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap); width: min(100%, 1100px); align-items: start; }
.draw-cv { width: 100%; height: auto; background: #fff; border: 4px solid var(--ink); touch-action: none; display: block; }
.draw-tools { margin-top: 8px; }
.swatch { width: 38px; height: 38px; border: 3px solid var(--ink); cursor: pointer; padding: 0; }
.swatch.sel { outline: 4px solid var(--gold); transform: translateY(-3px); }
.recite-stage { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.draw-thumb { width: clamp(90px, 16vmin, 160px); aspect-ratio: 600 / 420; object-fit: cover; border: 3px solid var(--ink); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-soft); }
.draw-thumb.empty { background: rgba(255,255,255,.6); border-style: dashed; }
.souffleur { min-height: 1.8em; font-family: "Lecture"; font-size: clamp(20px, 3.6vmin, 34px); color: var(--ink-soft); font-style: italic; }
.recs { width: min(100%, 700px); } .recs h3 { margin: 6px 0; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.recs .list-row { background: var(--paper); border: 3px solid var(--ink); padding: 8px 10px; margin-bottom: 6px; }
.theme-poney .poem-text, .theme-poney .snow-box, .theme-poney .big-line, .theme-poney .order-done { border-radius: 22px; border-color: #ffc2dc; }
.theme-poney .advice { border-radius: 16px; border-color: #ffc2dc; background: #fff8d6; }
.theme-poney .sst { border-radius: 999px; }
.theme-poney .draw-cv, .theme-poney .draw-thumb { border-radius: 16px; border-color: #ffc2dc; }
.theme-poney .recs h3 { text-shadow: 0 2px 0 #e08ab0; }
.theme-poney .recs .list-row { border-radius: 14px; border-color: #ffc2dc; }
@media (max-width: 760px) { .draw-wrap { grid-template-columns: 1fr; } .voice-btns .pix-btn { min-width: 0; } }

/* ---------- écriture à la main ---------- */
.input-switch { display: flex; gap: 8px; justify-content: center; }
.input-switch .pix-btn { font-size: clamp(13px, 2vh, 18px); padding: .3em .8em; }
.ink-pad { width: min(100%, 1100px); display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); padding: clamp(6px, 1.1vh, 14px);
  background: var(--stone-lo); border: 4px solid var(--ink); box-shadow: inset 4px 4px 0 var(--stone), 0 6px 0 rgba(43,29,18,.4); }
.ink-wrap { position: relative; width: 100%; height: clamp(150px, 30vh, 340px); background: #fffdf6; border: 3px solid var(--ink); touch-action: none; overflow: hidden; }
.ink-wrap canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.ink-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: rgba(43,29,18,.35);
  font-size: clamp(16px, 3vh, 28px); transition: opacity .2s; }
.ink-btns { display: flex; gap: 8px; justify-content: center; }
.ink-btns .key { max-width: 260px; }
.slots.reading { opacity: .6; animation: inkPulse .8s ease-in-out infinite alternate; }
@keyframes inkPulse { to { opacity: .95; } }
.theme-poney .ink-pad { border-radius: 26px; background: #f3e8ff; border: 3px solid #d8c2ff; box-shadow: 0 6px 0 rgba(156,112,208,.25); }
.theme-poney .ink-wrap { border-radius: 18px; border: 2px solid #d8c2ff; }

/* ---------- l'IA écoute (poésie) ---------- */
.ear-panel { width: min(100%, 900px); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ear-status { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: clamp(16px, 2.4vmin, 24px); text-align: center; }
.ear-mic { font-size: 1.6em; }
.ear-panel.listening .ear-mic { animation: earPulse .9s ease-in-out infinite; }
@keyframes earPulse { 50% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(230,60,60,.7)); } }
.ear-box .ear-line { line-height: 1.7; }
.ew { display: inline-block; transition: color .2s, transform .2s; }
.ew.ok { color: #2b8a3e; animation: ewPop .35s ease-out; }
.ew.vis { color: var(--ink); }
.ew.hid { color: rgba(43,29,18,.25); letter-spacing: 1px; }
.ew.miss { color: #d63a2a; text-decoration: underline wavy rgba(214,58,42,.6); }
@keyframes ewPop { from { transform: scale(1.35); color: #2f9e44; } }
.ear-result { max-height: 40vh; overflow: auto; text-align: left; }

/* ---------- lecture corrigée par l'IA ---------- */
.rc-prompt { margin: 0; }
.rc-status { margin: 2px 0 6px; }
.rc-status.listening .ear-mic { animation: earPulse .9s ease-in-out infinite; }
.reader .w.rc-ok { color: #2b8a3e; }
.reader .w.rc-next { background: #ffe066; box-shadow: 0 0 0 3px #ffe066; }
.reader .w.rc-miss { color: #d63a2a; text-decoration: underline wavy rgba(214,58,42,.7); text-underline-offset: .15em; }
.reader.grid-mode .item.rc-ok { background: #d3f9d8; }
.reader.grid-mode .item.rc-miss { background: #ffe3e3; }
.rc-stats { display: flex; gap: clamp(12px, 3vmin, 36px); justify-content: center; flex-wrap: wrap; text-align: center; margin: 1vmin 0; }
.rc-stats .big-num { font-size: clamp(34px, 7vmin, 72px); }
.rc-missed { justify-content: center; }
.rc-missed .chip { cursor: pointer; font: inherit; color: #d63a2a; }
.theme-poney .reader .w.rc-next { background: #ffe0f0; box-shadow: 0 0 0 3px #ffe0f0; }

/* ---------- réglage des couleurs des sons ---------- */
.snd-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 2px dashed rgba(43,29,18,.12); font-weight: 400; }
.snd-name { display: flex; flex-direction: column; min-width: clamp(150px, 26vmin, 260px); }
.snd-name b { font-size: clamp(14px, 2vmin, 19px); }
.snd-ex { font-family: "Lecture"; font-size: clamp(18px, 2.8vmin, 26px); }
.snd-sw { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.snd-sw .sw { width: clamp(26px, 3.6vmin, 36px); height: clamp(26px, 3.6vmin, 36px); border: 3px solid rgba(43,29,18,.35); border-radius: 50%; padding: 0; cursor: pointer; }
.snd-sw .sw.on { border-color: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); transform: scale(1.08); }

/* ---------- compte / synchronisation ---------- */
.cloud-row { margin-top: clamp(10px, 2vmin, 22px); }
.or-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: rgba(43,29,18,.6); font-size: clamp(13px, 1.9vmin, 17px); }
.or-sep::before, .or-sep::after { content: ''; flex: 1; border-top: 2px dashed rgba(43,29,18,.25); }
.g-ic { display: inline-flex; width: 1.4em; height: 1.4em; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 900; font-family: Arial, sans-serif; margin-right: .3em; }

/* =====================================================================
   SYSTÈME VISUEL v3 — lisibilité d'abord (téléphone, tablette, deux thèmes)
   Règles : aucun texte sous 14 px, texte toujours sur un fond uni contrasté,
   cibles tactiles de 44 px minimum, une seule action principale par écran.
   ===================================================================== */

/* --- titres et consignes : sur une étiquette pleine, jamais en blanc sur le décor --- */
.prompt, h2.pix-title { display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
  padding: .3em .8em; line-height: 1.25; text-wrap: balance; }
.theme-pixel .prompt, .theme-pixel h2.pix-title { background: rgba(43,29,18,.82); border: 3px solid var(--ink); color: #fff; text-shadow: none;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.theme-poney .prompt, .theme-poney h2.pix-title, .theme-poney #screen-title { color: #5a3a4a; text-shadow: none; }
.theme-poney .prompt, .theme-poney h2.pix-title { background: rgba(255,255,255,.94); border: 3px solid #ffc2dc; border-radius: 999px; box-shadow: 0 4px 0 rgba(224,138,176,.25); }
h2.pix-title { margin-top: .6em; margin-bottom: .5em; }
.panel .prompt { background: none !important; border: none !important; box-shadow: none !important; color: var(--ink) !important; padding: 0; }

/* --- barre du haut : fond plein, titre lisible et jamais coupé brutalement --- */
#topbar { background: linear-gradient(180deg, rgba(43,29,18,.55), rgba(43,29,18,.18) 80%, transparent); }
.theme-poney #topbar { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55) 80%, transparent); }
#screen-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; overflow: hidden; }
.theme-pixel #screen-title { text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }

/* --- tailles minimales : plus de micro-textes --- */
.tile .sub { font-size: max(14px, .52em); font-weight: 600; line-height: 1.2; }
.theme-pixel .tile { text-shadow: 2px 2px 0 rgba(0,0,0,.6), -1px -1px 0 rgba(0,0,0,.35); }
.theme-pixel .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.32)); pointer-events: none; }
.tile > * { position: relative; }
.theme-poney .tile { color: #5a3a4a; }
.theme-poney .tile .sub { color: #6b4a5a; }
.pbar span, .tray-title, .pet-actions .pix-btn { font-size: max(14px, 1.9vmin); }
.tray-item { font-size: max(13px, 1.6vmin); }
.list-row .s { font-size: max(14px, .9em); white-space: normal; }
.muted { opacity: .78; }
.pix-btn.small { min-height: 44px; }
.chip { min-height: 44px; }

/* --- compagnon : bulle lisible, à gauche, l'icône de besoin reste à droite --- */
.pet-bubble { left: 4%; right: auto; top: 5%; transform: scale(.6); transform-origin: 20% 100%; max-width: 56%;
  font-size: clamp(15px, 2.3vmin, 20px); line-height: 1.25; padding: .5em .75em; text-align: left; box-shadow: 0 4px 0 rgba(43,29,18,.25); }
.pet-bubble.show { transform: scale(1); }
.pet-bubble::after { content: ""; position: absolute; left: 30%; bottom: -12px; width: 14px; height: 14px; background: #fff;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg); }
.theme-poney .pet-bubble::after { border-color: #ffc2dc; }
.thought { left: auto; right: 6%; top: 8%; }
.pet-name { line-height: 1.1; }

/* --- espace parent : interface d'adulte, sobre et dense mais lisible --- */
.parent-area .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.parent-area .tabs .pix-btn { flex-direction: column; gap: 4px; padding: .5em .3em; font-size: clamp(14px, 2.2vmin, 20px); min-height: 64px; }
.parent-area .tabs .pix-btn svg { width: 1.5em; height: 1.5em; }
.parent-area .panel { font-size: clamp(15px, 2.2vmin, 19px); }
.parent-area .panel h2 { font-size: clamp(22px, 3.4vmin, 32px); }
.parent-area .panel h3 { font-size: clamp(17px, 2.6vmin, 24px); margin: 1.2em 0 .4em; }
.parent-area .field { padding: 14px 0; border-bottom: 2px solid rgba(43,29,18,.1); margin: 0; }
.parent-area .field:last-of-type { border-bottom: none; }
.parent-area .field > label { font-size: clamp(16px, 2.4vmin, 21px); }
.parent-area .list-row { flex-wrap: wrap; row-gap: 8px; }
.parent-area .list-row .grow { flex: 1 1 220px; }
.parent-area .list-row .av { width: 48px !important; height: 48px !important; flex: none; }
.parent-area .hud-chip .av, .parent-area .seg .av { width: 34px; height: 34px; display: inline-flex; }
.parent-area .hud-chip .av img, .parent-area .hud-chip .av svg { width: 100%; height: 100%; object-fit: contain; }
.parent-area .chips .chip { font-size: clamp(16px, 2.4vmin, 22px); }
.theme-poney .parent-area .field { border-bottom-color: #ffe0ee; }

/* --- mots de la semaine : actions en haut --- */
.list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap); }
.list-switch { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 260px; padding: 4px 2px 8px; scrollbar-width: none; }
.list-switch::-webkit-scrollbar { display: none; }
.list-switch .pix-btn { white-space: nowrap; flex: none; }
.adv-tile { width: 100%; flex-direction: row !important; gap: clamp(12px, 3vmin, 30px) !important; min-height: clamp(96px, 16vmin, 150px) !important; margin-bottom: var(--gap); justify-content: center; text-align: left !important; }
.adv-tile .ic { width: clamp(52px, 10vmin, 96px) !important; height: clamp(52px, 10vmin, 96px) !important; flex: none; }
.adv-tile .t1 { display: block; font-size: 1em; }
.word-panel h3 { margin: 0; font-size: clamp(17px, 2.8vmin, 26px); }

/* --- téléphones --- */
@media (max-width: 600px) {
  #hud-level, #hud-streak { display: none !important; }
  .hud-chip { font-size: 14px; padding: 3px 8px; min-height: 34px; }
  #hud { gap: 4px; }
  #screen-title { font-size: 17px; }
  .prompt { font-size: 17px; }
  h2.pix-title { font-size: 21px; }
  .parent-area .tabs .pix-btn { font-size: 13px; min-height: 58px; padding: .4em .1em; }
  .parent-area .panel { padding: 14px; }
  .pet-bubble { max-width: 62%; font-size: 14px; }
  .adv-tile { font-size: 19px !important; }
  .reader-tools { gap: 6px; }
  .reader-tools .pix-btn.small { font-size: 14px; }
}
@media (max-width: 380px) {
  .parent-area .tabs .pix-btn svg { display: none; }
}
.profile-chip { color: #fff; }
.theme-poney .profile-chip { color: var(--ink); }
/* jeux : le contenu se centre dans la hauteur quand il n'y a pas de clavier */
#screen:not(.typing) > .game { justify-content: center; padding-bottom: 6vh; }
/* lecture : outils secondaires repliés sur petit écran */
.more-tools { display: contents; }
.more-toggle { display: none !important; }
@media (max-width: 900px) {
  .more-toggle { display: inline-flex !important; }
  .more-tools { display: none; }
  .reader-tools.open .more-tools { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; order: 10; }
  .reader-tools.open .more-toggle { --c: var(--grass); --hi: var(--grass-hi); --lo: var(--grass-lo); }
}
/* thème poney : boutons OK / effacer assez contrastés */
.theme-poney .key.ok { background: #46a85e; border-color: #2f8746; box-shadow: 0 4px 0 #2f8746; color: #fff; }
.theme-poney .key.del { background: #e2577a; border-color: #b93b5c; box-shadow: 0 4px 0 #b93b5c; color: #fff; }
/* compagnon : ce qu'il dit s'affiche sous la scène, jamais sur l'animal ; l'icône de besoin va en haut à gauche */
.pet-bubble { display: none !important; }
.thought { left: 5% !important; right: auto !important; top: 6% !important; }
.thought::before { left: auto; right: -14px; } .thought::after { left: auto; right: -24px; }
.pet-say { position: relative; background: #fff; border: 3px solid var(--ink); padding: .45em .8em; min-height: 2.6em; display: flex; align-items: center;
  font-weight: 700; font-size: clamp(15px, 2.3vmin, 20px); line-height: 1.25; }
.pet-say::before { content: ""; position: absolute; left: 50%; top: -11px; width: 16px; height: 16px; background: #fff; border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.pet-say.show .pet-say-txt { animation: sayIn .35s ease-out; }
@keyframes sayIn { from { opacity: 0; transform: translateY(4px); } }
.theme-poney .pet-say { border-color: #ffc2dc; border-radius: 18px; }
.theme-poney .pet-say::before { border-color: #ffc2dc; }
/* accueil : le cadenas parent sous le compagnon, à gauche */
.home2 .home-main { grid-row: span 2; }
.home-lock { display: flex; justify-content: flex-start; }
.home-lock .parent-lock { width: auto; height: auto; }
@media (max-width: 760px), (orientation: portrait) { .home2 .home-main { grid-row: auto; } .home-lock { justify-content: center; } }
/* compagnon : sa taille suit la hauteur de la scène, il est toujours entièrement visible */
.pet, .theme-poney .pet { height: 72%; width: auto !important; max-width: 70%; aspect-ratio: 1; bottom: 8%; }
.pet.stage-1, .theme-poney .pet.stage-1 { height: 60%; }
.pet.stage-3, .theme-poney .pet.stage-3 { height: 82%; }
.pet-body { position: relative; z-index: 1; }
.dirt { z-index: 2; width: 16%; height: 12%; opacity: .9;
  background: radial-gradient(circle at 40% 45%, #7a5230 0 38%, transparent 40%), radial-gradient(circle at 72% 62%, #6b4a2a 0 24%, transparent 26%), radial-gradient(circle at 25% 70%, #8a6038 0 18%, transparent 20%); }