/* Własny styl GUI „Jumpers” (cartoon, czarny obrys) — reguły CSS motywu. Ładowany przez own_theme.js tylko gdy motyw jest włączony (domyślnie; ?theme=orig wyłącza).
   Tokeny: GUI_STYLE.md. Wszystko po klasach i zmiennych CSS — żadnych słuchaczy per element. Każda reguła zaczyna się od html.own-theme (wygrywa kolejnością i specyficznością
   z blokiem <style> w index.html oraz ze stylami wstawianymi przez widoki). */
html.own-theme {
  --own-ink: #0d0d14;
  --own-yellow: #ffd23f; --own-orange: #ff8c42; --own-cyan: #3ec6ff; --own-green: #5ee26a; --own-red: #ff4d5e; --own-violet: #9b6bff; --own-pink: #ff7ac6;
  --own-navy: #2a3894; --own-navy-light: #4157c2; --own-navy-dark: #161d52;
  --own-text: #ffffff; --own-muted: #c9ceff;
  --own-font: "Lilita One", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --own-shadow: rgba(0, 0, 0, .35);
}
html.own-theme body { font-family: var(--own-font); }

/* ---- drzewa JSON (gui_view.js): obrys jako warstwa ::after wewnątrz elementu (nad dziećmi bez ZIndex), grubość z --ol (2 / 3 / 4 px wg rozmiaru) ---- */
html.own-theme .own-ol::after {
  content: ""; position: absolute; inset: 0; box-sizing: border-box; pointer-events: none;
  border: var(--ol, 0px) solid var(--own-ink); border-radius: inherit; /* bez --ol (element nie zmierzony / zbyt mały) obrysu nie ma — bezpieczniej niż 3 px na 4-pikselowej kresce */
}
/* przycisk 3D: dolna krawędź i twardy cień liczy gui_view.js (box-shadow), tu hover (jaśniej, −1 px) i wciśnięcie (+3 px, bez cienia) — właściwość translate składa się z transform elementu */
html.own-theme .own-btn { cursor: pointer; transition: filter .08s; }
html.own-theme .own-btn:hover { filter: brightness(1.1); translate: 0 -1px; }
html.own-theme .own-btn:active { translate: 0 4px; filter: brightness(.96); box-shadow: none !important; }
html.own-theme .rblx-text { font-synthesis: none; }

