/* 배관 연결의 실제 조작을 유지하는 구름 나라 장면. 표지와 다른 게임에는 적용하지 않는다. */
#hexapipes.hp-playing {
  --hp-ink: #312c61;
  --hp-muted: #555578;
  --hp-purple: #6951a8;
  --hp-line: #c5bbdd;
  color: var(--hp-ink);
  background: #c8e8ff url("../hexapipes-cloud/background.0ec1c1807921.webp") center / cover fixed;
}
#hexapipes.hp-playing .hp-wrap { max-width: 1380px; }
#hexapipes.hp-playing #hp-play { position: relative; isolation: isolate; }
#hexapipes.hp-playing .hp-cloud-mascot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(110px, 13vw, 185px);
  height: clamp(145px, 18vw, 235px);
  background: url("../hexapipes-cloud/mascot.b44fb1d19a87.webp") center bottom / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
#hexapipes.hp-playing .hp-header { margin: 4px auto 12px; }
#hexapipes.hp-playing .hp-header h1 { color: #352f72; text-shadow: 0 2px 0 #fff; }
#hexapipes.hp-playing #hp-choose-open,
#hexapipes.hp-playing #hp-header-tools button {
  background: #fff9f0;
  border: 2px solid #d3c8ea;
  color: #40376e;
  box-shadow: 0 3px 0 #917bb66b;
}
#hexapipes.hp-playing .hp-panel {
  position: relative;
  background: #f4f7fff0;
  border: 3px solid #e1d9f4;
  border-radius: 28px;
  box-shadow: 0 8px 0 #8082c070, 0 18px 35px #30558932;
  padding: clamp(12px, 1.5vw, 22px);
}
#hexapipes.hp-playing .hp-board-head {
  background: #fff9ed;
  border: 2px solid #e4d7ee;
  border-radius: 18px;
  padding: 12px 14px;
}
#hexapipes.hp-playing .hp-board-head p { color: #3f356d; line-height: 1.4; }
#hexapipes.hp-playing .hp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c5f1f4;
  border: 2px solid #9ddfe6;
  color: #135e71;
}
#hexapipes.hp-playing #hp-board {
  width: min(100%, 590px);
  max-width: 590px;
  margin: 0 auto;
  filter: drop-shadow(0 7px 0 #8581bb75) drop-shadow(0 12px 14px #376f9d30);
}
#hexapipes.hp-playing #hp-board .hp-cell { overflow: visible; }
#hexapipes.hp-playing #hp-board .hp-tile-base {
  fill: #fff8ed;
  stroke: #b5a4d0;
  stroke-width: 2.5;
}
#hexapipes.hp-playing #hp-board .hp-pipe {
  /* Functional SVG pipes stay state-driven; light and shadow add a soft
     rounded surface without changing the actual six edge connections. */
  fill: url(#hp-cloud-pipe-dry) #667991;
  stroke: url(#hp-cloud-pipe-dry) #667991;
  filter: drop-shadow(0 2px 1px #35466799);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: center;
}
#hexapipes.hp-playing #hp-board .hp-pipe.hp-water {
  fill: url(#hp-cloud-pipe-water) #0585ae;
  stroke: url(#hp-cloud-pipe-water) #0585ae;
  filter: drop-shadow(0 2px 1px #1f648299) drop-shadow(0 0 3px #80efff);
}
#hexapipes.hp-playing #hp-board .hp-cell:hover .hp-tile-base { fill: #f3eafd; }
#hexapipes.hp-playing #hp-board .hp-cell.is-selected .hp-tile-base,
#hexapipes.hp-playing #hp-board .hp-cell:focus-visible .hp-tile-base {
  fill: #eee4ff;
  stroke: #67449a;
  stroke-width: 5;
}
#hexapipes.hp-playing #hp-board .hp-cell.is-locked .hp-tile-base {
  fill: #e2e0f4;
  stroke: #5d4a83;
  stroke-width: 4;
  stroke-dasharray: 5 3;
}
#hexapipes.hp-playing #hp-board .hp-cell.is-hint .hp-tile-base {
  fill: #fff0bd;
  stroke: #986216;
  stroke-width: 5;
}
/* Focus is independent of selection, lock and hint: keep their fills and
   lock indicator, while the last/highest-priority inner outline remains visible. */
#hexapipes.hp-playing #hp-board .hp-cell:focus-visible .hp-tile-base {
  stroke: #1d1655;
  stroke-width: 7;
  stroke-dasharray: none;
}
#hexapipes.hp-playing #hp-board .hp-cell.is-cycle .hp-pipe { fill: #ad4666; stroke: #ad4666; }
#hexapipes.hp-playing #hp-board .hp-source-symbol {
  left: 35%;
  top: 29%;
  font-size: clamp(16px, 2.1vw, 25px);
  text-shadow: 0 2px 4px #fff;
}
#hexapipes.hp-playing #hp-board .hp-lock-symbol {
  left: 40%;
  top: 14%;
  color: #47346e;
  background: #fff9f0;
  border: 1px solid #69508d;
  border-radius: 5px;
  padding: 1px 3px;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 800;
}
#hexapipes.hp-playing .hp-mode-tools,
#hexapipes.hp-playing .hp-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
}
#hexapipes.hp-playing .hp-mode-tools button,
#hexapipes.hp-playing .hp-actions button {
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  white-space: normal;
  line-height: 1.25;
  border: 2px solid #d0c4e0;
  background: #fffbf2;
  color: #3d356e;
  box-shadow: 0 3px 0 #aa97c977;
}
#hexapipes.hp-playing .hp-mode-tools #hp-reverse { grid-column: 1 / -1; }
#hexapipes.hp-playing .hp-mode-tools [aria-pressed='true'] {
  color: #fff;
  background: #7053af;
  border-color: #5c3d99;
  box-shadow: 0 3px 0 #51367f;
}
#hexapipes.hp-playing .hp-actions #hp-hint { background: #fff0b8; border-color: #dfbd6c; color: #654911; }
#hexapipes.hp-playing .hp-feedback {
  background: #e1f5f9;
  border-radius: 14px;
  padding: 10px 12px;
  color: #2b5f70;
  line-height: 1.45;
  min-height: 0;
}
#hexapipes.hp-playing .hp-bottom { color: #45436f; font-weight: 700; line-height: 1.4; }
#hexapipes.hp-playing .hp-bottom button { white-space: normal; }
#hexapipes.hp-playing .hp-storage,
#hexapipes.hp-playing .hp-source { color: #31345d; }
#hexapipes.hp-playing .hp-source { background: #ffffffd9; border-radius: 12px; padding: 0 10px; }
#hexapipes.hp-playing dialog:not(.pg-dialog) { background: #fffaf1; border: 2px solid #d5c4e8; }
#hexapipes.hp-playing .hp-board.is-won .hp-pipe { fill: url(#hp-cloud-pipe-water) #0585ae; stroke: url(#hp-cloud-pipe-water) #0585ae; }

