/* Comic style layer (branch comic-ui, approved direction 2026-11-03).
   Loaded last; changes tokens and adds ink outlines. No !important, keyframe glows untouched.
   Ink = the app's ink colour (never pure black). Shadows are flat offsets pointing LEFT-down (RTL reading
   direction); pressing a control moves it onto its shadow. Corners are slightly uneven, like hand-cut paper. */
:root {
  --ink: #3a2a5c;
  --line: 3px;
  --line-bold: 3.5px;
  --card: #fffdeb;
  --shadow: -5px 5px 0 var(--ink);
  --shadow-sm: -3px 3px 0 var(--ink);
  --press: translate(-5px, 5px);
  --radius: 26px 14px 30px 18px;
  --r1: 26px 14px 30px 18px;
  --r2: 16px 28px 18px 30px;
  --r3: 30px 18px 24px 14px;
  --r4: 18px 30px 14px 26px;
}

/* outlined surfaces */
.icon-btn, .stars, .tile, .letter-tile, .panel, .big-btn, .chip, .trace-stage, .word-card, .garden-card, .color-stage,
.next-sticker, .opt, .mcard .face, .slot-sticker.got, .dialog, .bubble,
.g1-week, .g1-card, .story-card, .story-ex, .mode-chips button.sel {
  border: var(--line) solid var(--ink);
}
.tile, .panel, .dialog, .trace-stage { border-width: var(--line-bold); }

/* uneven corners, varied per item so grids don't look machine-made */
.tile:nth-child(4n+1), .letter-tile:nth-child(4n+1), .story-card:nth-child(4n+1) { border-radius: var(--r1); }
.tile:nth-child(4n+2), .letter-tile:nth-child(4n+2), .story-card:nth-child(4n+2) { border-radius: var(--r2); }
.tile:nth-child(4n+3), .letter-tile:nth-child(4n+3), .story-card:nth-child(4n+3) { border-radius: var(--r3); }
.tile:nth-child(4n+4), .letter-tile:nth-child(4n+4), .story-card:nth-child(4n+4) { border-radius: var(--r4); }
.icon-btn { border-radius: 18px 12px 20px 14px; }
.stars { border-radius: 14px 20px 12px 18px; box-shadow: var(--shadow-sm); }
.big-btn, .chip { border-radius: 18px 12px 20px 14px; }
.panel { border-radius: var(--r2); }

/* flat offset shadows on things that had their own soft or light shadows */
.chip, .story-ex, .swatch, .cannon-target { box-shadow: var(--shadow-sm); }
.bubble { box-shadow: var(--shadow-sm); }
.dialog { box-shadow: -8px 8px 0 var(--ink); }
.bubble::after { border-top-color: var(--ink); }

/* press: the control drops onto its shadow (a physical click) */
.icon-btn, .tile, .big-btn, .chip, .letter-tile, .opt, .story-ex { transition: transform .07s, box-shadow .07s; }
.icon-btn:active, .tile:active, .big-btn:active, .chip:active, .letter-tile:active, .opt:active, .story-ex:active {
  transform: var(--press); box-shadow: 0 0 0 var(--ink);
}

/* headings: white with an ink comic shadow */
/* Titles: solid ink text (white outlined text was hard to read on the paper background, Yahia 2026-11-03).
   Section headers sit on a cream ink-outlined label so the background letters never run through them. */
