/* Wakatta — design tokens. Warm washi paper, sumi ink, vermilion accent. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

:root {
  /* Surface — warm paper */
  --paper:        #F4EEE3;   /* app background (washi) */
  --paper-deep:   #ECE3D4;   /* recessed wells */
  --surface:      #FFFFFF;   /* cards */
  --surface-warm: #FBF6EC;   /* warm card / highlighted line */
  --surface-ink:  #211D1A;   /* dark surfaces (player) */

  /* Ink */
  --ink:    #231F1B;   /* primary text */
  --ink-2:  #6E6459;   /* secondary */
  --ink-3:  #A99E8E;   /* tertiary / furigana */
  --ink-on-dark:   #F6F1E7;
  --ink-on-dark-2: #B9AE9D;

  /* Brand */
  --shu:        #DC4A30;   /* vermilion — primary action, active word */
  --shu-deep:   #C13E27;   /* pressed */
  --shu-soft:   #FBE3DB;   /* tint fill */
  --shu-glow:   rgba(220,74,48,0.16);

  --ai:         #36487E;   /* indigo — the AI tutor voice */
  --ai-soft:    #E5E8F1;
  --matcha:     #6E8A5A;   /* known / mastered */
  --matcha-soft:#E5ECDD;
  --gold:       #C8922F;   /* streak / highlight */

  /* Lines */
  --line:        #E6DCCB;  /* warm hairline */
  --line-strong: #D8CBB4;

  /* Type */
  --serif:  'Newsreader', Georgia, serif;
  --sans:   'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --jp:     'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --jp-mincho: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Shadow — soft, warm */
  --shadow-card: 0 1px 2px rgba(74,57,38,0.04), 0 8px 24px rgba(74,57,38,0.07);
  --shadow-pop:  0 12px 36px rgba(40,30,18,0.18);
  --shadow-sheet: 0 -10px 40px rgba(40,30,18,0.18);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ruby / furigana base */
ruby { ruby-align: center; }
rt {
  font-family: var(--jp);
  font-weight: 400;
  color: var(--ink-3);
  font-size: 0.52em;
  letter-spacing: 0.02em;
  user-select: none;
  transition: opacity .25s ease;
}
/* training-wheels levels hide furigana */
.fg-off rt { opacity: 0; }

/* hide scrollbars inside the phone */
.no-sb { scrollbar-width: none; }
.no-sb::-webkit-scrollbar { display: none; }

@keyframes wk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-sheet { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes wk-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-pop { 0% { transform: scale(.9); opacity: 0;} 60%{transform:scale(1.02);} 100%{transform:scale(1); opacity:1;} }
@keyframes wk-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--shu-glow);} 50%{ box-shadow: 0 0 0 8px transparent;} }