body {
    --time-grid_border-color: #898989;
    --event_background-color: rgba(255, 198, 211, 0.9);
    --time-grid-just_border-color: #c95871;
    --event_background-color_hover: #ffa9bb;
}

div.spots {
    margin: 1vh auto 0;
}

section {
    padding: 0;
    width: 95%;
    margin: 1em auto;
    max-width: none;
}

.date {
    padding: 1em 0;
    text-align: center;
    font-family: var(--yusei-magic);
}

.date p {
    text-align: center;
    font-family: var(--zen-kaku-gothic);
}

.date .date__span {
    font-size: 1.5em;
    display: inline-block;
    margin: 0.5em;
}

.date .date__span span.num {
    font-size: 1.2em;
}

.marker {
    box-shadow: 0 -8px 0 #ff97ae inset;
}

.background {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    padding: 0 1em 1em;
    background-color: var(--body_background);
    background-attachment: fixed;
    background-size: 300px;
    background-position: top;
    overflow: hidden;
}

.background .cancel {
    height: 10dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.background .cancel span {
    display: inline-block;
}

.background.full-screen {
    animation: fade-in 1s ease forwards;
    display: block;
}

.timetable-spots.full-screen {
    position: fixed;
    top: 100dvh;
    left: 0;
    height: 90dvh;
    width: 100%;
    z-index: 110;
    margin: 0;
    animation: slide-in 0.7s ease-in-out 0.3s forwards;
}

html:has(.background.full-screen),
body:has(.background.full-screen) {
    overflow: hidden;
    max-height: 100dvh;
}

@keyframes slide-in {
    from {
        top: 100dvh;
    }

    to {
        top: 10dvh;
    }
}

@keyframes fade-in {
    from {
        display: block;
        opacity: 0;
    }

    to {
        display: block;
        opacity: 1;
    }
}

.timetable-spots {
    outline: none;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100dvh - 10em);
    margin: 1em 0;
    border: 0.2em solid #ffabbd;
    border-radius: 1em;
    background-color: #fff1f1;
    /* .timetable-spot.head/.spot-nameは最大300,000のz-indexを使うが、
       それがページ全体のスタッキング順に漏れると、下部ナビ(z-index:99)や
       全画面切り替え用の背景(.background, z-index:100)より手前に出てしまう。
       グリッド全体をisolateし、内部のz-indexを外へ漏らさないようにする */
    isolation: isolate;
}

.timetable-spot {
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 241, 241, 0.5);
    width: max-content;
    height: max-content;
}

.timetable-spot:nth-of-type(2n-1) {
    background-color: rgba(255, 220, 220, 0.5);
}

.yusei {
    font-family: var(--yusei-magic);
}

