/* 今日の一枚（/tarot/）・22枚の意味（/tarot/cards/）・1枚ぶんの意味（/tarot/cards/<slug>/）の本文（2026-09-25・判断票33回目 o1=a）。
   土台は play/base.html（背景・ヘッダー・フッターはトップや /shindan/ と同じ）。夜の占いの見た目（front/css/tarot.css）は読まない。
   見出しの帯（.pl-listhead）・羊皮紙（.pl-parch）・紺の枠（.pl-panel）は play.css の部品をそのまま使い、ここには
   「列の幅」「札の見せ方」「羊皮紙の中の組版」「共有ボタン」だけを書く。
   ★クラス無しの全体規則を書かない（play.css と同じ約束。app/test_play_tarot.py が見張る）。
   ★色・字は play-chrome.css 先頭の変数（--pl-*）だけを使う。生の色値を書かない。
   ★札の絵は描き下ろし（線画の絵・ドット絵ではない）なので、そのまま縮めて出す（pixelated にしない）。
     ドット絵のアイコン（.pl-pixel）は元の 32px の整数倍（1倍・2倍）でだけ出す。 */

/* ------------------------------------------------------------ 列 */

.pl-tarot-col {
    max-width: calc(920px + 48px);
}

.pl-tarot-col--wide {
    max-width: calc(1120px + 48px);
}

.pl-tarot-head .pl-listhead-title {
    font-size: clamp(24px, 3vw, 30px);
}

.pl-tarot-lead {
    line-height: 1.7;
    word-break: auto-phrase;
}

.pl-tarot-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--pl-muted);
}

.pl-tarot-crumbs a {
    color: var(--pl-muted);
}

.pl-tarot-crumbs a::after {
    content: "›";
    display: inline-block;
    margin-left: 6px;
    text-decoration: none;
}

.pl-tarot-date {
    font-variant-numeric: tabular-nums;
}

.pl-tarot-caption-number,
.pl-tarot-caption-label {
    display: block;
}

.pl-tarot-caption-number {
    letter-spacing: 0.16em;
}

.pl-tarot-caption-label {
    letter-spacing: 0.08em;
}

.pl-tarot-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block: 32px 56px;
}

/* ------------------------------------------------------------ 札（描き下ろしの絵をそのまま） */

.pl-tarot-draw {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.pl-tarot-card {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/* 札の縁: 紺の縁取り＋金の細い枠（ドット絵の枠と同じく角を丸めない・影はずらした塗り） */
.pl-tarot-card-face {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--pl-navy-deep);
    border: 3px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 3px var(--pl-gold-dark), 0 8px 0 3px var(--pl-navy-deep);
}

.pl-tarot-card-art,
.pl-tarot-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 逆位置は絵を180度回す。**回すのは絵だけで、名前や本文は回さない。** */
.pl-tarot-card.is-reversed .pl-tarot-card-art {
    transform: rotate(180deg);
}

/* 今日の札に押す機械印（templates/play/_stamp.html・形と色は play-stamp.css）。円の日付部を札の右上に、波線は札の外へ */
.tarot-stamp {
    --stamp-k: 0.56;
    position: absolute;
    z-index: 1;
    top: -18px;
    right: -46px;
}

.pl-tarot-draw-text {
    padding: 22px 26px 26px;
    text-align: center;
}

.pl-tarot-number {
    display: block;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--pl-wood);
}

.pl-tarot-name {
    margin: 2px 0 0;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: var(--pl-ink);
}

.pl-tarot-label {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--pl-ink-soft);
}

.pl-tarot-orientation {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 16px;
    border: 2px solid var(--pl-navy-deep);
    box-shadow: 0 3px 0 var(--pl-navy-deep);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--pl-white);
}

.pl-tarot-orientation--upright {
    background: var(--pl-blue);
}

.pl-tarot-orientation--reversed {
    background: var(--pl-red-deep);
}

.pl-tarot-summary {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: 0.04em;
    text-align: left;
    color: var(--pl-ink);
}

.pl-tarot-detail-link {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 700;
}

.pl-tarot-detail-link a,
.pl-tarot-sec a:not([class]) {
    color: var(--pl-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------ 羊皮紙の節 */

.pl-tarot-sec {
    color-scheme: light;
    padding: 20px 26px 24px;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.03em;
}

.pl-tarot-sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--pl-ink);
}

/* 見出しの頭の小さな菱形（ドット絵の飾り。四角を45度回すだけ・play-page.css と同じ形） */
.pl-tarot-sec-title::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--pl-wood);
    transform: rotate(45deg);
}

