/* 株式会社千本ノック — 共通デザイン
   世界観：内野の土と白線。太い黒枠とベタ影で、ノック中のグラウンドの気配を出す。 */

:root {
    --clay:    #C2673A;
    --clay-d:  #A5522B;
    --chalk:   #FFFBF0;
    --turf:    #2F6B3C;
    --turf-d:  #23522E;
    --ball:    #F5DF4D;
    --red:     #E23D2B;
    --ink:     #1B1512;
}

/* ナビが上に貼りついているので、アンカー先が隠れないよう頭を空ける（ナビ72px＋枠5px） */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    background: var(--chalk);
    color: var(--ink);
    font-family: 'Zen Maru Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.f-dela { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; }
.f-marker { font-family: 'Yusei Magic', sans-serif; font-weight: 400; }

/* ── 帯 ───────────────────────────────── */
.band-clay  { background: var(--clay);  color: var(--chalk); }
.band-turf  { background: var(--turf);  color: var(--chalk); }
.band-ball  { background: var(--ball);  color: var(--ink); }
.band-ink   { background: var(--ink);   color: var(--chalk); }
.band-chalk { background: var(--chalk); color: var(--ink); }

/* 土のざらつき＋白線 */
.dirt {
    background-color: var(--clay);
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(-115deg, rgba(0,0,0,.05) 0 2px, transparent 2px 11px);
}
/* 芝の縞 */
.turf {
    background-color: var(--turf);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 34px, transparent 34px 68px);
}

/* 上下を白線で区切る */
.chalk-line { border-top: 5px solid var(--chalk); border-bottom: 5px solid var(--chalk); }

/* ── 部品 ─────────────────────────────── */
.hard {
    border: 3px solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
}
.hard-sm { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.9rem;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    background: var(--ball); color: var(--ink);
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 1rem; line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn-red   { background: var(--red);  color: var(--chalk); }
.btn-chalk { background: var(--chalk); }

/* 手書きの付箋 */
.tag {
    display: inline-block;
    font-family: 'Yusei Magic', sans-serif;
    font-size: .85rem;
    padding: .3rem 1rem;
    border: 3px solid var(--ink);
    background: var(--chalk);
    color: var(--ink);
    transform: rotate(-2deg);
    white-space: nowrap;
}

/* ── 記録カード ───────────────────────── */
.knock {
    display: block;
    position: relative;
    background: var(--chalk);
    border: 4px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    padding: 1.75rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.knock:hover, .knock:focus-visible { transform: translate(-4px, -4px); box-shadow: 16px 16px 0 var(--ink); }
.knock-no {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 2.6rem; line-height: 1;
    -webkit-text-stroke: 2px var(--ink);
    color: transparent;
}
.knock-judge {
    display: inline-block;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: .95rem;
    padding: .45rem 1.1rem;
    border: 3px solid var(--ink);
    white-space: nowrap;
}
.j-miss { background: var(--red);  color: var(--chalk); }
.j-live { background: var(--turf); color: var(--chalk); }
.j-prep { background: var(--ball); color: var(--ink); }

/* 一本目のカードは球が股下を抜ける */
.knock-ball {
    position: absolute; left: -40px; bottom: 14px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--chalk); border: 3px solid var(--ink);
    pointer-events: none; opacity: 0;
}
.knock:hover .knock-ball { animation: tunnel 1s ease-in forwards; }

@keyframes tunnel {
    0%   { transform: translateX(0) rotate(0); opacity: 1; }
    100% { transform: translateX(calc(100% + 100vw)) rotate(900deg); opacity: 1; }
}

/* ── グラウンド（打つやつ）──────────── */
/* カーソルはバット。先端（右上）が打点になるようホットスポットを合わせている */
#ground {
    position: relative; overflow: hidden; touch-action: manipulation;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 40 40'%3E%3Cg transform='translate(32,8) rotate(-45) translate(-32,0)' stroke='%231B1512' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='2.3' cy='0' rx='1.7' ry='2.8' fill='%23A5522B'/%3E%3Cpath d='M4 -1.7 L12 -1.8 L21 -2.5 L28.5 -3.5 A3.5 3.5 0 0 1 28.5 3.5 L21 2.5 L12 1.8 L4 1.7 Z' fill='%23C2673A'/%3E%3Cpath d='M4.8 -1.75 L11.5 -1.8 L11.5 1.8 L4.8 1.75 Z' fill='%23A5522B' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 38 10, crosshair;
}
/* 押した瞬間だけ振り抜いた形 */
#ground:active { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%231B1512' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M37 15 L38 23'/%3E%3Cpath d='M30 20 L31 27'/%3E%3C/g%3E%3Cg transform='translate(32,8) rotate(-23) translate(-32,0)' stroke='%231B1512' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='2.3' cy='0' rx='1.7' ry='2.8' fill='%23A5522B'/%3E%3Cpath d='M4 -1.7 L12 -1.8 L21 -2.5 L28.5 -3.5 A3.5 3.5 0 0 1 28.5 3.5 L21 2.5 L12 1.8 L4 1.7 Z' fill='%23C2673A'/%3E%3Cpath d='M4.8 -1.75 L11.5 -1.8 L11.5 1.8 L4.8 1.75 Z' fill='%23A5522B' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 38 10, crosshair; }
#ground::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--chalk); opacity: .55;
}
.fly { position: absolute; pointer-events: none; }
.fly-y {
    display: block; width: 16px; height: 16px; border-radius: 50%;
    background: var(--chalk); border: 2.5px solid var(--ink);
}
@keyframes fly-x { to { transform: translateX(var(--dx)); } }
@keyframes fly-y {
    0%   { transform: translateY(0)            rotate(0deg); }
    45%  { transform: translateY(var(--peak))  rotate(400deg); }
    100% { transform: translateY(60px)         rotate(900deg); }
}
.pop {
    position: absolute; pointer-events: none;
    font-family: 'Dela Gothic One', sans-serif;
    color: var(--ball); -webkit-text-stroke: 2px var(--ink);
    font-size: 2rem; white-space: nowrap;
    animation: pop .7s ease-out forwards;
}
@keyframes pop {
    0%   { transform: translate(-50%, 0) scale(.4); opacity: 0; }
    30%  { transform: translate(-50%, -18px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -54px) scale(1); opacity: 0; }
}

/* ── スクロールで出てくる ──────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .5s ease; }
.reveal.shown { opacity: 1; transform: none; }

/* ── その他 ───────────────────────────── */
.link-u { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 4px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}