* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 8px;
    overflow: hidden;
}

.game-container {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: min(96vw, 620px);
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
}

.page-note {
    margin-top: 4px;
    text-align: center;
    color: rgba(200, 240, 168, 0.55);
    font-size: 0.62rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .game-container {
        padding: 0;
        border-radius: 0;
    }
    
    .controls p {
        font-size: 0.5em; /* 約50% */
        margin-bottom: 0;
    }

    .controls button {
        padding: 8px 14px;
        font-size: 0.55em; /* 約50% */
    }

    .keyword-row {
        gap: 8px;
    }

    /* 狭い画面では入力ボックスが列幅を超えて隣にはみ出すのを防ぐ */
    .controls .keyword-input {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: 140px;
    }

    .collection-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    button {
        padding: 8px 16px;
        font-size: 0.7em;
    }

    /* タイトル画面（startOverlay） */
    .start-message {
        font-size: 0.5rem;
        padding: 8px 10px;
    }
    .start-play-btn {
        font-size: 0.5rem;
        padding: 8px 18px;
    }

    /* モーダル文言 */
    .item-modal-card h2 {
        font-size: 0.6em;
    }
    .item-modal-card p {
        font-size: 0.48em;
        line-height: 1.4;
    }
    .item-modal-card button {
        font-size: 0.5em;
        padding: 8px 10px;
    }

    /* 「次へ」ボタン */
    .next-stage-btn {
        font-size: 0.5rem;
        padding: 10px 22px;
    }
}

@media (max-width: 520px) {
    .controls p {
        font-size: 0.5em; /* 約50% */
    }

    .controls button {
        padding: 7px 12px;
        font-size: 0.55em; /* 約50% */
    }

    .next-stage-btn {
        font-size: 0.5rem; /* 約50% */
        padding: 8px 18px;
    }

    /* 開始画面（プレイする）ボタン */
    .start-play-btn {
        font-size: 0.5rem; /* 約50% */
        padding: 8px 18px;
    }

    /* アイテム説明モーダルのボタン（閉じる/クリア報告） */
    .item-modal-card button {
        font-size: 0.5em; /* base:0.95emの約50% */
        padding: 8px 10px;
    }

    /* アイテム説明モーダルの見出し/本文 */
    .item-modal-card h2 {
        font-size: 0.6em;
    }

    .item-modal-card p {
        font-size: 0.48em;
        line-height: 1.4;
    }

    /* タイトル画面（start-overlay）の文章 */
    .start-message {
        font-size: 0.5rem; /* 約50% */
        padding: 8px 10px;
    }
}

#gameCanvas {
    display: block;
    border: none;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    cursor: none;
    touch-action: none; /* タッチ操作のスクロールを防ぐ */
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.play-area {
    position: relative;
    min-height: 0;
}

/* 開始画面オーバーレイ（start.png の上に重ねて表示） */
.start-overlay {
    position: absolute;
    inset: 0;
    z-index: 18;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 26px;
    gap: 12px;
    pointer-events: none; /* ボタンだけクリック可能にする */
}

.start-message {
    pointer-events: none;
    text-align: center;
    font-weight: bold;
    color: #c8f0a8;
    background: rgba(10, 12, 18, 0.78);
    border: 3px solid #2d5a28;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    padding: 10px 12px;
    border-radius: 0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.start-play-btn {
    pointer-events: auto;
    padding: 10px 28px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #c8f0a8;
    background: #1a3318;
    border: 3px solid #2d5a28;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    cursor: pointer;
    image-rendering: pixelated;
}

.start-play-btn:hover {
    background: #234420;
    color: #e0ffc8;
}

.start-play-btn:active {
    background: #142814;
}

/* ステージ全アイテム取得後の「次へ」（プレイエリア内・モーダルより下） */
.next-stage-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    padding: 10px 28px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #c8f0a8;
    background: #1a3318;
    border: 3px solid #2d5a28;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    cursor: pointer;
    image-rendering: pixelated;
}

.next-stage-btn:hover {
    background: #234420;
    color: #e0ffc8;
}