/* 1枚から、3つの方向に読む */
.pl-tarot-windows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.pl-tarot-window {
    padding: 12px 14px 14px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
}

.pl-tarot-window dt {
    display: inline-block;
    margin: 0 0 6px;
    padding: 0 10px;
    background: var(--pl-wood);
    color: var(--pl-parch-light);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.12em;
}

.pl-tarot-window dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--pl-ink);
}

/* この一枚のしくみ */
.pl-tarot-howto {
    margin: 0;
    padding-left: 1.3em;
}

.pl-tarot-howto li + li {
    margin-top: 8px;
}

.pl-tarot-howto li::marker {
    color: var(--pl-wood);
}

/* 読み方について・基本の意味・こんな日に出やすい（旧 .tarot-panel の小見出し） */
.pl-tarot-note-label {
    display: inline-block;
    margin: 0 0 8px;
    padding: 0 10px;
    background: var(--pl-wood);
    color: var(--pl-parch-light);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.12em;
}

.pl-tarot-note p:not(.pl-tarot-note-label),
.pl-tarot-basic p:not(.pl-tarot-note-label) {
    margin: 0;
}

/* ------------------------------------------------------------ 紺の枠（今日の一手・共有・明日の一枚） */

.pl-tarot-action,
.pl-tarot-share,
.pl-tarot-tomorrow {
    padding: 18px 22px 22px;
}

.pl-tarot-action {
    border-color: var(--pl-gold);
}

/* play.css の .pl-panel:not(.pl-panel--light) .pl-panel-title（白）より強く当てる */
.pl-panel.pl-tarot-action .pl-tarot-action-title {
    color: var(--pl-gold);
}

.pl-tarot-action-text {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.85;
    color: var(--pl-white);
}

/* 共有（診断の結果ページの共有パネル .pl-sr-* と同じ形） */
.pl-tarot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    font-family: var(--pl-round);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 3px solid var(--pl-navy-deep);
    border-radius: 0;
    box-shadow: 0 0 0 2px var(--pl-white), 0 5px 0 2px var(--pl-navy-deep);
    cursor: pointer;
}

.pl-tarot-btn:hover,
.pl-tarot-btn:focus-visible {
    outline: none;
    filter: brightness(1.12);
}

.pl-tarot-btn--image {
    width: 100%;
    min-height: 58px;
    background: var(--pl-gold);
    color: var(--pl-ink);
    font-size: 18px;
}

.pl-tarot-btn--x {
    background: var(--pl-navy-deep);
    color: var(--pl-white);
}

.pl-tarot-btn--line {
    background: var(--pl-green);
    color: var(--pl-navy-deep);
}

.pl-tarot-btn--copy {
    background: var(--pl-white);
    color: var(--pl-ink);
}

.pl-tarot-share-image {
    margin-bottom: 18px;
}

.pl-tarot-share-image-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pl-muted);
    text-align: center;
}

.pl-tarot-share-image-status {
    margin: 0;
    color: var(--pl-gold);
    font-weight: 700;
    text-align: center;
}

.pl-tarot-share-image-status.is-shown {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.pl-tarot-share-image-x[hidden] {
    display: none;
}

.pl-tarot-share-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pl-tarot-share-status {
    margin: 12px 0 0;
    color: var(--pl-gold);
    font-weight: 700;
    text-align: center;
}

.pl-tarot-share-status[hidden] {
    display: none;
}

/* 明日の一枚 */
.pl-tarot-tomorrow-body {
    display: flex;
    gap: 18px;
    align-items: center;
}

.pl-tarot-tomorrow-art {
    flex: none;
    width: 72px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 2px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 2px var(--pl-gold-dark);
}

.pl-tarot-tomorrow-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-tarot-tomorrow-art.is-reversed img {
    transform: rotate(180deg);
}

.pl-tarot-tomorrow-date {
    margin: 0;
    font-size: 13px;
    color: var(--pl-gold);
    font-variant-numeric: tabular-nums;
}

.pl-tarot-tomorrow-name {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--pl-white);
}

.pl-tarot-tomorrow-summary {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--pl-white);
}

.pl-tarot-tomorrow-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--pl-muted);
}

.pl-tarot-notice {
    line-height: 1.8;
    text-align: center;
}

/* ------------------------------------------------------------ 22枚の一覧 */

.pl-tarot-sec--grid {
    padding: 22px 22px 26px;
}

