/* A Torre v1.0.0 */
.tor-game {
  --tor-bg:     #1a2535;
  --tor-card:   #243045;
  --tor-text:   #ffffff;
  --tor-muted:  #a0aec0;
  --tor-wood:   #C8A96E;
  --tor-radius: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--tor-bg);
  min-height: 580px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 12px;
  box-sizing: border-box;
}
.tor-screen { width: 100%; }

/* ---- SETUP ---- */
.tor-setup-box {
  background: var(--tor-card);
  border-radius: var(--tor-radius);
  padding: 32px 28px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.tor-logo  { text-align:center; font-size:3em; margin-bottom:6px; }
.tor-title {
  color: var(--tor-text); text-align:center;
  font-size:1.7em; font-weight:700; margin:0 0 24px;
}
.tor-section       { margin-bottom:20px; }
.tor-section-label { color:var(--tor-muted); font-size:.85em; font-weight:600; margin-bottom:8px; }

.tor-num-btns { display:flex; gap:8px; }
.tor-num-btn {
  flex:1; background:#1a2535;
  border:2px solid rgba(255,255,255,.15);
  border-radius:8px; color:var(--tor-muted);
  font-size:1em; font-weight:700;
  padding:10px 4px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.tor-num-btn.tor-num-active,
.tor-num-btn:hover { border-color:var(--tor-wood); color:#fff; }

.tor-players-inputs { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.tor-input-row      { display:flex; align-items:center; gap:10px; }
.tor-input-lbl      { color:var(--tor-muted); font-size:.85em; font-weight:600; width:72px; flex-shrink:0; }
.tor-name-input {
  flex:1; background:#1a2535;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px; color:#fff;
  font-size:.95em; padding:8px 12px;
  box-sizing:border-box; outline:none;
  transition:border-color .2s;
}
.tor-name-input:focus { border-color:var(--tor-wood); }

/* ---- BUTTONS ---- */
.tor-btn {
  border:none; border-radius:8px; cursor:pointer;
  font-weight:700; transition:opacity .15s, transform .1s;
}
.tor-btn:hover:not(:disabled) { opacity:.88; transform:translateY(-1px); }

.tor-btn-start {
  display:block; width:100%; padding:14px;
  background:linear-gradient(135deg,#8B5A1A,#5C3A0A);
  color:#fff; font-size:1.1em;
}

.tor-btn-confirm {
  display:block; width:100%; padding:13px;
  background:linear-gradient(135deg,#c62828,#7f0000);
  color:#fff; font-size:1em; letter-spacing:.3px;
}
.tor-btn-confirm:disabled {
  background:rgba(255,255,255,.1); color:var(--tor-muted);
  cursor:not-allowed; transform:none !important; opacity:.5;
}

/* ---- PLAYER STRIP ---- */
.tor-players-strip {
  display:flex; justify-content:center;
  flex-wrap:wrap; gap:8px;
  max-width:380px; margin:0 auto 12px;
}
.tor-chip {
  padding:5px 14px; border-radius:20px;
  background:rgba(255,255,255,.08); color:var(--tor-muted);
  font-size:.85em; font-weight:600; transition:all .2s;
}
.tor-chip-active {
  background:#7B4A0A; color:#fff;
  transform:scale(1.08); box-shadow:0 0 12px rgba(200,140,30,.5);
}

/* ---- TOWER ---- */
.tor-tower-wrap {
  max-width:320px;
  margin:0 auto 14px;
}
.tor-tower {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  padding:8px 0;
}
.tor-level { display:flex; gap:4px; }

.tor-block {
  width:90px; height:24px;
  border-radius:3px;
  transition:filter .12s, transform .12s, box-shadow .12s;
  box-sizing:border-box;
}

/* Wood grain via gradient */
.tor-level-a .tor-block-present {
  background:linear-gradient(180deg,#D4AA6C 0%,#A87228 60%,#C89A48 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
  cursor:pointer;
}
.tor-level-b .tor-block-present {
  background:linear-gradient(180deg,#C09050 0%,#96641C 60%,#B08038 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;
}
.tor-level-a .tor-block-present:hover,
.tor-level-b .tor-block-present:hover {
  filter:brightness(1.22);
  box-shadow:0 2px 14px rgba(200,160,80,.55);
  transform:scaleY(1.06);
}

/* top level: forbidden, dark */
.tor-level-top .tor-block-present,
.tor-block-forbidden {
  background:linear-gradient(180deg,#5A3E1C 0%,#3A2208 100%);
  cursor:not-allowed; opacity:.6;
}

/* selected */
.tor-block-selected {
  background:linear-gradient(180deg,#FFE57A 0%,#FFA000 100%) !important;
  box-shadow:0 0 16px rgba(255,160,0,.85),
             inset 0 1px 0 rgba(255,255,255,.35) !important;
  transform:scaleY(1.12) !important;
  cursor:pointer;
}

/* empty slot */
.tor-block-empty {
  background:transparent;
  border:1px dashed rgba(255,255,255,.12);
}

/* ---- ANIMATIONS ---- */
@keyframes tor-wobble {
  0%   { transform:rotate(0deg); }
  10%  { transform:rotate(2.5deg); }
  25%  { transform:rotate(-3.2deg); }
  40%  { transform:rotate(3.8deg); }
  55%  { transform:rotate(-2.8deg); }
  70%  { transform:rotate(2.2deg); }
  83%  { transform:rotate(-1.4deg); }
  93%  { transform:rotate(0.9deg); }
  100% { transform:rotate(0deg); }
}
.tor-wobbling {
  animation:tor-wobble 1.85s ease-in-out forwards;
  transform-origin:center bottom;
}

@keyframes tor-fall {
  0%   { transform:rotate(0deg); opacity:1; }
  20%  { transform:rotate(5deg); }
  55%  { transform:rotate(-14deg) translateX(-18px); }
  100% { transform:rotate(42deg) translateX(160px) translateY(50px); opacity:0; }
}
.tor-falling {
  animation:tor-fall 0.9s ease-in forwards;
  transform-origin:center bottom;
}

/* ---- ACTION BAR ---- */
.tor-action-bar {
  max-width:310px; margin:0 auto; text-align:center;
}
.tor-action-msg {
  min-height:52px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
  font-size:.9em; margin-bottom:8px; line-height:1.5;
}
.tor-msg-hint { color:var(--tor-muted); }
.tor-msg-sel  { color:var(--tor-text); font-weight:700; }
.tor-msg-safe { color:#81C784; font-weight:700; }
.tor-msg-wait { color:#FFD54F; font-weight:800; letter-spacing:.5px; font-size:1.05em; }

/* risk label colours */
.tor-risk-label   { font-weight:800; font-size:.85em; }
.tor-risk-low     { color:#81C784; }
.tor-risk-med     { color:#FFD54F; }
.tor-risk-high    { color:#FF8A65; }
.tor-risk-extreme { color:#F44336; }
.tor-risk-doom    { color:#FF1744; animation:tor-doom-pulse .45s ease-in-out infinite alternate; }

@keyframes tor-doom-pulse { from{opacity:1} to{opacity:.35} }

/* ---- FALL SCREEN ---- */
.tor-fall-box {
  background:var(--tor-card); border-radius:var(--tor-radius);
  padding:48px 28px; max-width:400px;
  margin:0 auto; text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
@keyframes tor-icon-pop {
  0%   { transform:scale(.3) rotate(-15deg); opacity:0; }
  60%  { transform:scale(1.2) rotate(5deg); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
.tor-fall-icon {
  font-size:5em; display:block; margin-bottom:12px;
  animation:tor-icon-pop .5s cubic-bezier(.17,.67,.35,1.3) forwards;
}
.tor-fall-loser   { color:#FF5252; font-size:1.4em; font-weight:900; margin-bottom:10px; line-height:1.2; }
.tor-fall-sub     { color:#FFD700; font-size:1.1em; font-weight:700; margin-bottom:8px; }
.tor-fall-removed { color:var(--tor-muted); font-size:.86em; margin-bottom:4px; }

@media(max-width:360px){
  .tor-block { width:76px; height:20px; }
  .tor-action-bar { max-width:260px; }
}