/* card-faces.css: everything a flashcard needs to look like itself (fonts, design tokens, the card box and its faces, accent packs, language rows, the flat .mc mini card, the no-picture placeholder). No page-level rules (html/body/#app/button resets) and no app screens, so a page that is not the app (the public landing) can use it. The app loads this first, then card.css. The landing gets a copy from tools/landing/sync.sh. */
@font-face{font-family:"Nunito";src:url("../fonts/Nunito-var-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/NotoSansArabic-subset-var.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+25CC}
@font-face{font-family:"Noto Sans Devanagari";src:url("../fonts/NotoSansDevanagari-subset-var.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-subset-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url("../fonts/NotoSansJP-subset-var.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
:root{
  --ink:#2B2630; --ink-2:#4B4553; --page:#FDFCF8;
  --butter:#FBE3A4; --sky:#BEE1F2; --mint:#C8E0C8; --peach:#F8BEA2; --lilac:#D3C0E0; --pink:#F7B7B1;
  --accent:#FBE3A4;
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-zh:"Noto Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-ja:"Nunito","Noto Sans JP","Noto Sans CJK JP","Hiragino Sans",sans-serif;
  --font-ko:"Nunito","Noto Sans KR","Noto Sans CJK KR","Apple SD Gothic Neo",sans-serif;
  /* THE card size constants. Height rules; width = height x --card-ar (not capped by the screen width:
     on 390x844, 70dvh = 591px tall and 0.64 x 591 = 378px = the full width minus 12px margins).
     The card is a screen-only shape, taller than the 106x136 print card (print is a later feature). */
  --card-ar:.64;
  --card-height:70dvh;          /* viewing mode */
  --card-height-edit:57dvh;     /* edit mode, no sheet open (55-60%) */
  --wiz-h:52dvh;                /* the template wizard: the panel height (per step, below); the card fills the room above it */
  --card-h:var(--card-height); --bar-room:16px;
  --top:calc(48px + env(safe-area-inset-top));
  --sheet-h:45dvh; --sheet-in:0px;
  --t:.38s;
}
.glcanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;transition:opacity .16s ease}
.slider{width:100%;display:flex;justify-content:center;will-change:transform;position:relative;z-index:3}
.cardbox{--w:min(calc(100cqw - 12px),var(--card-w-cap,9999px),calc(min(var(--card-h),100cqh - var(--bar-room)) * var(--card-ar)));width:var(--w);aspect-ratio:var(--card-ar);container-type:inline-size;perspective:1600px;position:relative;z-index:3;touch-action:none;outline:none;cursor:pointer}
.cardbox:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:5cqw}
body.gl .cardbox{perspective:none}
body.gl .cardbox .inner{visibility:hidden}
.inner{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s cubic-bezier(.3,.7,.2,1)}
.inner.flipped{transform:rotateY(180deg)}
.inner.noanim{transition:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.7cqw;overflow:hidden;box-shadow:0 1.2cqw 5cqw rgba(43,38,48,.16),0 0 0 .3cqw rgba(43,38,48,.07);background:#fff;display:flex;flex-direction:column;padding:3.8cqw;gap:2.2cqw;color:var(--ink)}
.face.back{transform:rotateY(180deg)}
[data-style=illustrated] .face{background:#FDFCF8}
[data-style=photo] .face{background:#fff}
.face.back,[data-style=illustrated] .face.back,[data-style=photo] .face.back{background-color:color-mix(in srgb,var(--accent) 55%,#fff);background-image:radial-gradient(circle,rgba(255,255,255,.55) 0 .9cqw,transparent 1cqw);background-size:6cqw 6cqw}
/* accent pack (deck look, mockup v4): front = a soft patterned frame around the cream card, back = the pattern on the pastel field.
   --pack-f / --pack-b are SVG data URIs from packs.js (the same shapes the WebGL painter draws); only set when the pack is not 'none' (.pk) */
[data-style=illustrated]{--cbg:#FDFCF8}[data-style=photo]{--cbg:#fff}
.pk .face.front::before{content:"";position:absolute;inset:0;background:var(--pack-f,none) 0 0/100% 100% no-repeat;pointer-events:none}
.pk .face.front::after{content:"";position:absolute;inset:3.1cqw;border-radius:3.6cqw;background:var(--cbg,#FDFCF8);pointer-events:none}
.pk .face.front>*{position:relative;z-index:1}
.pk .face.back,.pk[data-style=illustrated] .face.back,.pk[data-style=photo] .face.back{background-image:var(--pack-b,none);background-size:100% 100%;background-repeat:no-repeat}

/* back (deck look): the picture only, or the look's language ABOVE the picture. No language switcher */
.bk-panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:2cqw;background:rgba(255,255,255,.92);border-radius:3.4cqw;padding:2.4cqw}
.bk-top{flex:1 1 0;min-height:0;width:100%;border-radius:3.4cqw;overflow:hidden;position:relative}
[data-style=illustrated] .bk-top{background:#F3F0E6}
.bk-top img{width:100%;height:100%;display:block}
[data-style=illustrated] .bk-top img{object-fit:contain}
[data-style=photo] .bk-top img{object-fit:cover}
.bk-band{--mix:35;flex:0 0 auto;min-height:30cqw;padding-block:3cqw;box-sizing:border-box;border-radius:3cqw;background:color-mix(in srgb,var(--accent) calc(var(--mix)*1%),#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4cqw;overflow:hidden}
.bk-band.s2{--mix:20}.bk-band.s3{--mix:12}
.bk-band .wline{justify-content:center;max-width:100%}
.bk-band .pron{margin-top:.3cqw;font-size:max(calc(var(--fs)*.34cqw),4.4cqw)}

.pic{flex:1 1 0;min-height:0;position:relative;border-radius:3.8cqw;overflow:hidden}
[data-style=illustrated] .pic{background:#FDFCF8}
.pic img{width:100%;height:100%;display:block;-webkit-user-drag:none;pointer-events:none}
[data-style=illustrated] .pic img{object-fit:contain}
[data-style=photo] .pic img{object-fit:cover}
/* Illustrated figures: the same soft drop shadow as the canvas card (0.7% of the card width down, blur 2.2%, 38% grey-brown); picfit.js sets data-sh once the figure's holes are filled */
[data-style=illustrated] .pic img[data-sh],[data-style=illustrated] .bk-top img[data-sh]{filter:drop-shadow(0 .7cqw 1.1cqw rgba(60,50,60,.38))}

/* language rows: chip + text column. the chip is centred on the WORD line */
.blocks{display:flex;flex-direction:column;gap:1.6cqw}
.blk{--mix:35;background:color-mix(in srgb,var(--accent) calc(var(--mix)*1%),#fff);border-radius:3cqw;padding:1.9cqw 3.4cqw;display:flex;align-items:flex-start;gap:2.6cqw;min-width:0;text-align:left}
.blk.s2{--mix:20}.blk.s3{--mix:12}
.blk[dir=rtl]{text-align:right}
.blk.hiderow>.col,.blk.hiderow>.bpill{visibility:hidden}
.col{flex:1;min-width:0}
.chip{--mix:35;flex:none;display:inline-flex;align-items:center;justify-content:center;width:14.5cqw;height:5.8cqw;border-radius:999px;font-size:3.3cqw;font-weight:900;line-height:1;color:var(--ink);letter-spacing:.01em;background:color-mix(in srgb,color-mix(in srgb,var(--accent) calc(var(--mix)*1% + 28%),#fff) 90%,#2B2630);font-family:var(--font)}
.blk>.chip{margin-top:calc(var(--fs)*.57cqw - 2.9cqw)}
.s2>.chip{--mix:20}.s3>.chip{--mix:12}
.wline{display:flex;align-items:baseline;flex-wrap:nowrap;column-gap:calc(var(--fs)*.26cqw);min-width:0}
.wline>.word{min-width:0;flex:0 1 auto}
.blk[dir=rtl] .wline{flex-direction:row}
.art{flex:none;font-size:calc(var(--fs)*1cqw);font-weight:400;line-height:1.14;white-space:nowrap;--g:transparent;text-decoration:underline solid var(--g);text-decoration-thickness:max(2.5px,.9cqw);text-underline-offset:.12em;text-decoration-skip-ink:none}
.art:not([style]){text-decoration:none}
.art.el{margin-right:calc(var(--fs)*-.26cqw)}
.art.mw{font-size:calc(var(--fs)*.5cqw);font-weight:600;color:#7A7480;font-family:var(--font-zh);text-decoration:none;line-height:1.14}
.word.g{text-decoration:underline solid var(--g);text-decoration-thickness:max(2.5px,.9cqw);text-underline-offset:.14em;text-decoration-skip-ink:none}
.word{display:block;font-weight:800;font-size:calc(var(--fs)*1cqw);line-height:1.14;white-space:nowrap}
.word.zh{font-family:var(--font-zh);font-weight:700}
.word.ja{font-family:var(--font-ja)}.word.ko{font-family:var(--font-ko)}
.word.ar{font-family:"Noto Sans Arabic",var(--font);font-weight:800;line-height:1.3}
.word.hi{font-family:"Noto Sans Devanagari",var(--font);line-height:1.25}
.word.ph{font-weight:700;color:#6A6472;font-style:italic;font-size:calc(var(--fs)*.72cqw)}
.pron.ja{font-family:var(--font-ja)}
.kanji{font-weight:600;font-size:max(calc(var(--fs)*.42cqw),3.2cqw);color:var(--ink-2);line-height:1.15;margin-bottom:.1cqw}
.bk-band .kanji{font-size:max(calc(var(--fs)*.34cqw),4.4cqw);margin-bottom:.3cqw}
.pron{font-weight:600;font-size:max(calc(var(--fs)*.42cqw),3.2cqw);color:var(--ink-2);line-height:1.15;margin-top:.1cqw}

.mc{position:relative;display:block;width:100%;aspect-ratio:var(--card-ar);container-type:inline-size;text-align:left}
.mc .face{position:absolute;inset:0;padding:3.8cqw;gap:2.2cqw;transform:none;backface-visibility:visible;box-shadow:0 1cqw 3.4cqw rgba(43,38,48,.15),0 0 0 .5cqw rgba(43,38,48,.07)}
.mc .blk{padding:1.2cqw 3cqw}
.samplebadge{position:absolute;z-index:3;left:6%;top:6%;padding:2px 7px;border-radius:999px;background:var(--ink);color:#fff;font-weight:900;font-size:10.5px;letter-spacing:.02em;line-height:1.4}
/* Placeholder for a word with no picture yet (Dave's mockup v4): Illustrated = cream with a rounded pastel blob in the card's accent; Daylight Studio =
   the card's pastel with a blurred glow circle; both: a paintbrush-and-sparkle icon in soft ink, a "picture on the way" pill, a slow shimmer sweep
   (off under prefers-reduced-motion). */
.soonpic{position:absolute;inset:0;border-radius:inherit;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;--c:#FBE3A4;pointer-events:none}
.soonpic.il{background:#FDFCF8}
.soonpic.ph{background:color-mix(in srgb,var(--c) 50%,#fff)}
.soonpic .sh{position:absolute;left:50%;top:46%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-6deg);border-radius:32%;background:color-mix(in srgb,var(--c) 50%,#fff)}
.soonpic.ph .sh{width:74%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,255,255,.72) 45%,rgba(255,255,255,0) 71%)}
.soonpic .pbrush{position:relative;width:32cqw;height:32cqw;margin-top:-6%;color:rgba(43,38,48,.6);filter:drop-shadow(0 .6cqw 0 rgba(43,38,48,.12))}
.soonpic::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);animation:soonsw 3.8s ease-in-out infinite;pointer-events:none}
.soonpic.il::after{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%)}
@keyframes soonsw{0%{transform:translateX(-45%)}60%,100%{transform:translateX(45%)}}
.soonpic .mark{position:absolute;left:50%;bottom:4.5cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.4cqw;white-space:nowrap;font-style:normal;font-weight:800;font-size:max(7px,5.8cqw);padding:1.4cqw 3.4cqw 1.4cqw 2.2cqw;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 0 0 .3cqw rgba(43,38,48,.12);color:rgba(43,38,48,.8)}
.soonpic .mark svg{width:max(8px,7cqw);height:max(8px,7cqw)}
.soonpic.sm .pbrush{width:46%;height:46%;margin-top:0}
@media (prefers-reduced-motion:reduce){.soonpic::after{animation:none!important;display:none}}


/* the plain cover (PRO-78, PRO-86): the same on every card, full bleed: no padding, no card colour, no deck pattern behind it */
.face.back:has(> .bk-cover),.pk .face.back:has(> .bk-cover){padding:0;background:none}
.bk-cover{position:absolute;inset:0;width:100%;height:100%;display:block}