.pl-tarot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-tarot-tile {
    display: block;
    color: var(--pl-ink);
    text-align: center;
    text-decoration: none;
}

.pl-tarot-tile-face {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--pl-navy-deep);
    border: 2px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 2px var(--pl-gold-dark), 0 5px 0 2px var(--pl-wood-dark);
    transition: transform 0.12s steps(2);
}

.pl-tarot-tile-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-tarot-tile:hover .pl-tarot-tile-face,
.pl-tarot-tile:focus-visible .pl-tarot-tile-face {
    box-shadow: 0 0 0 2px var(--pl-gold), 0 5px 0 2px var(--pl-wood-dark);
    transform: translateY(-3px);
}

.pl-tarot-tile:focus-visible {
    outline: 3px solid var(--pl-blue);
    outline-offset: 4px;
}

.pl-tarot-tile-number {
    display: block;
    margin-top: 12px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--pl-wood);
}

.pl-tarot-tile-name {
    display: block;
    font-weight: 900;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.pl-tarot-tile-keyword {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pl-ink-soft);
}

/* ------------------------------------------------------------ 1枚ぶんの意味 */

.pl-tarot-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pl-tarot-keywords li {
    padding: 2px 12px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-wood);
    font-weight: 700;
    font-size: 14px;
    color: var(--pl-ink);
}

.pl-tarot-basic {
    text-align: left;
    font-size: 16px;
    line-height: 1.9;
    color: var(--pl-ink);
}

.pl-tarot-meanings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.pl-tarot-meaning {
    padding: 18px 22px 22px;
    color: var(--pl-ink);
}

.pl-tarot-meaning .pl-tarot-orientation {
    margin-top: 0;
}

.pl-tarot-meaning-head {
    margin: 12px 0 8px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.55;
    color: var(--pl-ink);
}

.pl-tarot-meaning-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.03em;
}

/* ------------------------------------------------------------ 行き先のボタン・前後の札 */

.pl-tarot-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.pl-tarot-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 52px;
    padding: 10px 28px;
    background: var(--pl-blue);
    color: var(--pl-white);
    border: 3px solid var(--pl-navy-deep);
    box-shadow: 0 0 0 2px var(--pl-white), 0 5px 0 2px var(--pl-navy-deep);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.pl-tarot-cta:hover,
.pl-tarot-cta:focus-visible {
    background: var(--pl-blue-light);
    outline: none;
}

.pl-tarot-cta--sub {
    background: var(--pl-navy-deep);
    box-shadow: 0 0 0 2px var(--pl-navy-line), 0 5px 0 2px var(--pl-navy-deep);
}

.pl-tarot-cta--sub:hover,
.pl-tarot-cta--sub:focus-visible {
    background: var(--pl-navy-tile);
    color: var(--pl-gold);
}

.pl-tarot-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 2px solid var(--pl-navy-line-soft);
    font-weight: 700;
    font-size: 15px;
}

.pl-tarot-pager a {
    color: var(--pl-gold);
    text-decoration: none;
}

.pl-tarot-pager a:hover,
.pl-tarot-pager a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------ 画面幅 */

@media (max-width: 1100px) {
    .pl-tarot-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pl-tarot-draw {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pl-tarot-card {
        max-width: min(240px, 62vw);
    }

    .pl-tarot-windows,
    .pl-tarot-meanings {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .pl-tarot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .pl-tarot-share-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-tarot-br {
        display: none;
    }
}

@media (max-width: 480px) {
    .pl-tarot-main {
        gap: 22px;
        padding-block: 26px 40px;
    }

    .pl-tarot-draw-text,
    .pl-tarot-sec,
    .pl-tarot-meaning {
        padding: 12px 10px 16px;
    }

    .pl-tarot-sec--grid {
        padding: 14px 6px 18px;
    }

    .pl-tarot-action,
    .pl-tarot-share,
    .pl-tarot-tomorrow {
        padding: 14px 14px 18px;
    }

    .pl-tarot-summary {
        font-size: 17px;
    }

    .pl-tarot-sec-title {
        font-size: 18px;
    }

    .pl-tarot-tile-name {
        font-size: 14px;
    }

    .pl-tarot-cta {
        width: 100%;
        min-width: 0;
    }

    .tarot-stamp {
        --stamp-k: 0.5;
        right: -38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pl-tarot-tile-face {
        transition: none;
    }

    .pl-tarot-tile:hover .pl-tarot-tile-face,
    .pl-tarot-tile:focus-visible .pl-tarot-tile-face {
        transform: none;
    }
}