.next-stage-btn:active {
    background: #142814;
}

.next-stage-btn.hidden {
    display: none !important;
}

.controls {
    height: 100px;
    margin-top: 0;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 50% 25% 25%;
    align-items: center;
    justify-items: center;
    background: #162b14;
    border-top: 3px solid #2d5a28;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    position: relative;
    z-index: 6; /* game-area::after は z-index:5 */
}

.controls #instructions {
    justify-self: start;
    text-align: left;
    padding-left: 2px;
    width: 100%;
}

.controls .keyword-input {
    width: auto;
    flex: 0 0 180px;
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 0;
    border: 3px solid #2d5a28;
    background: #0d1a0c;
    color: #c8f0a8;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    box-shadow: inset 0 0 0 2px #0d1a0c;
}

.controls .keyword-send-btn {
    flex: 0 0 auto;
}

.keyword-row {
    width: 100%;
    max-width: 340px; /* 広い画面でも送信ボタンが右端へ押し出されないよう上限 */
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

/* 広い画面では「送信」を左列の右端へ寄せて、隣（最初から）との間隔を揃える */
@media (min-width: 601px) {
    .keyword-row {
        max-width: none;
        justify-content: flex-end;
    }
}

.controls button:disabled,
button.glitch-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.game-area {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 4.2fr 0.8fr 100px;
    border: 4px solid #2a2a2a;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 255, 200, 0.08);
}

/* gameAreaの幅が狭いときのUIコンパクト（約50%縮小） */
.game-area.ui-compact .controls p {
    font-size: 0.5em;
}

body.ui-compact .controls p {
    font-size: 0.5em;
}

.game-area.ui-compact .controls button {
    padding: 8px 14px;
    font-size: 0.55em;
}

body.ui-compact .controls button {
    padding: 8px 14px;
    font-size: 0.55em;
}

.game-area.ui-compact .next-stage-btn {
    font-size: 0.5rem;
    padding: 10px 22px;
}

body.ui-compact .next-stage-btn {
    font-size: 0.5rem;
    padding: 10px 22px;
}

.game-area.ui-compact .start-message {
    font-size: 0.5rem;
    padding: 8px 10px;
}

body.ui-compact .start-message {
    font-size: 0.5rem;
    padding: 8px 10px;
}

.game-area.ui-compact .start-play-btn {
    font-size: 0.5rem;
    padding: 8px 18px;
}

body.ui-compact .start-play-btn {
    font-size: 0.5rem;
    padding: 8px 18px;
}

.game-area.ui-compact .item-modal-card h2 {
    font-size: 0.6em;
}

body.ui-compact .item-modal-card h2 {
    font-size: 0.6em;
}

.game-area.ui-compact .item-modal-card p {
    font-size: 0.48em;
    line-height: 1.4;
}

body.ui-compact .item-modal-card p {
    font-size: 0.48em;
    line-height: 1.4;
}

.game-area.ui-compact .item-modal-card button {
    font-size: 0.5em;
    padding: 8px 10px;
}

body.ui-compact .item-modal-card button {
    font-size: 0.5em;
    padding: 8px 10px;
}

.game-area::after {
    content: '';
    position: absolute;
    inset: 0;
    display: none; /* 走査線は canvas 側で描画するため */
}

.collection-panel {
    padding: 6px 8px;
    background: #162b14;
    border-top: 3px solid #2d5a28;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    position: relative;
    z-index: 6;
}

.collection-slots {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    height: 100%;
    align-content: center;
}

.collection-slot {
    aspect-ratio: 1 / 1;
    border: 2px dashed #3f6b3a;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a3318;
    color: #93be84;
    font-size: 0.72em;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #0d1a0c;
}

.collection-slot.filled {
    cursor: pointer;
    border-style: solid;
    border-color: #6ea25f;
    background: #234420;
    color: #d6ffba;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    position: relative;
}

/* アイテム取得の視覚フィードバック（枠の明滅） */
@keyframes collectionSlotBlink {
    0%, 100% {
        border-color: #6ea25f;
        box-shadow: inset 0 0 0 2px #0d1a0c;
    }
    50% {
        border-color: #e0ffc8;
        box-shadow: inset 0 0 0 2px #0d1a0c, 0 0 0 2px rgba(224, 255, 200, 0.25);
    }
}

.collection-slot.blink-pickup {
    animation: collectionSlotBlink 0.6s steps(2) 1;
}

@keyframes collectionSlotGlitch {
    0%, 100% {
        transform: translate(0, 0);
        filter: none;
        border-color: #6ea25f;
    }
    50% {
        transform: translate(0.5px, -0.5px);
        filter: contrast(1.35) saturate(1.35);
        border-color: #e0ffc8;
        background-position: 6px 0, -4px 0;
        box-shadow: inset 0 0 0 2px #0d1a0c, 0 0 0 2px rgba(255, 239, 122, 0.12);
    }
    60% {
        filter: contrast(1.15) saturate(1.25);
        border-color: #e0ffc8;
    }
}

@keyframes collectionSlotGlitchA4 {
    0%, 100% {
        transform: translate(0, 0);
        filter: none;
        border-color: #6ea25f;
    }
    50% {
        transform: translate(0.5px, -0.5px);
        filter: contrast(1.3) saturate(1.3);
        border-color: #e8f79a;
        background-position: 0 6px, 0 -5px;
        box-shadow: inset 0 0 0 2px #0d1a0c, 0 0 0 2px rgba(255, 239, 122, 0.10);
    }
    65% {
        filter: contrast(1.12) saturate(1.18);
        border-color: #d6ffba;
    }
}

.collection-slot.glitch-continuous {
    position: relative;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
    background-size: 12px 14px;
    animation: iconDataCorruption 0.16s steps(2) infinite;
}

.collection-slot.glitch-a4 {
    position: relative;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 239, 122, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        repeating-linear-gradient(0deg, rgba(90, 200, 255, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 6px);
    background-size: 16px 16px, 12px 14px;
    animation: collectionSlotGlitchA4 var(--a4-glitch-duration, 0.16s) steps(2) infinite;
    transform: rotate(-2deg) !important;
    transform-origin: 50% 50%;
}

.collection-slot.glitch-a4 .collection-icon {
    transform: none;
    transform-origin: 50% 50%;
}

.collection-slot.glitch-a4.glitch-a4-pulse .collection-icon {
    opacity: 0.96;
}

/* すべてのアイコンに、画像の一部がズレたような擬似オーバーレイ（グリッチモード時のみ） */
.collection-slot.filled.has-icon.glitch-continuous::before,
.collection-slot.filled.has-icon.glitch-continuous::after,
.collection-slot.filled.has-icon.glitch-a4::before,
.collection-slot.filled.has-icon.glitch-a4::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--icon-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78% 78%;
    opacity: 0.18;
}

.collection-slot.filled.has-icon.glitch-continuous::before,
.collection-slot.filled.has-icon.glitch-a4::before {
    transform: translate(1px, -1px);
    mix-blend-mode: screen;
    animation: iconSliceShiftA 0.22s steps(2) infinite;
}

.collection-slot.filled.has-icon.glitch-continuous::after,
.collection-slot.filled.has-icon.glitch-a4::after {
    transform: translate(-1px, 1px);
    mix-blend-mode: multiply;
    animation: iconSliceShiftB 0.27s steps(2) infinite;
}

@keyframes iconSliceShiftA {
    0%, 100% {
        transform: translate(0px, 0px);
        opacity: 0.12;
    }
    50% {
        transform: translate(1.5px, -1.5px);
        opacity: 0.22;
    }
}

@keyframes iconSliceShiftB {
    0%, 100% {
        transform: translate(0px, 0px);
        opacity: 0.12;
    }
    50% {
        transform: translate(-1.5px, 1.5px);
        opacity: 0.20;
    }
}

.collection-slot.glitch-continuous::after,
.collection-slot.glitch-a4::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.24;
    mix-blend-mode: screen;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
    animation: glitchStripeMove 0.11s steps(2) infinite;
}

