@font-face {
    font-family: "KotechCangjie";
    src: url("/assets/fonts/Kotech-Cangjie-Font.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.cangjie_radical .word {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0 8px 8px 0;
    letter-spacing: 0;
}

.cangjie_radical .word .display,
.cangjie_radical .word .display-container {
    display: none;
}

.cangjie_radical .char {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, #eaecef);
    border-radius: 8px;
    overflow: hidden;
    font-size: 36px;
    line-height: 1;
    background: transparent;
    vertical-align: top;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    /* content-box so width: 1.08em is the glyph column; 1px border sits outside (same as auto-sized tiles). */
    box-sizing: content-box;
    width: 1.08em;
}

.cangjie_radical .char .text,
.cangjie_radical .char .code {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1;
}

.cangjie_radical .char .text {
    order: 1;
    background: var(--theme-accent);
    color: #fff;
    font-family: "KotechCangjie", sans-serif;
}

.cangjie_radical .char .code {
    order: 2;
    background: #f6f8fa;
    color: #000;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.cangjie_radical .word .display.current,
.cangjie_radical .char.current,
.cangjie_radical .char.cursor-target {
    outline: 2px solid var(--theme-accent);
    outline-offset: 0;
    box-shadow: 0 0 2px rgba(125, 125, 125, .7);
    z-index: 1000;
}

.cangjie_radical-container {
    overflow-y: hidden !important;
}

/* Current 2px ring + shadow paint outside the tile. Clip overflow would crop the
   first row/column; inset the clip (same trick as replay's 2px padding). */
.cangjie_radical-container .article-scroll-clip {
    padding: 4px;
    box-sizing: border-box;
}

#article-container-wrapper.replaying .cangjie_radical-container .article-scroll-clip {
    padding: 4px;
    box-sizing: border-box;
}

.cangjie_radical .char.space {
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

.cangjie_radical .char.space .code {
    display: none;
}

.cangjie_radical .char.space .text::after {
    content: "\00A0";
}

/* Beat base.css `.font-size-* .char .text/.code { font-size: 10/12/16px !important }`
   so stacked glyphs match `.word .display` (custom / 倉頡 字 size).
   `.code` ~61% of `.char`: YaHei ink overshoots the em, so the glyph needs a smaller size for inset. */
.font-size-small .cangjie_radical .char,
.font-size-small .cangjie_radical .char .text {
    font-size: 24px !important;
}

.font-size-small .cangjie_radical .char .code {
    font-size: 15px !important;
}

.font-size-normal .cangjie_radical .char,
.font-size-normal .cangjie_radical .char .text {
    font-size: 36px !important;
}

.font-size-normal .cangjie_radical .char .code {
    font-size: 22px !important;
}

.font-size-large .cangjie_radical .char,
.font-size-large .cangjie_radical .char .text {
    font-size: 48px !important;
}

.font-size-large .cangjie_radical .char .code {
    font-size: 29px !important;
}

.cangjie_radical .char.wrong {
    box-shadow: 0 0 4px rgba(244, 67, 54, 0.35);
    animation: wrong-shake 120ms ease-out forwards;
}

.cangjie_radical .char.correct {
    animation: correct-flash 120ms ease-out forwards;
}

.cangjie_radical .char.correct .code {
    background: #c7ffb8 !important;
    color: #000 !important;
}

.cangjie_radical .char.wrong .code {
    background: #ff9eaf !important;
    color: #000 !important;
}

.cangjie_radical .char.once-wronged.typed.correct .code {
    background: #fff4d4 !important;
    color: #000 !important;
}

@media (prefers-reduced-motion: reduce) {
    .cangjie_radical .char.wrong,
    .cangjie_radical .char.correct {
        animation: none;
    }
}