/* 푸른 바다 섬 탐험대: all layout and art rules are limited to Bridges. */
#logic-puzzle[data-game="bridges"] {
  --lp-ink: #173f4d;
  --lp-muted: #315c66;
  --lp-line: #b9ddd4;
  --lp-purple: #137d89;
  color: var(--lp-ink);
  background: #73dbe6 url("../bridges-ocean/background.71862bd14a45.webp") center center / cover fixed;
  min-height: calc(100dvh - var(--classroom-play-height, 72px));
  padding: 12px 16px 20px;
}
#logic-puzzle[data-game="bridges"] .lp-wrap { max-width: 1400px; }
#logic-puzzle[data-game="bridges"] .lp-layout,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-layout {
  position: relative;
  display: block;
  width: 100%;
}
#logic-puzzle[data-game="bridges"] .lp-layout::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: clamp(125px, 14vw, 200px);
  height: clamp(170px, 19vw, 255px);
  left: 1%;
  bottom: 0;
  background: url("../bridges-ocean/mascot.4f9904345db4.webp") center bottom / contain no-repeat;
}
/* Gentle ambient character motion is separate from a player's bridge action. */
@keyframes bridges-otter-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(-1deg); }
}
#logic-puzzle[data-game="bridges"] .lp-layout::before,
#logic-puzzle[data-game="bridges"] .lp-board-head::before {
  transform-origin: center bottom;
  animation: bridges-otter-bob 5s ease-in-out infinite;
}
#logic-puzzle[data-game="bridges"] .lp-play-panel,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-play-panel {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#logic-puzzle[data-game="bridges"] .lp-board-head,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-board-head {
  justify-content: center;
  text-align: center;
  margin: 0 0 6px;
}
#logic-puzzle[data-game="bridges"] .lp-board-head h2 {
  display: inline-block;
  font-size: clamp(17px, 1.6vw, 22px);
  margin: 0;
  color: #244e51;
  background: #fff7dc;
  border: 2px solid #ead7ad;
  border-radius: 14px;
  padding: 5px 16px;
  box-shadow: 0 3px 0 #a5845180;
}
#logic-puzzle[data-game="bridges"] #lp-board-size { display: none; }
#logic-puzzle[data-game="bridges"] .lp-gesture-note,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-gesture-note {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 6px 15px;
  border-radius: 16px;
  background: #fffdf3ed;
  color: #22505a;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 3px 0 #387b8180;
}
#logic-puzzle[data-game="bridges"] .lp-board-layout,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-board-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#logic-puzzle[data-game="bridges"] .lp-board-viewport,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-board-viewport {
  width: min(100%, var(--bridges-board-viewport-width, 640px));
  max-width: 100%;
  /* The common fit cap includes the frame padding and caused a scroll bar on
     a fully visible 5×5 board. The page may scroll vertically when needed. */
  max-height: none;
  padding: 8px;
  overflow: auto;
  border: 6px solid #fff5d9;
  border-radius: 25px;
  background: #65d9df;
  box-shadow: 0 5px 0 #a6835599, 0 10px 24px #125f6a55;
}
#logic-puzzle[data-game="bridges"] .np-board.np-bridges {
  background: linear-gradient(#dcfff86b, #dcfff86b), url("../bridges-ocean/water.1f3e518e7dcc.webp") center / cover no-repeat, #8be6e3;
  border: 2px solid #51c2c8;
  border-radius: 14px;
  overflow: hidden;
}
#logic-puzzle[data-game="bridges"] .np-water { background: transparent; }
#logic-puzzle[data-game="bridges"] .np-board .np-island {
  width: 94%;
  height: 94%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent url("../bridges-ocean/island.8475df69af9e.webp") center / cover no-repeat;
  color: #143c32;
  box-shadow: none;
  font-weight: 900;
  font-size: clamp(17px, calc(var(--cell) * .43), 40px);
  line-height: 1;
  text-shadow: 0 1px 0 #fff7d7;
}
/* The shared .lp-cell:hover rule lowers z-index to 1, equal to the SVG
   overlay. Keep the island above its transparent edge hit lines even when
   hovered; edge midpoints outside the island remain independently clickable. */
