.guitargame-layer {
/* File: css/guitar-and-modal.css
   Purpose: Styles for guitar minigame and modal panels.
*/
      position: absolute;
      left: var(--minigame-left);
      right: var(--minigame-right);
      top: var(--minigame-top);
      bottom: var(--minigame-bottom);
      z-index: 9;
      display: none;
      border: 2px solid #ffffffa0;
      background:
        radial-gradient(circle at 84% 10%, #61d7ff30 0%, transparent 44%),
        radial-gradient(circle at 16% 0%, #ff85612b 0%, transparent 40%),
        linear-gradient(180deg, #070a0fdc 0%, #0d0d0de8 100%);
      clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      padding: var(--minigame-padding);
      overflow: hidden;
    }

    .guitargame-layer::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(118deg, transparent 0 40%, #ffffff14 50%, transparent 60%),
        repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 34px);
      opacity: 0.3;
      z-index: 0;
    }

    .guitargame-layer.active {
      display: block;
    }

    .chase-head {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .chase-canvas {
      position: relative;
      z-index: 1;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: calc(100% - 98px);
      margin: 0 auto;
      border: 2px solid #ffffff66;
      background: linear-gradient(180deg, #1f2738 0%, #171a25 62%, #0a0a0a 100%);
      display: block;
      touch-action: none;
      box-shadow: inset 0 0 0 1px #ffffff33, inset 0 -24px 40px #00000078;
    }

    .chase-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .guitar-brief {
      position: absolute;
      inset: 56px 18px 62px;
      z-index: 6;
      display: none;
      color: #f9fbff;
      padding: 18px 18px 14px;
      clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
      background:
        linear-gradient(122deg, #ef174f 0 14%, transparent 14% 100%),
        linear-gradient(165deg, #06090df2 0%, #0d1119f4 52%, #131722f4 100%);
      border: 2px solid #f2f6ffcc;
      box-shadow: 0 0 0 2px #09111d inset, 0 14px 34px #0000006f;
      /* 縦に収まらない場合はクリップせずスクロールさせ、下部の説明やボタンが
         切れないようにする（全画面や縦の低い端末向けの保険）。 */
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .guitar-brief.show {
      display: block;
      animation: briefEnter 340ms cubic-bezier(0.18, 0.88, 0.32, 1);
    }

    .guitar-brief::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(-24deg, #ffffff14 0 2px, transparent 2px 22px),
        linear-gradient(90deg, transparent 0 56%, #ff5b7b22 56% 100%);
      opacity: 0.58;
    }

    .guitar-brief-deco {
      position: absolute;
      right: -46px;
      top: 8px;
      width: 182px;
      height: 28px;
      transform: rotate(-18deg);
      background: linear-gradient(90deg, #ffd247 0%, #ff5a77 100%);
      box-shadow: 0 0 0 2px #00000066;
      opacity: 0.92;
    }

    .guitar-brief-title {
      position: relative;
      z-index: 1;
      margin: 0 0 12px;
      color: #ffffff;
      font-size: clamp(1.06rem, 2.2vw, 1.48rem);
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000, 2px 2px 0 #e11c4e;
    }

    .guitar-brief-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      /* ワイドディスプレイでカードが横に伸びすぎないよう中央寄せの列にする。 */
      max-width: 880px;
      margin: 0 auto 12px;
    }

    .guitar-brief-card {
      background: linear-gradient(180deg, #ffffff17 0%, #ffffff08 100%);
      border: 1px solid #ffffff55;
      padding: 10px 10px 9px;
      min-height: 90px;
      clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    }

    .guitar-brief-label {
      margin-bottom: 6px;
      color: #ffd54a;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000, 0 0 8px #ffcf4a4a;
    }

    .guitar-brief-card p {
      margin: 0;
      color: #f2f8ff;
      line-height: 1.45;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .guitar-brief-card.attention-card {
      grid-column: 1 / -1;
    }

    .guitar-brief-preview {
      width: 100%;
      /* 障害物プレビューは 640x120 の固定比率。max-width を付けないと
         全画面など横幅の広い画面で高さが数百pxに肥大化し、パネル下部の
         説明文やボタンが画面外に押し出されてしまう。 */
      max-width: 640px;
      height: auto;
      display: block;
      margin: 2px auto 8px;
      border: 1px solid #ffffff5e;
      background: linear-gradient(180deg, #1f2738 0%, #171a25 62%, #0a0a0a 100%);
      box-shadow: inset 0 0 0 1px #ffffff2c;
    }

    .guitar-brief-start {
      position: relative;
      z-index: 1;
      display: block;
      min-width: 210px;
      margin: 0 auto;
      background: linear-gradient(90deg, #ff2f63 0%, #ff5d41 100%);
      color: #ffffff;
      border-color: #fff;
      box-shadow: 0 0 0 2px #0000005c;
      font-weight: 900;
      letter-spacing: 0.09em;
      transform: skew(-8deg);
    }

    .guitar-brief-start:hover {
      filter: brightness(1.08) saturate(1.1);
      transform: skew(-8deg) translateY(-1px);
    }

    .guitar-brief-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: min(460px, 100%);
      margin: 0 auto;
    }

    .guitar-brief-actions .choice-btn {
      width: 100%;
      margin: 0;
      text-align: center;
      transform: skew(-8deg);
    }

    .guitar-brief-actions .choice-btn:hover,
    .guitar-brief-actions .choice-btn:focus-visible {
      transform: skew(-8deg) translateY(-1px);
    }

    .guitar-brief-tutorial {
      min-width: 170px;
      background: linear-gradient(90deg, #2f8dff 0%, #36b6d9 100%);
      border-color: #fff;
      box-shadow: 0 0 0 2px #0000005c;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    #guitarTutorialEndBtn {
      background: linear-gradient(90deg, #2b323d 0%, #454e5d 100%);
      border-color: #fff;
      box-shadow: 0 0 0 2px #0000005c;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    @keyframes briefEnter {
      from { opacity: 0; transform: translateY(8px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes shakeScene {
      0% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(7px); }
      60% { transform: translateX(-5px); }
      80% { transform: translateX(4px); }
      100% { transform: translateX(0); }
    }

    .howto {
      position: absolute;
      inset: 12vh 10vw;
      border: 3px solid #fff;
      background: #0d0d0df2;
      padding: 22px;
      clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
      z-index: 20;
      display: none;
    }

    .howto.show { display: block; }

    .howto h2 {
      margin: 0 0 12px;
      color: var(--red-bright);
      font-weight: 900;
      letter-spacing: 0.08em;
      font-size: clamp(1.5rem, 4vw, 2.4rem);
    }

    .howto p { margin: 8px 0; line-height: 1.6; }