/* ── CSS 變數定義（統一色彩管理，避免硬寫色碼）── */
:root {
    --ime-bg:           #f8f9fa;
    --ime-surface:      #ffffff;
    --ime-border:       #dee2e6;
    --ime-border-muted: #e9ecef;
    --ime-text:         #212529;
    --ime-text-muted:   #6c757d;
    --ime-primary:      #0d6efd;
    --ime-primary-dark: #0a58ca;
    --ime-primary-glow: rgba(13, 110, 253, 0.28);
    --ime-accent:       #ffc107;
    --ime-accent-glow:  rgba(255, 193, 7, 0.5);
    --ime-danger:       #dc3545;
    --ime-dark-surface: #212529;
    --ime-dark-text:    #f8f9fa;
    --ime-hit-bg:       #0d6efd;
    --ime-highlight:    6px solid #ffc107;
    --splash-bg-start:  #1a3a6b;
    --splash-bg-end:    #0d2044;
    --splash-accent:    #f5c518;
    /* 說明頁 / 提示列 */
    --help-scrim:       #0b1220;   /* 不透明：低視力者需要高對比，不可讓底層畫面透出 */
    --help-text:        #f8f9fa;
    --help-heading:     #7dd3fc;
    --help-subheading:  #bae6fd;
    --help-rule:        #334155;
    --help-th-bg:       #1e3a5f;
    --help-warn:        #ffc107;
    --hint-bg:          #1e293b;
    --hint-text:        #e2e8f0;
    --hint-what-bg:     #0d6efd;
    --hint-what-text:   #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Symbol Grid ── */
.symbol-cell {
    width: calc(14.28% - 0.5rem);
    min-width: 80px;
    height: 100px;
    background-color: var(--ime-bg);
    border: 2px solid var(--ime-border);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

.symbol-cell .symbol-text {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--ime-text);
}

.symbol-cell .symbol-code {
    font-size: 1rem;
    color: var(--ime-text-muted);
    letter-spacing: 2px;
}

.symbol-cell.active-focus {
    border-color: var(--ime-primary);
    box-shadow: 0 0 0 0.25rem var(--ime-primary-glow);
}

.symbol-cell.hit-highlight {
    background-color: var(--ime-hit-bg);
    border-color: var(--ime-primary-dark);
}
.symbol-cell.hit-highlight .symbol-text,
.symbol-cell.hit-highlight .symbol-code {
    color: var(--ime-surface);
}

/* ── Preedit Cells ── */
.zhuyin-cell {
    min-height: 80px;
    background-color: var(--ime-surface);
    transition: background-color 0.2s;
}

/* ── Candidates ── */
#candidate-list {
    margin: 0;
    padding: 0;
}

#candidate-list li {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1.5rem;
    background-color: var(--ime-bg);
    border: 1px solid var(--ime-border);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

#candidate-list li:hover {
    background-color: var(--ime-border-muted);
}

#candidate-list li.active {
    background-color: var(--ime-primary);
    color: var(--ime-surface);
    border-color: var(--ime-primary-dark);
    font-weight: bold;
}

/* ── Sentence View ── */
#sentence-view {
    min-height: 40px;
    position: relative;
}

.cursor {
    display: inline-block;
    width: 4px;
    height: 1.5em;
    background-color: var(--ime-accent);
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { background-color: transparent; }
    50%       { background-color: var(--ime-accent); }
}

/* ── Overlay ── */
#overlay-container {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

#overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

#overlay-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ime-surface);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    min-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

#overlay-title {
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 2px solid var(--ime-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: var(--ime-text);
}

#overlay-list li {
    padding: 0.75rem 1rem;
    font-size: 1.3rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--ime-text);
}

#overlay-list li.overlay-active {
    background-color: var(--ime-primary);
    color: var(--ime-surface);
    font-weight: bold;
    outline: var(--ime-highlight);
    outline-offset: 2px;
}

#overlay-list li.confirm-msg {
    font-size: 1.2rem;
    color: var(--ime-text-muted);
}

#overlay-list li.confirm-hint {
    font-size: 1.1rem;
}

#overlay-hint {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ime-border);
    font-size: 1rem;
    color: var(--ime-text-muted);
    text-align: center;
}

/* ── 常駐提示列 ── */
#hint-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--hint-bg);
    color: var(--hint-text);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 1.15rem;
    line-height: 1.4;
    flex-wrap: wrap;
}

.hint-what {
    background-color: var(--hint-what-bg);
    color: var(--hint-what-text);
    font-weight: bold;
    border-radius: 0.35rem;
    padding: 0.15rem 0.7rem;
    white-space: nowrap;
}

.hint-keys {
    flex: 1 1 auto;
}

/* ── 說明頁（全螢幕）── */
#help-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background-color: var(--help-scrim);
    color: var(--help-text);
    overflow-y: auto;
    padding: 2rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

#help-overlay h3 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--help-heading);
}

#help-overlay h4 {
    font-size: 1.15rem;
    margin: 1.1rem 0 0.4rem;
    color: var(--help-subheading);
    border-bottom: 1px solid var(--help-rule);
    padding-bottom: 0.2rem;
}

#help-overlay table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

#help-overlay th,
#help-overlay td {
    border: 1px solid var(--help-rule);
    padding: 0.4rem 0.7rem;
    font-size: 1rem;
}

#help-overlay th {
    background-color: var(--help-th-bg);
}

#help-overlay ul { padding-left: 1.2rem; }
#help-overlay p  { margin: 0.3rem 0 0.6rem; }

#help-overlay .help-warn { color: var(--help-warn); font-weight: bold; }

#help-overlay .help-note {
    border-left: 3px solid var(--help-subheading);
    padding-left: .75rem;
    color: var(--help-subheading);
}

#help-overlay .help-close {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--help-rule);
    text-align: center;
    color: var(--help-subheading);
}

/* 空白鍵：字元本身不可見，用虛線框與淡字和「未使用格子」區隔 */
.symbol-cell-space {
    border-style: dashed;
}

.symbol-cell-space .symbol-text {
    color: var(--ime-text-muted);
    font-size: 1.1rem;
}

/* 功能列：使用說明徽章 */
.fn-badge-help {
    background-color: var(--ime-accent);
    color: var(--ime-text);
}

/* ── Focus area highlight (區塊亮燈) ── */
.focus-area {
    transition: outline 0.15s ease, box-shadow 0.15s ease;
}

.focus-area.focus-active {
    outline: var(--ime-highlight);
    outline-offset: 3px;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 4px var(--ime-accent-glow);
}

/* ── Splash Screens (開機 / 關機畫面) ── */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

.startup-screen {
    background: linear-gradient(160deg, var(--splash-bg-start), var(--splash-bg-end));
}

.shutdown-screen {
    background: linear-gradient(160deg, var(--splash-bg-end), #000);
}

.splash-content {
    text-align: center;
    user-select: none;
}

.splash-car {
    font-size: 5rem;
    animation: splash-bounce 1.2s ease-in-out infinite alternate;
}

.shutdown-car {
    animation: splash-drive 1.5s linear forwards;
}

@keyframes splash-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

@keyframes splash-drive {
    from { transform: translateX(-60px); opacity: 1; }
    to   { transform: translateX(120px); opacity: 0; }
}

.splash-brand {
    font-size: 3rem;
    font-weight: bold;
    color: var(--splash-accent);
    margin-top: 1rem;
    letter-spacing: 0.1em;
}

.splash-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.5rem;
}

.splash-matane {
    color: var(--ime-surface);
}

.startup-fade-out {
    opacity: 0;
    pointer-events: none;
}