/* --------------------------------------------------
   File: site.troubles-core.css
   担当:
   - お悩みタイルの基本レイアウト
   - タイル内SVGの基本見た目
   - お悩みモーダルの基本UI
-------------------------------------------------- */


    .trouble-tile__viz {
      position: relative;
      z-index: 0;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      place-content: center;
      width: 82%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 1 / 1;
      min-width: 0;
      min-height: 0;
      box-sizing: border-box;
      padding: clamp(5px, 1.25vw, 10px);
      background: #ffffff;
      border: 1px solid color-mix(in srgb, var(--header-text) 18%, var(--line));
      border-radius: var(--radius);
      overflow: visible;
      pointer-events: none;
      opacity: 1;
      box-shadow: var(--shadow-header);
      transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        opacity 0.16s ease,
        box-shadow 0.2s ease;
    }

    /* gridpaper1（::after） */
    .trouble-tile__viz::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background-image: url("../mainpage/gridpaper1.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: var(--gridpaper-layer-opacity);
      pointer-events: none;
    }

    /* リムライトは drop-shadow の 0 ぼかしで縁に明るい線分を重ねる。SVG は gridpaper より前面 */
    /* max-height に % を使わない（親の高さが循環参照になり 0 になるブラウザがある） */
    .trouble-tile__viz svg {
      position: relative;
      z-index: 1;
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      /* 当初 158×136 と直近 126×108 の中間 */
      max-width: 142px;
      max-height: 122px;
      margin: 0 auto;
      flex-shrink: 0;
      transform: none;
      filter:
        drop-shadow(0.32px 0.34px 0 rgba(255, 255, 255, 0.78))
        drop-shadow(-0.28px -0.32px 0 rgba(255, 255, 255, 0.52))
        drop-shadow(0.26px -0.22px 0 rgba(255, 255, 255, 0.28))
        drop-shadow(0.45px 0.5px 0.65px rgba(0, 0, 0, 0.09));
    }

    /* ノートPCイラスト：視覚重心がやや上に寄るため SVG だけわずかに下げる */
    .trouble-tile--laptop .trouble-tile__viz svg {
      transform: translateY(4px);
    }

    .trouble-tile__viz svg path,
    .trouble-tile__viz svg line,
    .trouble-tile__viz svg polyline,
    .trouble-tile__viz svg polygon {
      stroke-width: 0.3 !important;
    }

    .trouble-tile__viz svg rect,
    .trouble-tile__viz svg circle,
    .trouble-tile__viz svg ellipse {
      stroke-width: 0.3 !important;
    }

    .trouble-tile__viz svg .tt-kb-keys rect,
    .trouble-tile__viz svg .tt-kb-sockets rect {
      stroke: none !important;
    }

    .trouble-tile__viz svg .tt-fan-frame,
    .trouble-tile__viz svg .tt-fan-hole-fill,
    .trouble-tile__viz svg .tt-fan-blades path,
    .trouble-tile__viz svg .tt-fan-hub,
    .trouble-tile__viz svg .tt-fan-mounts circle {
      stroke: none !important;
    }

    /* 電源が入らない：はみ出す装飾を見せる */
    #trouble-tile-7 .trouble-tile__viz svg {
      overflow: visible;
    }

    /* 自動修復まわりのローディング風：太めのアーク（グローバル circle 上書きより優先） */
    .trouble-tile__viz svg .tt-err-spin circle {
      stroke-width: 1.42 !important;
    }

    .trouble-tile__viz svg .tt-net-no-badge-bg {
      fill: #ffffff !important;
      stroke: none !important;
    }

    .trouble-tile__viz svg .tt-net-no-overlay circle {
      stroke-width: 0.5 !important;
    }

    .trouble-tile__viz svg .tt-net-no-overlay line {
      stroke-width: 0.38 !important;
      stroke-linecap: butt !important;
      shape-rendering: crispEdges;
    }

    /* データ取り出しタイル：HDD（白円盤＋三角形ヘッド。グローバル stroke-width を上書き） */
    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-platter-disk {
      fill: #ffffff !important;
      stroke-width: 0.44 !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-chassis {
      fill: #1d1d1f !important;
      stroke: #1d1d1f !important;
      stroke-width: 0.42 !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-gloss {
      stroke-width: 0.84 !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-screw {
      fill: #ffffff !important;
      stroke: none !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-platter-hub {
      stroke-width: 0.3 !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-head {
      stroke-width: 0.24 !important;
    }

    .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-head-anim {
      transform-origin: 0 0;
      animation: ttHddHeadClick 0.85s linear infinite;
    }

    /* 振れ幅 ±10°、中心 30°（時計回りにずらした分）。軸は transform-origin のまま */
    @keyframes ttHddHeadClick {
      0%, 49.5% {
        transform: rotate(20deg);
      }

      50.5%, 100% {
        transform: rotate(40deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .trouble-tile__viz svg .tt-hdd-platter .tt-hdd-head-anim {
        animation: none;
        transform: rotate(30deg);
      }
    }

    .trouble-tile__viz svg .tt-laptop-screen-crack .tt-laptop-base {
      stroke: none !important;
    }

    /* 画面割れタイル：ミニマルノートシルエット（枠は細め） */
    .trouble-tile__viz svg .tt-laptop-screen-crack .tt-laptop-lid {
      stroke-width: 0.58 !important;
    }

    .trouble-tile__viz svg .tt-laptop-screen-crack .tt-crack-g path {
      stroke-width: 0.28 !important;
    }

    .trouble-tile__viz svg .tt-laptop-screen-crack .tt-crack-g path.tt-crack-main {
      stroke-width: 0.38 !important;
    }

    /* 画面割れタイル：黒ベースの画面＋白いジグザグひび */
    .trouble-tile__viz svg .tt-laptop-screen-crack--dark .tt-laptop-lid {
      fill: #070709 !important;
      stroke: #2e2e38 !important;
    }

    .trouble-tile__viz svg .tt-laptop-screen-crack--dark .tt-crack-g path {
      stroke: #f2f2f6 !important;
      stroke-width: 0.34 !important;
    }

    .trouble-tile__viz svg .tt-laptop-screen-crack--dark .tt-crack-g path.tt-crack-main {
      stroke-width: 0.44 !important;
    }

    .trouble-tile__viz svg .tt-laptop--spill .tt-spill-puddle-g path {
      stroke: none !important;
    }

    .trouble-tile__viz svg .tt-laptop--spill .tt-spill-blob {
      transform-origin: center;
      transform-box: fill-box;
      animation: ttSpillDropAppear 3.5s ease-in-out infinite;
    }

    .trouble-tile__viz svg .tt-laptop--spill .tt-laptop-lid {
      animation: ttSpillScreenBlackout 3.5s steps(1, end) infinite;
    }

    .trouble-tile__viz svg .tt-laptop--hinge .tt-hinge-screen-lurch {
      transform-origin: 0 0;
      animation: ttHingeScreenLurch 2.65s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    }

    .trouble-tile__viz svg .tt-laptop--hinge .tt-hinge-screen-shake {
      transform-origin: 0 0;
      animation: ttHingeScreenShake 0.38s linear infinite;
      filter: drop-shadow(0 0 0.3px rgba(0, 0, 0, 0.22));
    }

    .trouble-tile__viz svg .tt-laptop--hinge .tt-hinge-impact .tt-hinge-impact-burst {
      fill: #ff1414 !important;
      stroke: none !important;
      stroke-width: 0 !important;
      stroke-linejoin: round !important;
      transform-box: fill-box;
      transform-origin: center;
      animation: ttHingeImpactMicroPulse 0.72s ease-in-out infinite;
    }

    .trouble-tile__viz svg .tt-laptop--hinge .tt-hinge-impact {
      animation: none !important;
      opacity: 1 !important;
    }

    @keyframes ttHingeImpactMicroPulse {
      0%, 100% {
        transform: scale(1);
      }

      25% {
        transform: scale(1.2);
      }

      55% {
        transform: scale(0.82);
      }

      78% {
        transform: scale(1.14);
      }
    }

    @keyframes ttSpillDropAppear {
      0%, 8%, 100% {
        opacity: 0;
        transform: scale(0.82);
      }

      12% {
        opacity: 0.95;
        transform: scale(1.02);
      }

      22% {
        opacity: 0.88;
        transform: scale(1.04);
      }

      36% {
        opacity: 0.55;
        transform: scale(1.02);
      }

      52% {
        opacity: 0.2;
        transform: scale(1.05);
      }
    }

    @keyframes ttSpillScreenBlackout {
      0%, 12% {
        fill: #ffffff;
        stroke: #1d1d1f;
      }

      18% {
        fill: #0b0b0d;
        stroke: #0b0b0d;
      }

      23% {
        fill: #f8f8fa;
        stroke: #1d1d1f;
      }

      28% {
        fill: #060608;
        stroke: #060608;
      }

      33% {
        fill: #ececf1;
        stroke: #1d1d1f;
      }

      38%, 100% {
        fill: #000000;
        stroke: #000000;
      }
    }

    /* 外側：たまに画面全体が右上へ大きくガクッ（ヒンジタイル） */
    @keyframes ttHingeScreenLurch {
      0%, 68%, 100% {
        transform: translate(0, 0) rotate(0deg);
      }
      /* 踏み込み */
      73% {
        transform: translate(0.35px, -0.45px) rotate(0.35deg);
      }
      /* ピーク：右上へ */
      77% {
        transform: translate(2.35px, -3.1px) rotate(2.6deg);
      }
      79% {
        transform: translate(2.45px, -3.15px) rotate(2.65deg);
      }
      /* 戻り＋わずかにオーバーシュート */
      84% {
        transform: translate(0.5px, -0.6px) rotate(0.45deg);
      }
      88% {
        transform: translate(-0.15px, 0.12px) rotate(-0.15deg);
      }
      92% {
        transform: translate(0, 0) rotate(0deg);
      }
    }

    /* 下辺中央を軸に、主に上方向へ小刻みに揺れる（ヒンジタイル・内側） */
    @keyframes ttHingeScreenShake {
      0% {
        transform: translate(0, -0.55px) rotate(-1.1deg);
      }
      12% {
        transform: translate(0.2px, -1.15px) rotate(0.85deg);
      }
      28% {
        transform: translate(-0.25px, -0.45px) rotate(-0.65deg);
      }
      44% {
        transform: translate(0.15px, -1.35px) rotate(1deg);
      }
      58% {
        transform: translate(-0.18px, -0.7px) rotate(-0.9deg);
      }
      74% {
        transform: translate(0.22px, -1.05px) rotate(0.55deg);
      }
      88% {
        transform: translate(-0.12px, -0.5px) rotate(-0.5deg);
      }
      100% {
        transform: translate(0, -0.55px) rotate(-1.1deg);
      }
    }

    .trouble-tile__label {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      align-content: center;
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      min-height: 0;
      margin: 0;
      padding: 0 2px 2px;
      line-height: 1.3;
      word-break: keep-all;
      overflow-wrap: anywhere;
      line-break: strict;
      gap: 0;
      text-align: center;
      font-size: calc(clamp(0.62rem, 1.95vw, 0.72rem) + 2px);
    }

    .trouble-tile__label-line {
      display: block;
      max-width: 100%;
      word-break: keep-all;
      overflow-wrap: anywhere;
      line-break: strict;
    }

    /* カルーセル：ラベルは1行・列幅に応じて文字サイズを自動調整 */
    .troubles-carousel .trouble-tile {
      container-type: inline-size;
    }

    .troubles-carousel .trouble-tile__label {
      flex-wrap: nowrap;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      padding: 0;
      font-size: clamp(0.5rem, 10cqi, 0.8rem);
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    /* 列幅ごとに上限を上げ、改行直前ギリギリまで拡大 */
    @container (min-width: 132px) {
      .troubles-carousel .trouble-tile__label {
        font-size: clamp(0.52rem, 10.4cqi, 0.84rem);
      }
    }

    @container (min-width: 158px) {
      .troubles-carousel .trouble-tile__label {
        font-size: clamp(0.54rem, 10.8cqi, 0.88rem);
      }
    }

    @container (min-width: 182px) {
      .troubles-carousel .trouble-tile__label {
        font-size: clamp(0.56rem, 11.1cqi, 0.92rem);
      }
    }

    .troubles-carousel .trouble-tile__label-line {
      display: inline;
      white-space: nowrap;
      overflow-wrap: normal;
      word-break: keep-all;
    }

    /* --- タイルSVGアニメーション（モノクロ＋控えめな動き） --- */
    .tt-crack-g {
      animation: ttCrackFlash 2.8s ease-in-out infinite;
      transform-origin: 24px 15.2px;
      filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.2));
    }

    .tt-laptop-screen-crack--dark .tt-crack-g {
      animation: ttCrackFlashDark 1s linear infinite;
      transform-origin: 24px 15.2px;
      filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.35));
      opacity: 1;
    }

    @keyframes ttCrackFlash {
      0%, 38%, 100% {
        opacity: 0.22;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
      }
      40% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 9px rgba(0, 0, 0, 0.2));
      }
      41% { opacity: 0.35; }
      41.8% { opacity: 1; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.42)); }
      42.6% { opacity: 0.4; }
      43.5% { opacity: 1; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.32)); }
      46% { opacity: 0.25; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
      72% { opacity: 0.22; }
      74% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.18));
      }
      75% { opacity: 0.45; }
      76.2% { opacity: 1; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.38)); }
      79% { opacity: 0.28; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
    }

    @keyframes ttCrackFlashDark {
      0%, 4% {
        opacity: 1;
        filter:
          drop-shadow(0 0 0.5px rgba(255, 255, 255, 1))
          drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.45))
          drop-shadow(0 0 26px rgba(255, 255, 255, 0.22));
      }

      14%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.35));
      }
    }

    @keyframes ttCrackSpreadTrail {
      0% {
        stroke-dashoffset: var(--tt-crack-len, 20);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      45% {
        stroke-dashoffset: 0;
        opacity: 1;
      }
      75% {
        stroke-dashoffset: 0;
        opacity: 0.95;
      }
      100% {
        stroke-dashoffset: 0;
        opacity: 0;
      }
    }

    @keyframes ttCrackNoisePhase {
      0%, 63% {
        opacity: 0;
      }
      64%, 86% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    @keyframes ttCrackFlashAfterSpread {
      0%, 62%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.35));
      }
      66% {
        opacity: 1;
        filter:
          drop-shadow(0 0 0.7px rgba(255, 255, 255, 1))
          drop-shadow(0 0 4px rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
      }
      74% {
        opacity: 1;
        filter: drop-shadow(0 0 1.1px rgba(255, 255, 255, 0.55));
      }
    }

    @keyframes ttCrackNoiseJitter {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-0.45px); }
      50% { transform: translateX(0.6px); }
      75% { transform: translateX(-0.3px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .tt-laptop-screen-crack--dark .tt-crack-g {
        animation: none;
        filter: none;
        opacity: 1;
      }
    }

    .trouble-tile__viz svg .tt-bat-seg {
      stroke: none !important;
    }

    /* 初期3ゲージ点灯 → 点滅 → 1個ずつ減少 */
    .trouble-tile__viz svg .tt-bat-segments .tt-bat-seg {
      opacity: 0;
      animation: ttBatSegOff 1.1s linear infinite !important;
    }

    .trouble-tile__viz svg .tt-bat-segments .tt-bat-seg:nth-child(8) {
      animation: ttBatSegDrain3 1.1s linear infinite !important;
    }

    .trouble-tile__viz svg .tt-bat-segments .tt-bat-seg:nth-child(9) {
      animation: ttBatSegDrain2 1.1s linear infinite !important;
    }

    .trouble-tile__viz svg .tt-bat-segments .tt-bat-seg:nth-child(10) {
      animation: ttBatSegDrain1 1.1s linear infinite !important;
    }

    .trouble-tile__viz svg .tt-bat-shell {
      stroke-width: 1 !important;
    }

    .trouble-tile__viz svg .tt-bat-nub {
      stroke-width: 0.45 !important;
    }

    @keyframes ttBatSegOff {
      0%, 100% {
        opacity: 0;
      }
    }

    @keyframes ttBatSegDrain3 {
      0%, 14% { opacity: 1; }   /* 初期3ゲージ */
      15%, 19% { opacity: 0; }  /* 点滅 */
      20%, 24% { opacity: 1; }
      25%, 29% { opacity: 0; }
      30%, 34% { opacity: 1; }
      45%, 58% { opacity: 1; }
      59%, 100% { opacity: 0; } /* 3→2 */
    }

    @keyframes ttBatSegDrain2 {
      0%, 14% { opacity: 1; }   /* 初期3ゲージ */
      15%, 19% { opacity: 0; }  /* 点滅 */
      20%, 24% { opacity: 1; }
      25%, 29% { opacity: 0; }
      30%, 34% { opacity: 1; }
      45%, 72% { opacity: 1; }
      73%, 100% { opacity: 0; } /* 2→1 */
    }

    @keyframes ttBatSegDrain1 {
      0%, 14% { opacity: 1; }   /* 初期3ゲージ */
      15%, 19% { opacity: 0; }  /* 点滅 */
      20%, 24% { opacity: 1; }
      25%, 29% { opacity: 0; }
      30%, 34% { opacity: 1; }
      45%, 86% { opacity: 1; }
      87%, 100% { opacity: 0; } /* 1→0 */
    }