.collection-slot.glitch-a4::after {
    opacity: 0.38;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 239, 122, 0.18) 0 1px, rgba(0, 0, 0, 0) 1px 2px);
}

@keyframes glitchStripeMove {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes iconDataCorruption {
    0%, 100% {
        transform: none;
        filter: contrast(1.08) saturate(1.05);
        background-position: 0 0;
    }
    50% {
        transform: none;
        filter: contrast(1.25) saturate(1.2);
        background-position: 0 -3px;
    }
}

.item-modal.glitch-data .item-modal-card {
    position: relative;
    overflow: hidden;
    transform: none;
}

.item-modal.glitch-data .item-modal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.16;
    background-image:
        /* canvas側の「水平ティア」相当 */
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0 2px, rgba(0, 0, 0, 0) 2px 8px),
        /* canvas側の「小ブロック置換」相当（微細グリッド） */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        /* チラつく水平ノイズ帯 */
        repeating-linear-gradient(0deg, rgba(220, 230, 220, 0.10) 0 1px, rgba(0, 0, 0, 0) 1px 16px);
    background-size: 100% 10px, 12px 100%, 100% 16px;
    background-position: var(--mmosaic-x, 0px) var(--mmosaic-y, 0px), var(--mmosaic-x, 0px) 0, 0 0;
    animation: modalHorizontalNoiseFlicker 0.10s steps(2) infinite;
}

