/* ============================================================
   DREWSKY'S ENGLISH — UI kit styles (pairs with ui.js)
   Micro-interactions + celebration animations. Include after your
   page's own CSS so these layer on top.
   ============================================================ */

/* gentle page fade-in — OPACITY ONLY: a transform animation on <body> makes it a
   containing block for position:fixed children (Chrome), which un-pins the floating
   dock/nav from the viewport. Never animate transform on body. */
body.ui-in{ animation: ui-fadein .30s ease both; }
@keyframes ui-fadein{ from{ opacity:0; } to{ opacity:1; } }

/* icons inherit text colour + size nicely */
.ui-ic{ vertical-align:-3px; }

/* tactile press on any button (subtle) */
button{ transition: transform .12s var(--ease-out, cubic-bezier(.23,1,.32,1)); }
button:active{ transform: scale(.96); }

/* opt-in ripple container */
.ui-ripple{ position:relative; overflow:hidden; }
.ui-rip{ position:absolute; border-radius:50%; background:currentColor; opacity:.18; transform:scale(0);
  animation: ui-ripple .6s ease-out forwards; pointer-events:none; }
@keyframes ui-ripple{ to{ transform:scale(2.4); opacity:0; } }

/* streak flame flicker */
.ui-flame{ display:inline-block; transform-origin:50% 90%; }
@keyframes ui-flame{
  0%,100%{ transform: rotate(-2deg) scale(1); }
  25%{ transform: rotate(2deg) scale(1.06); }
  50%{ transform: rotate(-1deg) scale(.97); }
  75%{ transform: rotate(1.5deg) scale(1.04); }
}

/* pop (for score reveals / badges) */
.ui-pop{ animation: ui-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes ui-pop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }

/* confetti */
.ui-confetti{ position:fixed; inset:0; pointer-events:none; z-index:99998; overflow:hidden; }
.ui-confetti i{ position:absolute; top:-16px; border-radius:2px; opacity:.95;
  animation-name: ui-conf; animation-timing-function: cubic-bezier(.25,.6,.35,1); animation-fill-mode: forwards; }
@keyframes ui-conf{ to{ transform: translate(var(--drift,0), 108vh) rotate(680deg); opacity:.35; } }

@media (prefers-reduced-motion: reduce){
  body.ui-in{ animation:none; }
  button:active{ transform:none; }
  .ui-flame{ animation:none; }
  .ui-confetti{ display:none; }
}

/* ==== KAWAII LESSON RESTYLE — one design system, three track dials ==== */
/* TOKEN BRIDGE (UI-alignment pass): canonical values live in tokens.css; the names
   below are ALIASES with identical fallbacks so the ~1,000 pages that load only
   ui.css keep working. One source of truth: change a colour in tokens.css only. */
