/**
 * おみそ酒場テレビ — omiso-tv.css
 * sakaba-tv/omiso-tv.css
 *
 * 1. ページ全体
 * 2. 小物（招き猫・お猪口）
 * 3. テレビ筐体
 * 4. テレビ画面
 * 5. 走査線・ちらつき・砂嵐
 * 6. テロップ
 * 7. スピーカー・つまみ・脚
 * 8. リモコン
 * 9. 番組表（新聞テレビ欄）
 * 10. 架空広告
 * 11. アニメーション
 * 12. レスポンシブ
 * 13. アクセシビリティ
 */


/* ===========================================
   1. ページ全体（居酒屋の暗い木壁）
=========================================== */
.tv-page {
    padding: 80px 16px 80px;
    min-height: 100vh;
    background-color: #2A2016;
    background-image:
        /* 木目の縦筋 */
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 18px,
            rgba(0,0,0,.08) 18px,
            rgba(0,0,0,.08) 19px
        ),
        /* 節や濃淡のムラ */
        radial-gradient(ellipse at 30% 20%, rgba(60,45,25,.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(50,35,18,.3) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(65,48,28,.35) 0%, transparent 45%),
        /* ベースの木目グラデーション */
        linear-gradient(
            180deg,
            #2E2218 0%,
            #35291D 30%,
            #2A1F15 50%,
            #332619 70%,
            #2C2117 100%
        );
}

.tv-container {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}


/* ===========================================
   2. 小物（招き猫）— テレビの上に直接乗せる
=========================================== */
.tv-ornaments {
    position: absolute;
    top: -50px;
    right: 20px;
    z-index: 3;
}

.tv-ornament--neko {
    transform: rotate(2deg);
    transform-origin: bottom center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}


/* ===========================================
   3. テレビ筐体
=========================================== */
.tv-frame {
    position: relative;
}

.tv-bezel {
    background:
        linear-gradient(
            135deg,
            #A0845C 0%,
            #8B7342 20%,
            #A08A5E 40%,
            #7A6535 60%,
            #9B8450 80%,
            #8B6F47 100%
        );
    border-radius: 16px;
    padding: 20px 22px 14px;
    box-shadow:
        0 4px 16px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(0,0,0,.2);
    position: relative;
}


/* ===========================================
   4. テレビ画面
=========================================== */
.tv-screen {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #0A0A0A;
    border-radius: 6px;
    overflow: hidden;
    border: 3px solid #444;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8),
        inset 0 0 4px rgba(0,0,0,.5);
}

/* 電源OFF */
.tv-screen__off {
    position: absolute;
    inset: 0;
    background: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity .3s;
}

.tv-screen__off.is-hidden { opacity: 0; pointer-events: none; }

.tv-screen__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(200,200,200,.25);
    box-shadow: 0 0 6px 2px rgba(200,200,200,.1);
}

/* 起動アニメーション */
.tv-screen__boot {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
}

.tv-screen__boot.is-active {
    animation: tvBoot .6s ease-out forwards;
}

/* 砂嵐 */
.tv-screen__noise {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(
            circle at 17% 32%, #888 0px, transparent 1px
        ),
        repeating-radial-gradient(
            circle at 62% 78%, #aaa 0px, transparent 1px
        ),
        repeating-radial-gradient(
            circle at 83% 11%, #999 0px, transparent 1px
        );
    background-size: 3px 3px, 4px 4px, 5px 5px;
}

.tv-screen__noise.is-active {
    opacity: 1;
    animation: tvNoise .15s steps(4) infinite;
}

/* YouTube Player */
.tv-screen__player {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.tv-screen__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ===========================================
   5. 走査線・ちらつき
=========================================== */
.tv-screen__scanlines {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgba(0,0,0,.06) 2px,
        rgba(0,0,0,.06) 3px
    );
    animation: tvFlicker 1.5s ease-in-out infinite;
}