.item-modal.glitch-data .item-modal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: var(--mband-opacity, 0.16);
    background-image:
        /* canvas側の「色ズレ帯」相当 */
        repeating-linear-gradient(
            0deg,
            rgba(255, 60, 140, 0.18) 0 2px,
            rgba(0, 0, 0, 0) 2px 18px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(90, 200, 255, 0.14) 0 2px,
            rgba(0, 0, 0, 0) 2px 22px
        );
    background-size: 100% 18px, 100% 22px;
    background-position: 0 var(--mband-y1, 0px), 0 var(--mband-y2, 0px);
    mix-blend-mode: normal;
    animation: none;
}

.item-modal.glitch-data .item-modal-card h2,
.item-modal.glitch-data .item-modal-card p,
.item-modal.glitch-data .item-modal-card button {
    position: relative;
    z-index: 2;
}

@keyframes modalHorizontalNoiseFlicker {
    0%, 100% {
        opacity: 0.12;
        background-position: var(--mmosaic-x, 0px) var(--mmosaic-y, 0px), var(--mmosaic-x, 0px) 0, 0 0;
    }
    50% {
        opacity: 0.20;
        background-position: var(--mmosaic-x, 0px) calc(var(--mmosaic-y, 0px) - 1px), var(--mmosaic-x, 0px) 0, 0 -3px;
    }
}

.glitch-word {
    display: inline-block;
    color: #ffef7a;
    animation: glitchWord 0.08s steps(2) infinite;
    text-shadow: 1px 0 rgba(255, 0, 0, 0.6), -1px 0 rgba(0, 255, 255, 0.35);
}

.glitch-anchor {
    color: #d6ffba;
    text-decoration: underline;
    cursor: pointer;
}

@keyframes glitchWord {
    0%, 100% {
        transform: translate(0, 0);
        filter: none;
    }
    50% {
        transform: translate(1px, -1px);
        filter: contrast(1.8) saturate(2);
    }
}

.collection-icon {
    width: 78%;
    height: 78%;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
    pointer-events: none; /* スロット自体のクリックを邪魔しない */
}

.item-modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(7, 12, 7, 0.78);
    z-index: 20;
}

.item-modal.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

.item-modal-card {
    width: min(92%, 360px);
    border-radius: 0;
    padding: 16px 14px;
    background: #1a3318;
    border: 3px solid #2d5a28;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    text-align: left;
    position: relative;
    z-index: 10;
}

