.connected-islands-page { background: #071c24; color: #e2f4eb; }
.connected-islands-shell { padding-top: 44px; }
.connected-islands-intro { padding: 0 0 30px; }
.connected-islands-intro .eyebrow { color: #b3dcc0; letter-spacing: .2em; }
.connected-islands-intro h1 { font-size: clamp(48px, 10vw, 112px); line-height: .95; letter-spacing: -.065em; margin: 18px 0; color: #f7f1d6; }
.connected-islands-intro h1::after { content: '.'; color: #eac47d; }
.connected-islands-intro p { color: #a2c8c7; font-size: 18px; }
#connected-islands-game { color: #e9f6df; background: #092c35 !important; padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
.connected-islands-stage { display: grid; place-items: center; container-type: size; background: radial-gradient(ellipse at 52% 45%,#146a71 0,#0d4857 45%,#092c35 80%); position: relative; overflow: hidden; }
.connected-islands-stage::before { content: ''; position: absolute; inset: -20%; background: repeating-radial-gradient(ellipse at 50% 50%,transparent 0 35px,#b5f2d009 36px 37px,transparent 38px 65px); pointer-events: none; }
.connected-islands-board { width: min(98cqw, 98cqh, 760px); height: min(98cqw, 98cqh, 760px); position: relative; isolation: isolate; box-sizing: border-box; border-radius: 22%; background: radial-gradient(ellipse at 30% 40%,#3ab49a20,transparent 55%); }
.connected-islands-board::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed #b9e1c61a; pointer-events: none; }
.connected-islands-board::after { content: '✧'; position: absolute; right: 0; top: 0; color: #eed89b77; font-size: clamp(22px,6cqh,42px); pointer-events: none; }
.bridge-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bridge-lines line { stroke-linecap: butt; }
.bridge-shadow { stroke: #002c3c88; stroke-width: 24; transform: translateY(10px); }
.bridge-rope { stroke: #734f33; stroke-width: 18; }
.bridge-deck { stroke: #efd294; stroke-width: 12; }
.bridge-planks { stroke: #aa7c4e; stroke-width: 12; stroke-dasharray: 2 8; }
.bridge-island { position: absolute; width: 13.2%; height: 13.2%; min-width: 24px; min-height: 24px; transform: translate(-50%,-50%); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; isolation: isolate; border-radius: 50%; color: #123c38; -webkit-tap-highlight-color: transparent; }
.bridge-island > img { position: absolute; width: 130%; height: 140%; left: -15%; top: -2%; max-width: none; pointer-events: none; }
.bridge-island::after { content: ''; position: absolute; inset: -5%; border: 2px solid transparent; border-radius: 50%; pointer-events: none; }
.bridge-island[aria-pressed="true"]::after { border-color: #fff2b8; box-shadow: 0 0 0 4px #fff2b822,0 0 24px #f9e9a666; }
.bridge-island:focus-visible { outline: 3px solid #fff5cf; outline-offset: 3px; }
.bridge-island:disabled { opacity: 1; cursor: default; }
.island-number { position: absolute; inset: 22% 19% 15%; display: grid; place-items: center; font: 850 clamp(12px,3cqh,27px)/1 system-ui,sans-serif; background: linear-gradient(135deg,#fff7d9,#f2d69b); border: 1px solid #fff3c7; border-radius: 50%; box-shadow: 0 2px 2px #163d2b66; }
.island-progress { position: absolute; left: 18%; right: 18%; bottom: -13%; text-align: center; font: 700 clamp(8px,1.5cqh,12px)/1.2 system-ui,sans-serif; color: #f5f0cd; text-shadow: 0 1px 2px #003c43; pointer-events: none; }
.bridge-island[data-satisfied="true"] .island-number { color: #f6ffe8; background: linear-gradient(135deg,#31795a,#18594b); border-color: #bce5a0; }
.bridge-island[data-satisfied="true"] .island-progress { color: #ceffb8; }
.bridge-ready { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse,#0b4345ed,#07333dd9); backdrop-filter: blur(2px); border-radius: 20%; text-align: center; pointer-events: none; padding: 12px; }
.bridge-ready > span:first-child { color: #edcf8c; font-size: clamp(36px,12cqh,92px); line-height: 1; }
.bridge-ready strong { font-size: clamp(19px,5.5cqh,44px); letter-spacing: .08em; color: #fff3d1; }
.bridge-ready > span:last-child { color: #b9e1cd; font-size: clamp(11px,2.5cqh,17px); }
.connected-islands-hud strong { color: #ecd49d; }
#connected-islands-game #game-status { text-align: center; margin: 0; min-height: 20px; font-size: 12px; color: #f1dda7; }
#connected-islands-game .connected-islands-save { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; order: 4; font-size: 12px; }
#connected-islands-game .connected-islands-save[hidden] { display: none; }
#connected-islands-game #save-status { display: block !important; margin: 0; font-size: 12px; }
#connected-islands-game #save-form { margin: 0; }
#connected-islands-game #save { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.connected-islands-save a { color: #e8d5a0; }
.connected-islands-rankings { padding: 42px 0 60px; }
.connected-islands-rankings h2 { font-size: clamp(30px,5vw,54px); margin: 10px 0 24px; letter-spacing: -.04em; }
.connected-islands-rankings ol { list-style: none; padding: 0; }
.connected-islands-rankings li { display: flex; align-items: center; gap: 12px; border-top: 1px solid #34545a; padding: 14px 8px; }
.connected-islands-rankings li > span:not(.ranking-avatar):not(.ranking-badge) { overflow-wrap: anywhere; }
.connected-islands-rankings li strong { margin-left: auto; color: #ecd49d; text-align: right; }
@media (hover: hover) { .bridge-island:not(:disabled):hover .island-number { box-shadow: 0 0 0 3px #fff5cc55,0 3px 7px #003c43; } }
@media (max-height: 400px) and (orientation: landscape) {
  #connected-islands-game #game-status { min-height: 12px; line-height: 12px; font-size: 10px; }
  #connected-islands-game #save-status { font-size: 10px; }
  .bridge-ready { gap: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .connected-islands-stage::before { animation: bridge-sea 18s ease-in-out infinite alternate; }
  .bridge-island .island-number { transition: background .2s,box-shadow .2s; }
  [data-complete="true"] .island-number { animation: bridge-glow 1.2s ease-out; }
  #connected-islands-game[data-hidden="true"] * { animation-play-state: paused !important; }
}
@keyframes bridge-sea { to { transform: translate(12px,18px) rotate(4deg); opacity: .55; } }
@keyframes bridge-glow { 50% { box-shadow: 0 0 0 8px #c8fba433,0 0 24px #d4ed9f; } }

#connected-islands-game[data-hidden="true"] .connected-islands-stage::before { animation-play-state: paused; }