/* ---- menu startowe (#card): logo, rząd wyborów jako „pigułki”, wielki żółty Play, Settings / Locker obok siebie (v2, wzorzec Brawl Stars: jeden dominujący przycisk) ---- */
html.own-theme #menu { background: radial-gradient(ellipse at 50% 40%, rgba(40, 60, 170, .45), rgba(10, 14, 52, .88) 70%); padding: 92px 0 100px; box-sizing: border-box; } /* górny margines = pasek poziomu i monet, dolny = dok hali (Items / Shop / Battle Pass / Gadgets) — nie nachodzą na kartę; dawniej: dolny margines = dok hali (Items / Shop / Battle Pass / Gadgets) nie nachodzi na kartę */
html.own-theme #card {
  width: min(520px, 92vw); padding: 14px 30px 22px; background: linear-gradient(var(--own-navy-light) 0 22%, var(--own-navy) 22%); color: var(--own-text);
  border: 6px solid var(--own-ink); border-radius: 26px; font-family: var(--own-font);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 -10px 0 rgba(0, 0, 0, .18), 0 10px 0 var(--own-shadow);
}
html.own-theme #card h1.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
html.own-theme #menuLogo { display: block; width: min(350px, 100%); margin: -34px auto -4px; filter: drop-shadow(0 6px 0 var(--own-shadow)); pointer-events: none; }
html.own-theme #card .tag { display: none; color: var(--own-muted); font-size: 16px; margin: 0 0 10px; -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; }
html.own-theme #card .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
html.own-theme #card select {
  appearance: none; -webkit-appearance: none; min-width: 0; width: 100%; font: 400 18px/1.1 var(--own-font); padding: 10px 34px 10px 14px; border-radius: 14px; border: 4px solid var(--own-ink); color: var(--own-text);
  background: var(--own-navy-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M2 2l7 8 7-8' fill='none' stroke='%23ffd23f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center no-repeat;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .28), 0 4px 0 var(--own-shadow); text-shadow: 0 2px 0 var(--own-ink); cursor: pointer; text-overflow: ellipsis;
}
html.own-theme #card select:hover { filter: brightness(1.12); }
html.own-theme #card button {
  cursor: pointer; margin: 0; font: 400 20px/1.1 var(--own-font); padding: 12px 18px; border-radius: 16px; border: 4px solid var(--own-ink); color: var(--own-text);
  background: linear-gradient(rgba(255, 255, 255, .3) 0 38%, transparent 38%), var(--own-cyan); box-shadow: inset 0 -7px 0 #1f7c9e, inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--own-shadow);
  -webkit-text-stroke: 7px var(--own-ink); paint-order: stroke fill;
}
html.own-theme #card button#play {
  display: block; width: 100%; font-size: 40px; padding: 10px 18px 16px; border-radius: 20px; letter-spacing: .04em; -webkit-text-stroke: 10px var(--own-ink);
  background: linear-gradient(rgba(255, 255, 255, .34) 0 40%, transparent 40%), var(--own-yellow); box-shadow: inset 0 -10px 0 #c58f0a, inset 0 4px 0 rgba(255, 255, 255, .45), 0 8px 0 var(--own-shadow);
}
html.own-theme #card button#play:disabled { filter: grayscale(.7) brightness(.8); cursor: default; }
html.own-theme #card .mrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
html.own-theme #card button#settingsBtn { background: linear-gradient(rgba(255, 255, 255, .3) 0 38%, transparent 38%), var(--own-violet); box-shadow: inset 0 -7px 0 #5b3bb8, inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--own-shadow); }
html.own-theme #card button#lockerBtn { background: linear-gradient(rgba(255, 255, 255, .3) 0 38%, transparent 38%), var(--own-orange); box-shadow: inset 0 -7px 0 #b3541c, inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--own-shadow); }
html.own-theme #card button:hover:not(:disabled) { filter: brightness(1.08); translate: 0 -2px; }
html.own-theme #card button:active:not(:disabled) { translate: 0 5px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3) !important; }
html.own-theme #card button#adBtn { display: block; width: 100%; margin-top: 10px; font-size: 16px; padding: 8px 14px; background: linear-gradient(rgba(255, 255, 255, .3) 0 38%, transparent 38%), var(--own-green); box-shadow: inset 0 -7px 0 #2d8a37, inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--own-shadow); }
html.own-theme #card button#adBtn[hidden] { display: none; }
html.own-theme #card button#adBtn:disabled { filter: grayscale(.6) brightness(.85); }
html.own-theme #status { color: var(--own-muted); font-size: 14px; -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; }

/* ---- komunikat, ściąga klawiszy, HUD zapasowy (body.rblx ukrywa większość — #hp / #ammo / #board zostają poza drzewem JSON w trybach bez Gui) ---- */
html.own-theme #msg { background: var(--own-navy); border: 4px solid var(--own-ink); border-radius: 12px; font-size: 16px; box-shadow: 0 4px 0 var(--own-shadow); }
html.own-theme kbd {
  background: var(--own-navy-light); border: 2px solid var(--own-ink); border-bottom-width: 4px; border-radius: 6px; color: var(--own-text); font: 400 13px var(--own-font);
}
html.own-theme #help, html.own-theme #info { font-family: var(--own-font); }