.item-modal-card h2 {
    color: #c8f0a8;
    font-size: 1.15em;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.item-modal-card p {
    color: #b4d8a4;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 14px;
}

.item-modal-card button {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95em;
    border-radius: 0;
    color: #c8f0a8;
    background: #1a3318;
    border: 3px solid #2d5a28;
    box-shadow: inset 0 0 0 2px #0d1a0c;
}

.item-modal-card button:hover {
    background: #234420;
    color: #e0ffc8;
}

.item-modal-card button:active {
    background: #142814;
}

.item-modal-card #itemModalCloseBtn {
    margin-bottom: 8px;
}

@keyframes ritualButtonGlitch {
    0% { transform: translate(0, 0); text-shadow: 0 0 0 transparent; filter: none; }
    12% { transform: translate(-2px, 1px); text-shadow: 2px 0 0 rgba(255, 40, 150, 0.9), -2px 0 0 rgba(80, 220, 255, 0.9); }
    18% { transform: translate(3px, -2px); text-shadow: -3px 0 0 rgba(255, 40, 150, 0.95), 3px 0 0 rgba(80, 220, 255, 0.95); }
    24% { transform: translate(-1px, 2px); text-shadow: 2px 0 0 rgba(255, 40, 150, 0.75), -2px 0 0 rgba(80, 220, 255, 0.75); filter: brightness(1.15); }
    35% { transform: translate(0, 0); text-shadow: 0 0 0 transparent; filter: none; }
    44% { transform: translate(2px, 0); text-shadow: -2px 0 0 rgba(255, 40, 150, 0.85), 2px 0 0 rgba(80, 220, 255, 0.85); }
    50% { transform: translate(-3px, 1px); text-shadow: 3px 0 0 rgba(255, 40, 150, 0.95), -3px 0 0 rgba(80, 220, 255, 0.95); }
    58% { transform: translate(0, -2px); text-shadow: -1px 0 0 rgba(255, 40, 150, 0.8), 1px 0 0 rgba(80, 220, 255, 0.8); }
    66% { transform: translate(0, 0); text-shadow: 0 0 0 transparent; filter: none; }
    78% { transform: translate(1px, 0); text-shadow: -2px 0 0 rgba(255, 40, 150, 0.7), 2px 0 0 rgba(80, 220, 255, 0.7); }
    86% { transform: translate(-2px, -1px); text-shadow: 2px 0 0 rgba(255, 40, 150, 0.9), -2px 0 0 rgba(80, 220, 255, 0.9); filter: brightness(1.2); }
    100% { transform: translate(0, 0); text-shadow: 0 0 0 transparent; filter: none; }
}

.item-modal-card #itemModalCloseBtn.ritual-action-glitch {
    animation: ritualButtonGlitch 0.28s steps(2, end) infinite;
    border-color: #4e8a46;
    box-shadow: inset 0 0 0 2px #0d1a0c, 0 0 10px rgba(255, 70, 170, 0.24);
}

.item-modal-card #itemModalClearBtn {
    margin-top: 0;
}

.controls p {
    color: #93be84;
    margin-bottom: 0;
    font-size: 0.95em;
    text-align: center;
}

button {
    background: #111111;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1em;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-shadow: none;
}

button:hover {
    background: #1f1f1f;
}

button:active {
    background: #000000;
}

.controls button {
    background: #1a3318;
    color: #c8f0a8;
    border: 3px solid #2d5a28;
    border-radius: 0;
    /* 広い画面幅で「送信/最初から/BGM」の見た目間隔が広がりやすいため、横幅方向を50%に寄せる */
    padding: 10px 22px;
    box-shadow: inset 0 0 0 2px #0d1a0c;
    transition: background-color 0.15s ease;
}

.controls button:hover {
    background: #234420;
    color: #e0ffc8;
}

.controls button:active {
    background: #142814;
    color: #e0ffc8;
}

/* BGM ON/OFF の直感的表示 */
.controls button.bgm-on {
    background: #234420;
    color: #e0ffc8;
    border-color: #6ea25f;
}

.controls button.bgm-off {
    background: #141414;
    color: #bdbdbd;
    border-color: #2a2a2a;
}

/* 「最初から」と「BGM」の縦寸を常に一致させる */
.controls #resetBtn,
.controls #bgmToggleBtn {
    min-height: 44px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}