@keyframes hp-cloud-turn-forward { from { transform: rotate(-60deg); } to { transform: rotate(0); } }
@keyframes hp-cloud-turn-back { from { transform: rotate(60deg); } to { transform: rotate(0); } }
@keyframes hp-cloud-water-arrive { 50% { filter: brightness(1.2) drop-shadow(0 0 8px #89ecff); } }
#hexapipes.hp-playing #hp-board .hp-turn-forward { animation: hp-cloud-turn-forward .24s ease-out; }
#hexapipes.hp-playing #hp-board .hp-turn-back { animation: hp-cloud-turn-back .24s ease-out; }
#hexapipes.hp-playing #hp-board .hp-water-arrival .hp-water { animation: hp-cloud-water-arrive .45s ease-out; }
#hexapipes.hp-playing #hp-board .hp-water-arrival .hp-turn-forward.hp-water { animation: hp-cloud-turn-forward .24s ease-out, hp-cloud-water-arrive .45s ease-out; }
#hexapipes.hp-playing #hp-board .hp-water-arrival .hp-turn-back.hp-water { animation: hp-cloud-turn-back .24s ease-out, hp-cloud-water-arrive .45s ease-out; }

@media (orientation: landscape) and (min-width: 1000px) {
  html[data-classroom-playing] #hexapipes.hp-playing .hp-panel,
  #hexapipes.hp-playing .hp-panel {
    display: grid;
    grid-template-columns: minmax(0, 590px) minmax(250px, 300px);
    grid-template-rows: repeat(5, auto);
    gap: 12px clamp(12px, 2vw, 30px);
    justify-content: center;
    align-items: start;
  }
  html[data-classroom-playing] #hexapipes.hp-playing #hp-board,
  #hexapipes.hp-playing #hp-board { grid-column: 1; grid-row: 1 / 7; align-self: center; }
  html[data-classroom-playing] #hexapipes.hp-playing .hp-panel > :not(#hp-board),
  #hexapipes.hp-playing .hp-panel > :not(#hp-board) { grid-column: 2; margin: 0; }
  #hexapipes.hp-playing .hp-board-head { flex-wrap: wrap; justify-content: center; text-align: center; }
  #hexapipes.hp-playing .hp-bottom { justify-content: center; }
}
/* Give the character its own column on a wide screen: it must never cover
   the board, labels, controls or focused cells. */
@media (min-width: 1200px) and (orientation: landscape) {
  #hexapipes.hp-playing #hp-play { padding-left: clamp(115px, 11vw, 165px); }
  #hexapipes.hp-playing .hp-cloud-mascot {
    z-index: 0;
    left: 0;
    bottom: 4px;
    width: clamp(105px, 10vw, 150px);
    height: clamp(140px, 15vw, 215px);
  }
}
/* On tablet and mobile the same character is a small, non-interactive part
   of the instruction card rather than a floating overlay on the puzzle. */
@media (max-width: 1199px), (orientation: portrait) {
  #hexapipes.hp-playing .hp-cloud-mascot { display: none; }
  #hexapipes.hp-playing .hp-board-head { align-items: center; }
  #hexapipes.hp-playing .hp-board-head::before {
    content: '';
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 58px;
    background: url("../hexapipes-cloud/mascot.b44fb1d19a87.webp") center / contain no-repeat;
    pointer-events: none;
  }
}
@media (max-width: 999px), (orientation: portrait) {
  #hexapipes.hp-playing .hp-panel { max-width: 760px; margin: auto; }
  #hexapipes.hp-playing #hp-board { margin: 10px auto 14px; }
  #hexapipes.hp-playing .hp-mode-tools,
  #hexapipes.hp-playing .hp-actions { max-width: 590px; margin: 8px auto; }
}
@media (max-width: 600px) {
  #hexapipes.hp-playing { background-attachment: scroll; }
  #hexapipes.hp-playing .hp-panel { padding: 10px; border-radius: 20px; }
  #hexapipes.hp-playing .hp-board-head { margin: 0 0 8px; padding: 8px 10px; gap: 6px; }
  #hexapipes.hp-playing .hp-board-head p { font-size: 14px; }
  #hexapipes.hp-playing .hp-badge { font-size: 12px; padding: 5px 8px; }
  #hexapipes.hp-playing #hp-board { margin: 4px auto 10px; }
  #hexapipes.hp-playing .hp-mode-tools,
  #hexapipes.hp-playing .hp-actions { gap: 6px; margin: 6px auto; }
  #hexapipes.hp-playing .hp-mode-tools button,
  #hexapipes.hp-playing .hp-actions button { min-height: 44px; padding: 7px 5px; font-size: 14px; }
  #hexapipes.hp-playing .hp-feedback { margin: 8px auto; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #hexapipes.hp-playing #hp-board .hp-pipe,
  #hexapipes.hp-playing #hp-board .hp-water-arrival .hp-water { animation: none !important; transition: none !important; }
}


