/* Hidden Rank Strategy: an evening sky with glass aircraft tiles. */
.bg-tray[data-game="skycommand"] { --tint: 70, 100, 180; --edge-rgb: 30, 46, 100; position: relative; }
.sk-board { border-radius: 14px; overflow: hidden; }
.sk-sq { position: relative; }
.sk-sq.a { background: linear-gradient(170deg, rgba(196, 220, 255, .55), rgba(150, 186, 240, .45)); }
.sk-sq.b { background: linear-gradient(170deg, rgba(176, 204, 250, .5), rgba(132, 170, 232, .42)); }
.sk-sq.cloudy { background: linear-gradient(170deg, rgba(90, 100, 130, .55), rgba(60, 70, 100, .6)); }
.sk-cloud { width: 80%; fill: rgba(255, 255, 255, .85); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.sk-sq.deploy { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); cursor: pointer; }
.sk-sq.picked .sk-pc { box-shadow: 0 0 0 3px #F5C542, 0 8px 14px rgba(0, 0, 0, .35); transform: translateY(-4%) scale(1.05); }
.sk-sq.lastmv::before { content: ''; position: absolute; inset: 0; background: rgba(245, 197, 66, .3); }
.my-turn .bg-cell.can { cursor: pointer; }
.sk-pc { position: relative; z-index: 1; width: 86%; height: 86%; border-radius: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 30% 22%, var(--hi) 0 8%, var(--base) 55%, var(--lo)); box-shadow: 0 3px 0 var(--edge), 0 5px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .15s; }
.sk-pc::before { content: ''; position: absolute; left: 12%; right: 12%; top: 4%; height: 34%; border-radius: 40% 40% 50% 50%; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.sk-pc b { position: relative; font: 800 clamp(13px, 3.4vw, 24px) var(--display); line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sk-pc small { position: relative; font: 700 clamp(6px, 1.25vw, 10px) var(--body); opacity: .92; margin-top: 1px; letter-spacing: .02em; }
.sk-plane { position: absolute; width: 74%; fill: rgba(255, 255, 255, .16); }
.sk-ico { position: relative; width: 52%; fill: #fff; }
.sk-ico .bolt { fill: #FFD964; } .sk-ico .pole { stroke: #fff; stroke-width: 2; fill: none; }
.sk-pc.hidden b { font-size: clamp(16px, 4vw, 28px); opacity: .9; }
.sk-pc.hidden:not(.moved)::after { content: ''; position: absolute; right: 8%; bottom: 8%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.sk-pc.shown { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -3px; }
.sk-pc.exposed::after { content: '👁'; position: absolute; right: 4%; top: 2%; font-size: clamp(7px, 1.4vw, 11px); }
.sk-pc.storm { --base: #4A5470; --hi: #9AA6C8; --lo: #262C3E; --edge: #1A1F2E; }
.sk-pc.c1.flag { --base: #2D5BD0; } .sk-pc.c2.flag { --base: #E5484D; }
.bg-cell.sel .sk-pc { box-shadow: 0 0 0 3px #F5C542, 0 8px 14px rgba(0, 0, 0, .35); transform: translateY(-4%) scale(1.05); }
.bg-cell.tgt::after { z-index: 3; }
.sk-pc.arrive { animation: pc-pop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.sk-banner { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 5; white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; padding: 6px 14px; border-radius: 999px; font: 800 13px var(--body);
  background: rgba(255, 255, 255, .95); color: #14213A; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); animation: sk-in .4s cubic-bezier(.3, 1.4, .5, 1); }
.sk-banner.good { color: #0E6B45; } .sk-banner.bad { color: #B42228; }
@keyframes sk-in { from { transform: translate(-50%, -8px) scale(.85); opacity: 0; } }