/* ===================== nika typing v3 — play screen (chibi cast) ===================== */
/* ---- Shared tokens ---- */
:root{
  --font-zh:"Noto Sans TC","Noto Sans JP",sans-serif;
  --font-ja:"Noto Sans JP","Noto Sans TC",sans-serif;
  --font-target:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  --font-latin:"Nunito","Noto Sans JP",sans-serif;
  --fs-target:50px; --fs-romaji:19px; --fs-input:30px; --fs-mean:17px; --fs-npc:22px;
  --ok:#1E9E6A; --ok-glow:rgba(30,158,106,.45); --ok-soft:rgba(30,158,106,.14);
  --ng:#D7263D; --ng-glow:rgba(215,38,61,.5); --ng-soft:rgba(215,38,61,.12);
  --dlg-h:300px; --dlg-side:150px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font-zh);background:#111;color:var(--ink)}
[lang=ja]{font-family:var(--font-ja)}
svg{display:block}

/* ---- Skin tokens ---- */
[data-skin=a]{ /* ことばのロビー: wooden bookbinding */
  --ink:#3A2E26; --ink-2:#6E5D4E; --ink-3:#9C8B78; --surface:#FBF4E4;
  --accent:#2F5D46; --accent-ink:#FFF8EA; --accent-2:#C99A3B; --confirm:#2F7A55; --confirm-soft:rgba(47,122,85,.12);
  --cur-bg:rgba(201,154,59,.20); --cur-line:#C99A3B;
  --hud-bg:linear-gradient(180deg,#FFF9EC,#F1E2C2); --hud-line:#8B5E3C; --hud-ink:#3A2E26;
  --log-bg:rgba(251,244,228,.90); --log-line:#8B5E3C; --me-bg:#E3EFE6; --me-line:#9CC2AC;
  --bubble-line:#8B5E3C; --grade:rgba(46,26,12,.55); --fx:#E2B85A;
}
[data-skin=b]{ /* ことばの旅: ticket / route map */
  --ink:#24303F; --ink-2:#5C6878; --ink-3:#98A2B0; --surface:#FFFFFF;
  --accent:#2F4A6D; --accent-ink:#FFFFFF; --accent-2:#F2884B; --confirm:#2F4A6D; --confirm-soft:rgba(47,74,109,.10);
  --cur-bg:rgba(242,136,75,.16); --cur-line:#F2884B;
  --hud-bg:#FFFFFF; --hud-line:#2F4A6D; --hud-ink:#24303F;
  --log-bg:rgba(255,255,255,.92); --log-line:#C9D1DB; --me-bg:#E8EEF6; --me-line:#AFC0D6;
  --bubble-line:#2F4A6D; --grade:rgba(24,34,52,.42); --fx:#F2884B;
}
[data-skin=c]{ /* 夜市クエスト: neon sign / lantern */
  --ink:#F2F6FF; --ink-2:#B9C6E6; --ink-3:#7182AE; --surface:#0E1B3D;
  --accent:#3FE0E8; --accent-ink:#04223A; --accent-2:#FFC857; --confirm:#3FE0E8; --confirm-soft:rgba(63,224,232,.12);
  --cur-bg:rgba(255,200,87,.16); --cur-line:#FFC857;
  --hud-bg:linear-gradient(180deg,rgba(18,30,68,.92),rgba(9,17,42,.92)); --hud-line:#3FE0E8; --hud-ink:#F2F6FF;
  --log-bg:rgba(9,17,42,.78); --log-line:rgba(63,224,232,.45); --me-bg:rgba(63,224,232,.14); --me-line:rgba(63,224,232,.5);
  --bubble-line:#3FE0E8; --grade:rgba(4,8,26,.62); --fx:#FFC857;
  --ok:#2EE59D; --ok-glow:rgba(46,229,157,.55); --ok-soft:rgba(46,229,157,.14);
  --ng:#FF4D6D; --ng-glow:rgba(255,77,109,.55); --ng-soft:rgba(255,77,109,.16);
}

/* ---- World: painted bg, mascot, foreground table ---- */
.world{position:absolute;inset:0;overflow:hidden}
.world img.bg,.world img.fg{position:absolute;max-width:none}
.world .cat{position:absolute;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.world img.fg{z-index:2}
.grade{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,var(--grade) 0,transparent 140px),
  linear-gradient(0deg,var(--grade) 0,transparent 42%)}
.d .grade{background:linear-gradient(180deg,var(--grade) 0,transparent 130px),linear-gradient(0deg,var(--grade) 0,transparent 46%),linear-gradient(90deg,var(--grade) 0,transparent 30%)}

/* ---- HUD (top) ---- */
.hud{position:absolute;z-index:10;top:14px;left:18px;right:18px;display:flex;align-items:flex-start;gap:12px}
.plate{background:var(--hud-bg);color:var(--hud-ink);border:2px solid var(--hud-line);border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.22)}
.rbtn{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center}
.rbtn svg{width:22px;height:22px}
.scene{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 8px}
.scene .no{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:900 15px/1 var(--font-latin)}
.scene b{display:block;font-size:16px;font-weight:900;letter-spacing:.02em}
.scene small{display:block;font:800 10.5px/1.3 var(--font-latin);letter-spacing:.12em;color:var(--ink-3)}
[data-skin=c] .scene small{color:#8FA6D8}
.prog{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:6px}
.prog .count{font:900 15px/1 var(--font-latin);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);margin-left:6px}
.prog .count small{opacity:.8}
.hudstrip{margin-left:auto;display:flex;align-items:center;height:46px;padding:0 6px 0 16px;gap:0}
.hudstrip .mt{display:flex;align-items:center;gap:8px;padding:0 14px}
.hudstrip .mt+.mt{border-left:2px solid color-mix(in srgb,var(--hud-line) 30%,transparent)}
.hudstrip .mt svg{width:20px;height:20px;color:var(--accent)}
[data-skin=a] .hudstrip .mt svg{color:var(--accent)}
.hudstrip .v{font:900 22px/1 var(--font-latin)}
.hudstrip .v small{font-size:13px;margin-left:1px}
.hudstrip .l{font:800 10px/1.1 var(--font-latin);letter-spacing:.1em;color:var(--ink-3)}
.hudstrip .flame{color:#F29A3A!important}
.hudstrip .pz{width:38px;height:38px;margin-left:6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.hudstrip .pz svg{width:18px;height:18px;color:var(--accent-ink)}
.hudstrip .hot .v{color:var(--ok)} .hudstrip .drop{color:var(--ng);font:900 12px/1 var(--font-latin);margin-left:4px}
.hudstrip .broken .v{color:var(--ink-3);text-decoration:line-through}
/* progress skins */
[data-skin=a] .prog{top:-14px;padding:14px 14px 0;}
[data-skin=a] .prog::before{content:"";position:absolute;left:4px;right:44px;top:6px;height:12px;border-radius:6px;background:linear-gradient(180deg,#9A6A42,#6B4429);box-shadow:0 3px 6px rgba(0,0,0,.35)}
[data-skin=a] .prog .node{position:relative;margin-top:2px}
[data-skin=b] .prog{background:rgba(255,255,255,.94);border:2px solid #2F4A6D;border-radius:999px;padding:6px 16px 4px;gap:0;box-shadow:0 4px 0 rgba(0,0,0,.15)}
[data-skin=b] .prog .node{display:flex;flex-direction:column;align-items:center;gap:1px;width:46px;position:relative}
[data-skin=b] .prog .node em{font-style:normal;font-size:10px;font-weight:700;color:#5C6878}
[data-skin=b] .prog .node.n-cur em{color:#2F4A6D;font-weight:900}
[data-skin=b] .prog .node+.node::before{content:"";position:absolute;right:31px;top:15px;width:30px;height:4px;background:#2F4A6D;border-radius:2px;z-index:-1}
[data-skin=b] .prog .node.n-todo::before{background:repeating-linear-gradient(90deg,#9AA6B6 0 5px,transparent 5px 9px)}
[data-skin=b] .prog .count{color:#24303F;text-shadow:none}
[data-skin=c] .prog{top:-16px;padding:16px 10px 0}
[data-skin=c] .prog::before{content:"";position:absolute;left:0;right:40px;top:12px;height:14px;border-top:2px solid #1B2347;border-radius:50%}
[data-skin=c] .prog .node{margin-top:4px}

/* ---- Backlog (desktop) ---- */
.log{position:absolute;z-index:6;left:24px;top:92px;width:300px;padding:12px 12px 14px;border-radius:16px;background:var(--log-bg);border:2px solid var(--log-line);box-shadow:0 10px 24px rgba(0,0,0,.22);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 54px)}
.log h4{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.08em;margin:0 2px 8px}
.log h4 svg{width:15px;height:15px}
.turn{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.turn .ic{flex:none;width:26px;height:24px}
.turn .t{padding:7px 11px 7px;border-radius:12px;font-size:14.5px;line-height:1.35;font-weight:500;max-width:236px}
.turn .t small{display:block;font-size:11px;color:var(--ink-3);font-family:var(--font-zh);margin-top:1px}
.turn.npc .t{background:#fff;color:#2B2F36;border:1.5px solid #E2DACB;border-bottom-left-radius:4px}
.turn.npc .t small{color:#8A8F99}
.turn.me{justify-content:flex-end}
.turn.me .t{background:var(--me-bg);border:1.5px solid var(--me-line);border-bottom-right-radius:4px;color:var(--ink)}
.turn.me .ok{flex:none;width:20px;height:20px;border-radius:50%;background:var(--confirm);color:var(--surface);display:grid;place-items:center;margin-bottom:4px}
[data-skin=c] .turn.me .ok{color:#04223A}
.turn.me .ok svg{width:12px;height:12px}
.logpill{display:none}

/* ---- NPC bubble (opposing turn) ---- */
.bubble{position:absolute;z-index:7;background:#FFFFFF;color:#2B2F36;border:3px solid var(--bubble-line);border-radius:22px;padding:16px 22px 13px;box-shadow:0 6px 0 rgba(0,0,0,.12),0 16px 30px rgba(0,0,0,.25);max-width:400px}
.bubble::before{content:"";position:absolute;left:-17px;top:34px;border:10px solid transparent;border-right:17px solid var(--bubble-line);border-left:0}
.bubble::after{content:"";position:absolute;left:-11px;top:37px;border:7px solid transparent;border-right:13px solid #fff;border-left:0}
.bubble .who{position:absolute;top:-13px;left:18px;display:flex;align-items:center;gap:6px;font:800 11px/1 var(--font-latin);letter-spacing:.12em;background:var(--bubble-line);color:#fff;padding:5px 10px 5px 6px;border-radius:999px}
[data-skin=c] .bubble .who{color:#04223A}
.bubble .who i{width:16px;height:14px;display:block}
.bubble .ja{font-family:var(--font-target);font-weight:700;font-size:var(--fs-npc);line-height:1.4;white-space:nowrap}
.bubble .zh{font-size:14px;color:#6E7480;margin-top:3px}
[data-skin=c] .bubble{box-shadow:0 0 0 4px rgba(63,224,232,.22),0 0 26px rgba(63,224,232,.5),0 16px 30px rgba(0,0,0,.4)}

/* ---- Dialogue window (player's turn) ---- */
.dlg{position:absolute;z-index:8;left:var(--dlg-side);right:var(--dlg-side);bottom:16px;height:var(--dlg-h)}
.page{position:relative;height:100%;display:flex;flex-direction:column;padding:28px 34px 14px}
.tab{position:absolute;z-index:3;top:-17px;left:30px;display:flex;align-items:center;gap:8px;height:34px;padding:0 16px 0 10px;border-radius:10px;font-weight:900;font-size:15px;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.tab small{font:900 10px/1 var(--font-latin);letter-spacing:.16em;opacity:.8}
.tab .tri{width:0;height:0;border:6px solid transparent;border-left:9px solid currentColor;border-right:0}
.mean{display:flex;align-items:center;gap:10px;font-size:var(--fs-mean);color:var(--ink-2)}
.mean .chip{font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:7px;background:var(--confirm-soft);color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent)}
[data-skin=c] .mean .chip{color:var(--accent)}
.mean b{color:var(--ink);font-weight:700}
.line{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;position:relative;min-height:0}
.seg{display:flex;flex-direction:column;align-items:center;position:relative;padding:0 3px}
.seg .jp{font-family:var(--font-target);font-weight:900;font-size:var(--fs-target);line-height:1.15;letter-spacing:.03em;color:var(--ink);opacity:.6;padding:0 4px;border-radius:10px;position:relative}
.seg .rm{font:800 var(--fs-romaji)/1.1 var(--font-latin);letter-spacing:.05em;margin-top:7px;color:var(--ink-3);opacity:.35}
.seg.done .jp{color:var(--confirm);opacity:1}
.seg.done .jp::after{content:"";position:absolute;left:4px;right:4px;bottom:-3px;height:4px;border-radius:3px;background:var(--confirm)}
.seg.done .rm{color:var(--confirm);opacity:.9}
.seg .ck{position:absolute;right:-6px;top:-4px;width:20px;height:20px;border-radius:50%;background:var(--confirm);color:var(--surface);display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--surface)}
[data-skin=c] .seg .ck{color:#04223A}
.seg .ck svg{width:12px;height:12px}
.seg.cur .jp{opacity:1;color:var(--ink);background:var(--cur-bg);box-shadow:inset 0 -5px 0 var(--cur-line)}
.seg.cur .rm{color:var(--ink);opacity:.62}
.seg.cur::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top:9px solid var(--cur-line);border-bottom:0}
.seg.next .rm{opacity:.2}
.seg.bad .jp .w{color:var(--ng);box-shadow:0 0 0 3px var(--ng);border-radius:8px;background:var(--ng-soft)}
.seg.bad .rm{color:var(--ng);opacity:1;text-decoration:underline wavy var(--ng);text-underline-offset:5px}
.input{position:relative;margin-top:14px;height:78px;display:flex;align-items:center;gap:14px;padding:0 14px;border-radius:18px;background:var(--in-bg,#FFFFFF);border:3px solid var(--accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent),0 8px 20px rgba(0,0,0,.12),inset 0 3px 0 rgba(0,0,0,.05)}
.ime{flex:none;width:46px;height:46px;border-radius:13px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:900 22px/1 var(--font-ja)}
.typed{flex:1;font:700 var(--fs-input)/1 var(--font-ja);color:var(--ink);display:flex;align-items:center;white-space:nowrap}
.typed .comp{border-bottom:3px dotted var(--ink);padding-bottom:3px}
.typed .bad{color:var(--ng);text-decoration:underline wavy var(--ng);text-underline-offset:8px}
.typed .ph{color:var(--ink-3);font-weight:500;font-size:20px;display:flex;align-items:center;gap:8px}
.typed .ph svg{width:24px;height:24px}
.caret{display:inline-block;width:3px;height:34px;background:var(--accent);border-radius:2px;margin-left:4px;box-shadow:0 0 8px var(--accent)}
.key{display:inline-flex;align-items:center;gap:5px;font:900 12px/1 var(--font-latin);color:var(--ink-2);padding:6px 8px;border-radius:8px;border:2px solid color-mix(in srgb,var(--ink-3) 55%,transparent);border-bottom-width:4px;background:transparent;white-space:nowrap}
.key svg{width:14px;height:14px}
.okmark{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px var(--ok-soft),0 0 18px var(--ok-glow)}
.okmark svg{width:26px;height:26px}
.ctrl{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.ctrl .q{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.ctrl .q svg{width:18px;height:18px}
.ctrl .q .key{padding:4px 6px;font-size:11px;border-bottom-width:3px}
.ctrl .state{font-size:12.5px;color:var(--ink-3)}
.ctrl .state b{color:var(--ink-2)}
.ctrl .sp{flex:1}

/* ---- Skin frames ---- */
/* A: wooden bookbinding — wood board, paper page, brass corner protectors, ribbon bookmark, stitched spine */
[data-skin=a] .dlg{padding:12px;border-radius:12px;background:
  repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
  repeating-linear-gradient(88deg,rgba(0,0,0,.08) 0 1px,transparent 1px 13px),
  linear-gradient(180deg,#A2714A,#7B4F2F 55%,#5E3B22);border:2px solid #3E2614;box-shadow:0 18px 40px rgba(30,15,5,.55),inset 0 2px 0 rgba(255,225,180,.35)}
[data-skin=a] .page{border-radius:6px;background:
  radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.65),transparent 60%),
  radial-gradient(ellipse at 100% 100%,rgba(176,128,72,.22),transparent 55%),
  radial-gradient(ellipse at 0% 100%,rgba(176,128,72,.18),transparent 50%),
  repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 4px),#F8EFD9;
  box-shadow:inset 0 0 0 1px #D8C29A,inset 0 0 26px rgba(150,105,55,.25)}
[data-skin=a] .page::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;border-left:2px dashed rgba(139,94,60,.35)}
[data-skin=a] --in-bg{}
[data-skin=a] .input{--in-bg:#FFFDF6}
.o{display:none;position:absolute;pointer-events:none}
[data-skin=a] .oa{display:block}
.oa.cn{width:46px;height:46px;background:linear-gradient(135deg,#F2D58A,#B8892F 60%,#8E6620);filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.oa.cn::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#FFF3C8;box-shadow:0 0 0 1.5px #7A561A}
.oa.tl{top:-2px;left:-2px;clip-path:polygon(0 0,100% 0,0 100%)}.oa.tl::after{left:9px;top:9px}
.oa.tr{top:-2px;right:-2px;clip-path:polygon(0 0,100% 0,100% 100%)}.oa.tr::after{right:9px;top:9px}
.oa.bl{bottom:-2px;left:-2px;clip-path:polygon(0 0,0 100%,100% 100%)}.oa.bl::after{left:9px;bottom:9px}
.oa.br{bottom:-2px;right:-2px;clip-path:polygon(100% 0,100% 100%,0 100%)}.oa.br::after{right:9px;bottom:9px}
.oa.rib{top:-22px;right:84px;width:34px;height:92px;background:linear-gradient(90deg,#24493A,#3D6E55 45%,#24493A);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.oa.rib::after{content:"";position:absolute;left:9px;top:46px;width:16px;height:16px;background:#E2B85A;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="16" rx="5" ry="4"/><circle cx="6" cy="10" r="2.2"/><circle cx="10" cy="6.5" r="2.2"/><circle cx="14" cy="6.5" r="2.2"/><circle cx="18" cy="10" r="2.2"/></svg>') center/contain no-repeat}
[data-skin=a] .tab{background:linear-gradient(180deg,#FFF9EA,#F0E0BE);color:#3A2E26;border:2px solid #B8892F;box-shadow:0 0 0 3px #FFF7E6,0 0 0 4.5px #B8892F,0 5px 10px rgba(0,0,0,.25)}
[data-skin=a] .tab .tri{color:var(--accent)}
[data-skin=a] .hudstrip,[data-skin=a] .scene,[data-skin=a] .rbtn{border-color:#8B5E3C;box-shadow:0 0 0 2px #FFF7E6 inset,0 4px 0 rgba(60,30,10,.35),0 10px 22px rgba(0,0,0,.25)}
[data-skin=a] .log{background:linear-gradient(180deg,rgba(251,244,228,.93),rgba(244,232,206,.93));border-color:#8B5E3C}

/* B: ticket — stub with perforation & punch notches, guilloche, orange/navy stripes */
[data-skin=b] .dlg{filter:drop-shadow(0 14px 22px rgba(20,30,50,.35))}
.ob.paper{inset:0;border-radius:16px;background:#fff;
  -webkit-mask:radial-gradient(circle at 92px 0,transparent 13px,#000 14px) top/100% 51% no-repeat,radial-gradient(circle at 92px 100%,transparent 13px,#000 14px) bottom/100% 51% no-repeat}
[data-skin=b] .page{margin-left:92px;padding-left:30px;background:
  repeating-radial-gradient(circle at 85% 120%,rgba(47,74,109,.045) 0 2px,transparent 2px 9px),#FFFFFF;border-radius:0 16px 16px 0}
[data-skin=b] .ob{display:block}
.ob.stub{left:0;top:0;bottom:0;width:92px;background:linear-gradient(180deg,#F7F3EC,#EFE9DF);border-radius:16px 0 0 16px;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#2F4A6D}
[data-skin=b] .ob.stub{display:flex}
.ob.stub .v{writing-mode:vertical-rl;font:900 15px/1 var(--font-zh);letter-spacing:.3em}
.ob.stub .n{font:900 28px/1 var(--font-latin)}
.ob.stub .n small{font-size:13px;color:#98A2B0}
.ob.stub .p{width:26px;height:26px;border-radius:50%;border:2.5px dashed #F2884B}
.ob.perf{left:91px;top:16px;bottom:16px;border-left:3px dotted #C9C2B6}
.ob.stripe{left:92px;right:0;top:0;height:8px;border-radius:0 16px 0 0;background:linear-gradient(180deg,#F2884B 0 5px,#2F4A6D 5px 8px)}
.ob.no{right:22px;top:16px;font:800 10.5px/1 var(--font-latin);letter-spacing:.18em;color:#98A2B0}
[data-skin=b] .tab{left:118px;background:#2F4A6D;border-radius:8px 8px 8px 2px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
[data-skin=b] .rbtn,[data-skin=b] .scene,[data-skin=b] .hudstrip{border-color:#2F4A6D}

/* C: neon sign — glass panel, neon tubes with caps, gold brackets, hanging lanterns */
[data-skin=c] .dlg{border-radius:20px;background:linear-gradient(180deg,rgba(16,30,70,.94),rgba(8,15,38,.96));box-shadow:0 0 0 2px rgba(63,224,232,.25),0 24px 60px rgba(0,0,0,.6)}
[data-skin=c] .page{--in-bg:rgba(5,12,32,.85)}
[data-skin=c] .oc{display:block}
.oc.tube{background:#CFFCFF;border-radius:6px;box-shadow:0 0 4px #3FE0E8,0 0 12px #3FE0E8,0 0 24px rgba(63,224,232,.7)}
.oc.t{top:-3px;left:44px;right:44px;height:6px}.oc.b{bottom:-3px;left:44px;right:44px;height:6px}
.oc.l{left:-3px;top:40px;bottom:40px;width:6px}.oc.r{right:-3px;top:40px;bottom:40px;width:6px}
.oc.br2{width:30px;height:30px;border:4px solid #FFC857;filter:drop-shadow(0 0 5px rgba(255,200,87,.7))}
.oc.k1{top:-8px;left:-8px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.oc.k2{top:-8px;right:-8px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.oc.k3{bottom:-8px;left:-8px;border-right:0;border-top:0;border-radius:0 0 0 10px}.oc.k4{bottom:-8px;right:-8px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.oc.lan{top:-74px;width:40px}.oc.lan.l1{left:60px}.oc.lan.r1{right:60px}
[data-skin=c] .tab{background:#0A1430;color:#FFE3A0;border:2px solid #FFC857;text-shadow:0 0 6px #FFC857,0 0 14px rgba(255,200,87,.7);box-shadow:0 0 12px rgba(255,200,87,.45)}
[data-skin=c] .input{box-shadow:0 0 0 6px rgba(63,224,232,.14),0 0 24px rgba(63,224,232,.45),inset 0 2px 10px rgba(0,0,0,.5)}
[data-skin=c] .seg .jp{text-shadow:0 2px 0 rgba(0,0,0,.4)}
[data-skin=c] .seg.done .jp{text-shadow:0 0 14px rgba(63,224,232,.55)}
[data-skin=c] .rbtn,[data-skin=c] .scene,[data-skin=c] .hudstrip{border-color:rgba(63,224,232,.7);box-shadow:0 0 14px rgba(63,224,232,.35),0 10px 22px rgba(0,0,0,.4)}
[data-skin=c] .key{color:var(--ink-2);border-color:#3A4F86}

/* ---- FX: correct ---- */
.fx{position:absolute;pointer-events:none;z-index:9}
.st-correct .seg .jp{color:var(--ok)!important;opacity:1!important}
.st-correct .seg .jp::after{background:var(--ok)!important}
.st-correct .seg .rm{color:var(--ok)!important;opacity:.9!important}
.st-correct .seg .ck{background:var(--ok)}
.st-correct .input{border-color:var(--ok);box-shadow:0 0 0 7px var(--ok-soft),0 0 28px var(--ok-glow)}
.st-correct .ime{background:var(--ok);color:#fff}
[data-skin=c].st-correct .oc.tube{background:#E6FFF4;box-shadow:0 0 5px var(--ok),0 0 16px var(--ok),0 0 34px rgba(46,229,157,.8)}
.fx-a-stamp{right:46px;top:26px;width:112px;height:112px;transform:rotate(-12deg)}
.fx-a-curl{right:12px;top:12px;width:120px;height:120px}
.fx-b-stamp{right:40px;top:22px;width:126px;height:126px;transform:rotate(10deg)}
.fx-c-neon{right:40px;top:-58px;transform:rotate(-4deg);font:900 italic 34px/1 var(--font-latin);letter-spacing:.06em;color:#E9FFF6;padding:8px 18px;border:3px solid var(--ok);border-radius:12px;background:rgba(6,20,30,.85);
  text-shadow:0 0 6px var(--ok),0 0 18px var(--ok);box-shadow:0 0 14px var(--ok-glow),inset 0 0 12px var(--ok-glow)}
.fireworks{position:absolute;z-index:1;pointer-events:none}
.sparkles{position:absolute;inset:0;z-index:9;pointer-events:none}
/* ---- FX: miss ---- */
.vignette{position:absolute;inset:0;z-index:11;pointer-events:none;box-shadow:inset 0 0 160px var(--ng-glow)}
.st-miss .input{border-color:var(--ng);box-shadow:0 0 0 7px var(--ng-soft),0 0 26px var(--ng-glow);transform:translateX(-6px)}
.st-miss .input::before{content:"";position:absolute;inset:-3px;border:3px solid var(--ng);border-radius:18px;transform:translateX(14px);opacity:.3}
.st-miss .ime{background:var(--ng);color:#fff}
.toast{position:absolute;z-index:4;right:18px;top:-50px;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:12px;background:var(--ng);color:#fff;font-size:15px;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.3);white-space:nowrap}
.toast::after{content:"";position:absolute;right:52px;bottom:-9px;border:9px solid transparent;border-top-color:var(--ng);border-bottom:0}
.toast .xi{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ng);display:grid;place-items:center}
.toast .xi svg{width:14px;height:14px}
.toast b{font-family:var(--font-ja);font-size:18px}
.toast .r{font:800 14px/1 var(--font-latin);opacity:.92}
.shake{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:44px}
.shake.l{left:-30px}.shake.r{right:-34px}
.misstag{position:absolute;z-index:9;left:24px;top:-18px;transform:rotate(-6deg);font:900 italic 22px/1 var(--font-latin);color:#fff;background:var(--ng);padding:6px 14px 5px;border-radius:10px;box-shadow:0 0 0 3px #fff,0 0 16px var(--ng-glow)}

/* ---- OS keyboard placeholder ---- */
.oskb{position:absolute;z-index:20;left:0;right:0;bottom:0;height:300px;background:#D3D6DC;padding:0 4px 8px;font-family:-apple-system,"Noto Sans JP",sans-serif;border-top:1px solid #B9BDC5}
.cands{display:flex;height:42px;align-items:center;gap:0;background:#E9EBEF;margin:0 -4px 8px;border-bottom:1px solid #C3C7CE}
.cands span{flex:1;text-align:center;font-size:17px;color:#222;border-right:1px solid #CDD0D6}
.cands span.sel{font-weight:700}
.krow{display:flex;gap:6px;margin:0 0 10px;justify-content:center}
.oskb .key{all:unset;flex:1;height:42px;display:grid;place-items:center;background:#fff;border-radius:6px;box-shadow:0 1px 0 #898C92;font-size:19px;color:#111;max-width:34px}
.oskb .key.wide{max-width:44px;background:#ABB0BA}
.oskb .key.fn{max-width:48px;background:#ABB0BA;font-size:14px}
.oskb .key.space{max-width:none;flex:4;font-size:14px}
.oskb .key.ret{max-width:84px;flex:1.4;background:#2F7BF6;color:#fff;font-weight:700}
.kblabel{position:absolute;right:8px;bottom:262px;transform:translateY(-100%);display:none}
.oskb::after{content:"OS 鍵盤區域（示意）· OS keyboard area";position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);font:700 12px/1 var(--font-zh);color:#5B6170;background:rgba(255,255,255,.82);padding:7px 12px;border-radius:999px;border:1px dashed #8A90A0;letter-spacing:.04em}

/* ======== Mobile ======== */
.m{--fs-target:28px;--fs-romaji:13.5px;--fs-input:21px;--fs-mean:13.5px;--fs-npc:16px}
.m .hud{top:8px;left:8px;right:8px;gap:6px}
.m .rbtn{width:36px;height:36px}.m .rbtn svg{width:18px;height:18px}
.m .scene{display:none}
.m .prog{position:static;transform:none;margin:0 auto 0 4px;gap:2px}
.m[data-skin=a] .prog{padding:12px 4px 0;margin-top:-10px}
.m[data-skin=a] .prog .node{transform:scale(.8);margin:0 -2px}
.m[data-skin=b] .prog{padding:4px 8px 2px}
.m[data-skin=b] .prog .node{width:30px}
.m[data-skin=b] .prog .node em{display:none}
.m[data-skin=b] .prog .node svg{width:24px!important;height:24px!important}
.m[data-skin=b] .prog .node+.node::before{right:22px;top:10px;width:16px}
.m[data-skin=c] .prog{padding:12px 2px 0;margin-top:-10px}
.m[data-skin=c] .prog .node{transform:scale(.78);margin:0 -4px}
.m .prog .count{font-size:13px;margin-left:2px}
.m .hudstrip{margin-left:0;height:36px;padding:0 3px 0 6px}
.m .hudstrip .mt{padding:0 7px;gap:4px}
.m .hudstrip .mt svg{width:14px;height:14px}
.m .hudstrip .v{font-size:15px}.m .hudstrip .v small{font-size:10px}
.m .hudstrip .l{display:none}
.m .hudstrip .pz{width:30px;height:30px;margin-left:2px}
.m .log{display:none}
.m .logpill{display:flex;position:absolute;z-index:7;left:8px;top:54px;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border-radius:999px;background:var(--log-bg);border:1.5px solid var(--log-line);font-size:11.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.logpill .no{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:900 10px/1 var(--font-latin)}
.logpill .c{display:flex;align-items:center;gap:3px;color:var(--ink-2);font-weight:800;padding-left:6px;border-left:1.5px solid var(--log-line)}
.logpill .c svg{width:13px;height:13px}
.m .bubble{padding:11px 13px 9px;border-radius:16px;max-width:none}
.m .bubble .who{top:-11px;left:12px;font-size:9.5px;padding:4px 8px 4px 5px}
.m .bubble .zh{font-size:11px}
.m .dlg{left:8px;right:8px;bottom:8px}
.m .page{padding:22px 16px 10px}
.m .tab{left:16px;top:-15px;height:28px;font-size:13px;padding:0 12px 0 8px}
.m .tab small{display:none}
.m .mean{gap:7px}
.m .mean .chip{font-size:10px;padding:3px 6px}
.m .seg{padding:0 1px}
.m .seg .jp{padding:0 2px}
.m .seg .rm{margin-top:4px}
.m .seg .ck{width:15px;height:15px;right:-4px;top:-3px}.m .seg .ck svg{width:9px;height:9px}
.m .seg.cur::before{top:-11px;border-width:5px;border-top-width:7px}
.m .input{height:56px;margin-top:10px;gap:10px;padding:0 10px;border-radius:15px}
.m .ime{width:36px;height:36px;font-size:17px;border-radius:10px}
.m .caret{height:25px}
.m .typed .ph{font-size:15px}
.m .ctrl{margin-top:8px;font-size:12.5px;gap:8px}
.m .ctrl .q{padding:6px 10px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--ink-3) 45%,transparent)}
.m .ctrl .q .key{display:none}
.m .ctrl .state{font-size:11px}
.m[data-skin=a] .dlg{padding:8px}
.m .oa.cn{width:30px;height:30px}.m .oa.cn::after{width:4px;height:4px}
.m .oa.tl::after{left:6px;top:6px}.m .oa.tr::after{right:6px;top:6px}.m .oa.bl::after{left:6px;bottom:6px}.m .oa.br::after{right:6px;bottom:6px}
.m .oa.rib{right:36px;width:24px;height:62px;top:-16px}.m .oa.rib::after{left:5px;top:30px;width:14px;height:14px}
.m .ob.paper{-webkit-mask:radial-gradient(circle at 0 50%,transparent 10px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 10px,#000 11px) right/51% 100% no-repeat}
.m[data-skin=b] .page{margin-left:0;padding-left:16px;border-radius:16px;padding-top:24px}
.m .ob.stub,.m .ob.perf,.m .ob.no{display:none!important}
.m .ob.stripe{left:0;border-radius:16px 16px 0 0}
.m[data-skin=b] .tab{left:16px}
.m .oc.lan{display:none}
.m .oc.t,.m .oc.b{left:28px;right:28px}.m .oc.l,.m .oc.r{top:26px;bottom:26px}
.m .oc.br2{width:22px;height:22px;border-width:3px}
.m .toast{right:6px;top:-44px;font-size:12.5px;padding:7px 10px 7px 7px}.m .toast b{font-size:15px}.m .toast .r{font-size:11.5px}
.m .toast::after{right:40px}
.m .misstag{font-size:16px;left:auto;right:10px;top:-14px;padding:5px 10px 4px}
.m .shake{display:none}
.m .vignette{box-shadow:inset 0 0 80px var(--ng-glow)}

/* mobile dialogue budgets */
.m{--dlg-h:292px}
.k{--dlg-h:226px}
.k .dlg{bottom:308px}
.k .page{padding:18px 14px 8px}
.k .input{height:50px;margin-top:6px}
.k .ctrl{margin-top:6px}
.k .mean{font-size:12.5px}

.seg{flex:none;white-space:nowrap}
.prog .count{white-space:nowrap}
.m .prog .count{display:none}
.m .hudstrip .flame svg{width:16px!important;height:16px!important}
/* tail-down bubble (mobile, bubble above the cat) */
.bubble.tdown::before{left:46px;top:auto;bottom:-18px;border:10px solid transparent;border-top:17px solid var(--bubble-line);border-bottom:0}
.bubble.tdown::after{left:49px;top:auto;bottom:-11px;border:7px solid transparent;border-top:13px solid #fff;border-bottom:0}
/* keyboard placeholder: dim keys so the label reads */
.oskb .krow{opacity:.55}
.oskb::after{white-space:nowrap;font-size:12.5px;top:56%;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.m .prog{position:relative}
.m[data-skin=a] .prog::before{left:0;right:0}
.m[data-skin=c] .prog::before{left:0;right:0}
.m[data-skin=b] .prog{padding:4px 6px 2px}
.m[data-skin=b] .prog .node{width:27px}
.m[data-skin=b] .prog .node+.node::before{right:19px;width:12px}
.k .page{padding-top:24px}
.m[data-skin=a].k .page{padding-top:22px}
.m .prog{left:auto;top:auto}
.toast.top{top:-22px;right:10px;z-index:12}
.toast.top::after{display:none}
.toast.top em{font:900 italic 13px/1 var(--font-latin);background:#fff;color:var(--ng);padding:3px 6px;border-radius:6px;margin-right:2px}
.k{--dlg-h:238px}
.k .line{margin-top:8px}
.m[data-skin=a].k .page{padding-top:28px}
.misstag{left:200px;top:-16px}
.fx-b-stamp{right:14px;top:8px;width:108px;height:108px}
.st-correct .ob.stub .p{border:0;background:radial-gradient(circle,#1C2A3D 0 55%,#4A5A70 58%,transparent 62%);box-shadow:0 0 0 3px rgba(242,136,75,.35)}
.st-correct .ob.stub .n{color:var(--ok)}
.k .seg.cur::before{top:-9px;border-width:4px;border-top-width:6px}
.k .line{margin-top:12px}
.misstag{left:238px}
.fx-b-stamp{right:-22px;top:-58px;width:118px;height:118px;z-index:12;filter:drop-shadow(0 2px 0 rgba(255,255,255,.8))}
.fx-b-stamp circle:first-child{}
.fx-b-stamp{right:6px;top:-18px;width:110px;height:110px;filter:none}

/* ======== v3: chibi cast ======== */
[data-skin=a]{--chara-f:saturate(.96) sepia(.06);--rim:rgba(255,226,170,.9)}
[data-skin=b]{--chara-f:none;--rim:rgba(255,255,255,.95)}
[data-skin=c]{--chara-f:brightness(.9) saturate(1.05);--rim:rgba(120,240,250,.85)}
.chara{position:absolute;z-index:2}
.chara img{width:100%;height:100%;display:block;filter:var(--chara-f) drop-shadow(0 0 1.5px var(--rim)) drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.chara.extra{z-index:1}
.chara.extra img{filter:var(--chara-f) brightness(.9) saturate(.82) blur(.6px) drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.chara.me{z-index:4}
.chara.happy{transform:translateY(-8px)}
.chara.confused{transform:rotate(-3deg);transform-origin:50% 80%}
.chara.confused img{filter:var(--chara-f) saturate(.85) drop-shadow(0 0 1.5px var(--rim)) drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.emotewrap{position:absolute;z-index:6;pointer-events:none}
.emotewrap svg{width:100%;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
/* bubble who tag with avatar */
.bubble .who{padding:3px 11px 3px 3px;font-family:var(--font-zh);font-size:12px;letter-spacing:.06em}
.bubble .who .av{width:22px;height:22px;border-radius:50%;display:block;box-shadow:0 0 0 1.5px #fff}
/* backlog avatars */
.turn .ic{width:30px;height:30px}
.turn .ic .av{width:30px;height:30px;border-radius:50%;display:block;box-shadow:0 0 0 2px #fff,0 2px 4px rgba(0,0,0,.2)}
.turn.me .ic{order:3}
/* extras murmur (atmosphere, never the target) */
.murmur{position:absolute;z-index:6;display:flex;flex-direction:column;gap:1px;padding:7px 11px 7px;border-radius:14px;background:rgba(255,255,255,.72);color:#4A505C;font-size:13px;line-height:1.3;backdrop-filter:blur(4px);border:1.5px dashed rgba(90,96,110,.4);box-shadow:0 4px 10px rgba(0,0,0,.15);max-width:200px}
.murmur small{font-size:10.5px;color:#7A808C}
.murmur .tag{align-self:flex-start;font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:#8A909C;border-radius:999px;padding:1px 7px;margin-bottom:2px}
.murmur::after{content:"";position:absolute;left:40px;bottom:-9px;border:8px solid transparent;border-top:9px solid rgba(255,255,255,.72);border-bottom:0}
[data-skin=c] .murmur{background:rgba(20,32,70,.7);color:#C9D4F2;border-color:rgba(160,180,230,.35)}
[data-skin=c] .murmur small{color:#8C9AC4}
[data-skin=c] .murmur::after{border-top-color:rgba(20,32,70,.7)}
/* learner: typing indicator (player's turn) */
.typing{position:absolute;z-index:7;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:19px;background:var(--me-bg);border:2.5px solid var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.22)}
[data-skin=c] .typing{background:#0E1B3D;box-shadow:0 0 14px rgba(63,224,232,.5)}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.9}
.typing i:nth-child(2){opacity:.6}.typing i:nth-child(3){opacity:.3}
.typing::after{content:"";position:absolute;right:-12px;bottom:4px;border:7px solid transparent;border-left:13px solid var(--accent);border-right:0;transform:rotate(25deg)}
.typing.oops{border-color:var(--ng)}
.typing.oops i{background:var(--ng)}
.typing.oops::after{border-left-color:var(--ng)}
.typing b{font:900 15px/1 var(--font-latin);color:var(--ng)}
/* learner: reply just said (correct state) */
.mesay{position:absolute;z-index:7;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:16px;background:var(--me-bg);border:2.5px solid var(--ok);font:700 16px/1.2 var(--font-ja);color:var(--ink);box-shadow:0 0 0 5px var(--ok-soft),0 8px 18px rgba(0,0,0,.25)}
[data-skin=c] .mesay{background:#0E1B3D}
.mesay .who2{display:flex;align-items:center;gap:4px;font:800 11px/1 var(--font-zh);color:#fff;background:var(--accent);padding:3px 8px 3px 3px;border-radius:999px}
[data-skin=c] .mesay .who2{color:#04223A}
.mesay .who2 .av{width:20px;height:20px;border-radius:50%}
.mesay .okc{width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}.mesay .okc svg{width:13px;height:13px}
/* brand lockup (trademark cat mark — logo use only) */
.brand{display:flex;align-items:center;gap:6px;height:46px;padding:0 14px 0 8px;border-radius:23px}
.brand>svg{width:20px;height:20px;opacity:.75}
.brand .mark{width:30px;height:auto;display:block}
.brand b{font:900 17px/1 var(--font-latin);letter-spacing:.01em}
.brand b i{font-style:normal;font-weight:700;opacity:.65;margin-left:2px}
.log{width:270px}
.m .brand{height:36px;padding:0 8px 0 4px}
.m .brand b{display:none}
.m .brand .mark{width:24px}
.m .brand>svg{width:16px;height:16px}
.m .mesay{font-size:13px;padding:4px 6px 4px 4px;gap:5px}
.m .typing{height:30px;padding:0 10px;gap:4px}.m .typing i{width:6px;height:6px}
/* learner fades out where the dialogue window begins (VN "stands behind the window") */
.d .oa.rib{right:250px}
.oc.lan.r1{display:none}
.murmur{max-width:186px}
.bubble{padding-top:20px}
.bubble .who{top:-15px}
.m .bubble{padding-top:17px}
.m .bubble .who{top:-13px;padding:2px 9px 2px 2px;font-size:10.5px}
.m .bubble .who .av{width:18px;height:18px}
.m .hudstrip .drop{font-size:9.5px;margin-left:1px}
.m[data-skin=c] .prog .node{transform:scale(.7);margin:0 -6px}
.m .oa.rib{right:150px}
.m .hud{gap:4px}
.m .brand{gap:2px;padding:0 6px 0 2px}
.m .brand>svg{width:14px;height:14px}
.m .brand .mark{width:22px}
.m .hudstrip .mt{padding:0 5px}
.m[data-skin=b] .prog .node{width:24px}
.m[data-skin=b] .prog .node+.node::before{right:17px;width:10px}
.brand .mark{width:36px;margin:-2px 0}
.m .brand .mark{width:28px}
/* final trademark: cat behind laptop (svg has ~10% padding) */
.brand .mark{width:42px;height:42px;margin:-2px -4px -2px -6px}
.m .brand .mark{width:32px;height:32px;margin:-2px -3px}
.brand .mark{width:48px;height:48px;margin:-4px -6px -4px -8px}
/* ===================== v3.1 雑談 (casual chatter) ===================== */
.log{display:none!important}
.chara.far img{filter:var(--chara-f) brightness(.95) saturate(.92) drop-shadow(0 0 1.5px var(--rim)) drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.chara{z-index:3}
.cb{position:absolute;z-index:7;display:flex;flex-direction:column;gap:1px;background:#fff;color:#2B2F36;border:2.5px solid var(--bubble-line);border-radius:18px;padding:8px 14px 7px;box-shadow:0 4px 0 rgba(0,0,0,.10),0 10px 22px rgba(0,0,0,.22);--fs:18px}
.cb::before{content:"";position:absolute;left:var(--tx,30px);bottom:-15px;border:8px solid transparent;border-top:15px solid var(--bubble-line);border-bottom:0;transform:skewX(-14deg)}
.cb::after{content:"";position:absolute;left:calc(var(--tx,30px) + 3px);bottom:-9.5px;border:5.5px solid transparent;border-top:11px solid #fff;border-bottom:0;transform:skewX(-14deg)}
.cb .ja{font:700 var(--fs)/1.3 var(--font-target);white-space:nowrap}
.cb .zh{font-size:12px;color:#6E7480;white-space:nowrap}
.cb.l{--fs:23px;padding:10px 18px 9px;border-width:3px}
.cb.l .zh{font-size:13.5px}
.cb.s{--fs:14.5px;padding:6px 11px 5px;border-radius:14px}
.cb.s .zh{font-size:10.5px}
.cb.ghost{opacity:.55;border-style:dashed;box-shadow:none;background:rgba(255,255,255,.82)}
.cb.ghost::after{border-top-color:rgba(255,255,255,.82)}
[data-skin=c] .cb{box-shadow:0 0 0 3px rgba(63,224,232,.18),0 0 18px rgba(63,224,232,.38),0 12px 24px rgba(0,0,0,.4)}
[data-skin=c] .cb.ghost{box-shadow:none}
/* learner = one of the group: same bubble language, accent-coloured, '…' while it's your turn */
.cb.me{flex-direction:row;align-items:center;gap:6px;border-color:var(--accent);background:var(--me-bg)}
.cb.me::before{border-top-color:var(--accent);transform:skewX(14deg)}
.cb.me::after{border-top-color:var(--me-bg);transform:skewX(14deg)}
[data-skin=c] .cb.me{background:#0E1B3D;color:#EAF6FF}
[data-skin=c] .cb.me::after{border-top-color:#0E1B3D}
.cb.dots{height:36px;padding:0 14px}
.cb.dots i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cb.dots i:nth-child(2){opacity:.6}.cb.dots i:nth-child(3){opacity:.3}
.cb.oops{border-color:var(--ng)}.cb.oops i{background:var(--ng)}.cb.oops::before{border-top-color:var(--ng)}
.cb.oops b{font:900 15px/1 var(--font-latin);color:var(--ng)}
.cb.said{border-color:var(--ok);box-shadow:0 0 0 5px var(--ok-soft),0 8px 18px rgba(0,0,0,.25)}
.cb.said::before{border-top-color:var(--ok)}
.cb.said .ja{--fs:19px}
.cb.said .okc{width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}.cb.said .okc svg{width:13px;height:13px}
.m .cb{--fs:14.5px;padding:6px 10px 5px;border-radius:14px;border-width:2px}
.m .cb .zh{font-size:10px}
.m .cb.s{--fs:12px;padding:5px 9px 4px}
.m .cb.s .zh{font-size:9px}
.m .cb.dots{height:28px;padding:0 10px;gap:4px}.m .cb.dots i{width:6px;height:6px}
.m .cb.said .ja{--fs:13.5px}
.m .cb::before{bottom:-12px;border-width:6px;border-top-width:12px;border-bottom:0}
.m .cb::after{bottom:-7.5px;border-width:4px;border-top-width:8px;border-bottom:0}
.d .oc.lan.l1{display:none}
.chara.far{z-index:2}
/* ===================== v3.2 iconic chatter (no words on stage) ===================== */
[data-skin=a]{--cb-ic:#8B5E3C;--mk-ink:#7A4E2A;--mk-halo:#FFF8EA}
[data-skin=b]{--cb-ic:#2F4A6D;--mk-ink:#2F4A6D;--mk-halo:#FFFFFF}
[data-skin=c]{--cb-ic:#16879A;--mk-ink:#BFF6FA;--mk-halo:rgba(10,20,50,.9)}
.cb.ic{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:0;color:var(--cb-ic);border-radius:999px}
.cb.ic svg{fill:currentColor;display:block}
.cb.ic.k-dots svg{width:48%}
.cb.ic.k-smile svg{width:50%;margin-top:4%}
.cb.ic.k-heart svg{width:46%;color:#F27BA8}
.cb.ic.k-heart{color:#F27BA8}
/* tails: tl = tail at bubble's lower-left, tr = lower-right; tip lands on (ax,ay) */
.cb.ic::before,.cb.ic::after{transform:none}
.cb.ic.tl::before{left:6px;bottom:-12px;border:0;border-top:14px solid var(--bubble-line);border-right:12px solid transparent}
.cb.ic.tl::after{left:9.5px;bottom:-6.5px;border:0;border-top:8.5px solid #fff;border-right:7px solid transparent}
.cb.ic.tr::before{left:auto;right:6px;bottom:-12px;border:0;border-top:14px solid var(--bubble-line);border-left:12px solid transparent}
.cb.ic.tr::after{left:auto;right:9.5px;bottom:-6.5px;border:0;border-top:8.5px solid #fff;border-left:7px solid transparent}
.cb.ic.ghost{opacity:.5;border-style:dashed;background:rgba(255,255,255,.75)}
.cb.ic.ghost::after{border-top-color:rgba(255,255,255,.75)}
.cb.ic.s{border-width:2px}
/* learner: same language, accent / ok coloured */
.cb.ic.me{color:var(--accent);border-color:var(--accent);background:var(--me-bg)}
.cb.ic.me::before{border-top-color:var(--accent)}
.cb.ic.me::after{border-top-color:var(--me-bg)}
[data-skin=c] .cb.ic.me{background:#0E1B3D}
[data-skin=c] .cb.ic.me::after{border-top-color:#0E1B3D}
.cb.ic.me.dots svg{width:52%}
.cb.ic.me.oops{color:var(--ng);border-color:var(--ng)}
.cb.ic.me.oops::before{border-top-color:var(--ng)}
.cb.ic.me.oops svg{width:40%}
.cb.ic.me.oops b{font:900 15px/1 var(--font-latin);color:var(--ng);margin-left:2px}
.cb.ic.me.said{color:var(--ok);border-color:var(--ok);box-shadow:0 0 0 5px var(--ok-soft),0 8px 18px rgba(0,0,0,.25)}
.cb.ic.me.said::before{border-top-color:var(--ok)}
.cb.ic.me.said svg:first-child{width:42%;margin-top:3%}
.cb.ic.me.said .okc{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.cb.ic.me.said .okc svg{width:13px;height:13px;fill:none}
/* floating marks (no bubble): ink + halo so they read on any background */
.mk{position:absolute;z-index:7;color:var(--mk-ink);pointer-events:none}
.mk svg{width:100%;height:100%;display:block;fill:currentColor;filter:drop-shadow(0 0 1.2px var(--mk-halo)) drop-shadow(0 0 1.2px var(--mk-halo)) drop-shadow(0 0 1.2px var(--mk-halo)) drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.mk-note,.mk-notes{color:#E9A23B}
.mk-spark{color:#FFC857}
.mk-heart{color:#F27BA8}
.mk-sweat{color:#86CBF0}
[data-skin=c] .mk-note,[data-skin=c] .mk-notes{color:#FFC857}
[data-skin=c] .mk svg{filter:drop-shadow(0 0 1.2px var(--mk-halo)) drop-shadow(0 0 1.2px var(--mk-halo)) drop-shadow(0 0 6px rgba(63,224,232,.45))}
.m .cb.ic.s{border-width:1.8px}
.m .cb.ic.me.oops b{font-size:12px}
.m .cb.ic.me.said .okc{width:18px;height:18px;right:-6px;top:-6px}
.m .cb.ic::before,.m .cb.ic::after{transform:scale(.8);transform-origin:50% 0}
/* v3.3 trademark = white line art cut out from the user's chalk drawing (brand/nika-icon-cutout*.svg).
   tight-bbox svg, aspect ≈ 4:3 — size by height */
.brand .mark{width:auto;height:38px;margin:0 0 0 -2px}
.m .brand .mark{width:auto;height:28px;margin:0 -1px 0 -2px}