:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#eeeeee;background:#111111;font-synthesis:none;--paper:#111111;--ink:#eeeeee;--muted:#7b7e77;--line:#3a3a3a;--orange:#dc6945;--green:#55dd88;--x-tint:#241a14;--o-tint:#14211a}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button{transition:background .18s,transform .18s,color .18s}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #55dd88;outline-offset:5px}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.55}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{max-width:1120px;margin:auto;padding:0 44px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-size:23px;font-weight:800;letter-spacing:-1px}.brand-light{font-weight:450}.brand-dot{color:var(--orange)}.brand-icon{width:34px;height:34px;position:relative;margin-right:11px;color:var(--orange);font-size:39px;font-weight:500;line-height:23px}.brand-icon span{position:absolute;right:0;bottom:0;color:var(--green);font-size:29px;line-height:20px}.header-right{display:flex;align-items:center;gap:30px}.small-label{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:600}.text-button{border:0;background:none;padding:6px 0;color:var(--ink);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:8px}.text-button:hover{color:var(--orange)}.question-icon{border:1px solid #5c6158;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;font-size:11px}.intro{padding:47px 0 39px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.6px;color:var(--green);display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:48px;line-height:1.08;letter-spacing:-2.3px;font-weight:650;margin:16px 0 14px}h1>span,dialog h2>span{color:var(--orange)}.intro p{color:var(--muted);font-size:13px;margin:0;line-height:1.6}.intro-art{width:220px;height:160px;position:relative;transform:rotate(-9deg);margin-right:36px;user-select:none}.art-x{position:absolute;left:5px;top:-28px;font-size:155px;font-weight:300;color:var(--orange);line-height:1}.art-o{position:absolute;right:0;top:27px;font-size:140px;font-weight:300;color:var(--green);line-height:1}.art-caption{position:absolute;bottom:0;left:24px;font-size:12px;letter-spacing:.2px;font-family:Georgia,serif;font-style:italic;color:var(--muted);transform:rotate(9deg)}.game-layout{display:grid;grid-template-columns:280px 1fr;gap:30px}.sidebar{padding:7px 0}.section-label{display:flex;gap:12px;color:#9a9f96;font-size:10px;font-weight:600;letter-spacing:1.4px;margin:0 0 17px}.section-label>span{color:#8f968c}.mode-switch{display:flex;border:1px solid var(--line);padding:4px;border-radius:10px;background:#1b1b1b}.mode-button{flex:1;padding:11px 9px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}.mode-button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}.mode-button.active{background:#1b1b1b;color:var(--ink);box-shadow:0 2px 5px #25282109}.muted{font-size:11px;line-height:1.7;color:var(--muted)}.mode-description{margin:12px 0 25px;max-width:230px}.players-section{margin-top:27px}.player-card{display:flex;gap:13px;align-items:center;min-height:68px;border:1px solid var(--line);border-radius:10px;padding:10px 15px;margin:9px 0;background:#1b1b1b}.player-card.active-x{border-color:#c96f4a;background:var(--x-tint)}.player-card.active-o{border-color:#4f9c73;background:var(--o-tint)}.player-symbol{font-size:41px;line-height:1;width:32px;text-align:center;font-weight:350}.x-color{color:var(--orange)}.o-color{color:var(--green)}.player-info{display:flex;flex:1;flex-direction:column;gap:5px}.player-info strong{font-size:12px;font-weight:650}.player-info>span{font-size:10px;color:var(--muted)}.turn-dot{width:6px;height:6px;border-radius:50%;background:#4a4f47}.active-x .turn-dot{background:var(--orange)}.active-o .turn-dot{background:var(--green)}.tip-card{position:relative;padding:20px 19px 16px;margin-top:26px;background:#eeeee5;border-radius:10px}.tip-icon{position:absolute;right:16px;top:12px;font-size:26px;color:#9aa08f}.tip-card h3{font-size:12px;margin:0 0 9px;font-weight:650}.tip-card p{font-size:11px;line-height:1.8;color:#9ba095;max-width:214px;margin:0 0 12px}.tip-card .text-button{font-size:10px;gap:15px}.arena{border:1px solid var(--line);border-radius:16px;background:#171717;padding:22px 28px 0;box-shadow:0 4px 20px #33392002;display:flex;flex-direction:column;align-items:stretch}.arena-top{display:flex;justify-content:space-between;align-items:center}.round-label{font-size:9px;letter-spacing:1.5px;color:#969b8e;font-weight:650}.round-label span{color:var(--ink);margin-left:5px}.connection{font-size:9px;display:flex;align-items:center;gap:6px;background:#16221b;padding:6px 9px;border-radius:5px;color:#9fd6ac}.connection i{height:5px;width:5px;background:#55dd88;border-radius:50%}.connection.offline{color:#e5b586;background:#241a12}.connection.offline i{background:#d99a5f}.game-heading{text-align:center;margin:24px 0 23px;min-height:59px}.game-heading h2{font-size:26px;font-weight:600;letter-spacing:-.85px;margin:0 0 8px}.title-dot{color:#6f7469}.game-heading p{font-size:11px;color:var(--muted);margin:0;line-height:1.6}.board-wrap{width:min(100%,330px);margin:0 auto;position:relative}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;aspect-ratio:1}.cell{border:1px solid #333633;border-radius:10px;background:#1b1b1b;position:relative;display:flex;align-items:center;justify-content:center;color:var(--orange);min-width:0;min-height:0;padding:0;opacity:1!important}.cell:hover:not([aria-disabled=true]){background:#232323;border-color:#4a5049}.cell[aria-disabled=true]{cursor:default}.cell .mark{font-size:69px;font-weight:350;line-height:1;display:block;animation:place .18s ease-out}.cell.piece-x{background:var(--x-tint);border-color:#5a3122;color:var(--orange)}.cell.piece-o{background:var(--o-tint);border-color:#24402f;color:var(--green)}.cell .age{position:absolute;top:8px;left:10px;font-size:9px;font-weight:600;opacity:.65}.cell .vanish-label{display:none;position:absolute;bottom:6px;font-size:7px;letter-spacing:1px;font-weight:700}.cell.vanishing{border:1.5px dashed currentColor}.cell.vanishing .mark{opacity:.35}.cell.vanishing .vanish-label{display:block}.cell.winning{background:#16281c;border:1.5px solid #55dd88}.cell.winning .mark{animation:win .45s ease}.board.preview .cell{background:#1b1b1b}.move-hint{display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;text-align:center;font-size:10px;color:#979c8f;line-height:1.6;padding:10px 0}.hint-dot{width:5px;height:5px;background:#5f6659;border-radius:50%;flex-shrink:0}.move-hint.warning{color:#e0925e}.move-hint.warning .hint-dot{width:10px;height:10px;background:none;border:1px dashed #e0925e;border-radius:3px}.arena-bottom{margin-top:auto;border-top:1px solid #edeee6;min-height:57px;display:flex;justify-content:space-between;align-items:center;gap:12px}.move-counter{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1px;color:#969b8e;font-weight:500}.move-counter>span{font-size:12px;letter-spacing:0;color:#d8dcd2}.arena-bottom .text-button{font-size:10px}.reset-icon{font-size:17px;color:#97a188}.session-bar{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;margin:25px 0 0;padding:19px 25px}.session-title{display:flex;align-items:center;gap:14px}.session-icon{font-size:26px;color:#97a188}.session-title>div{display:flex;flex-direction:column;gap:5px}.session-title strong{font-size:11px;font-weight:600}.session-title>div>span{font-size:10px;color:var(--muted)}.scoreboard{display:flex;gap:20px;align-items:center}.scoreboard>div{display:flex;gap:14px;align-items:center}.scoreboard>div>span:not(.score-symbol){font-size:10px;color:var(--muted)}.score-symbol{font-size:28px;line-height:1}.scoreboard strong{font-size:25px;font-weight:500}.score-divider{font-size:18px;color:#7d8278}footer{display:flex;justify-content:space-between;font-size:9px;color:#8f9488;padding:28px 0 25px;align-items:center;letter-spacing:.1px}.footer-star{font-size:20px;color:var(--green);margin-left:9px;vertical-align:middle}.primary-button{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#07140c;border:0;border-radius:8px;padding:14px 16px;font-size:12px;font-weight:600;width:100%}.primary-button:hover{background:#3fbf74}.primary-button>span{font-size:18px}.or{text-align:center;font-size:9px;color:var(--muted);margin:16px 0}.field-label{display:block;color:var(--muted);font-size:9px;letter-spacing:.7px;margin-bottom:8px}.join-row{display:flex;gap:7px}.join-row input{width:100%;min-width:0;text-transform:uppercase;letter-spacing:2px;border:1px solid #3a3f38;background:#1b1b1b;border-radius:7px;padding:12px;font-size:13px}.join-row input::placeholder{letter-spacing:1px;text-transform:none;font-size:11px}.join-button{width:45px;flex-shrink:0;background:var(--green);color:white;border:0;border-radius:7px;font-size:22px}.room-panel{padding:16px;border:1px solid #33443a;border-radius:9px;background:#16221b}.room-code-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.room-code-row strong{font-size:24px;letter-spacing:4px;font-weight:600}.copy-button{background:transparent;border:0;color:var(--green);font-size:23px;padding:2px 5px}.secondary-button{background:#1b1b1b;border:1px solid #3a3f38;color:var(--ink);border-radius:6px;padding:10px 8px;font-size:10px;width:100%}.room-hint{font-size:10px;margin:10px 0}.leave-button{font-size:10px;color:#d08a6a}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:14px 22px;border-radius:10px;font-size:12px;box-shadow:0 5px 25px #0002;max-width:calc(100% - 32px);width:max-content;z-index:10;line-height:1.5}dialog{border:1px solid var(--line);background:var(--paper);border-radius:18px;max-width:480px;width:calc(100% - 32px);padding:28px;color:var(--ink);box-shadow:0 20px 100px #0002}dialog::backdrop{background:#252c2566;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.close-button{font-size:26px;background:none;border:0;color:var(--muted);padding:0 4px}dialog h2{font-size:29px;letter-spacing:-1px;line-height:1.15;margin:17px 0 25px}.rules-list{padding-left:22px;margin:0}.rules-list li{padding-left:7px;margin:18px 0}.rules-list li::marker{color:var(--orange);font-weight:600}.rules-list strong{font-size:13px}.rules-list p,.reset-copy{font-size:12px;line-height:1.8;color:#9aa093;margin:6px 0}.dialog-note{font-size:11px;line-height:1.8;color:#9aa093;background:#1b1b1b;border-radius:8px;padding:13px;margin:20px 0}.reset-copy{margin:0 0 25px}@keyframes place{from{transform:scale(.7);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes win{50%{transform:scale(1.15)}}
@media(min-width:1400px){.shell{max-width:1190px}.header{height:108px}.intro{padding:53px 0 45px}.game-layout{grid-template-columns:300px 1fr;gap:38px}.board-wrap{width:350px}.arena{padding-left:35px;padding-right:35px}.game-heading{margin-top:26px;margin-bottom:26px}}
@media(max-width:800px){.shell{padding:0 25px}.desktop-label{display:none}.game-layout{grid-template-columns:230px 1fr;gap:20px}.arena{padding:18px 18px 0}.intro-art{margin-right:0;transform:rotate(-9deg) scale(.8);transform-origin:right center}.game-heading h2{font-size:23px}.cell .mark{font-size:57px}.game-heading p{font-size:10px}.arena-bottom{flex-wrap:wrap;gap:4px;padding:10px 0}.move-counter{font-size:7px}.session-bar{padding:16px}.scoreboard{gap:12px}.scoreboard>div{gap:8px}.session-title strong{font-size:10px}}
@media(max-width:620px){.shell{padding:0 20px}.header{height:77px}.brand{font-size:21px}.header-right .text-button{font-size:11px}.intro{padding:31px 0 26px}.eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:37px;letter-spacing:-1.6px;margin-top:13px}.intro p{font-size:11px;max-width:230px}.intro-art{width:100px;height:110px;margin-left:-8px;flex-shrink:0;transform:rotate(-9deg) scale(.72)}.art-x{font-size:100px;left:-4px;top:-4px}.art-o{font-size:96px;right:-21px;top:36px}.art-caption{display:none}.game-layout{display:flex;flex-direction:column;gap:20px}.sidebar{display:contents}.mode-section{order:0}.section-label{font-size:9px;margin-bottom:12px}.mode-description{max-width:none;margin:9px 0 0;font-size:10px}.players-section{order:1;margin:0;display:flex;gap:9px}.players-section .section-label{display:none}.player-card{flex:1;padding:10px;min-height:61px;margin:0;gap:8px}.player-symbol{font-size:34px;width:28px}.player-info strong{font-size:11px}.player-info>span{font-size:9px}.turn-dot{width:5px;height:5px}.arena{order:2;padding:17px 18px 0;border-radius:13px}.game-heading{margin:21px 0 20px;min-height:54px}.game-heading h2{font-size:25px}.board-wrap{width:min(100%,340px)}.board{gap:7px}.cell .mark{font-size:67px}.move-hint{font-size:9px;min-height:48px}.arena-bottom{min-height:54px;flex-wrap:nowrap}.tip-card{order:3;margin:0;padding:17px 18px}.tip-card p{max-width:85%;margin:0;font-size:10px}.tip-card .text-button{margin-top:8px}.tip-card h3{margin-bottom:7px}.session-bar{margin-top:20px;gap:13px;flex-wrap:wrap}.session-title{gap:10px}.session-title strong{font-size:11px}.scoreboard{margin-left:auto;gap:12px}.scoreboard>div>span:not(.score-symbol){font-size:9px}footer{font-size:8px;padding:23px 0;gap:12px}footer>span:last-child{max-width:115px;text-align:right}.footer-star{font-size:15px;margin-left:4px}#online-lobby,.room-panel{margin-top:15px}.room-code-row{margin-bottom:10px}.room-panel .room-hint{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:620px){.intro-art{display:none}.intro p{max-width:none}}

.mode-button{min-width:0;flex-direction:column;gap:6px;padding:10px 4px;font-size:11px}
/* --- Playora: wspólny motyw (na bazie Collective Conflict) --- */
:root{color-scheme:dark;--playora-header-height:56px}
.small-label,.eyebrow,.section-label,.round-label,.move-counter,.field-label{text-transform:uppercase}
.mode-button.active{background:var(--playora-accent);color:#07140c;box-shadow:none}
.primary-button{background:var(--playora-accent);color:#07140c}
.toast{background:#252525;color:#eee}
.round-name{color:#969b8e;font-weight:inherit;font-size:9px;letter-spacing:1.5px}
.move-counter .moves-label{font-size:8px;letter-spacing:1px;color:#969b8e}
dialog{border:1px solid var(--playora-border);border-radius:14px}
.playora-header{min-height:56px}
.shell>footer{border-top:1px solid var(--line)}