:root{
  --bg:#12325a; --panel:#183f70; --panel2:#205083; --text:#f7fbff; --muted:#b8c7dc;
  --line:rgba(255,255,255,.15); --gold:#e7c061; --gold2:#fff0a8; --navy:#0d3470; --burgundy:#84243a;
  --ivory:#fbf1d8; --ivory2:#d9caa6; --shadow:0 16px 45px rgba(0,0,0,.34); --green:#4be08b;
}
*{box-sizing:border-box} html,body{min-height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 18% 0%,rgba(93,151,232,.38),transparent 36%),radial-gradient(circle at 82% 100%,rgba(231,192,97,.14),transparent 34%),linear-gradient(180deg,#173b67,#0e294a 55%,#102b4d)}
button,input{font:inherit}.app{width:min(980px,96vw);min-height:100svh;margin:0 auto;padding:18px 0 26px;display:flex;flex-direction:column}.hidden{display:none!important}
.hero{text-align:center;padding:28px 18px 20px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(23,46,82,.9),rgba(12,27,49,.82));box-shadow:var(--shadow)}
.eyebrow{margin:0 0 6px;color:var(--gold);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}h1{margin:0;font-size:clamp(2.9rem,11vw,6.2rem);line-height:.86;letter-spacing:-.07em}.lead{margin:12px auto 0;color:var(--muted);font-size:1.06rem;max-width:520px}
.start-panel{margin:16px auto 0;padding:20px;border:1px solid var(--line);border-radius:24px;background:rgba(16,36,63,.78);box-shadow:var(--shadow);text-align:center;width:min(680px,100%)}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-content:center;margin:0 auto 16px;max-width:430px}label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-weight:800;text-align:left}input{width:100%;border:2px solid rgba(255,255,255,.12);border-radius:15px;background:#07111f;color:var(--text);padding:12px 13px;font-size:1rem;outline:none;text-align:center;font-weight:800}input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(231,192,97,.13)}
button{border:0;border-radius:15px;padding:12px 17px;background:#263d61;color:var(--text);font-weight:1000;letter-spacing:.035em;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.24);touch-action:manipulation}button:hover{filter:brightness(1.08)}.primary{background:linear-gradient(135deg,#fff0a8,#e7a83d);color:#201400}.start-button{min-width:190px}
.game-panel{flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding:6px 0 10px;min-height:calc(100svh - 82px)}
.player-card{min-height:0;padding:9px;border:0;border-radius:0;background:transparent;outline:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center}.player-card.active{border-color:transparent;box-shadow:none}.opponent-card{transform:rotate(180deg)}
.player-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}h2{margin:0;font-size:clamp(1rem,4vw,1.35rem);line-height:1}.badge{padding:6px 9px;border-radius:999px;font-size:.74rem;font-weight:1000;background:#263c60;color:var(--muted);white-space:nowrap}.badge.navy{background:rgba(28,75,139,.32);color:#d9e9ff}.badge.burgundy{background:rgba(132,36,58,.32);color:#ffd6df}
.progress{height:8px;background:#060f1d;border-radius:999px;margin-bottom:7px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .25s ease}.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1.2vw,8px);width:100%}.entry-labels{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,1.2vw,8px);margin:0 1px 5px;color:#e7eef9;font-weight:1000;text-align:center;font-size:.8rem;opacity:.78}
.tile{aspect-ratio:1/1;border-radius:clamp(9px,2.4vw,15px);display:grid;place-items:center;font-weight:1000;font-size:clamp(1rem,8vw,2.25rem);user-select:none;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 -8px 14px rgba(0,0,0,.22),0 5px 9px rgba(0,0,0,.2);transition:transform .14s ease,filter .14s ease,opacity .14s ease;min-width:0;padding:0;position:relative;overflow:hidden}.tile.back{background:radial-gradient(circle at 28% 18%,#fff7bd 0%,#f1cf70 34%,#c78b35 74%,#8b591e 100%);color:transparent;border-color:rgba(255,246,189,.85);box-shadow:inset 5px 5px 9px rgba(255,255,255,.42),inset -8px -10px 16px rgba(88,45,5,.42),0 8px 12px rgba(0,0,0,.28),0 2px 0 rgba(255,255,255,.24)}.tile.back::before{content:'';position:absolute;inset:8%;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,0) 42%,rgba(70,36,0,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);pointer-events:none}.tile.back::after{content:'';position:absolute;left:13%;top:11%;width:48%;height:22%;border-radius:999px;background:rgba(255,255,255,.18);filter:blur(1px);pointer-events:none}.tile.face{background:radial-gradient(circle at 30% 22%,#fff9ea 0%,var(--ivory) 44%,var(--ivory2) 100%);text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.28);border-color:rgba(255,255,255,.78)}.tile.face.navy{color:var(--navy)}.tile.face.burgundy{color:var(--burgundy);font-family:Georgia,'Times New Roman',serif;font-weight:900}.tile.blank{background:linear-gradient(135deg,#fff4bd,#d0a54f);color:transparent}.tile.blank.face{background:radial-gradient(circle at 30% 22%,#fff8e4,var(--ivory),#c9b98e)}.tile.blank.face::after{content:'□';color:rgba(70,58,35,.28);font-size:.9em}.tile.entry-target{outline:3px dashed rgba(231,192,97,.88);filter:brightness(1.12)}.tile.wrong{animation:wrongTile .38s ease;outline:3px solid #ff475b}.tile.eject-glow{outline:4px solid rgba(255,240,168,.95);animation:softPulse 1s ease infinite}.tile.slide-in{animation:slideFromTop .32s ease}.tile.pushed{animation:pushDown .32s ease}.tile.reveal{animation:flipReveal .34s ease}.tile.clickable{cursor:pointer}.tile.disabled{opacity:.5;filter:saturate(.6)}
.center-zone{--center-ui-size:clamp(52px,15vw,74px);--status-box-width:min(34vw,220px);min-height:82px;position:relative;display:flex;align-items:center;padding:7px 8px;border:0;border-radius:0;background:transparent;box-shadow:none}.small-btn{padding:9px 11px;border-radius:13px;font-size:.76rem}.turn-info{position:absolute;left:calc(25% - (var(--center-ui-size) / 4));top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:2}.turn-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0a8,#e7a83d);color:#201400;font-size:1.55rem;font-weight:1000;box-shadow:0 0 0 4px rgba(231,192,97,.14)}.turn-arrow.up{transform:none}.turn-arrow.down{transform:none}.status-text{position:absolute;left:calc(75% + (var(--center-ui-size) / 4));top:50%;transform:translate(-50%,-50%);width:var(--status-box-width);min-height:2.7em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;transition:transform .22s ease;padding:8px 10px;border-radius:14px;background:rgba(13,34,62,.24);border:1px solid rgba(255,255,255,.08);font-size:clamp(.76rem,2.7vw,.96rem);line-height:1.08;font-weight:900;color:#edf5ff;z-index:2}.status-text.to-top{transform:translate(-50%,-50%) rotate(180deg)}.status-text.to-bottom{transform:translate(-50%,-50%)}.status-text.error{color:#ffd2d6;animation:shake .35s ease}.status-text span{display:block}.center-stack{display:grid;grid-template-columns:1fr;justify-items:center;gap:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}.center-tile,.ejected-tile{width:var(--center-ui-size);height:var(--center-ui-size);padding:0;border-radius:16px}.tile-slot{background:linear-gradient(145deg,rgba(0,0,0,.58),rgba(255,255,255,.09));border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 9px 20px rgba(0,0,0,.62),inset 0 -5px 10px rgba(255,255,255,.08),0 10px 20px rgba(0,0,0,.3)}.center-tile.active{outline:4px solid rgba(231,192,97,.72);animation:centerArrive .25s ease}.center-tile.selected{box-shadow:inset 0 -8px 14px rgba(0,0,0,.22),0 0 0 6px rgba(231,192,97,.28),0 12px 22px rgba(0,0,0,.34);filter:brightness(1.08)}.center-tile.to-top,.ejected-tile.to-top{transform:rotate(180deg)}.center-tile.to-bottom,.ejected-tile.to-bottom{transform:none}.ejected-tile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);outline:4px solid rgba(255,240,168,.9);animation:softPulse 1s ease infinite}
.bottom-bar{margin-top:auto;padding:8px 4px 0;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}.footer-menu{flex:0 0 auto}.global-stats{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;color:rgba(226,235,247,.66);font-size:.76rem}.global-stats strong{color:rgba(255,255,255,.86)}dialog{border:0;border-radius:24px;background:transparent;color:var(--text);padding:0}dialog::backdrop{background:rgba(0,0,0,.72)}.dialog-box{width:min(390px,90vw);padding:24px;text-align:center;border-radius:24px;background:linear-gradient(180deg,#18335a,#0c1c34);border:1px solid var(--line);box-shadow:var(--shadow)}.dialog-box h2{font-size:2rem;margin-bottom:10px}.dialog-box p{color:var(--muted);font-size:1.05rem;line-height:1.35}
@keyframes softPulse{50%{filter:brightness(1.18);transform:translateY(-3px)}}@keyframes wrongTile{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes slideFromTop{from{transform:translateY(-42px) scale(.92);opacity:.45}to{transform:none;opacity:1}}@keyframes pushDown{50%{transform:translateY(18px);filter:brightness(1.15)}}@keyframes flipReveal{0%{transform:rotateY(0) scale(.96)}50%{transform:rotateY(90deg) scale(.96)}100%{transform:rotateY(0) scale(1)}}@keyframes centerArrive{from{transform:scale(.72);opacity:.22}to{opacity:1}}
@media(max-width:560px){.game-panel{gap:6px}.player-card{padding:7px}.center-zone{--center-ui-size:48px;--status-box-width:min(36vw,160px);min-height:78px}.center-tile,.ejected-tile{width:var(--center-ui-size);height:var(--center-ui-size);border-radius:14px}.tile{font-size:clamp(1rem,7.5vw,2rem)}.entry-labels{font-size:.72rem}.player-head{margin-bottom:4px}.progress{height:7px;margin-bottom:5px}.badge{font-size:.68rem;padding:5px 7px}}
@media(max-width:380px){.status-text{font-size:.66rem}.small-btn{padding:8px 9px}.center-tile,.ejected-tile{width:46px;height:46px}.turn-arrow{width:34px;height:34px}.tile{border-radius:10px}}
/* v10 layout corrections */
.ejected-tile.to-top{transform:translate(-50%,-50%) rotate(180deg)}
.ejected-tile.to-bottom{transform:translate(-50%,-50%)}
@keyframes softPulse{50%{filter:brightness(1.18)}}


/* v11: stały podział graczy i bardziej fizyczne ruchy kafelków */
.center-zone{position:relative;min-height:92px;perspective:900px;}
.turn-info{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:auto;z-index:4;}
.status-text{position:fixed;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);width:min(34vw,240px);align-items:flex-end;text-align:right;background:rgba(8,27,52,.58);border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:8px 9px;box-shadow:0 8px 20px rgba(0,0,0,.22);backdrop-filter:blur(5px);}
.status-text.to-top{transform:translateY(-50%) rotate(180deg);}
.status-text.to-bottom{transform:translateY(-50%);}
.status-text.error{animation:shakeRight .35s ease;}
.player-card.active{outline:none!important;box-shadow:none!important;background:transparent!important;}
.tile{transform-style:preserve-3d;will-change:transform;}
.tile.back{background:linear-gradient(145deg,#fff2ab 0%,#e9bd52 36%,#bf7f26 72%,#7c4a17 100%);border-color:rgba(255,241,170,.98);box-shadow:inset 6px 6px 10px rgba(255,255,255,.45),inset -8px -12px 18px rgba(80,38,0,.48),0 10px 0 #7c4a17,0 16px 18px rgba(0,0,0,.34);}
.tile.back::before{inset:0;background:linear-gradient(130deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.09) 35%,rgba(75,35,0,.2) 100%);border-radius:inherit;box-shadow:none;}
.tile.back::after{left:16%;top:12%;width:48%;height:18%;background:rgba(255,255,255,.25);}
.tile.face{box-shadow:inset 5px 5px 9px rgba(255,255,255,.55),inset -8px -10px 16px rgba(85,68,36,.25),0 8px 0 #b8a677,0 14px 16px rgba(0,0,0,.28);}
.tile.face.navy,.tile.face.burgundy{text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 0 rgba(0,0,0,.4);}
.center-stack{z-index:5;}
.center-tile{transition:transform .22s ease, filter .22s ease;}
.center-tile.back{animation:breathingTile 1.6s ease-in-out infinite;}
.ejected-tile{position:fixed!important;z-index:6;transform:translate(-50%,-50%)!important;animation:ejectedOut .35s ease, softPulse 1s ease infinite;}
.ejected-tile.to-top{transform:translate(-50%,-50%) rotate(180deg)!important;}
.ejected-tile.to-bottom{transform:translate(-50%,-50%)!important;}
.moving-tile{position:fixed!important;z-index:9999!important;pointer-events:none!important;margin:0!important;transform-origin:center center;box-sizing:border-box;}
.board .tile[data-row="2"]{transition:transform .2s ease;}
@keyframes breathingTile{50%{filter:brightness(1.08);transform:translateY(-2px) rotateX(4deg)}}
@keyframes ejectedOut{from{opacity:.25;filter:brightness(1.2);transform:translate(-50%,-90%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes shakeRight{25%{margin-right:-5px}50%{margin-right:5px}75%{margin-right:-3px}}
@media(max-width:560px){.center-zone{min-height:94px}.status-text{right:4px;width:32vw;font-size:.66rem;padding:7px 7px}.turn-info{left:4px}.center-tile{width:52px;height:52px}.ejected-tile{border-radius:14px}}
@media(max-width:380px){.status-text{font-size:.59rem;width:31vw}.turn-arrow{width:32px;height:32px}.center-tile{width:48px;height:48px}}

/* v12: naprawa układu strzałki i instrukcji */
.center-zone{
  position:relative !important;
  min-height:94px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.turn-info{
  position:absolute !important;
  left:clamp(6px,2vw,18px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  min-width:0 !important;
  display:block !important;
  z-index:10 !important;
  pointer-events:none !important;
}
.turn-arrow{
  position:relative !important;
  z-index:11 !important;
}
.status-text{
  position:fixed !important;
  right:max(6px,env(safe-area-inset-right)) !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:min(31vw,230px) !important;
  max-width:230px !important;
  min-height:auto !important;
  z-index:9 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:2px !important;
  text-align:right !important;
  line-height:1.08 !important;
  background:rgba(8,27,52,.62) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:15px !important;
  padding:8px 9px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(5px) !important;
  pointer-events:none !important;
}
.status-text.to-top{
  transform:translateY(-50%) rotate(180deg) !important;
  transform-origin:center center !important;
}
.status-text.to-bottom{
  transform:translateY(-50%) !important;
}
.center-stack{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
}
@media(max-width:560px){
  .status-text{width:30vw !important;font-size:.62rem !important;padding:7px 6px !important;}
  .turn-info{left:4px !important;}
}
@media(max-width:380px){
  .status-text{width:29vw !important;font-size:.56rem !important;padding:6px 5px !important;}
}


/* v13: wirtualny 4. rząd na wypchnięty kafelek */
.player-card{overflow:visible !important;}
.board{overflow:visible !important; position:relative !important;}
.own-card .board{margin-bottom:clamp(46px,13vw,76px) !important;}
.opponent-card .board{margin-bottom:clamp(46px,13vw,76px) !important;}
.ejected-tile{
  position:fixed !important;
  z-index:30 !important;
  margin:0 !important;
  pointer-events:auto !important;
}

/* v14: stałe, niewidoczne miejsce na wypchnięty kafelek jako wirtualny 4. rząd */
.player-card{
  justify-content:center !important;
}
.board{
  margin-bottom:0 !important;
}
.own-card .board,
.opponent-card .board{
  margin-bottom:0 !important;
}
.eject-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(4px,1.2vw,8px);
  width:100%;
  margin-top:clamp(4px,1.2vw,8px);
  pointer-events:none;
  opacity:1;
}
.eject-slot{
  aspect-ratio:1/1;
  min-width:0;
  border-radius:clamp(9px,2.4vw,15px);
  visibility:hidden;
}
.ejected-tile{
  position:fixed !important;
  z-index:60 !important;
  margin:0 !important;
  pointer-events:auto !important;
  box-sizing:border-box !important;
}


/* v15: poprawka uciekającego wypchniętego kafelka
   Kafelek wypchnięty jest poza .center-stack, więc fixed liczy pozycję względem okna.
   Animacja pulsu nie zmienia już transform, żeby nie nadpisywać translate(-50%, -50%). */
.ejected-tile{
  position:fixed !important;
  z-index:80 !important;
  margin:0 !important;
  pointer-events:auto !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  animation:ejectedAppearStable .26s ease, ejectedPulseStable 1s ease infinite !important;
}
.ejected-tile.to-top{transform:translate(-50%,-50%) rotate(180deg) !important;}
.ejected-tile.to-bottom{transform:translate(-50%,-50%) !important;}
@keyframes ejectedAppearStable{
  from{opacity:.2;filter:brightness(1.25) scale(1.02);}
  to{opacity:1;filter:brightness(1);}
}
@keyframes ejectedPulseStable{
  50%{filter:brightness(1.16);box-shadow:0 0 0 5px rgba(255,240,168,.26),0 12px 18px rgba(0,0,0,.32),inset 5px 5px 9px rgba(255,255,255,.42),inset -8px -10px 16px rgba(88,45,5,.42);}
}


/* v17: wypchnięty kafelek siedzi fizycznie w slocie wirtualnego 4. rzędu, a nie na fixed/top/left */
.eject-slot{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  position:relative !important;
}
.eject-slot:empty{
  pointer-events:none !important;
}
.eject-slot .ejected-tile{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  margin:0 !important;
  display:grid !important;
  transform:none !important;
  z-index:90 !important;
  pointer-events:auto !important;
  box-sizing:border-box !important;
  animation:ejectedAppearStable .26s ease, ejectedPulseStable 1s ease infinite !important;
}
.eject-slot .ejected-tile.to-top{
  transform:rotate(180deg) !important;
}
.eject-slot .ejected-tile.to-bottom{
  transform:none !important;
}
.center-zone > .ejected-tile.hidden{
  display:none !important;
}


/* v19: uproszczenie widoku kafelków i usunięcie podpisów typu cyfr */
.color-badge{display:none!important;}
.tile{box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),0 2px 3px rgba(0,0,0,.12)!important;}
.tile.back{box-shadow:inset 4px 4px 8px rgba(255,255,255,.38),inset -5px -7px 11px rgba(80,38,0,.32),0 3px 4px rgba(0,0,0,.16)!important;}
.tile.face{box-shadow:inset 4px 4px 7px rgba(255,255,255,.48),inset -5px -7px 10px rgba(85,68,36,.18),0 3px 4px rgba(0,0,0,.14)!important;}
.center-tile.selected{box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),0 0 0 5px rgba(231,192,97,.24),0 4px 6px rgba(0,0,0,.15)!important;}
.tile.eject-glow,.ejected-tile{animation:softPulseLight 1s ease infinite!important;}
@keyframes softPulseLight{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.10);}
}


/* v20: bez mignięcia wypchniętego kafelka po zakończeniu animacji kolumny.
   Kafelek w 4. rzędzie pojawia się od razu, bez animacji opacity/appear. */
.eject-slot .ejected-tile{
  opacity:1!important;
  animation:softPulseLight 1s ease infinite!important;
}
.eject-slot .ejected-tile.eject-glow{
  opacity:1!important;
  animation:softPulseLight 1s ease infinite!important;
}

/* v22: strzałka w połowie odległości między lewą krawędzią planszy a kafelkiem na środku */
.turn-info{
  left:25% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
@media(max-width:560px){
  .turn-info{left:25% !important;}
}
@media(max-width:380px){
  .turn-info{left:25% !important;}
}

/* v23: ramka instrukcji w połowie między środkowym kafelkiem a prawym brzegiem planszy, tekst wycentrowany */
.status-text{
  left:75% !important;
  right:auto !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(31vw,230px) !important;
  align-items:center !important;
  text-align:center !important;
  justify-content:center !important;
}
.status-text.to-top{
  transform:translate(-50%,-50%) rotate(180deg) !important;
  transform-origin:center center !important;
}
.status-text.to-bottom{
  transform:translate(-50%,-50%) !important;
}
@media(max-width:560px){
  .status-text{left:75% !important;width:30vw !important;text-align:center !important;align-items:center !important;}
}
@media(max-width:380px){
  .status-text{left:75% !important;width:29vw !important;text-align:center !important;align-items:center !important;}
}

/* v24: dokładne wyśrodkowanie ramki instrukcji między prawą krawędzią środkowego kafelka a prawą krawędzią planszy */
.status-text{
  left:calc(75% + (var(--center-ui-size, 74px) / 4)) !important;
  right:auto !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(31vw,230px) !important;
  align-items:center !important;
  text-align:center !important;
  justify-content:center !important;
}
.status-text.to-top{
  transform:translate(-50%,-50%) rotate(180deg) !important;
  transform-origin:center center !important;
}
.status-text.to-bottom{
  transform:translate(-50%,-50%) !important;
}
@media(max-width:560px){
  .status-text{
    left:calc(75% + (var(--center-ui-size, 48px) / 4)) !important;
    width:30vw !important;
  }
}
@media(max-width:380px){
  .status-text{
    left:calc(75% + (var(--center-ui-size, 46px) / 4)) !important;
    width:29vw !important;
  }
}


/* v29: ukrycie oryginalnych kafelków pod klonami animacyjnymi */
.anim-source-hidden{
  visibility:hidden !important;
}


/* v30: grafiki kafelków z katalogu /photo/
   Wymagane pliki na serwerze:
   /photo/kafelekzloty.png   - kafelek zakryty
   /photo/kafelekkremowy.png - kafelek odkryty
*/
.tile{
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  border-color:transparent !important;
}

/* zakryty kafelek */
.tile.back,
.tile.blank{
  background:transparent url("photo/kafelekzloty.png") center center / 100% 100% no-repeat !important;
  color:transparent !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

/* usuwamy ozdobniki CSS, bo wygląd daje teraz PNG */
.tile.back::before,
.tile.back::after{
  display:none !important;
}

/* odkryty kafelek */
.tile.face{
  background:transparent url("photo/kafelekkremowy.png") center center / 100% 100% no-repeat !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

/* pusty odkryty kafelek też używa kremowego tła, ale bez symbolu */
.tile.blank.face{
  background:transparent url("photo/kafelekkremowy.png") center center / 100% 100% no-repeat !important;
  color:transparent !important;
  text-shadow:none !important;
}
.tile.blank.face::after{
  content:'' !important;
}

/* slot na środku nadal zostaje pustym miejscem 3D, a nie grafiką kafelka */
.center-tile.tile-slot:not(.back):not(.face){
  background:linear-gradient(145deg,rgba(0,0,0,.58),rgba(255,255,255,.09)) !important;
  border:2px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 9px 20px rgba(0,0,0,.62),inset 0 -5px 10px rgba(255,255,255,.08),0 10px 20px rgba(0,0,0,.3) !important;
}

/* cyfry pozostają nakładane programowo na kremowy kafelek */
.tile.face.navy{
  color:var(--navy) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 0 rgba(0,0,0,.22) !important;
}
.tile.face.burgundy{
  color:var(--burgundy) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 0 rgba(0,0,0,.22) !important;
}


/* v31: środkowy slot i podświetlenie wypchniętego kafelka w kształcie realnego PNG */
.center-tile,
.ejected-tile,
.tile{
  border-radius:12.5% !important;
}

/* Puste miejsce na środku ma kształt kafelka z pliku PNG.
   Maska korzysta z przezroczystości kafelka kremowego. */
.center-tile.tile-slot:not(.back):not(.face){
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(145deg, rgba(0,0,0,.70), rgba(255,255,255,.08)) !important;
  border:0 !important;
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,.68),
    inset 0 -5px 12px rgba(255,255,255,.08),
    0 9px 20px rgba(0,0,0,.28) !important;
  -webkit-mask-image:url("photo/kafelekkremowy.png");
  -webkit-mask-size:100% 100%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-image:url("photo/kafelekkremowy.png");
  mask-size:100% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
}

/* Wyłączamy prostokątne/dashed obrysy na wypchniętym kafelku. */
.eject-slot .ejected-tile,
.eject-slot .ejected-tile.eject-glow{
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
  animation:ejectedPngGlow 1.05s ease-in-out infinite !important;
}

/* Poświata idzie po alfie obrazka PNG, czyli po realnym zaokrąglonym kształcie kafelka. */
@keyframes ejectedPngGlow{
  0%,100%{
    filter:
      brightness(1)
      drop-shadow(0 0 0 rgba(255,245,180,.0))
      drop-shadow(0 0 0 rgba(103,216,255,.0));
  }
  50%{
    filter:
      brightness(1.11)
      drop-shadow(0 0 4px rgba(255,245,180,.96))
      drop-shadow(0 0 10px rgba(103,216,255,.62));
  }
}

/* Kafelek na środku po zaznaczeniu też dostaje miękką poświatę po kształcie PNG. */
.center-tile.selected{
  outline:none !important;
  filter:
    brightness(1.08)
    drop-shadow(0 0 5px rgba(255,245,180,.72))
    drop-shadow(0 0 11px rgba(231,192,97,.45)) !important;
  box-shadow:none !important;
}


/* v32: ciemne miejsce na środku istnieje zawsze jako warstwa pod kafelkiem */
.center-stack{
  position:absolute !important;
  isolation:isolate;
}

.center-stack::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:var(--center-ui-size);
  height:var(--center-ui-size);
  transform:translate(-50%,-50%);
  z-index:0;
  border-radius:12.5%;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(145deg, rgba(0,0,0,.70), rgba(255,255,255,.08));
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,.68),
    inset 0 -5px 12px rgba(255,255,255,.08),
    0 9px 20px rgba(0,0,0,.28);
  -webkit-mask-image:url("photo/kafelekkremowy.png");
  -webkit-mask-size:100% 100%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-image:url("photo/kafelekkremowy.png");
  mask-size:100% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
  pointer-events:none;
}

.center-tile{
  position:relative !important;
  z-index:1 !important;
}

/* Gdy kafelek na środku jest ukrywany na czas animacji, nie zostaje dziura,
   bo pod spodem stale widać ciemny slot. */
.center-tile.anim-source-hidden{
  visibility:hidden !important;
}

/* Pusty środkowy button-slot może być przezroczysty, bo stały slot rysuje ::before.
   Dzięki temu nie ma podwójnego cienia, ale miejsce dalej wygląda identycznie. */
.center-tile.tile-slot:not(.back):not(.face){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}




/* v35: pierwszy rząd naprawdę używa tego samego migającego podświetlenia co wypchnięty 4. kafelek.
   Ważne: nie ma tu statycznego filter: ... !important, bo to blokowało animację. */
button.tile.entry-target,
.tile.entry-target,
.board .tile.entry-target,
.player-card .board .tile.entry-target,
button.tile.back.entry-target,
button.tile.face.entry-target{
  outline:0 !important;
  outline-style:none !important;
  outline-width:0 !important;
  border:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
  animation:ejectedPngGlow 1.05s ease-in-out infinite !important;
  will-change:filter;
}

/* żadnych pseudoelementów ani przerywanych ramek na kafelkach pierwszego rzędu */
button.tile.entry-target::before,
button.tile.entry-target::after,
.tile.entry-target::before,
.tile.entry-target::after{
  outline:0 !important;
  border:0 !important;
}


/* v36: wypchnięty kafelek u gracza z cyframi rzymskimi nie dostaje dodatkowego obrotu.
   Jest już w obróconej planszy gracza 2, więc samo PNG nie może być obracane drugi raz. */
.opponent-card .eject-slot .ejected-tile.to-top,
.opponent-card .eject-slot .ejected-tile.to-bottom,
#ejectRow1 .ejected-tile.to-top,
#ejectRow1 .ejected-tile.to-bottom{
  transform:none !important;
}

/* v36: po poprawnym wskazaniu kolumny podświetlenie pierwszego rzędu gaśnie od razu */
.tile.entry-target.entry-target-off,
button.tile.entry-target.entry-target-off{
  animation:none !important;
  filter:none !important;
  outline:0 !important;
  box-shadow:none !important;
}


/* v37: złoty gradient i glow dla liczby 37 w tytule startowym */
.game-title{margin:0;font-size:clamp(2.9rem,11vw,6.2rem);line-height:.86;letter-spacing:-.07em;font-weight:1000;}
.title-37{display:inline-block;margin-left:.04em;background:linear-gradient(180deg,#fff6bf 0%,#ffe27a 24%,#f7c846 52%,#d99615 78%,#fff0a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 3px rgba(255,228,122,.65)) drop-shadow(0 0 10px rgba(231,192,97,.55)) drop-shadow(0 0 16px rgba(255,215,90,.35));text-shadow:none;}




/* v39: liczba 37 ma złoty gradient, ale bez glow i bez migania */
.title-37{
  background:linear-gradient(180deg,#fff6bf 0%,#ffe27a 24%,#f7c846 52%,#d99615 78%,#fff0a8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  filter:none !important;
  text-shadow:none !important;
  animation:none !important;
}


/* v40: nazwa gry Kafelki37 — złoty gradient dla liczby 37, bez glow */
.title-37{
  display:inline-block;
  margin-left:.04em;
  background:linear-gradient(180deg,#fff6bf 0%,#ffe27a 24%,#f7c846 52%,#d99615 78%,#fff0a8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  filter:none !important;
  text-shadow:none !important;
  animation:none !important;
}