/* ===========================================
   tomoy-apps-common.css — TOMOY Game App Styles

   Section 1: 共通（全10アプリ共通のゲームUI）
   Section 2: apps版固有（広告あり版専用CSS）
              forge/ がロードしても未使用のため視覚的影響なし
=========================================== */

/* ===== Section 1: 共通 ===== */

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      margin: 0;
      padding: 0;
      touch-action: manipulation;
    }

    html {
      height: 100%;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #1a1a2e;
      min-height: 100dvh;
      overflow-y: auto;
    }

    .game-screen {
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      -webkit-user-select: none;
      user-select: none;
    }

    .app-wrapper {
      width: 100%;
      max-width: 480px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      padding-top: env(safe-area-inset-top, 0px);
      min-height: 0;
    }

    .content-scroll {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
    }

    /* ===== AD BANNER ===== */
    .support-btn {
      background: #f0f0f0;
      display: block;
      width: 100%;
      height: 60px;
      overflow: hidden;
      text-align: center;
      font-size: 12px;
      color: #999;
    }

    .app-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      text-align: center;
      padding: 6px 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: auto;
    }

    .app-footer a {
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none;
      font-size: 10px;
      letter-spacing: 0.5px;
    }

    .app-footer a:hover {
      color: rgba(255, 255, 255, 0.6);
    }

    .app-footer-sep {
      color: rgba(255, 255, 255, 0.2);
      font-size: 10px;
      user-select: none;
    }

    .support-area {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .support-label {
      display: block;
      text-align: center;
      font-size: 8px;
      color: rgba(255, 255, 255, 0.3);
      padding: 3px 0 1px;
      letter-spacing: 0.5px;
    }

    /* ===== HEADER ===== */
    .header {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      padding: 8px 16px;
      padding-top: max(8px, env(safe-area-inset-top, 8px));
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 1px;
      max-width: calc(100% - 88px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .header-home-btn,
    .help-btn,
    .settings-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 0;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      flex-shrink: 0;
    }

    .header-home-btn:hover,
    .help-btn:hover,
    .settings-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .header-home-btn:active,
    .help-btn:active,
    .settings-btn:active {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0.95);
    }

    /* ===== SETTINGS PANEL ===== */
    .settings-panel {
      display: none;
      background: rgba(255, 255, 255, 0.95);
      margin: 12px;
      padding: 20px;
      border-radius: 16px;
      animation: slideDown 0.3s ease;
    }

    .settings-panel.show {
      display: block;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .settings-title {
      font-size: 18px;
      color: #1a1a2e;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .setting-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
    }

    .setting-label {
      font-size: 15px;
      color: #333;
      font-weight: 500;
    }

    .setting-select {
      font-size: 15px;
      padding: 8px 16px;
      border-radius: 10px;
      border: 2px solid #1a1a2e;
      background: white;
      color: #1a1a2e;
      font-weight: 500;
      cursor: pointer;
    }

    .toggle-btn {
      padding: 10px 24px;
      font-size: 14px;
      border: none;
      border-radius: 24px;
      color: white;
      cursor: pointer;
      font-weight: 700;
      transition: all 0.2s ease;
    }

    .toggle-btn.on {
      background: linear-gradient(135deg, #00b894, #00cec9);
    }

    .toggle-btn.off {
      background: #95a5a6;
    }

    .toggle-btn:hover {
      transform: scale(1.05);
    }

    .save-btn {
      width: 100%;
      padding: 14px;
      font-size: 16px;
      background: linear-gradient(135deg, #1a1a2e, #0f3460);
      color: white;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      margin-top: 4px;
      transition: all 0.2s ease;
    }

    .save-btn:hover {
      transform: scale(1.02);
    }

    .reset-btn {
      width: 100%;
      padding: 12px;
      font-size: 14px;
      background: transparent;
      color: #e74c3c;
      border: 1px solid #e74c3c;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 600;
      margin-top: 12px;
      transition: all 0.2s ease;
    }

    .reset-btn:hover {
      background: #e74c3c;
      color: white;
    }

    /* ===== SCORE BOARD ===== */
    .score-board {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 4px 10px;
      margin: 4px 10px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .score-item {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 10px;
    }

    .score-item + .score-item {
      border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    .score-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .score-value {
      font-family: 'Space Mono', monospace;
      font-size: 15px;
      font-weight: 700;
      background: linear-gradient(135deg, #74b9ff, #a29bfe);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ===== MAIN AREA ===== */
    .main-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 4px 10px;
      justify-content: center;
      overflow-y: auto;
      min-height: 0;
    }

    .screen {
      display: none;
      width: 100%;
      grid-template-columns: 100%;
      place-items: center;
      text-align: center;
      font-size: 0;
      /* 改行や空白による 1px 押し出しを防止 */
      animation: fadeIn 0.4s ease;
    }

    .screen > * {
      font-size: initial;
      /* 子要素でフォントサイズを復元 */
    }

    .screen.active {
      display: grid;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* ===== READY SCREEN ===== */
    .instruction {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .start-btn {
      padding: 16px 48px;
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, #00b894, #00cec9);
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(0, 184, 148, 0.4);
      letter-spacing: 3px;
      transition: all 0.2s ease;
    }

    .start-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0, 184, 148, 0.5);
    }

    .start-btn:active {
      transform: scale(0.95);
    }

    /* ===== SHOW DIGITS SCREEN ===== */
    .screen > .progress-ring {
      width: 100%;
      display: flex;
      justify-content: center;
      overflow: visible;
      height: 64px;
      margin-bottom: 12px;
      min-height: 0;
      position: relative;
    }

    .progress-ring svg {
      display: block;
      margin: 0 auto;
      transform: rotate(-90deg);
      width: 64px;
      height: 64px;
      box-sizing: content-box;
      -webkit-transform: rotate(-90deg) translateZ(0);
      /* レンダリング層を独立させ安定化 */
    }

    .progress-ring-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 6;
    }

    .progress-text {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
      font-family: 'Space Mono', monospace;
      font-size: 16px;
      color: #fff;
      font-weight: 700;
    }

    /* CSS transition for progress ring */
    .progress-ring-fill {
      fill: none;
      stroke: #00cec9;
      stroke-width: 6;
      stroke-linecap: round;
      transition: stroke-dashoffset linear;
    }

    /* ===== DIGITS DISPLAY — CSS-driven sizing (no JS layout) ===== */
    .digits-display {
      display: flex;
      gap: 5px;
      margin-bottom: 14px;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      overflow: hidden;
      width: 100%;
      min-height: 0;
      /* Enable container queries so children can size via cqi units */
      container-type: inline-size;
    }

    .digit {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      min-width: 0;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: digitPop 0.3s ease forwards;
      opacity: 0;
      /* Flexbox + clamp sizing — replaces JS updateBoxSizes() for digits */
      flex: 1 1 0;
      max-width: 40px;
      width: min(40px, (100cqi - (var(--n, 3) - 1) * 5px) / var(--n, 3));
      font-size: clamp(12px, min(40px, (100cqi - (var(--n, 3) - 1) * 5px) / var(--n, 3)) * 0.7, 28px);
      padding-block: 8px;
      padding-inline: clamp(2px, min(40px, (100cqi - (var(--n, 3) - 1) * 5px) / var(--n, 3)) * 0.25, 10px);
    }

    @keyframes digitPop {
      from {
        opacity: 0;
        transform: scale(0.5);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .hint {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 0.6;
      }

      50% {
        opacity: 1;
      }
    }

    /* ===== INPUT SCREEN ===== */
    .input-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .input-display {
      display: flex;
      gap: 3px;
      margin-bottom: 10px;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      overflow: hidden;
      width: 100%;
      /* Enable container queries so children can size via cqi units */
      container-type: inline-size;
    }

    .input-box {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 6px;
      border: 2px solid rgba(100, 200, 255, 0.5);
      min-width: 0;
      text-align: center;
      transition: background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
      /* Flexbox + clamp sizing — replaces JS updateBoxSizes() for input */
      flex: 1 1 0;
      max-width: 32px;
      width: min(32px, (100cqi - (var(--n, 3) - 1) * 3px) / var(--n, 3));
      font-size: clamp(12px, min(32px, (100cqi - (var(--n, 3) - 1) * 3px) / var(--n, 3)) * 0.625, 20px);
      padding: 5px clamp(2px, min(32px, (100cqi - (var(--n, 3) - 1) * 3px) / var(--n, 3)) * 0.25, 8px);
    }

    .input-box.filled {
      background: rgba(100, 200, 255, 0.2);
      border-color: #74b9ff;
      box-shadow: 0 0 12px rgba(100, 200, 255, 0.3);
    }

    .numpad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(4px, 1.5vh, 12px);
      margin-bottom: clamp(6px, 2vh, 12px);
      max-width: clamp(180px, min(55vw, 26vh), 240px);
      width: 100%;
      margin-inline: auto;
    }

    .num-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1.3 / 1;
      padding: 0;
      font-family: 'Space Mono', monospace;
      font-size: clamp(16px, min(3vh, 6vw), 28px);
      font-weight: 700;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .num-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .num-btn:active {
      transform: scale(0.92);
      background: rgba(255, 255, 255, 0.3);
    }

    .num-btn.action {
      background: rgba(255, 107, 107, 0.3);
      border-color: rgba(255, 107, 107, 0.5);
    }

    .num-btn.action:hover {
      background: rgba(255, 107, 107, 0.4);
    }

    .ok-btn {
      padding: 9px 32px;
      font-size: 15px;
      font-weight: 700;
      background: linear-gradient(135deg, #74b9ff, #a29bfe);
      color: #1a1a2e;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      letter-spacing: 1px;
      transition: all 0.2s ease;
    }

    .ok-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .ok-btn:hover:not(:disabled) {
      transform: scale(1.05);
    }

    .ok-btn:active:not(:disabled) {
      transform: scale(0.95);
    }

    .input-buttons {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .giveup-btn {
      padding: 9px 20px;
      font-size: 11px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 30px;
      cursor: pointer;
      letter-spacing: 1px;
      transition: all 0.2s ease;
    }

    .giveup-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: white;
    }

    .giveup-btn:active {
      transform: scale(0.95);
    }

    /* ===== RESULT SCREEN ===== */
    .result-banner {
      padding: clamp(8px, 2vh, 14px) clamp(16px, 4vw, 24px);
      border-radius: 12px;
      color: white;
      font-size: clamp(18px, min(4vh, 6vw), 24px);
      font-weight: 700;
      margin-bottom: clamp(8px, 2vh, 12px);
      letter-spacing: 1px;
      animation: bounceIn 0.5s ease;
    }

    @keyframes bounceIn {
      0% {
        transform: scale(0.3);
        opacity: 0;
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .result-banner.correct {
      background: linear-gradient(135deg, #00b894, #00cec9);
      box-shadow: 0 6px 20px rgba(0, 184, 148, 0.5);
    }

    .result-banner.incorrect {
      background: linear-gradient(135deg, #e74c3c, #fd79a8);
      box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
    }

    .result-detail {
      background: rgba(255, 255, 255, 0.1);
      padding: clamp(10px, 2.5vh, 16px);
      border-radius: 10px;
      margin-bottom: clamp(6px, 2vh, 10px);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      max-width: min(95vw, 420px);
    }

    .result-text {
      font-size: clamp(12px, min(2.5vh, 4vw), 14px);
      color: rgba(255, 255, 255, 0.9);
      margin: clamp(2px, 0.5vh, 4px) 0;
      white-space: nowrap;
    }

    .result-text span {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      color: #74b9ff;
    }

    .result-stats {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      margin-bottom: 10px;
    }

    .result-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .next-btn {
      padding: 10px 28px;
      font-size: 13px;
      font-weight: 700;
      background: linear-gradient(135deg, #00b894, #00cec9);
      color: white;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .restart-btn {
      padding: 10px 28px;
      font-size: 13px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .next-btn:hover,
    .restart-btn:hover {
      transform: scale(1.05);
    }

    .next-btn:active,
    .restart-btn:active {
      transform: scale(0.95);
    }

    /* ===== RULE READY BUTTON ===== */
    /* FD/TD 共通（rule screenの開始ボタン。RD/AD/DR では未使用） */
    .ready-btn {
      padding: 14px 48px;
      font-size: 18px;
      font-weight: 700;
      background: linear-gradient(135deg, #74b9ff, #a29bfe);
      color: #1a1a2e;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      letter-spacing: 3px;
      box-shadow: 0 6px 24px rgba(116, 185, 255, 0.4);
      transition: all 0.2s ease;
    }

    .ready-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(116, 185, 255, 0.5);
    }

    .ready-btn:active {
      transform: scale(0.95);
    }

    /* ===== RESPONSIVE - SMALL SCREENS (iPhone SE, etc.) ===== */
    @media (max-height: 700px) {
      .header {
        padding: 6px 14px;
        padding-top: calc(6px + env(safe-area-inset-top, 0px));
      }

      .title {
        font-size: 14px;
      }

      .header-home-btn,
      .help-btn,
      .settings-btn {
        width: 30px;
        height: 30px;
      }

      .score-board { padding: 2px 6px; margin: 2px 8px; }
      .score-item { padding: 1px 6px; gap: 3px; }
      .score-label { font-size: 9px; }
      .score-value { font-size: 13px; }

      .main-area {
        padding: 4px 6px;
      }

      .instruction {
        font-size: 13px;
        margin-bottom: 14px;
      }

      .start-btn {
        padding: 12px 36px;
        font-size: 18px;
      }

      .progress-ring {
        height: 56px;
        margin-bottom: 16px;
      }

      .progress-text {
        font-size: 14px;
      }

      .hint {
        font-size: 11px;
      }

      .input-label {
        font-size: 12px;
        margin-bottom: 6px;
      }


      .ok-btn {
        padding: 8px 28px;
        font-size: 13px;
      }

      .giveup-btn {
        padding: 8px 16px;
        font-size: 11px;
      }

      .input-buttons {
        gap: 6px;
      }


      .result-stats {
        font-size: 10px;
        margin-bottom: 6px;
      }

      .next-btn,
      .restart-btn {
        padding: 8px 20px;
        font-size: 12px;
      }

      .app-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
        padding: 4px 8px;
      }

      .app-footer a {
        font-size: 9px;
      }

      .support-btn {
        min-height: 50px;
      }

      .support-label {
        padding: 2px 0 1px;
        font-size: 8px;
      }

      .settings-title {
        font-size: 14px;
        margin-bottom: 10px;
      }

      .setting-row {
        margin-bottom: 10px;
        padding-bottom: 8px;
      }

      .setting-label {
        font-size: 13px;
      }

      .save-btn {
        padding: 10px;
        font-size: 14px;
      }

      .reset-btn {
        padding: 9px;
        font-size: 12px;
        margin-top: 8px;
      }

      .ready-btn {
        padding: 10px 32px;
        font-size: 14px;
        letter-spacing: 2px;
      }
    }

    /* ===== RESPONSIVE - TABLET ===== */
    @media (min-width: 600px) and (min-height: 700px) {
      .header {
        padding: 16px 24px;
      }

      .title {
        font-size: 22px;
      }

      .score-board { padding: 8px 16px; margin: 10px 16px; }
      .score-item { padding: 4px 16px; gap: 8px; }
      .score-label { font-size: 14px; }
      .score-value { font-size: 24px; }

      .instruction {
        font-size: 20px;
        margin-bottom: 40px;
      }

      .start-btn {
        padding: 24px 72px;
        font-size: 28px;
      }


    }

    /* ===== RESPONSIVE - DESKTOP ===== */
    @media (min-width: 1024px) {
      body {
        background: #0d0d1a;
      }

      .app-wrapper {
        max-width: 420px;
        margin: 10px auto;
        height: calc(100vh - 20px);
        min-height: auto;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }

      .header {
        padding: 10px 20px;
      }

      .score-board { padding: 4px 8px; margin: 6px 8px; }
      .score-item { padding: 2px 8px; gap: 4px; }
      .score-value { font-size: 16px; }

      .main-area {
        padding: 8px;
        overflow: hidden;
      }

      .instruction {
        font-size: 16px;
        margin-bottom: 20px;
      }

      .start-btn {
        padding: 16px 48px;
        font-size: 22px;
      }

      .input-label {
        font-size: 14px;
        margin-bottom: 8px;
      }


      .ok-btn {
        padding: 10px 40px;
        font-size: 16px;
      }

      .giveup-btn {
        padding: 10px 24px;
        font-size: 12px;
      }


      .result-stats {
        font-size: 12px;
        margin-bottom: 14px;
      }

      .next-btn,
      .restart-btn {
        padding: 10px 32px;
        font-size: 14px;
      }

      .header-home-btn:hover,
      .help-btn:hover,
      .settings-btn:hover {
        transform: scale(1.1);
      }

      .progress-ring {
        height: 70px;
        margin-bottom: 12px;
      }

      .progress-ring svg {
        width: 70px;
        height: 70px;
      }

      .progress-ring-bg,
      .progress-ring-fill {
        cx: 35;
        cy: 35;
        r: 30;
      }

      .progress-text {
        font-size: 18px;
      }

      .hint {
        font-size: 13px;
      }
    }

    /* ===== RESPONSIVE - LARGE DESKTOP ===== */
    @media (min-width: 1440px) {
      .app-wrapper {
        max-width: 460px;
        margin: 20px auto;
        height: calc(100vh - 40px);
      }

      .score-value {
        font-size: 24px;
      }

    }

    /* ===== CONFIRM MODAL ===== */
    .confirm-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 100;
      align-items: center;
      justify-content: center;
    }

    .confirm-overlay.show {
      display: flex;
    }

    .confirm-modal {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      margin: 16px;
      max-width: 320px;
      width: 100%;
      text-align: left;
    }

    .confirm-modal p {
      font-size: 15px;
      color: #1a1a2e;
      margin-bottom: 20px;
      line-height: 1.6;
      font-weight: 500;
    }

    .confirm-modal-buttons {
      display: flex;
      gap: 8px;
    }

    .confirm-cancel-btn {
      flex: 1;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      background: transparent;
      color: #666;
      border: 1px solid #ccc;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .confirm-cancel-btn:hover {
      background: #f5f5f5;
    }

    .confirm-reset-btn {
      flex: 1;
      padding: 12px;
      font-size: 14px;
      font-weight: 700;
      background: #e74c3c;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .confirm-reset-btn:hover {
      background: #c0392b;
    }

    /* ===== HELP MODAL ===== */
    .help-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 100;
      align-items: center;
      justify-content: center;
    }

    .help-overlay.show {
      display: flex;
    }

    .help-modal {
      background: #fff;
      border-radius: 20px;
      padding: 24px;
      margin: 16px;
      max-width: 340px;
      width: 100%;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      text-align: left;
      animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes scaleIn {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .help-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
    }

    .help-title {
      font-size: 20px;
      color: #1a1a2e;
      font-weight: 700;
      margin: 0;
    }

    .help-close-btn {
      background: none;
      border: none;
      color: #666;
      cursor: pointer;
      padding: 4px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .help-close-btn:hover {
      background: #f0f0f0;
      color: #1a1a2e;
    }

    .help-content {
      margin-bottom: 24px;
    }

    .help-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }

    .help-step-num {
      background: linear-gradient(135deg, #74b9ff, #a29bfe);
      color: #1a1a2e;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
    }

    .help-step-text {
      font-size: 15px;
      color: #444;
      line-height: 1.5;
    }

    .help-step-text strong {
      color: #e74c3c;
    }

    .help-example {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      border: 1px solid #e9ecef;
    }

    .help-example-title {
      font-size: 13px;
      font-weight: 700;
      color: #666;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: center;
    }

    .help-example-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .help-example-label {
      font-size: 14px;
      color: #666;
      font-weight: 600;
      width: 50px;
      text-align: right;
    }

    .help-example-boxes {
      display: flex;
      gap: 6px;
    }

    .help-example-box {
      width: 32px;
      height: 32px;
      background: #fff;
      border: 2px solid #ddd;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      font-size: 16px;
      color: #333;
    }

    .help-example-box.target {
      border-color: #74b9ff;
      background: #f0f7ff;
      color: #0f3460;
    }

    .help-example-arrow {
      text-align: center;
      color: #aaa;
      font-size: 18px;
      margin: 8px 0;
      padding-left: 62px;
    }


/* ===== Section 2: apps版固有 ===== */
/* apps/ 5ファイルのみ使用。forge/ では使用しない。 */
/* forge/ がこのファイルをロードしても未使用のため視覚的影響なし。 */

    /* ===== INFO SECTION ===== */
    .info-section {
      max-width: 720px;
      margin: 0 auto;
      padding: 60px 24px 80px;
      font-family: 'Noto Sans JP', 'Inter', sans-serif;
      line-height: 1.8;
    }
    .info-section h2 {
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 32px;
      color: #fff;
    }
    .info-section h3 {
      font-size: 19px;
      font-weight: 600;
      margin: 40px 0 16px;
      color: #74b9ff;
    }
    .info-section p {
      font-size: 15px;
      color: #ccc;
      margin-bottom: 20px;
    }