/* NihongoIT - mobile-first kanji-writing practice. Design language: sakura - blossom paper + sakura rose + fuji wisteria, dark "yozakura" mode. Vanilla CSS only (runs from file://, no build). All class names match js/app.js. */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* sakura light theme (cherry blossom) */ --bg: #fdf4f7; /* blossom paper */ --bg-tint: #f7e6ec; /* recessed wells / rails */ --card: #fffbfc; /* raised surface */ --card-2: #fdf3f6; /* secondary surface */ --ink: #2e2228; /* dark plum sumi */ --ink-2: #5c4751; /* secondary text */ --muted: #6e525f; /* tertiary / labels - stronger for readability */ --line: #f2dde4; /* hairlines */ --line-strong: #e7c6d1; --accent: #bb3e63; /* deep sakura rose (functional brand) */ --accent-ink: #9f3252; /* pressed accent */ --accent-soft: #fbe3ea; /* pale blossom wash */ --indigo: #5566a6; /* fuji / wisteria (cool counterpoint) */ --indigo-soft: #e9ebf6; --ok: #4f9d69; /* young-leaf green / mastered */ --ok-soft: #e3f0e6; --warn: #cf8a3a; /* learning */ --xp: #b7765f; /* warm sakura bronze - XP / levels */ --xp-soft: #f4e5dd; --lv-1: #f4ddac; --lv-1-ink: #5d3e1d; --lv-2: #e7b087; --lv-2-ink: #4a2f17; --lv-3: #cb7b90; --lv-3-ink: #fff; --lv-4: #8b5fa8; --lv-4-ink: #fff; --lv-5: #4b78b6; --lv-5-ink: #fff; --lv-6: #3b8c8d; --lv-6-ink: #fff; --lv-7: #3f8c6d; --lv-7-ink: #fff; --lv-8: #d4af37; --lv-8-ink: #5d3e1d; --lv-9: #c24242; --lv-9-ink: #fff; --lv-10: #2e2228; --lv-10-ink: #f4ddac; --stg-1: #8f7e58; --stg-2: #ad7a94; --stg-3: #bb3e63; --stg-4: #5566a6; --stg-5: #3f8c6d; --stg-6: #ba8aa8; /* semantic state (browse dots) */ --st-new: #cbb9c1; --st-learning: var(--warn); --st-due: var(--accent); --st-reviewing: var(--indigo); --st-mastered: var(--ok); /* radius scale (locked: cards 16, controls 12, pill 999) */ --r-card: 16px; --r-ctrl: 12px; --r-pill: 999px; --radius: var(--r-card); /* legacy alias used by app.js markup */ --content-max: 1200px; /* app content column width on desktop */ /* elevation - warm-tinted, never pure black */ --sh-1: 0 1px 2px rgba(60, 45, 25, 0.05), 0 1px 3px rgba(60, 45, 25, 0.04); --sh-2: 0 2px 6px rgba(60, 45, 25, 0.07), 0 6px 16px rgba(60, 45, 25, 0.06); --sh-3: 0 8px 24px rgba(60, 45, 25, 0.10), 0 16px 40px rgba(60, 45, 25, 0.08); --focus: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); /* motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.28s; --mode-tint-indigo-1: #eef1fc; --mode-tint-indigo-2: #d9e2f9; --mode-border-indigo: #b0c4de; --mode-ink-indigo: #3c4e85; --mode-wm-indigo: rgba(60, 78, 133, 0.08); --mode-tint-teal-1: #e6f6f5; --mode-tint-teal-2: #cbeee9; --mode-border-teal: #a3dfd6; --mode-ink-teal: #1b6e68; --mode-wm-teal: rgba(27, 110, 104, 0.08); --mode-tint-rose-1: #fceef2; --mode-tint-rose-2: #f9dae4; --mode-border-rose: #f2b7c6; --mode-ink-rose: #952443; --mode-wm-rose: rgba(149, 36, 67, 0.08); --mode-tint-orange-1: #fdf4f0; --mode-tint-orange-2: #fae2d7; --mode-border-orange: #f5c6b3; --mode-ink-orange: #9e5d47; --mode-wm-orange: rgba(158, 93, 71, 0.08); } /* Theme is set explicitly on by the inline head script (stored choice, or resolved from prefers-color-scheme on first visit). */ :root[data-theme="dark"] { --bg: #171114; /* yozakura - plum night */ --bg-tint: #1f1720; --card: #261a22; /* raised */ --card-2: #2f2029; --ink: #f6e9ee; /* blossom white */ --ink-2: #d6bfc9; --muted: #b69fac; --line: #382631; --line-strong: #4a3341; --accent: #e56b90; /* sakura pink, lifted for dark */ --accent-ink: #ef8aac; --accent-soft: #3a1f29; --indigo: #96a4d6; /* fuji, lifted */ --indigo-soft: #23263a; --ok: #6cbb84; --ok-soft: #1e2c24; --warn: #e0a942; --xp: #e6b955; --xp-soft: #33291a; --st-new: #4a3a42; --sh-1: 0 1px 3px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45); --sh-3: 0 12px 36px rgba(0, 0, 0, 0.55); --focus: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); --mode-tint-indigo-1: #1b1e2c; --mode-tint-indigo-2: #2b3046; --mode-border-indigo: #3d4666; --mode-ink-indigo: #96a4d6; --mode-wm-indigo: rgba(150, 164, 214, 0.07); --mode-tint-teal-1: #132422; --mode-tint-teal-2: #1b3a37; --mode-border-teal: #275c57; --mode-ink-teal: #63b3ab; --mode-wm-teal: rgba(99, 179, 171, 0.07); --mode-tint-rose-1: #2a161d; --mode-tint-rose-2: #421e28; --mode-border-rose: #6e2d3f; --mode-ink-rose: #e56b90; --mode-wm-rose: rgba(229, 107, 144, 0.07); --mode-tint-orange-1: #2a1f18; --mode-tint-orange-2: #402f23; --mode-border-orange: #664b38; --mode-ink-orange: #e6b955; --mode-wm-orange: rgba(230, 185, 85, 0.07); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: "Outfit", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; /* Room for the fixed bottom nav plus the phone's gesture/home-bar area, so the last content on long pages (e.g. profile Delete account) is never hidden. */ padding-bottom: calc(88px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .app { min-height: 100vh; display: flex; flex-direction: column; } @media (min-width: 860px) { .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); } } /* subtle paper tooth - fixed, non-scrolling, GPU-cheap */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 12%, rgba(187, 62, 99, 0.035), transparent 45%), radial-gradient(circle at 85% 78%, rgba(85, 102, 166, 0.028), transparent 45%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: transparent; display: none; } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } /* ============================================================ CHROME ============================================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; width: 100%; max-width: var(--content-max); margin: 0 auto; } .topbar h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; } .topbar h1 span { color: var(--accent); } .topbar-actions { display: flex; align-items: center; gap: 10px; } .due-pill { background: var(--accent); color: #fff; text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; padding: 5px 13px; border-radius: var(--r-ctrl); box-shadow: var(--sh-1); animation: pop-in var(--dur) var(--ease); } .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--card); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; box-shadow: var(--sh-1); transition: transform 0.12s var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* keep the 36px visual circle, expand the touch target to 44px (a11y minimum) */ .theme-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .theme-toggle:hover { color: var(--accent); border-color: var(--line-strong); box-shadow: var(--sh-2); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: none; box-shadow: var(--focus); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Phones: tighten the topbar so the logo + actions do not feel cramped. */ @media (max-width: 640px) { .topbar { padding: 14px 14px 8px; } .topbar h1 { font-size: 1.25rem; } .topbar-actions { gap: 6px; } .topbar .due-pill, .topbar .sound-toggle, .topbar #theme-toggle { display: none !important; } .theme-toggle { width: 34px; height: 34px; } } .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-top: 1px solid var(--line); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); z-index: 20; } @media (prefers-reduced-transparency: reduce) { .bottomnav { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } } .bottomnav a { flex: 1; text-align: center; text-decoration: none; color: var(--muted); font-size: 0.7rem; font-weight: 700; position: relative; padding: 5px 0; transition: color var(--dur) var(--ease); } .bottomnav a .nav-icon { transition: transform var(--dur) var(--ease); } .bottomnav a.active { color: var(--accent); } .bottomnav a.active .nav-icon { transform: translateY(-1px); } /* active tab marker */ .bottomnav a.active::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--accent); } .nav-icon { display: block; font-size: 1.3rem; line-height: 1.2; margin-bottom: 1px; } .nav-badge { position: absolute; top: -2px; left: calc(50% + 10px); background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 700; min-width: 17px; height: 17px; line-height: 17px; border-radius: 6px; padding: 0 4px; box-shadow: var(--sh-1); } .banner { background: var(--indigo-soft); color: var(--indigo); border-bottom: 1px solid var(--line); padding: 11px 16px; font-size: 0.85rem; text-align: center; } #screen { max-width: var(--content-max); margin: 0 auto; padding: 14px 16px 24px; } @media (min-width: 640px) { #screen { padding: 20px 24px 32px; } } @media (min-width: 900px) { #screen { padding-left: 32px; padding-right: 32px; } .topbar { padding-left: 32px; padding-right: 32px; } } #screen>* { animation: screen-in 0.34s var(--ease) both; } .hidden { display: none !important; } /* ============================================================ SHARED CONTROLS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; cursor: pointer; text-decoration: none; background: var(--indigo); color: #fff; font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.1; padding: 11px 22px; border-radius: var(--r-ctrl); box-shadow: var(--sh-1); transition: transform 0.12s var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); white-space: nowrap; } .btn:hover { box-shadow: var(--sh-2); } .btn:active { transform: translateY(1px) scale(0.985); box-shadow: var(--sh-1); } .btn:focus-visible { outline: none; box-shadow: var(--focus); } .btn-accent { background: var(--accent); } .btn-accent:active { background: var(--accent-ink); } .btn-ghost { background: transparent; color: var(--indigo); border: 1.5px solid var(--line-strong); box-shadow: none; } .btn-ghost:hover { border-color: var(--indigo); background: var(--indigo-soft); } .btn-small { padding: 6px 13px; font-size: 0.8rem; border-radius: var(--r-ctrl); } .btn-danger { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; } .btn-danger:hover { background: var(--accent-soft); } .danger-zone { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .danger-zone .sub { margin: 0; } .delete-confirm { width: 100%; } .delete-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Shared keyboard focus ring on primary tap targets (a11y). The ring follows each element's own border-radius; give the un-rounded ones a small radius. */ .lesson-tile:focus-visible, .kanji-cell:focus-visible, .back-link:focus-visible, .due-pill:focus-visible, .bottomnav a:focus-visible { outline: none; box-shadow: var(--focus); } .back-link:focus-visible, .bottomnav a:focus-visible { border-radius: 8px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; margin-bottom: 14px; box-shadow: var(--sh-1); } h2.screen-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 16px; } h2.screen-title .sub { font-weight: 600; } .sub { color: var(--ink-2); font-size: 0.85rem; } .toast { position: fixed; top: 20px; right: 20px; left: auto; transform: none; background: hsl(var(--level-hue, 210), 70%, 42%); border: 1px solid hsl(var(--level-hue, 210), 70%, 36%); color: #ffffff; font-size: 0.96rem; font-weight: 800; padding: 12px 18px 12px 14px; border-radius: 12px; z-index: 100; width: 320px; max-width: calc(100vw - 40px); box-shadow: 0 10px 28px hsla(var(--level-hue, 210), 70%, 42%, 0.35); animation: badge-in 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } [data-theme="dark"] .toast { background: hsl(var(--level-hue, 210), 55%, 30%); border-color: hsl(var(--level-hue, 210), 55%, 25%); box-shadow: 0 10px 28px hsla(var(--level-hue, 210), 55%, 30%, 0.4); } /* ============================================================ BROWSE ============================================================ */ .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.74rem; color: var(--ink-2); margin: -4px 0 18px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 13px; } .legend span { display: inline-flex; align-items: center; gap: 5px; } .legend .dot { margin: 0; } .lesson { margin-bottom: 26px; } .lesson-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .lesson-head h3 { font-size: 1.02rem; font-weight: 700; } .lesson-head .sub { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } .lesson-head a { font-size: 0.8rem; color: var(--indigo); font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 0.15s var(--ease); } .lesson-head a:hover { color: var(--accent); } .progressbar { height: 6px; background: var(--bg-tint); border-radius: var(--r-pill); margin-bottom: 12px; overflow: hidden; } .progressbar div { height: 100%; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--indigo))); border-radius: var(--r-pill); transition: width 0.6s var(--ease); } .kanji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 9px; } .kanji-cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; padding: 10px 2px 8px; position: relative; box-shadow: var(--sh-1); transition: transform 0.16s var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .kanji-cell:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); } .kanji-cell:active { transform: translateY(0) scale(0.97); } .kanji-cell .k { font-size: 1.75rem; line-height: 1.2; font-weight: 500; } .kanji-cell .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--st-new); } .dot.learning { background: var(--st-learning); } .dot.due { background: var(--st-due); box-shadow: 0 0 0 3px var(--accent-soft); } .dot.reviewing { background: var(--st-reviewing); } .dot.mastered { background: var(--st-mastered); } .dot.known { background: var(--ok); } /* a Known kanji earns a quiet moss tint - progress made visible */ .kanji-cell:has(.dot.known) { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-soft); } .kanji-cell:has(.dot.due) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } /* lesson gallery (browse home) */ .lesson-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 520px) { .lesson-gallery { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .lesson-gallery { grid-template-columns: repeat(3, 1fr); } } .lesson-tile { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1); transition: transform 0.18s var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .lesson-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-strong); } .lesson-tile:active { transform: translateY(-1px) scale(0.995); } .tile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--indigo), color-mix(in srgb, var(--indigo) 55%, var(--accent))); } /* self-authored inline SVG art (gradient + kanji), fills the tile */ .tile-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tile-done { position: absolute; z-index: 2; top: 10px; right: 10px; background: var(--ok); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 6px; box-shadow: var(--sh-1); } .tile-body { padding: 13px 15px 15px; } .tile-titles h3 { font-size: 1.05rem; font-weight: 700; } .tile-titles .sub { display: block; margin-top: 3px; font-size: 0.75rem; } .tile-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .tile-progress .progressbar { flex: 1; margin: 0; } .tile-pct { font-size: 0.72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } /* lesson detail */ .back-link { display: inline-block; color: var(--indigo); text-decoration: none; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; transition: color 0.15s var(--ease); } .back-link:hover { color: var(--accent); } .lesson-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 4px 0 18px; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ LEARN / QUIZ - the writing surface (the product's heart) ============================================================ */ /* Learn: writer and the meaning illustration sit side by side on wide screens and stack on phones. The illustration is a calm accent-tinted line drawing. */ .learn-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 26px; align-items: start; } .learn-top .writer-wrap { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .learn-side { display: grid; gap: 18px; } .action-panel { padding: 22px 20px; } .action-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 14px; color: var(--ink-2); } .learn-actions { display: grid; gap: 12px; } .btn.fullwidth { width: 100%; justify-content: center; } .kanji-illust { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; } .kanji-illust .illust-art { color: var(--accent); width: 68%; max-width: 220px; } .kanji-illust .illust-art svg { width: 100%; height: auto; display: block; } .kanji-illust .illust-cap { font-size: 0.92rem; color: var(--ink-2); text-transform: capitalize; letter-spacing: 0.01em; } @media (max-width: 900px) { .learn-top { grid-template-columns: 1fr; } } @media (max-width: 600px) { .learn-top { gap: 18px; } .learn-actions { gap: 10px; } } /* The canvas stays warm paper in BOTH themes - you write ink on paper. HanziWriter renders dark strokes (#2b2b33) that must read on a light ground. */ .writer-box { background-color: #fcf9f2; background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 0), radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 0); background-size: 8px 8px; background-position: 0 0, 4px 4px; border: 2px dashed #c4b49b; border-radius: var(--r-card); touch-action: none; user-select: none; -webkit-user-select: none; width: min(84vw, 360px); height: min(84vw, 360px); position: relative; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @keyframes writer-mistake-glow { 0% { border-color: #c4b49b; box-shadow: var(--sh-2), 0 0 0 rgba(187, 62, 99, 0); } 25% { border-color: var(--accent); box-shadow: var(--sh-2), 0 0 12px 3px var(--accent-soft), 0 0 0 1px var(--accent); } 100% { border-color: #c4b49b; box-shadow: var(--sh-2), 0 0 0 rgba(187, 62, 99, 0); } } .writer-box.mistake { animation: writer-mistake-glow 0.6s var(--ease) forwards; } /* genko-yoshi guide: center crosshair with authentic faded rust-red dashed guides */ .writer-box::before, .writer-box::after { content: ""; position: absolute; pointer-events: none; } .writer-box::before { left: 50%; top: 5%; bottom: 5%; width: 1px; transform: translateX(-0.5px); background: linear-gradient(to bottom, rgba(196, 92, 70, 0.22) 50%, transparent 50%); background-size: 1px 8px; } .writer-box::after { top: 50%; left: 5%; right: 5%; height: 1px; transform: translateY(-0.5px); background: linear-gradient(to right, rgba(196, 92, 70, 0.22) 50%, transparent 50%); background-size: 8px 1px; } .writer-box svg { position: relative; z-index: 1; display: block; width: 100% !important; height: 100% !important; } .writer-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(100%, 420px); margin-inline: auto; } .writer-toolbar { display: flex; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 420px; } .writer-toolbar>* { flex: 1 1 140px; min-width: 140px; } .tier-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; background: var(--bg-tint); border: 1px solid var(--line); } .tier-label::before { display: none; } .quiz-progress { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; } .session-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .session-copy { min-width: 0; } .section-label { display: inline-block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } .quiz-progress { display: flex; align-items: center; gap: 12px; } .quiz-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .quiz-progress-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur) var(--ease); } .quiz-count { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; } /* ---------- Arcade (Rush / Survival) ---------- */ /* Per-mode accent, reused by the Play cards, start, run HUD and end screens. */ .m-rush { --arc: #d1642b; } .m-survival { --arc: #7d3aa8; } .m-daily { --arc: #2f8f6b; } [data-theme="dark"] .m-rush { --arc: #e8843f; } [data-theme="dark"] .m-survival { --arc: #b07de0; } [data-theme="dark"] .m-daily { --arc: #4fbf95; } /* Study-card fills: saturated, in-family hues so they read as vibrant as the Arcade tiles instead of the muted brand palette (the old --xp tan looked washed out next to Rush/Survival). */ .m-recall { --mbg: #3f51c4; } .m-listen { --mbg: #2f9e5b; } .m-review { --mbg: #cc3a66; } .m-practice { --mbg: #c99413; } [data-theme="dark"] .m-recall { --mbg: #5f70e0; } [data-theme="dark"] .m-listen { --mbg: #43b873; } [data-theme="dark"] .m-review { --mbg: #e2557f; } [data-theme="dark"] .m-practice { --mbg: #e0aa2c; } /* Start screen */ .arcade-start, .arcade-end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 4px 8px; } .arcade-back { align-self: flex-start; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.9rem; } .arcade-back:hover { color: var(--ink); } .arcade-start-glyph, .arcade-end-glyph { font-family: var(--font-mincho), "Yu Mincho", serif; font-size: 4.5rem; line-height: 1; color: var(--arc, var(--accent)); } .arcade-start-name { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; } .arcade-start-how { color: var(--ink-2); max-width: 30ch; } .arcade-bests { display: flex; gap: 12px; margin: 4px 0; } .arcade-bests>div { background: var(--bg-tint); border-radius: 12px; padding: 10px 18px; min-width: 92px; } .arcade-best-lbl { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .arcade-bests b { font-size: 1.5rem; font-variant-numeric: tabular-nums; } .arcade-toggle { display: flex; gap: 10px; width: 100%; max-width: 420px; } .arcade-toggle-btn { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; text-align: left; } .arcade-toggle-btn small { font-weight: 600; font-size: 0.72rem; color: var(--muted); } .arcade-toggle-btn.on { border-color: var(--arc, var(--accent)); background: color-mix(in srgb, var(--arc, var(--accent)) 12%, var(--card)); } .arcade-toggle-btn.disabled { opacity: 0.5; cursor: not-allowed; } .arcade-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus); } .arcade-start-go { min-width: 200px; margin-top: 4px; } /* Daily Challenge start extras */ .arcade-daily-date { font-weight: 800; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; } .arcade-daily-set { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; } .arcade-daily-set span { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--card); font-size: 1.3rem; font-weight: 700; } .arcade-daily-note { color: var(--muted); font-size: 0.85rem; max-width: 34ch; } /* Run progress counter (fixed-set modes) */ .arcade-progress { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); } /* Run HUD + canvas */ .arcade { display: flex; flex-direction: column; align-items: center; gap: 14px; } .arcade-hud { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; flex-wrap: wrap; } .arcade-quit { border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; } .arcade-score { font-weight: 700; color: var(--ink-2); } .arcade-score b { font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; } .arcade-timer { flex: 1; min-width: 90px; height: 10px; background: var(--bg-tint); border-radius: 6px; overflow: hidden; } .arcade-timer-bar { height: 100%; width: 100%; background: var(--arc, var(--accent)); border-radius: 6px; transition: width 1s linear; } .arcade-sec { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2ch; } .arcade-combo { font-weight: 900; letter-spacing: 0.02em; color: var(--arc, var(--accent)); min-width: 84px; text-align: right; } .arcade-combo.pulse { animation: arc-pulse 0.35s var(--ease); } .arcade-combo.broke { animation: arc-broke 0.4s var(--ease); color: var(--muted); } @keyframes arc-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes arc-broke { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); } } .arcade-lives { display: flex; gap: 6px; margin-left: auto; } .arc-heart { color: var(--arc, var(--accent)); font-size: 1.3rem; line-height: 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .arc-heart.lost { opacity: 0.22; transform: scale(0.82); } .arcade-canvas { width: min(84vw, 360px); height: min(84vw, 360px); } .arcade-prompt { display: flex; flex-direction: column; gap: 4px; min-height: 2.4em; } .arc-meaning { font-size: 1.35rem; font-weight: 850; } .arc-readings { color: var(--ink-2); font-weight: 600; } /* End screen */ .arcade-newbest { font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--arc, var(--accent)); font-size: 0.9rem; } .arcade-end-scorelbl { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .arcade-end-score { font-size: 3.4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .arcade-end-best { color: var(--ink-2); font-weight: 700; } .arcade-end-actions { display: flex; gap: 10px; margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .arcade-combo.pulse, .arcade-combo.broke { animation: none; } .arcade-timer-bar { transition: none; } } @media (max-width: 640px) { .session-head { align-items: stretch; } .writer-toolbar>* { min-width: 0; } } .practice-layout { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; margin: 0 auto; } @media (min-width: 768px) { .practice-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: stretch; } .practice-info-col { display: flex; flex-direction: column; justify-content: flex-start; } .practice-info-col .prompt-card { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 250px; margin: 0; max-width: none; } } /* Mobile: canvas-forward. The writing canvas is the hero and the supporting info is compacted into a slim strip, so the whole loop fits one screen without the scroll-up-for-info, scroll-down-to-draw problem. Desktop (>=768px) is untouched. */ @media (max-width: 767px) { /* Cap the canvas by viewport height so it can never push the action off-screen. */ /* Elevated focal point: Canvas with Double Bezel */ .writer-box { width: min(85vw, 42dvh); height: min(85vw, 42dvh); border: none !important; background: #fffdfc; border-radius: 20px; box-shadow: 0 16px 32px rgba(187, 62, 99, 0.08), inset 0 0 0 1px rgba(187, 62, 99, 0.1); } .writer-wrap { gap: 12px; width: 100%; } .writer-toolbar { margin-top: 12px; } /* Clean up the eyebrow and labels */ .session-head { margin-bottom: 8px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 0; border-bottom: none; } .session-head .section-label { display: none; } .session-head .screen-title { font-size: 1.25rem; margin: 0; letter-spacing: -0.02em; flex: 1; } .session-head .sub { display: none; } .tier-label { font-size: 0.65rem; font-weight: 700; color: var(--muted); background: none; border: none; box-shadow: none; padding: 0; margin-bottom: 0; white-space: nowrap; text-align: right; } .practice-layout { display: flex; flex-direction: column; gap: 0px; } .practice-canvas-col { /* order removed to allow prompt info col to appear first */ } /* Unified Island Architecture for Prompt + Hook */ .prompt-card { margin: 0; padding: 12px 16px 4px 16px; max-width: none; text-align: left; display: flex; flex-direction: column; gap: 12px; background: var(--card); border: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 20px; } .prompt-core { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .prompt-details { display: flex; flex-direction: column; justify-content: center; gap: 2px; } .prompt-card .prompt-main-char { font-size: 2.2rem; margin: 0; line-height: 1; } .prompt-card .meanings { font-size: 1.05rem; margin: 0; } .prompt-card .readings { font-size: 0.85rem; margin: 0; color: var(--ink-2); } .prompt-card .play-btn { margin: 0; } /* Memory hook footnote style */ .mnemonic-block { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); } .mnemonic-block .label { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 2px; } .mnemonic-block p { font-size: 0.85rem; line-height: 1.3; color: var(--ink-2); margin: 0; } /* Learn: keep the canvas + "Practice this kanji" in view; detailed info sits below. */ .learn-top { gap: 14px; } } .prompt-card { position: relative; overflow: hidden; text-align: center; margin: 0 auto 20px; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 28px; box-shadow: var(--sh-2); } .prompt-main-char { font-size: 2.2rem; font-weight: 900; color: var(--ink); margin-bottom: 8px; position: relative; z-index: 1; } .prompt-card .meanings { font-size: 1.6rem; font-weight: 850; letter-spacing: -0.01em; position: relative; z-index: 1; } .prompt-card .readings { color: var(--ink-2); font-size: 1.05rem; margin-top: 8px; position: relative; z-index: 1; font-weight: 600; } .prompt-card .play-btn { margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; } .prompt-card .play-btn .play-icon { width: 18px; height: 18px; } .mnemonic-card { display: flex; align-items: center; gap: 14px; } .mnemonic-glyph { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r-ctrl); display: grid; place-items: center; font-size: 2rem; line-height: 1; color: var(--accent); background: var(--accent-soft, var(--card-2)); border: 1px solid var(--line); } .mnemonic-body { min-width: 0; } .mnemonic-body .label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; margin-bottom: 3px; } .mnemonic-body p { font-size: 0.95rem; color: var(--ink-1, var(--ink)); } /* tap-to-hear reading chips */ .reading-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .reading-say { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-ctrl); background: var(--bg-tint); border: 1px solid var(--line); color: var(--ink); font-size: inherit; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .reading-say:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .reading-say svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.7; } .btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .info-card { padding: 16px 18px; } .info-row { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.9rem; } .info-row:first-of-type { border-top: none; } .info-row .label { flex: 0 0 88px; color: var(--ink-2); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 3px; } .examples li { list-style: none; padding: 4px 0; } .examples .jp { font-weight: 700; } .examples .yomi { color: var(--ink-2); font-size: 0.85rem; margin: 0 6px; } /* reward moment - result panel */ .result-panel { text-align: center; padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 480px; margin: 12px auto 0; } .result-panel .big { font-size: 4.6rem; font-weight: 500; margin: 0; line-height: 1; animation: reward-in 0.5s var(--ease) both; } .result-panel .outcome { font-weight: 800; font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; } .result-panel p { margin: 0; max-width: 38ch; line-height: 1.55; } .result-panel .result-advice { color: var(--ink-2); font-size: 0.92rem; } .result-panel .xp-earned { margin: 0; } .result-panel .summary-list { width: 100%; margin: 2px 0; } .result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; } .result-actions .btn { font-size: 1rem; padding: 12px 24px; } .outcome.perfect, .outcome.pass { color: var(--ok); } .outcome.hinted { color: var(--warn); } .outcome.fail { color: var(--accent); } .error-panel { text-align: center; padding: 34px 18px; color: var(--muted); font-size: 0.9rem; background: var(--card-2); border-radius: var(--r-card); border: 1px dashed var(--line-strong); width: 100%; } /* ============================================================ REVIEW ============================================================ */ .review-empty { text-align: center; padding: 48px 18px; } .review-empty .big { font-size: 2.8rem; font-weight: 500; margin-bottom: 14px; color: var(--ok); } .summary-list { margin: 14px 0; } .summary-list li { list-style: none; display: flex; justify-content: space-between; padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: 0.95rem; } .summary-list li strong { font-variant-numeric: tabular-nums; } /* ============================================================ JOURNEY HEADER + ONBOARDING ============================================================ */ .journey-header { margin-bottom: 18px; padding: 24px 28px; border-radius: 24px; background: hsl(var(--level-hue, 210), 70%, 42%); border: 1px solid hsl(var(--level-hue, 210), 70%, 36%); box-shadow: 0 12px 32px hsla(var(--level-hue, 210), 70%, 42%, 0.3); color: #ffffff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-theme="dark"] .journey-header { background: hsl(var(--level-hue, 210), 55%, 30%); border-color: hsl(var(--level-hue, 210), 55%, 25%); box-shadow: 0 12px 32px hsla(var(--level-hue, 210), 55%, 30%, 0.35); } .journey-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .journey-count { font-weight: 850; font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .journey-header .journey-top .btn { flex: 0 0 auto; background: #ffffff; color: hsl(var(--level-hue, 210), 75%, 40%) !important; border: 1px solid #ffffff; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } [data-theme="dark"] .journey-header .journey-top .btn { color: hsl(var(--level-hue, 210), 85%, 30%) !important; } .journey-header .journey-top .btn:hover { background: hsl(var(--level-hue, 210), 95%, 96%); color: hsl(var(--level-hue, 210), 75%, 36%) !important; box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25); } .journey-header .progressbar { margin-bottom: 12px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); overflow: hidden; } .journey-header .progressbar div { display: block; height: 100%; border-radius: 6px; background: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); } .journey-sub { font-size: 0.78rem; font-weight: 600; color: hsl(var(--level-hue, 210), 95%, 88%); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; } /* ---------- XP / levels (gamification) ---------- */ .level-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .level-badge { flex: 0 0 auto; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--sh-1); border-radius: var(--r-pill); padding: 6px 14px; min-width: 4.1rem; } .level-badge.lg { font-size: 1.05rem; padding: 8px 16px; } .level-badge.lvl-1 { background: var(--lv-1); color: var(--lv-1-ink); } .level-badge.lvl-2 { background: var(--lv-2); color: var(--lv-2-ink); } .level-badge.lvl-3 { background: var(--lv-3); color: var(--lv-3-ink); } .level-badge.lvl-4 { background: var(--lv-4); color: var(--lv-4-ink); } .level-badge.lvl-5 { background: var(--lv-5); color: var(--lv-5-ink); } .level-badge.lvl-6 { background: var(--lv-6); color: var(--lv-6-ink); } .level-badge.lvl-7 { background: var(--lv-7); color: var(--lv-7-ink); } .level-badge.lvl-8 { background: var(--lv-8); color: var(--lv-8-ink); } .level-badge.lvl-9 { background: var(--lv-9); color: var(--lv-9-ink); } .level-badge.lvl-10 { background: var(--lv-10); color: var(--lv-10-ink); } .level-title { font-weight: 900; font-size: 1rem; } .level-xp { margin-left: auto; font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 700; } .level-next { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .level-row .level-next { flex-basis: 100%; text-align: right; margin-top: -6px; } /* XP bar: gold, distinct from the accent (rose) progress bars */ .xp-bar { flex-basis: 100%; height: 8px; border-radius: 999px; background: var(--xp-soft); overflow: hidden; } .xp-bar>div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--xp), #e8c470); transition: width 0.6s var(--ease); } .level-card { margin-bottom: 16px; } .level-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .level-card-meta { display: flex; flex-direction: column; line-height: 1.25; } .level-card-meta .sub { font-size: 0.8rem; } .level-card-top .level-next { margin-left: auto; text-align: right; } /* ---------- Play hub (game-mode cards) ---------- */ .mode-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 700px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1600px) { .mode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .play-header-block { margin: 24px 0 20px; } .play-subtitle-eyebrow { display: block; font-size: 0.76rem; font-weight: 700; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; } .play-page-title { font-size: 1.85rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px; } .play-page-desc { font-size: 0.95rem; color: var(--ink-2); } .mode-card { --m: var(--accent); --m-wm: var(--accent-soft); position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 28px 24px 26px; box-shadow: 0 10px 24px rgba(60, 45, 25, 0.03), var(--sh-1); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mode-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.22), transparent 28%); opacity: 0.55; pointer-events: none; } .mode-card::after { display: none; } .mode-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(60, 45, 25, 0.05), var(--sh-2); } [data-theme="dark"] .mode-card:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), var(--sh-2); } .mode-card:active { transform: translateY(0); } .mode-card:focus-visible { outline: none; box-shadow: var(--focus); } /* Color mappings matching dashboard widgets play mode hues */ /* Vibrant, solid colors instead of gradients on the Play tab */ .m-recall { background-color: var(--mbg); border-color: var(--mbg); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .m-recall:hover { border-color: var(--mbg); } .m-listen { background-color: var(--mbg); border-color: var(--mbg); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .m-listen:hover { border-color: var(--mbg); } .m-review { background-color: var(--mbg); border-color: var(--mbg); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .m-review:hover { border-color: var(--mbg); } .m-practice { background-color: var(--mbg); border-color: var(--mbg); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .m-practice:hover { border-color: var(--mbg); } .mode-card.m-rush { background-color: var(--arc); border-color: var(--arc); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .mode-card.m-rush:hover { border-color: var(--arc); } .mode-card.m-survival { background-color: var(--arc); border-color: var(--arc); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .mode-card.m-survival:hover { border-color: var(--arc); } .mode-card.m-daily { background-color: var(--arc); border-color: var(--arc); --m: #ffffff; --m-wm: rgba(255, 255, 255, 0.14); } .mode-card.m-daily:hover { border-color: var(--arc); } /* Ensure text on vibrant card backgrounds has clean high-contrast readability */ .mode-card.m-recall, .mode-card.m-listen, .mode-card.m-review, .mode-card.m-practice, .mode-card.m-rush, .mode-card.m-survival, .mode-card.m-daily { color: #ffffff; } .mode-card.m-recall .mode-name, .mode-card.m-listen .mode-name, .mode-card.m-review .mode-name, .mode-card.m-practice .mode-name, .mode-card.m-rush .mode-name, .mode-card.m-survival .mode-name, .mode-card.m-daily .mode-name { color: #ffffff; } .mode-card.m-recall .mode-how, .mode-card.m-listen .mode-how, .mode-card.m-review .mode-how, .mode-card.m-practice .mode-how, .mode-card.m-rush .mode-how, .mode-card.m-survival .mode-how, .mode-card.m-daily .mode-how { color: rgba(255, 255, 255, 0.9); } .mode-card.m-recall .mode-stat, .mode-card.m-listen .mode-stat, .mode-card.m-review .mode-stat, .mode-card.m-practice .mode-stat, .mode-card.m-rush .mode-stat, .mode-card.m-survival .mode-stat, .mode-card.m-daily .mode-stat { color: #ffffff; } .mode-card.m-recall .mode-xp, .mode-card.m-listen .mode-xp, .mode-card.m-review .mode-xp, .mode-card.m-practice .mode-xp, .mode-card.m-rush .mode-xp, .mode-card.m-survival .mode-xp, .mode-card.m-daily .mode-xp { color: #ffffff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); } .mode-card.m-recall:hover .mode-xp, .mode-card.m-listen:hover .mode-xp, .mode-card.m-review:hover .mode-xp, .mode-card.m-practice:hover .mode-xp, .mode-card.m-rush:hover .mode-xp, .mode-card.m-survival:hover .mode-xp, .mode-card.m-daily:hover .mode-xp { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.5); } .mode-card.m-recall .mode-glyph, .mode-card.m-listen .mode-glyph, .mode-card.m-review .mode-glyph, .mode-card.m-practice .mode-glyph, .mode-card.m-rush .mode-glyph, .mode-card.m-survival .mode-glyph, .mode-card.m-daily .mode-glyph { color: rgba(255, 255, 255, 0.14); } .mode-glyph { position: absolute; top: 16px; right: 16px; font-size: 8.6rem; line-height: 0.85; color: var(--m-wm, var(--m)); opacity: 1; /* watermark color variable has built-in alpha opacity */ font-family: "Yu Mincho", "MS Mincho", "Hiragino Mincho ProN", serif; transform: rotate(6deg) scale(1.05); pointer-events: none; z-index: 0; transition: transform var(--dur) var(--ease); } @media (max-width: 900px) { .mode-glyph { font-size: 6.2rem; top: 12px; right: 14px; } } .mode-card:hover .mode-glyph { transform: rotate(8deg) scale(1.1); } .mode-body { flex: 1 1 auto; min-width: 0; margin: 22px 0 18px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } .mode-name { font-weight: 850; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); } .mode-how { color: var(--ink-2); font-size: 0.96rem; margin-top: 8px; line-height: 1.5; max-width: 95%; } .mode-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; position: relative; z-index: 1; margin-top: auto; } .mode-stat { font-weight: 800; font-size: 0.98rem; color: var(--m); } .mode-xp { font-size: 0.76rem; font-weight: 800; color: var(--m); background: color-mix(in srgb, var(--m) 8%, transparent); border: 1px solid color-mix(in srgb, var(--m) 22%, transparent); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.03em; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mode-card:hover .mode-xp { background: color-mix(in srgb, var(--m) 15%, transparent); border-color: color-mix(in srgb, var(--m) 40%, transparent); } .mode-card.locked { opacity: 0.75; box-shadow: none; cursor: default; background: var(--bg-tint); border-color: var(--line); } .mode-card.locked:hover { transform: none; box-shadow: none; border-color: var(--line); } .mode-card.locked .mode-glyph { filter: grayscale(1); opacity: 0.05; } .mode-card.locked .mode-name { color: var(--muted); } .mode-lock { font-size: 1.3rem; } .dmode.locked { opacity: 0.55; cursor: default; } .dmode.locked:hover { border-color: var(--line); } /* ---------- Daily goal + streak banner ---------- */ .daily-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .daily-banner.at-risk { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .daily-ring { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); background: conic-gradient(var(--xp) var(--p, 0%), var(--xp-soft) 0); } .daily-ring span { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 1.05rem; } .daily-banner.at-risk .daily-ring { background: conic-gradient(var(--accent) var(--p, 0%), var(--accent-soft) 0); } .daily-body { flex: 1 1 auto; min-width: 0; } .daily-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .daily-streak { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; } .daily-goal-lbl { font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 700; } .daily-line { font-size: 0.85rem; color: var(--ink-2); margin: 3px 0 0; } .daily-banner.at-risk .daily-line { color: var(--accent); } /* Session-summary XP call-out */ .xp-earned { font-size: 1.5rem; font-weight: 800; color: var(--xp); margin: 4px 0 14px; letter-spacing: -0.01em; } .xp-earned-sub { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; letter-spacing: 0; } /* Floating "+N XP" chip that rises and fades on each completion */ .xp-float { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 60; pointer-events: none; font-weight: 800; font-size: 1.2rem; color: var(--xp); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); animation: xp-rise 1.3s var(--ease) forwards; } @keyframes xp-rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } } /* Level-up celebration overlay */ .levelup { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 50%, rgba(28, 17, 22, 0.75), rgba(15, 10, 12, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: levelup-fade 0.3s var(--ease) both; } .levelup-card { position: relative; overflow: visible; text-align: center; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--sh-3), 0 0 35px rgba(187, 62, 99, 0.2); padding: 40px 28px 36px; max-width: 350px; width: 100%; animation: levelup-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; z-index: 2; } .levelup-eyebrow { display: block; font-size: 0.85rem; font-weight: 700; color: var(--accent); letter-spacing: 0.15em; margin-bottom: 12px; } .levelup-card h2 { font-size: 1.7rem; font-weight: 800; margin: 12px 0 2px; color: var(--ink); letter-spacing: -0.01em; } .levelup-jp-subtitle { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.25em; color: var(--muted); margin-top: 1px; margin-bottom: 16px; } .levelup-badge { display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin: 0 auto 12px; border-radius: 50%; font-weight: 900; font-size: 1.45rem; color: #fff; background: linear-gradient(135deg, hsl(var(--level-hue, 200), 85%, 58%) 0%, hsl(var(--level-hue, 200), 85%, 40%) 100%); box-shadow: 0 10px 24px hsla(var(--level-hue, 200), 85%, 45%, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.4); border: 3px solid #fff; position: relative; z-index: 2; transform: scale(0); animation: badge-bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; } [data-theme="dark"] .levelup-badge { background: linear-gradient(135deg, hsl(var(--level-hue, 200), 80%, 62%) 0%, hsl(var(--level-hue, 200), 80%, 45%) 100%); } /* Stylized Rank layout with Japanese Calligraphy stamp watermark */ .levelup-rank-container { position: relative; margin: 20px auto 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; width: 100%; overflow: visible; } .levelup-rank-glyph { position: absolute; font-size: 4.8rem; font-weight: 900; color: hsla(var(--level-hue, 200), 75%, 50%, 1); opacity: 0.12; font-family: "Yu Mincho", "MS Mincho", "Hiragino Mincho ProN", serif; pointer-events: none; z-index: 1; letter-spacing: 0.1em; transform: scale(0.9); animation: glyph-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.3s; } [data-theme="dark"] .levelup-rank-glyph { color: hsla(var(--level-hue, 200), 75%, 55%, 1); opacity: 0.09; } .levelup-rank-label { position: relative; z-index: 2; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; } .levelup-rank { position: relative; z-index: 2; font-size: 1.6rem; font-weight: 900; color: hsla(var(--level-hue, 200), 85%, 35%, 1); letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85); } [data-theme="dark"] .levelup-rank { color: hsla(var(--level-hue, 200), 80%, 68%, 1); text-shadow: 0 1px 3px var(--card); } @keyframes glyph-fade-in { from { opacity: 0; transform: scale(0.7) rotate(-6deg); } to { opacity: 0.12; transform: scale(1) rotate(0deg); } } .levelup-card .sub { font-size: 0.9rem; color: var(--ink-2); margin: 4px 0 12px; } .levelup-card .btn { width: 100%; margin-top: 12px; background: hsla(var(--level-hue, 200), 70%, 42%, 1); border-color: hsla(var(--level-hue, 200), 70%, 42%, 1); } .levelup-card .btn:hover { background: hsla(var(--level-hue, 200), 70%, 35%, 1); border-color: hsla(var(--level-hue, 200), 70%, 35%, 1); } [data-theme="dark"] .levelup-card .btn { background: hsla(var(--level-hue, 200), 60%, 45%, 1); border-color: hsla(var(--level-hue, 200), 60%, 45%, 1); color: #fff; } [data-theme="dark"] .levelup-card .btn:hover { background: hsla(var(--level-hue, 200), 60%, 38%, 1); border-color: hsla(var(--level-hue, 200), 60%, 38%, 1); } /* radiating sun/Hinomaru center behind the card */ .levelup-sun { position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); background: radial-gradient(circle, hsla(var(--level-hue, 200), 75%, 50%, 1) 0%, transparent 70%); opacity: 0.25; border-radius: 50%; pointer-events: none; z-index: 1; animation: sun-pulse 4s ease-in-out infinite alternate; } /* radiating burst behind the badge/card */ .levelup-burst { position: absolute; top: 50%; left: 50%; width: 650px; height: 650px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, hsla(var(--level-hue, 200), 40%, 50%, 0.15) 0%, transparent 3%, transparent 7%, hsla(var(--level-hue, 200), 40%, 50%, 0.15) 10%); opacity: 0.35; border-radius: 50%; filter: blur(6px); mask-image: radial-gradient(circle, black 25%, transparent 65%); -webkit-mask-image: radial-gradient(circle, black 25%, transparent 65%); animation: burst-spin 25s linear infinite; pointer-events: none; z-index: 1; } @keyframes burst-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes sun-pulse { 0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.3; } } @keyframes levelup-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes levelup-pop { 0% { opacity: 0; transform: scale(0.85) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes badge-bounce { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .levelup.no-anim, .levelup.no-anim .levelup-card, .levelup.no-anim .levelup-burst, .levelup.no-anim .levelup-badge, .levelup.no-anim .levelup-sun { animation: none !important; transform: none !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .xp-float { animation-duration: 0.01ms; } .levelup-burst { animation: none; } } .sound-toggle.muted { opacity: 0.55; } /* Stroke juice: Japanese praise words float over the drawing box as the reward. Full praise on a clean finish (big), a gentle nudge mid-draw on long kanji. */ .praise-word { position: fixed; z-index: 66; pointer-events: none; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: praise-pop 1.1s var(--ease) forwards; } .praise-word b { display: block; font-size: 2rem; font-weight: 800; color: var(--accent); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } .praise-word span { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); } @keyframes praise-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 22% { opacity: 1; transform: translate(-50%, -54%) scale(1.08); } 38% { transform: translate(-50%, -54%) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -78%) scale(1); } } .encourage-word { position: fixed; z-index: 66; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; font-size: 1.1rem; font-weight: 800; color: var(--indigo, var(--accent)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); animation: encourage-rise 0.75s var(--ease) forwards; } @keyframes encourage-rise { 0% { opacity: 0; transform: translate(-50%, -46%) scale(0.8); } 25% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -66%) scale(1); } } @media (prefers-reduced-motion: reduce) { .praise-word, .encourage-word { animation: none; display: none; } } /* Unified premium notification toast (top-right) */ .badge-pop { position: fixed; top: 20px; right: 20px; left: auto; z-index: 100; display: flex; align-items: center; gap: 14px; width: 320px; max-width: calc(100vw - 40px); background: hsl(var(--level-hue, 210), 70%, 42%); border: 1px solid hsl(var(--level-hue, 210), 70%, 36%); border-radius: 12px; padding: 12px 18px 12px 14px; box-shadow: 0 10px 28px hsla(var(--level-hue, 210), 70%, 42%, 0.35); color: #ffffff; animation: badge-in 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; transition: top 0.3s ease; } [data-theme="dark"] .badge-pop { background: hsl(var(--level-hue, 210), 55%, 30%); border-color: hsl(var(--level-hue, 210), 55%, 25%); box-shadow: 0 10px 28px hsla(var(--level-hue, 210), 55%, 30%, 0.4); } .badge-pop.out { animation: badge-out 0.4s ease both; } .badge-pop-glyph { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 1.5rem; color: #ffffff; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); } .badge-pop-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--level-hue, 210), 95%, 88%); margin-bottom: 2px; } .badge-pop-name { font-weight: 800; font-size: 0.94rem; color: #ffffff; line-height: 1.25; } @keyframes badge-in { from { opacity: 0; transform: translateX(50px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes badge-out { to { opacity: 0; transform: translateX(70px) scale(0.95); } } @media (prefers-reduced-motion: reduce) { .badge-pop, .badge-pop.out { animation-duration: 0.01ms; } } /* Trophies (achievement grid on Stats) */ .trophies { margin-bottom: 24px; } .trophies-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; } .trophies-head .sub { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); } .trophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: 14px; } /* Dynamic hue mapping for vibrant individual themes */ .trophy-first-stroke { --hue: 145; } /* Emerald Green */ .trophy-from-memory { --hue: 265; } /* Indigo Purple */ .trophy-lesson-clear { --hue: 200; } /* Sky Blue */ .trophy-sharp-ear { --hue: 42; } /* Gold Amber */ .trophy-adept { --hue: 24; } /* Coral Orange */ .trophy-mastered-10 { --hue: 355; } /* Crimson Red */ .trophy-flawless { --hue: 325; } /* Bright Pink */ .trophy-week { --hue: 175; } /* Teal Cyan */ .trophy-halfway { --hue: 220; } /* Royal Blue */ .trophy-devoted { --hue: 285; } /* Plum Violet */ .trophy-badge-wrap { position: relative; margin-bottom: 12px; display: inline-block; } .trophy-lock { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line-strong); color: var(--muted); display: grid; place-items: center; box-shadow: var(--sh-1); } .trophy { text-align: center; padding: 18px 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card-2); display: flex; flex-direction: column; align-items: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: var(--sh-1); position: relative; } .trophy.locked { background: var(--card-2); border: 1px dashed var(--line-strong); box-shadow: none; } .trophy.locked .trophy-glyph { opacity: 0.45; filter: grayscale(100%); background: var(--bg-tint); border-color: var(--line); } .trophy.locked:hover { transform: translateY(-2px); box-shadow: var(--sh-1); } .trophy.got { background: hsla(var(--hue), 60%, 97%, 0.8); border-color: hsla(var(--hue), 60%, 65%, 0.5); box-shadow: 0 4px 15px hsla(var(--hue), 50%, 50%, 0.08), var(--sh-2); } [data-theme="dark"] .trophy.got { background: hsla(var(--hue), 35%, 12%, 0.45); border-color: hsla(var(--hue), 50%, 45%, 0.35); box-shadow: 0 4px 20px hsla(var(--hue), 60%, 5%, 0.25); } .trophy.got:hover { transform: translateY(-5px); box-shadow: 0 12px 30px hsla(var(--hue), 60%, 50%, 0.22), var(--sh-3); } .trophy-glyph { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; margin-bottom: 12px; color: var(--muted); background: var(--card); border: 1.5px solid var(--line); transition: all 0.3s var(--ease); } /* In-progress bar glows in its respective color */ .trophy-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; width: 100%; } .trophy-bar>div { height: 100%; background: hsla(var(--hue), 45%, 55%, 0.5); border-radius: 999px; transition: width var(--dur) var(--ease); } /* Earned styles */ .trophy.got .trophy-glyph { color: hsla(var(--hue), 85%, 35%, 1); background: hsla(var(--hue), 85%, 48%, 0.12); border-color: hsla(var(--hue), 80%, 45%, 0.4); box-shadow: 0 4px 10px hsla(var(--hue), 80%, 50%, 0.15); font-weight: bold; } [data-theme="dark"] .trophy.got .trophy-glyph { color: hsla(var(--hue), 85%, 70%, 1); background: hsla(var(--hue), 80%, 45%, 0.25); border-color: hsla(var(--hue), 75%, 60%, 0.35); } .trophy.got .trophy-bar>div { background: hsla(var(--hue), 80%, 45%, 0.9); } [data-theme="dark"] .trophy.got .trophy-bar>div { background: hsla(var(--hue), 80%, 55%, 0.95); } .trophy-name { font-weight: 800; font-size: 0.92rem; color: var(--ink); } .trophy-desc { font-size: 0.76rem; color: var(--ink-2); margin: 4px 0 8px; line-height: 1.35; flex-grow: 1; } .trophy-prog { font-size: 0.74rem; font-weight: 700; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .trophy.got .trophy-prog { color: hsla(var(--hue), 75%, 40%, 1); } [data-theme="dark"] .trophy.got .trophy-prog { color: hsla(var(--hue), 75%, 65%, 1); } .welcome { text-align: center; padding: 40px 22px; max-width: 460px; margin: 24px auto 0; } .welcome-mark { font-size: 3.4rem; font-weight: 500; line-height: 1; margin-bottom: 14px; color: var(--accent); animation: reward-in 0.5s var(--ease) both; } .welcome h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; } .welcome .sub { font-size: 0.95rem; line-height: 1.6; } /* Onboarding promise: loud through scale, vibrant through the level hue. A wall of N5 kanji as the backdrop, the pitch centered on top. No gradients or glows; the hue does the coloring. */ /* Full-bleed during onboarding (the app chrome is hidden), so the wall fills the whole viewport instead of the content column. */ .promise { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 20px 40px; overflow: hidden; background: var(--bg); } /* The wall tiles the entire background and inks in with a staggered reveal. */ .promise-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); align-content: center; justify-items: center; gap: 12px 6px; padding: 20px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; color: hsl(var(--level-hue), 45%, 55%); opacity: 0.15; user-select: none; pointer-events: none; } .promise-wall span { opacity: 0; transform: translateY(8px); animation: promise-wall-in 0.6s var(--ease) forwards; } @keyframes promise-wall-in { to { opacity: 1; transform: none; } } .promise-copy { position: relative; z-index: 1; text-align: center; max-width: 30ch; } /* Focal self-drawing kanji. HanziWriter renders an inline SVG here. */ .promise-hero { display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; min-height: 220px; } .promise-hero svg { filter: drop-shadow(0 6px 16px hsla(var(--level-hue), 55%, 40%, 0.18)); } .promise-hero-static { font-size: 9rem; font-weight: 500; line-height: 1; color: var(--ink); } .promise-title { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 12px; } .promise-sub { font-size: 1.05rem; line-height: 1.55; color: var(--muted); } .promise-go { margin-top: 24px; font-size: 1.05rem; padding: 14px 30px; } @media (prefers-reduced-motion: reduce) { .promise-wall span { animation-duration: 0.01ms; animation-delay: 0ms !important; } } /* Placement: two plain option cards, no pills, no accent bars. */ .placement-opts { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 8px; text-align: left; } .placement-opt { display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .placement-opt:hover, .placement-opt:focus-visible { border-color: var(--accent); background: var(--accent-soft); } .placement-opt b { display: block; font-size: 1.05rem; margin-bottom: 3px; } .placement-opt small { color: var(--muted); font-size: 0.9rem; line-height: 1.4; } .placement-skip { margin-top: 4px; } /* Home "Start here" one-shot card, tinted by the level hue. */ .start-here { display: block; border: 1px solid hsla(var(--level-hue), 60%, 55%, 0.5); background: hsla(var(--level-hue), 70%, 60%, 0.08); } .start-here .sh-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--level-hue), 55%, 45%); margin-bottom: 8px; } .start-here .sh-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .start-here .sh-lead b { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; } /* Locked lesson tile (a level above the learner's current level). */ .lesson-tile.locked { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.5); } .lesson-tile.locked .tile-media { position: relative; } .lesson-tile.locked .tile-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(0, 0, 0, 0.04); } .tile-locked-note { font-size: 0.8rem; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; } /* Tree collection (Stats): one full-bloom slot per level. */ .tree-collect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 14px; } .tree-collect-item { text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; background: var(--card); } .tree-collect-item.got { border-color: hsla(var(--hue), 60%, 55%, 0.5); } .tree-collect-art { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .tree-collect-art .tree-img { max-height: 120px; max-width: 100%; } .tree-collect-item:not(.got) .tree-collect-art { opacity: 0.7; } .tree-collect-seed { font-size: 1.4rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .tree-collect-label { font-weight: 800; font-size: 0.95rem; } .tree-collect-state { font-size: 0.8rem; color: var(--muted); margin-top: 2px; } /* Level-complete celebration: full-bloom tree in the level-up overlay. */ .levelcomplete-tree { display: flex; justify-content: center; margin: 4px 0 10px; } .levelcomplete-tree .tree-img { height: 160px; max-width: 100%; } /* Test-out-of-a-level: Browse CTA + intro/run/result screens. */ .leveltest-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; text-decoration: none; color: var(--ink); } .leveltest-cta b { display: block; font-size: 1.05rem; } .leveltest-cta span { color: var(--muted); font-size: 0.9rem; } .leveltest-cta-go { font-weight: 700; color: var(--accent); white-space: nowrap; } .leveltest-intro, .leveltest-end { text-align: center; max-width: 480px; margin: 24px auto 0; padding: 32px 24px; } .leveltest-glyph { font-size: 3.2rem; font-weight: 500; line-height: 1; margin-bottom: 8px; color: var(--accent); } .leveltest-glyph.pass { color: var(--ok); } .leveltest-glyph.fail { color: var(--muted); } .leveltest-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .leveltest { max-width: 520px; margin: 0 auto; } .leveltest-hud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .leveltest-prog { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .leveltest-prompt { text-align: center; margin-top: 16px; } .leveltest-prompt .lt-meaning { display: block; font-size: 1.3rem; font-weight: 800; } .leveltest-prompt .lt-readings { display: block; color: var(--muted); margin-top: 4px; } /* ============================================================ STATS ============================================================ */ .north-star { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; border-color: var(--accent); } .north-star .ns-num { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; } .north-star .ns-meta { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; } .north-star .ns-meta .sub { font-size: 0.8rem; } .north-star.ns-empty { border-color: var(--line); } .north-star.ns-empty .ns-num { font-size: 2.2rem; color: var(--muted); } .north-star.ns-empty .ns-meta .btn { align-self: flex-start; margin-top: 6px; } .stats-tile-sub { font-size: 0.7rem; color: var(--muted); margin-top: 4px; font-weight: 500; } .stat-tile .subctx { font-size: 0.7rem; color: var(--muted); margin-top: 4px; font-weight: 500; line-height: 1.2; } .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; margin-bottom: 16px; } .stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 12px; text-align: center; box-shadow: var(--sh-1); transition: transform 0.16s var(--ease), box-shadow var(--dur) var(--ease); } .stat-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .stat-tile .num { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-tile .lbl { font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-top: 2px; } .stat-tile.lead-known { border-color: var(--accent); background: var(--accent-soft); } .stat-tile.lead-known .num { color: var(--accent); } .stat-tile.lead-known .lbl { color: var(--accent-ink); } table.acc { width: 100%; border-collapse: collapse; font-size: 0.9rem; } table.acc th, table.acc td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); } table.acc td { font-variant-numeric: tabular-nums; } table.acc td.k { font-size: 1.35rem; } table.acc th { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .hard-list { display: flex; gap: 9px; flex-wrap: wrap; margin: 10px 0 12px; } .hard-list a { font-size: 1.55rem; text-decoration: none; color: var(--ink); background: var(--accent-soft); border-radius: var(--r-ctrl); padding: 7px 13px; transition: transform 0.16s var(--ease); } .hard-list a:hover { transform: translateY(-2px); } /* ============================================================ MOTION KEYFRAMES ============================================================ */ @keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes reward-in { 0% { opacity: 0; transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes pop-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 600px) { .topbar h1 { font-size: 1.6rem; } #screen { padding-top: 16px; } h2.screen-title { font-size: 1.4rem; } } /* ---------- Profile / traveler character ---------- */ .avatar-svg { display: block; } /* Topbar avatar chip + name/level on mobile */ /* Topbar avatar chip + name/level on mobile */ .profile-link { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 2px; height: 38px; border-radius: 99px; border: none; background: var(--card-2); flex: none; text-decoration: none; box-shadow: var(--sh-1); } .profile-link:hover { filter: brightness(1.1); } .profile-link .top-av { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 1.5px solid #fff; background: #fff; } .profile-link .top-id { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; white-space: nowrap; } .profile-link b { font-size: 0.85rem; font-weight: 700; color: #fff; } .profile-link small { font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); } body.is-logged-in .topbar-actions { flex: 1; justify-content: flex-end; } .profile-link.has-level { background: hsl(var(--level-hue, 45) 80% 40%); } .profile-link.has-level b { color: #fff; } /* Journey-header greeting */ .journey-greet { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; text-decoration: none; color: #ffffff; } .journey-greet .greet-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid #ffffff; background: var(--card); flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .journey-greet .greet-name { font-weight: 850; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); letter-spacing: -0.01em; } .journey-greet-empty .greet-name { color: #ffffff; font-weight: 800; } /* Summary card (Stats) */ .profile-summary { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); margin-bottom: 14px; } .profile-summary-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-strong); background: var(--card-2); flex: none; } /* Base avatar disc. A with inline width/height (inline spans ignore width/height, so it must be a flex box) that shows either the Google profile photo or the traveler's initial on a level-hued fill. Context rules may override the size. */ .avatar-disc { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; overflow: hidden; border-radius: 50%; background: hsl(var(--level-hue, 340), 58%, 52%); color: #ffffff; font-weight: 900; letter-spacing: -0.01em; user-select: none; } [data-theme="dark"] .avatar-disc { background: hsl(var(--level-hue, 340), 48%, 40%); } .avatar-disc .avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-summary-id { display: flex; flex-direction: column; gap: 4px; flex: 1; } .profile-summary .sub { font-weight: 700; color: var(--ink); } .profile-summary.level-1 .sub { color: var(--lv-1-ink); } .profile-summary.level-2 .sub { color: var(--lv-2-ink); } .profile-summary.level-3 .sub { color: var(--lv-3-ink); } .profile-summary.level-4 .sub { color: var(--lv-4-ink); } .profile-summary.level-5 .sub { color: var(--lv-5-ink); } .profile-summary.level-6 .sub { color: var(--lv-6-ink); } .profile-summary-go { color: var(--muted); font-size: 1.4rem; } /* Profile screen */ .profile-card { text-align: center; } .profile-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; } .profile-preview { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 3px solid var(--line-strong); background: var(--card-2); } .profile-name-line { font-size: 1.3rem; font-weight: 800; } .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mini-stat { border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 16px; padding: 20px 8px; background: var(--card); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .mini-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03); border-color: var(--line); } .mini-stat b { font-size: 1.8rem; font-weight: 800; line-height: 1; } .mini-stat span { font-size: 0.8rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; } /* s-started: Indigo */ .mini-stat.s-started { background: linear-gradient(135deg, var(--card), rgba(85, 102, 166, 0.08)); border-color: rgba(85, 102, 166, 0.15); } .mini-stat.s-started b, .mini-stat.s-started span { color: #4b5a93; } /* s-mastered: Gold */ .mini-stat.s-mastered { background: linear-gradient(135deg, var(--card), rgba(168, 129, 58, 0.08)); border-color: rgba(168, 129, 58, 0.15); } .mini-stat.s-mastered b, .mini-stat.s-mastered span { color: #8c6a2c; } /* s-streak: Sakura */ .mini-stat.s-streak { background: linear-gradient(135deg, var(--card), rgba(187, 62, 99, 0.08)); border-color: rgba(187, 62, 99, 0.15); } .mini-stat.s-streak b, .mini-stat.s-streak span { color: #a33154; } /* s-xp: Emerald Green */ .mini-stat.s-xp { background: linear-gradient(135deg, var(--card), rgba(79, 157, 105, 0.08)); border-color: rgba(79, 157, 105, 0.15); } .mini-stat.s-xp b, .mini-stat.s-xp span { color: #3b7e52; } /* Dark theme overrides */ [data-theme="dark"] .mini-stat.s-started { background: linear-gradient(135deg, var(--card), rgba(85, 102, 166, 0.16)); border-color: rgba(85, 102, 166, 0.25); } [data-theme="dark"] .mini-stat.s-started b, [data-theme="dark"] .mini-stat.s-started span { color: #a4b3eb; } [data-theme="dark"] .mini-stat.s-mastered { background: linear-gradient(135deg, var(--card), rgba(168, 129, 58, 0.16)); border-color: rgba(168, 129, 58, 0.25); } [data-theme="dark"] .mini-stat.s-mastered b, [data-theme="dark"] .mini-stat.s-mastered span { color: #e5c382; } [data-theme="dark"] .mini-stat.s-streak { background: linear-gradient(135deg, var(--card), rgba(187, 62, 99, 0.16)); border-color: rgba(187, 62, 99, 0.25); } [data-theme="dark"] .mini-stat.s-streak b, [data-theme="dark"] .mini-stat.s-streak span { color: #f78da7; } [data-theme="dark"] .mini-stat.s-xp { background: linear-gradient(135deg, var(--card), rgba(79, 157, 105, 0.16)); border-color: rgba(79, 157, 105, 0.25); } [data-theme="dark"] .mini-stat.s-xp b, [data-theme="dark"] .mini-stat.s-xp span { color: #92e0ac; } .profile-editor { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; text-align: left; } .field>span { font-weight: 600; font-size: .9rem; color: var(--ink-2); } .field input { padding: 11px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; } .field input:focus-visible { outline: none; box-shadow: var(--focus); } .picker { display: flex; flex-direction: column; gap: 8px; } .picker-lbl { font-weight: 600; font-size: .9rem; color: var(--ink-2); text-align: left; } .swatch-row { display: flex; flex-wrap: wrap; gap: 8px; } .swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: var(--sw); border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--line-strong); } .swatch.on { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); } .swatch:focus-visible { outline: none; box-shadow: var(--focus); } .chip { padding: 8px 14px; border-radius: var(--r-ctrl); cursor: pointer; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink-2); font: inherit; font-size: .9rem; } .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chip:focus-visible { outline: none; box-shadow: var(--focus); } .onboard-name-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } /* Profile v2: hero row, XP bar, account + badges cards, avatar grid */ .profile-hero-card { display: flex; align-items: center; gap: 24px; text-align: left; padding: 24px 28px; border-radius: 24px; background: hsl(var(--level-hue, 210), 70%, 42%); border: 1px solid hsl(var(--level-hue, 210), 70%, 36%); box-shadow: 0 12px 32px hsla(var(--level-hue, 210), 70%, 42%, 0.3); color: #ffffff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-theme="dark"] .profile-hero-card { background: hsl(var(--level-hue, 210), 55%, 30%); border-color: hsl(var(--level-hue, 210), 55%, 25%); box-shadow: 0 12px 32px hsla(var(--level-hue, 210), 55%, 30%, 0.35); } .profile-hero-card .profile-preview { width: 116px; height: 116px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background: var(--card); overflow: hidden; } .profile-hero-card .profile-preview .avatar-disc { width: 108px !important; height: 108px !important; border-radius: 50%; overflow: hidden; } .profile-id { flex: 1; min-width: 0; } .profile-name-line { font-size: 1.85rem; font-weight: 900; color: #ffffff; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .profile-hero-card .profile-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } .profile-hero-card .profile-title .profile-rank-lvl { font-size: 0.7rem; font-weight: 500; color: hsl(var(--level-hue, 210), 95%, 88%); opacity: 0.85; } .profile-hero-card .profile-title .profile-rank-title { font-size: 0.95rem; font-weight: 900; color: #ffffff; opacity: 1; } .profile-xp { margin-top: 14px; } .profile-hero-card .profile-xp-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); overflow: hidden; } .profile-hero-card .profile-xp-bar span { display: block; height: 100%; border-radius: 6px; background: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); } .profile-hero-card .profile-xp-cap { font-size: 0.78rem; color: hsl(var(--level-hue, 210), 95%, 90%); margin-top: 6px; } .account-card, .profile-badges { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .account-info { min-width: 0; } .account-lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .account-email { font-weight: 700; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-since { font-size: 0.8rem; color: var(--muted); margin-top: 2px; } .profile-badges-card { padding: 0 !important; } .profile-badges-link { display: block; padding: 20px 22px; text-decoration: none; color: inherit; } .profile-badges-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .profile-badges-header .profile-summary-go { font-size: 0.85rem; font-weight: 700; color: var(--accent); } .profile-badges-body { display: flex; flex-direction: column; gap: 8px; } .profile-badges-text { font-size: 0.95rem; color: var(--ink); } .profile-badges-text b { font-weight: 800; color: var(--accent); } .profile-badges-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; } .profile-badges-bar .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--dur) var(--ease); } .profile-badges-link:hover .profile-badges-header .profile-summary-go { text-decoration: underline; } @media (max-width: 380px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- Custom cursor: minimal dot + ring ---------- */ /* Default = a small filled dot; clickable = a hollow ring (accent-tinted) with a tiny centre dot for precision. Center hotspot (12,12) so pointing stays exact. Each SVG carries a faint contrast halo so it reads on light and sumi-dark; the tokens are also redefined under dark for the right ink/accent. Inline data URIs (offline, file://-safe). Disabled on touch/coarse pointers. */ :root { /* light: dark ink dot with white halo; sakura-rose ring */ --cur-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%232e2228' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, auto; --cur-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23bb3e63' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.1' fill='%23bb3e63'/%3E%3C/svg%3E") 12 12, pointer; } :root[data-theme="dark"] { /* dark: light ink dot with dark halo; lifted sakura-pink ring */ --cur-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23f6e9ee' stroke='%23171114' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, auto; --cur-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23e56b90' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.1' fill='%23e56b90'/%3E%3C/svg%3E") 12 12, pointer; } html { cursor: var(--cur-dot); } a, button, .lesson-tile, .kanji-cell, .btn, .chip, .swatch, .mode-card, .theme-toggle, .profile-link, .due-pill, .back-link, .bottomnav a, label, summary, [role="button"], [onclick], input[type="range"], input[type="checkbox"], input[type="radio"], .tree-widget .tree-img, .browse-tab { cursor: var(--cur-ring); } input, textarea, select, .field input { cursor: text; } @media (hover: none), (pointer: coarse) { /* Touch devices: no custom cursor needed. */ html, a, button, .btn { cursor: auto; } } /* ============================================================ APP SHELL - desktop sidebar + widget dashboard (Modern Dashboard direction) Phone keeps the topbar + bottom nav; desktop swaps to a left sidebar. ============================================================ */ .app-main { min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; } .sidebar { display: none; } @media (min-width: 860px) { .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); width: 100%; } .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 20px 12px; background: var(--bg); } .topbar { display: none; } .bottomnav { display: none; } body { padding-bottom: 0; } #screen { max-width: none; margin: 0; padding: 24px 30px 44px; } /* Single-column reading screens read better centered and constrained on wide screens; the dashboard/gallery pages keep the full width for grids. */ #screen[data-page="welcome"], #screen[data-page="learn"], #screen[data-page="arcade"] { max-width: 720px; margin-left: auto; margin-right: auto; } #screen[data-page="profile"] { max-width: 1040px; margin-left: auto; margin-right: auto; } /* Quiz sessions use a two-column workbook (info + canvas), so they need more room than the single-column reading width to avoid dead space either side. */ #screen[data-page="practice"], #screen[data-page="recall"], #screen[data-page="listen"], #screen[data-page="review"] { max-width: 1040px; margin-left: auto; margin-right: auto; } } .brand { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; padding: 6px 10px 16px; text-decoration: none; color: var(--ink); } .brand span { color: var(--accent); } .side-nav { display: flex; flex-direction: column; gap: 3px; } .navlink { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-ctrl); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .navlink .ic { font-size: 1.15rem; width: 22px; text-align: center; color: var(--muted); } .navlink:hover { background: var(--bg-tint); } .navlink.active { background: var(--accent-soft); color: var(--accent); } .navlink.active .ic { color: var(--accent); } .navlink:focus-visible { outline: none; box-shadow: var(--focus); } .navlink .nav-badge { position: static; margin-left: auto; } .side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 6px; } .side-profile { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: hsl(var(--level-hue, 210), 70%, 42%); border: 1px solid hsl(var(--level-hue, 210), 70%, 36%); text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); } [data-theme="dark"] .side-profile { background: hsl(var(--level-hue, 210), 55%, 30%); border-color: hsl(var(--level-hue, 210), 55%, 25%); } .side-profile:hover { transform: translateY(-2.5px); box-shadow: 0 8px 24px hsla(var(--level-hue, 210), 70%, 42%, 0.35); filter: brightness(1.06); } [data-theme="dark"] .side-profile:hover { box-shadow: 0 8px 24px hsla(var(--level-hue, 210), 55%, 30%, 0.35); } .side-profile:focus-visible { outline: none; box-shadow: var(--focus); } .side-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--card); flex: none; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform var(--dur) var(--ease); } .side-profile:hover .side-av { transform: scale(1.05); } .side-id { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .side-id b { font-size: 1.05rem; font-weight: 850; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; letter-spacing: -0.02em; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .side-id small { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 3px; background: none; border: none; padding: 0; border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } .side-id small span { display: block; } .side-id small .profile-rank-lvl { font-size: 0.68rem; font-weight: 600; color: hsl(var(--level-hue, 210), 95%, 88%); opacity: 0.9; } .side-id small .profile-rank-title { font-size: 0.74rem; font-weight: 700; color: #ffffff; opacity: 1; } [data-theme="dark"] .side-id small { color: hsl(var(--level-hue, 210), 95%, 84%); background: none; border: none; } .side-foot-actions { display: flex; gap: 8px; justify-content: flex-start; } .side-foot .theme-toggle { flex: none; width: 34px; height: 34px; } .side-foot .theme-toggle::after { width: 44px; height: 44px; } /* ---- Dashboard widgets ---- */ .page-head { margin-bottom: 24px; position: relative; padding: 30px 28px 28px; border-radius: 28px; background: linear-gradient(180deg, rgba(251, 229, 238, 0.96), rgba(255, 255, 255, 0.94)); border: 1px solid rgba(187, 62, 99, 0.14); box-shadow: 0 16px 32px rgba(187, 62, 99, 0.09); overflow: hidden; animation: page-head-pop 0.6s ease-out both; display: grid; gap: 18px; } h1.screen-title { font-size: 2.05rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.1; max-width: 760px; color: var(--ink); } .page-head .username { color: var(--accent); } .page-head .sub { margin: 0; color: var(--ink-2); font-size: 1rem; max-width: 720px; position: relative; } @keyframes page-head-pop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } :root[data-theme="dark"] .page-head { background: linear-gradient(180deg, rgba(61, 33, 52, 0.92), rgba(28, 15, 26, 0.96)); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28); } @keyframes title-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes accent-bar { 0%, 100% { transform: translateX(0); opacity: 0.85; } 50% { transform: translateX(6px); opacity: 0.6; } } .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: stretch; } .widget { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; box-shadow: var(--sh-1); min-width: 0; } a.widget { text-decoration: none; color: inherit; display: block; } a.widget:hover { box-shadow: var(--sh-2); } a.widget:focus-visible { outline: none; box-shadow: var(--focus); } .w3 { grid-column: span 3; } .w4 { grid-column: span 4; } .w6 { grid-column: span 6; } .w8 { grid-column: span 8; } .w12 { grid-column: span 12; } .w-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; display: block; } .stat-num { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); } .stat-num.accent { color: var(--accent); } .stat-of { font-size: 1rem; color: var(--ink-2); font-weight: 700; margin-left: 0.4rem; } .stat-lbl { color: var(--ink-2); font-size: 0.96rem; margin-top: 10px; line-height: 1.6; } .ringrow { display: flex; align-items: center; gap: 16px; } .ring { width: 90px; height: 90px; flex: none; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; } .ring::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); } .ring b { position: relative; font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--ink); } .ring-xp { background: conic-gradient(var(--xp) calc(var(--p) * 1%), var(--bg) 0); } .wbar { height: 10px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); } .wbar>i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 75%, var(--card))); border-radius: 999px; } .wbar.at-risk>i { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 75%, var(--card))); } .legendrow { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-2); margin-top: 16px; } .legendrow span { padding: 0; border-radius: 0; background: transparent; border: none; } .legendrow .accent { color: var(--accent); } .tierlist { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .tier { font-size: 0.9rem; color: var(--ink-2); line-height: 1.35; } .tier b { display: inline-block; min-width: 1.4em; color: var(--ink); font-weight: 800; } .tier span { color: var(--muted); } .tier span::before { content: " - "; } .profile-links { margin-top: 18px; text-align: center; font-size: 0.9rem; color: var(--muted); } .profile-links a { color: var(--ink-2); } .dash-hero { background-color: var(--accent); border-color: var(--accent); color: #fff; position: relative; overflow: hidden; } .dash-hero .w-title { color: rgba(255, 255, 255, 0.75); } .widget::before { content: attr(data-glyph); position: absolute; top: 18px; right: 18px; font-size: 5.6rem; line-height: 1; color: rgba(187, 62, 99, 0.09); font-family: "Noto Sans JP", sans-serif; pointer-events: none; } .widget-goal::before { content: "目"; } .widget-streak::before { content: "日"; } .widget-level::before { content: "段"; } .widget-mastery::before { content: "漢"; } .widget-due::before { content: "今"; } .widget-tree::before { content: "木"; } .widget-practice::before { content: "練"; } .widget-kanji::before { content: "字"; } .widget { position: relative; } /* Custom dynamic styling for the level card */ .widget-level { border-color: hsla(var(--level-hue, 200), 50%, 50%, 0.18); background: linear-gradient(135deg, var(--card), hsla(var(--level-hue, 200), 30%, 97%, 0.35)); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } [data-theme="dark"] .widget-level { border-color: hsla(var(--level-hue, 200), 50%, 45%, 0.18); background: linear-gradient(135deg, var(--card), hsla(var(--level-hue, 200), 25%, 12%, 0.12)); } .widget-level:hover { border-color: hsla(var(--level-hue, 200), 65%, 50%, 0.35); box-shadow: 0 8px 24px hsla(var(--level-hue, 200), 50%, 50%, 0.08), var(--sh-2); transform: translateY(-3px); } .widget-level::before { color: hsla(var(--level-hue, 200), 70%, 50%, 0.09); transition: color 0.3s ease; } [data-theme="dark"] .widget-level::before { color: hsla(var(--level-hue, 200), 60%, 55%, 0.075); } .widget-level .ring-xp { background: conic-gradient(hsla(var(--level-hue, 200), 75%, 48%, 1) calc(var(--p) * 1%), var(--bg) 0); } [data-theme="dark"] .widget-level .ring-xp { background: conic-gradient(hsla(var(--level-hue, 200), 70%, 55%, 1) calc(var(--p) * 1%), var(--bg) 0); } .widget-level .ring b { color: hsla(var(--level-hue, 200), 80%, 35%, 1); } [data-theme="dark"] .widget-level .ring b { color: hsla(var(--level-hue, 200), 80%, 65%, 1); } .widget-level .level-title { font-size: 1.1rem; font-weight: 800; color: hsla(var(--level-hue, 200), 80%, 32%, 1); display: block; margin-bottom: 2px; } [data-theme="dark"] .widget-level .level-title { color: hsla(var(--level-hue, 200), 80%, 70%, 1); } /* Custom progress ring styling for the daily goal card */ .widget-goal .ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg) 0); transition: all 0.3s ease; } .widget-goal.achieved { border-color: hsla(145, 50%, 50%, 0.18); background: linear-gradient(135deg, var(--card), hsla(145, 30%, 97%, 0.35)); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } [data-theme="dark"] .widget-goal.achieved { border-color: hsla(145, 50%, 45%, 0.18); background: linear-gradient(135deg, var(--card), hsla(145, 25%, 12%, 0.12)); } .widget-goal.achieved:hover { border-color: hsla(145, 65%, 50%, 0.35); box-shadow: 0 8px 24px hsla(145, 50%, 50%, 0.08), var(--sh-2); transform: translateY(-3px); } .widget-goal.achieved::before { color: hsla(145, 70%, 50%, 0.09); transition: color 0.3s ease; } [data-theme="dark"] .widget-goal.achieved::before { color: hsla(145, 60%, 55%, 0.075); } .widget-goal.achieved .ring { background: conic-gradient(hsla(145, 75%, 48%, 1) calc(var(--p) * 1%), var(--bg) 0); border-color: hsla(145, 50%, 50%, 0.22); } [data-theme="dark"] .widget-goal.achieved .ring { background: conic-gradient(hsla(145, 70%, 55%, 1) calc(var(--p) * 1%), var(--bg) 0); border-color: hsla(145, 50%, 45%, 0.22); } .widget-goal.achieved .ring b { color: hsla(145, 80%, 35%, 1); } [data-theme="dark"] .widget-goal.achieved .ring b { color: hsla(145, 80%, 65%, 1); } .widget-goal.achieved .stat-lbl { color: hsla(145, 80%, 35%, 1); font-weight: 700; } [data-theme="dark"] .widget-goal.achieved .stat-lbl { color: hsla(145, 80%, 65%, 1); } .dash-hero.lead { padding: 30px 28px; box-shadow: var(--sh-2); } .dash-hero.lead .big-kanji { font-size: 4.4rem; } .dash-hero.lead .hero-row .meta b { font-size: 1.35rem; } .dash-hero.lead .btn-w { padding: 12px 18px; font-size: 0.95rem; } .hero-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .big-kanji { font-size: 3.2rem; font-weight: 600; line-height: 1; flex: none; } .hero-row .meta { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; } .hero-row .meta b { font-size: 1.1rem; } .hero-row .meta .sub { color: rgba(255, 255, 255, 0.88); } .hero-row .hero-jp { margin-left: auto; text-align: right; min-width: 140px; line-height: 1.3; } .hero-jp-ky { display: block; font-size: 0.98rem; color: rgba(255, 255, 255, 0.95); } .hero-jp-en { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); margin-top: 4px; } .btn-w { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--accent); font-weight: 700; padding: 12px 18px; border-radius: var(--r-ctrl); font-size: 0.95rem; white-space: nowrap; text-decoration: none; } .btn-w:focus-visible { outline: none; box-shadow: var(--focus); } .btn-w.solid { background: #fff; color: var(--accent); border: 1px solid rgba(255, 255, 255, 0.4); margin-top: 14px; } .dash-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .dmode { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-ctrl); text-decoration: none; color: var(--ink); background: var(--card-2); min-width: 0; } .dmode:hover { border-color: var(--line-strong); } .dmode:focus-visible { outline: none; box-shadow: var(--focus); } .dmode .g { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; } .dmode b { font-size: 0.9rem; display: block; } .dmode small { color: var(--muted); font-size: 0.74rem; } .g-recall { background: var(--indigo-soft); color: var(--indigo); } .g-listen { background: var(--ok-soft); color: var(--ok); } .g-review { background: var(--accent-soft); color: var(--accent); } .g-practice { background: var(--xp-soft); color: var(--warn); } /* Sakura tree progress panel (pixel-art growth stages) */ /* Due widget: vertically centered so a near-empty "nothing due" state doesn't leave a void, with a Keep-learning link to fill it purposefully. */ .widget-due { display: flex; flex-direction: column; } .due-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; } .due-body .btn-w { margin-top: 2px; } .due-link { font-weight: 700; color: var(--accent); text-decoration: none; } .due-link:hover { text-decoration: underline; } /* Play launcher (shown in the due slot when caught up). The whole card cycles through the four game modes one at a time: its surface color, watermark glyph, mode name, and CTA all shift together (recall / listen / review / practice). align-self:start keeps it compact instead of stretching into the tall row. */ /* Play launcher (shown in the due slot when caught up). The whole card cycles through the four game modes one at a time: its background color, watermark glyph, and bottom mode name all transition together smoothly. */ a.widget-play { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 196px; text-decoration: none; color: #ffffff; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* The dashboard play widget is BOTH .widget and a rotating .m-* mode class. The bare .m-* background rules have the same specificity as .widget but come earlier in the file, so .widget's light card background was winning and the white text vanished. Re-assert the mode background at higher specificity, scoped to the widget, so the rotating color always shows. */ a.widget-play.m-recall { background-color: var(--mbg); border-color: var(--mbg); } a.widget-play.m-listen { background-color: var(--mbg); border-color: var(--mbg); } a.widget-play.m-review { background-color: var(--mbg); border-color: var(--mbg); } a.widget-play.m-practice { background-color: var(--mbg); border-color: var(--mbg); } a.widget-play:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(60, 45, 25, 0.05), var(--sh-2); } [data-theme="dark"] a.widget-play:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), var(--sh-2); } .play-watermark { position: absolute; top: 10px; right: 14px; font-size: 8.8rem; font-family: "Yu Mincho", "MS Mincho", serif; color: rgba(255, 255, 255, 0.14); pointer-events: none; z-index: 0; transform: rotate(6deg); line-height: 1; opacity: 1; } @media (max-width: 900px) { .play-watermark { font-size: 6.2rem; top: 12px; right: 14px; } } .play-top { position: relative; z-index: 1; } .play-title { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.02em; color: #ffffff; margin-bottom: 2px; } .play-how { color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; margin-top: 10px; line-height: 1.5; max-width: 92%; } .play-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; position: relative; z-index: 1; } .play-mode-name { font-weight: 800; font-size: 2.15rem; letter-spacing: -0.03em; line-height: 1.1; color: #ffffff; opacity: 1; z-index: 1; } .play-meta { margin-left: auto; } .play-cta { font-size: 0.85rem; font-weight: 700; color: #ffffff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .play-cta:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.5); } @media (prefers-reduced-motion: reduce) { a.widget-play { transition: none; background: var(--mbg); border-color: var(--mbg); } } /* Tree widget: a clean centered card (image + label), name at a sane size. */ .tree-widget { display: flex; flex-direction: column; } .tree-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .tree-name { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.15em; } .tree-body .tree-cap { text-align: center; min-width: 0; } .tree-body .tree-cap .sub { margin-top: 4px; font-weight: 700; color: var(--ink); } .tree-name.stage-1 { color: var(--stg-1); } .tree-name.stage-2 { color: var(--stg-2); } .tree-name.stage-3 { color: var(--stg-3); } .tree-name.stage-4 { color: var(--stg-4); } .tree-name.stage-5 { color: var(--stg-5); } .tree-name.stage-6 { color: var(--stg-6); } .tree-cap .stat-lbl.stage-1 { color: var(--stg-1); } .tree-cap .stat-lbl.stage-2 { color: var(--stg-2); } .tree-cap .stat-lbl.stage-3 { color: var(--stg-3); } .tree-cap .stat-lbl.stage-4 { color: var(--stg-4); } .tree-cap .stat-lbl.stage-5 { color: var(--stg-5); } .tree-cap .stat-lbl.stage-6 { color: var(--stg-6); } .tree-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .tree-stage { flex: none; width: 190px; height: 170px; display: flex; align-items: flex-end; justify-content: center; } .tree-img { max-width: 100%; max-height: 100%; height: auto; width: auto; image-rendering: pixelated; /* keep the pixel art crisp when scaled */ transform-origin: 50% 100%; } .tree-cap { flex: 1; min-width: 150px; } .tree-cap .sub { margin-top: 6px; } @media (prefers-reduced-motion: no-preference) { .tree-img { animation: tree-sway 6s ease-in-out infinite; } .tree-stage.grew .tree-img { animation: tree-grow 0.85s var(--ease); } } @keyframes tree-sway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } } @keyframes tree-grow { 0% { transform: scale(0.6); opacity: 0.35; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .kstrip { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .kcell { width: 50px; height: 50px; border-radius: 11px; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid var(--line); position: relative; text-decoration: none; color: var(--ink); } .kcell:hover { border-color: var(--line-strong); } .kcell:focus-visible { outline: none; box-shadow: var(--focus); } .kcell.due { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .kcell.mastered { background: var(--ok-soft); border-color: var(--ok); } .kcell.known { background: var(--ok-soft); border-color: var(--ok); } .kcell.known .dot { background: var(--ok); } .kcell .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; } .kcell.due .dot { background: var(--accent); } .kcell.mastered .dot { background: var(--ok); } @media (max-width: 1080px) { .dash-grid { grid-template-columns: repeat(6, 1fr); } .w3 { grid-column: span 3; } .w4 { grid-column: span 3; } .w6 { grid-column: span 6; } .w8 { grid-column: span 6; } .w12 { grid-column: span 6; } } @media (max-width: 600px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .w3 { grid-column: span 2; } .w4 { grid-column: span 2; } .w6 { grid-column: span 2; } .w8 { grid-column: span 2; } .w12 { grid-column: span 2; } .dash-modes { grid-template-columns: 1fr; } } /* ============================================================ AUTH PAGE - full-screen branded login, app chrome hidden ============================================================ */ body[data-auth] .sidebar, body[data-auth] .topbar, body[data-auth] .bottomnav { display: none !important; } body[data-auth] .app { display: block; } body[data-auth] .app-main { display: block; } body[data-auth] #screen { max-width: none; margin: 0; padding: 0; } body[data-auth] #screen>* { animation: none; } .auth { min-height: 100vh; display: grid; grid-template-columns: 1.02fr 0.98fr; } .auth-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(26px, 6vw, 88px); } .auth-brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 38px; text-decoration: none; color: var(--ink); } .auth-brand span { color: var(--accent); } .auth-back { display: inline-block; margin-top: 30px; align-self: flex-start; font-size: 0.85rem; color: var(--ink-2); text-decoration: none; } .auth-back:hover { color: var(--accent); } .auth-toggle-theme { position: absolute; top: 20px; right: clamp(20px, 5vw, 40px); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); display: grid; place-items: center; } .auth-toggle-theme svg { width: 18px; height: 18px; } .auth-card { width: 100%; max-width: 400px; } .auth-card h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; } .auth-card .auth-sub { color: var(--ink-2); margin-bottom: 26px; } .auth-google { width: 100%; justify-content: center; gap: 10px; } .auth-google svg { width: 18px; height: 18px; } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.82rem; margin: 18px 0; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-field { display: block; margin-bottom: 14px; } .auth-field span { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; } .auth-field input { width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--card); color: var(--ink); } .auth-field input:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); } .auth-submit { width: 100%; justify-content: center; margin-top: 4px; } .auth-msg { min-height: 1.2em; font-size: 0.88rem; margin: 12px 0 2px; } .auth-msg.err { color: var(--accent); } .auth-msg.ok { color: var(--ok); } .auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--ink-2); } .auth-switch button { background: none; border: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; } .auth-switch button:hover { text-decoration: underline; } .auth-forgot { text-align: right; margin: 2px 0 -4px; } .auth-extra { text-align: center; margin-top: 10px; } .auth-extra:empty { margin-top: 0; } .auth-link { background: none; border: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; } .auth-link:hover { text-decoration: underline; } .auth-link:disabled { color: var(--ink-2); cursor: default; text-decoration: none; } .auth-foot { margin-top: 30px; font-size: 0.78rem; color: var(--muted); max-width: 380px; } .auth-foot a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .auth-foot a:hover { color: var(--text); text-decoration: underline; } /* visual side */ .auth-visual { position: relative; overflow: hidden; padding: 40px; display: grid; place-items: center; border-left: 1px solid var(--line); background: linear-gradient(158deg, var(--accent-soft), var(--card-2) 70%); } .auth-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 24% 18%, rgba(187, 62, 99, 0.10), transparent 46%); } .auth-canvas-wrapper { position: relative; z-index: 1; width: min(70%, 350px); aspect-ratio: 1; perspective: 1000px; } .auth-canvas { width: 100%; height: 100%; position: relative; background: #fffdfc; border-radius: var(--r-card); box-shadow: 0 30px 60px rgba(187, 62, 99, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6); display: grid; place-items: center; transform-style: preserve-3d; transition: transform 0.5s ease-out; } .auth-canvas::before, .auth-canvas::after { content: ""; position: absolute; background: #d8ccb8; opacity: 0.6; } .auth-canvas::before { left: 50%; top: 6%; bottom: 6%; width: 1px; } .auth-canvas::after { top: 50%; left: 6%; right: 6%; height: 1px; } .auth-canvas .glyph { font-size: 10rem; line-height: 1; color: #2b2b33; font-weight: 500; } .auth-glyph { position: relative; z-index: 1; width: 80%; aspect-ratio: 1; display: grid; place-items: center; transform: translateZ(20px); } .auth-glyph svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: no-preference) { .auth-canvas-wrapper { animation: auth-float 5.5s ease-in-out infinite; } } @keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .auth-canvas .xp-chip { position: absolute; z-index: 2; left: 10%; top: 8%; font-weight: 800; color: var(--xp); background: rgba(255, 255, 255, 0.95); padding: 6px 14px; border-radius: 99px; box-shadow: 0 10px 25px rgba(187, 62, 99, 0.15); opacity: 0; transform: translateY(15px) scale(0.8) translateZ(40px); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .auth-canvas .xp-chip.show { opacity: 1; transform: translateY(0) scale(1) translateZ(40px); } .auth-tag { position: absolute; z-index: 1; bottom: 9%; left: 0; right: 0; text-align: center; color: var(--ink-2); font-weight: 700; font-size: 1.02rem; padding: 0 24px; } @media (max-width: 820px) { .auth { grid-template-columns: 1fr; } .auth-visual { display: none; } } /* Activity heatmap (Stats) */ .heatmap-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .heatmap-top .sub { font-size: 0.8rem; } .heatmap-head, .heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 300px; } .heatmap-head { margin-bottom: 5px; } .heatmap-head span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); } .heat-cell { aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); } .heat-cell.l0 { background: color-mix(in srgb, var(--ink) 6%, var(--card)); } .heat-cell.l1 { background: color-mix(in srgb, var(--accent) 26%, var(--card)); } .heat-cell.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--card)); } .heat-cell.l3 { background: color-mix(in srgb, var(--accent) 74%, var(--card)); } .heat-cell.l4 { background: var(--accent); } .heat-cell.future { background: transparent; } .heatmap-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 0.78rem; color: var(--muted); } .heatmap-legend .heat-cell { width: 15px; height: 15px; aspect-ratio: auto; } .heatmap-streak { margin-top: 14px; font-size: 0.92rem; color: var(--ink-2); } .heatmap-streak b { color: var(--ink); } /* Legal / privacy page (full-screen, chrome hidden via body[data-auth]) */ .legal { max-width: 720px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 40px) 72px; } .legal .auth-brand { display: inline-block; margin-bottom: 24px; } .legal h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; } .legal .legal-date { color: var(--muted); font-size: 0.85rem; margin: 4px 0 22px; } .legal h2 { font-size: 1.2rem; font-weight: 800; margin: 28px 0 8px; } .legal h3 { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin: 16px 0 6px; } .legal p { color: var(--ink-2); margin-bottom: 12px; } .legal ul { color: var(--ink-2); margin: 0 0 12px; padding-left: 20px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--accent); } .legal a.btn-accent { color: #fff; } .legal a.btn-ghost { color: var(--indigo); } /* ============================================================ YOZAKURA NIGHT PETALS ANIMATION ============================================================ */ .yozakura-petals { position: fixed; top: -40px; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; } .petal { position: absolute; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; pointer-events: none; opacity: 0.6; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12)); } .petal:nth-child(odd) { animation: fall-right 14s linear infinite; } .petal:nth-child(even) { animation: fall-left 14s linear infinite; } /* Different offsets and delays for the petals */ .petal:nth-child(1) { left: 12%; width: 14px; height: 14px; animation-duration: 12s; animation-delay: 0s; } .petal:nth-child(2) { left: 28%; width: 18px; height: 18px; animation-duration: 18s; animation-delay: 3s; } .petal:nth-child(3) { left: 45%; width: 12px; height: 12px; animation-duration: 14s; animation-delay: 6s; } .petal:nth-child(4) { left: 62%; width: 16px; height: 16px; animation-duration: 16s; animation-delay: 1s; } .petal:nth-child(5) { left: 78%; width: 20px; height: 20px; animation-duration: 20s; animation-delay: 8s; } .petal:nth-child(6) { left: 90%; width: 15px; height: 15px; animation-duration: 15s; animation-delay: 4s; } .petal:nth-child(7) { left: 35%; width: 13px; height: 13px; animation-duration: 17s; animation-delay: 10s; } .petal:nth-child(8) { left: 70%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: 5s; } @keyframes fall-right { 0% { top: -40px; transform: translateX(0) rotate(0deg) scale(0.8) rotateY(0deg); } 50% { transform: translateX(45px) rotate(180deg) scale(1) rotateY(180deg); } 100% { top: 105vh; transform: translateX(90px) rotate(360deg) scale(0.8) rotateY(360deg); } } @keyframes fall-left { 0% { top: -40px; transform: translateX(0) rotate(0deg) scale(0.8) rotateY(0deg); } 50% { transform: translateX(-45px) rotate(-180deg) scale(1) rotateY(-180deg); } 100% { top: 105vh; transform: translateX(-90px) rotate(-360deg) scale(0.8) rotateY(-360deg); } } @media (prefers-reduced-motion: reduce) { .petal { animation: none !important; display: none !important; } } /* ============================================================ AVATAR SELECTION EFFECTS & ANIMATIONS ============================================================ */ .pop-bounce { animation: pop-bounce-key 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } @keyframes pop-bounce-key { 0% { transform: scale(0.9); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pop-bounce { animation: none; } } /* ============================================================ EMPTY STATE PATHWAY DESIGNS ============================================================ */ .review-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; } .empty-graphic { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; color: var(--accent); } .svg-empty-tree { color: var(--accent); opacity: 0.85; } .path-line { width: 2px; height: 24px; border-left: 2px dashed var(--line-strong); margin-top: 8px; } .empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } /* Lock icon styles */ .svg-lock-overlay, .svg-lock-inline { color: var(--muted); opacity: 0.65; } .svg-unlock-toast, .svg-cherry-blossom-toast { color: #fff; } /* ============================================================ BROWSE FILTER TABS ============================================================ */ .browse-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .browse-tab { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-size: 0.9rem; font-weight: 700; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; } .browse-tab:hover { border-color: var(--line-strong); color: var(--ink); } /* ============================================================ Stats makeover: confident KPI band + heatmap hero + learn strip ============================================================ */ .stats-hero { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 32px; } .statcard { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 20px; padding: 24px; background: var(--card); display: flex; flex-direction: column; justify-content: center; min-height: 140px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.02); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .statcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05); border-color: var(--line); } .sc-glyph { position: absolute; right: -12px; bottom: -24px; font-size: 6rem; line-height: 1; font-weight: 800; opacity: 0.04; pointer-events: none; user-select: none; transition: opacity 0.3s ease; } .statcard:hover .sc-glyph { opacity: 0.08; } .statcard .sc-num { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .statcard .sc-lbl { font-weight: 700; margin-top: 6px; color: var(--ink); } .statcard .sc-sub { font-size: 0.82rem; color: var(--muted); margin-top: 3px; } /* Known lead: accent tint */ .sc-known { background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--accent) 8%, var(--card))); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .sc-known .sc-num { color: var(--accent); } .sc-known .sc-glyph { color: var(--accent); } .sc-of { font-size: 1.2rem; color: var(--muted); font-weight: 700; opacity: 0.5; margin-left: 2px; } /* Streak: warm tint */ .sc-streak { background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--warn) 8%, var(--card))); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .sc-streak .sc-num { color: var(--warn); } .sc-streak .sc-glyph { color: var(--warn); } .week-dots { display: flex; gap: 6px; margin-top: 14px; } .week-dots .wd { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--warn) 15%, transparent); } .week-dots .wd.on { background: var(--warn); } /* Known today: moss tint */ .sc-today { background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--ok) 8%, var(--card))); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .sc-today .sc-num { color: var(--ok); } .sc-today .sc-glyph { color: var(--ok); } /* Level: level-hue tint */ .sc-level { background: linear-gradient(135deg, var(--card), color-mix(in srgb, hsl(var(--level-hue, 200) 70% 55%) 8%, var(--card))); border-color: color-mix(in srgb, hsl(var(--level-hue, 200) 70% 55%) 30%, transparent); } .sc-level .sc-num { color: hsl(var(--level-hue, 200) 60% 42%); font-size: 2rem; } .sc-level .sc-glyph { color: hsl(var(--level-hue, 200) 60% 42%); } .mini-xp { height: 6px; border-radius: 3px; margin-top: 12px; background: color-mix(in srgb, hsl(var(--level-hue, 200) 70% 55%) 18%, var(--card)); overflow: hidden; } .mini-xp i { display: block; height: 100%; background: hsl(var(--level-hue, 200) 60% 48%); } [data-theme="dark"] .sc-level .sc-num { color: hsl(var(--level-hue, 200) 65% 70%); } [data-theme="dark"] .mini-xp i { background: hsl(var(--level-hue, 200) 65% 62%); } .heatmap-hero { margin-bottom: 16px; } .heatmap-body { display: flex; gap: clamp(20px, 5vw, 56px); align-items: center; flex-wrap: wrap; } .heatmap-body .heatmap-main { flex: 0 0 auto; } .heatmap-body .heatmap-grid, .heatmap-body .heatmap-head { max-width: 360px; } .heatmap-body .heat-cell { border-radius: 5px; } .heatmap-side { flex: 1 1 240px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; align-content: center; } .hs-stat { border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 16px; padding: 16px 20px; background: var(--card); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015); transition: all 0.3s ease; } .hs-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03); border-color: var(--line); } .hs-stat b { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); } .hs-stat span { display: block; margin-top: 5px; font-size: 0.8rem; color: var(--muted); } /* Forward-motion strip: Watch > Trace > Known */ .learnflow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px; } .lf-step { display: flex; align-items: center; gap: 16px; flex: 1 1 0; min-width: 170px; padding: 8px; border-radius: 16px; transition: background 0.2s ease; } .lf-step:hover { background: var(--bg); } .lf-glyph { font-size: 1.5rem; font-weight: 800; line-height: 1; width: 54px; height: 54px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--card); color: var(--accent); box-shadow: 0 4px 12px rgba(187, 62, 99, 0.08); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .lf-step b { display: block; font-size: 1.1rem; color: var(--ink); margin-bottom: 2px; } .lf-step div span { display: block; font-size: 0.85rem; color: var(--muted); } .lf-arrow { font-size: 1.8rem; color: var(--line-strong); opacity: 0.5; margin: 0 4px; } .tree-collect-count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 0.95rem; margin-top: 2px; } /* Lesson-detail "Next up" preview (replaces the old dot-colour legend) */ .nextup { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 14px; background: var(--accent-soft); text-decoration: none; } .nextup.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 26%, var(--line)); } .nextup-glyph { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--ink); flex: none; } .nextup-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .nextup-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink); } .nextup.done .nextup-label { color: var(--ok); } .nextup-meaning { font-weight: 700; color: var(--ink); } .nextup-reading { font-size: 0.85rem; color: var(--muted); } .nextup-go { flex: none; font-weight: 700; color: var(--accent-ink); } .grid-key { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; } .grid-key .dot { width: 8px; height: 8px; border-radius: 50%; } /* Stats graphs: toughest kanji (horizontal) + weekly momentum (vertical) */ .stats-graphs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .graph-card { display: flex; flex-direction: column; } .graph-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; } .graph-head .sub { font-size: 0.8rem; } /* Horizontal accuracy bars */ .hbars { display: flex; flex-direction: column; gap: 10px; } .hbar-row { display: grid; grid-template-columns: 28px 1fr 42px; align-items: center; gap: 12px; text-decoration: none; padding: 4px 6px; border-radius: 10px; } .hbar-row:hover { background: color-mix(in srgb, var(--accent) 8%, var(--card)); } .hbar-k { font-size: 1.3rem; font-weight: 700; color: var(--ink); text-align: center; line-height: 1; } .hbar-track { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); overflow: hidden; } .hbar-track i { display: block; height: 100%; border-radius: 6px; background: var(--accent); } .hbar-val { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; } /* Vertical momentum bars */ .vbars { display: flex; align-items: flex-end; gap: 8px; height: 148px; } .vbar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .vbar-val { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); min-height: 0.9rem; } .vbar-wrap { width: 100%; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; } .vbar { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--accent); min-height: 2px; } @media (max-width: 760px) { .stats-graphs { grid-template-columns: 1fr; } } @media (max-width: 900px) { .stats-hero { grid-template-columns: 1fr 1fr; } .sc-known { grid-column: span 2; } } @media (max-width: 560px) { .stats-hero { grid-template-columns: 1fr; } .sc-known { grid-column: span 1; } .lf-arrow { display: none; } } .browse-tab.active { background: var(--accent); color: #fff; border-color: transparent; box-shadow: var(--sh-1); }