#logic-puzzle[data-game="bridges"] .np-board .np-island,
#logic-puzzle[data-game="bridges"] .np-board .np-island:hover { z-index: 3; }
#logic-puzzle[data-game="bridges"] .np-board .np-island.np-done { filter: saturate(1.18) brightness(1.04); }
#logic-puzzle[data-game="bridges"] .np-board .np-island.lp-anchor { outline: 4px solid #7650c7; outline-offset: -4px; }
#logic-puzzle[data-game="bridges"] .np-board .np-island:focus-visible { outline: 4px solid #153f80; outline-offset: -2px; }
#logic-puzzle[data-game="bridges"] .np-board .np-island.np-bad { outline: 4px solid #b22d24; outline-offset: -3px; }
#logic-puzzle[data-game="bridges"] .np-bridge-overlay line:not(.np-bridge-hit) {
  stroke: #98612f;
  stroke-width: .085;
  stroke-linecap: round;
  filter: drop-shadow(0 .025px .015px #fff6d1) drop-shadow(0 .04px .02px #66432580);
}
/* Small transverse plank marks sit on the same functional lines. The
   existing SVG groups and their wider transparent hit lines handle all input. */
#logic-puzzle[data-game="bridges"] .np-bridge-overlay line.np-bridge-planks {
  stroke: #e9ba78;
  stroke-width: .045;
  stroke-dasharray: .11 .045;
  filter: none;
  pointer-events: none;
}
#logic-puzzle[data-game="bridges"] .np-bridge-overlay .np-bad-edge line:not(.np-bridge-hit) { stroke: #bb2d24; }
/* A hint focuses the SVG group programmatically. Chromium may apply an
   oversized automatic outline to an SVG group even when :focus-visible is
   false; provide an explicit accessible focus cue along the real hit line. */
#logic-puzzle[data-game="bridges"] .np-bridge-overlay g:focus { outline: none; }
#logic-puzzle[data-game="bridges"] .np-bridge-overlay g:focus .np-bridge-hit { stroke: #7650c74a; }
#logic-puzzle[data-game="bridges"] .np-bridge-overlay .np-bridge-cross { fill: #a42d26; font-weight: 900; }
#logic-puzzle[data-game="bridges"] .np-bridge-overlay [data-value="1"] .np-bridge-single,
#logic-puzzle[data-game="bridges"] .np-bridge-overlay [data-value="2"] .np-bridge-double { animation: bridge-draw .28s ease-out; }
@keyframes bridge-draw { from { opacity: .25; stroke-width: .035; } to { opacity: 1; stroke-width: .085; } }
#logic-puzzle[data-game="bridges"] .lp-board-controls,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-board-controls {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  align-self: center;
}
#logic-puzzle[data-game="bridges"] .lp-actions,
html[data-classroom-playing] #logic-puzzle[data-game="bridges"] .lp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  width: 100%;
}
#logic-puzzle[data-game="bridges"] .lp-actions > button,
#logic-puzzle[data-game="bridges"] .lp-actions > details > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 13px;
  border: 2px solid #e4cf9d;
  border-radius: 16px;
  background: #fff9e9;
  box-shadow: 0 3px 0 #a77d4477;
  color: #244f57;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
