/* Padėkliukų bokštas. Coasters are positioned in pixels from one coaster width; the world slides down as the tower grows. */
.tower-panel{--brass:#e6b95c;display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.tower-head{display:flex;align-items:center;gap:12px}
.tower-head>div:first-child{flex:1;min-width:0}
.tower-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.tower-head h1 em{color:var(--brass);font-style:italic}
.tower-height{display:grid;justify-items:center;line-height:1}
.tower-height small{font:700 9px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#a58a63}
.tower-height b{font:800 24px/1.1 Georgia,serif;color:#ffe9bd;font-variant-numeric:tabular-nums}
.tower-clock{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:2px solid #b7894a;background:#1b110a;color:#ffe9bd;font:800 21px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.tower-clock.urgent{border-color:#ff7b5e;color:#ffb199;animation:tower-urgent .45s ease-in-out infinite alternate}

.tower-stage{position:relative;height:clamp(260px,46dvh,440px);border-radius:16px;overflow:hidden;border:1px solid #7a5530;background:radial-gradient(ellipse at 40% 20%,#3b2512,#120b06 75%);box-shadow:inset 0 0 50px #000a,0 10px 30px #0007;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.tower-world{position:absolute;inset:0;z-index:1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tower-table{position:absolute;z-index:0;left:0;right:0;bottom:0;height:14%;background:linear-gradient(#7b4c25,#5a3519 30%,#3c220f);box-shadow:0 -2px 0 #9a6a3a inset;pointer-events:none}
.tower-coaster{position:absolute;display:block;border-radius:4px;background:
  linear-gradient(180deg,#ffffff38,transparent 40%,#0000002a),
  linear-gradient(90deg,transparent 8%,var(--pc) 8% 14%,transparent 14% 86%,var(--pc) 86% 92%,transparent 92%),
  linear-gradient(#e9d5ab,#c9ab76);box-shadow:0 2px 0 #00000055,inset 0 0 0 1px #6b4a2266}
.tower-coaster.is-base{background:linear-gradient(#a8743f,#7b4c25);box-shadow:0 2px 0 #0007}
.tower-swing{z-index:2;box-shadow:0 6px 10px #0008,inset 0 0 0 1px #6b4a2266}
.tower-swing[hidden]{display:none}
.tower-chunk.to-left{animation:tower-cut-left 1.1s cubic-bezier(.4,0,.8,.6) forwards}
.tower-chunk.to-right{animation:tower-cut-right 1.1s cubic-bezier(.4,0,.8,.6) forwards}
.tower-chunk.is-lost{animation:tower-cut-right 1.4s cubic-bezier(.4,0,.8,.6) forwards}
.tower-world.is-collapsing .tower-stack .tower-coaster:not(.is-base){animation:tower-collapse 1.6s cubic-bezier(.45,0,.9,.6) var(--fall-d,0s) forwards}

.tower-bartender{position:absolute;z-index:0;right:1%;bottom:4%;height:70%;aspect-ratio:2/3;max-width:27%;background:no-repeat 0 0/400% 400%;filter:drop-shadow(0 8px 12px #000a);pointer-events:none}
.tower-bubble{position:absolute;z-index:2;right:4%;top:5%;max-width:46%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#fff6e3;color:#2a1708;box-shadow:0 8px 24px #0009;pointer-events:none}
.tower-bubble p{margin:0;font:700 clamp(13px,2vw,17px)/1.25 Georgia,serif;text-wrap:balance}
.tower-bubble.pop{animation:tower-pop .3s cubic-bezier(.2,1.5,.4,1)}
.tower-stamp{position:absolute;z-index:3;left:38%;top:30%;padding:4px 14px;border:3px solid currentColor;border-radius:12px;background:#140c06cc;color:#ffe9bd;font:900 clamp(18px,3.4vw,30px)/1 Georgia,serif;letter-spacing:.04em;transform:translateX(-50%) rotate(-7deg) scale(.4);opacity:0;pointer-events:none;white-space:nowrap}
.tower-stamp.show{opacity:1;transform:translateX(-50%) rotate(-7deg) scale(1);transition:transform .3s cubic-bezier(.2,1.6,.4,1),opacity .15s}
.tower-stamp.perfect{color:#ffd34f;box-shadow:0 0 26px #ffd34f88}
.tower-stamp.narrow{color:#ffb38a}
.tower-stamp.topple{color:#ff7b5e;box-shadow:0 0 30px #ff6a5588}

.tower-players{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tower-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic name" "pic stats";align-items:center;column-gap:7px;min-width:0;padding:4px 10px 4px 4px;border-radius:12px;border:2px solid transparent;border-left:4px solid var(--pc);background:#ffffff0c;transition:background .25s,border-color .25s,transform .25s}
.tower-card img,.tower-card>span{grid-area:pic;width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid #c79f54aa;background:#2b1b0e}
.tower-card b{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1dcb4}
.tower-card b em{color:var(--brass);font-style:normal;font-size:10px}
.tower-stats{grid-area:stats;font:600 10px/1.2 system-ui;color:#a58a63;white-space:nowrap}
.tower-badge{position:absolute;top:-8px;right:6px;padding:1px 6px;border-radius:99px;font:800 9px/1.4 system-ui;font-style:normal;letter-spacing:.1em;color:#1b1204;background:var(--brass)}
.tower-badge:empty{display:none}
.tower-card.is-turn{background:#e6b95c26;transform:translateY(-2px);box-shadow:0 0 16px #e6b95c55}
.tower-card.is-turn .tower-badge{animation:tower-urgent .5s ease-in-out infinite alternate}
.tower-card.is-me{border-top-color:var(--brass);border-right-color:var(--brass);border-bottom-color:var(--brass)}
.tower-card.is-out{background:#8c2b2038}
.tower-card.is-out .tower-badge{background:#ff7b5e}

.tower-controls{display:grid;gap:8px}
.tower-button{min-height:76px;padding:8px 14px;border:0;border-radius:16px;display:grid;gap:2px;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;color:#2a1403;background:linear-gradient(#ffd77a,#ee9d2f);box-shadow:0 6px 0 #9a5d12,0 12px 24px #0008;transition:transform .06s,box-shadow .06s,filter .2s}
.tower-button strong{font:900 24px/1 Georgia,serif;letter-spacing:.05em}
.tower-button small{font:600 12px/1.2 system-ui;color:#5b3a12}
.tower-button:active{transform:translateY(4px);box-shadow:0 2px 0 #9a5d12}
.tower-button.is-ready{animation:tower-ready .7s ease-in-out infinite alternate}
.tower-button[aria-disabled=true]{filter:grayscale(.6) brightness(.7);box-shadow:0 3px 0 #5b3a12;animation:none}
.tower-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tower-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}

@keyframes tower-urgent{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes tower-ready{from{box-shadow:0 6px 0 #9a5d12,0 0 6px #ffcf6a55}to{box-shadow:0 6px 0 #9a5d12,0 0 26px #ffcf6acc}}
@keyframes tower-pop{from{transform:scale(.85)}to{transform:none}}
@keyframes tower-cut-left{to{transform:translate(-60px,260px) rotate(-120deg);opacity:0}}
@keyframes tower-cut-right{to{transform:translate(60px,260px) rotate(120deg);opacity:0}}
@keyframes tower-collapse{to{transform:translate(var(--fall-x,60px),420px) rotate(var(--fall-r,60deg));opacity:0}}
@media(min-width:900px){
  .tower-panel{grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"pause pause" "head head" "stage controls" "stage players";align-items:start;column-gap:18px}
  .tower-panel>.tower-pause{grid-area:pause}
  .tower-panel>.tower-head{grid-area:head}
  .tower-panel>.tower-stage{grid-area:stage;height:clamp(320px,56dvh,520px)}
  .tower-panel>.tower-controls{grid-area:controls}
  .tower-panel>.tower-players{grid-area:players;flex-direction:column;flex-wrap:nowrap}
  .tower-button{min-height:96px}
}
@media(max-width:560px){.tower-clock{width:44px;height:44px;font-size:19px}.tower-bubble{max-width:60%}}
@media(prefers-reduced-motion:reduce){.tower-world{transition:none}.tower-chunk,.tower-world.is-collapsing .tower-stack .tower-coaster:not(.is-base){animation:none;opacity:0}.tower-clock.urgent,.tower-button.is-ready,.tower-card.is-turn .tower-badge,.tower-bubble.pop{animation:none}.tower-stamp.show{transition:none}}

/* Practice page against bots (/?tower-preview). */
.tower-practice{display:grid;gap:14px;max-width:760px;margin:0 auto}
.tower-practice.is-playing{max-width:1100px}
.tower-practice-setup{display:grid;gap:12px;padding:18px;border:1px solid #7a5530;border-radius:16px;background:#1b110acc}
.tower-practice-setup h1{margin:0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,serif}
.tower-practice-setup h1 em{color:#e6b95c;font-style:italic}
.tower-practice-setup p{margin:0;color:#d9c093}
.tower-practice-setup .tower-options{display:flex;flex-wrap:wrap;gap:10px}
.tower-practice-setup label{display:grid;gap:4px;font:600 12px/1.2 system-ui;color:#e9d3a8}
.tower-practice-setup select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid #7a5530;background:#120b06;color:#ffe9bd;font:600 14px system-ui}
.tower-practice-actions{display:flex;flex-wrap:wrap;gap:8px}
.tower-practice-note{margin:0;color:#a58a63;font-size:12px;text-align:center}
.tower-practice-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tower-practice-results li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#ffffff0c;color:#f1dcb4}
.tower-practice-results li img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.tower-practice-results li.loser{background:#8c2b2038;border:1px solid #d8493a55}
.tower-practice-results li em{font-style:normal;font-weight:800;color:#a8e59a}
.tower-practice-results li.loser em{color:#ff8e7c}
.tower-practice-pause{display:flex;justify-content:flex-end}
@media (orientation:landscape) and (max-height:650px) and (max-width:1400px){
  body.tower-practice-page.game-screen .tower-practice{gap:0}
  body.tower-practice-page.game-screen .tower-practice-note{display:none}
  body.tower-practice-page.game-screen .tower-panel{padding:6px 64px 4px max(14px,env(safe-area-inset-left));border:0;border-radius:0;margin:0}
  body.tower-practice-page.game-screen .tower-practice-pause{position:fixed;z-index:44;right:max(8px,env(safe-area-inset-right));top:8px}
  body.tower-practice-page.game-screen .tower-practice-pause .button{width:48px;min-width:0;min-height:44px;padding:0;font-size:0}
  body.tower-practice-page.game-screen .tower-practice-pause .button::before{content:"Ⅱ";font-size:18px}
  body.tower-practice-page.game-screen .tower-practice-pause .button.is-paused::before{content:"▶"}
}
