/* くじ引き 抽選ツール */

#app-kuji .kj-remain {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    font-variant-numeric: tabular-nums;
}
#app-kuji .kj-remain-num { font-size: 2.25rem; font-weight: 800; line-height: 1; }
#app-kuji .kj-remain-unit { font-weight: 700; }
#app-kuji .kj-remain-of { color: var(--bs-secondary-color); font-size: .9rem; }

/* ---- 箱と券 ---- */
#app-kuji .kj-box-wrap {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#app-kuji .kj-box {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border: 3px solid var(--bs-warning-border-subtle);
}
#app-kuji .kj-box .mach-mi { font-size: 96px; }
#app-kuji .kj-box.kj-shake { animation: kj-shake 1s ease-in-out; }
@keyframes kj-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-10px) rotate(-6deg); }
    30% { transform: translateX(10px) rotate(6deg); }
    45% { transform: translateX(-8px) rotate(-4deg); }
    60% { transform: translateX(8px) rotate(4deg); }
    75% { transform: translateX(-4px) rotate(-2deg); }
}

#app-kuji .kj-ticket {
    width: min(100%, 360px);
    padding: 1.25rem 1rem;
    background: var(--bs-body-bg);
    border: 3px dashed var(--bs-secondary-border-subtle);
}
#app-kuji .kj-ticket.kj-open { animation: kj-open .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes kj-open {
    from { transform: scale(.3) rotate(-8deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}
#app-kuji .kj-ticket-no { color: var(--bs-secondary-color); font-size: .85rem; font-weight: 700; }
#app-kuji .kj-ticket-label {
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    margin: .25rem 0;
}
#app-kuji .kj-ticket-who { font-weight: 700; min-height: 1.5em; }
/* あたり: 面の色で示す（文字色だけの強調はしない） */
#app-kuji .kj-ticket.kj-hit {
    background: var(--bs-warning-bg-subtle);
    border: 3px solid var(--bs-warning);
}
#app-kuji .kj-ticket.kj-hit .kj-ticket-label::before {
    content: "★ ";
    color: var(--bs-warning);
}

#app-kuji .kj-who-row, #app-kuji .kj-draw-row { max-width: 360px; }
#app-kuji #kj-draw { white-space: nowrap; }

/* ---- 中身の行 ---- */
#app-kuji .kj-item {
    display: grid;
    grid-template-columns: auto 1fr 7.5rem auto;
    gap: .375rem;
    align-items: center;
}
#app-kuji .kj-count input { padding-inline: .25rem; min-width: 0; }
#app-kuji .kj-count .btn, #app-kuji .kj-del, #app-kuji .kj-star { padding: .25rem .375rem; line-height: 1; }
#app-kuji .kj-star { color: var(--bs-secondary-color); border: 0; }
#app-kuji .kj-star[aria-pressed="true"], #app-kuji .kj-star-on { color: var(--bs-warning); }
#app-kuji .kj-star[aria-pressed="true"] .mach-mi, #app-kuji .kj-star-on { font-variation-settings: "FILL" 1; }
#app-kuji .kj-star-on { vertical-align: -3px; font-size: 1.1em; }

#app-kuji .kj-mode .btn { white-space: normal; }

/* ---- 記録 ---- */
#app-kuji .kj-tally th, #app-kuji .kj-tally td { font-variant-numeric: tabular-nums; }
#app-kuji .kj-tally th:first-child, #app-kuji .kj-tally td:first-child { padding-left: 1rem; }
#app-kuji .kj-tally th:last-child, #app-kuji .kj-tally td:last-child { padding-right: 1rem; }
#app-kuji .kj-tally-name { overflow-wrap: anywhere; }
#app-kuji .kj-tally-hit .kj-tally-name { font-weight: 700; }

#app-kuji .kj-log { max-height: none; }
#app-kuji .kj-log-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 8rem) 1fr;
    gap: .5rem;
    padding: .375rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}
#app-kuji .kj-log-no { color: var(--bs-secondary-color); text-align: right; font-variant-numeric: tabular-nums; }
#app-kuji .kj-log-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-kuji .kj-log-label { font-weight: 700; overflow-wrap: anywhere; }
#app-kuji .kj-log-hit { background: var(--bs-warning-bg-subtle); }

@media (prefers-reduced-motion: reduce) {
    #app-kuji .kj-box.kj-shake, #app-kuji .kj-ticket.kj-open { animation: none; }
}

/* 本数欄: 上下矢印は ±ボタンと重複し、幅を食うので消す */
#app-kuji .kj-count input::-webkit-outer-spin-button,
#app-kuji .kj-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#app-kuji .kj-count input { -moz-appearance: textfield; appearance: textfield; }

/* 名前を入れずに引いた行は、名前の列を詰める */
#app-kuji .kj-log-who:empty { display: none; }
#app-kuji .kj-log-who:empty + .kj-log-label { grid-column: 2 / 4; }

/* 親指で押せる高さ（設計書: 56px 以上） */
#app-kuji #kj-draw { min-height: 56px; }