/* ===========================================
   6. テロップ
=========================================== */
.tv-screen__telop {
    position: absolute;
    z-index: 15;
    color: #ccc;
    font-size: 13px;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

.tv-screen__telop.is-visible { opacity: 1; }

.tv-screen__no-signal {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.tv-screen__mute-notice {
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: rgba(0,0,0,.5);
    padding: 6px 12px;
    border-radius: 4px;
}

.tv-screen__mute-icon { font-size: 16px; }


/* ===========================================
   7. スピーカー・つまみ・脚
=========================================== */
.tv-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 6px;
}

.tv-speaker {
    display: grid;
    grid-template-columns: repeat(8, 5px);
    gap: 4px;
}

.tv-speaker__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0,0,0,.3);
}

.tv-knobs {
    display: flex;
    gap: 12px;
}

.tv-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #555, #333);
    border: 1.5px solid #666;
    position: relative;
    box-shadow:
        0 1px 3px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.1);
}

.tv-knob__marker {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 6px;
    background: #999;
    border-radius: 1px;
    transform: translateX(-50%);
}

/* 脚 */
.tv-legs {
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
}

.tv-leg {
    width: 3px;
    height: 18px;
    background: linear-gradient(to bottom, #7A6535, #5C4C2A);
    border-radius: 0 0 2px 2px;
}


/* ===========================================
   8. リモコン
=========================================== */
.tv-remote {
    max-width: 260px;
    margin: 28px auto 0;
    background: linear-gradient(170deg, #353535, #2A2A2A);
    border-radius: 20px;
    padding: 18px 22px 20px;
    position: relative;
    box-shadow:
        0 2px 8px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.06);
}

/* 赤外線LED */
.tv-remote__led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a1010;
    margin: 0 auto 12px;
}

/* 電源ボタン */
.tv-remote__power {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #C0392B;
    border: none;
    margin: 0 auto 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
    transition: transform .1s, box-shadow .1s;
}

.tv-remote__power:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.tv-remote__power-icon {
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

/* チャンネルボタン 4×2 */
.tv-remote__channels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.tv-remote__ch {
    height: 36px;
    border-radius: 6px;
    background: #444;
    border: none;
    color: #ccc;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .1s, background .15s, box-shadow .15s;
    box-shadow: 0 2px 0 #222;
}

.tv-remote__ch:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #222;
}

.tv-remote__ch.is-active {
    background: rgba(217,138,163,.3);
    color: #f0c0d0;
    box-shadow: 0 2px 0 #222, 0 0 8px rgba(217,138,163,.25);
}

/* 音量ボタン */
.tv-remote__volume {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.tv-remote__vol-btn {
    width: 36px;
    height: 32px;
    border-radius: 6px;
    background: #3a3a3a;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s;
    box-shadow: 0 2px 0 #222;
}

.tv-remote__vol-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #222;
}


/* ===========================================
   9. 番組表（新聞テレビ欄）
=========================================== */
.tv-program {
    margin-top: 32px;
    background-color: #CBC7BD;
    border-radius: 1px;
    padding: 14px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    color: #1a1a1a;

    /* ノイズテクスチャ：元より2倍以上細かく */
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0,0,0,.022) 0.45px, transparent 0.55px),
        radial-gradient(circle at 80% 20%, rgba(0,0,0,.018) 0.4px, transparent 0.5px),
        radial-gradient(circle at 50% 80%, rgba(0,0,0,.020) 0.45px, transparent 0.55px),
        radial-gradient(circle at 40% 35%, rgba(0,0,0,.012) 0.35px, transparent 0.45px);
    background-size:
        2.2px 2.2px,
        3px 3px,
        2.6px 2.6px,
        3.8px 3.8px;
}


/* ===========================================
   折り目
=========================================== */
.tv-program__fold {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0,0,0,.07);
    box-shadow: 1px 0 0 rgba(255,255,255,.04);
}


/* ===========================================
   ヘッダー（新聞の題字）
=========================================== */
.tv-program__header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 14px 16px 10px;

    /* 下線も番組表の罫線と同じ細さ */
    border-bottom: 0.5px solid rgba(40,40,40,.55);

    position: relative;
}


/* 題字の上に太い罫線 */
.tv-program__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /* 上の線だけ新聞らしく少し太く */
    height: 2px;

    background: #222;
}


