/* 3級 index.html のスタイルを変更せずにコピー */

    * {
      font-family: 'Zen Maru Gothic', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
      box-sizing: border-box
    }

    body {
      margin: 0;
      padding: 0
    }

    html,
    body {
      height: 100%;
      -webkit-text-size-adjust: 100%
    }

    .game-bg {
      background:
        radial-gradient(ellipse 120px 50px at 12% 22%, rgba(255, 255, 255, .82) 0%, transparent 70%),
        radial-gradient(ellipse 80px 35px at 8% 18%, rgba(255, 255, 255, .7) 0%, transparent 70%),
        radial-gradient(ellipse 140px 55px at 68% 14%, rgba(255, 255, 255, .8) 0%, transparent 70%),
        radial-gradient(ellipse 90px 38px at 63% 10%, rgba(255, 255, 255, .7) 0%, transparent 70%),
        radial-gradient(ellipse 100px 42px at 40% 30%, rgba(255, 255, 255, .65) 0%, transparent 70%),
        linear-gradient(180deg, #1a6fd4 0%, #2e8de8 30%, #5fb3f7 58%, #a8d9f5 72%, #c8eeaf 80%, #7ec850 88%, #5aab2e 100%);
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }

    .game-bg::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: repeating-linear-gradient(90deg, #5aab2e 0px, #5aab2e 47px, #4a9620 47px, #4a9620 48px);
      box-shadow: inset 0 4px 0 0 #7ec850, inset 0 8px 0 0 rgba(255, 255, 255, .15);
      z-index: 0;
    }

    .star {
      position: absolute;
      border-radius: 50%;
      background: #ffe566;
      box-shadow: 0 0 6px 2px #ffe566;
      animation: twinkle 2s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: .3;
        transform: scale(.8)
      }

      50% {
        opacity: 1;
        transform: scale(1.3)
      }
    }

    .custom-scrollbar::-webkit-scrollbar {
      width: 8px
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .18);
      border-radius: 10px
    }

    .stage-card {
      transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
      position: relative;
      overflow: visible;
      justify-content: center;
      gap: .35rem;
      padding: 1.05rem .75rem .9rem;
      min-height: 10.5rem
    }

    .stage-card-label {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
      min-height: 3.6em;
      width: 100%;
      margin-top: .15rem
    }

    .stage-card:hover {
      transform: translateY(-6px) scale(1.03)
    }

    .stage-card:active {
      transform: translateY(3px) scale(.97);
      box-shadow: none !important
    }

    .btn-press {
      transition: transform .1s, box-shadow .1s
    }

    .btn-press:active {
      transform: translateY(3px);
      box-shadow: none !important
    }

    @keyframes zoomIn {
      from {
        opacity: 0;
        transform: scale(.82) translateY(20px)
      }

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

    .modal-content {
      animation: zoomIn .28s cubic-bezier(.34, 1.4, .64, 1) forwards
    }

    .modal-backdrop {
      background: radial-gradient(ellipse at center, rgba(0, 0, 20, .85), rgba(0, 0, 50, .95));
      backdrop-filter: blur(6px)
    }

    .game-header {
      background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
      backdrop-filter: blur(12px);
      border-bottom: 3px solid rgba(255, 255, 255, .15);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
    }

    .action-btn-slide {
      background: linear-gradient(145deg, #eff6ff, #dbeafe);
      border: 4px solid #3b82f6;
      box-shadow: 0 7px 0 0 #1d4ed8;
      color: #1d4ed8;
      border-radius: 1.5rem;
      transition: all .12s
    }

    .action-btn-slide:hover {
      background: linear-gradient(145deg, #dbeafe, #bfdbfe);
      transform: translateY(-2px)
    }

    .action-btn-slide:active {
      transform: translateY(4px);
      box-shadow: none
    }

    .action-btn-form {
      background: linear-gradient(145deg, #fef2f2, #fee2e2);
      border: 4px solid #ef4444;
      box-shadow: 0 7px 0 0 #991b1b;
      color: #991b1b;
      border-radius: 1.5rem;
      transition: all .12s
    }

    .action-btn-form:hover {
      background: linear-gradient(145deg, #fee2e2, #fecaca);
      transform: translateY(-2px)
    }

    .action-btn-form:active {
      transform: translateY(4px);
      box-shadow: none
    }

    .admin-input {
      background: #0f172a;
      border: 2px solid #334155;
      border-radius: 12px;
      padding: 10px 14px;
      color: #fff;
      font-weight: 900;
      font-size: 1rem;
      outline: none;
      width: 100%;
      transition: border-color .2s
    }

    .admin-input:focus {
      border-color: #38bdf8
    }

    .game-title {
      text-shadow: 3px 3px 0 #1e3a8a, 6px 6px 0 rgba(30, 58, 138, .3);
      letter-spacing: -.02em
    }

    @media(max-width:640px) {
      .stage-icon {
        font-size: 3.2rem !important
      }
    }