.spot-name {
    position: sticky;
    /* .event/.performanceは最大100,000のz-indexを使うため、
       スクロール中もスポット名が隠れないよう確実に上へ来る値にしている */
    z-index: 300000;
    text-align: center;
    min-width: 10em;
    background-color: #ffc9c9;
    padding: 0 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.spot-name p {
    margin: 0;
    text-align: center;
}

.spot-name a p::after {
    font-family: "Material Symbols Rounded";
    content: "\e89e";
    position: relative;
    vertical-align: bottom;
    bottom: 0.3em;
    padding: 0.2em;
    font-size: 0.8em;
}

.spot-name a {
    color: black;
    transition: 0.2s all;
}

.spot-name a:hover {
    color: #ff1f75;
    transform: translate(2%, -2%);
}

.spot-name p.spot {
    font-size: 1.2em;
    font-family: var(--yusei-magic);
    font-weight: 600;
}

.spot-title{
    font-size: 1.2em;
    font-weight: 600;
}

.time-grids {
    position: relative;
    /* .eventはstacking_orderタグで最大z-index:100000まで使うが、それが
       ページ全体のスタッキング順に漏れると、下部ナビ(z-index:99)等の
       他の固定要素より手前に来てしまう。isolateで自前のスタッキング
       コンテキストを作り、内部のz-indexを外へ漏らさないようにする */
    isolation: isolate;
    display: flex;
    background-color: inherit;
}

.time-grid {
    position: relative;
    border: 0.1em dashed var(--time-grid_border-color);
}

.event,
.performance {
    text-align: center;
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

.performance > a {
    display: block;
    height: 100%;
}

.event p,
.performance p {
    margin: 0;
}

.event div,
.performance div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    color: black;
    background-color: var(--event_background-color);
    height: calc(100%);
    width: calc(100%);
    border: 0.1em solid var(--time-grid-just_border-color);
    transition: background-color 0.3s;
}

.event div:hover {
    background-color: var(--event_background-color_hover);
}

.time {
    position: absolute;
    transform: translateX(-50%);
    /* .event/.performanceは重なり順の表現に大きめのz-index(最大100000)を使うため、
       時刻ピルやヘッダーはそれより確実に上へ来るよう桁を上げている */
    z-index: 200000;
    color: var(--very-dark-gray);
    background-color: white;
    border-radius: 2em;
    padding: 0 0.5em;
    border: 1px solid var(--time-grid-just_border-color);
}

.timetable-spot.head {
    position: sticky;
    z-index: 300000;
    background-color: #fff1f1;
}

.spot-name.head {
    border: none;
    padding: 0;
}

.time-grid.head {
    border-color: transparent;
}

.time-grid.head div {
    position: absolute;
    z-index: 400000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c95871;
    border-radius: 3em;
    height: 3em;
    width: 3em;
}

.time-grid.head div span {
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}

.time-grid.head div span.small {
    font-size: 0.5em;
}

a.detail {
    border: 0.2em solid #ff7272;
    font-size: 0.7em;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    color: #ff4949;
    transition: 0.4s all;
    padding: 0.1em 0.5em;
    width: max-content;
}

a.detail .material-symbols-rounded {
    font-size: 1.5em;
}

a.detail:hover {
    color: white;
    background-color: #ff7272;
}

#overlay_dark {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
}

.event_detail {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    border: 0.2em solid #a0a0a0;
    padding: 1em;
    width: 80%;
    max-width: 500px;
    background-color: #fefefe;
    border-radius: 2em;
    box-shadow: 0 0.2em 0.4em rgba(62, 62, 62, 0.4);
}

.event_detail div {
    text-align: center;
}

.event_detail__section {
    margin: 1em 0;
}

.event_detail__close_button {
    position: absolute;
    top: 1em;
    right: 1em;
    color: #fefefe;
    cursor: pointer;
    transition: 0.2s all;
    text-align: center;
    padding: 0.5em;
    border-radius: 100%;
    background-color: #a0a0a0;
}

.event_detail__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    margin: 0;
    font-weight: bolder;
    font-family: var(--zen-kaku-gothic);
    color: #555;
}

.event_detail__label .material-symbols-rounded {
    font-size: 1.2em;
    margin-right: 0.2em;
}

.event_detail__content {
    margin: 0.5em 0;
}