.tv-program__title {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #111;
    margin: 0;
}


/* ===========================================
   日付
=========================================== */
.tv-program__date {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
    font-size: 9px;
    color: #444;
    letter-spacing: 1px;

    position: absolute;
    top: 5px;
    right: 12px;

    white-space: nowrap;
}


/* ===========================================
   4ch × 2段 グリッド
=========================================== */
.tv-program__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);

    margin: 0;

    /* 線を直接描かず、背景で一本化 */
    border: none;

    /* 罫線の色 */
    background-color: rgba(40, 40, 40, 0.55);

    /* 罫線の太さ */
    gap: 0.5px;
}



/* ===========================================
   各番組セル
=========================================== */
.tv-program__cell {
    border: none !important;

    padding: 10px 7px 8px;

    text-align: center;
    cursor: pointer;

    background-color: #CBC7BD;

    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;

    transition: background .15s;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2px;
}


/* ノイズをセル側でも維持 */
.tv-program__cell {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0,0,0,.022) 0.45px, transparent 0.55px),
        radial-gradient(circle at 80% 20%, rgba(0,0,0,.018) 0.4px, transparent 0.5px),
        radial-gradient(circle at 50% 80%, rgba(0,0,0,.020) 0.45px, transparent 0.55px),
        radial-gradient(circle at 40% 35%, rgba(0,0,0,.012) 0.35px, transparent 0.45px);

    background-size:
        2.2px 2.2px,
        3px 3px,
        2.6px 2.6px,
        3.8px 3.8px;
}


/* ホバー */
.tv-program__cell:hover {
    background-color: rgba(203,199,189,.85);
}


/* 休止中 */
.tv-program__cell--off {
    cursor: default;
}

.tv-program__cell--off .tv-program__ch-name,
.tv-program__cell--off .tv-program__ch-desc {
    opacity: .3;
}


/* ===========================================
   番組表の外周
=========================================== */

.tv-program__grid {
    position: relative;
}

.tv-program__grid::after {
    content: '';
    position: absolute;

    inset: 0;

    border: 0.5px solid rgba(40,40,40,.55);

    pointer-events: none;
}


/* ===========================================
   チャンネル番号
=========================================== */
.tv-program__ch-num {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    /* 番号枠をかなり細く */
    border: 0.5px solid rgba(20,20,20,.8);

    font-size: 11px;
    font-weight: 900;

    color: #111;

    font-family: "Noto Serif JP", serif;

    flex-shrink: 0;

    /* 新聞らしい四角 */
    border-radius: 0;
}


/* ===========================================
   チャンネル名
=========================================== */
.tv-program__ch-name {
    font-size: 12px;
    font-weight: 700;

    color: #111;

    line-height: 1.35;
    letter-spacing: .5px;
}


