/* 🏝️ Survival Island: borrows the Battle Bots page look (bots.css); only the survival bits here */
/* the Boss 2026-11-03: stats on the far left, the island fills the whole rest of the screen */
.sv-main { max-width: none !important; }
.sv-stage { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: 'side map'; gap: 10px; margin: 0 -8px; align-items: start; }
.sv-wrap { grid-area: map; max-width: none; margin: 0; width: 100%; }
.sv-side { grid-area: side; }
.sv #world { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 720; background: #0d5f9e; touch-action: manipulation; cursor: pointer; }
.sv-caption { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: 86%; padding: 6px 14px; border-radius: 999px;
  background: rgba(10, 6, 30, .78); color: #ffd23f; font-weight: 800; font-size: clamp(.75rem, 1.7vw, 1.05rem); text-align: center;
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.sv-caption.is-on { opacity: 1; }
.sv-pick { gap: 10px; }
.sv-last { border-color: #ffd23f; background: linear-gradient(180deg, #3a2a08, #1c1406); }
.sv-last small { color: #ffe9a8; }
.sv-soon { color: #b9f5c9 !important; }
.sv-rules { position: absolute; inset: 0; overflow: auto; padding: 18px 22px; background: rgba(7, 4, 15, .95); color: #eee6ff; line-height: 1.45; }
.sv-rules[hidden] { display: none; }
.sv-rules h2 { margin: 0 0 8px; color: #ffd23f; }
.sv-rules ol { margin: 0 0 12px; padding-left: 22px; }
.sv-rules li { margin: 4px 0; }
.sv-side { background: #120a28; border: 2px solid #3b1d6e; border-radius: 16px; padding: 8px; color: #eee6ff; max-height: calc((100vw - 260px) * .5625); overflow: auto; box-sizing: border-box; }
.sv-side h2 { margin: 2px 0 8px; font-size: 1rem; color: #ffd23f; }
.sv-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.sv-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 4px 7px; border-radius: 10px; background: #1b1036; font-size: .82rem; cursor: pointer; }
.sv-list li.is-out { opacity: .45; }
.sv-list li.is-watch { outline: 2px solid #ffd23f; }
.sv-dot { width: 12px; height: 12px; border-radius: 50%; }
.sv-who b { display: block; font-size: .88rem; }
.sv-who small { color: #cdbbe8; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-hp { width: 46px; height: 7px; border-radius: 4px; background: #3a2266; overflow: hidden; }
.sv-hp i { display: block; height: 100%; background: #5fd35f; }
.sv-friends { grid-column: 2 / 4; color: #ffb3e9; font-size: .74rem; }
.sv-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .8rem; }
.sv-news li { padding: 5px 7px; border-radius: 8px; background: #1b1036; line-height: 1.3; }
.sv-news li.hot { background: #3a1430; color: #ffe0f2; }
.sv-news time { color: #9d8bd0; margin-right: 4px; font-size: .72rem; }
.sv-bar { max-width: none; }
.sv-clock { font-weight: 800; color: #fff; }
.sv-btns { flex-wrap: wrap; }
/* full screen (the Boss): only the island, edge to edge, with a mini strip of names + hearts + health along the bottom */
.sv-mini, .sv-exitfull { display: none; }
.sv-stage:fullscreen { display: flex; align-items: center; justify-content: center; max-width: none; width: 100vw; height: 100vh; margin: 0; padding: 0; background: #07040f; }
.sv-stage:fullscreen .sv-side { display: none; }
.sv-stage:fullscreen .sv-wrap { width: min(100vw, calc(100vh * 16 / 9)); border-radius: 0; border: 0; }
.sv-stage:fullscreen .sv-caption { bottom: 20px; font-size: clamp(.9rem, 1.6vw, 1.4rem); }
/* the Boss: full screen = a column of little heads down the LEFT, a tiny health bar over each head, hearts below */
.sv-stage:fullscreen .sv-mini { display: flex; flex-direction: column; position: absolute; left: 8px; top: clamp(52px, 6.8vh, 74px);
  gap: 3px; padding: 5px; border-radius: 14px; background: rgba(7, 4, 15, .45); max-height: calc(100% - clamp(52px, 6.8vh, 74px) - 8px); overflow-y: auto; scrollbar-width: none; }
.sv-mchip { --hs: clamp(24px, 4vh, 46px); display: grid; justify-items: center; gap: 1px; width: calc(var(--hs) + 28px); padding: 3px 2px 2px; border-radius: 10px;
  border: 2px solid transparent; background: rgba(27, 16, 54, .78); color: #fff; font: inherit; cursor: pointer; }
.sv-mchip .sv-hp { width: var(--hs); height: 5px; }
.sv-mhead { width: var(--hs); height: var(--hs); border-radius: 50%; object-fit: cover; object-position: top; background: var(--c); box-shadow: 0 0 0 2px var(--c); }
.sv-mchip b { font-size: clamp(.55rem, 1.1vh, .72rem); line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-mlives { font-size: clamp(.45rem, .9vh, .6rem); letter-spacing: -1px; line-height: 1; }
.sv-mchip.is-out { opacity: .35; }
.sv-mchip.is-out .sv-mhead { filter: grayscale(1); }
.sv-mchip.is-sick .sv-mhead { filter: hue-rotate(70deg) saturate(1.5); }
.sv-mchip.is-ko .sv-mhead { animation: sv-dizzy .8s ease-in-out infinite alternate; }
.sv-mchip.is-watch { border-color: #ffd23f; }
@keyframes sv-dizzy { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .sv-mchip.is-ko .sv-mhead { animation: none; } }
.sv-stage:fullscreen .sv-exitfull { display: block; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px;
  border: 0; background: rgba(0, 0, 0, .5); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; opacity: .55; }
.sv-stage:fullscreen .sv-exitfull:hover, .sv-stage:fullscreen .sv-exitfull:focus-visible { opacity: 1; }
@media (max-width: 980px) {
  .sv-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'map' 'side'; margin: 0; }
  .sv-side { max-height: none; }
  .sv-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.sv-awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; font-size: .9rem; }
.sv-awards span { background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px 10px; }
.sv-lives { font-size: .7rem; margin-left: 4px; letter-spacing: -1px; }
.sv-champ { display: grid; gap: 5px; justify-items: center; color: #ffe9a8; font-size: .85rem; font-weight: 700; }
.sv-champ small { color: #cdbbe8; font-weight: 400; }
.sv-champs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 720px; }
.sv-cchip { padding: 3px 9px; border-radius: 999px; border: 1px solid #5b3a9e; background: #1b1036; color: #eee6ff; font: inherit; font-size: .78rem; cursor: pointer; }
.sv-cchip[aria-pressed="true"] { background: linear-gradient(180deg, #ffd23f, #e0a800); color: #2a1a00; border-color: #ffd23f; font-weight: 800; box-shadow: 0 0 12px rgba(255, 210, 63, .6); }
.sv-cchip:hover, .sv-cchip:focus-visible { border-color: #ffd23f; outline: none; }
.sv-yay { display: block; font-size: 1.3rem; color: #ffd23f; text-shadow: 0 0 14px rgba(255, 210, 63, .8); margin-bottom: 4px; }
.sv-cline { display: block; color: #ffe9a8; margin-bottom: 4px; }
.sv-bucks { display: block; font-size: 1.5rem; font-weight: 900; color: #8bff7a; text-shadow: 0 0 16px rgba(139, 255, 122, .7); margin: 2px 0 4px; }
.sv-list li.is-champ { box-shadow: inset 0 0 0 2px #ffd23f; }
/* 🔒❓ MYSTERY SPOTS 8-10 (the Boss, 2026-11-03): 3 victory circles each, a double win checks one off, 3 = unlocked */
.sv-mystrow { display: flex; gap: 6px; justify-content: center; width: 100%; margin-top: 4px; }
.sv-myst { position: relative; display: inline-grid; justify-items: center; gap: 1px; min-width: 64px; padding: 4px 8px 5px; border-radius: 12px;
  border: 2px dashed #6b4fb8; background: rgba(27, 16, 54, .85); color: #cdbcff; font-size: .72rem; line-height: 1.1; }
.sv-myst .sv-mq { font-size: 1.25rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(160, 120, 255, .8)); }
.sv-myst .sv-mlock { position: absolute; right: -5px; bottom: 10px; font-size: .85rem; }
.sv-myst b { font-size: .68rem; font-weight: 800; }
.sv-mdots { display: flex; gap: 3px; }
.sv-mdots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #ffd23f; background: transparent; }
.sv-mdots i.on { background: #ffd23f; box-shadow: 0 0 6px #ffd23f; }
.sv-myst.is-open { border-style: solid; border-color: #ffd23f; color: #ffe98a; box-shadow: 0 0 12px rgba(255, 210, 63, .5); }
.sv-unlock { display: block; color: #ffd23f; }
.sv-stage:fullscreen .sv-mini .sv-myst { --hs: clamp(24px, 4vh, 46px); width: calc(var(--hs) + 28px); min-width: 0; padding: 3px 2px; font-size: .6rem; }
.sv-stage:fullscreen .sv-mini .sv-myst .sv-mq { font-size: calc(var(--hs) * .6); }
.sv-stage:fullscreen .sv-mini .sv-myst .sv-mlock { right: 2px; bottom: 16px; }
/* ⭐ STEP 1: the champion picker is big and glowing, and shakes if you try to start without two (the Boss, 2026-11-04) */
.sv-pick .sv-champ { padding: 8px 12px 10px; border: 2px solid #ffd23f; border-radius: 16px; background: rgba(255, 210, 63, .08);
  box-shadow: 0 0 16px rgba(255, 210, 63, .35); font-size: clamp(.9rem, 1.6vw, 1.05rem); }
.sv-pick .sv-cchip { font-size: clamp(.8rem, 1.4vw, .95rem); padding: 5px 12px; }
.sv-needmsg { display: block; color: #fff; background: #d6336c; border-radius: 999px; padding: 3px 12px; font-size: .9rem; }
.sv-champ.sv-need { animation: sv-shake .45s ease-in-out 2; }
@keyframes sv-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .sv-champ.sv-need { animation: none; } }
.sv-step { background: #ffd23f; color: #2a1a00; border-radius: 6px; padding: 0 6px; margin-right: 4px; }
/* 🐾 PAWS + 🔄 Restart, bottom-left on both island games (the Boss, 2026-11-04: purple, with a paw) */
.sv-ctl { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 6; }
.sv-ctl[hidden] { display: none; }
.sv-ctl button { padding: 6px 14px; border-radius: 999px; border: 2px solid #ffd23f; background: rgba(18, 10, 44, .85); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.sv-ctl button:hover, .sv-ctl button:focus-visible { filter: brightness(1.2); }
.sv-ctl .sv-paws { background: linear-gradient(180deg, #9b5cff, #6a2fd1); border-color: #d9b8ff; letter-spacing: .04em; }
.sv-ctl .sv-paws[aria-pressed="true"] { background: #3ad07a; border-color: #3ad07a; color: #07240f; }
.sv-stage:fullscreen .sv-ctl { left: auto; right: 16px; bottom: 16px; }
.sv-stage:fullscreen .sv-ctl button { font-size: 1rem; padding: 9px 18px; }
@media (max-width: 760px) { .sv-ctl button { font-size: .75rem; padding: 5px 10px; } }