/* Wariant „Synty” motywu Jumpers (`?theme=synty`): nowoczesny, płaski interfejs w stylu paczki Synty Interface Military Combat HUD — ciemne łupkowe panele, cienkie linie, bursztynowy akcent, Oxanium.
   Ładowany zawsze (index.html), ale każda reguła zaczyna się od html.own-theme.own-synty, więc bez klasy własnej „own-synty” (domyślny Brawl, ?theme=orig) nie robi nic. Tokeny liczbowe (obrys, promienie,
   cienie, wypełnienia) liczy own_theme.js (pick brawl / synty); tu zmienne CSS i reguły dla widoków HTML. Specyfikacja: GUI_STYLE.md (sekcja „v3 Synty”). */
html.own-theme.own-synty {
  --own-ink: #070b12; --own-line: #34465f;
  --own-yellow: #ffb81c; --own-orange: #ff7a33; --own-cyan: #2ad4ff; --own-green: #3de08c; --own-red: #ff4655; --own-violet: #8f7bff; --own-pink: #ff6fb5;
  --own-navy: #141c2b; --own-navy-light: #22304a; --own-navy-dark: #0b111b;
  --own-text: #ffffff; --own-muted: #9fb0c8;
  --own-font: "Oxanium", "Lilita One", "Trebuchet MS", system-ui, sans-serif;
  --own-shadow: rgba(0, 0, 0, .5);
}
html.own-theme.own-synty body { font-family: var(--own-font); font-weight: 600; }
/* litery bez konturu (Brawl rysował czarny kontur -webkit-text-stroke); czytelność na ruchliwej scenie 3D daje cień */
html.own-theme.own-synty, html.own-theme.own-synty * { -webkit-text-stroke: 0 !important; paint-order: normal !important; }
html.own-theme.own-synty .rblx-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .75); font-weight: 600; }
html.own-theme.own-synty .own-btn.rblx-text { text-transform: uppercase; letter-spacing: .05em; }
html.own-theme.own-synty .own-ol::after { border-color: var(--own-line); }
html.own-theme.own-synty .own-btn:hover { filter: brightness(1.12); translate: 0 0; }
html.own-theme.own-synty .own-btn:active { translate: 0 1px; filter: brightness(.94); box-shadow: none !important; }

/* ---- menu startowe (#card) ---- */
html.own-theme.own-synty #menu { background: radial-gradient(ellipse at 50% 42%, rgba(12, 20, 34, .55), rgba(4, 7, 12, .9) 72%); }
html.own-theme.own-synty #card {
  background: linear-gradient(180deg, #182234, #0d1420); border: 1px solid var(--own-line); border-top: 3px solid var(--own-yellow); border-radius: 6px; padding: 14px 28px 24px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.own-theme.own-synty #menuLogo { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
html.own-theme.own-synty #card select {
  font: 600 16px/1.1 var(--own-font); text-transform: uppercase; letter-spacing: .05em; padding: 11px 34px 11px 14px; border-radius: 4px; border: 1px solid var(--own-line);
  background: #0b111b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23ffb81c' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") right 12px center no-repeat;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); text-shadow: none;
}
html.own-theme.own-synty #card button {
  font: 600 17px/1.1 var(--own-font); text-transform: uppercase; letter-spacing: .08em; padding: 12px 18px; border-radius: 4px; border: 1px solid var(--own-line); color: var(--own-text);
  background: linear-gradient(180deg, #2a3b58, #1c2840); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .45); text-shadow: none;
}
html.own-theme.own-synty #card button#play {
  font-size: 30px; letter-spacing: .16em; padding: 14px 18px 14px; border: 0; color: var(--own-ink); background: linear-gradient(180deg, #ffc944, #ffa90d);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: none;
}
html.own-theme.own-synty #card button#play:hover:not(:disabled) { background: linear-gradient(180deg, #ffd666, #ffb52e); translate: 0 0; }
html.own-theme.own-synty #card button#settingsBtn, html.own-theme.own-synty #card button#lockerBtn { background: linear-gradient(180deg, #2a3b58, #1c2840); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .45); }
html.own-theme.own-synty #card button#settingsBtn { border-left: 4px solid var(--own-violet); }
html.own-theme.own-synty #card button#lockerBtn { border-left: 4px solid var(--own-orange); }
html.own-theme.own-synty #card button#adBtn { font-size: 14px; padding: 9px 14px; border: 1px solid #1f6d49; border-left: 4px solid var(--own-green); background: linear-gradient(180deg, #17402e, #0f2c20); box-shadow: none; }
html.own-theme.own-synty #card button:hover:not(:disabled) { filter: brightness(1.14); translate: 0 0; }
html.own-theme.own-synty #card button:active:not(:disabled) { translate: 0 1px; box-shadow: none !important; }
html.own-theme.own-synty #status { color: var(--own-muted); font-size: 13px; letter-spacing: .04em; }

