/* ===== Tower (1win style) ===== */
:root{
  --tw-bg:#0a0d16;
  --tw-card:#121728;
  --tw-card2:#171d33;
  --tw-line:#232b48;
  --tw-blue:#2b6cff;
  --tw-blue2:#1a4fd6;
  --tw-gold:#ffd257;
  --tw-green:#26d07c;
  --tw-green2:#12a05c;
  --tw-red:#ff4d5e;
  --tw-red2:#c9243a;
  --tw-muted:#79819e;
}

.screen-tower,#screen-tower,#tower-root{height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}

.tw-wrap{
  display:flex;flex-direction:column;gap:8px;
  height:100dvh;box-sizing:border-box;
  padding:calc(env(safe-area-inset-top,0px) + 46px) 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:radial-gradient(120% 70% at 50% 0%,#16203c 0%,var(--tw-bg) 62%);
  color:#fff;font-family:inherit;overflow:hidden;
}

/* topbar */
.tw-topbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.tw-bal{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,rgba(43,108,255,.18),rgba(43,108,255,.07));
  border:1px solid rgba(43,108,255,.4);border-radius:999px;
  padding:7px 14px;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.tw-bal .tw-cur{color:var(--tw-gold);font-weight:900;text-shadow:0 0 10px rgba(255,210,87,.4)}

/* board */
.tw-board{
  flex:1 1 auto;min-height:0;
  background:linear-gradient(180deg,var(--tw-card2),var(--tw-card));
  border:1px solid var(--tw-line);border-radius:18px;
  padding:10px;display:flex;flex-direction:column;gap:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.4);
  overflow:hidden;
}
.tw-rows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column-reverse;gap:5px;justify-content:space-between}

.tw-row{display:flex;gap:6px;flex:1 1 0;min-height:0;align-items:stretch;position:relative;transition:opacity .18s}
.tw-row .tw-mult{
  flex:0 0 54px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:var(--tw-muted);font-variant-numeric:tabular-nums;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid transparent;
  transition:color .18s,background .18s,border-color .18s;
}
.tw-row.active .tw-mult{color:var(--tw-gold);background:rgba(255,210,87,.1);border-color:rgba(255,210,87,.35)}
.tw-row.passed .tw-mult{color:var(--tw-green)}

.tw-cell{
  flex:1 1 0;min-width:0;
  border:1px solid var(--tw-line);border-radius:12px;
  background:linear-gradient(180deg,#1c2340,#141a2e);
  color:#fff;font-size:18px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .12s,border-color .18s,background .18s,box-shadow .18s,opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
.tw-cell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 55%);pointer-events:none;
}
.tw-row.active .tw-cell{border-color:rgba(43,108,255,.5);box-shadow:0 0 0 1px rgba(43,108,255,.18) inset,0 0 18px rgba(43,108,255,.14)}
.tw-row.active .tw-cell:active{transform:scale(.96)}
.tw-row:not(.active) .tw-cell{cursor:default}
.tw-row.locked{opacity:.55}
.tw-cell.safe{
  background:linear-gradient(180deg,var(--tw-green),var(--tw-green2));
  border-color:rgba(38,208,124,.7);box-shadow:0 0 18px rgba(38,208,124,.3);
}
.tw-cell.bomb{
  background:linear-gradient(180deg,var(--tw-red),var(--tw-red2));
  border-color:rgba(255,77,94,.7);box-shadow:0 0 18px rgba(255,77,94,.35);
  animation:twShake .32s;
}
.tw-cell.ghost{opacity:.34}
.tw-ic{font-size:20px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:twPop .22s ease-out}
@keyframes twPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes twShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* panel */
.tw-panel{
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--tw-card2),var(--tw-card));
  border:1px solid var(--tw-line);border-radius:18px;padding:10px;
  display:flex;flex-direction:column;gap:8px;
}
.tw-lab{display:block;width:100%;text-align:center;color:var(--tw-muted);font-size:12px;font-weight:800;letter-spacing:.3px}

