@font-face{font-family:pixel;src:url(pixel.ttf)}:root{--game-color:rgb(60,150,190);--white:rgba(255,255,255,.8);--shadow:rgba(0,0,0,.8)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:pixel,monospace;background:rgb(130,130,130) url(bg.jpg) center/cover fixed no-repeat;color:white}body{min-height:100dvh}button,input,select,textarea{font-family:pixel,monospace}.screen{min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.hero,.game-toolbar{max-width:1180px;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(0,0,0,.1);padding:8px 12px;text-shadow:1px 1px 0 var(--shadow),-1px -1px 0 rgba(255,255,255,.6)}h1,h2{margin:.12em 0;font-weight:400}h1{font-size:clamp(1.7rem,5vmin,3.5rem);color:rgba(60,150,190,1)}h2{font-size:1.25rem}.eyebrow{font-size:.7rem;color:rgba(230,200,50,.95);letter-spacing:.08em}.config-layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}.panel{position:relative;background:rgba(0,0,50,.5);border:2px solid rgba(255,255,255,.3);box-shadow:0 0 1vmin rgba(0,0,0,.3),0 0 0 .35vmin rgba(255,255,255,.2) inset;padding:14px;text-shadow:1px 1px 0 var(--shadow),-1px -1px 0 rgba(255,255,255,.35)}.heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.button{border:3px solid rgba(255,255,255,.88);background:rgba(228,232,255,.94);color:rgb(18,45,72);padding:.62rem .8rem;cursor:pointer;text-shadow:0 1px 0 #fff;font-weight:700}.button:hover,.button:focus-visible{color:rgb(5,24,42);background:rgb(255,255,255);border-color:#fff;outline:2px solid rgba(20,50,80,.8)}.button.primary{font-size:clamp(1.2rem,3vmin,2rem);min-width:min(48vmin,330px);background:rgb(232,235,255);color:rgb(12,39,65)}.button.subtle{background:rgba(8,18,45,.88);color:#fff;border-color:rgba(255,255,255,.7);text-shadow:1px 1px 0 #000}.button.small{padding:.38rem .55rem;font-size:.72rem}.icon-button{min-width:2.7rem;font-size:1.25rem;line-height:1}.button-row,.inline{display:flex;gap:6px;flex-wrap:wrap}.editor-layout{display:grid;grid-template-columns:minmax(180px,270px) 1fr;gap:12px}.piece-editor{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:1;border:.5vmin solid var(--white);box-shadow:.3vmin .3vmin 0 var(--shadow);background-image:linear-gradient(to right,rgba(150,150,150,1) 1px,rgba(0,0,0,.3) 1px),linear-gradient(to bottom,rgba(150,150,150,1) 1px,rgba(0,0,0,.3) 1px);touch-action:none}.editor-cell{border:1px solid rgba(150,150,150,.8);background:transparent}.editor-cell.active{background:var(--piece-color);box-shadow:0 0 0 2px rgba(255,255,255,.45) inset}.fields{display:grid;align-content:start;gap:8px}label{display:grid;gap:5px;font-size:.78rem;color:rgba(255,255,255,.8)}input,select,textarea{width:100%;padding:.58rem;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.32);color:white}input:focus,select:focus,textarea:focus{outline:2px solid rgba(230,200,50,.9)}input[type=color]{height:42px;padding:3px}.message{min-height:1.3em;font:700 .76rem system-ui;color:rgba(255,255,255,.7);text-shadow:none}.message.error{color:#ff7888}.message.success{color:#8fffc0}.message.warning{color:#ffd85c}.rotation-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:1;border:2px solid rgba(255,255,255,.5);position:relative;background:rgba(0,0,0,.25)}.mini-cell{border:1px solid rgba(150,150,150,.25)}.mini-cell.active{background:var(--piece-color)}.mini-grid:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid white;border-radius:50%;transform:translate(-50%,-50%)}.piece-list{display:grid;gap:5px;max-height:320px;overflow:auto;margin-bottom:10px}.piece-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:7px;padding:5px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.25)}.piece-icon{display:grid;grid-template-columns:repeat(4,1fr);width:40px;aspect-ratio:1}.piece-icon i.active{background:var(--color)}.piece-actions{display:flex;justify-self:end}.piece-actions button{width:27px;height:27px;padding:0;color:white;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.3)}.grid-config{display:grid;grid-template-columns:minmax(150px,1fr) 105px;gap:12px;margin-bottom:12px}.grid-stage{width:100%;max-width:210px;aspect-ratio:1;display:grid;place-items:center;background:rgba(0,0,0,.12)}#gridThumb{background-size:var(--grid-x) var(--grid-y);background-image:linear-gradient(to right,rgba(150,150,150,1) 1px,rgba(0,0,0,.3) 1px),linear-gradient(to bottom,rgba(150,150,150,1) 1px,rgba(0,0,0,.3) 1px);border:.45vmin solid var(--white);box-shadow:.3vmin .3vmin 0 var(--shadow)}.grid-values{display:grid;align-content:center;gap:12px}.grid-values input{font-size:1.35rem;text-align:center;color:rgba(230,100,50,.95)}.grid-values label+label input{color:rgba(230,200,50,.95)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.settings-grid .wide{grid-column:1/-1}.controls-heading{margin-top:18px}.key-bindings{display:grid;gap:4px}.binding-row{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:6px;font-size:.78rem}.binding-row .button{padding:.45rem}.binding-row .listening{color:#ff7888}.game-screen{display:grid;grid-template-rows:auto 1fr auto}.game-layout{display:grid;grid-template-columns:145px minmax(240px,560px) 145px;justify-content:center;align-items:start;gap:12px}.game-stats{display:grid;gap:13px}.game-stats div{display:grid}.game-stats span{font-size:.65rem;color:rgba(255,255,255,.7)}.game-stats strong{font-size:1.25rem;color:var(--game-color)}.board-shell{height:min(78dvh,860px);display:flex;justify-content:center}#gameCanvas{position:relative;height:100%;max-width:100%;background:transparent;border:max(4px,.7vmin) solid var(--game-color);box-shadow:0 0 1vmin rgba(0,0,0,.6),0 0 0 .2vmin rgba(255,255,255,.4)}.queue{display:grid;gap:12px}.preview canvas{position:relative;width:100%;height:120px}.touch-controls{display:none;position:fixed;inset:0;z-index:900;width:100%;height:100%;pointer-events:none;font-family:system-ui}.touch-controls.active{display:block}.touch-controls button{position:absolute;display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:2em;background:transparent;color:white;pointer-events:auto;touch-action:none}.touch-controls .touch-icon{font-size:clamp(2rem,8vmin,5rem);opacity:.12;text-shadow:2px 2px 0 #000;transition:opacity .1s,background .1s}.touch-controls button.pressed,.touch-controls button:active{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}.touch-controls button.pressed .touch-icon,.touch-controls button:active .touch-icon{opacity:1}#controlLeft{width:30%;height:40%;top:60%;left:0}#controlRight{width:30%;height:40%;top:60%;left:70%}#controlRotateLeft{width:30%;height:59%;top:0;left:0}#controlRotateRight{width:30%;height:59%;top:0;left:70%}#controlDown{width:38%;height:50%;top:50%;left:31%}#controlHold{width:16%;height:20%;top:2%;left:42%}#controlHold .touch-icon{font-family:pixel;font-size:clamp(1.5rem,5vmin,3rem)}.modal{position:fixed!important;z-index:9999;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);padding:20px;transform:none!important}.modal[hidden],.screen[hidden]{display:none}.modal-card{display:grid;gap:8px;margin:auto;width:min(360px,100%);padding:24px;background:rgba(0,0,50,.85);border:2px solid rgba(255,255,255,.4);box-shadow:0 0 2vmin #000,0 0 1vmin rgba(255,255,255,.3) inset;text-align:center}@media(max-width:1000px){.config-layout{grid-template-columns:1fr 1fr}.settings{grid-column:1/-1}.game-layout{grid-template-columns:115px minmax(230px,1fr) 115px}}@media(max-width:700px){.config-layout{grid-template-columns:1fr}.settings{grid-column:auto}.screen{padding:8px}.editor-layout{grid-template-columns:minmax(165px,230px) 1fr}.game-toolbar h1{font-size:1.1rem}.game-layout{grid-template-columns:1fr 100px;grid-template-areas:"board queue" "stats stats";gap:6px}.board-shell{grid-area:board;height:min(61dvh,650px)}.queue{grid-area:queue}.game-stats{grid-area:stats;grid-template-columns:repeat(5,1fr);padding:8px;gap:3px}.game-stats strong{font-size:.85rem}.preview{padding:6px}.preview canvas{height:85px}}@media(max-width:470px){.editor-layout{grid-template-columns:1fr}.piece-editor{max-width:240px}.settings-grid{grid-template-columns:1fr}.settings-grid .wide{grid-column:auto}.grid-stage{max-width:180px}.game-toolbar .button{padding:.38rem;font-size:.6rem}}
/* Jednoekranowy uklad: dokument nie przewija sie, tylko aktywna zakladka w razie potrzeby. */
html,body{width:100%;height:100%;overflow:hidden}
#configScreen{height:100dvh;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
.config-tabs{display:flex;justify-content:center;gap:5px;width:min(100%,1180px);margin:0 auto 7px}
.config-tabs button{width:clamp(44px,7vmin,68px);height:clamp(38px,6vmin,56px);border:2px solid rgba(255,255,255,.38);background:rgba(0,0,0,.24);color:rgba(255,255,255,.55);font-size:clamp(1.15rem,3vmin,1.8rem);cursor:pointer;text-shadow:1px 1px #000}
.config-tabs button.active{background:rgba(200,200,255,.88);border-color:#fff;color:rgb(18,45,72);text-shadow:0 1px #fff}
.config-layout{display:block!important;width:min(100%,1180px);height:100%;min-height:0;margin:0 auto}
.tab-panel{display:none;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.tab-panel.active{display:block}
.settings.tab-panel.active{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:10px 18px}
.settings.tab-panel>.heading:first-child{grid-column:1;grid-row:1}
.settings.tab-panel>.grid-config{grid-column:1;grid-row:2}
.settings.tab-panel>.settings-grid{grid-column:1;grid-row:3;align-content:start}
.settings.tab-panel>.controls-heading{grid-column:2;grid-row:1;margin-top:0}
.settings.tab-panel>.key-bindings{grid-column:2;grid-row:2;align-content:start}
.settings.tab-panel>#bindingMessage{grid-column:2;grid-row:3}
#gameScreen{height:100dvh;min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr)}
.game-layout{height:100%;min-height:0;overflow:hidden}
.board-shell{height:100%;min-height:0}
#configScreen[hidden],#gameScreen[hidden]{display:none}
@media(max-width:700px){#configScreen{padding:6px}.hero{margin-bottom:5px;padding:4px 8px}.hero h1{font-size:1.25rem}.hero .button.primary{min-width:92px;padding:.4rem}.config-tabs{margin-bottom:5px}.tab-panel{padding:10px}.settings.tab-panel.active{display:block}.game-layout{height:100%;grid-template-rows:minmax(0,1fr) auto}.board-shell{height:100%}}
@media(max-height:650px){.hero,.game-toolbar{margin-bottom:4px;padding-block:3px}.hero h1,.game-toolbar h1{font-size:1rem}.config-tabs button{height:34px}.tab-panel{padding:8px}.rotation-preview{max-width:330px}.grid-stage{max-width:150px}}
/* Oryginalny zestaw ikon sterowania, zbudowany wylacznie z obramowan CSS. */
.touch-controls{--icon-color:rgba(255,255,255,1);--icon-shadow:rgba(0,0,0,1);font-size:clamp(.45rem,1vmin,.75rem)}
.touch-controls button .icon{display:block;box-sizing:border-box;opacity:.12;transition:opacity .1s linear,transform .1s linear}
.touch-controls button.pressed .icon,.touch-controls button:active .icon{opacity:1}
#controlLeft .icon,#controlRight .icon,#controlDown .icon{width:5em;height:5em;border-left:1em solid var(--icon-color);border-bottom:1em solid var(--icon-color);box-shadow:2px -2px 0 var(--icon-shadow) inset}
#controlLeft .icon{transform:rotate(45deg)}
#controlRight .icon{transform:rotate(225deg)}
#controlRotateLeft .icon,#controlRotateRight .icon{width:7em;height:7em;border-bottom:.7em solid var(--icon-color);border-left:.7em solid var(--icon-color);box-shadow:2px -2px 0 var(--icon-shadow) inset;border-radius:0 5em 0 3em}
#controlRotateLeft .icon{transform:rotate(200deg)}
#controlRotateLeft .icon:before{content:"";display:block;width:3em;height:3em;border-right:.7em solid var(--icon-color);border-top:.7em solid var(--icon-color);box-sizing:border-box;transform:translateX(3.2em) translateY(5.1em) rotate(45deg)}
#controlRotateRight .icon{transform:rotate(65deg)}
#controlRotateRight .icon:before{content:"";display:block;width:3em;height:3em;border-left:.7em solid var(--icon-color);border-bottom:.7em solid var(--icon-color);box-sizing:border-box;transform:translateX(-1.85em) rotate(135deg)}
:root{--iconColor:rgba(255,255,255,1);--iconShadow:rgba(0,0,0,1)}
#controlDown .icon{
 display:block;
 width:5em;
 height:5em;
 border-left:1em solid var(--iconColor);
 border-bottom:1em solid var(--iconColor);
 box-sizing:border-box;
 transform-origin:2.5em 2.5em;
 transform:rotate(-45deg);
 box-shadow:2px -2px 0 var(--iconShadow) inset;
 transition:all .1s linear;
}
#controlDown .icon:after{
 content:" ";
 display:block;
 width:5em;
 height:5em;
 box-sizing:border-box;
 border-left:1em solid var(--iconColor);
 border-bottom:1em solid var(--iconColor);
 transform:translateX(-5em) translateY(-1em);
 box-shadow:2px -2px 0 var(--iconShadow) inset;
 transition:all .3s linear;
 opacity:0;
}
#controlDown .icon:before{
 content:" ";
 display:block;
 width:5em;
 height:5em;
 border-left:1em solid var(--iconColor);
 border-bottom:1em solid var(--iconColor);
 transform:translateX(-3em) translateY(2em);
 box-sizing:border-box;
 transition:all .1s linear;
 box-shadow:2px -2px 0 var(--iconShadow) inset;
 opacity:0;
}
#controlDown.drop .icon:after{opacity:1}
#controlDown.drop .icon:before{opacity:1}
/* Plynne skalowanie GUI wykorzystuje wolna przestrzen bez naruszania ukladu jednego ekranu. */
.tab-panel{font-size:clamp(.95rem,1.25vw,1.35rem);padding:clamp(14px,1.8vmin,26px)}
.tab-panel h2{font-size:clamp(1.3rem,1.8vw,2rem)}
.tab-panel .eyebrow{font-size:clamp(.72rem,.85vw,.95rem)}
.tab-panel label{font-size:clamp(.78rem,1vw,1.05rem)}
.tab-panel input,.tab-panel select,.tab-panel textarea{font-size:clamp(.9rem,1.08vw,1.2rem);padding:clamp(.6rem,1.15vmin,.9rem)}
.tab-panel .button{font-size:clamp(.85rem,1vw,1.1rem);padding:clamp(.55rem,1.1vmin,.85rem)}
.tab-panel .icon-button{font-size:clamp(1.15rem,1.6vw,1.7rem);min-width:clamp(2.8rem,4vw,4rem)}
.inline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;flex-wrap:initial}
.editor-layout{grid-template-columns:minmax(260px,min(38vmin,430px)) minmax(190px,1fr);gap:clamp(14px,2vmin,26px)}
.piece-list{max-height:none}.piece-row{min-height:clamp(52px,6vh,72px)}.piece-icon{width:clamp(44px,5vmin,62px)}
@media(min-width:701px) and (min-height:600px){
 .settings.tab-panel.active{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px)}
 .settings.tab-panel>.grid-config{height:100%;min-height:0;grid-template-columns:minmax(240px,1fr) minmax(130px,.42fr);align-items:center;margin-bottom:0}
 .settings.tab-panel .grid-stage{width:min(100%,42vh);max-width:430px;justify-self:center}
 .settings.tab-panel .grid-values{gap:clamp(18px,3vh,38px)}
 .settings.tab-panel .grid-values input{font-size:clamp(1.6rem,2.5vw,2.8rem);padding:clamp(.6rem,1.4vh,1rem)}
 .settings.tab-panel>.settings-grid{grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vmin,20px)}
 .settings.tab-panel>.key-bindings{height:100%;min-height:0;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:clamp(4px,.7vh,10px);align-content:stretch}
 .settings.tab-panel .binding-row{grid-template-columns:minmax(0,1fr) minmax(150px,38%);font-size:clamp(.82rem,1vw,1.08rem);min-height:0}
 .settings.tab-panel .binding-row .button{height:100%;min-height:0;font-size:clamp(.78rem,.95vw,1rem);padding:.25rem .5rem}
 .settings.tab-panel>#bindingMessage{align-self:end;margin:.3rem 0 0}
}
@media(max-width:700px){.tab-panel{font-size:.9rem;padding:10px}.tab-panel h2{font-size:1.1rem}.editor-layout{grid-template-columns:minmax(165px,230px) 1fr}.piece-row{min-height:48px}.inline{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:470px){.editor-layout{grid-template-columns:1fr}.piece-editor{width:min(100%,min(52vh,280px))}}
/* Wspolna karta figur, kompaktowe sterowanie i lokalne ikony Pixel Icon Library. */
.button,.config-tabs button,.piece-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.42em}
.button img,.config-tabs img,.piece-actions img{display:block;width:1.25em;height:1.25em;flex:0 0 auto;image-rendering:pixelated}
.button.subtle img{filter:invert(1)}
.hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.language-toggle{min-width:0;padding:.55rem .7rem;font-size:clamp(.8rem,1.4vmin,1rem)}
.config-tabs button{width:auto;min-width:clamp(105px,13vmin,150px);height:clamp(38px,6vmin,56px);padding:.4rem .8rem;font-size:clamp(.78rem,1.3vmin,1rem)}
.config-tabs button img{filter:invert(1);opacity:.65}
.config-tabs button.active img{filter:none;opacity:1}
.config-layout[data-active-tab="pieces"]{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:10px}
.config-layout[data-active-tab="settings"]{display:block!important}
.config-layout[data-active-tab="pieces"]>.tab-panel{height:100%;min-height:0}
.editor-layout{grid-template-columns:minmax(190px,min(26vmin,300px)) minmax(145px,1fr);gap:clamp(10px,1.5vmin,18px)}
.compact-fields{display:flex;flex-flow:column;align-items:flex-start;align-content:flex-start;gap:9px}
.color-control{width:auto;align-items:start}
.color-control input[type="color"]{width:76px;min-width:76px;height:40px;padding:3px}
.editor-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.editor-actions .button{width:auto;min-width:0}
.rotation-preview{width:min(100%,260px);grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.piece-list{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));align-content:start;gap:5px}
.piece-row{grid-template-columns:auto minmax(0,1fr);min-height:46px;padding:4px}
.piece-icon{width:clamp(38px,4.5vmin,50px)}
.piece-actions{display:flex;justify-self:end;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.piece-actions button{width:auto;height:auto;min-height:29px;padding:.28rem .42rem;border:1px solid rgba(255,255,255,.65);background:rgba(228,232,255,.94);color:rgb(18,45,72);font:700 clamp(.58rem,.7vw,.72rem) pixel,monospace;text-shadow:0 1px #fff;cursor:pointer}
.piece-actions button:hover,.piece-actions button:focus-visible{background:#fff;border-color:#fff;outline:1px solid rgb(18,45,72)}
.piece-actions img{width:1.1em;height:1.1em}
.icon-credit{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(3px,env(safe-area-inset-bottom));z-index:5;color:rgba(255,255,255,.52);font:clamp(.5rem,.65vw,.65rem) system-ui;text-shadow:0 1px #000;text-decoration:none}
.icon-credit:hover,.icon-credit:focus-visible{color:#fff}
.touch-controls .touch-label{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-width:90%;font:700 clamp(.58rem,1.35vmin,.82rem) pixel,monospace;line-height:1.1;text-align:center;opacity:.48;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;transition:opacity .1s}
.touch-controls button.pressed .touch-label,.touch-controls button:active .touch-label{opacity:1}
.modal-card .button{width:100%}
@media(max-width:900px){
 .config-layout[data-active-tab="pieces"]{grid-template-columns:1fr;overflow:auto;align-content:start}
 .config-layout[data-active-tab="pieces"]>.tab-panel{height:auto;overflow:visible}
 .editor-layout{grid-template-columns:minmax(180px,260px) minmax(145px,1fr)}
 .piece-list{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
}
@media(max-width:470px){
 .hero-actions{gap:4px}.language-toggle{padding:.38rem .48rem}.hero .button.primary{min-width:88px}
 .config-tabs button{min-width:0;flex:1;padding:.35rem .5rem}
 .editor-layout{grid-template-columns:1fr}.compact-fields{flex-flow:row;align-items:flex-end;flex-wrap:wrap}
 .rotation-preview{width:min(100%,230px)}
 .piece-list{grid-template-columns:1fr}.piece-actions button span{font-size:.58rem}
}
/* Czytelnosc czcionki pikselowej i dokladne centrowanie przyciskow modali. */
.modal-card{justify-items:stretch}
.modal-card .button,.modal-card .button.primary{width:100%;min-width:0;max-width:100%;margin-inline:auto;justify-self:center}
.eyebrow{font-size:max(14px,.7rem)}
.button.small{font-size:max(14px,.72rem)}
label{font-size:max(14px,.78rem)}
.config-tabs button{font-size:clamp(14px,1.3vmin,1rem)}
.tab-panel .eyebrow{font-size:clamp(14px,.85vw,.95rem)}
.tab-panel label{font-size:clamp(14px,1vw,1.05rem)}
.tab-panel .button{font-size:clamp(14px,1vw,1.1rem)}
.binding-row{font-size:max(14px,.78rem)}
.game-stats span{font-size:max(14px,.65rem)}
.piece-actions button{font-size:14px}
.touch-controls .touch-label{font-size:max(14px,1.35vmin)}
@media(min-width:701px) and (min-height:600px){
 .settings.tab-panel .binding-row{font-size:clamp(14px,1vw,1.08rem)}
 .settings.tab-panel .binding-row .button{font-size:clamp(14px,.95vw,1rem)}
}
@media(max-width:470px){.piece-actions button span{font-size:14px}}
/* Bezwzgledne minimum 14 px dla kazdego widocznego tekstu interfejsu. */
.button.language-toggle{font-size:max(14px,1.4vmin)}
.modal-card .button{font-size:14px}
.modal-card .button.primary{font-size:clamp(19.2px,3vmin,2rem)}
.message{font-size:14px}
.game-stats strong{font-size:max(14px,1.25rem)}
.touch-controls button,.editor-cell{font-size:14px}
.icon-credit{font-size:14px}
@media(max-width:700px){.game-stats strong{font-size:14px}}
/* Trzy spojne warianty przyciskow oraz zlote wartosci interfejsu gry. */
:root{
 --interface-gold:rgba(230,200,50,.95);
 --btn-top:#b9e5f2;--btn-bottom:#82bfd8;--btn-hover-top:#d2f1f8;--btn-hover-bottom:#9ed0e3;
 --btn-edge:#def8ff;--btn-depth:#396d86;--btn-text:#082d46;--btn-highlight:rgba(255,255,255,.78);
}
.button,.config-tabs button,.piece-actions button{
 background:var(--btn-bg);
 border-color:var(--btn-edge);color:var(--btn-text);
 box-shadow:0 3px 0 var(--btn-depth),0 0 0 1px rgba(255,255,255,.2) inset;
 text-shadow:0 1px 0 var(--btn-highlight);
 transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,background .12s ease;
}
.button.primary,.button.confirm{
 --btn-top:#8edcad;--btn-bottom:#59b981;--btn-hover-top:#a9e9c3;--btn-hover-bottom:#70ca96;
 --btn-edge:#d9ffe8;--btn-depth:#28744d;--btn-text:#093623;--btn-highlight:rgba(255,255,255,.68);
}
.button.subtle,.button.back,.button.danger,.piece-actions button[data-action="delete"]{
 --btn-top:#e89299;--btn-bottom:#c95f69;--btn-hover-top:#f0a8ad;--btn-hover-bottom:#d97880;
 --btn-edge:#ffdadd;--btn-depth:#7e3038;--btn-text:#2d060b;--btn-highlight:rgba(255,255,255,.62);
}
.button:hover,.button:focus-visible,.config-tabs button:hover,.config-tabs button:focus-visible,.piece-actions button:hover,.piece-actions button:focus-visible{
 background:var(--btn-hover-bg);
 border-color:var(--btn-edge);color:var(--btn-text);text-shadow:0 1px 0 var(--btn-highlight);
 filter:brightness(1.035);transform:translateY(-1px);
 box-shadow:0 4px 0 var(--btn-depth),0 0 0 1px rgba(255,255,255,.28) inset;
 outline:2px solid rgba(230,200,50,.75);outline-offset:1px;
}
.button:active,.config-tabs button:active,.piece-actions button:active{
 background:var(--btn-active-bg);
 filter:brightness(.96);transform:translateY(2px);
 box-shadow:0 1px 0 var(--btn-depth),0 0 0 1px rgba(0,0,0,.08) inset;
}
.button img,.config-tabs button img,.piece-actions button img{filter:none;opacity:.88}
.button.subtle img,.button.back img,.button.danger img{filter:none}
.config-tabs button{--btn-top:#78aec6;--btn-bottom:#558da8;--btn-hover-top:#91c3d6;--btn-hover-bottom:#69a2ba}
.config-tabs button.active{--btn-top:#b9e5f2;--btn-bottom:#82bfd8;background:var(--btn-bg);border-color:var(--btn-edge);color:var(--btn-text);text-shadow:0 1px 0 var(--btn-highlight);box-shadow:0 2px 0 var(--btn-depth),0 0 0 1px rgba(255,255,255,.25) inset}
.config-tabs button img{filter:none;opacity:.45}
.config-tabs button.active img{filter:none;opacity:.9}
.piece-actions button{--btn-top:#b9e5f2;--btn-bottom:#82bfd8;--btn-hover-top:#d2f1f8;--btn-hover-bottom:#9ed0e3;border-color:var(--btn-edge);background:var(--btn-bg);color:var(--btn-text);text-shadow:0 1px 0 var(--btn-highlight)}
.game-stats strong,#finalScore{color:var(--interface-gold)}
.game-stats span{color:rgba(255,255,255,.7)}
#pauseModal .modal-card{
 background:rgba(0,0,50,.5);
 border:2px solid rgba(255,255,255,.3);
 box-shadow:0 0 1vmin rgba(0,0,0,.3),0 0 0 .35vmin rgba(255,255,255,.2) inset;
 text-shadow:1px 1px 0 var(--shadow),-1px -1px 0 rgba(255,255,255,.35);
}
#pauseModal{background:rgba(0,0,0,.48)}
.game-toolbar{justify-content:center}
.game-toolbar .game-brand{display:inline-grid;justify-items:stretch;width:max-content;text-align:center}
.game-toolbar .game-brand h1{grid-area:2/1;margin-inline:0;white-space:nowrap}
.game-toolbar .game-kicker{grid-area:1/1;display:flex;width:100%;align-items:center;justify-content:space-between;letter-spacing:0;text-align:center}
.game-toolbar .game-kicker>span{display:block}
/* Usuwanie figury zachowuje czerwony wariant po regule listy. */
.piece-actions button[data-action="delete"]{
 --btn-top:#e89299;--btn-bottom:#c95f69;--btn-hover-top:#f0a8ad;--btn-hover-bottom:#d97880;
 --btn-edge:#ffdadd;--btn-depth:#7e3038;--btn-text:#2d060b;--btn-highlight:rgba(255,255,255,.62);
}
/* Warianty o wiekszej specyficznosci zastepuja dawne biale i granatowe style. */
.button.primary,.button.confirm,.button.subtle,.button.back,.button.danger{
 background:var(--btn-bg);
 border-color:var(--btn-edge);color:var(--btn-text);
 box-shadow:0 3px 0 var(--btn-depth),0 0 0 1px rgba(255,255,255,.2) inset;
 text-shadow:0 1px 0 var(--btn-highlight);
}
/* Plaskie kolory przyciskow — bez gradientow. */
:root{--btn-bg:#91c9de;--btn-hover-bg:#a7d8e8;--btn-active-bg:#78b4cd}
.button,.config-tabs button,.piece-actions button{background:var(--btn-bg)}
.button.primary,.button.confirm{
 --btn-bg:#69c58e;--btn-hover-bg:#80d3a3;--btn-active-bg:#55ae79;
 background:var(--btn-bg);
}
.button.subtle,.button.back,.button.danger,.piece-actions button[data-action="delete"]{
 --btn-bg:#d46e77;--btn-hover-bg:#e1848c;--btn-active-bg:#c4626b;
 background:var(--btn-bg);
}
.config-tabs button{--btn-bg:#669cb4;--btn-hover-bg:#79adc2;--btn-active-bg:#56869c;background:var(--btn-bg)}
.config-tabs button.active{--btn-bg:#91c9de;--btn-hover-bg:#a7d8e8;--btn-active-bg:#78b4cd;background:var(--btn-bg)}
.piece-actions button{--btn-bg:#91c9de;--btn-hover-bg:#a7d8e8;--btn-active-bg:#78b4cd;background:var(--btn-bg)}
.piece-actions button[data-action="delete"]{--btn-bg:#d46e77;--btn-hover-bg:#e1848c;--btn-active-bg:#c4626b;background:var(--btn-bg)}
.button:hover,.button:focus-visible,.config-tabs button:hover,.config-tabs button:focus-visible,.piece-actions button:hover,.piece-actions button:focus-visible{background:var(--btn-hover-bg)}
.button:active,.config-tabs button:active,.piece-actions button:active{background:var(--btn-active-bg)}
/* Naglowek konfiguratora zgodny z ekranem gry. */
.config-hero{justify-content:center}
.game-brand{display:inline-grid;justify-items:stretch;width:max-content;text-align:center}
.game-brand h1{grid-area:2/1;margin-inline:0;white-space:nowrap}
.game-brand .game-kicker{grid-area:1/1;display:flex;width:100%;align-items:center;justify-content:space-between;letter-spacing:0;text-align:center}
.game-brand .game-kicker>span{display:block}
#configScreen>.language-toggle{position:fixed;z-index:50;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));min-width:0;padding:.45rem .6rem}
.flag-icon{width:32px!important;height:20px!important;object-fit:contain;image-rendering:pixelated;opacity:1!important}
.config-actions{display:flex;align-items:stretch;justify-content:center;gap:6px;width:min(100%,720px);margin:0 auto 7px}
.config-actions .config-tabs{display:flex;flex:2 1 0;width:auto;margin:0;gap:6px}
.config-actions .config-tabs button{flex:1 1 0;min-width:0}
.config-actions #startButton{flex:1.25 1 0;min-width:0;height:clamp(38px,6vmin,56px);padding:.4rem .8rem;font-size:clamp(16px,2vmin,1.35rem)}
@media(max-width:470px){
 #configScreen>.language-toggle{padding:.35rem .45rem}
 .flag-icon{width:28px!important;height:18px!important}
 .config-actions{gap:4px;margin-bottom:5px}
 .config-actions .config-tabs{gap:4px}
 .config-actions #startButton{padding:.35rem .45rem;font-size:14px}
}
@media(max-height:650px){.config-actions .config-tabs button,.config-actions #startButton{height:34px}}
/* Osobna zakladka Sterowanie i uproszczone Ustawienia. */
.config-actions .config-tabs{flex-grow:3}
.settings.tab-panel.active{
 display:grid;
 grid-template-columns:minmax(300px,1.15fr) minmax(260px,.85fr);
 grid-template-rows:auto minmax(0,1fr);
 gap:10px clamp(18px,3vw,48px);
}
.settings.tab-panel>.heading:first-child{grid-column:1/-1;grid-row:1}
.settings.tab-panel>.grid-config{grid-column:1;grid-row:2;height:100%;min-height:0;margin-bottom:0;align-items:center}
.settings.tab-panel>.settings-grid{grid-column:2;grid-row:2;align-content:center}
.controls-panel.tab-panel.active{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.controls-panel .heading{margin-bottom:0}
.controls-panel .key-bindings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(6px,1vmin,12px);min-height:0}
.controls-panel .binding-row{grid-template-columns:minmax(0,1fr) minmax(145px,38%);min-height:0;font-size:clamp(14px,1vw,1.08rem)}
.controls-panel .binding-row .button{height:100%;min-height:0;padding:.35rem .55rem;font-size:clamp(14px,.95vw,1rem)}
.controls-panel #bindingMessage{align-self:end;margin:.3rem 0 0}
@media(max-width:700px){
 .config-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .config-actions .config-tabs{display:contents}
 .config-actions #startButton{width:100%;height:clamp(38px,6vmin,56px)}
 .settings.tab-panel.active{display:block}
 .controls-panel.tab-panel.active{display:grid}
 .controls-panel .key-bindings{grid-template-columns:1fr;grid-template-rows:none;align-content:start}
 .controls-panel .binding-row{min-height:44px}
}
@media(max-width:700px) and (max-height:650px){.config-actions #startButton{height:34px}}
/* Wiekszy tekst glownych akcji bez zmiany wymiarow samych przyciskow. */
.config-actions .config-tabs button{
 font-size:clamp(16px,1.65vmin,1.2rem);
 --btn-text:#194f68;
 --btn-highlight:rgba(196,235,247,.58);
}
.config-actions .config-tabs button.active{
 --btn-text:#082d46;
 --btn-highlight:rgba(255,255,255,.78);
}
.config-actions #startButton{font-size:clamp(18px,2.2vmin,1.5rem)}
/* Dziewiec kolorow laczy cyjan, zielen, zloto i akcenty figur z reszta interfejsu. */
.rainbow-title{display:flex;align-items:baseline;color:inherit}
.rainbow-title>span{display:inline-block}
.rainbow-title>span:nth-child(1){color:#4fa8c9}
.rainbow-title>span:nth-child(2){color:#cf6671}
.rainbow-title>span:nth-child(3){color:#c8ad35}
.rainbow-title>span:nth-child(4){color:#58b286}
.rainbow-title>span:nth-child(5){color:#9672c8}
.rainbow-title>span:nth-child(6){margin-left:.28em;color:#d08347}
.rainbow-title>span:nth-child(7){color:#439da5}
.rainbow-title>span:nth-child(8){color:#b15b9d}
.rainbow-title>span:nth-child(9){color:#6782c5}
@media(max-width:470px){
 .config-actions .config-tabs button{font-size:16px}
 .config-actions #startButton{font-size:18px}
}