/* ===========================================
   チャンネル説明
=========================================== */
.tv-program__ch-desc {
    font-size: 10px;
    font-weight: 400;

    color: #333;

    line-height: 1.45;
    letter-spacing: .3px;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ===========================================
   放送中マーク
=========================================== */
.tv-program__now {
    font-size: 9px;

    color: #111;

    font-weight: 700;

    opacity: 0;

    transition: opacity .2s;

    position: absolute;

    top: 3px;
    right: 3px;
}


.tv-program__now.is-active {
    opacity: 1;
}


/* ===========================================
   罫線
=========================================== */
.tv-program__rule {
    border: none;

    /* 罫線を統一 */
    border-top: 0.5px solid rgba(40,40,40,.55);

    margin: 0;
}
/* ===========================================
   10. 架空広告
=========================================== */
.tv-program__ads {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid #555;
    padding: 10px 12px 12px;
}

.tv-program__ad {
    border: 1px solid #222;
    padding: 10px 6px 8px;
    text-align: center;
    text-decoration: none;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: background .15s;
    margin: 0 3px;
}

.tv-program__ad:hover {
    background: rgba(0,0,0,.05);
}

.tv-program__ad-shop {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #111;
}

.tv-program__ad-copy {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    letter-spacing: .3px;
}

.tv-program__ad-sub,
.tv-program__ad-col {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
    font-size: 8px;
    color: #555;
    letter-spacing: 1px;
}

.tv-program__ad-badge {
    font-family: "Noto Serif JP", serif;
    font-size: 8px;
    font-weight: 700;
    color: #222;
    letter-spacing: .5px;
}

/* 酒場広告は二重枠で目立たせる */
.tv-program__ad--sakaba {
    border: 2px double #111;
}

.tv-program__ad--sakaba .tv-program__ad-shop {
    font-size: 14px;
    letter-spacing: 4px;
    font-weight: 900;
}


/* ===========================================
   11. アニメーション
=========================================== */

/* 起動: 白い横線が広がる */
@keyframes tvBoot {
    0%   { background: linear-gradient(to bottom, transparent 49.5%, #fff 49.5%, #fff 50.5%, transparent 50.5%); opacity: 1; }
    60%  { background: linear-gradient(to bottom, transparent 10%, #fff 10%, #fff 90%, transparent 90%); opacity: 1; }
    80%  { background: #fff; opacity: .8; }
    100% { background: #fff; opacity: 0; }
}

/* 砂嵐のちらつき */
@keyframes tvNoise {
    0%   { background-position: 0 0, 0 0, 0 0; }
    25%  { background-position: 2px 3px, -1px 2px, 3px -1px; }
    50%  { background-position: -2px -1px, 3px -2px, -1px 3px; }
    75%  { background-position: 1px -3px, -3px 1px, 2px 2px; }
    100% { background-position: -1px 2px, 2px -3px, -2px 1px; }
}

/* 走査線のちらつき */
@keyframes tvFlicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: .96; }
}

/* チャンネル切り替え時の砂嵐（0.4秒） */
@keyframes tvChannelSwitch {
    0%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

.tv-screen__noise.is-switching {
    opacity: 1;
    animation: tvChannelSwitch .4s ease-out forwards;
}


/* ===========================================
   12. レスポンシブ
=========================================== */

/* スマホ（480px以下） */
@media (max-width: 480px) {
    .tv-page { padding: 20px 10px 60px; }

    .tv-ornaments { padding: 0 24px; }

    .tv-ornament--neko svg { width: 48px; height: 60px; }
    .tv-ornament--ochoko { font-size: 24px; }

    .tv-bezel {
        padding: 14px 14px 10px;
        border-radius: 12px;
    }

    .tv-remote {
        max-width: 100%;
        border-radius: 16px;
    }

    .tv-remote__ch { height: 40px; font-size: 16px; }
    .tv-remote__vol-btn { width: 40px; height: 36px; }

    /* 番組表: 4列→2列 */
    .tv-program__grid {
        grid-template-columns: 1fr 1fr;
    }

    .tv-program__cell { padding: 8px 6px; }
    .tv-program__ch-name { font-size: 12px; }

    /* 広告: 3列→1列 */
    .tv-program__ads {
        grid-template-columns: 1fr;
    }

    .tv-program__ad {
        flex-direction: row;
        gap: 8px;
        text-align: left;
    }
}

/* 中間サイズ（481px〜767px） */
@media (min-width: 481px) and (max-width: 767px) {
    .tv-remote { max-width: 280px; }

    .tv-program__ads {
        grid-template-columns: 1fr 1fr;
    }

    .tv-program__ads .tv-program__ad:last-child {
        grid-column: 1 / -1;
    }
}


/* ===========================================
   13. アクセシビリティ
=========================================== */
@media (prefers-reduced-motion: reduce) {
    .tv-screen__scanlines { animation: none; opacity: .5; }
    .tv-screen__noise.is-active { animation: none; }
    .tv-screen__noise.is-switching { animation: none; opacity: 0; }
    .tv-screen__boot.is-active { animation: none; opacity: 0; }
}

/* フォーカスリング */
.tv-remote__power:focus-visible,
.tv-remote__ch:focus-visible,
.tv-remote__vol-btn:focus-visible,
.tv-program__cell:focus-visible,
.tv-program__ad:focus-visible {
    outline: 2px solid #D98AA3;
    outline-offset: 2px;
}