/* ---- klasy ogólne dla widoków HTML: .own-card (okno / karta), .own-hbtn (przycisk 3D), .own-tile (kafel) — !important, bo widoki malują inline ---- */
html.own-theme body { font-synthesis: none; } /* Lilita One ma jedną grubość: 700 / 800 / 900 nie ma udawać pogrubienia */
html.own-theme .own-card {
  background: var(--own-navy) !important; border: 4px solid var(--own-ink) !important; border-radius: 18px !important; color: var(--own-text);
  box-shadow: 0 6px 0 var(--own-shadow); font-family: var(--own-font);
}
html.own-theme .own-hbtn {
  font: 400 18px/1.1 var(--own-font) !important; padding: 9px 18px !important; border-radius: 12px !important; border: 4px solid var(--own-ink) !important;
  background: var(--own-navy-light) !important; color: var(--own-text) !important; cursor: pointer; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow) !important;
  -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill;
}
html.own-theme .own-hbtn.own-go { background: var(--own-green) !important; box-shadow: inset 0 -6px 0 #2d8a37, inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow) !important; }
html.own-theme .own-hbtn:hover:not(:disabled) { filter: brightness(1.1); translate: 0 -1px; }
html.own-theme .own-hbtn:active:not(:disabled) { translate: 0 4px; box-shadow: none !important; }
html.own-theme .own-hbtn:disabled { opacity: .5; cursor: default; }

/* ---- komunikaty połączenia (connection_view) ---- */
html.own-theme .own-overlay { background: rgba(14, 16, 44, .8) !important; font-family: var(--own-font) !important; }
html.own-theme .own-card.own-card { padding: 26px 32px; }
html.own-theme .own-title { font: 400 30px var(--own-font) !important; color: var(--own-yellow); -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill; }
html.own-theme .own-sub { color: var(--own-muted) !important; font-size: 17px; }
html.own-theme .own-spin { border-color: var(--own-navy-dark) !important; border-top-color: var(--own-cyan) !important; border-width: 6px !important; outline: 3px solid var(--own-ink); }
html.own-theme .own-banner { background: var(--own-navy) !important; border: 4px solid var(--own-ink); border-radius: 12px !important; font: 400 17px var(--own-font) !important; color: var(--own-text) !important; box-shadow: 0 4px 0 var(--own-shadow); }
html.own-theme .own-chat { background: var(--own-navy) !important; border: 4px solid var(--own-ink); border-radius: 12px !important; font: 400 17px/1.35 var(--own-font) !important; box-shadow: 0 4px 0 var(--own-shadow); }

/* ---- wiersz kill feedu (hud.js) ---- */
html.own-theme .own-feedrow { background: var(--own-navy) !important; border: 4px solid var(--own-ink); border-radius: 12px !important; box-shadow: 0 3px 0 var(--own-shadow); }
html.own-theme .own-pm { padding: 1.2em 1.6em; }

/* ---- Locker (locker_view.js): KLASY lk-* (podstawowy wygląd = LK_CSS w widoku; tu tylko motyw, bez !important i bez selektorów po atrybutach style) ---- */
html.own-theme .lk-root { background: rgba(14, 16, 44, .86); font-family: var(--own-font); font-weight: 400; }
html.own-theme .lk-root b, html.own-theme .lk-root h3 { font-weight: 400; }
html.own-theme .lk-win { background: var(--own-navy); border: 6px solid var(--own-ink); border-radius: 22px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .1), inset 0 -8px 0 rgba(0, 0, 0, .16), 0 8px 0 var(--own-shadow); }
html.own-theme .lk-level, html.own-theme .lk-coins { font-weight: 400; font-size: 2em; color: var(--own-yellow); -webkit-text-stroke: 8px var(--own-ink); paint-order: stroke fill; }
html.own-theme .lk-h2, html.own-theme .lk-h3, html.own-theme .lk-tname { font-weight: 400; }
html.own-theme .lk-h2 { font-size: 1.4em; color: var(--own-yellow); -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill; }
html.own-theme .lk-h2 span, html.own-theme .lk-note, html.own-theme .lk-note2, html.own-theme .lk-xp, html.own-theme .lk-small, html.own-theme .lk-dim { color: var(--own-muted); opacity: .9; font-weight: 400; }
/* kafle / karty: płaskie, ciemny granat, czarny obrys; kolor rzadkości skórki (--c) jako ramka i pas u góry */
html.own-theme .lk-card, html.own-theme .lk-tier, html.own-theme .lk-input { background: var(--own-navy-dark); border: 4px solid var(--own-ink); border-radius: 14px; }
html.own-theme .lk-quest.lk-sp { border-color: var(--own-violet); }
html.own-theme .lk-skin {
  border: 3px solid var(--c); outline: 3px solid var(--own-ink); outline-offset: 0; border-radius: 14px;
  background: linear-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 34%, transparent 34%), var(--own-navy-dark);
}
html.own-theme .lk-skin.lk-eq, html.own-theme .lk-trow.lk-eq { border-color: #fff; }
html.own-theme .lk-ico { height: 56px; margin: .15em auto .25em; filter: drop-shadow(0 2px 0 var(--own-ink)); }
html.own-theme .lk-sw { border: 4px solid var(--own-ink); height: 16px; }
html.own-theme .lk-rar { font-size: .95em; -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; }
html.own-theme .lk-tier { border-width: 2px; border-radius: 10px; }
html.own-theme .lk-t-claimed { background: #1f5a35; } html.own-theme .lk-t-ready { background: #2f8a4a; } html.own-theme .lk-t-current { background: #2e5a9a; }
html.own-theme .lk-free-row { background: var(--own-navy-dark); border: 3px solid var(--own-green); outline: 3px solid var(--own-ink); border-radius: 14px; }
html.own-theme .lk-gold { color: var(--own-yellow); } html.own-theme .lk-ok-t { color: var(--own-green); }
html.own-theme .lk-res { -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; }
html.own-theme .lk-input { color: var(--own-text); font-family: var(--own-font); font-weight: 400; font-size: 17px; }
/* paski: czarny tor z obrysem, nasycone wypełnienie z jasnym pasem u góry */
html.own-theme .lk-bar { background: var(--own-navy-dark); border: 4px solid var(--own-ink); border-radius: 999px; }
html.own-theme .lk-bar-t { border-width: 2px; }
html.own-theme .lk-fill { background: linear-gradient(rgba(255, 255, 255, .28) 0 30%, transparent 30%), var(--own-cyan); border-radius: 999px; }
html.own-theme .lk-fill.lk-ok, html.own-theme .lk-fill.lk-done { background: linear-gradient(rgba(255, 255, 255, .28) 0 30%, transparent 30%), var(--own-green); }
html.own-theme .lk-fill.lk-sp { background: linear-gradient(rgba(255, 255, 255, .28) 0 30%, transparent 30%), var(--own-violet); }
/* przyciski 3D: granatowe, zakładka aktywna żółta, Close czerwony */
html.own-theme .lk-root button {
  font: 400 16px/1.1 var(--own-font); padding: .4em .9em; border-radius: 12px; border: 4px solid var(--own-ink); color: var(--own-text);
  background: var(--own-navy-light); cursor: pointer; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow);
  -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill;
}
html.own-theme .lk-root .lk-tab.lk-on { background: var(--own-yellow); box-shadow: inset 0 -6px 0 #a37f0a, inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow); }
html.own-theme .lk-root #lkClose { background: var(--own-red); box-shadow: inset 0 -6px 0 #a02a39, inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow); }
html.own-theme .lk-root #lkClaim:not(:disabled), html.own-theme .lk-root #lkFree, html.own-theme .lk-root #lkRedeem { background: var(--own-green); box-shadow: inset 0 -6px 0 #2d8a37, inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow); }
html.own-theme .lk-root button:hover:not(:disabled) { filter: brightness(1.1); translate: 0 -1px; }
html.own-theme .lk-root button:active:not(:disabled) { translate: 0 4px; box-shadow: none; }
html.own-theme .lk-root button:disabled { opacity: .45; cursor: default; }
html.own-theme .lk-tabs { flex-wrap: wrap; }
html.own-theme .lk-off { opacity: .72; }

/* ---- panel lobby online w karcie menu (lobby_view.js: klasy lv-*): Party / Duel / zaproszenie ---- */
html.own-theme .lv-root { border-top: 3px solid var(--own-ink); color: var(--own-text); font-family: var(--own-font); font-size: 16px; }
html.own-theme .lv-root b { font-weight: 400; color: var(--own-yellow); -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; }
html.own-theme .lv-msg { color: var(--own-muted); } html.own-theme .lv-msg[data-tone="info"] { color: var(--own-cyan); } html.own-theme .lv-msg[data-tone="warn"] { color: var(--own-orange); } html.own-theme .lv-msg[data-tone="err"] { color: var(--own-red); }
html.own-theme .lv-btn { font: 400 16px/1.1 var(--own-font); padding: .4em .9em; border-radius: 12px; border: 4px solid var(--own-ink); color: var(--own-text); background: var(--own-cyan); margin-left: 0; box-shadow: inset 0 -6px 0 #1f7c9e, inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--own-shadow); -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill; cursor: pointer; }
html.own-theme .lv-btn:hover { filter: brightness(1.1); translate: 0 -1px; } html.own-theme .lv-btn:active { translate: 0 4px; box-shadow: none; }
html.own-theme .lv-inp { font: 400 16px var(--own-font); padding: .4em .7em; border-radius: 12px; border: 4px solid var(--own-ink); background: var(--own-navy-dark); color: var(--own-text); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); }
html.own-theme .lv-inp::placeholder { color: var(--own-muted); opacity: .7; }
html.own-theme .lv-invite { background: var(--own-navy-dark); border: 4px solid var(--own-ink); border-radius: 12px; }
html.own-theme .lv-white { color: var(--own-text); }

/* paski przewijania ScrollingFrame / paneli: żółty suwak na ciemnym granacie zamiast białego systemowego */
html.own-theme, html.own-theme * { scrollbar-color: var(--own-yellow) var(--own-navy-dark); }

/* ---- toasty profilu (main.js profileToast: LEVEL UP / QUEST DONE / TITLE): kolor akcentu zostaje ramką, czarny obrys na zewnątrz ---- */
html.own-theme .own-toast { background: var(--own-navy) !important; font: 400 20px var(--own-font) !important; border-radius: 14px !important; box-shadow: 0 0 0 3px var(--own-ink), 0 6px 0 3px var(--own-shadow); -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill; }

/* ---- podpowiedzi „[E] Inspect” / „[E] Shop” nad graczami i stoiskami hali ---- */
html.own-theme .own-prompt { background: var(--own-navy) !important; border: 4px solid var(--own-ink); border-radius: 14px !important; font: 400 20px var(--own-font) !important; box-shadow: 0 4px 0 var(--own-shadow); -webkit-text-stroke: 6px var(--own-ink); paint-order: stroke fill; }
html.own-theme .own-prompt [data-k] { background: var(--own-yellow) !important; color: var(--own-ink) !important; border: 4px solid var(--own-ink) !important; border-radius: 10px !important; box-shadow: inset 0 -3px 0 #a37f0a; -webkit-text-stroke: 0; font: 400 22px var(--own-font) !important; }

/* ---- celownik: cienkie białe kreski dostają czarną poświatę (czytelność na jasnych mapach); mały element, jedna warstwa */
html.own-theme [data-n="Reticle"] { filter: drop-shadow(0 0 1px var(--own-ink)) drop-shadow(0 0 1px var(--own-ink)); }

/* ---- ściąga klawiszy desktopu: wyżej, żeby nie leżała pod przyciskami E / Q (CloseHint) w lewym dolnym rogu (zrzut 28.10) ---- */
html.own-theme #help { bottom: 170px; font-size: 14px; -webkit-text-stroke: 3px var(--own-ink); paint-order: stroke fill; text-shadow: none; }
html.own-theme #help kbd { -webkit-text-stroke: 0; }

/* ---- telefon w poziomie (wysokość ≤ 560 px): karta startowa dwukolumnowa — po lewej logo i Play, po prawej wybory i Settings / Locker; margines na pasek górny i dok (zrzut 844 × 390, 28.10) ---- */
@media (max-height: 560px) {
  html.own-theme #menu { padding: 46px 0 78px; box-sizing: border-box; }
  html.own-theme #card {
    width: min(760px, 96vw); padding: 8px 18px 12px; display: grid; grid-template-columns: 1fr 1.15fr; grid-template-areas: "logo mrow" "play mrow2" "ad ad" "status status"; gap: 8px 16px; align-items: center; border-radius: 20px;
    border-width: 5px;
  }
  html.own-theme #card .tag { display: none; }
  html.own-theme #menuLogo { grid-area: logo; width: min(300px, 100%); margin: -30px auto 0; }
  html.own-theme #card .mrow { grid-area: mrow; margin: 0; gap: 8px; }
  html.own-theme #card .mrow2 { grid-area: mrow2; margin: 0; gap: 8px; }
  html.own-theme #card button#play { grid-area: play; font-size: 34px; padding: 8px 12px 12px; -webkit-text-stroke: 8px var(--own-ink); }
  html.own-theme #card select { font-size: 15px; padding: 7px 28px 7px 10px; border-width: 3px; border-radius: 12px; }
  html.own-theme #card button { font-size: 17px; padding: 8px 10px; -webkit-text-stroke: 6px var(--own-ink); }
  html.own-theme #card #status { grid-area: status; margin: 0; }
  html.own-theme #card button#adBtn { grid-area: ad; margin: 0; font-size: 15px; padding: 6px 12px; }
  html.own-theme #card .lv-root { grid-column: 1 / -1; }
}

/* ---- mały ekran (wysokość ≤ 560 px, np. 800 × 450 w iframe CrazyGames i telefon w poziomie): drobne elementy HUD powiększone, żeby napisy były czytelne (wymóg platformy: czytelność przy DPR 1 na 800 × 450);
   skala od krawędzi, przy której element stoi, żeby nie wyjeżdżał poza ekran ---- */
@media (max-height: 560px) {
  html.own-theme [data-n="Daily"] > [data-n="Panel"] { scale: 1.45; transform-origin: 0 0; }
  html.own-theme [data-n="Progress"] > [data-n="Level"] { scale: 1.4; transform-origin: 50% 0; }
  html.own-theme [data-n="ScreenGui"] > [data-n="Top"] { scale: 1.3; transform-origin: 50% 0; }
}
@media (max-height: 520px) { html.own-theme #help { display: none; } } /* na małym ekranie ściąga klawiszy nachodziła na powiększony panel Daily Contracts (zrzut 800 × 450) */

/* ---- telefon w pionie: prośba o obrót (CrazyGames pokazuje własną; to zabezpieczenie dla innych hostów) ---- */
@media (orientation: portrait) {
  html.own-theme body.touch #rotate { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 40%, var(--own-navy-light), var(--own-navy-dark)); font-family: var(--own-font); color: var(--own-text); }
  html.own-theme #rotate i { display: block; width: 74px; height: 124px; margin: 0 auto 22px; border: 6px solid var(--own-ink); border-radius: 18px; background: var(--own-cyan); box-shadow: inset 0 -8px 0 #1f7c9e, 0 6px 0 var(--own-shadow); animation: own-rot 2.2s ease-in-out infinite; }
  html.own-theme #rotate p { margin: 0; font-size: 34px; -webkit-text-stroke: 8px var(--own-ink); paint-order: stroke fill; }
  html.own-theme #rotate small { font-size: 18px; color: var(--own-muted); -webkit-text-stroke: 4px var(--own-ink); paint-order: stroke fill; }
}
@keyframes own-rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---- przycisk menu na telefonie (zastępuje Esc): lewy górny róg, widoczny tylko gdy karta menu jest zamknięta ---- */
html.own-theme body.touch #touchMenu { position: fixed; z-index: 8; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); width: 46px; height: 46px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 4px solid var(--own-ink); border-radius: 14px; background: linear-gradient(rgba(255, 255, 255, .3) 0 38%, transparent 38%), var(--own-cyan); box-shadow: inset 0 -5px 0 #1f7c9e, 0 4px 0 var(--own-shadow); cursor: pointer; }
html.own-theme #touchMenu i { display: block; width: 20px; height: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--own-ink); }
html.own-theme #touchMenu:active { translate: 0 3px; box-shadow: none; }
html.own-theme #menu:not(.hidden) ~ #touchMenu { display: none !important; }

/* ---- bardzo niski ekran (≤ 420 px, np. iPhone SE w poziomie 667 × 375): karta jeszcze ciaśniejsza, żeby zmieścić się między paskiem poziomu a dokiem ---- */
@media (max-height: 420px) {
  html.own-theme #menu { padding: 56px 0 66px; }
  html.own-theme #card { padding: 6px 16px 8px; gap: 6px 14px; }
  html.own-theme #menuLogo { width: min(230px, 100%); margin: -22px auto -4px; }
  html.own-theme #card button#play { font-size: 28px; padding: 6px 10px 10px; -webkit-text-stroke: 7px var(--own-ink); }
  html.own-theme #card select { font-size: 13px; padding: 5px 24px 5px 8px; }
  html.own-theme #card button { font-size: 15px; padding: 6px 8px; }
  html.own-theme #card #status { font-size: 11px; }
}

/* podpowiedź „Click to play” w hali (kursor jeszcze nie zablokowany): pigułka nad dokiem, znika po pierwszym kliknięciu */
#clickHint { display: none; }
html.own-theme #clickHint.on { display: block; position: fixed; z-index: 7; left: 50%; top: 21%; translate: -50% 0; pointer-events: none; padding: 8px 26px 10px; border-radius: 18px; background: var(--own-yellow);
  color: #fff; font: 400 28px/1 var(--own-font); -webkit-text-stroke: 4px var(--own-ink); paint-order: stroke fill; border: 4px solid var(--own-ink); box-shadow: 0 6px 0 var(--own-ink); animation: clickHintPulse 1.1s ease-in-out infinite alternate; }
@keyframes clickHintPulse { from { scale: 1; } to { scale: 1.07; } }