/* ---- komunikat, ściąga klawiszy, klawisze ---- */
html.own-theme.own-synty #msg { background: rgba(11, 17, 27, .92); border: 1px solid var(--own-line); border-left: 3px solid var(--own-yellow); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); font-size: 15px; letter-spacing: .03em; }
html.own-theme.own-synty kbd { background: #22304a; border: 1px solid var(--own-line); border-bottom-width: 3px; border-radius: 3px; color: var(--own-text); font: 600 12px var(--own-font); }
html.own-theme.own-synty #help { font-size: 13px; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }

/* ---- klasy ogólne widoków HTML ---- */
html.own-theme.own-synty .own-card { background: #111a28 !important; border: 1px solid var(--own-line) !important; border-top: 3px solid var(--own-yellow) !important; border-radius: 6px !important; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
html.own-theme.own-synty .own-hbtn {
  font: 600 16px/1.1 var(--own-font) !important; text-transform: uppercase; letter-spacing: .07em; padding: 10px 18px !important; border-radius: 4px !important; border: 1px solid var(--own-line) !important;
  background: linear-gradient(180deg, #2a3b58, #1c2840) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .45) !important;
}
html.own-theme.own-synty .own-hbtn.own-go { background: linear-gradient(180deg, #3de08c, #22a866) !important; color: var(--own-ink) !important; border-color: #1f8a57 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .45) !important; }
html.own-theme.own-synty .own-hbtn:hover:not(:disabled) { filter: brightness(1.12); translate: 0 0; }
html.own-theme.own-synty .own-hbtn:active:not(:disabled) { translate: 0 1px; box-shadow: none !important; }

/* ---- komunikaty połączenia, czat, wiersze kill feedu, toasty, podpowiedzi ---- */
html.own-theme.own-synty .own-overlay { background: rgba(5, 8, 14, .86) !important; }
html.own-theme.own-synty .own-title { font: 700 26px var(--own-font) !important; color: var(--own-yellow); text-transform: uppercase; letter-spacing: .1em; }
html.own-theme.own-synty .own-sub { color: var(--own-muted) !important; font-size: 15px; letter-spacing: .03em; }
html.own-theme.own-synty .own-spin { border-color: #1c2840 !important; border-top-color: var(--own-yellow) !important; border-width: 4px !important; outline: 0; }
html.own-theme.own-synty .own-banner, html.own-theme.own-synty .own-chat { background: rgba(11, 17, 27, .92) !important; border: 1px solid var(--own-line); border-left: 3px solid var(--own-yellow); border-radius: 4px !important; font: 600 15px/1.35 var(--own-font) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html.own-theme.own-synty .own-feedrow { background: rgba(11, 17, 27, .85) !important; border: 1px solid var(--own-line); border-radius: 4px !important; box-shadow: none; }
html.own-theme.own-synty .own-toast { background: #111a28 !important; font: 700 17px var(--own-font) !important; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px !important; box-shadow: 0 0 0 1px var(--own-line), 0 8px 24px rgba(0, 0, 0, .55); }
html.own-theme.own-synty .own-prompt { background: rgba(11, 17, 27, .92) !important; border: 1px solid var(--own-line); border-radius: 4px !important; font: 600 17px var(--own-font) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html.own-theme.own-synty .own-prompt [data-k] { background: var(--own-yellow) !important; color: var(--own-ink) !important; border: 0 !important; border-radius: 3px !important; box-shadow: none; font: 700 18px var(--own-font) !important; }
html.own-theme.own-synty [data-n="Reticle"] { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)); }

/* ---- Locker (lk-*) ---- */
html.own-theme.own-synty .lk-root { background: rgba(5, 8, 14, .88); font-family: var(--own-font); font-weight: 600; }
html.own-theme.own-synty .lk-root b, html.own-theme.own-synty .lk-root h3 { font-weight: 700; }
html.own-theme.own-synty .lk-win { background: linear-gradient(180deg, #151f31, #0d1420); border: 1px solid var(--own-line); border-top: 3px solid var(--own-yellow); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); }
html.own-theme.own-synty .lk-level, html.own-theme.own-synty .lk-coins { font-weight: 700; font-size: 1.8em; color: var(--own-yellow); }
html.own-theme.own-synty .lk-h2, html.own-theme.own-synty .lk-h3, html.own-theme.own-synty .lk-tname { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html.own-theme.own-synty .lk-h2 { font-size: 1.2em; color: var(--own-yellow); }
html.own-theme.own-synty .lk-h2 span, html.own-theme.own-synty .lk-note, html.own-theme.own-synty .lk-note2, html.own-theme.own-synty .lk-xp, html.own-theme.own-synty .lk-small, html.own-theme.own-synty .lk-dim { color: var(--own-muted); opacity: 1; font-weight: 600; }
html.own-theme.own-synty .lk-card, html.own-theme.own-synty .lk-tier, html.own-theme.own-synty .lk-input { background: #0f1724; border: 1px solid var(--own-line); border-radius: 4px; }
html.own-theme.own-synty .lk-skin { border: 1px solid var(--c); outline: 0; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #0f1724), #0f1724 55%); box-shadow: inset 0 3px 0 var(--c); }
html.own-theme.own-synty .lk-skin.lk-eq, html.own-theme.own-synty .lk-trow.lk-eq { border-color: #fff; box-shadow: inset 0 3px 0 #fff, 0 0 0 1px #fff; }
html.own-theme.own-synty .lk-ico { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
html.own-theme.own-synty .lk-sw { border: 1px solid var(--own-line); height: 14px; }
html.own-theme.own-synty .lk-rar { font-size: .85em; letter-spacing: .08em; text-transform: uppercase; }
html.own-theme.own-synty .lk-tier { border-width: 1px; border-radius: 3px; }
html.own-theme.own-synty .lk-t-claimed { background: #12332a; } html.own-theme.own-synty .lk-t-ready { background: #14533a; } html.own-theme.own-synty .lk-t-current { background: #1b3556; }
html.own-theme.own-synty .lk-free-row { background: #0f1724; border: 1px solid var(--own-green); outline: 0; border-radius: 4px; }
html.own-theme.own-synty .lk-input { color: var(--own-text); font: 600 16px var(--own-font); }
html.own-theme.own-synty .lk-bar { background: #0b111b; border: 1px solid var(--own-line); border-radius: 2px; }
html.own-theme.own-synty .lk-fill { background: linear-gradient(180deg, #5be3ff, var(--own-cyan)); border-radius: 0; }
html.own-theme.own-synty .lk-fill.lk-ok, html.own-theme.own-synty .lk-fill.lk-done { background: linear-gradient(180deg, #6df0a8, var(--own-green)); }
html.own-theme.own-synty .lk-fill.lk-sp { background: linear-gradient(180deg, #ab9bff, var(--own-violet)); }
html.own-theme.own-synty .lk-root button {
  font: 600 14px/1.1 var(--own-font); text-transform: uppercase; letter-spacing: .07em; padding: .55em 1em; border-radius: 3px; border: 1px solid var(--own-line); color: var(--own-text);
  background: linear-gradient(180deg, #2a3b58, #1c2840); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .4);
}
html.own-theme.own-synty .lk-root .lk-tab.lk-on { background: linear-gradient(180deg, #ffc944, #ffa90d); color: var(--own-ink); border-color: #c58200; }
html.own-theme.own-synty .lk-root #lkClose { background: linear-gradient(180deg, #ff6a76, #d82f40); border-color: #a02030; }
html.own-theme.own-synty .lk-root #lkClaim:not(:disabled), html.own-theme.own-synty .lk-root #lkFree, html.own-theme.own-synty .lk-root #lkRedeem { background: linear-gradient(180deg, #3de08c, #22a866); color: var(--own-ink); border-color: #1f8a57; }
html.own-theme.own-synty .lk-root button:hover:not(:disabled) { filter: brightness(1.12); translate: 0 0; }
html.own-theme.own-synty .lk-root button:active:not(:disabled) { translate: 0 1px; box-shadow: none; }

/* ---- panel lobby online w karcie (lv-*) ---- */
html.own-theme.own-synty .lv-root { border-top: 1px solid var(--own-line); font-size: 15px; }
html.own-theme.own-synty .lv-root b { font-weight: 700; color: var(--own-yellow); }
html.own-theme.own-synty .lv-btn { font: 600 14px/1.1 var(--own-font); text-transform: uppercase; letter-spacing: .07em; padding: .55em 1em; border-radius: 3px; border: 1px solid var(--own-line); background: linear-gradient(180deg, #2a3b58, #1c2840); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .4); }
html.own-theme.own-synty .lv-btn:hover { filter: brightness(1.12); translate: 0 0; } html.own-theme.own-synty .lv-btn:active { translate: 0 1px; box-shadow: none; }
html.own-theme.own-synty .lv-inp { font: 600 15px var(--own-font); border: 1px solid var(--own-line); border-radius: 3px; background: #0b111b; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
html.own-theme.own-synty .lv-invite { background: #0f1724; border: 1px solid var(--own-line); border-left: 3px solid var(--own-yellow); border-radius: 4px; }

/* ---- przewijanie, podpowiedź „Click to play”, telefon ---- */
html.own-theme.own-synty, html.own-theme.own-synty * { scrollbar-color: var(--own-yellow) #0b111b; }
html.own-theme.own-synty #clickHint.on {
  padding: 10px 30px; border-radius: 0; border: 0; background: var(--own-yellow); color: var(--own-ink); font: 700 24px/1 var(--own-font); letter-spacing: .16em; text-transform: uppercase; box-shadow: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: clickHintPulse 1.1s ease-in-out infinite alternate;
}
html.own-theme.own-synty body.touch #touchMenu { border: 1px solid var(--own-line); border-radius: 4px; background: rgba(11, 17, 27, .88); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html.own-theme.own-synty #touchMenu i { background: var(--own-yellow); box-shadow: none; height: 3px; border-radius: 0; }
@media (orientation: portrait) {
  html.own-theme.own-synty #rotate i { border: 3px solid var(--own-yellow); border-radius: 8px; background: #0b111b; box-shadow: none; }
  html.own-theme.own-synty #rotate p { font-size: 28px; letter-spacing: .1em; text-transform: uppercase; }
}
@media (max-height: 560px) {
  html.own-theme.own-synty #card { padding: 8px 18px 14px; border-radius: 6px; }
  html.own-theme.own-synty #card button#play { font-size: 26px; padding: 9px 12px; letter-spacing: .12em; }
  html.own-theme.own-synty #card select { font-size: 13px; padding: 7px 26px 7px 10px; }
  html.own-theme.own-synty #card button { font-size: 14px; padding: 8px 10px; }
}
@media (max-height: 420px) {
  html.own-theme.own-synty #card button#play { font-size: 22px; padding: 7px 10px; }
  html.own-theme.own-synty #card select { font-size: 12px; padding: 5px 22px 5px 8px; }
  html.own-theme.own-synty #card button { font-size: 12px; padding: 6px 8px; }
}

/* ---- dok hali (ScreenGui/Bottom): łupkowe kafle z kolorowym paskiem u góry (kolor kategorii), ikona Synty barwiona w pliku (ICON_SWAP); inline box-shadow z composeShadow wymaga !important ---- */
html.own-theme.own-synty [data-n="ItemsButton"] { box-shadow: inset 0 3px 0 var(--own-cyan), 0 4px 14px rgba(0, 0, 0, .55) !important; }
html.own-theme.own-synty [data-n="ShopButton"] { box-shadow: inset 0 3px 0 var(--own-yellow), 0 4px 14px rgba(0, 0, 0, .55) !important; }
html.own-theme.own-synty [data-n="BattlePassButton"] { box-shadow: inset 0 3px 0 var(--own-orange), 0 4px 14px rgba(0, 0, 0, .55) !important; }
html.own-theme.own-synty [data-n="GadgetsButton"] { box-shadow: inset 0 3px 0 var(--own-green), 0 4px 14px rgba(0, 0, 0, .55) !important; }