/* =========================================
   ベース設定
========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(14px, 0.9vw, 18px);
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: "Yu Gothic", "Segoe UI", sans-serif;
    color: #fff;
}

/* 中央配置 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

body.fadeout {
    opacity: 0;
}

/* =========================================
   背景 VR iframe
========================================= */

#tourFrame {
    position: fixed;
    top: -10vh;
    left: -15vw;
    width: 120vw;
    height: 120vh;
    border: none;
    z-index: 0;
    pointer-events: none;
}

/* =========================================
   ボードラッパー（★最重要）
========================================= */

.board-wrapper {
    position: relative;
    padding: 18px;
    background: #f9f9f9;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* 電飾 */
.board-wrapper::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 18px;
    background:
        radial-gradient(circle, #fff 0 35%, transparent 36%) 0 0 / 20px 20px repeat,
        radial-gradient(circle, #ffd95a 0 35%, transparent 36%) 10px 10px / 20px 20px repeat;
    z-index: -1;
}

/* =========================================
   ボード本体
========================================= */

.board {
    background: linear-gradient(135deg, #f8d257, #f3b52c);
    border-radius: 16px;
    padding: 24px 28px 20px;
    position: relative;
    overflow: hidden;

    width: 60vw;
    /* 画面幅の60%に増やす */
    min-width: 400px;
    /* 小型モニターでも潰れすぎない */
    max-width: 1000px;
    /* 大型モニターでも広がりすぎない */
}

/* =========================================
   グリッド
========================================= */

.grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "p1 p2 p3 p4"
        "p5 title title p6"
        "p7 p8 p9 p10";
    gap: 14px;
    align-items: center;
}

/* パネル位置 */
.p01 {
    grid-area: p1;
}

.p02 {
    grid-area: p2;
}

.p03 {
    grid-area: p3;
}

.p04 {
    grid-area: p4;
}

.p05 {
    grid-area: p5;
}

.p06 {
    grid-area: p6;
}

.p07 {
    grid-area: p7;
}

.p08 {
    grid-area: p8;
}

.p09 {
    grid-area: p9;
}

.p10 {
    grid-area: p10;
}

/* =========================================
   タイトル
========================================= */

.title-cell {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

.title-image {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    border-radius: 8px;
}

/* =========================================
   パネル
========================================= */

.panel {
    perspective: 900px;
    cursor: pointer;
}

.panel-inner {
    position: relative;
    width: 100%;
    padding-top: 70%;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
}

.panel-front,
.panel-back {
    font-size: clamp(8px, 1.5vw, 26px); /* 画面幅に応じて自動調整 */
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    position: absolute;
    inset: 0;
    border-radius: 6px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("panel.png") center / cover no-repeat;
}

/* 表 */
.panel-front {
    color: #ffe9a6;
    font-size: clamp(12px, 1.5vw, 26px);
    /* 12px以上、26px以下、画面幅に応じて調整 */
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* 裏 */
.panel-back {
    transform: rotateY(180deg);
    background-color: #d5901e;
    background-blend-mode: multiply;
    color: #fff;
    font-size: clamp(7px, 1.0vw, 26px);
    font-weight: 600;
    padding: 8px;
    text-align: center;
    line-height: 1.4;
}

/* フリップ */
.panel.open .panel-inner {
    transform: rotateY(180deg);
}

.panel.disabled {
    pointer-events: none;
}

/* =========================================
   戻るボタン
========================================= */

#backButton {
    position: fixed;
    left: 35px;
    bottom: 35px;
    z-index: 20;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.85);
    color: #000;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.2s;
}

#backButton:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

#backButton a {
    color: #000;
    text-decoration: none;
}

/* =========================================
レスポンシブデザイン
========================================= */

/* 横幅が短い横持ち端末向け調整 */
@media (max-width: 1000px) and (orientation: landscape) {
    .panel-back {
        font-size: 11px; /* 横持ち専用の固定サイズ */
        line-height: 1.3;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .panel-back {
        font-size: 9px; /* 横持ち専用の固定サイズ */
        line-height: 1.3;
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    .panel-back {
        font-size: 8px; /* 横持ち専用の固定サイズ */
        line-height: 1.3;
    }
}

@media (max-width: 667px) and (orientation: landscape) {
    .panel-back {
        font-size: 7px; /* 横持ち専用の固定サイズ */
        line-height: 1.3;
    }
}

/* スマホでは改行しない */
.pc-only {
  display: none;
}

/* PCサイズ以上で改行を有効化 */
@media screen and (min-width: 1024px) {
  .pc-only {
    display: inline;
  }
}