/* Teleports: the tile card, the picking banner, the Clan Teleport sheet and the Relay Station screen (client/teleport.js).
   Cards and rule rows reuse the Protection styles (panels-shield.css). */
.tp-pick { position: fixed; z-index: 30; left: 8px; right: 126px; top: 148px; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 8px; border-radius: 12px; background: rgba(8,26,24,.94); border: 2px solid #6fe9df; color: #c9fbf6; font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.tp-pick span { flex: 1; min-width: 0; white-space: nowrap; }
.tp-pick .tp-cancel { flex: none; min-height: 36px; padding: 0 9px; font-size: 13px; font-weight: 800; background: linear-gradient(#5a2a26, #3a1815); border: 1px solid #e0574c; color: #ffd9d4; border-radius: 10px; }
@media (max-width: 359px) { .tp-pick span { white-space: normal; } }
html.land .tp-pick.under { display: none; }
html.land .tp-pick { top: auto; bottom: 76px; left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); }
.tp-cost { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.tp-cost.ok b { color: #9ff0c4; white-space: nowrap; } .tp-cost span { min-width: 0; } .tp-cost small { color: var(--muted); white-space: nowrap; }
.tp-cost .sh-buy { min-height: 38px; padding: 4px 12px; font-size: 14px; white-space: nowrap; }
.sh-buy s { margin-left: 5px; font-weight: 400; opacity: .6; font-size: 11px; }
.tp-park { display: block; width: 100%; margin: 6px 0 4px; min-height: 44px; border-radius: 12px; font-weight: 800; font-size: 14px; background: linear-gradient(#2c4f7a, #1a3150); border: 1px solid #78bfff; color: #e3f1ff; }
.tp-link { display: block; width: 100%; margin-top: 8px; min-height: 40px; background: none; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; }
.tp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 4px 0 8px; }
.tp-seg button { min-height: 38px; padding: 4px 6px; font-size: 12px; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-seg button.on { border-color: #6fe9df; color: #c9fbf6; background: rgba(111,233,223,.14); font-weight: 700; }
.tp-clan .row b { text-align: right; }
/* Relay Station screen */
.tp-station { --c: #8d9a97; margin: 0 0 10px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(color-mix(in srgb, var(--c) 16%, #16201a), #121812); display: grid; gap: 2px; }
.tp-station.on { --c: #6fe9df; }
.tp-charge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; font-size: 13px; }
.tp-chargetxt { color: var(--muted); } .tp-chargetxt b { color: #fff; }
.tp-pips { display: flex; gap: 5px; }
.tp-pips i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); filter: grayscale(1); opacity: .45; }
.tp-pips i.on { filter: none; opacity: 1; background: rgba(111,233,223,.16); border-color: #6fe9df; box-shadow: 0 0 10px rgba(111,233,223,.45); }
.tp-bar { margin-bottom: 6px; } .tp-bar i { background: linear-gradient(90deg, #2f9c94, #6fe9df); }
.tp-up { margin-top: 8px; min-height: 40px; font-weight: 700; }
/* "Move to clan" on the Clan screen */
.tp-clanbtn { display: block; width: 100%; margin: 10px 0 0; min-height: 44px; border-radius: 12px; font-weight: 800; font-size: 14px; background: linear-gradient(#1f5a55, #123b38); border: 1px solid #6fe9df; color: #dffcf9; }
.tp-clanbtn small { display: block; font-weight: 400; font-size: 11px; opacity: .8; }
/* placement mode: a bar at the bottom (Advanced Teleports, status) and round ✕ / ✓ under the ghost, which follows the map */
.tp-place { position: absolute; z-index: 32; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(440px, calc(100% - 24px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: linear-gradient(#2a2016, #17110b); border: 2px solid #d9aa48; box-shadow: 0 4px 14px rgba(0,0,0,.55); color: #f4edda; }
.tp-place.hidden, .tp-place-btns.hidden { display: none; }
.tp-bar-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(#3a5a7a, #1c2c3c); border: 1px solid #6f9cc8; }
.tp-bar-tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; } .tp-bar-tx b { color: #ffd98a; } .tp-bar-tx > div span { color: #c9d4c8; }
.tp-bar-st { display: block; font-weight: 800; color: #c9c9c9; } .tp-bar-st.ok { color: #7fe39a; } .tp-bar-st.bad { color: #ff8a7d; }
.tp-place .sh-buy { min-height: 36px; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.tp-bar-x { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 8px; background: #3a1815; border: 1px solid #8a3c3c; color: #ffb3aa; font-weight: 900; }
.tp-place-btns { position: absolute; z-index: 31; transform: translateX(-50%); display: flex; gap: 14px; pointer-events: none; }
.tp-place-btns button { pointer-events: auto; width: 50px; height: 50px; min-height: 0; padding: 0; border-radius: 50%; font: 900 24px/1 system-ui; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.tp-no { background: radial-gradient(circle at 50% 35%, #ff6a5a, #c0281c); }
.tp-yes { background: radial-gradient(circle at 50% 35%, #6be37f, #1f9a3a); }
.tp-yes[disabled] { background: radial-gradient(circle at 50% 35%, #c9c9c9, #8a8a8a); opacity: 1; }
html.land .tp-place { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }