/* GameDraft — styles/base.css
   Foundationale Komponenten: Body/Hintergrund, Buttons, Inputs, Stats, Duell, Listen, Modal-Basis, Pills/Badges. */

    body {
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at 20% 0%, #1d2030 0, transparent 34%), var(--bg);
      color:var(--text);
    }
    .wrap { max-width: 1360px; margin: 0 auto; padding: 28px; }
    header { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom:20px; }
    .brandBlock { display:flex; align-items:flex-start; gap:18px; max-width:790px; }
    .brandIcon { width:74px; height:74px; flex:0 0 74px; border-radius:22px; box-shadow:0 0 36px rgba(72,104,255,.34); }
    .brandIconFallback { display:grid; place-items:center; background:linear-gradient(135deg, rgba(0,216,255,.28), rgba(124,77,255,.34)), #101523; border:1px solid rgba(185,207,255,.22); color:#eef3ff; font-weight:950; letter-spacing:-.08em; font-size:26px; }
    .brandName { margin:.25rem 0 0; font-size: clamp(44px, 7vw, 84px); line-height:.92; letter-spacing:-.05em; }
    .brandName .accent { color:#cbd7ff; text-shadow:0 0 28px rgba(83,132,255,.34); }
    .brandCopy { color:var(--muted); max-width:520px; line-height:1.42; margin-top:16px; font-size:15px; white-space:normal; }
    .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.24em; font-size:12px; }
    h1 { margin:.25rem 0 0; font-size: clamp(32px, 5vw, 58px); line-height:1; }
    .sub { color:var(--muted); max-width:760px; line-height:1.45; }
    .toolbar { display:grid; grid-template-columns:repeat(4, minmax(132px, 1fr)); gap:10px; align-items:stretch; }
    .toolbar button, .toolbar label.fileBtn { min-width:116px; white-space:nowrap; }
    .iconButton { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
    .navIcon {
      width:24px; height:24px; display:inline-grid; place-items:center; border-radius:9px;
      background:linear-gradient(135deg, rgba(0,212,255,.18), rgba(111,63,255,.22));
      box-shadow:inset 0 0 0 1px rgba(185,207,255,.15), 0 0 18px rgba(67,111,255,.18);
      flex:0 0 24px;
    }
    .navIcon svg { width:16px; height:16px; fill:url(#rankduelIconGradient); }
    .iconButton:hover .navIcon { box-shadow:inset 0 0 0 1px rgba(214,227,255,.32), 0 0 24px rgba(68,121,255,.32); transform:translateY(-1px); }
    button, label.fileBtn {
      border:1px solid var(--border); background:#1b1f29; color:var(--text);
      border-radius:18px; padding:10px 13px; font-weight:700; cursor:pointer;
      transition:.15s ease; font:inherit;
    }
    button:hover, label.fileBtn:hover { background:#252b38; transform: translateY(-1px); }
    button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
    #soundToggleBtn[aria-pressed="false"] { color:var(--muted); background:#12151d; }
    input[type=file] { display:none; }
    input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=tel], select, textarea {
      width:100%; border:1px solid var(--border); background:#0b0d12; color:var(--text);
      border-radius:16px; padding:12px 14px; font:inherit; outline:none;
    }
    textarea { min-height:68px; resize:vertical; }
    input:focus, select:focus, textarea:focus { border-color:#65728d; box-shadow:0 0 0 3px rgba(214,227,255,.08); }
    .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin: 18px 0; }
    .panel { background:rgba(17,19,25,.92); border:1px solid var(--border); border-radius:22px; padding:18px; box-shadow: 0 18px 60px rgba(0,0,0,.25); }
    .statLabel { color:var(--muted); font-size:13px; }
    .statValue { font-size:26px; font-weight:900; margin-top:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .duel { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; min-height:380px; }
    .card { position:relative; min-height:380px; overflow:hidden; text-align:left; border-radius:34px; padding:26px; border:1px solid #303747; background:#111; box-shadow: 0 28px 90px rgba(0,0,0,.35); isolation:isolate; }
    .card:hover { transform:scale(1.012); background:#171a22; }
    .card:focus { outline:3px solid rgba(214,227,255,.7); outline-offset:3px; }
    .coverBg { position:absolute; inset:-24px; opacity:.44; filter: blur(18px) saturate(1.55); transform:scale(1.16); z-index:-3; }
    .fullBg { position:absolute; inset:0; opacity:.22; z-index:-2; }
    .shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.74) 53%, rgba(0,0,0,.95)); }
    .choiceTop { display:flex; justify-content:space-between; align-items:center; color:#d7dce8; opacity:.92; text-transform:uppercase; letter-spacing:.18em; font-size:12px; margin-bottom:22px; }
    .choiceBody { display:flex; gap:22px; align-items:flex-end; min-height:260px; }
    .poster { flex:0 0 178px; aspect-ratio:100/133; border-radius:18px; border:1px solid rgba(255,255,255,.28); box-shadow: 0 18px 55px rgba(0,0,0,.72); background-color:#222; background-repeat:no-repeat; background-size:cover; background-position:center; }
    .titleBox { min-width:0; }
    .gameTitle { font-size: clamp(28px, 3.7vw, 48px); line-height:1.02; font-weight:950; text-shadow:0 3px 14px rgba(0,0,0,.9); }
    .titlePill { display:inline; background:rgba(0,0,0,.52); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:.03em .16em; border-radius:12px; }
    .emptyCardState { display:flex; align-items:center; justify-content:center; min-height:100%; padding:32px 28px; }
    .emptyCardText { max-width:min(100%, 430px); font-size:clamp(18px, 2.15vw, 28px); line-height:1.16; font-weight:850; letter-spacing:-.015em; text-wrap:balance; overflow-wrap:anywhere; text-shadow:0 4px 18px rgba(0,0,0,.42); color:#eef3ff; text-align:center; }
    .emptyCardText .titlePill { display:inline-block; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:.52em .80em; border-radius:22px; background:linear-gradient(180deg, rgba(10,14,22,.72), rgba(8,10,16,.58)); border:1px solid rgba(144,174,236,.18); box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); }
    .rating { display:inline-block; margin-top:18px; padding:8px 13px; border-radius:999px; background:rgba(0,0,0,.58); color:#d8deeb; font-size:13px; }
    .below { display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start; }
    .list { max-height: 510px; overflow:auto; display:grid; gap:8px; padding-right:4px; }
    .row { display:flex; justify-content:space-between; gap:12px; align-items:center; background:rgba(4,5,8,.45); border:1px solid #242a35; border-radius:14px; padding:10px 12px; min-height:48px; box-sizing:border-box; }
    .rankTitle { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .rankNum { color:var(--muted); width:34px; text-align:right; display:inline-block; margin-right:10px; }
    .small { color:var(--muted); font-size:13px; }
    .errorBox { display:none; background:#3a1111; border:1px solid #803030; color:#ffe7e7; padding:14px; border-radius:16px; margin-bottom:16px; white-space:pre-wrap; position:relative; z-index:100; }
    footer { margin-top:18px; padding-top:16px; border-top:1px solid #171b24; color:var(--muted); display:flex; justify-content:space-between; gap:12px; font-size:13px; }
    .danger { background:transparent; border-color:transparent; color:var(--muted); padding:0; }
    .danger:hover { background:transparent; color:var(--text); }

    .modalBackdrop { position:fixed; inset:0; z-index:50; display:none; padding:22px; background:rgba(0,0,0,.72); backdrop-filter: blur(10px); }
    .modalBackdrop.open { display:flex; align-items:center; justify-content:center; }
    .modal { width:min(1220px, 100%); height:min(90vh, 960px); max-height:min(90vh, 960px); display:flex; flex-direction:column; overflow:hidden; border:1px solid #343b4c; border-radius:30px; background:linear-gradient(180deg, rgba(22,25,34,.98), rgba(10,11,16,.98)); box-shadow:0 28px 100px rgba(0,0,0,.58); }
    .modalHead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px; border-bottom:1px solid #242a35; }
    .modalHead h2 { margin:0; font-size:28px; }
    .modalBody { padding:18px 22px 22px; overflow:hidden; display:flex; flex-direction:column; min-height:0; flex:1; }
    .libraryControls { display:grid; grid-template-columns:1.3fr .8fr .8fr .8fr auto; gap:10px; align-items:center; margin-bottom:12px; flex:0 0 auto; }
    .libraryActions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; flex:0 0 auto; }
    .addGameBox { display:none; grid-template-columns:1.2fr .55fr 1fr 1fr .8fr auto; gap:8px; align-items:start; background:rgba(255,255,255,.035); border:1px solid #262d3a; border-radius:20px; padding:12px; margin-bottom:16px; flex:0 0 auto; }
    .addGameBox.open { display:grid; }
    .libraryGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; align-content:start; overflow:auto; min-height:0; flex:1; padding-right:4px; }
    .libraryTile { position:relative; overflow:hidden; min-height:230px; padding:10px; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; border:1px solid #2d3444; border-radius:20px; background:#111; isolation:isolate; }
    .libraryTile:hover { transform:translateY(-2px); }
    .libraryTile.selected { border-color:rgba(142,230,168,.9); box-shadow:0 0 0 3px rgba(142,230,168,.14); }
    .libraryTile .miniBg { position:absolute; inset:0; opacity:.54; z-index:-2; }
    .libraryTile .miniShade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.84)); }
    .checkBadge { position:absolute; top:9px; left:9px; width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.18); font-weight:900; }
    .libraryTile.selected .checkBadge { background:rgba(28,128,60,.9); color:white; }
    .libTitle { font-size:13px; line-height:1.18; font-weight:850; text-shadow:0 2px 10px black; }
    .tagLine { margin-top:6px; color:#cbd3df; opacity:.8; font-size:11px; line-height:1.18; text-shadow:0 2px 9px black; }
    .sourceBadge { position:absolute; top:9px; right:9px; max-width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:4px 7px; border-radius:999px; background:rgba(0,0,0,.55); color:#d8deeb; font-size:10px; font-weight:800; }
    .libraryFooter { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-top:1px solid #242a35; }
    .primary { background:#edf3ff; color:#111827; border-color:#edf3ff; }
    .primary:hover { background:white; }
    .subtle { background:#12151d; color:#d8deeb; }
    .pill { display:inline-flex; align-items:center; gap:6px; border:1px solid #2d3444; border-radius:999px; padding:8px 11px; background:#0e1017; color:#d8deeb; font-weight:800; font-size:13px; }
    .versionBadge { display:inline-flex; align-items:center; border:1px solid #2d3444; border-radius:999px; padding:5px 9px; background:#0e1017; color:#9aa3b2; font-size:12px; font-weight:800; letter-spacing:.04em; }
    .profileGrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; align-content:start; overflow:auto; min-height:0; flex:1; padding-right:4px; }
    .profileCard { text-align:left; border:1px solid #2d3444; background:rgba(4,5,8,.45); border-radius:20px; padding:16px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
    .profileCard.active { border-color:rgba(142,230,168,.78); box-shadow:0 0 0 3px rgba(142,230,168,.11); }
    .profileCard h3 { margin:0; font-size:20px; }
    .profileCardActions { display:flex; gap:8px; flex-wrap:wrap; }
    .profileCardActions button { padding:8px 10px; border-radius:14px; font-size:13px; }
    .compactActions { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
    .listsProfileContext { display:flex; justify-content:flex-start; align-items:center; margin:0 0 12px; }
    .onboardingModal { width:min(560px, 100%); height:auto; min-height:0; }
    .onboardingBody { padding:24px; display:grid; gap:14px; }
    .codeTextarea { min-height:220px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:13px; line-height:1.45; }
    .hidden { display:none !important; }
    .networkNote { display:none; border:1px solid #34435f; background:#0f1724; color:#dbe7ff; border-radius:16px; padding:10px 12px; margin-bottom:12px; font-size:13px; }
    .networkNote.open { display:block; }

    /* GameDraft professional UI pass */
    html { min-height: 100%; }
    body {
      min-height: 100vh;
      background:
        radial-gradient(circle at 14% 0%, rgba(0, 209, 255, .13) 0, transparent 32%),
        radial-gradient(circle at 86% 6%, rgba(124, 77, 255, .16) 0, transparent 36%),
        linear-gradient(180deg, #0a0d16 0%, #07080d 55%, #05060a 100%);
      /* Hintergrund am Viewport ausrichten → kein „Naht"-Effekt bei kurzem Inhalt
         auf hohen/breiten Auflösungen. */
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .wrap { position:relative; }
    .wrap::before {
      content:""; position:fixed; inset:0; pointer-events:none; opacity:.16;
      background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(180deg, black, transparent 72%);
    }
    .brandBlock, .toolbar, .stats, .duel, .below, footer { position:relative; z-index:1; }
    button, label.fileBtn {
      background:
        linear-gradient(180deg, rgba(34,39,53,.92), rgba(18,22,32,.92)),
        radial-gradient(circle at 20% 0%, rgba(0, 215, 255, .22), transparent 38%);
      border:1px solid rgba(136, 159, 205, .20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.24);
      color:#eef3ff;
    }
    button:hover, label.fileBtn:hover {
      border-color:rgba(135, 178, 255, .42);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(91,134,255,.12), 0 18px 44px rgba(26,52,124,.22);
      transform:translateY(-1px);
    }
    button:active { transform:translateY(0) scale(.99); }
    .languageShell {
      display:flex; align-items:center; gap:11px; min-width:170px; height:46px; white-space:nowrap;
      border:1px solid rgba(136, 159, 205, .26);
      border-radius:18px; padding:0 14px;
      background:
        linear-gradient(135deg, rgba(0,216,255,.16), rgba(124,77,255,.25)),
        linear-gradient(180deg, rgba(34,39,53,.94), rgba(18,22,32,.94));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.24), 0 0 22px rgba(63,111,255,.10);
      color:#eef3ff;
      cursor:pointer;
      transition:.15s ease;
    }
    .languageShell:hover {
      border-color:rgba(135,178,255,.48);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(26,52,124,.22), 0 0 26px rgba(63,111,255,.20);
      transform:translateY(-1px);
    }
    .languageIcon {
      width:24px; height:24px; display:inline-grid; place-items:center; border-radius:9px;
      background:linear-gradient(135deg, rgba(0,212,255,.18), rgba(111,63,255,.22));
      box-shadow:inset 0 0 0 1px rgba(185,207,255,.15), 0 0 18px rgba(67,111,255,.18);
      flex:0 0 24px;
      font-size:13px;
    }
    .languageSelect {
      appearance:none; -webkit-appearance:none;
      border:0 !important; background:transparent !important; color:#eef3ff !important;
      box-shadow:none !important; padding:10px 26px 10px 0 !important; min-width:108px; font-weight:950; cursor:pointer;
      background-image:linear-gradient(45deg, transparent 50%, #dbe6ff 50%), linear-gradient(135deg, #dbe6ff 50%, transparent 50%) !important;
      background-position:calc(100% - 10px) 54%, calc(100% - 4px) 54% !important;
      background-size:6px 6px, 6px 6px !important;
      background-repeat:no-repeat !important;
    }
    .languageSelect option { background:#0c1019; color:#eef3ff; font-weight:800; }
    .panel {
      background:
        linear-gradient(180deg, rgba(20,24,34,.86), rgba(11,13,20,.92)),
        radial-gradient(circle at 0 0, rgba(0,214,255,.08), transparent 44%);
      border-color:rgba(136,159,205,.17);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 26px 80px rgba(0,0,0,.28);
    }
    .stats .panel {
      min-height:92px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .statLabel {
      color:#aebbd3;
      letter-spacing:.035em;
      text-transform:uppercase;
      font-weight:800;
      font-size:12px;
    }
    .statValue {
      color:#ffffff;
      text-shadow:0 0 26px rgba(103,146,255,.24);
      letter-spacing:.01em;
    }
    .card {
      border-color:rgba(142,164,211,.20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 30px 100px rgba(0,0,0,.38);
    }
    .card::after {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
      background:linear-gradient(120deg, rgba(0,216,255,.12), transparent 30%, rgba(124,77,255,.13));
      transition:opacity .16s ease;
    }
    .card:hover::after { opacity:1; }
    .choiceTop {
      padding:0 2px;
      color:#c9d4ea;
      font-weight:900;
    }
    .poster {
      border-color:rgba(220,231,255,.30);
      box-shadow:0 20px 65px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
    }
    .titlePill {
      background:linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.42));
      box-shadow:0 16px 36px rgba(0,0,0,.36);
    }
    .rating {
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.62);
    }
    .row {
      background:linear-gradient(180deg, rgba(15,18,27,.72), rgba(7,9,14,.68));
      border-color:rgba(136,159,205,.12);
    }
    #historyList { gap:12px; }
    #historyList .row {
      padding:16px 18px;
      min-height:82px;
      border-radius:18px;
      border-color:rgba(136,159,205,.16);
      background:linear-gradient(180deg, rgba(14,18,28,.88), rgba(7,10,16,.82));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.12);
    }
    #historyList .row b {
      display:block;
      margin-bottom:6px;
      font-size:15px;
      line-height:1.26;
      color:#f4f7ff;
    }
    #historyList .small {
      display:block;
      font-size:14px;
      line-height:1.4;
      color:#b9c5d9;
    }
    #historyList .historyRow { display:block; }
    .notPlayedButton {
      position:absolute;
      bottom:22px;
      z-index:4;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:max-content;
      max-width:calc(100% - 44px);
      padding:9px 14px;
      border-radius:999px;
      border:1px solid rgba(255,193,122,.34);
      background:linear-gradient(135deg, rgba(255,147,55,.92), rgba(184,72,34,.90));
      color:#fff7ec;
      font-size:12px;
      font-weight:950;
      letter-spacing:.035em;
      text-transform:uppercase;
      box-shadow:0 14px 30px rgba(136,52,24,.30), inset 0 1px 0 rgba(255,255,255,.20);
      cursor:pointer;
      user-select:none;
    }
    .notPlayedButton.leftSide { left:22px; }
    .notPlayedButton.rightSide { right:22px; }
    .notPlayedButton:hover { background:linear-gradient(135deg, rgba(255,169,76,.98), rgba(205,84,42,.96)); border-color:rgba(255,219,166,.58); transform:translateY(-1px); }
    .notPlayedButton:focus-visible { outline:3px solid rgba(255,205,139,.44); outline-offset:3px; }
    .rankingSectionHeader {
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:8px 0 2px;
      padding:12px 14px;
      border:1px solid rgba(136,159,205,.14);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(13,17,27,.82), rgba(7,9,14,.70));
      color:#cfd8ea;
      font-weight:900;
      letter-spacing:.03em;
    }
    .rankingSectionHeader small { color:#8f9bad; font-size:12px; font-weight:800; }
    .notPlayedRow {
      opacity:.74;
      border-style:dashed;
    }
    .notPlayedBadge {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 9px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      color:#c7d1e5;
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .restoreRankingButton {
      margin-top:8px;
      padding:7px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
    }
    .rankingCard.unplayed {
      opacity:.62;
      filter:saturate(.62);
      border-style:dashed;
    }
    .rankingCard.unplayed .rankingBadge {
      width:auto;
      padding:0 10px;
      font-size:10px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .modal {
      border-color:rgba(136,159,205,.22);
      box-shadow:0 34px 120px rgba(0,0,0,.66), 0 0 0 1px rgba(60,104,255,.08);
    }
    input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=tel], select, textarea {
      background:rgba(5,7,12,.76);
      border-color:rgba(136,159,205,.20);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=url]:focus, input[type=tel]:focus, select:focus, textarea:focus {
      border-color:rgba(120,168,255,.70);
      box-shadow:0 0 0 3px rgba(61,123,255,.18);
    }


    .gameActions {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:12px;
      margin:-4px 0 20px;
      position:relative;
      z-index:1;
    }
    .gameActionButton {
      min-width:150px;
      border-radius:999px;
      padding:12px 18px;
      text-transform:uppercase;
      letter-spacing:.10em;
      font-size:12px;
    }
    .skipAction {
      background:linear-gradient(135deg, rgba(124,77,255,.20), rgba(0,216,255,.12)), rgba(19,23,34,.92);
    }
    .titlePanel {
      display:inline-flex;
      flex-direction:column;
      gap:10px;
      max-width:min(100%, 520px);
      padding:18px 20px;
      border-radius:20px;
      background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.46));
      border:1px solid rgba(255,255,255,.07);
      box-shadow:0 16px 44px rgba(0,0,0,.42);
    }
    .gameTitle {
      display:block;
      font-size:clamp(30px, 3.6vw, 48px);
      line-height:1.06;
      font-weight:950;
      letter-spacing:-.035em;
      overflow-wrap:anywhere;
      text-wrap:balance;
      text-shadow:0 3px 14px rgba(0,0,0,.86);
    }
    .gameMeta {
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:1px;
    }
    .metaChip {
      display:inline-flex;
      align-items:center;
      max-width:190px;
      border-radius:999px;
      padding:5px 9px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.08);
      color:#d5def2;
      font-size:11px;
      font-weight:850;
      line-height:1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .titlePanel .rating {
      margin-top:0;
      align-self:flex-start;
    }