@media screen and (orientation: landscape) {
    .timetable-spots.full-screen {
        padding: 0;
    }

    .timetable-spots {
        border-radius: 0;
    }

    .time-grids {
        margin: 0 2em;
    }

    .time-grid {
        border-right-style: solid;
        border-right-color: var(--time-grid-just_border-color);
        width: 8em;
        /* 重なるイベントがある場所は、1レーンあたりの高さを保ったまま
           行の高さ自体を伸ばす（詰めて文字が潰れるのを防ぐ） */
        height: calc(8em * var(--lane-count, 1));
        border-top: none;
        border-bottom: none;
    }

    .time-grid div {
        left: -1.6em;
        top: 0;
    }

    .time-grid div::after {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        height: 2.5em;
        width: 100%;
        clip-path: polygon(100% 50%, 0 0, 0 100%);
        rotate: 90deg;
        background-color: #c95871;
        z-index: -5;
    }

    .time-grid.just {
        border-right: none;
        border-left-style: solid;
        border-left-color: var(--time-grid-just_border-color);
    }

    .time-grid.just.first {
        border-left-width: 0.2em;
    }

    .time-grid.last,
    .head.time-grid.last {
        width: 0;
        border-right: none;
    }

    .spot-name {
        left: 0;
        border-bottom: 0.1em solid white;
        border-top: 0.1em solid white;
        box-shadow: 0.2em 0em 0.4em rgba(62, 62, 62, 0.4);
        width: 12em;
    }

    .timetable-spot.head {
        top: 0;
    }

    .time-grid.head {
        position: relative;
        z-index: 5;
        text-align: left;
        height: 3em;
        border-right: 0.1em solid var(--time-grid-just_border-color);
        margin: 1em 0;
    }

    .time-grid.head.just {
        border: none;
        border-left: 0.1em solid var(--time-grid-just_border-color);
    }

    .time-grid.head.just.first {
        border-left-width: 0.2em;
    }

    .time {
        transform: translateX(-50%);
        top: 5.6% !important;
    }

    /* 時刻ラベルが重なる場合は2段目に下げる（timetable.js の layoutTimeLabels） */
    .time[data-lane="1"] {
        transform: translate(-50%, 110%);
    }

    .event,
    .performance {
        /* 同じ場所・時間が重なるイベントは、被らないよう縦方向を
           --lane-count 個に分割し、--lane-index 番目の段に積む
           （main/views.py の _assign_timetable_lanes が算出） */
        height: calc(75% / var(--lane-count, 1)) !important;
        top: calc(25% + var(--lane-index, 0) * (75% / var(--lane-count, 1))) !important;
        bottom: auto !important;
        font-family: var(--zen-kaku-gothic);
        font-weight: 500;
    }
}

@media screen and (orientation: portrait) {
    .timetable-spots {
        flex-direction: row;
    }

    .timetable-spots.full-screen {
        border-radius: 0;
    }

    .timetable-spot {
        flex-direction: column;
    }

    .time-grids {
        flex-direction: column;
        margin: 2em 0;
    }

    .time-grid {
        border-bottom-style: solid;
        border-bottom-color: var(--time-grid-just_border-color);
        border-right: none;
        border-left: none;
        height: 5em;
        /* 縦画面ではレーン軸が横幅なので、重なる予定がある場所はここを広げる。
           widthではなくmin-widthにして、元々もっと広い場所名等の幅は縮めない */
        min-width: calc(7.5em * var(--lane-count, 1));
    }

    .time-grid.just {
        border-top-style: solid;
        border-top-color: var(--time-grid-just_border-color);
        border-bottom: none;
    }

    .time-grid.just.first {
        border-top-width: 0.2em;
    }

    .time-grid.last,
    .head.time-grid.last {
        height: 0;
        border-bottom: none;
    }

    .spot-name {
        position: sticky;
        top: 0;
        z-index: 300000;
        height: 6em;
        border-right: 0.1em solid white;
        border-left: 0.1em solid white;
        box-shadow: 0em 0.2em 0.4em rgba(62, 62, 62, 0.4);
    }

    .timetable-spot.head {
        left: 0;
    }

    .time-grids.head {
        align-items: flex-end;
    }

    .spot-name.head {
        display: block;
        min-width: 0;
    }

    .time-grid.head {
        width: 2.5em;
        text-align: right;
        border-bottom: 0.1em solid transparent;
        position: relative;
        z-index: 10;
        margin: 0 0.8em;
    }

    .time-grid.head div {
        width: 2.5em;
        height: 2.5em;
        top: 0;
        left: -0.2em;
        transform: translateY(calc(-50% - 0.1em));
    }

    .time-grid.head div span {
        font-size: 1.3em;
    }

    .time-grid.head div::after {
        position: absolute;
        content: "";
        left: calc(50% - 0.2em);
        top: 0;
        width: 2.5em;
        height: 100%;
        clip-path: polygon(100% 50%, 0 0, 0 100%);
        background-color: #c95871;
        z-index: -5;
    }

    .time-grid.head.just {
        border: none;
        border-top: 0.1em solid transparent;
    }

    .time-grid.head.just.first {
        border-top-width: 0.2em;
    }

    .time {
        left: auto !important;
        transform: translateY(-50%);
        right: 1% !important;
        width: 29%;
        text-align: center;
    }

    /* 時刻ラベルが重なる場合は横に並べて2列にする（timetable.js の layoutTimeLabels） */
    .time[data-lane] {
        width: 14%;
        padding: 0;
    }

    .time[data-lane="1"] {
        right: 16% !important;
    }

    .event,
    .performance {
        /* 同じ場所・時間が重なるイベントは、被らないよう横方向を
           --lane-count 個に分割し、--lane-index 番目の列に並べる
           （main/views.py の _assign_timetable_lanes が算出） */
        width: calc(70% / var(--lane-count, 1)) !important;
        left: calc(var(--lane-index, 0) * (70% / var(--lane-count, 1))) !important;
    }
}

