/* WYGENEROWANE z public/css/czesci/*.css (tools/css/zbuduj.js) - NIE EDYTUJ TEGO PLIKU, edytuj czesci. */ /* PokeStoned v300 — jeden arkusz stylow (scalone: app.css + v232.css + anim.css, w tej kolejnosci) */ /* PokeStoned v300 — jeden arkusz stylow (scalone: app.css + v232.css + anim.css, w tej kolejnosci) */ /* ===================== app.css ===================== */ /* PokeStoned - jeden system stylow. Motyw granatowy (domyslny, jak v232) i jasny. Kolory tylko przez zmienne. */ :root { --bg: #0d1624; --bg2: #1f3149; --card: #18263a; --nav: #121f33; --line: #2a3d58; --text: #e6eef8; --muted: #93a6c2; --accent: #e05555; --accent2: #4a9ef0; --good: #3fbf6a; --bad: #ff6b6b; --warn: #ffa94d; --chip: #23364f; --shadow: 0 2px 10px rgba(0,0,0,.35); --r: 12px; --gap: 14px; --side: 250px; --top: 98px; --dock: 66px; --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --btn: linear-gradient(#2f8ae6, #1565c0); } [data-theme="light"] { --bg: #e9f0fa; --bg2: #dde7f5; --card: #ffffff; --nav: #ffffff; --line: #cfdcef; --text: #1d2b40; --muted: #5b6b82; --chip: #e7eef9; --accent2: #1d6fd0; --shadow: 0 2px 8px rgba(16,40,80,.08); --good: #1f8a47; --bad: #c8382d; } * { box-sizing: border-box; } a { color: var(--accent2); text-decoration: none; cursor: pointer; } h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; } h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; } p { margin: 0 0 8px; } .muted { color: var(--muted); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--gold); } .adm-grp td { background: var(--ps-surface-2); border-top: 1px solid var(--ps-border); } .gold { color: var(--gold); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; text-align: right; } .small { font-size: 12px; } .big { font-size: 18px; font-weight: 600; } .nowrap { white-space: nowrap; } .center { text-align: center; } /* ---------------- gora: pasek z walutami + rzad menu z rozwijanymi listami */ #nav { position: sticky; top: 0; z-index: 30; background: var(--nav); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } #nav .bar { max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 8px; height: 50px; } #nav .logo { font-weight: 800; font-size: 19px; color: var(--text); white-space: nowrap; margin-right: auto; } #nav .logo b { color: var(--accent2); } .pill { border: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; } .pill.pa { position: relative; overflow: hidden; min-width: 118px; justify-content: center; } .pill.pa i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ps-primary); } /* ---------------- panel trenera + tresc */ .shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--gap); max-width: 1440px; margin: 16px auto 0; padding: 0 16px calc(var(--dock) + 40px); align-items: start; } #side { position: sticky; top: calc(var(--top) + 16px); display: flex; flex-direction: column; gap: 12px; } #main { min-width: 0; container-type: inline-size; } #chat { position: fixed; right: 16px; bottom: calc(var(--dock) + 62px); width: min(390px, calc(100vw - 32px)); height: min(500px, 62vh); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.45); z-index: 27; display: none; flex-direction: column; overflow: hidden; } #chat.open { display: flex; } #chat .tabs { margin: 0; padding: 0 6px; } #chat .msgs { flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 13px; min-height: 0; } #chat .msg { padding: 2px 0; word-wrap: break-word; } #chat .msg .who { font-weight: 700; cursor: pointer; } #chat .msg .ts { color: var(--muted); font-size: 11px; margin-right: 4px; } #chat .msg .who.admin { color: var(--accent); } #chat form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); } #chat form input { flex: 1; } #chat .online { padding: 6px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); } /* ---------------- naglowki ekranow i mapa */ .hero { border-radius: 14px; padding: 18px 20px; color: #fff; margin-bottom: 14px; background: linear-gradient(120deg, #e05555, #b8323c); box-shadow: var(--shadow); } .hero .k { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; opacity: .85; font-weight: 700; } .hero h1 { margin: 2px 0 4px; font-size: 25px; } .hero p { margin: 0; opacity: .92; } .hero.blue { background: linear-gradient(120deg, #2f8ae6, #1565c0); } .hero.green { background: linear-gradient(120deg, #2f9e44, #1b6e30); } .hero.gold { background: linear-gradient(120deg, #1c6ac4, #a86f00); } .hero.dark { background: linear-gradient(120deg, #34495e, #1c2833); } .isl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .isl button { border-radius: 999px; padding: 7px 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .isl button.on { background: var(--btn); color: #fff; border-color: #1565c0; } .isl button:disabled { opacity: .5; } .cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--text); } .tile:hover { border-color: var(--accent2); } .tile .ti { font-size: 26px; } .plinko { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; } .plinko span { padding: 6px 4px; min-width: 40px; text-align: center; border-radius: 6px; background: var(--bg2); font-size: 11px; font-weight: 700; } .plinko span.hit { background: var(--gold); color: #3a2a00; } /* ---------------- elementy */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); margin-bottom: var(--gap); } .card > h2:first-child, .card > h3:first-child { margin-bottom: 10px; } .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); } .row.between { justify-content: space-between; } .row.nw { flex-wrap: nowrap; } .col { display: flex; flex-direction: column; gap: 6px; } .grow { flex: 1; min-width: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; } .b:hover { background: var(--bg2); } .b:disabled { opacity: .45; cursor: not-allowed; } .b.pri { background: var(--btn); border-color: #1565c0; color: #fff; } .b.pri:hover { filter: brightness(1.1); } .b.blue { background: var(--accent2); border-color: var(--accent2); color: #fff; } .b.good { background: var(--good); border-color: var(--good); color: #fff; } .b.bad { background: var(--bad); border-color: var(--bad); color: #fff; } .b.sm { padding: 3px 9px; font-size: 12px; } .b.lg { padding: 11px 20px; font-size: 15px; } .b.ghost { border-color: transparent; background: none; } input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r2); padding: 7px 10px; min-width: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent2) 45%, transparent); border-color: var(--accent2); } textarea { width: 100%; resize: vertical; min-height: 80px; } label.f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); } label.f > input, label.f > select { color: var(--text); font-size: 14px; } .tabs { gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; } .tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; } .tabs a.on { color: var(--text); border-bottom-color: var(--accent); } table.t { width: 100%; border-collapse: collapse; } table.t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); } table.t td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.t tr:hover td { background: var(--bg2); } table.t tr.click { cursor: pointer; } .tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .3px; } .chip { display: inline-block; } .badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; } .bar > i { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .35s; } .bar.hp > i.mid { background: var(--warn); } .bar.hp > i.low { background: var(--bad); } .bar.exp > i { background: var(--accent2); } .bar.pa > i { background: var(--gold); } .empty { padding: 26px; text-align: center; color: var(--muted); } .hr { height: 1px; background: var(--line); margin: 10px 0; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; } .kv > :nth-child(odd) { color: var(--muted); } .stat { padding: 10px 12px; border-radius: var(--r2); background: var(--bg2); } .stat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat .k { font-size: 12px; color: var(--muted); } .ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #fff; flex: none; letter-spacing: -.3px; } .ico.s { width: 24px; height: 24px; font-size: 9px; border-radius: 6px; } /* ---------------- pokemony */ .mon { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); position: relative; } .mon.click { cursor: pointer; } .mon.click:hover { border-color: var(--accent2); } .mon.sel { outline: 2px solid var(--accent2); } .mon .nm { font-weight: 700; } .mon .lv { color: var(--muted); font-size: 12px; } .mon.fainted img { filter: grayscale(1); opacity: .6; } .shiny { color: var(--gold); } .types { display: inline-flex; gap: 4px; } .loc { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; text-align: left; font: inherit; color: inherit; } .loc:hover { border-color: var(--accent); } .loc.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); } .loc .t { font-weight: 700; } .loc .m { font-size: 12px; color: var(--muted); } .arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 14px; } .arena .side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .arena .side .bar { width: 160px; } .arena .vs { font-weight: 900; color: var(--muted); } .arena .side.hit img { animation: shake .3s; } @keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .blog { max-height: 260px; overflow-y: auto; font-size: 13px; padding: 8px 10px; background: var(--bg2); border-radius: var(--r2); margin-top: 10px; } .blog div { padding: 1px 0; } .blog .r { color: var(--muted); font-weight: 700; margin-top: 4px; } .balls { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* ---------------- gielda */ .ex { display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; gap: var(--gap); align-items: start; } @container (max-width: 1180px) { .ex { grid-template-columns: 210px minmax(0, 1fr); } .ex > :last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); align-items: start; } } @container (max-width: 760px) { .ex { grid-template-columns: minmax(0, 1fr); } #ilist { max-height: 260px; } } .inst { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: var(--r2); cursor: pointer; } .inst:hover, .inst.on { background: var(--bg2); } .inst .s { font-weight: 700; font-family: var(--mono); } .inst .n { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .chart { width: 100%; height: 340px; display: block; cursor: crosshair; } .book { font-family: var(--mono); font-size: 12px; } .book .lv { display: grid; grid-template-columns: 1fr 1fr; padding: 1px 6px; position: relative; cursor: pointer; } .book .lv i { position: absolute; top: 0; bottom: 0; right: 0; opacity: .14; } .book .ask { color: var(--bad); } .book .ask i { background: var(--bad); } .book .bid { color: var(--good); } .book .bid i { background: var(--good); } .book .mid { text-align: center; padding: 6px; font-weight: 700; font-size: 14px; border-block: 1px solid var(--line); margin: 3px 0; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; } .seg a { padding: 5px 11px; color: var(--muted); font-weight: 600; font-size: 12px; } .seg a.on { background: var(--bg2); color: var(--text); } .seg.side a.on.buy { background: var(--good); color: #fff; } .seg.side a.on.sell { background: var(--bad); color: #fff; } .modal { background: var(--card); border-radius: var(--r); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .modal.wide { width: min(860px, 100%); } .modal .x { float: right; } .toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--r2); box-shadow: var(--shadow); animation: tin .2s; pointer-events: auto; } .toast.err { background: var(--bad); color: #fff; } .toast.ok { background: var(--good); color: #fff; } @keyframes tin { from { opacity: 0; transform: translateY(8px); } } /* ---------------- ekran logowania */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent), radial-gradient(900px 500px at 100% 100%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent), var(--bg); } .auth .card { width: min(420px, 100%); padding: 26px; } .starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .starters button { padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); cursor: pointer; font: inherit; } .starters button:hover { border-color: var(--accent); } /* ---------------- telefon / waski ekran */ @media (max-width: 980px) { .shell { grid-template-columns: minmax(0, 1fr); padding: 0 10px calc(var(--dock) + 60px); } #side { position: static; order: 2; } #side .extra { display: none; } #nav .bar { overflow-x: auto; scrollbar-width: none; } #nav .logo { margin-right: 8px; } .split { grid-template-columns: 1fr; } } /* starsze ekrany z samym

wygladaja jak naglowki .hero */ #main > h1:first-child, #main > .row:first-child > h1 { background: linear-gradient(120deg, #2f8ae6, #1565c0); color: #fff; padding: 18px 20px; border-radius: 14px; font-size: 24px; box-shadow: var(--shadow); margin-bottom: 14px; } #main > .row:first-child > h1 { flex: 1; margin: 0; } #main > .row:first-child { margin-bottom: 14px; } /* ===================== v232.css ===================== */ /* Wszystkie style gry w jednym miejscu (v209). Sekcje "=====" to dawne osobne bloki stylów, w kolejności z pliku. Nowy wygląd: dopisz regułę na KOŃCU sekcji, której dotyczy, albo nowy blok style z id na końcu pliku. */ :root { --b1: #7bb0ec; --b2: #f0b05a; --pn: #8fc3f7; --rw: #bcdcf9; --ink: #10202f; --hd: #c75a38; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); --ps-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Ubuntu, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji"; --ps-bg1: #eef3f9; --ps-bg2: #dde7f2; --ps-surface: #ffffff; --ps-surface-2: #eef5fc; --ps-surface-3: #dcebf8; --ps-border: #c7dbef; --ps-text: #17283a; --ps-muted: #5b6f84; --ps-primary: #1677d2; --ps-primary-2: #0c5ead; --ps-accent: #7c5cff; --ps-ok: #2e9e55; --ps-warn: #d98a12; --ps-err: #d0453a; --ps-nav1: #1a87e2; --ps-nav2: #0857ad; --ps-radius: 12px; --ps-shadow: 0 2px 6px #1c3a5a1f, 0 8px 22px #1c3a5a14; --ps-hp-g: #3fc463; --ps-hp-y: #f0c22b; --ps-hp-r: #e2483b; color-scheme: light; --ps-nav-h: 88px; /* nadpisywane na bieżąco z JS (ResizeObserver na