.title, .section-title { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.section-title { display: table; margin-inline: auto; background: var(--card); border: var(--line) solid var(--ink);
  border-radius: 18px 12px 20px 14px; box-shadow: var(--shadow-sm); padding: 0 18px 4px; }
.tile { text-shadow: -2px 2px 0 rgba(58, 42, 92, .45); }
.tile .emo { filter: drop-shadow(-3px 3px 0 rgba(58, 42, 92, .35)); }
.grownups-btn { border: 2px dashed var(--ink); }

/* Grade 1 choice tiles: ink instead of lilac; selected / right / wrong states keep their colours */
.g1-choice, .g1-tile, .g1-slot { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.g1-check { border: var(--line) solid var(--ink); box-shadow: var(--shadow); }
.g1-check:disabled { box-shadow: none; }

/* hand-drawn ink pictures that replace emoji (js/emoji.js): sized like the emoji they replace */
.emo-i { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; pointer-events: none; }
.tile .emo .emo-i { width: 1.1em; height: 1.1em; }
.emo-i.ink { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
/* home tiles: the ink icon sits on a cream sticker so it never blends into a same-colour tile */
.tile .emo { display: grid; place-items: center; width: 1.55em; height: 1.55em; font-size: 58px; line-height: 1;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  box-shadow: var(--shadow-sm); filter: none; }
.tile .emo .emo-i { width: 1.2em; height: 1.2em; vertical-align: 0; }

/* ================= games + tracing in the comic style (Yahia 2026-11-03) =================
   Flat colour bands instead of gradients, ink outlines, flat offset shadows, sprites from js/game-art.js. */
.field { border: var(--line-bold) solid var(--ink); border-radius: var(--r2); box-shadow: var(--shadow); }
.target { border: var(--line) solid var(--ink); background: var(--card); border-radius: 22px 14px 24px 16px; }
.dots i { border: 2.5px solid var(--ink); background: var(--card); }
.dots i.on { background: var(--c2); box-shadow: -2px 2px 0 var(--ink); }
.burst-fx { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; z-index: 4; pointer-events: none;
  animation: burst-pop .45s steps(4) forwards; }
.burst-fx svg { width: 100%; height: 100%; }
@keyframes burst-pop { 0% { transform: scale(.3) rotate(0); } 50% { transform: scale(1.1) rotate(8deg); } 100% { transform: scale(1.25) rotate(14deg); opacity: 0; } }
.shake-letter { -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: -2px 2px 0 var(--ink); }

/* tracing: cream paper, ink start dot, the characters' glove instead of the pencil */
.trace-stage { background: var(--card); }
.start-dot > b { background: var(--c3, #4cc38a); color: #fff; border: 3px solid var(--ink); line-height: 28px;
  box-shadow: -2px 2px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
@keyframes start-pulse { 50% { transform: scale(1.15) rotate(-6deg); } }
.start-dot.is-dot > b { background: var(--card); color: var(--ink); border: 3px dashed var(--ink); -webkit-text-stroke: 0; }
.ghost-pencil > svg { left: -18px; top: -62px; width: 80px; height: 80px; transform-origin: 18px 62px;
  filter: drop-shadow(-3px 3px 0 rgba(58, 42, 92, .35)); }
.ghost-pencil.lifted > svg { transform: translate(5px, -9px) rotate(-6deg); filter: drop-shadow(-6px 7px 0 rgba(58, 42, 92, .22)); }
.meter { background: var(--card); border: var(--line) solid var(--ink); border-radius: 12px 8px 12px 8px; height: 22px; }
.meter > i { background: var(--c3, #4cc38a); border-radius: 0; box-shadow: inset -3px 0 0 var(--ink); }

/* balloons: flat sky with ink clouds; ink balloon sprites carry the letter */
.balloon-field { background: url(../assets/words/cloud.svg) 8% 14% / 110px no-repeat, url(../assets/words/cloud.svg) 86% 40% / 90px no-repeat,
  url(../assets/words/cloud.svg) 40% 70% / 70px no-repeat, #c9ecfd; box-shadow: var(--shadow); }
.balloon { width: 92px; height: 129px; background: none !important; border-radius: 0; box-shadow: none; padding: 0;
  display: block; color: #fff; }
.balloon > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.balloon::after { display: none; }
.balloon > span { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-size: 50px; line-height: 1.2;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: -2px 2px 0 var(--ink); }

/* seas (fishing + submarine): flat bands, ink waterline and sand */
.sea { background: linear-gradient(#c9ecfd 0 15%, #3fa7f5 15% 55%, #2a86d4 55% 100%); }
.sub-sea { background: linear-gradient(#3fa7f5 0 45%, #2a86d4 45% 78%, #1f6fb8 78% 100%); }
.sea::before { content: ""; position: absolute; left: 0; right: 0; top: calc(15% - 6px); height: 12px; z-index: 0;
  background: radial-gradient(circle at 10px -2px, transparent 9px, var(--ink) 9px 12px, transparent 12px) 0 0 / 20px 12px repeat-x; }
.sub-sea::before { display: none; }
.sea::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -14px; height: 48px; z-index: 0;
  background: #f2d48f; border-top: var(--line) solid var(--ink); border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.sea .weed { z-index: 1; bottom: 6px; }
.bubble-fx { border: 2.5px solid var(--ink); background: #e6f6ff; }
.fish .fl { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: -2px 2px 0 var(--ink); }
.sea-bubble { background: #e6f6ff; border: var(--line) solid var(--ink); color: var(--ink); text-shadow: none;
  box-shadow: -3px 3px 0 rgba(58, 42, 92, .45); }
.sea-bubble::before { content: ""; position: absolute; top: 12px; left: 16px; width: 18px; height: 10px;
  border-top: 4px solid #fff; border-radius: 50%; transform: rotate(-30deg); }
.sub svg { overflow: visible; }

/* memory: flat purple backs with ink polka dots */
.mcard .back { background: radial-gradient(circle, #b48ef5 0 5px, transparent 6px) 0 0 / 22px 22px, var(--c5); }
.mcard .back .emo-i { width: 1.4em; height: 1.4em; filter: drop-shadow(-2px 2px 0 rgba(58, 42, 92, .35)); }
.mcard .front { background: var(--card); }
.mcard.matched .front { background: #d8f7e5; }
.mcard .face { box-shadow: var(--shadow-sm); }

/* cannon: flat sky + ink-outlined hill; ink target sprites and cannon ball */
.cannon-field { background: #ffe9b8; }
.cannon-field::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -30px; height: 34%; z-index: 0;
  background: #9fd17c; border-top: var(--line-bold) solid var(--ink); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.cannon-field::before { content: ""; position: absolute; width: 90px; height: 90px; top: 6%; inset-inline-start: 6%;
  background: url(../assets/words/sun.svg) center / contain no-repeat; }
.cannon-target { background: none; box-shadow: none; }
.cannon-target > svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(-3px 3px 0 rgba(58, 42, 92, .45)); }
.cannon-target span { position: relative; }
.cannonball { background: var(--ink); box-shadow: inset 5px 5px 0 -1px rgba(255, 255, 255, .45); }
.cannon-target { width: 100px; height: 100px; }
.cannon-target span { font-size: 46px; padding-bottom: 6px; }
.balloon { width: 100px; height: 140px; }
.balloon > span { top: 16px; font-size: 56px; }

/* fishing: JS-driven swimmers (js/games.js makeSwimmer). Only .body is mirrored; the letter layer never flips. */
.fish { left: 0; top: 0; animation: none; z-index: 2; touch-action: manipulation; }
.fish .inner { position: relative; width: 100%; height: 100%; }
.fish .body { position: absolute; inset: 0; will-change: transform; }
.fish .body svg { width: 100%; height: 100%; overflow: visible; animation: none; display: block; }
.fish .tail { transform-box: view-box; transform-origin: 42px 45px; animation: wag var(--wag, .6s) ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-16deg) scaleY(.92); } to { transform: rotate(16deg) scaleY(1.04); } }
.fish .fl { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; top: 0; left: 0; display: flex;
  align-items: center; justify-content: center; padding-bottom: .18em; font-size: calc(var(--fw, 150px) * .3); pointer-events: none; }
.fish.caught { animation: none !important; }
.fish.caught .inner { animation: caught 1s forwards; }
.fish.nope .inner { animation: shake .4s; }
.fish-bubble { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; z-index: 1; pointer-events: none;
  border: 2.5px solid var(--ink); background: #e6f6ff; animation: fish-bubble 2.2s ease-in forwards; }
@keyframes fish-bubble { 0% { scale: .4; } 15% { scale: 1; } 100% { transform: translate(8px, -180px); opacity: 0; } }

/* submarine: comic pop (swell, then ink droplets + ring) and the letter dropping into the window */
.sea-bubble.popping { animation: bubble-swell .16s ease-out forwards; pointer-events: none; }
@keyframes bubble-swell { 60% { scale: 1.22 .9; } 100% { scale: 1.35; opacity: 0; } }
.bubble-pop { position: absolute; width: 0; height: 0; z-index: 4; pointer-events: none; }
.bubble-pop .ring { position: absolute; left: -43px; top: -43px; width: 86px; height: 86px; border-radius: 50%;
  border: 6px solid #fff; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink); animation: pop-ring .6s ease-out forwards; }
.bubble-pop .star { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; animation: pop-star .5s steps(3) forwards; }
.bubble-pop .star svg { width: 100%; height: 100%; }
@keyframes pop-star { 0% { scale: .4; rotate: 0deg; } 60% { scale: 1.05; rotate: 10deg; } 100% { scale: 1.15; rotate: 16deg; opacity: 0; } }
.bubble-pop .drop { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: #e6f6ff; border: 3px solid var(--ink); animation: pop-drop .8s cubic-bezier(.2, .7, .3, 1) forwards; }
.bubble-pop.big .drop { width: 24px; height: 24px; left: -12px; top: -12px; }
@keyframes pop-ring { from { scale: .7; } to { scale: 1.6; opacity: 0; } }
@keyframes pop-drop { 0% { transform: translate(0, 0) scale(1.2); } 70% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.9); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 22px)) scale(.5); opacity: 0; } }
.flying-letter { position: absolute; left: 0; top: 0; z-index: 5; margin: -.7em 0 0 -.4em; pointer-events: none;
  font-family: var(--font-letter); font-size: 46px; font-weight: 700; color: #fff; line-height: 1;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; transition: transform .4s cubic-bezier(.5, -.3, .7, 1), opacity .4s; }
.sub.gulp svg { animation: sub-gulp .35s ease-out, bob 2s ease-in-out .35s infinite; }
@keyframes sub-gulp { 40% { transform: scale(1.08, .92); } 70% { transform: scale(.97, 1.04); } }
@media (prefers-reduced-motion: reduce) { .fish .tail, .fish-bubble { animation: none; } }
.fish { background: none; border: 0; padding: 0; box-shadow: none; }

/* Host: one of the four Abjadoo letter characters (js/host.js) replaces the camel mascot.
   The svg is 220x250 units, the character standing on the bottom edge; overflow shows jumps above the box. */
.mascot .host-svg { pointer-events: auto; cursor: pointer; touch-action: manipulation; display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.mascot .host-enter { animation: host-in .3s ease-out both; }
.mascot .host-leave { animation: host-out .26s ease-in forwards; }
@keyframes host-in { from { opacity: 0; } }
@keyframes host-out { to { opacity: 0; } }
@media (max-width: 1280px) {
  .topbar { padding-inline-end: 96px; }
  .mascot { width: 76px; top: 4px; }
}
@media (max-width: 680px) {
  .topbar { padding-inline-end: 70px; }
  .mascot { width: 58px; top: 3px; }
}
/* docked host (tablets, phones, Grade 1 player): the speech bubble reads in 1-2 lines, not a narrow column */
@media (max-width: 1280px) { .bubble { min-width: min(240px, 70vw); } }
body.g1-playing .bubble { min-width: min(240px, 70vw); }

/* App background (Yahia chose option A, 2026-11-03): cream paper with the four cast letters scattered in pale
   colour and ink (tools/make_bg.py -> assets/bg/letters.svg). Replaces Jammoul's desert sky and sand. */
body { background: url(../assets/bg/letters.svg) 0 0 / 360px #F8EDCB; }
/* The page is now a warm paper tone and the letters are faint, so every card/tile (cream #FFFDEB) stands out.
   Surfaces that used to rely on the old blue sky for contrast get the full ink outline (Yahia: "areas not clear"). */
.g1-unit { background: var(--card); border: var(--line) solid var(--ink); box-shadow: var(--shadow-sm); border-radius: 14px 9px 14px 9px; }
.g1-node { border: var(--line) solid var(--ink); }
.mode-chips { background: var(--card); border: var(--line) solid var(--ink); box-shadow: var(--shadow-sm); }
.mode-chips button.sel { background: var(--c5); color: #fff; border-color: var(--ink); }
.story-stage { border: var(--line-bold) solid var(--ink); box-shadow: var(--shadow); }
.story-card .story-stage { border-width: 0; box-shadow: none; }
.story-text.title { background: var(--card); border: var(--line) solid var(--ink); border-radius: 18px 12px 20px 14px; box-shadow: var(--shadow-sm); }
.slot { border-color: var(--ink); }
.slot-sticker { border-color: rgba(58, 42, 92, .55); background: rgba(255, 253, 235, .85); }
.swatch { border-color: var(--ink); border-width: 3px; box-shadow: var(--shadow-sm); }