/* ------------------------------------------------------------------ Kotoba Type — kawaii pixel theme. Flat pastel fills, 2px ink outlines, hard offset shadows, pixel fonts. Light + dark modes. ------------------------------------------------------------------ */ :root { --bg: #fff4f7; --surface: #ffffff; --surface-2: #fff0f4; --border: #3b2f45; --ink: #3b2f45; --text: #3b2f45; --muted: #8b7a94; --ok: #57c99a; --bad: #ff6b6b; --warn: #ffcf4a; --accent: #ff85a1; --accent-soft: #ffd6e0; --on-accent: #3b2f45; --sprite-body: #ffffff; --dot: #f3d9e2; /* Font set "clean" (default): readable sans. Other sets are selected with data-font on . */ --font-ja: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', system-ui, sans-serif; --font-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --font-en: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-num: 'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-ui: var(--font-ja); --num-scale: 1.3; /* numeric type is sized for the compact pixel font; other sets scale up */ --text-scale: 1; /* sentence size: data-size s / m / l */ } :root[data-theme="dark"] { --bg: #1d1828; --surface: #2a2238; --surface-2: #332a44; --border: #0f0b16; --ink: #0f0b16; --text: #f6ecf5; --muted: #a898b3; --ok: #7fe0b6; --bad: #ff8585; --warn: #ffd866; --accent: #ff8fab; --accent-soft: #5a3548; --on-accent: #1d1828; --sprite-body: #f6ecf5; --dot: #2a2238; } :root[data-lang="ko"] { --font-ui: var(--font-ko); } :root[data-lang="en"] { --font-ui: var(--font-en); } :root[data-font="pixel"] { --font-ja: 'DotGothic16', 'Galmuri11', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; --font-ko: 'Galmuri11', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-num: 'Press Start 2P', 'Galmuri11', 'DotGothic16', monospace; --font-mono: 'Galmuri11', ui-monospace, Menlo, Consolas, monospace; --font-en: 'Galmuri11', 'DotGothic16', monospace; --num-scale: 1; } :root[data-font="round"] { --font-ja: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif; --font-ko: 'Gowun Dodum', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-num: 'Zen Maru Gothic', 'Gowun Dodum', system-ui, sans-serif; --font-en: 'Zen Maru Gothic', 'Nunito', system-ui, sans-serif; } :root[data-font="serif"] { --font-ja: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --font-ko: 'Noto Serif KR', 'Apple Myungjo', 'Batang', serif; --font-num: 'Noto Serif JP', 'Noto Serif KR', serif; --font-en: 'Noto Serif', Georgia, serif; } :root[data-font="system"] { --font-ja: system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; --font-ko: system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-num: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-en: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root[data-size="s"] { --text-scale: 0.85; } :root[data-size="l"] { --text-scale: 1.25; } :root[data-lang="ko"] { --bg: #eef6ff; --surface-2: #e9f2ff; --accent: #7cc0ff; --accent-soft: #d6e9ff; --dot: #d6e4f3; } :root[data-lang="en"] { --bg: #eefaf3; --surface-2: #e8f6ee; --accent: #3fbf8a; --accent-soft: #d3f2e2; --dot: #d3e9dc; } :root[data-lang="en"][data-theme="dark"] { --bg: #16221c; --surface: #1f2d26; --surface-2: #27382f; --accent: #5fd6a8; --accent-soft: #2b4a3c; --dot: #1f2d26; } :root[data-lang="ko"][data-theme="dark"] { --bg: #171d2a; --surface: #222a3a; --surface-2: #2b3446; --accent: #86c5ff; --accent-soft: #2e4460; --dot: #222a3a; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px); background-size: 18px 18px; color: var(--text); font-family: var(--font-ui); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; } button { font: inherit; color: inherit; cursor: pointer; } kbd { font-family: var(--font-mono); font-size: 0.72em; padding: 2px 6px; border: 2px solid var(--ink); background: var(--surface-2); color: var(--text); box-shadow: 2px 2px 0 var(--ink); } h1, h2 { margin: 0; } h2 { font-size: 0.85rem; color: var(--text); margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; } h2::before { content: '■'; color: var(--accent); font-size: 0.7rem; } h2 small { font-weight: 400; color: var(--muted); font-size: 0.78rem; } .px { image-rendering: pixelated; display: block; } /* ---------- pixel frame primitives ---------- */ .panel, .setup, .sentence-card, .hud-item, .lang-card, .chip, .btn-primary, .icon-btn, .pill, .stat, .key, .toast, .direct-input, .result-ach .unlock { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); } .panel, .setup, .sentence-card, .btn-primary, .lang-card, .toast { box-shadow: 4px 4px 0 var(--ink); } .chip, .icon-btn, .pill, .hud-item, .key { box-shadow: 2px 2px 0 var(--ink); } .chip:active, .btn-primary:active, .lang-card:active, .icon-btn:active { transform: translate(2px, 2px); box-shadow: none; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); background: var(--surface); } .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 18px; font-family: var(--font-ja); } .brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; } .brand-heart { display: inline-flex; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pill { height: 36px; padding: 0 12px; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; } .pill b { color: var(--text); font-weight: 700; } .pill .dot { width: 8px; height: 8px; background: var(--accent); border: 2px solid var(--ink); } .xp-bar { width: 70px; height: 8px; border: 2px solid var(--ink); background: var(--surface-2); overflow: hidden; margin-left: 4px; } .xp-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s steps(8); } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text); } .icon-btn:hover { background: var(--accent-soft); } .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } main { padding: 14px 28px 14px; max-width: 1160px; margin: 0 auto; width: 100%; flex: 1; } .screen { display: none; } .screen.active { display: block; } .panel { padding: 20px; } /* ---------- home ---------- */ .home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr); gap: 26px; align-items: start; } .setup { padding: 16px 22px; } .hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .hero-title { font-size: 1.55rem; font-weight: 700; line-height: 1.3; } .hero-sub { color: var(--muted); margin: 4px 0 0; font-size: 0.88rem; } .mascot { position: relative; display: inline-block; line-height: 0; animation: bob 2.4s steps(2) infinite; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .mascot:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; } .mascot.pet { animation: pet 0.5s steps(5) 1; } @keyframes pet { 0% { transform: scale(1, 1); } 25% { transform: scale(1.25, 0.75); } 50% { transform: scale(0.85, 1.2) translateY(-10px); } 75% { transform: scale(1.1, 0.9); } 100% { transform: scale(1, 1); } } .pet-heart { position: absolute; left: 50%; top: -6px; pointer-events: none; animation: heartup 0.9s steps(6) forwards; } @keyframes heartup { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } } .mascot.happy { animation: hop 0.5s steps(3) 2; } .mascot.sad { animation: shiver 0.3s steps(2) 2; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shiver { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } } .field { margin-bottom: 11px; } .field > label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; } .field > label:not(.toggle)::before { content: '▸ '; color: var(--accent); } .field-row { display: flex; gap: 24px; flex-wrap: wrap; } .hint { color: var(--muted); font-size: 0.78rem; margin: 6px 0 0; min-height: 1.2em; } .lang-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lang-card { display: flex; align-items: center; gap: 12px; padding: 7px 12px; text-align: left; } .lang-card:hover { background: var(--surface-2); } .lang-card.active { background: var(--accent-soft); } .lang-glyph { width: 36px; height: 36px; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; background: var(--surface-2); border: 2px solid var(--ink); font-family: var(--font-ja), var(--font-ko); } .lang-card.active .lang-glyph { background: var(--accent); color: var(--on-accent); } .lang-name { font-weight: 700; font-size: 1rem; } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chip { padding: 6px 12px; font-size: 0.86rem; } .chip small { font-size: 0.75em; margin-left: 2px; opacity: 0.85; } .chip:hover { background: var(--surface-2); } .chip.active { background: var(--accent); color: var(--on-accent); } .toggles { display: flex; gap: 18px; flex-wrap: wrap; } .toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; } .toggle input { appearance: none; width: 16px; height: 16px; border: 2px solid var(--ink); background: var(--surface); margin: 0; cursor: pointer; } .toggle input:checked { background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); } .btn-primary { width: 100%; padding: 12px 20px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: 12px; } .btn-primary:hover { filter: brightness(1.05); } .btn-primary kbd { background: var(--surface); } .btn-text { background: none; border: none; color: var(--muted); padding: 10px; text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; } .btn-text:hover { color: var(--text); } .btn-text.danger:hover { color: var(--bad); } .side { display: flex; flex-direction: column; gap: 18px; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat { background: var(--surface-2); padding: 10px 12px; box-shadow: none; } .stat-grid .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .stat .k { font-size: 0.72rem; color: var(--muted); } .stat .v { font-size: 1.1rem; font-weight: 700; margin-top: 4px; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .stat .v small { font-size: calc(0.6rem * var(--num-scale)); color: var(--muted); font-weight: 400; margin-left: 4px; font-family: var(--font-ui); } .goals { display: flex; flex-direction: column; gap: 12px; } .goal-level { border: 2px solid var(--ink); background: var(--surface-2); padding: 10px 12px; } .goal-level h3 { margin: 0 0 8px; font-size: 0.82rem; display: flex; align-items: center; gap: 8px; } .goal-level h3 .tag { font-size: 0.7rem; padding: 1px 6px; border: 2px solid var(--ink); background: var(--accent); color: var(--on-accent); } .goal { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 0.78rem; margin-bottom: 6px; } .goal:last-child { margin-bottom: 0; } .goal .name { color: var(--muted); } .goal .val { font-family: var(--font-num); font-size: calc(0.62rem * var(--num-scale)); } .goal .bar { grid-column: 1 / -1; height: 8px; border: 2px solid var(--ink); background: var(--surface); overflow: hidden; } .goal .bar span { display: block; height: 100%; background: var(--accent); } .goal.done .bar span { background: var(--ok); } .goal.done .name::after { content: ' ✓'; color: var(--ok); } .board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .board li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; font-size: 0.85rem; border: 2px solid var(--ink); background: var(--surface-2); } .board li.me { background: var(--accent-soft); } .board .pos { color: var(--muted); font-weight: 700; font-family: var(--font-num); font-size: calc(0.65rem * var(--num-scale)); } .board .meta { color: var(--muted); font-size: 0.75rem; } .board .sc { font-weight: 700; font-family: var(--font-num); font-size: calc(0.7rem * var(--num-scale)); } .board .rank-badge { display: inline-block; min-width: 18px; height: 18px; text-align: center; line-height: 16px; font-size: 0.72rem; font-weight: 700; margin-right: 6px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--ink); } .board li.empty { display: block; color: var(--muted); font-size: 0.82rem; padding: 6px 2px; background: none; border: 2px dashed var(--muted); } .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ach { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.3rem; background: var(--surface-2); border: 2px solid var(--ink); cursor: default; filter: grayscale(1); opacity: 0.35; } .ach.unlocked { filter: none; opacity: 1; background: var(--surface); box-shadow: 2px 2px 0 var(--ink); } /* ---------- play ---------- */ .hud { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .hud-item { min-width: 112px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; } .hud-label { font-size: 0.72rem; color: var(--muted); } .hud-value { font-size: calc(1rem * var(--num-scale)); font-weight: 700; font-family: var(--font-num); line-height: 1.6; font-variant-numeric: tabular-nums; } .hud-item.combo .hud-value { transition: transform 0.06s; } .sentence-main.swap { animation: swapin 0.16s steps(3) both; } @keyframes swapin { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .hud-item.combo.pop .hud-value { transform: scale(1.25); } .hud-item.combo.hot { background: var(--accent-soft); } .hud-item.combo.hot .hud-value { color: var(--accent); } .timebar { height: 10px; border: 2px solid var(--ink); background: var(--surface); margin: 16px auto 0; max-width: 860px; overflow: hidden; } #timebar-fill { height: 100%; width: 100%; background: var(--accent); transition: width 0.25s linear; } #timebar-fill.low { background: var(--bad); } .stage { position: relative; max-width: 900px; margin: 26px auto 0; } .countdown { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; font-size: calc(4rem * var(--num-scale)); font-weight: 700; color: var(--accent); font-family: var(--font-num); text-shadow: 4px 4px 0 var(--ink); animation: count 1s steps(4) infinite; } @keyframes count { 0% { transform: scale(1.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { opacity: 0.9; } } .sentence-card { position: relative; padding: 34px 36px 28px; min-height: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: opacity 0.2s; } .sentence-card.blur { opacity: 0.3; } .sentence-card.shake { animation: shake 0.18s steps(3); } @keyframes shake { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-6px); } 66% { transform: translateX(6px); } } .sentence-card.flash { animation: flash 0.2s steps(2); } @keyframes flash { 0% { background: var(--accent-soft); } 100% { background: var(--surface); } } .card-mascot { position: absolute; top: -26px; right: 18px; } .progress-dots { display: flex; gap: 4px; margin-bottom: 2px; } .progress-dots .px { display: inline-block; } .sentence-main { font-family: var(--font-ja); font-size: calc(clamp(1.5rem, 3.2vw, 2.2rem) * var(--text-scale)); font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; word-break: keep-all; overflow-wrap: anywhere; } :root[data-lang="ko"] .sentence-main { font-family: var(--font-ko); } :root[data-lang="en"] .sentence-main { font-family: var(--font-en); letter-spacing: 0.01em; } .sentence-main ruby { ruby-position: over; ruby-align: center; } .sentence-main rt { font-size: 0.42em; color: var(--muted); letter-spacing: 0; font-weight: 400; line-height: 1; } .sentence-main.furi { line-height: 2.1; } .sentence-main.long { font-size: calc(clamp(1.1rem, 2.2vw, 1.5rem) * var(--text-scale)); text-align: left; line-height: 1.9; } .sentence-guide { font-family: var(--font-mono); font-size: clamp(0.85rem, 1.7vw, 1.05rem); letter-spacing: 0.08em; color: var(--muted); } .sentence-en { color: var(--muted); font-size: 0.88rem; margin-top: 2px; font-family: var(--font-ui); } .sentence-guide:empty, .sentence-en:empty { display: none; } .u { display: inline-block; } .u.done { color: var(--muted); } .u.cur { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); } .u.pend { color: var(--text); } .u.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, transparent); } .u.comp { color: var(--warn); text-decoration: underline dotted; } .u.ws { min-width: 0.4em; } .g { display: inline-block; } .g.done { color: var(--ok); } .g.cur { color: var(--text); font-weight: 700; } .g .typed { color: var(--ok); } .g .rest { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .g.pend { color: var(--muted); } .g.sp { width: 0.5em; } .direct-input { margin-top: 6px; width: 100%; max-width: 620px; padding: 12px 16px; background: var(--surface-2); color: var(--text); font-family: var(--font-ja), var(--font-ko); font-size: 1.2rem; outline: none; text-align: center; box-shadow: inset 3px 3px 0 var(--dot); } .direct-input:focus { border-color: var(--accent); } .direct-input.bad { border-color: var(--bad); } .float-layer { position: absolute; inset: 0; pointer-events: none; } .floater { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-family: var(--font-num); font-weight: 700; font-size: calc(0.85rem * var(--num-scale)); color: var(--accent); text-shadow: 2px 2px 0 var(--ink); animation: floatup 0.6s steps(5) forwards; white-space: nowrap; } .floater.big { font-size: calc(1.2rem * var(--num-scale)); } .floater.ok { color: var(--ok); } .floater.lost { color: var(--muted); } @keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 4px); } 15% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -40px); } } .keyboard { max-width: 720px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 6px; user-select: none; } .keyboard:empty { display: none; } .krow { display: flex; justify-content: center; gap: 6px; } .key { width: 50px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .key .jamo { font-family: var(--font-ko); font-size: 1rem; color: var(--text); line-height: 1; } .key .shifted { position: absolute; top: 3px; right: 5px; font-size: 0.62rem; font-family: var(--font-ko); color: var(--muted); } .key.wide { width: 86px; } .key.space { width: 280px; } .key.next { background: var(--accent); color: var(--on-accent); } .key.next .jamo, .key.next .shifted { color: var(--on-accent); } .key.pressed { background: var(--surface-2); transform: translate(2px, 2px); box-shadow: none; } .play-hint { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 18px; } /* ---------- result ---------- */ .result-wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .result-rank-wrap { display: flex; flex-direction: column; align-items: center; } .result-rank { font-size: calc(4.5rem * var(--num-scale)); font-weight: 700; line-height: 1; color: var(--accent); font-family: var(--font-num); text-shadow: 6px 6px 0 var(--ink); animation: rankin 0.4s steps(4) both; } @keyframes rankin { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } } .result-rank-label { color: var(--muted); font-size: 0.85rem; margin-top: 12px; } .result-score { display: flex; flex-direction: column; align-items: center; gap: 6px; } .result-score-label { font-size: 0.76rem; color: var(--muted); } .result-score-value { font-size: calc(2rem * var(--num-scale)); font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .new-record { color: var(--warn); font-weight: 700; font-size: 0.9rem; text-shadow: 2px 2px 0 var(--ink); } .result-stats { width: 100%; grid-template-columns: repeat(3, 1fr); } .result-ach { width: 100%; display: flex; flex-direction: column; gap: 10px; } .result-ach .unlock { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-left: 6px solid var(--warn); } .result-ach .unlock .ico { font-size: 1.3rem; } .result-ach .unlock b { display: block; font-size: 0.9rem; } .result-ach .unlock span { color: var(--muted); font-size: 0.8rem; } .result-board { width: 100%; } .result-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; } /* ---------- footer ---------- */ .footer { border-top: 2px solid var(--ink); background: var(--surface); padding: 10px 28px; text-align: center; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; } #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; } .toast-layer { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; } .toast { padding: 10px 14px; display: flex; gap: 10px; align-items: center; min-width: 220px; animation: toastin 0.25s steps(3) both; } .toast .ico { font-size: 1.2rem; } .toast b { display: block; font-size: 0.85rem; } .toast span { color: var(--muted); font-size: 0.76rem; } @keyframes toastin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sentence-card.shake, .floater, .countdown, .result-rank, .mascot, .sentence-main.swap { animation: none; } } @media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } main { padding: 16px 14px 40px; } .topbar { padding: 12px 14px; } .setup { padding: 20px; } .sentence-card { padding: 30px 16px 22px; } .card-mascot { top: -22px; right: 10px; } .keyboard { display: none !important; } .hud-item { min-width: 86px; padding: 6px 10px; } .hud-value { font-size: 0.85rem; } .result-stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- additions: packs, history, daily, ghost, weak spots, share, data ---------- */ .custom-editor { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .custom-editor textarea { width: 100%; font: inherit; font-size: 0.9rem; padding: 10px; border: 2px solid var(--ink); background: var(--surface-2); color: var(--text); resize: vertical; box-shadow: inset 3px 3px 0 var(--dot); outline: none; } .custom-editor textarea:focus { border-color: var(--accent); } .custom-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .custom-actions .hint { margin: 0; } .toggle.volume { gap: 10px; } .toggle.volume input[type="range"] { appearance: none; width: 110px; height: 8px; border: 2px solid var(--ink); background: var(--surface-2); margin: 0; cursor: pointer; } .toggle.volume input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 18px; background: var(--accent); border: 2px solid var(--ink); } .toggle.volume input[type="range"]::-moz-range-thumb { width: 10px; height: 14px; border-radius: 0; background: var(--accent); border: 2px solid var(--ink); } .history { margin-bottom: 10px; } .history svg { width: 100%; height: auto; display: block; } .history .bar { fill: var(--accent); } .history .bar:hover { fill: var(--ok); } .history .axis { stroke: var(--muted); stroke-width: 1; } .history .lbl { fill: var(--muted); font-size: 9px; font-family: var(--font-ui); } .history .empty { color: var(--muted); font-size: 0.82rem; border: 2px dashed var(--muted); padding: 8px; } .history-list li { grid-template-columns: 1fr auto; } .history-list li .meta { color: var(--muted); } .hud-item.ghost .hud-value.up { color: var(--ok); } .hud-item.ghost .hud-value.down { color: var(--bad); } .timebar { position: relative; } #ghost-marker { position: absolute; top: -2px; bottom: -2px; width: 4px; background: var(--ink); opacity: 0.6; } .sentence-reading { font-family: var(--font-ja); font-size: calc(clamp(0.9rem, 1.8vw, 1.1rem) * var(--text-scale)); color: var(--muted); letter-spacing: 0.06em; } .sentence-reading:empty { display: none; } .g .err { color: var(--bad); text-decoration: underline; } .direct-input.inline { position: absolute; opacity: 0.01; height: 2px; width: 2px; padding: 0; margin: 0; border: 0; box-shadow: none; bottom: 8px; left: 50%; } .result-weak { width: 100%; } .weak-chips { display: flex; gap: 8px; flex-wrap: wrap; } .weak-chip { padding: 4px 10px; border: 2px solid var(--ink); background: var(--surface-2); font-family: var(--font-ja), var(--font-ko); font-size: 1.05rem; } .weak-chip small { font-family: var(--font-num); font-size: calc(0.55rem * var(--num-scale)); color: var(--muted); margin-left: 6px; } .result-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .mascot-growth { display: flex; align-items: center; gap: 14px; } .mascot-growth .hint { margin: 0; } .data-actions { display: flex; flex-wrap: wrap; gap: 8px; } .chip.danger:hover { background: var(--bad); color: #fff; border-color: var(--ink); } /* ---------- side tabs ---------- */ .side-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .side-tabs .chip { padding: 6px 10px; font-size: 0.82rem; } .side-panel { max-height: calc(100vh - 240px); overflow-y: auto; } h2.mt { margin-top: 18px; } /* ---------- settings dialog ---------- */ .settings { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--surface); color: var(--text); padding: 0; width: min(560px, 92vw); max-height: 90vh; } .settings::backdrop { background: rgba(20, 12, 30, 0.55); } .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 2px solid var(--ink); } .settings-head h2 { margin: 0; } .settings-body { padding: 18px; overflow-y: auto; max-height: calc(90vh - 70px); } .settings-body .field:last-child { margin-bottom: 0; } .settings-body .toggles { flex-direction: column; gap: 10px; } .toggle.volume input[type="range"] { width: 200px; } :is(.chip, .lang-card, .btn-primary, .icon-btn, .btn-text, .mascot, .toggle input):focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; } .font-preview { display: flex; gap: 8px; flex-wrap: wrap; } .font-preview .chip { font-family: var(--preview-font); } /* ---------- cheer balloon from ムラト ---------- */ .cheer { display: flex; align-items: center; gap: 12px; margin: 10px auto 0; max-width: 1160px; } .cheer-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--accent); color: var(--on-accent); font-weight: 700; font-family: var(--font-ja); } .balloon { position: relative; padding: 8px 14px; border: 2px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); font-size: 0.95rem; color: var(--text); animation: balloonin 0.2s steps(2) both; } .balloon::before { content: ''; position: absolute; left: -8px; top: 12px; width: 6px; height: 6px; background: var(--surface); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); } @keyframes balloonin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .result-wrap .cheer { justify-content: center; margin-top: 6px; } .pet-chips .chip { display: inline-flex; align-items: center; gap: 8px; } .pet-chips .chip .px { display: inline-block; } @media (max-width: 900px) { .cheer { margin: 14px 0 0; } } /* ---------- sleepy pet ---------- */ .mascot.sleep { animation: breathe 3s steps(2) infinite; } @keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } .mascot .zzz { position: absolute; right: -16px; top: -18px; pointer-events: none; animation: zz 2.4s steps(6) infinite; } @keyframes zz { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } } .mascot.wake { animation: stretch 0.6s steps(4) 1; } @keyframes stretch { 0% { transform: scale(1, 1); } 30% { transform: scale(0.92, 1.18) translateY(-4px); } 60% { transform: scale(1.1, 0.9); } 100% { transform: scale(1, 1); } }