/* A cartoon water garden. The host still owns time, pause, and persistence. */
body[data-game="tendrops"] #stage-wrap { max-width: 800px; background: #ddf3fc; }
.ten-drops {
  --drops-ink: #243f60;
  --drops-water: #8de0f1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 15px;
  padding: 18px;
  color: var(--drops-ink);
  background: #eaf6ff;
  background-image: radial-gradient(circle at 13px 13px, #b7dfe733 2px, transparent 3px);
  background-size: 26px 26px;
  border: 3px solid var(--drops-ink);
  border-radius: 24px;
  box-shadow: inset 0 3px 0 #ffffffcf, 0 5px 0 #243f6021;
  -webkit-user-select: none;
  user-select: none;
}
.ten-drops-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.ten-drops-heading-sticker { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; background: #fff8dd; border: 2px solid var(--drops-ink); border-radius: 14px; transform: rotate(-7deg); box-shadow: 0 3px 0 #243f601a; }
.ten-drops-heading-sticker > svg { width: 34px; height: 38px; }
.ten-drops-heading-copy { flex: 1; min-width: 0; }
.ten-drops-eyebrow { display: block; margin-bottom: 3px; color: #3b6684; font: 700 9px "Space Grotesk", sans-serif; letter-spacing: 1.4px; }
.ten-drops-title { font-size: clamp(14px, 2vw, 19px); font-weight: 800; letter-spacing: -.4px; }
.ten-drops-level { flex: 0 0 auto; border: 2px solid var(--drops-ink); border-radius: 12px; padding: 9px 10px; color: var(--drops-ink); background: #95dbc0; box-shadow: 0 3px 0 #243f6021; font: 800 11px "Space Grotesk", sans-serif; white-space: nowrap; transform: rotate(2deg); }
.ten-drops-level::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--drops-ink); border-radius: 5px 5px 7px 7px; background: #fffdf4; vertical-align: -1px; }
.ten-drops-surface { min-width: 0; position: relative; aspect-ratio: 1; border: 3px solid var(--drops-ink); border-radius: 21px; overflow: hidden; background: #ddf3fc; box-shadow: inset 0 4px 0 #ffffffb0, 0 4px 0 #243f6021; }
.ten-drops-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); width: 100%; height: 100%; padding: 3px; gap: 2px; }
.ten-drops-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  position: relative;
  border: 1px solid #8abbd380;
  border-radius: 12px;
  background: #c8ebf6;
  box-shadow: inset 0 2px 0 #ffffff83;
  touch-action: manipulation;
  outline-offset: -4px;
}
.ten-drops-cell:nth-child(12n + 1), .ten-drops-cell:nth-child(12n + 3), .ten-drops-cell:nth-child(12n + 5), .ten-drops-cell:nth-child(12n + 8), .ten-drops-cell:nth-child(12n + 10), .ten-drops-cell:nth-child(12n + 12) { background: #d5f2f8; }
.ten-drops-cell::after { content: ""; position: absolute; width: 15px; height: 5px; border: 1.5px solid #83bed354; border-radius: 50%; }
.ten-drops-cell.ten-drops-selected { background: #fff3cc; border-color: #ba945766; }
.ten-drops-cell:focus-visible { outline: 3px solid var(--drops-ink); outline-offset: -3px; z-index: 1; }
.ten-drops-cell:hover:not(.ten-drops-empty) { background: #f8fcff; }
.ten-drops-cell:active:not(.ten-drops-empty) .ten-drops-bubble { transform: translateY(1px) scale(.96); }
.ten-drops-bubble {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 55%;
  aspect-ratio: 100 / 112;
  color: var(--drops-ink);
  transition: transform 90ms ease;
}
.ten-drops-character { display: block; width: 100%; height: 100%; overflow: visible; }
.ten-drops-shadow { fill: #243f6029; }
.ten-drops-water-body { fill: var(--drops-water); stroke: var(--drops-ink); stroke-width: 4; stroke-linejoin: round; }
.ten-drops-water-glow { fill: #b9f6f7; opacity: .63; }
.ten-drops-water-shine { fill: none; stroke: #ffffff; stroke-width: 8; }
.ten-drops-water-spark { fill: #ffffff; opacity: .9; }
.ten-drops-cheek { fill: #ffb58d; opacity: .9; }
.ten-drops-eye { fill: var(--drops-ink); }
.ten-drops-happy-eyes { display: none; stroke: var(--drops-ink); stroke-width: 3.5; }
.ten-drops-smile { stroke: var(--drops-ink); stroke-width: 3; }
.ten-drops-big-smile { display: none; fill: var(--drops-ink); stroke: var(--drops-ink); stroke-width: 2; }
.ten-drops-bubble[data-fill="0"] { visibility: hidden; }
.ten-drops-bubble[data-fill="2"] { width: 65%; --drops-water: #7dd7ef; }
.ten-drops-bubble[data-fill="3"] { width: 75%; --drops-water: #64c9ea; }
.ten-drops-bubble[data-fill="4"] { width: 84%; --drops-water: #58b9e4; }
.ten-drops-bubble[data-fill="3"] .ten-drops-smile, .ten-drops-bubble[data-fill="4"] .ten-drops-smile { display: none; }
.ten-drops-bubble[data-fill="3"] .ten-drops-big-smile, .ten-drops-bubble[data-fill="4"] .ten-drops-big-smile { display: block; }
.ten-drops-bubble[data-fill="4"] .ten-drops-eye { display: none; }
.ten-drops-bubble[data-fill="4"] .ten-drops-happy-eyes { display: block; }
.ten-drops-fill { position: absolute; bottom: 11%; left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 1.15em; height: 1.08em; padding: 0 2px; border-radius: 5px; background: #f8feffc9; color: var(--drops-ink); font: 800 clamp(13px, 1.8vw, 20px) "Space Grotesk", sans-serif; line-height: 1; }
.ten-drops-bubble[data-fill="1"] .ten-drops-fill { font-size: clamp(12px, 1.4vw, 16px); }
.ten-drops-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.ten-drops-splash-ring { fill: none; stroke: #fffefd; stroke-width: 5; }
.ten-drops-splash-star { fill: #95dbc0; stroke: var(--drops-ink); stroke-width: 2; stroke-linejoin: round; }
.ten-drops-particle-trail { fill: none; stroke: #3b9bc7; stroke-width: 3; opacity: .8; }
.ten-drops-particle-drop { fill: #8de0f1; stroke: var(--drops-ink); stroke-width: 2.5; stroke-linejoin: round; }
.ten-drops-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.ten-drops-reserve { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 16px 14px 13px; border: 2px solid var(--drops-ink); border-radius: 17px; background: #fff8dd; box-shadow: 0 4px 0 #243f601a; }
.ten-drops-reserve-mascot { width: 40px; height: 45px; flex: 0 0 auto; }
.ten-drops-reserve-copy { display: flex; flex-direction: column; }
.ten-drops-count { font: 800 35px "Space Grotesk", sans-serif; line-height: 1; letter-spacing: -1px; color: var(--drops-ink); }
.ten-drops-reserve-label { margin-top: 5px; font-size: 11px; font-weight: 700; color: #49627c; white-space: nowrap; }
.ten-drops-gauge { grid-column: 1 / -1; display: block; overflow: hidden; height: 14px; border: 2px solid var(--drops-ink); border-radius: 9px; background: #fffdf7; }
.ten-drops-gauge-water { display: block; height: 100%; background: #7dd7ef; border-right: 2px solid #243f6060; box-shadow: inset 0 3px 0 #b9f6f7; }
.ten-drops-low .ten-drops-count { color: #994d33; }
.ten-drops-low .ten-drops-gauge-water { background: #ffb58d; box-shadow: inset 0 3px 0 #ffdcbe; }
.ten-drops-guide { border: 2px solid var(--drops-ink); border-radius: 17px; padding: 14px 11px; background: #f8fffa; box-shadow: 0 4px 0 #243f601a; }
.ten-drops-guide > strong { display: block; font-size: 12px; font-weight: 800; line-height: 1.5; }
.ten-drops-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ten-drops-rules li { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 7px; align-items: start; color: #49627c; font-size: 11px; line-height: 1.5; }
.ten-drops-rule-number { display: grid; place-items: center; min-height: 27px; color: var(--drops-ink); border: 1.5px solid var(--drops-ink); background: #95dbc0; border-radius: 8px; font: 800 11px "Space Grotesk", sans-serif; box-shadow: 0 2px 0 #243f6015; }
.ten-drops-rules li:nth-child(2) .ten-drops-rule-number { background: #ffb58d; }
.ten-drops-rules li:nth-child(3) .ten-drops-rule-number { background: #fff0ac; }
.ten-drops-message { grid-column: 1 / -1; min-height: 27px; padding: 4px 10px; border-radius: 12px; background: #ffffffa6; font-size: 12px; font-weight: 700; line-height: 1.6; color: #315977; text-align: center; }
.ten-drops-hint { grid-column: 1 / -1; margin: -7px 0 0; font-size: 10px; color: #49627c; text-align: center; line-height: 1.6; }
@media (max-width: 680px) {
  .ten-drops { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ten-drops-sidebar { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; }
  .ten-drops-reserve { grid-template-columns: 33px minmax(0, 1fr); padding: 12px 9px; gap: 9px 6px; }
  .ten-drops-reserve-mascot { width: 33px; height: 38px; }
  .ten-drops-count { font-size: 29px; }
  .ten-drops-reserve-label { font-size: 10px; }
  .ten-drops-guide { padding: 11px; }
  .ten-drops-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
  .ten-drops-rules li { font-size: 10px; grid-template-columns: 23px minmax(0, 1fr); gap: 5px; }
  .ten-drops-rule-number { min-height: 23px; font-size: 10px; }
  .ten-drops-fill { font-size: 18px; }
  .ten-drops-bubble[data-fill="1"] .ten-drops-fill { font-size: 13px; }
}
@media (max-width: 480px) {
  body[data-game="tendrops"] main { padding-left: 4px; padding-right: 4px; }
  body[data-game="tendrops"] .play-panel { padding: 5px; }
  .ten-drops { padding: 4px; gap: 10px; border-radius: 18px; }
  .ten-drops-heading { padding: 4px 3px 0; gap: 7px; }
  .ten-drops-heading-sticker { flex-basis: 31px; width: 31px; height: 34px; border-radius: 10px; }
  .ten-drops-heading-sticker > svg { width: 25px; height: 29px; }
  .ten-drops-eyebrow { font-size: 8px; letter-spacing: .6px; }
  .ten-drops-title { font-size: 12px; line-height: 1.25; }
  .ten-drops-level { font-size: 9px; padding: 7px; border-radius: 9px; }
  .ten-drops-level::before { display: none; }
  .ten-drops-surface { border-width: 2px; border-radius: 15px; }
  .ten-drops-grid { padding: 1px; gap: 1px; }
  .ten-drops-cell { border-radius: 8px; }
  .ten-drops-sidebar { grid-template-columns: 103px minmax(0, 1fr); gap: 7px; padding: 0 2px; }
  .ten-drops-reserve { grid-template-columns: 29px minmax(0, 1fr); padding: 11px 7px; gap: 9px 4px; border-radius: 12px; }
  .ten-drops-reserve-mascot { width: 29px; height: 33px; }
  .ten-drops-count { font-size: 27px; }
  .ten-drops-reserve-label { font-size: 9px; }
  .ten-drops-guide { padding: 9px; border-radius: 12px; }
  .ten-drops-rules { grid-template-columns: 1fr; gap: 7px; margin-top: 7px; }
  .ten-drops-rules li { grid-template-columns: 24px minmax(0, 1fr); line-height: 1.4; font-size: 10px; }
  .ten-drops-guide > strong { font-size: 11px; }
  .ten-drops-message { min-height: 36px; padding: 5px 6px; line-height: 1.6; font-size: 11px; }
  .ten-drops-hint { padding: 0 4px 3px; font-size: 9px; }
  .ten-drops-fill { font-size: 14px; }
  .ten-drops-bubble[data-fill="1"] .ten-drops-fill { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ten-drops-bubble { transition: none; }
}