.tw-diffs{display:flex;gap:6px}
.tw-diff{
  flex:1 1 0;padding:9px 4px;border-radius:12px;border:1px solid var(--tw-line);
  background:#0e1222;color:#c9cee3;font-weight:800;font-size:13px;cursor:pointer;
  transition:all .16s;
}
.tw-diff.on{background:linear-gradient(180deg,var(--tw-blue),var(--tw-blue2));border-color:rgba(43,108,255,.7);color:#fff;box-shadow:0 6px 16px rgba(43,108,255,.3)}
.tw-diff:disabled{opacity:.45;cursor:default}

.tw-betrow{display:flex;gap:6px;align-items:stretch}
.tw-betbtn{
  flex:0 0 auto;width:52px;border-radius:12px;border:1px solid var(--tw-line);
  background:#0e1222;color:#fff;font-size:22px;font-weight:900;line-height:1;cursor:pointer;
}
.tw-betbtn:active{transform:scale(.95)}
.tw-betbtn:disabled{opacity:.45}
.tw-betfield{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;
  background:#0e1222;border:1px solid var(--tw-line);border-radius:12px;padding:10px 12px;
  transition:border-color .15s;
}
.tw-betfield:focus-within{border-color:var(--tw-blue)}
.tw-bet{
  width:auto;max-width:100%;background:transparent;border:none;outline:none;padding:0;
  color:#fff;font-weight:900;font-size:17px;font-family:inherit;text-align:right;font-variant-numeric:tabular-nums;
}
.tw-cur{color:var(--tw-gold);font-weight:900;font-size:17px;line-height:1;text-shadow:0 0 10px rgba(255,210,87,.4)}

.tw-stats{display:flex;gap:6px}
.tw-stat{
  flex:1 1 0;background:#0e1222;border:1px solid var(--tw-line);border-radius:12px;
  padding:7px 6px;text-align:center;
}
.tw-stat small{display:block;color:var(--tw-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.tw-stat b{display:block;font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}
.tw-stat.win b{color:var(--tw-green)}
.tw-stat.mult b{color:var(--tw-gold)}

.tw-actions{display:flex;gap:8px}
.tw-btn{
  flex:1 1 0;padding:13px 16px;border-radius:14px;border:none;cursor:pointer;
  font-size:16px;font-weight:900;color:#fff;letter-spacing:.3px;position:relative;overflow:hidden;
  transition:transform .12s,filter .16s,opacity .16s;
}
.tw-btn:active{transform:scale(.98)}
.tw-btn:disabled{opacity:.5;cursor:default}
.tw-play{background:linear-gradient(180deg,var(--tw-blue),var(--tw-blue2));box-shadow:0 10px 24px rgba(43,108,255,.32)}
.tw-cash{background:linear-gradient(180deg,var(--tw-green),var(--tw-green2));box-shadow:0 10px 24px rgba(38,208,124,.28)}
.tw-btn.hidden{display:none}
.tw-btn.busy{pointer-events:none}
.tw-btn.busy::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);animation:twSweep 1s linear infinite;
}
@keyframes twSweep{to{transform:translateX(100%)}}

/* message slot — fixed height so buttons never jump */
.tw-msg{
  flex:0 0 auto;height:40px;min-height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .18s;
}
.tw-msg.show{opacity:1;visibility:visible}
.tw-msg.win{color:var(--tw-green)}
.tw-msg.lose{color:var(--tw-red)}
.tw-msg.info{color:var(--tw-muted)}

/* history */
.tw-hist{overflow:hidden;flex:0 0 auto}
.tw-hist-track{display:flex;gap:6px}
.tw-hchip{
  flex:0 0 auto;padding:6px 10px;border-radius:10px;font-size:13px;font-weight:900;
  font-variant-numeric:tabular-nums;border:1px solid transparent;
}
.tw-hchip.w{background:rgba(38,208,124,.14);border-color:rgba(38,208,124,.4);color:var(--tw-green)}
.tw-hchip.l{background:rgba(255,77,94,.12);border-color:rgba(255,77,94,.36);color:var(--tw-red)}

@media (max-height:700px){
  .tw-wrap{gap:6px}
  .tw-cell{border-radius:10px;font-size:16px}
  .tw-btn{padding:11px 14px;font-size:15px}
  .tw-msg{height:34px;min-height:34px}
  .tw-diff{padding:7px 4px;font-size:12px}
}
@media (max-height:620px){
  .tw-hist{display:none}
  .tw-stat b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .tw-ic,.tw-cell.bomb,.tw-btn.busy::after{animation:none}
}

/* ===== v2: крупные прямоугольные ячейки ===== */

/* больше места под саму башню */
.tw-wrap{gap:6px;padding-left:8px;padding-right:8px}
.tw-board{padding:8px;border-radius:16px}
.tw-rows{gap:7px}
.tw-row{gap:7px}

/* колонка коэффициента уже — ячейкам больше ширины */
.tw-row .tw-mult{flex:0 0 44px;font-size:11.5px;border-radius:8px}

/* сами ячейки: крупнее и почти прямоугольные */
.tw-cell{
  border-radius:8px;
  min-height:46px;
  font-size:20px;
  border-width:1.5px;
}
.tw-ic{font-size:24px}

/* панель управления компактнее, чтобы башня занимала больше экрана */
.tw-panel{padding:9px;gap:7px;border-radius:16px}
.tw-diff{padding:8px 4px;font-size:12.5px;border-radius:10px}
.tw-betfield,.tw-betbtn{border-radius:10px}
.tw-betfield{padding:9px 12px}
.tw-stat{padding:6px;border-radius:10px}
.tw-stat b{font-size:15px}
.tw-btn{padding:12px 16px;border-radius:12px}
.tw-msg{height:34px;min-height:34px}
.tw-hchip{border-radius:8px}

@media (max-height:740px){
  .tw-cell{min-height:40px;font-size:18px}
  .tw-ic{font-size:21px}
  .tw-rows,.tw-row{gap:6px}
}
@media (max-height:660px){
  .tw-cell{min-height:34px}
  .tw-ic{font-size:19px}
  .tw-rows,.tw-row{gap:5px}
  .tw-msg{height:30px;min-height:30px}
}

/* ===== v3: башня занимает максимум экрана, ячейки крупные ===== */
.tw-wrap{gap:5px;padding-left:8px;padding-right:8px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
.tw-topbar{margin-bottom:0}

/* борд забирает всё свободное место */
.tw-board{flex:1 1 auto!important;min-height:0!important;padding:7px;border-radius:14px}
.tw-rows{gap:6px;justify-content:stretch}
.tw-row{gap:6px;flex:1 1 0;min-height:0}
.tw-row .tw-mult{flex:0 0 40px;font-size:11px;border-radius:7px}

/* ячейки: почти прямоугольные, во всю высоту ряда */
.tw-cell{min-height:0;height:auto;border-radius:8px;border-width:1.5px;font-size:20px}
.tw-ic{font-size:min(26px,4.6vh)}

/* панель — максимально компактная */
.tw-panel{flex:0 0 auto!important;padding:8px;gap:6px;border-radius:14px}
.tw-diffs{gap:5px}
.tw-diff{padding:7px 2px;font-size:11.5px;line-height:1.15;white-space:nowrap;border-radius:9px}
.tw-panel .tw-lab{font-size:10.5px;margin:0;line-height:1}
.tw-betrow{gap:5px}
.tw-betbtn{width:46px;border-radius:9px;font-size:20px}
.tw-betfield{padding:7px 10px;border-radius:9px}
.tw-bet,.tw-cur{font-size:16px}
.tw-stats{gap:5px}
.tw-stat{padding:4px 4px;border-radius:9px}
.tw-stat small{font-size:9.5px}
.tw-stat b{font-size:14px;margin-top:0}
.tw-btn{padding:11px 14px;font-size:15px;border-radius:11px}
.tw-msg{height:28px;min-height:28px;font-size:13px}
.tw-hist{max-height:30px}
.tw-hchip{padding:4px 8px;font-size:12px;border-radius:7px}

@media (max-height:760px){
  .tw-hist{display:none}
  .tw-rows,.tw-row{gap:5px}
}
@media (max-height:640px){
  .tw-msg{height:24px;min-height:24px;font-size:12px}
  .tw-diff{padding:6px 2px;font-size:11px}
  .tw-btn{padding:9px 12px;font-size:14px}
}


/* ==== v4: баланс в самый верх + высокое поле с ячейками + PNG-иконки ==== */
.tw-wrap{
  padding-top:calc(env(safe-area-inset-top,0px) + 4px)!important;
  padding-left:8px!important;padding-right:8px!important;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 5px)!important;
  gap:5px!important;
}
.tw-topbar{
  min-height:30px!important;height:30px!important;margin:0!important;padding:0 0 0 40px!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;
}
.tw-bal{padding:5px 12px!important;font-size:14.5px!important}

/* поле с ячейками забирает максимум высоты */
.tw-board{flex:1 1 auto!important;min-height:60dvh!important;padding:6px!important;display:flex!important}
.tw-rows{flex:1 1 auto!important;display:flex!important;gap:6px!important;min-height:0!important;justify-content:stretch!important}
.tw-row{flex:1 1 0!important;min-height:0!important;height:auto!important;gap:6px!important}
.tw-cell{
  min-height:0!important;height:auto!important;align-self:stretch!important;
  border-radius:9px!important;border-width:1.5px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}

/* кастомные PNG (алмаз / бомба) */
img.tw-ic{
  width:min(34px,5.6vh);height:min(34px,5.6vh);
  object-fit:contain;display:block;margin:0 auto;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
  animation:twIcPop .22s cubic-bezier(.2,1.5,.4,1);
}
.tw-cell.ghost img.tw-ic{opacity:.42;filter:grayscale(.35) drop-shadow(0 1px 3px rgba(0,0,0,.4));animation:none}
@keyframes twIcPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}