/* Student play: board-first arrangement, scoped to this game only. */
#hexapipes.hp-playing #hp-play { padding-left: 0; }
#hexapipes.hp-playing .hp-cloud-mascot { display: none; }
#hexapipes.hp-playing .hp-panel,
html[data-classroom-playing] #hexapipes.hp-playing .hp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 940px);
  margin: 0 auto;
  padding: clamp(12px, 1.5vw, 20px);
}
#hexapipes.hp-playing .hp-panel > :not(#hp-board),
html[data-classroom-playing] #hexapipes.hp-playing .hp-panel > :not(#hp-board) {
  grid-column: auto;
  margin: 0;
}
#hexapipes.hp-playing .hp-board-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 700px);
  gap: 8px 14px;
  padding: 8px 14px;
  text-align: center;
  background: transparent;
  border: 0;
}
#hexapipes.hp-playing #hp-board,
html[data-classroom-playing] #hexapipes.hp-playing #hp-board {
  align-self: center;
  margin: 0 auto;
}
#hexapipes.hp-playing .hp-play-controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
#hexapipes.hp-playing .hp-main-actions,
#hexapipes.hp-playing .hp-mode-tools,
#hexapipes.hp-playing .hp-more-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0;
}
#hexapipes.hp-playing .hp-main-actions button,
#hexapipes.hp-playing .hp-mode-tools button,
#hexapipes.hp-playing .hp-more-actions button,
#hexapipes.hp-playing .hp-more > summary {
  min-height: 44px;
  padding: 8px 13px;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  border: 1px solid #c8bce2;
  border-radius: 13px;
  background: #fffdf7;
  color: #3d356e;
  box-shadow: 0 2px 0 #a897c966;
}
#hexapipes.hp-playing .hp-main-actions #hp-hint { background: #fff1ba; border-color: #dfbd6c; color: #654911; }
#hexapipes.hp-playing .hp-mode-tools #hp-rotate-mode {
  background: #7053af;
  border-color: #5c3d99;
  color: #fff;
}
#hexapipes.hp-playing .hp-more { position: relative; max-width: 100%; }
#hexapipes.hp-playing .hp-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
#hexapipes.hp-playing .hp-more > summary::-webkit-details-marker { display: none; }
#hexapipes.hp-playing .hp-more > summary::after { content: ' ▾'; margin-left: 4px; }
#hexapipes.hp-playing .hp-more[open] > summary::after { content: ' ▴'; }
#hexapipes.hp-playing .hp-more > summary:focus-visible { outline: 3px solid #7862a6; outline-offset: 3px; }
#hexapipes.hp-playing .hp-more[open] { flex-basis: 100%; }
#hexapipes.hp-playing .hp-more[open] > summary { width: fit-content; margin: 0 auto; }
#hexapipes.hp-playing .hp-more-actions {
  position: static;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 7px auto 0;
  padding: 10px;
  background: #fffaf3;
  border: 1px solid #d5c6e8;
  border-radius: 16px;
  box-shadow: 0 4px 12px #332a6220;
}
#hexapipes.hp-playing .hp-more-actions button { width: auto; text-align: center; }
#hexapipes.hp-playing .hp-feedback {
  width: min(100%, 590px);
  min-height: 0;
  padding: 7px 12px;
  font-size: 14px;
}
#hexapipes.hp-playing .hp-bottom { justify-content: center; font-size: 13px; }
#hexapipes.hp-playing .hp-storage { margin: 8px 0 0; font-size: 12px; }
#hexapipes.hp-playing .hp-source {
  width: fit-content;
  max-width: min(100%, 440px);
  margin: 4px auto 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
}
#hexapipes.hp-playing .hp-source summary { padding: 4px 8px; color: #39345e; }
#hexapipes.hp-playing .hp-source[open] { padding: 4px 10px; background: #fffdf4ee; border-radius: 10px; }
@media (min-width: 1400px) and (orientation: landscape) {
  #hexapipes.hp-playing .hp-cloud-mascot {
    display: block;
    left: 0;
    bottom: 4px;
    width: 125px;
    height: 185px;
  }
}
@media (max-width: 600px) {
  #hexapipes.hp-playing .hp-panel { gap: 8px; padding: 10px; }
  #hexapipes.hp-playing .hp-board-head { gap: 6px 10px; padding: 4px; }
  #hexapipes.hp-playing .hp-board-head::before { flex-basis: 35px; width: 35px; height: 42px; }
  #hexapipes.hp-playing .hp-play-controls { gap: 6px; }
  /* Flatten the two groups only for layout so the six short controls wrap
     naturally; shared .hp-actions flex:1 otherwise crushes every label. */
  #hexapipes.hp-playing .hp-main-actions,
  #hexapipes.hp-playing .hp-mode-tools { display: contents; }
  #hexapipes.hp-playing .hp-main-actions > button,
  #hexapipes.hp-playing .hp-mode-tools > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #hexapipes.hp-playing .hp-main-actions button,
  #hexapipes.hp-playing .hp-mode-tools button,
  #hexapipes.hp-playing .hp-more-actions button,
  #hexapipes.hp-playing .hp-more > summary { padding: 7px 10px; font-size: 14px; }
  #hexapipes.hp-playing .hp-feedback { padding: 6px 10px; }
}