body.dark-mode {
    --time-grid_border-color: var(--very-dark-gray);
    --event_background-color: #6d366d;
    --event_background-color_hover: #883c88;
}

body.dark-mode .marker {
    box-shadow: 0 -10px 0 #ff97ae00 inset;
}

body.dark-mode .background {
    background-color: #202020;
}

body.dark-mode .timetable-spots {
    border-color: #a555a5;
    background-color: #251d25;
}

body.dark-mode .timetable-spot {
    background-color: #2b222b;
}

body.dark-mode .timetable-spot.head {
    background-color: #251d25;
}

body.dark-mode .timetable-spot:nth-of-type(2n-1) {
    background-color: #332733;
}

body.dark-mode .spot-name {
    background-color: #241b24;
}

body.dark-mode .spot-name a {
    color: #eee;
}

body.dark-mode .spot-name a:hover {
    color: #eee;
}

body.dark-mode .time-grid:not(.head) {
    border-color: #ddd;
}

body.dark-mode .event div,
body.dark-mode .performance div {
    border-color: var(--very-dark-gray);
    color: #fefefe;
}

body.dark-mode .time {
    background-color: #2e242e;
    border-color: #ccc;
    color: #eee;
}

body.dark-mode .time-grid.head div {
    background-color: #a555a5;
}

body.dark-mode .time-grid.head div span {
    color: #eee;
}

body.dark-mode a.detail {
    border-color: #eee;
    color: #eee;
}

body.dark-mode a.detail:hover {
    border-color: #eee;
    color: #eee;
}

body.dark-mode .event_detail {
    border: 0.2em solid #a555a5;
    background-color: #272427;
    box-shadow: 0 0.2em 0.4em rgba(212, 212, 212, 0.4);
}

body.dark-mode .event_detail__close_button {
    background-color: #443f44;
}

body.dark-mode .event_detail__label {
    color: #eee;
}

@media screen and (orientation: landscape) {
    body.dark-mode .time-grid {
        border-right-color: #ddd;
    }

    body.dark-mode .time-grid div::after {
        background-color: #a555a5;
    }

    body.dark-mode .time-grid.just {
        border-left-color: #d37dd3;
    }

    body.dark-mode .time-grid.head {
        border-right-color: #d37dd3;
    }

    body.dark-mode .time-grid.head.just {
        border-left-color: #d37dd3;
    }
}

@media screen and (orientation: portrait) {
    body.dark-mode .time-grid {
        border-bottom-color: #d37dd3;
    }

    body.dark-mode .time-grid div::after {
        background-color: #a555a5;
    }

    body.dark-mode .time-grid.just {
        border-top-color: #d37dd3;
    }
}

@media only screen and (min-width: 3840px) {
    button#full-screen {
        font-size: 100%;
    }
}