/* компактная нижняя панель — чтобы отдать высоту полю */
.tw-panel{flex:0 0 auto!important;padding:7px!important;gap:6px!important;border-radius:14px!important}
.tw-lab{font-size:10px!important;margin:0!important}
.tw-diffs{gap:5px!important}
.tw-diff{padding:6px 4px!important;font-size:11px!important}
.tw-betrow{gap:5px!important}
.tw-betbtn{width:44px!important;font-size:19px!important}
.tw-betfield{padding:6px 9px!important}
.tw-stats{gap:5px!important}
.tw-stat{padding:4px 6px!important}
.tw-stat b{font-size:13.5px!important}
.tw-actions{gap:5px!important}
.tw-btn{padding:11px 12px!important;font-size:15px!important;border-radius:11px!important}
.tw-msg{height:26px!important;min-height:26px!important;font-size:13px!important}
@media (max-height:820px){.tw-hist{display:none!important}}
@media (max-height:700px){
  .tw-board{min-height:54dvh!important}
  img.tw-ic{width:min(26px,4.8vh);height:min(26px,4.8vh)}
  .tw-btn{padding:10px!important;font-size:14px!important}
}


/* ==== v5: UX/UI yacheek + optimizaciya dlya telefona ==== */
.tw-wrap{background:linear-gradient(180deg,#141c34 0%,#0a0d16 46%)!important}
.tw-board{box-shadow:none!important;contain:content;background:linear-gradient(180deg,#181f36,#111627)!important}
.tw-cell{transition:transform .1s ease,opacity .12s ease!important;box-shadow:none!important}
.tw-cell::after{display:none!important}
.tw-row{transition:opacity .14s ease!important}
.tw-row .tw-mult{transition:none!important}
.tw-btn{transition:transform .1s ease,opacity .14s ease!important;box-shadow:none!important}
.tw-btn.busy::after{animation:none!important;display:none!important}
.tw-btn.busy{opacity:.7}
.tw-bal{box-shadow:none!important}
img.tw-ic{filter:none!important;animation:none!important}
.tw-cell.ghost img.tw-ic{filter:none!important;opacity:.4}
.tw-cell.bomb{animation:none!important}

.tw-board{padding:7px!important;border-radius:16px!important;min-height:62dvh!important}
.tw-rows{gap:7px!important}
.tw-row{gap:7px!important}
.tw-cell{border-radius:13px!important;border:1.5px solid #2a3358!important;
  background:linear-gradient(180deg,#212a4c,#161d33)!important}
.tw-row.active .tw-cell{border-color:#3d7bff!important;
  background:linear-gradient(180deg,#26325c,#1a2340)!important}
.tw-row.active .tw-cell:active{transform:scale(.95)}
.tw-row:not(.active):not(.passed) .tw-cell{opacity:.72}
.tw-cell.safe{background:linear-gradient(180deg,#2ee08a,#0f9d57)!important;border-color:#3ff09a!important}
.tw-cell.bomb{background:linear-gradient(180deg,#ff5468,#c9203a)!important;border-color:#ff7182!important}
.tw-cell.was-bomb{background:linear-gradient(180deg,#3a2130,#241621)!important;border-color:#5d2b3a!important}
.tw-cell.was-safe{background:linear-gradient(180deg,#1d3330,#152622)!important;border-color:#28503f!important}
img.tw-ic{width:min(40px,6.4vh)!important;height:min(40px,6.4vh)!important}

.tw-row .tw-mult{flex:0 0 46px!important;border-radius:9px!important;font-size:12px!important;
  background:rgba(255,255,255,.035)!important;border:1px solid transparent!important}
.tw-row.active .tw-mult{background:linear-gradient(180deg,rgba(255,210,87,.22),rgba(255,210,87,.08))!important;
  border-color:rgba(255,210,87,.5)!important;color:#ffd257!important}
.tw-row.passed .tw-mult{background:rgba(38,208,124,.13)!important;
  border-color:rgba(38,208,124,.35)!important;color:#3ee08c!important}

.tw-panel{background:linear-gradient(180deg,#1a2138,#141a2b)!important;border-color:#262f4c!important}
.tw-diff.on{box-shadow:none!important}
.tw-play{box-shadow:none!important}
.tw-cash{box-shadow:none!important}