*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{overscroll-behavior:none;color:#fff;background:#1760c7}
body::before{content:"";position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;filter:saturate(1.05)}
.bg-sea::before{background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.25)),url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1600&auto=format&fit=crop")}
.bg-mountains::before{background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.28)),url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1600&auto=format&fit=crop")}
.bg-night::before{background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.42)),url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop")}
.bg-flowers::before{background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.25)),url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1600&auto=format&fit=crop")}
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.home-card{width:min(520px,92vw);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:28px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.18);backdrop-filter:blur(12px)}.brand{font-size:34px;font-weight:900}.version{opacity:.85;margin:6px 0 24px}.game-tile{display:flex;gap:16px;align-items:center;text-decoration:none;color:#fff;background:rgba(12,72,167,.65);padding:18px;border-radius:22px}.game-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff;color:#1760c7;font-weight:900}.game-tile strong{display:block;font-size:22px}.game-tile small{display:block;opacity:.9;margin-top:4px}
.app{min-height:100vh;max-width:760px;margin:0 auto;display:flex;flex-direction:column;padding:10px 12px 14px;touch-action:none;background:rgba(18,39,74,.16);backdrop-filter:blur(2px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}.round-btn,.pill-btn{border:0;color:white;background:rgba(10,75,172,.75);box-shadow:0 8px 22px rgba(0,0,0,.12);font-weight:900}.round-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:34px;line-height:1}.titlebox{text-align:center;flex:1}.titlebox h1{margin:0;font-size:25px;font-weight:900}.titlebox p{margin:4px 0 0;font-size:14px}.top-actions{display:flex;gap:6px}.pill-btn{height:36px;padding:0 10px;border-radius:22px;font-size:12px}.pill-btn.strong{background:rgba(5,67,158,.88)}
.player-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 4px;font-size:13px;font-weight:900}.player-chip{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 11px}.small-link-btn{border:0;border-radius:999px;padding:7px 10px;background:rgba(5,67,158,.72);color:white;font-weight:900}.score-box,.streak-box{position:absolute;top:72px;background:rgba(5,76,178,.72);padding:8px 11px;border-radius:999px;font-weight:900;font-size:13px;backdrop-filter:blur(8px)}.score-box{right:10px}.streak-box{left:10px}
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:245px;max-height:34vh;padding:8px 0}.board{display:grid;gap:3px;justify-content:center;align-content:center;transform-origin:center}.cell{width:27px;height:27px;border-radius:5px;display:grid;place-items:center;background:rgba(235,247,255,.96);color:transparent;font-size:16px;font-weight:900;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.15)}.cell.blank{background:transparent;box-shadow:none}.cell.filled{background:linear-gradient(180deg,#2679df,#1559b5);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.25)}.cell.hint-letter{background:linear-gradient(180deg,#ffe486,#ffc13d);color:#15427e;text-shadow:none}
.answer-wrap{text-align:center;min-height:66px}.current-word{width:170px;height:46px;border-radius:27px;background:rgba(5,76,178,.84);margin:0 auto 7px;display:grid;place-items:center;font-size:22px;font-weight:900;letter-spacing:2px}.message{font-size:17px;font-weight:900}.bonus{font-size:14px;margin-top:5px;opacity:.9}
.wheel-area{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px}.wheel-wrap{position:relative;width:246px;height:246px;align-self:center}.wheel{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 18px 42px rgba(0,0,0,.20)}.letter{position:absolute;width:54px;height:54px;border-radius:50%;border:0;background:linear-gradient(180deg,#2376df,#1358b7);color:#fff;font-size:25px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.22);display:grid;place-items:center;transform:translate(-50%,-50%);user-select:none;touch-action:none;z-index:6}.letter.selected{background:linear-gradient(180deg,#0b449b,#082f72);transform:translate(-50%,-50%) scale(1.05)}.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.lines line{stroke:#1558b8;stroke-width:8;stroke-linecap:round}.side-action{width:50px;min-width:50px;height:56px;border:0;border-radius:18px;background:rgba(255,255,255,.92);font-weight:1000;font-size:23px;box-shadow:0 10px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1760c7}.side-action span{font-size:10px}.hint-action{color:#b87900}
.hint-overlay,.celebration-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);display:grid;place-items:center;z-index:20}.hint-overlay.hidden,.celebration-overlay.hidden{display:none}.hint-card,.celebration-card{width:min(420px,88vw);background:#fff;color:#15427e;border-radius:24px;padding:22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.28)}.hint-words{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.hint-words span{background:#e8f2ff;color:#1358b7;border-radius:999px;padding:8px 12px;font-weight:900}.medal{font-size:60px}.celebration-card button{border:0;border-radius:999px;padding:13px 24px;background:#1760c7;color:white;font-weight:900;font-size:16px}
.login-screen{position:fixed;inset:0;z-index:50;background:linear-gradient(180deg,#1760c7 0%,#35a6e4 55%,#80c86b 100%);display:flex;align-items:center;justify-content:center;padding:18px}.login-screen.hidden{display:none}.login-card{width:min(420px,92vw);background:rgba(255,255,255,.95);color:#15427e;border-radius:28px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.login-card h2{margin:0 0 6px;font-size:27px}.login-card p{margin:0 0 18px;color:#42638c;font-weight:700}.player-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.player-choice{border:0;border-radius:18px;padding:14px 16px;background:#e8f2ff;color:#1358b7;font-size:18px;font-weight:900;text-align:left}.add-player-row{display:flex;gap:8px}.add-player-row input{flex:1;min-width:0;border:2px solid #d5e6ff;border-radius:16px;padding:12px 14px;font-size:16px;font-weight:800}.add-player-row button{border:0;border-radius:16px;background:#1760c7;color:white;font-weight:900;padding:0 15px}.login-error{min-height:18px;margin:8px 0 10px;color:#b31432;font-weight:900;font-size:14px}
.score-pop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:40;background:rgba(255,255,255,.96);color:#1358b7;border-radius:999px;padding:12px 18px;font-weight:1000;font-size:20px;box-shadow:0 16px 40px rgba(0,0,0,.22);animation:scorePop .9s ease forwards;pointer-events:none}.score-pop.minus{color:#b31432}@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-90%) scale(.96)}}


/* v1.0.1 - poprawka Android: koło nie wychodzi poza dół ekranu */
html, body{
  height:100%;
  min-height:100%;
  overflow:hidden;
}
.app{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  padding-top:calc(6px + env(safe-area-inset-top));
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  gap:2px;
  overflow:hidden;
}
.topbar{
  min-height:48px;
  flex-shrink:0;
}
.player-bar{
  margin:0;
  flex-shrink:0;
}
.score-box,.streak-box{
  top:58px;
}
.board-wrap{
  flex:1 1 auto;
  min-height:150px;
  max-height:none;
  padding:2px 0;
  overflow:hidden;
}
.answer-wrap{
  min-height:50px;
  flex-shrink:0;
}
.current-word{
  height:38px;
  width:150px;
  font-size:19px;
  margin-bottom:4px;
}
.message{
  font-size:14px;
  line-height:1.1;
}
.bonus{
  display:none;
}
.wheel-area{
  flex-shrink:0;
  margin-top:0;
  padding-bottom:0;
  transform-origin:center bottom;
}
.wheel-wrap{
  width:220px;
  height:220px;
}
.letter{
  width:48px;
  height:48px;
  font-size:22px;
}
.side-action{
  width:46px;
  min-width:46px;
  height:50px;
  border-radius:16px;
  font-size:21px;
}
.side-action span{
  font-size:9px;
}
.cell{
  width:25px;
  height:25px;
  font-size:15px;
}
.board{
  gap:3px;
}

@media(max-height:760px){
  .titlebox h1{font-size:21px}
  .titlebox p{font-size:12px}
  .round-btn{width:36px;height:36px;font-size:30px}
  .pill-btn{height:32px;padding:0 8px;font-size:11px}
  .player-bar{font-size:11px}
  .player-chip,.small-link-btn{padding:5px 8px}
  .score-box,.streak-box{top:52px;font-size:11px;padding:5px 8px}
  .board-wrap{min-height:120px}
  .cell{width:23px;height:23px;font-size:14px}
  .current-word{height:34px;width:135px;font-size:18px}
  .answer-wrap{min-height:44px}
  .wheel-wrap{width:202px;height:202px}
  .letter{width:44px;height:44px;font-size:20px}
  .side-action{width:42px;min-width:42px;height:46px;font-size:19px}
}

@media(max-height:680px){
  .app{padding-top:4px;padding-bottom:4px}
  .topbar{min-height:42px}
  .titlebox h1{font-size:19px}
  .titlebox p{display:none}
  .player-bar{transform:scale(.92); height:26px}
  .score-box,.streak-box{top:44px}
  .board-wrap{min-height:95px}
  .cell{width:21px;height:21px;font-size:13px}
  .board{gap:2px}
  .answer-wrap{min-height:38px}
  .current-word{height:30px;width:122px;font-size:16px}
  .message{font-size:12px}
  .wheel-wrap{width:178px;height:178px}
  .letter{width:39px;height:39px;font-size:18px}
  .side-action{width:38px;min-width:38px;height:42px;font-size:17px}
  .side-action span{display:none}
}


/* v1.0.3 - litery zawsze współśrodkowe z kołem */
.letter.selected{
  outline:4px solid rgba(255,255,255,.85);
  box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 6px rgba(8,47,114,.25);
}


/* v1.0.4 - profesjonalny układ jak wybrany projekt */
html, body{
  height:100%;
  min-height:100%;
  overflow:hidden;
}
body::before{
  filter:saturate(1.1) contrast(1.04);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(7,25,58,.10) 0%, rgba(7,25,58,.04) 48%, rgba(7,25,58,.28) 100%);
  pointer-events:none;
}
.app{
  height:100svh;
  min-height:100svh;
  max-height:100svh;
  padding:calc(8px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto auto minmax(280px, 1fr) auto auto;
  gap:8px;
  overflow:hidden;
  background:rgba(7,22,50,.10);
  backdrop-filter:none;
}
.topbar{
  min-height:54px;
  height:54px;
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:10px;
}
.round-btn{
  width:50px;
  height:50px;
  font-size:40px;
  background:linear-gradient(180deg,#2178e6,#0c55bd);
  box-shadow:0 6px 14px rgba(0,0,0,.20);
}
.titlebox h1{
  font-size:32px;
  line-height:1;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.titlebox p{
  font-size:17px;
  margin-top:5px;
  text-shadow:0 2px 5px rgba(0,0,0,.22);
}
.pill-btn{
  height:44px;
  padding:0 18px;
  font-size:16px;
  border-radius:24px;
  background:linear-gradient(180deg,#2178e6,#0c55bd);
  box-shadow:0 6px 14px rgba(0,0,0,.20);
}
.player-bar{
  grid-row:2;
  display:grid;
  grid-template-columns:auto auto auto;
  justify-content:center;
  gap:10px;
  margin:0;
  font-size:15px;
}
.player-chip,
.small-link-btn{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
}
.small-link-btn{
  background:linear-gradient(180deg,#2178e6,#0c55bd);
  border:0;
}
.score-box,
.streak-box{
  top:calc(78px + env(safe-area-inset-top));
  font-size:15px;
  padding:9px 15px;
  background:linear-gradient(180deg,#2178e6,#0c55bd);
  box-shadow:0 6px 14px rgba(0,0,0,.20);
}
.score-box{right:18px}
.streak-box{left:18px}
.board-wrap{
  grid-row:3;
  min-height:0;
  height:100%;
  max-height:none;
  padding:6px 0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.board{
  gap:7px;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.22));
}
.cell{
  width:48px;
  height:48px;
  border-radius:10px;
  font-size:27px;
  background:linear-gradient(180deg,#ffffff,#eef6ff);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 4px 8px rgba(0,0,0,.20);
}
.cell.filled{
  background:linear-gradient(180deg,#257ce9,#0c55bd);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 4px 8px rgba(0,0,0,.24);
}
.answer-wrap{
  grid-row:4;
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.current-word{
  width:min(430px, 62vw);
  height:48px;
  border-radius:26px;
  margin:0 auto 5px;
  font-size:22px;
  background:rgba(7,22,50,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.20);
  backdrop-filter:blur(8px);
}
.message{
  font-size:20px;
  line-height:1.1;
  text-shadow:0 2px 7px rgba(0,0,0,.40);
}
.bonus{display:none}
.wheel-area{
  grid-row:5;
  display:grid;
  grid-template-columns:72px minmax(240px, 360px) 72px;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:0;
  padding-bottom:2px;
  transform:none;
}
.wheel-wrap{
  width:min(360px, 58vw, 34svh);
  height:min(360px, 58vw, 34svh);
  min-width:240px;
  min-height:240px;
  justify-self:center;
}
.wheel{
  background:radial-gradient(circle at 38% 30%, #ffffff 0%, #f6f7f9 42%, #e5e7eb 100%);
  border:6px solid rgba(255,255,255,.92);
  box-shadow:inset 0 7px 12px rgba(255,255,255,.9),inset 0 -8px 14px rgba(0,0,0,.08),0 14px 32px rgba(0,0,0,.28);
}
.letter{
  width:72px;
  height:72px;
  font-size:38px;
  background:linear-gradient(180deg,#1978ed,#0751b6);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.28),0 8px 14px rgba(0,0,0,.28);
}
.letter.selected{
  outline:5px solid rgba(255,255,255,.85);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.28),0 10px 18px rgba(0,0,0,.35),0 0 0 7px rgba(7,81,182,.24);
}
.side-action{
  width:68px;
  min-width:68px;
  height:82px;
  border-radius:22px;
  font-size:32px;
  background:linear-gradient(180deg,#ffffff,#f0f3f8);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9),0 8px 18px rgba(0,0,0,.25);
}
.side-action span{
  display:block;
  font-size:14px;
  margin-top:3px;
}
.hint-action{justify-self:end}
.shuffle-action{justify-self:start}

@media(max-width:520px){
  .app{
    padding-left:12px;
    padding-right:12px;
    grid-template-rows:auto auto minmax(250px, 1fr) auto auto;
    gap:6px;
  }
  .topbar{
    grid-template-columns:48px 1fr auto;
    height:50px;
    min-height:50px;
  }
  .titlebox h1{font-size:29px}
  .titlebox p{font-size:15px}
  .round-btn{
    width:46px;
    height:46px;
    font-size:38px;
  }
  .pill-btn{
    height:40px;
    padding:0 13px;
    font-size:14px;
  }
  .player-bar{
    font-size:13px;
    gap:7px;
  }
  .player-chip,
  .small-link-btn{
    min-height:34px;
    padding:7px 11px;
  }
  .score-box,
  .streak-box{
    top:calc(104px + env(safe-area-inset-top));
    font-size:12px;
    padding:7px 10px;
  }
  .cell{
    width:36px;
    height:36px;
    font-size:22px;
    border-radius:8px;
  }
  .board{gap:5px}
  .current-word{
    width:60vw;
    height:42px;
    font-size:19px;
  }
  .message{font-size:18px}
  .wheel-area{
    grid-template-columns:56px minmax(230px, 1fr) 56px;
    gap:7px;
  }
  .wheel-wrap{
    width:min(300px, 66vw, 33svh);
    height:min(300px, 66vw, 33svh);
    min-width:220px;
    min-height:220px;
  }
  .letter{
    width:58px;
    height:58px;
    font-size:31px;
  }
  .side-action{
    width:54px;
    min-width:54px;
    height:68px;
    border-radius:18px;
    font-size:25px;
  }
  .side-action span{font-size:11px}
}

@media(max-height:740px){
  .app{
    grid-template-rows:auto auto minmax(210px,1fr) auto auto;
    gap:4px;
  }
  .board-wrap{padding-top:0}
  .cell{
    width:31px;
    height:31px;
    font-size:19px;
  }
  .board{gap:4px}
  .current-word{
    height:36px;
    font-size:17px;
  }
  .answer-wrap{min-height:48px}
  .wheel-wrap{
    width:min(260px, 62vw, 31svh);
    height:min(260px, 62vw, 31svh);
    min-width:200px;
    min-height:200px;
  }
  .letter{
    width:50px;
    height:50px;
    font-size:27px;
  }
  .side-action{
    width:48px;
    min-width:48px;
    height:58px;
    font-size:22px;
  }
  .side-action span{font-size:10px}
}

@media(max-height:650px){
  .titlebox p{display:none}
  .player-bar{transform:scale(.92); height:28px}
  .score-box,.streak-box{display:none}
  .cell{
    width:26px;
    height:26px;
    font-size:16px;
  }
  .board{gap:3px}
  .wheel-wrap{
    width:min(220px, 58vw, 30svh);
    height:min(220px, 58vw, 30svh);
    min-width:180px;
    min-height:180px;
  }
  .letter{
    width:42px;
    height:42px;
    font-size:22px;
  }
}


/* v1.0.5 - poprawki osi, linii, logowania i górnych kafelków */
.score-box,
.streak-box{
  top:calc(146px + env(safe-area-inset-top)) !important;
  z-index:12;
}

@media(max-width:520px){
  .score-box,
  .streak-box{
    top:calc(138px + env(safe-area-inset-top)) !important;
  }
}

.board-wrap{
  padding-top:18px !important;
}

.lines{
  z-index:7 !important;
  overflow:visible;
}

.lines line{
  stroke:#1558b8 !important;
  stroke-width:10 !important;
  stroke-linecap:round !important;
  opacity:.95;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

.letter{
  z-index:8 !important;
}

.letter.selected{
  outline:5px solid rgba(255,255,255,.9);
}

.login-card{
  max-height:calc(100svh - 40px);
  overflow:auto;
}

.saved-players-title{
  font-weight:1000;
  color:#15427e;
  opacity:.8;
  margin:2px 0 0;
}

.player-choice.player-tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,#eaf4ff,#d9eaff);
  border:2px solid rgba(23,96,199,.18);
  box-shadow:0 6px 18px rgba(20,70,130,.12);
}

.player-choice.player-tile strong{
  font-size:20px;
}

.player-choice.player-tile span{
  font-size:14px;
  opacity:.75;
}


/* v1.0.6 - kafelki gracza, linia za palcem, poprawione Seria/pkt */
.score-box,
.streak-box{
  position:fixed !important;
  top:calc(146px + env(safe-area-inset-top)) !important;
  z-index:30 !important;
  pointer-events:none;
}

.score-box{
  right:18px !important;
}

.streak-box{
  left:18px !important;
}

.board-wrap{
  padding-top:52px !important;
}

.lines{
  z-index:7 !important;
  overflow:visible;
}

.lines line{
  stroke:#1558b8 !important;
  stroke-width:10 !important;
  stroke-linecap:round !important;
  opacity:.95;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

.lines line.drag-line{
  opacity:.55;
}

.saved-players-title{
  font-weight:1000;
  color:#15427e;
  opacity:.8;
  margin:2px 0 0;
}

.player-choice.player-tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,#eaf4ff,#d9eaff);
  border:2px solid rgba(23,96,199,.18);
  box-shadow:0 6px 18px rgba(20,70,130,.12);
}

.player-choice.player-tile strong{
  font-size:20px;
}

.player-choice.player-tile span{
  font-size:14px;
  opacity:.75;
}

@media(max-width:520px){
  .score-box,
  .streak-box{
    top:calc(136px + env(safe-area-inset-top)) !important;
    font-size:12px !important;
    padding:7px 10px !important;
  }

  .board-wrap{
    padding-top:46px !important;
  }
}

@media(max-height:740px){
  .score-box,
  .streak-box{
    top:calc(122px + env(safe-area-inset-top)) !important;
  }

  .board-wrap{
    padding-top:38px !important;
  }
}

@media(max-height:650px){
  .score-box,
  .streak-box{
    display:block !important;
    top:calc(96px + env(safe-area-inset-top)) !important;
    transform:scale(.86);
  }

  .board-wrap{
    padding-top:30px !important;
  }
}


/* v1.0.7 HARD OVERRIDE — real layout changes, no absolute score/streak */
.app{
  display:grid !important;
  grid-template-rows:auto auto minmax(255px,1fr) auto auto !important;
  gap:6px !important;
}

.player-bar{
  position:relative !important;
  z-index:30 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 4px !important;
  transform:none !important;
  height:auto !important;
}

.score-box,
.streak-box{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  pointer-events:auto !important;
  z-index:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  min-height:34px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1 !important;
  background:linear-gradient(180deg,#2178e6,#0c55bd) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.20) !important;
}

.player-chip,
.small-link-btn{
  min-height:34px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  line-height:1 !important;
}

.board-wrap{
  padding-top:4px !important;
  min-height:0 !important;
  overflow:visible !important;
}

.board{
  z-index:5 !important;
}

.wheel-area{
  z-index:20 !important;
}

/* Bigger visible drag line */
.lines{
  z-index:25 !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.lines line{
  stroke:#0b55bd !important;
  stroke-width:12 !important;
  stroke-linecap:round !important;
  opacity:.9 !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)) !important;
}

.lines line.drag-line{
  stroke:#0b55bd !important;
  opacity:.55 !important;
}

/* Saved-player tiles: clearly visible on login */
.player-list{
  margin:10px 0 16px !important;
}

.saved-players-title{
  font-weight:1000 !important;
  color:#15427e !important;
  opacity:.85 !important;
  margin:2px 0 4px !important;
}

.player-choice.player-tile{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  gap:12px !important;
  background:linear-gradient(180deg,#eaf4ff,#d9eaff) !important;
  border:2px solid rgba(23,96,199,.22) !important;
  box-shadow:0 6px 18px rgba(20,70,130,.14) !important;
}

.player-choice.player-tile strong{
  font-size:20px !important;
}

.player-choice.player-tile span{
  font-size:14px !important;
  opacity:.75 !important;
}

/* Put letters on edge, not near center */
.wheel-wrap{
  overflow:visible !important;
}

.letter{
  z-index:30 !important;
}

@media(max-width:520px){
  .app{
    grid-template-rows:auto auto minmax(245px,1fr) auto auto !important;
    gap:5px !important;
  }

  .player-bar{
    gap:6px !important;
  }

  .score-box,
  .streak-box,
  .player-chip,
  .small-link-btn{
    min-height:30px !important;
    padding:6px 9px !important;
    font-size:12px !important;
  }

  .board-wrap{
    padding-top:2px !important;
  }
}

@media(max-height:700px){
  .score-box,
  .streak-box,
  .player-chip,
  .small-link-btn{
    min-height:28px !important;
    padding:5px 8px !important;
    font-size:11px !important;
  }

  .player-bar{
    gap:5px !important;
  }

  .board-wrap{
    padding-top:0 !important;
  }
}


/* v1.0.8 - final login tile + edge letters */
.login-card{
  max-height:calc(100svh - 38px) !important;
  overflow:auto !important;
}

.player-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin:10px 0 16px !important;
}

.saved-players-title{
  display:block !important;
  font-weight:1000 !important;
  color:#15427e !important;
  opacity:.9 !important;
  margin:2px 0 2px !important;
}

.player-choice.player-tile{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  gap:12px !important;
  min-height:58px !important;
  background:linear-gradient(180deg,#eaf4ff,#d9eaff) !important;
  border:2px solid rgba(23,96,199,.28) !important;
  box-shadow:0 8px 20px rgba(20,70,130,.16) !important;
}

.player-choice.player-tile strong{
  font-size:21px !important;
}

.player-choice.player-tile span{
  font-size:14px !important;
  opacity:.76 !important;
}

/* pokaż wyraźnie, że litery są na obrzeżach */
.wheel-wrap{
  overflow:visible !important;
}

.wheel{
  overflow:visible !important;
}

.letter{
  z-index:40 !important;
}

.lines{
  z-index:35 !important;
}

@media(max-width:520px){
  .letter{
    width:56px !important;
    height:56px !important;
    font-size:30px !important;
  }
}

@media(max-height:700px){
  .letter{
    width:48px !important;
    height:48px !important;
    font-size:26px !important;
  }
}


/* v1.0.9 - kafelek kontynuacji i litery na krawędzi */
.continue-player-tile{
  background:linear-gradient(180deg,#dff1ff,#c7e3ff) !important;
  border:3px solid rgba(23,96,199,.38) !important;
  min-height:68px !important;
}

.continue-player-tile strong{
  font-size:21px !important;
}

.continue-player-tile::before{
  content:"👤";
  font-size:22px;
  margin-right:8px;
}

.wheel,
.wheel-wrap{
  overflow:visible !important;
}

.letter{
  z-index:50 !important;
}

@media(max-width:520px){
  .continue-player-tile{
    min-height:62px !important;
  }
}


/* v1.1.0 — widoczna zmiana: kafelek logowania + litery na samych obrzeżach */
.player-list{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  margin:12px 0 18px !important;
}

.saved-players-title.big-title{
  text-align:center !important;
  font-size:15px !important;
  font-weight:1000 !important;
  color:#15427e !important;
  opacity:.9 !important;
  margin-bottom:2px !important;
}

.player-choice.player-tile,
.continue-player-tile{
  width:100% !important;
  min-height:72px !important;
  border-radius:22px !important;
  display:grid !important;
  grid-template-columns:42px 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
  background:linear-gradient(180deg,#e6f4ff,#cde8ff) !important;
  border:3px solid rgba(23,96,199,.35) !important;
  box-shadow:0 10px 26px rgba(20,70,130,.20) !important;
  color:#124a96 !important;
}

.continue-player-tile{
  background:linear-gradient(180deg,#dff1ff,#bfe0ff) !important;
  border-color:rgba(23,96,199,.55) !important;
}

.player-choice.player-tile .avatar{
  font-size:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.player-choice.player-tile strong{
  font-size:21px !important;
  font-weight:1000 !important;
  color:#124a96 !important;
}

.player-choice.player-tile small{
  font-size:14px !important;
  font-weight:900 !important;
  opacity:.78 !important;
}

/* Litery mogą wychodzić na rant, żeby były na krawędzi koła */
.wheel-wrap,
.wheel{
  overflow:visible !important;
}

.letter{
  z-index:60 !important;
}

@media(max-width:520px){
  .player-choice.player-tile,
  .continue-player-tile{
    min-height:66px !important;
    grid-template-columns:36px 1fr auto !important;
  }
  .player-choice.player-tile strong{
    font-size:19px !important;
  }
}


/* v1.1.1 - kafelek zapamiętany po stronie NAS */
.continue-player-tile strong{
  white-space:normal !important;
}



/* v1.1.2 - stały promień koła i jasny kafelek migracyjny */
.letter{
  transition:none !important;
}

.continue-player-tile{
  outline:2px solid rgba(255,255,255,.7) !important;
}



/* v1.1.3 - stałe kafelki graczy */
.fixed-player-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  width:100% !important;
}

.fixed-player-tile{
  min-height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-align:center !important;
  border-radius:24px !important;
  background:linear-gradient(180deg,#eaf4ff,#cfe8ff) !important;
  border:3px solid rgba(23,96,199,.25) !important;
  box-shadow:0 10px 24px rgba(20,70,130,.16) !important;
}

.fixed-player-tile.last-player{
  background:linear-gradient(180deg,#dff1ff,#b8ddff) !important;
  border-color:rgba(23,96,199,.65) !important;
  box-shadow:0 12px 28px rgba(23,96,199,.26) !important;
}

.fixed-player-tile .avatar{
  font-size:28px !important;
}

.fixed-player-tile strong{
  font-size:22px !important;
  font-weight:1000 !important;
  color:#124a96 !important;
}

.fixed-player-tile small{
  font-size:13px !important;
  font-weight:900 !important;
  color:#416188 !important;
}

.saved-players-title.big-title{
  font-size:22px !important;
  text-align:center !important;
  margin-bottom:10px !important;
}

@media(max-width:420px){
  .fixed-player-grid{
    gap:9px !important;
  }
  .fixed-player-tile{
    min-height:82px !important;
  }
  .fixed-player-tile strong{
    font-size:20px !important;
  }
}


/* v1.1.5 OWNER LOGIN - if you don't see this version banner, the new package is not loaded */
.hard-version-banner{
  position:fixed;
  left:50%;
  top:6px;
  transform:translateX(-50%);
  z-index:9999;
  background:#ffcc00;
  color:#0b2450;
  font-weight:1000;
  font-size:13px;
  padding:5px 12px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.fixed-player-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  width:100% !important;
}

.fixed-player-tile{
  min-height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-align:center !important;
  border-radius:24px !important;
  background:linear-gradient(180deg,#eaf4ff,#cfe8ff) !important;
  border:3px solid rgba(23,96,199,.25) !important;
  box-shadow:0 10px 24px rgba(20,70,130,.16) !important;
}

.fixed-player-tile.last-player{
  background:linear-gradient(180deg,#dff1ff,#b8ddff) !important;
  border-color:rgba(23,96,199,.65) !important;
}

.fixed-player-tile .avatar{font-size:28px !important;}
.fixed-player-tile strong{font-size:22px !important;font-weight:1000 !important;color:#124a96 !important;}
.fixed-player-tile small{font-size:13px !important;font-weight:900 !important;color:#416188 !important;}

.wheel-wrap,.wheel{overflow:visible !important;}
.letter{z-index:60 !important;}

/* v1.1.5 memory fix */
.hard-version-banner{
  background:#00ff99 !important;
}

/* v1.1.6 server login */
.hard-version-banner{background:#66ccff!important;}

/* v1.1.7 button fix */
.hard-version-banner{background:#ff66cc!important;}
.fixed-player-tile{touch-action:manipulation!important;cursor:pointer!important;}


/* v1.1.8 OWNER LOGIN - elementy koła nie wychodzą poza ekran */
.app{
  overflow:hidden !important;
}

.wheel-area{
  grid-template-columns:48px minmax(190px, 1fr) 48px !important;
  gap:5px !important;
  width:100% !important;
  max-width:100vw !important;
  overflow:visible !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.wheel-wrap{
  width:min(270px, 58vw, 31svh) !important;
  height:min(270px, 58vw, 31svh) !important;
  min-width:190px !important;
  min-height:190px !important;
  max-width:270px !important;
  max-height:270px !important;
}

.letter{
  width:50px !important;
  height:50px !important;
  font-size:27px !important;
}

.side-action{
  width:46px !important;
  min-width:46px !important;
  height:58px !important;
  border-radius:16px !important;
  font-size:22px !important;
}

.side-action span{
  font-size:10px !important;
}

@media(max-width:420px){
  .wheel-area{
    grid-template-columns:42px minmax(176px, 1fr) 42px !important;
    gap:4px !important;
  }

  .wheel-wrap{
    width:min(235px, 56vw, 30svh) !important;
    height:min(235px, 56vw, 30svh) !important;
    min-width:176px !important;
    min-height:176px !important;
  }

  .letter{
    width:44px !important;
    height:44px !important;
    font-size:24px !important;
  }

  .side-action{
    width:40px !important;
    min-width:40px !important;
    height:52px !important;
    font-size:19px !important;
  }
}

@media(max-height:700px){
  .wheel-wrap{
    width:min(220px, 54vw, 28svh) !important;
    height:min(220px, 54vw, 28svh) !important;
    min-width:168px !important;
    min-height:168px !important;
  }

  .letter{
    width:40px !important;
    height:40px !important;
    font-size:22px !important;
  }

  .side-action{
    width:38px !important;
    min-width:38px !important;
    height:48px !important;
    font-size:18px !important;
  }

  .side-action span{
    display:none !important;
  }
}


/* v1.1.9 OWNER LOGIN - kafelki są zwykłymi linkami */
.login-link{
  text-decoration:none !important;
  color:#124a96 !important;
  -webkit-tap-highlight-color:rgba(23,96,199,.18);
  touch-action:manipulation !important;
  cursor:pointer !important;
}

.login-link:active{
  transform:scale(.98);
}
.hard-version-banner{
  background:#9cff00 !important;
}


/* v1.2.1 OWNER LOGIN */
.login-screen,
.login-card,
.player-list,
.fixed-player-grid,
.fixed-player-tile{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

.fixed-player-tile{
  position:relative !important;
  z-index:100001 !important;
  cursor:pointer !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}

.hard-version-banner{
  background:#00d5ff !important;
  pointer-events:none !important;
}


/* v1.2.2 OWNER LOGIN - węższe kafelki wyboru imienia */
.fixed-player-grid{
  grid-template-columns:1fr !important;
  width:min(260px, 76vw) !important;
  max-width:260px !important;
  margin:0 auto !important;
  gap:8px !important;
}

.fixed-player-tile{
  width:100% !important;
  min-height:54px !important;
  height:54px !important;
  border-radius:18px !important;
  display:grid !important;
  grid-template-columns:34px 1fr auto !important;
  gap:8px !important;
  padding:8px 12px !important;
  text-align:left !important;
}

.fixed-player-tile .avatar{font-size:22px !important;}
.fixed-player-tile strong{font-size:18px !important;}
.fixed-player-tile small{font-size:12px !important;}

.saved-players-title.big-title{
  font-size:18px !important;
  margin-bottom:8px !important;
}

.hard-version-banner{
  background:#7cff7c !important;
}

@media(max-width:420px){
  .fixed-player-grid{width:min(240px, 78vw) !important;}
  .fixed-player-tile{min-height:50px !important;height:50px !important;}
}

/* v1.3.0 GLOBAL LOGIN */
.hidden{display:none!important}
.global-login h2{margin:18px 0 6px;font-size:26px}
.global-login p{margin:0 0 16px;color:rgba(255,255,255,.88);font-weight:700;line-height:1.35}
.global-player-grid{display:grid;grid-template-columns:1fr;gap:10px;width:min(280px,78vw);margin:0 auto}
.global-player-tile{border:0;border-radius:20px;min-height:58px;padding:12px 16px;background:linear-gradient(180deg,#eaf4ff,#cfe8ff);color:#124a96;font-size:19px;font-weight:1000;box-shadow:0 10px 24px rgba(20,70,130,.16);display:flex;align-items:center;justify-content:center;gap:10px}
.games-panel{margin-top:20px}
.global-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 10px 8px 14px;font-weight:900}
.global-topline button{border:0;border-radius:999px;padding:9px 12px;background:#fff;color:#1760c7;font-weight:900}
.hard-version-banner{background:#a879ff!important}


/* v1.3.1 SCREEN FIT - dopasowanie do małych telefonów */
html,
body{
  height:100%;
  min-height:100%;
  overflow:hidden !important;
}

.app{
  height:var(--real-vh, 100dvh) !important;
  min-height:var(--real-vh, 100dvh) !important;
  max-height:var(--real-vh, 100dvh) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(155px, 1fr) auto auto !important;
}

.board-wrap{
  min-height:0 !important;
  overflow:visible !important;
}

.wheel-area{
  flex-shrink:0 !important;
  width:100% !important;
  max-width:100vw !important;
  overflow:visible !important;
}

.wheel-wrap{
  width:clamp(170px, 54vw, 250px) !important;
  height:clamp(170px, 54vw, 250px) !important;
  min-width:0 !important;
  min-height:0 !important;
}

.letter{
  width:clamp(38px, 12vw, 48px) !important;
  height:clamp(38px, 12vw, 48px) !important;
  font-size:clamp(20px, 6.2vw, 26px) !important;
}

.side-action{
  width:clamp(36px, 10vw, 44px) !important;
  min-width:clamp(36px, 10vw, 44px) !important;
  height:clamp(44px, 13vw, 54px) !important;
  font-size:clamp(17px, 5vw, 21px) !important;
}

.short-screen .app{
  grid-template-rows:auto auto minmax(135px, 1fr) auto auto !important;
  gap:3px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}

.short-screen .topbar{
  min-height:42px !important;
  height:42px !important;
}

.short-screen .titlebox h1{
  font-size:20px !important;
}

.short-screen .titlebox p{
  display:none !important;
}

.short-screen .player-bar{
  transform:scale(.9) !important;
  height:26px !important;
  margin:-2px 0 !important;
}

.short-screen .current-word{
  height:30px !important;
  font-size:16px !important;
  margin-bottom:2px !important;
}

.short-screen .answer-wrap{
  min-height:36px !important;
}

.short-screen .message{
  font-size:12px !important;
}

.short-screen .wheel-wrap{
  width:clamp(160px, 48vw, 210px) !important;
  height:clamp(160px, 48vw, 210px) !important;
}

.short-screen .letter{
  width:38px !important;
  height:38px !important;
  font-size:20px !important;
}

.short-screen .side-action{
  width:34px !important;
  min-width:34px !important;
  height:42px !important;
  font-size:16px !important;
}

.short-screen .side-action span{
  display:none !important;
}

.tiny-screen .app{
  grid-template-rows:auto auto minmax(110px, 1fr) auto auto !important;
  gap:2px !important;
  padding:3px 8px 3px !important;
}

.tiny-screen .topbar{
  min-height:36px !important;
  height:36px !important;
}

.tiny-screen .round-btn{
  width:32px !important;
  height:32px !important;
  font-size:26px !important;
}

.tiny-screen .pill-btn{
  height:28px !important;
  font-size:10px !important;
  padding:0 7px !important;
}

.tiny-screen .titlebox h1{
  font-size:18px !important;
}

.tiny-screen .titlebox p,
.tiny-screen .score-box,
.tiny-screen .streak-box{
  display:none !important;
}

.tiny-screen .player-bar{
  transform:scale(.82) !important;
  height:22px !important;
  margin:-4px 0 !important;
}

.tiny-screen .cell{
  width:20px !important;
  height:20px !important;
  font-size:12px !important;
  border-radius:5px !important;
}

.tiny-screen .board{
  gap:2px !important;
}

.tiny-screen .current-word{
  height:26px !important;
  width:110px !important;
  font-size:14px !important;
}

.tiny-screen .answer-wrap{
  min-height:30px !important;
}

.tiny-screen .message{
  font-size:11px !important;
}

.tiny-screen .wheel-area{
  grid-template-columns:30px minmax(145px, 1fr) 30px !important;
  gap:3px !important;
}

.tiny-screen .wheel-wrap{
  width:clamp(145px, 44vw, 178px) !important;
  height:clamp(145px, 44vw, 178px) !important;
}

.tiny-screen .letter{
  width:32px !important;
  height:32px !important;
  font-size:17px !important;
}

.tiny-screen .side-action{
  width:30px !important;
  min-width:30px !important;
  height:36px !important;
  font-size:15px !important;
  border-radius:12px !important;
}

.tiny-screen .side-action span{
  display:none !important;
}

.narrow-screen .wheel-area{
  grid-template-columns:32px minmax(150px, 1fr) 32px !important;
  gap:3px !important;
}

/* v1.3.4 RENDER FIX */
.hidden{display:none!important}
.game-login-disabled{display:none!important}
.global-login h2{margin:18px 0 6px;font-size:26px}
.global-login p{margin:0 0 16px;color:rgba(255,255,255,.88);font-weight:700;line-height:1.35}
.global-player-grid{display:grid;grid-template-columns:1fr;gap:10px;width:min(280px,78vw);margin:0 auto}
.global-player-tile{border:0;border-radius:20px;min-height:58px;padding:12px 16px;background:linear-gradient(180deg,#eaf4ff,#cfe8ff);color:#124a96;font-size:19px;font-weight:1000;box-shadow:0 10px 24px rgba(20,70,130,.16);display:flex;align-items:center;justify-content:center;gap:10px}
.games-panel{margin-top:20px}
.global-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 10px 8px 14px;font-weight:900}
.global-topline button{border:0;border-radius:999px;padding:9px 12px;background:#fff;color:#1760c7;font-weight:900}
.hard-version-banner{background:#00c2ff!important}

/* v1.3.5 START FIX */
.hard-version-banner{display:none!important;}

/* v1.3.6 PROGRESS FIX */


/* v1.3.7 MOBILE FIT */
/* Usuwa szary/granatowy pasek nad kołem z literami */
.current-word{
  display:none !important;
}

.answer-wrap{
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
}

.message{
  margin:0 !important;
}

/* Mocniejsze dopasowanie dla mniejszych telefonów, żeby całe koło było widoczne */
.ania-fit-screen .app{
  grid-template-rows:auto auto minmax(120px, 1fr) auto auto !important;
  gap:3px !important;
  padding-bottom:calc(3px + env(safe-area-inset-bottom)) !important;
}

.ania-fit-screen .board-wrap{
  min-height:0 !important;
  padding:0 !important;
}

.ania-fit-screen .answer-wrap{
  min-height:22px !important;
}

.ania-fit-screen .wheel-area{
  grid-template-columns:34px minmax(150px, 1fr) 34px !important;
  gap:4px !important;
  align-items:center !important;
  margin-top:0 !important;
  padding-bottom:0 !important;
}

.ania-fit-screen .wheel-wrap{
  width:min(210px, 50vw, 28svh) !important;
  height:min(210px, 50vw, 28svh) !important;
  min-width:155px !important;
  min-height:155px !important;
  max-width:210px !important;
  max-height:210px !important;
}

.ania-fit-screen .letter{
  width:38px !important;
  height:38px !important;
  font-size:20px !important;
}

.ania-fit-screen .side-action{
  width:34px !important;
  min-width:34px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:16px !important;
}

.ania-fit-screen .side-action span{
  display:none !important;
}

.very-short-screen .wheel-wrap{
  width:min(180px, 46vw, 25svh) !important;
  height:min(180px, 46vw, 25svh) !important;
  min-width:140px !important;
  min-height:140px !important;
}

.very-short-screen .letter{
  width:32px !important;
  height:32px !important;
  font-size:17px !important;
}

.very-short-screen .message{
  font-size:10px !important;
}


/* v1.3.8 ADD PLAYER */
.global-player-tile.selected-owner{
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 12px 28px rgba(23,96,199,.32);
}

.add-player-panel{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.add-player-toggle{
  border:0;
  border-radius:999px;
  padding:11px 18px;
  background:rgba(255,255,255,.95);
  color:#1760c7;
  font-weight:1000;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.add-player-form{
  width:min(300px,82vw);
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}

.add-player-form input{
  min-width:0;
  border:2px solid rgba(23,96,199,.25);
  border-radius:16px;
  padding:12px 13px;
  font-size:16px;
  font-weight:800;
}

.add-player-form button{
  border:0;
  border-radius:16px;
  padding:0 14px;
  background:#1760c7;
  color:#fff;
  font-weight:1000;
}

@media(max-width:420px){
  .add-player-form{
    grid-template-columns:1fr;
  }

  .add-player-form button{
    min-height:42px;
  }
}


/* v1.3.9 ANDROID WHEEL */
/* Usuń niepotrzebny pasek "Litery" nad kołem */
.current-word{
  display:none !important;
}

.answer-wrap{
  min-height:22px !important;
  margin:0 !important;
  padding:0 !important;
}

/* Android: większe koło, mniejsze litery, bez nachodzenia */
.wheel-wrap{
  width:clamp(210px, 58vw, 255px) !important;
  height:clamp(210px, 58vw, 255px) !important;
  min-width:210px !important;
  min-height:210px !important;
}

.letter{
  width:42px !important;
  height:42px !important;
  font-size:23px !important;
}

.wheel-area{
  grid-template-columns:42px minmax(210px, 1fr) 42px !important;
  gap:6px !important;
  align-items:center !important;
  max-width:100vw !important;
  overflow:visible !important;
}

.side-action{
  width:40px !important;
  min-width:40px !important;
  height:50px !important;
  font-size:19px !important;
  border-radius:15px !important;
}

.side-action span{
  font-size:9px !important;
}

@media(max-width:430px){
  .wheel-wrap{
    width:220px !important;
    height:220px !important;
    min-width:220px !important;
    min-height:220px !important;
  }

  .letter{
    width:40px !important;
    height:40px !important;
    font-size:22px !important;
  }

  .wheel-area{
    grid-template-columns:38px minmax(220px, 1fr) 38px !important;
    gap:4px !important;
  }

  .side-action{
    width:36px !important;
    min-width:36px !important;
    height:46px !important;
    font-size:17px !important;
  }

  .side-action span{
    display:none !important;
  }
}

.ania-fit-screen .app,
.short-screen .app,
.tiny-screen .app{
  grid-template-rows:auto auto minmax(95px, 1fr) auto auto !important;
}

.ania-fit-screen .wheel-wrap,
.short-screen .wheel-wrap{
  width:210px !important;
  height:210px !important;
  min-width:210px !important;
  min-height:210px !important;
}

.ania-fit-screen .letter,
.short-screen .letter{
  width:38px !important;
  height:38px !important;
  font-size:21px !important;
}

.tiny-screen .wheel-wrap{
  width:190px !important;
  height:190px !important;
  min-width:190px !important;
  min-height:190px !important;
}

.tiny-screen .letter{
  width:34px !important;
  height:34px !important;
  font-size:18px !important;
}

.tiny-screen .cell{
  width:18px !important;
  height:18px !important;
  font-size:11px !important;
}

.tiny-screen .board{
  gap:2px !important;
}


/* v1.4.0 WHEEL RIM */
/* Przywrócony pasek aktualnie układanego słowa */
.current-word{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:min(430px, 62vw) !important;
  height:38px !important;
  border-radius:22px !important;
  margin:0 auto 4px !important;
  font-size:18px !important;
  font-weight:1000 !important;
  color:#fff !important;
  background:linear-gradient(180deg,#2178e6,#0c55bd) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(8px) !important;
}

.answer-wrap{
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
}

/* Litery bliżej obrysu koła */
.wheel-wrap{
  width:clamp(215px, 59vw, 260px) !important;
  height:clamp(215px, 59vw, 260px) !important;
  min-width:215px !important;
  min-height:215px !important;
}

.letter{
  width:41px !important;
  height:41px !important;
  font-size:23px !important;
}

@media(max-width:430px){
  .current-word{
    width:58vw !important;
    height:34px !important;
    font-size:16px !important;
    margin-bottom:3px !important;
  }

  .answer-wrap{
    min-height:42px !important;
  }

  .wheel-wrap{
    width:220px !important;
    height:220px !important;
    min-width:220px !important;
    min-height:220px !important;
  }

  .letter{
    width:39px !important;
    height:39px !important;
    font-size:22px !important;
  }
}

.ania-fit-screen .current-word,
.short-screen .current-word{
  display:flex !important;
  width:54vw !important;
  height:30px !important;
  font-size:15px !important;
  margin-bottom:2px !important;
}

.ania-fit-screen .answer-wrap,
.short-screen .answer-wrap{
  min-height:36px !important;
}

.ania-fit-screen .wheel-wrap,
.short-screen .wheel-wrap{
  width:210px !important;
  height:210px !important;
  min-width:210px !important;
  min-height:210px !important;
}

.ania-fit-screen .letter,
.short-screen .letter{
  width:37px !important;
  height:37px !important;
  font-size:21px !important;
}

.tiny-screen .current-word{
  display:flex !important;
  width:112px !important;
  height:26px !important;
  font-size:13px !important;
}

.tiny-screen .answer-wrap{
  min-height:30px !important;
}

.tiny-screen .wheel-wrap{
  width:190px !important;
  height:190px !important;
  min-width:190px !important;
  min-height:190px !important;
}

.tiny-screen .letter{
  width:33px !important;
  height:33px !important;
  font-size:18px !important;
}


/* v1.4.1 ANDROID BOARD */
/* Android: większa i czytelniejsza krzyżówka */
@media(max-width:520px){
  .board-wrap{
    align-items:center !important;
    justify-content:center !important;
    padding:0 0 4px !important;
    min-height:230px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .board{
    gap:5px !important;
    transform-origin:center center !important;
  }

  .cell{
    width:42px !important;
    height:42px !important;
    border-radius:9px !important;
    font-size:24px !important;
  }
}

/* Typowy Android jak na zdjęciu: dużo miejsca nad kołem, więc plansza może być większa */
@media(max-width:430px) and (min-height:700px){
  .app{
    grid-template-rows:auto auto minmax(285px, 1fr) auto auto !important;
  }

  .board-wrap{
    min-height:300px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .cell{
    width:45px !important;
    height:45px !important;
    border-radius:10px !important;
    font-size:26px !important;
  }

  .board{
    gap:5px !important;
  }
}

/* Wysokie Androidy: krzyżówka prawie jak na iPhonie */
@media(max-width:430px) and (min-height:780px){
  .board-wrap{
    min-height:330px !important;
  }

  .cell{
    width:48px !important;
    height:48px !important;
    border-radius:11px !important;
    font-size:28px !important;
  }

  .board{
    gap:6px !important;
  }
}

/* Nie ściskaj planszy zbyt mocno w klasach dopasowania ekranu */
.ania-fit-screen .cell,
.short-screen .cell{
  width:40px !important;
  height:40px !important;
  font-size:23px !important;
  border-radius:9px !important;
}

.ania-fit-screen .board,
.short-screen .board{
  gap:5px !important;
}

.ania-fit-screen .board-wrap,
.short-screen .board-wrap{
  min-height:250px !important;
}

/* Tylko naprawdę bardzo niski ekran ma mniejsze pola */
.tiny-screen .cell{
  width:32px !important;
  height:32px !important;
  font-size:18px !important;
  border-radius:7px !important;
}

.tiny-screen .board-wrap{
  min-height:190px !important;
}