/* Kana chrome. Shared reader supplies the layout. */

:root {
    --accent: #f0a8c0;
    --text-kanji: #f0a8c0;
}

.side-panel {
    background-color: #121820;
    background-image:
        linear-gradient(180deg, rgba(18, 24, 32, 0.72) 0%, rgba(13, 17, 23, 0.88) 100%),
        url("art/kana-sidebar-washi.png");
    background-size: cover;
    background-position: center;
    border-right: 1px solid rgba(240, 168, 192, 0.22);
}

.kana-text,
.kanji-text {
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

.kana-text {
    font-size: 5rem;
    color: var(--text-primary);
}

.kanji-text {
    color: var(--text-kanji);
}

.top-chrome {
    display: block;
    position: relative;
    height: 72px;
    margin: -20px -20px 16px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    background-color: #10151c;
    background-image:
        linear-gradient(180deg, rgba(13, 17, 23, 0.15) 0%, rgba(13, 17, 23, 0.55) 100%),
        url("art/kana-top-sakura.png");
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(240, 168, 192, 0.2);
}

.display-area,
.card-display,
.kana-text,
.kanji-text {
    background-image: none !important;
}

@media (max-width: 900px) {
    .top-chrome {
        margin: -12px -12px 12px;
        height: 56px;
    }

    .kana-text {
        font-size: 3rem;
    }
}