/* SwissDevPath static asset: components.css */
.game-shell {
        min-height: 78vh;
        border-radius: 34px;
        border: 1px solid rgba(148,163,184,.22);
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 30%, rgba(96,165,250,.25), transparent 20%),
          radial-gradient(circle at 18% 48%, rgba(245,158,11,.16), transparent 22%),
          radial-gradient(circle at 82% 52%, rgba(34,197,94,.16), transparent 22%),
          radial-gradient(circle at 50% 92%, rgba(248,113,113,.14), transparent 24%),
          linear-gradient(180deg, #020617, #0f172a 50%, #020617);
        box-shadow: 0 32px 90px rgba(0,0,0,.55);
        position: relative;
      }

      .game-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1px),
          radial-gradient(circle, rgba(147,197,253,.16) 1px, transparent 1px);
        background-size: 44px 44px, 91px 91px;
        opacity: .18;
        pointer-events: none;
      }

      .game-hud {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
        gap: 20px;
        padding: 28px;
      }

      .game-title-panel {
        border-radius: 28px;
        padding: 26px;
        border: 1px solid rgba(96,165,250,.28);
        background: rgba(2,6,23,.62);
        backdrop-filter: blur(10px);
      }

      .game-kicker {
        display: inline-flex;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(245,158,11,.34);
        background: rgba(245,158,11,.13);
        color: #fde68a;
        font-weight: 950;
        margin-bottom: 12px;
      }

      .game-title-panel h1 {
        margin: 0;
        font-size: clamp(38px, 7vw, 78px);
        line-height: .92;
        letter-spacing: -.07em;
        color: #f8fafc;
      }

      .game-title-panel p {
        color: #cbd5e1;
        font-size: 17px;
        line-height: 1.5;
        max-width: 720px;
      }

      .game-stat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .game-stat {
        border-radius: 22px;
        padding: 18px;
        border: 1px solid rgba(148,163,184,.22);
        background: rgba(15,23,42,.72);
      }

      .game-stat span {
        display: block;
        color: #94a3b8;
        font-weight: 850;
        font-size: 13px;
      }

      .game-stat strong {
        display: block;
        margin-top: 5px;
        color: #f8fafc;
        font-size: 26px;
      }

      .game-board {
        position: relative;
        z-index: 2;
        padding: 0 28px 28px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
        gap: 20px;
      }

      .game-panel {
        border-radius: 28px;
        padding: 22px;
        border: 1px solid rgba(148,163,184,.22);
        background: rgba(2,6,23,.58);
        backdrop-filter: blur(10px);
      }

      .game-panel h2 {
        margin: 0 0 14px;
        color: #f8fafc;
        letter-spacing: -.03em;
      }

      .game-rune-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
      }

      .game-rune-card {
        display: grid;
        grid-template-columns: 62px 1fr;
        gap: 14px;
        align-items: center;
        text-decoration: none;
        color: #e5e7eb;
        border-radius: 22px;
        padding: 14px;
        border: 1px solid rgba(96,165,250,.20);
        background: rgba(15,23,42,.72);
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
      }

      .game-rune-card:hover {
        transform: translateY(-3px);
        border-color: rgba(96,165,250,.62);
        box-shadow: 0 18px 44px rgba(0,0,0,.42);
      }

      .game-rune-orb {
        width: 54px;
        height: 54px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-weight: 950;
        color: white;
        border: 2px solid rgba(191,219,254,.55);
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        box-shadow: 0 0 24px rgba(96,165,250,.28);
      }

      .game-rune-orb.available {
        background: linear-gradient(135deg, #1e293b, #334155);
      }

      .game-rune-orb.done {
        background: linear-gradient(135deg, #166534, #22c55e);
      }

      .game-rune-path {
        color: #fde68a;
        font-size: 12px;
        font-weight: 950;
        margin-bottom: 4px;
      }

      .game-rune-card h3 {
        margin: 0 0 6px;
        color: #f8fafc;
      }

      .game-rune-card p {
        margin: 0;
        color: #94a3b8;
        line-height: 1.35;
        font-size: 13px;
      }

      .game-rune-card span {
        display: inline-block;
        margin-top: 8px;
        color: #93c5fd;
        font-weight: 900;
      }

      .quest-list {
        display: grid;
        gap: 12px;
      }

      .quest-item {
        border-radius: 20px;
        padding: 15px;
        border: 1px solid rgba(34,197,94,.24);
        background: rgba(15,23,42,.70);
      }

      .quest-item b {
        color: #bbf7d0;
      }

      .quest-item p {
        margin: 6px 0 0;
        color: #94a3b8;
      }

      .game-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }

      .game-actions a {
        text-decoration: none;
        border-radius: 999px;
        padding: 11px 15px;
        border: 1px solid rgba(96,165,250,.38);
        background: rgba(37,99,235,.16);
        color: #dbeafe;
        font-weight: 950;
      }

      .game-actions a.primary {
        border-color: rgba(34,197,94,.48);
        background: rgba(34,197,94,.14);
        color: #bbf7d0;
      }

      @media (max-width: 900px) {
        .game-hud, .game-board {
          grid-template-columns: 1fr;
        }
      }