:root{
  --kw-ink:var(--ink,#3A3230);
  --page:var(--paper,#FBF7EE);
  --green:var(--brand,#2F6F4E); --leaf:var(--brand,#2F6F4E);
  --line:#E7DFCC;  /* same name+value as tokens.css --line (kept literal: no self-reference) */
  --p1:#C9B6F2; --p2:#FFD9E4; --p3:#FFE9A8; --p4:#BDE0FA;  /* kawaii pastels (ui-only tokens) */
  --chipbg:var(--brand-soft,#EDF3E4); --chipink:var(--brand,#2F6F4E);
  --taskbg:#FFD9E4; --resbg:#FFE9A8; --goalbg:#BDE0FA;
  /* motion doctrine (Kowalski): one enter curve, sub-200ms, exits faster than enters */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.45,0,.4,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
}

/* Japanese typography — reaches every .jp run (ui.css loads AFTER page CSS, so this wins).
   palt = proportional JP metrics (kills full-width gappiness around 「」、。 and JP↔Latin seams);
   real native-JP fallback for the swap/failure paint; strict kinsoku so short JP labels don't split. */
.jp{
  font-feature-settings:"palt" 1;
  line-break:strict;
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Noto Sans JP',Meiryo,sans-serif;
}

/* Reduced-motion — GENTLER, not gone (Kowalski): keep short opacity fades, drop movement.
   ui.css loads last, so this upgrades the blunt per-page `*{animation:none}` blocks too. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:120ms!important;
    scroll-behavior:auto!important;
  }
}
body.track-business{
  --p1:#B9D3F0; --p2:#F0D9A6; --p3:#C6DFC2; --p4:#D8D2EE;
  --chipbg:#DEE9F6; --chipink:#2C4A6E;
  --taskbg:#C6DFC2; --resbg:#F0D9A6; --goalbg:#B9D3F0;
}
body.track-toeic{ /* academy chrome; TOEIC word cards are POS-tinted below */
  --p1:#FFF6DF; --p2:#DCEFE2; --p3:#F2DEBE; --p4:#D7E3F4;
  --chipbg:#DCEFE2; --chipink:#2E5947;
  --taskbg:#DCEFE2; --resbg:#FFF6DF; --goalbg:#DCEFE2;
}
.topbar{background:var(--page);border-bottom:1px solid var(--line);color:var(--kw-ink)}
.topbar .x,.topbar span,.topbar a{color:var(--kw-ink)}
.pbar{height:10px;background:var(--line)}
.pbar>i{background:var(--green)}
.stepname{background:var(--chipbg);color:var(--chipink);font-weight:700}
/* goal — emoji-hero circle; TOEIC's chalk .em is deliberately excluded */
body:not(.track-toeic) .goal .em{display:inline-flex;align-items:center;justify-content:center;
  width:110px;height:110px;background:#fff;border:2.5px solid var(--kw-ink);border-radius:50%;
  font-size:56px;box-shadow:0 3px 0 rgba(58,50,48,.18)}
.btn-primary{background:var(--green);border:2px solid var(--kw-ink);box-shadow:0 3px 0 rgba(58,50,48,.3)}
/* flip cards */
.flip .face{border-radius:22px;box-shadow:0 3px 0 rgba(58,50,48,.18)}
.flip .front{border:2.5px solid var(--kw-ink)}
.cards .flip:nth-child(4n+1) .front{background:var(--p1)}
.cards .flip:nth-child(4n+2) .front{background:var(--p2)}
.cards .flip:nth-child(4n+3) .front{background:var(--p3)}
.cards .flip:nth-child(4n+4) .front{background:var(--p4)}
.flip .front .emo{display:flex;align-items:center;justify-content:center;width:76px;height:76px;
  background:#fff;border-radius:50%;font-size:40px}
.flip .front .w{background:#fff;border-radius:999px;padding:3px 13px;margin-top:8px;
  font-size:16px;color:var(--kw-ink)}
.flip .front .tap{color:var(--kw-ink);opacity:.5;font-weight:700}
.flip.sent .front .w{background:#fff;border-radius:14px;padding:6px 10px;font-size:15px;line-height:1.4}
.flip .back{background:var(--green);border:2.5px solid var(--kw-ink)}
.flip .back .listen{border:2px solid rgba(255,255,255,.7)}
/* match */
.mchip{border:2px solid var(--kw-ink);box-shadow:0 2px 0 rgba(58,50,48,.15)}
.match .col:first-child .mchip:nth-child(4n+1){background:var(--p1)}
.match .col:first-child .mchip:nth-child(4n+2){background:var(--p3)}
.match .col:first-child .mchip:nth-child(4n+3){background:var(--p4)}
.match .col:first-child .mchip:nth-child(4n+4){background:var(--p2)}
.mchip.sel{border-color:var(--chipink);background:var(--chipbg)}
.mchip.matched{border-color:var(--green);background:#CDE8B5;color:#215239;opacity:1}
.mchip.bad{border-color:var(--bad);background:#FBE3DF}
/* ordering — WORD-TILE COLOR DOCTRINE: neutral or semantic, never decorative */
.answer-row{border:2px dashed rgba(58,50,48,.35);border-radius:16px}
.answer-row.right{border:2px solid var(--green);background:#CDE8B5}
.answer-row.wrong{border:2px solid var(--bad);background:#FBE3DF}
.tile{border:2px solid var(--kw-ink);border-radius:13px;box-shadow:0 2px 0 rgba(58,50,48,.15);background:#fff}
.answer-row .tile{background:#fff}
/* POS hooks — dormant until the tagging pipeline lands */
.tile[data-pos]::after{content:attr(data-sym);position:absolute;right:4px;top:2px;font-size:9px;opacity:.55}
.tile[data-pos=n]{border-color:#5B8DB8;background:#EAF2F9}
.tile[data-pos=v]{border-color:#8B72BE;background:#F0EBF8}
.tile[data-pos=d]{border-color:#4E9B8F;background:#E4F1EE}
.tile[data-pos=g]{border-color:#B7B2A4;background:#F1EFE9;color:#6b7488}
/* reading / quiz */
.box{border:2.5px solid var(--kw-ink);border-radius:18px;box-shadow:0 3px 0 rgba(58,50,48,.15)}
.opt{border:2px solid var(--kw-ink);border-radius:14px;box-shadow:0 2px 0 rgba(58,50,48,.15)}
.opt:hover{border-color:var(--green)}
.opt.right{background:#CDE8B5;border-color:var(--green);color:#215239}
.opt.wrong{background:#FBE3DF;border-color:var(--bad)}
.opt.reveal{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,111,78,.25)}
.listen-btn{border:2px solid var(--kw-ink);box-shadow:0 2.5px 0 rgba(58,50,48,.3)}
.dlg .turn{box-shadow:0 2px 0 rgba(58,50,48,.12)}
.dlg .turn.s0{border:2px solid var(--kw-ink);background:#fff}
.dlg .turn.s1{border:2px solid var(--kw-ink);background:var(--chipbg)}
/* your turn */
.task-card{background:var(--taskbg);border:2.5px solid var(--kw-ink);border-radius:22px;
  box-shadow:0 3px 0 rgba(58,50,48,.18)}
.task-card .say{border:2px solid var(--kw-ink);box-shadow:0 2.5px 0 rgba(58,50,48,.3)}
.task-card .model{background:#fff;border:2px solid var(--kw-ink);border-radius:14px;
  padding:10px 14px;color:var(--kw-ink)}
.ghost{border:2px solid var(--kw-ink);box-shadow:0 2px 0 rgba(58,50,48,.15)}
/* nav + results */
.nav-next{background:var(--green);border:2px solid var(--kw-ink);box-shadow:0 3px 0 rgba(58,50,48,.3)}
.results{background:var(--resbg);border:2.5px solid var(--kw-ink);border-radius:22px;
  box-shadow:0 3px 0 rgba(58,50,48,.18);padding:22px 14px;margin-top:6px}
.results .em{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;
  background:#fff;border:2.5px solid var(--kw-ink);border-radius:50%;font-size:52px}
.results .play{border:2px solid var(--kw-ink);box-shadow:0 2.5px 0 rgba(58,50,48,.3)}
.results .pctline,.results .later{color:#5c534d}
/* GOLD LAW: stars are achievement — always gold */
.results .stars{color:#E0A82E;text-shadow:0 2px 0 rgba(58,50,48,.18)}
.results .stars .off{color:#3A3230;opacity:.18;text-shadow:none}
/* POS-semantic word cards (TOEIC): color = part of speech, same families as the builder */
body.track-toeic .flip .front[data-pos=n]{background:#EAF2F9;border-color:#5B8DB8}
body.track-toeic .flip .front[data-pos=v]{background:#F0EBF8;border-color:#8B72BE}
body.track-toeic .flip .front[data-pos=d]{background:#E4F1EE;border-color:#4E9B8F}
body.track-toeic .flip .front[data-pos=g]{background:#F1EFE9;border-color:#B7B2A4}
@media (prefers-reduced-motion: reduce){ .flip .inner{transition:none} }
/* ==== END KAWAII LESSON RESTYLE ==== */

/* ==== TOEIC LESSON POLISH (v1) — scoped to body.track-toeic; hobby/business unaffected ==== */
body.track-toeic{ --tc-ink:#33302A; --tc-line:#E7E0D2; --tc-muted:#8A8170; }
body.track-toeic main{ padding:20px 18px 80px; }
body.track-toeic .stagehead{ background:linear-gradient(180deg,#33503C,#2C4735); box-shadow:0 1px 2px rgba(0,0,0,.06); border-radius:14px; padding:11px 16px; }
body.track-toeic .stagehead .sl{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; }
body.track-toeic .stepname{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; border-radius:14px; padding:10px 16px; }
body.track-toeic .hint{ font-size:13.5px; }
body.track-toeic .cards{ gap:12px; }
body.track-toeic .flip{ height:158px; }
body.track-toeic .flip .face{ border-radius:16px; border:1.5px solid var(--tc-line); box-shadow:0 1px 2px rgba(58,50,48,.04), 0 8px 20px -6px rgba(58,50,48,.14); background:#fff; padding:15px 16px; align-items:flex-start; justify-content:space-between; text-align:left; }
body.track-toeic .flip .front{ border-width:1.5px; }
body.track-toeic .flip .face::before{ content:none; display:none; }
body.track-toeic .flip .front .num{ display:none; }
body.track-toeic .pos{ border:none; background:none; padding:0; margin:0; font-size:10.5px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; }
body.track-toeic .flip .front .w{ background:none; border-radius:0; padding:0; margin:2px 0 0; font-family:'Fraunces',serif; font-weight:600; font-size:27px; line-height:1.05; color:var(--tc-ink); align-self:flex-start; letter-spacing:-.01em; }
body.track-toeic .flip .front .tap{ color:var(--tc-muted); opacity:.75; font-weight:600; font-size:10.5px; letter-spacing:.03em; margin:0; }
body.track-toeic .flip .front[data-pos=n]{ background:#fff; border-color:var(--tc-line); box-shadow:inset 4px 0 0 #5B8DB8, 0 8px 20px -6px rgba(58,50,48,.14); }
body.track-toeic .flip .front[data-pos=v]{ background:#fff; border-color:var(--tc-line); box-shadow:inset 4px 0 0 #8B72BE, 0 8px 20px -6px rgba(58,50,48,.14); }
body.track-toeic .flip .front[data-pos=d]{ background:#fff; border-color:var(--tc-line); box-shadow:inset 4px 0 0 #4E9B8F, 0 8px 20px -6px rgba(58,50,48,.14); }
body.track-toeic .flip .front[data-pos=g]{ background:#fff; border-color:var(--tc-line); box-shadow:inset 4px 0 0 #B7B2A4, 0 8px 20px -6px rgba(58,50,48,.14); }
body.track-toeic .front[data-pos=n] .pos{ color:#40729E; }
body.track-toeic .front[data-pos=v] .pos{ color:#725BA6; }
body.track-toeic .front[data-pos=d] .pos{ color:#3A897C; }
body.track-toeic .front[data-pos=g] .pos{ color:#87816F; }
body.track-toeic .flip .back{ background:linear-gradient(180deg,#33503C,#2C4735); border:1.5px solid #26402F; border-radius:16px; box-shadow:0 8px 20px -6px rgba(58,50,48,.18); }
body.track-toeic .nav-next{ color:#fff; border:none; box-shadow:0 2px 4px rgba(47,111,78,.25), 0 8px 18px -6px rgba(47,111,78,.4); border-radius:999px; }
body.track-toeic .btn-primary{ border:none; box-shadow:0 2px 4px rgba(47,111,78,.25), 0 8px 18px -6px rgba(47,111,78,.45); }
body.track-toeic .opt{ border:1.5px solid var(--tc-line); box-shadow:0 1px 2px rgba(58,50,48,.05); border-radius:13px; }
body.track-toeic .opt:hover{ border-color:#2F6F4E; box-shadow:0 4px 12px -4px rgba(58,50,48,.14); }
body.track-toeic .mchip{ border:1.5px solid var(--tc-line); box-shadow:0 1px 2px rgba(58,50,48,.05); }

/* ===== MOTION V2 — app-shell layer (UI-alignment pass; Kowalski/Rauno doctrine).
   Cross-page View Transitions: every same-origin navigation gets a fast 160ms
   crossfade; the fixed header stays put; the active nav tab MORPHS between pages.
   Today-body entrance + press feel + a breathing island banner. All motion is
   transform/opacity only and dies under prefers-reduced-motion. ===== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
  ::view-transition-group(dw-tab){animation-duration:.22s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
  ::view-transition-group(dw-hd){animation-duration:.01s}
}
.dw-hd{view-transition-name:dw-hd}
.dw-nav a.on{view-transition-name:dw-tab}
#dw-today > *{animation:dw-rise .24s cubic-bezier(.23,1,.32,1) backwards}
.dw-banner{animation-duration:.3s}
@keyframes dw-rise{from{opacity:0;transform:translateY(8px)}}
.dw-card,.dw-banner{transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .14s cubic-bezier(.23,1,.32,1)}
.dw-card:hover{transform:translateY(-2px)}
.dw-card:active,.dw-banner:active{transform:scale(.98);transition-duration:.1s}
.dw-card .arw,.dw-banner .go{transition:transform .16s cubic-bezier(.23,1,.32,1)}
.dw-card:hover .arw{transform:translateX(3px)}
.dw-banner:hover .go{transform:translateX(3px)}
.dw-card .av{transition:transform .18s cubic-bezier(.23,1,.32,1)}
.dw-card:hover .av{transform:rotate(-5deg) scale(1.08)}
/* the island breathes — ultra-slow drift, transform only */
.dw-banner .ph,.dw-banner .img{;transform-origin:60% 45%}
@keyframes dw-breathe{to{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){
  #dw-today > *{animation-duration:.01ms}
  .dw-banner .ph,.dw-banner .img{animation:none}
  .dw-card:hover,.dw-card:hover .av,.dw-card:hover .arw,.dw-banner:hover .go{transform:none}
}