#logic-puzzle[data-game="bridges"] .lp-actions #lp-hint { background: #ffe28a; border-color: #d5aa44; color: #654510; }
#logic-puzzle[data-game="bridges"] .lp-actions > details { max-width: 100%; }
#logic-puzzle[data-game="bridges"] .lp-actions > details > summary { list-style: none; cursor: pointer; }
#logic-puzzle[data-game="bridges"] .lp-actions > details > summary::-webkit-details-marker { display: none; }
#logic-puzzle[data-game="bridges"] .lp-actions > details > summary::after { content: ' ▾'; margin-left: 3px; }
#logic-puzzle[data-game="bridges"] .lp-actions > details[open] > summary::after { content: ' ▴'; }
#logic-puzzle[data-game="bridges"] .lp-actions > details > summary:focus-visible { outline: 3px solid #153f80; outline-offset: 3px; }
#logic-puzzle[data-game="bridges"] .lp-actions > details[open] { flex-basis: 100%; order: 10; }
#logic-puzzle[data-game="bridges"] .lp-actions > details[open] > summary { width: fit-content; margin: 0 auto; }
#logic-puzzle[data-game="bridges"] .lp-sidebar,
#logic-puzzle[data-game="bridges"] .bridges-more-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: static;
  width: min(100%, 410px);
  max-height: min(56dvh, 460px);
  overflow: auto;
  margin: 8px auto 0;
  padding: 14px;
  border: 2px solid #e3d3ae;
  border-radius: 16px;
  background: #fffbf0;
  box-shadow: 0 5px 15px #275f5a38;
  color: #254c4f;
  gap: 8px;
}
#logic-puzzle[data-game="bridges"] .lp-sidebar > .lp-step,
#logic-puzzle[data-game="bridges"] .lp-sidebar > h2 { display: none; }
#logic-puzzle[data-game="bridges"] .lp-tiers { width: 100%; }
#logic-puzzle[data-game="bridges"] .lp-tiers button { min-height: 44px; padding: 7px; }
#logic-puzzle[data-game="bridges"] .lp-puzzle-label,
#logic-puzzle[data-game="bridges"] .lp-storage-note,
#logic-puzzle[data-game="bridges"] .lp-timer-toggle { margin: 0; font-size: 14px; }
#logic-puzzle[data-game="bridges"] .lp-note { display: none; }
#logic-puzzle[data-game="bridges"] .lp-stats { padding: 6px 0; margin: 0; border: 0; }
#logic-puzzle[data-game="bridges"] .lp-stats span { font-size: 13px; }
#logic-puzzle[data-game="bridges"] .lp-share-button { width: 100%; }
#logic-puzzle[data-game="bridges"] .bridges-more-content { gap: 8px; }
#logic-puzzle[data-game="bridges"] .bridges-more-content button { min-height: 44px; }
#logic-puzzle[data-game="bridges"] .bridges-more-label { font-size: 14px; font-weight: 800; }
#logic-puzzle[data-game="bridges"] .lp-zoom { display: flex; align-items: center; justify-content: center; }
#logic-puzzle[data-game="bridges"] .lp-selection:empty { display: none; }
#logic-puzzle[data-game="bridges"] .lp-selection,
#logic-puzzle[data-game="bridges"] .lp-feedback {
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 5px 12px;
  border-radius: 12px;
  background: #fffdf0e8;
  color: #1f5158;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
#logic-puzzle[data-game="bridges"] .lp-feedback.lp-error { color: #922c26; background: #fff0e7; }
#logic-puzzle[data-game="bridges"] .lp-pan { flex-wrap: wrap; justify-content: center; }
#logic-puzzle[data-game="bridges"] .lp-win { position: relative; margin: 10px auto; max-width: 500px; background: #fffcf1; }
@media (max-width: 1150px) {
  #logic-puzzle[data-game="bridges"] .lp-layout::before { display: none; }
  #logic-puzzle[data-game="bridges"] .lp-board-head::before {
    content: '';
    flex: 0 0 38px;
    width: 38px;
    height: 42px;
    background: url("../bridges-ocean/mascot.4f9904345db4.webp") center / contain no-repeat;
    pointer-events: none;
  }
}
@media (max-width: 600px) {
  #logic-puzzle[data-game="bridges"] { background-attachment: scroll; padding: 8px 8px 18px; }
  #logic-puzzle[data-game="bridges"] .lp-board-head h2 { font-size: 16px; padding: 4px 12px; }
  #logic-puzzle[data-game="bridges"] .lp-gesture-note { font-size: 14px; padding: 5px 10px; margin-bottom: 6px; }
  #logic-puzzle[data-game="bridges"] .lp-board-viewport { padding: 5px; border-width: 4px; border-radius: 18px; }
  #logic-puzzle[data-game="bridges"] .lp-actions > button,
  #logic-puzzle[data-game="bridges"] .lp-actions > details > summary { font-size: 14px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #logic-puzzle[data-game="bridges"] .np-bridge-overlay line,
  #logic-puzzle[data-game="bridges"] .lp-layout::before,
  #logic-puzzle[data-game="bridges"] .lp-board-head::before { animation: none !important; transition: none !important; }
}