/* 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; }