/* Atollingo's pale-water, deep-blue, and warm-sand palette. */
body[data-theme="lagoon"] {
  color-scheme: light;
  --bg: #e6f8fa;
  --surface: #fcfffd;
  --surface-soft: #ddf2ee;
  --text: #164f68;
  --muted: #4d6c78;
  --border: #a7d6d4;
  --p1: #bc5348;
  --p2: #087a80;
  --p1-fill: #e6806a20;
  --p2-fill: #0a8d8520;
  --dot: #fffbef;
  --idle: #b59060;
  --safe: #237a49;
  --scoring: #a95a12;
  --accent: #087f86;
  background: radial-gradient(ellipse at 15% 50%, #effcf6 0, transparent 55%), linear-gradient(#e2f7fd, #e8f9f5);
}
.coral, .shell-detail {display: none; pointer-events: none;}
body[data-theme="lagoon"] .app-shell {max-width: 1080px; padding-top: 0;}
body[data-theme="lagoon"] .topbar {background: #ffffffd9; border: 1px solid #fff; border-top: 0; border-radius: 0 0 25px 25px; padding: 18px 22px; box-shadow: 0 4px 0 #b5e2df22;}
body[data-theme="lagoon"] .brand svg {stroke: #087f86; fill: #0e7890;}
body[data-theme="lagoon"] .brand svg path {fill: #dcf4f1;}
body[data-theme="lagoon"] nav button {color: #08737d; border-radius: 25px;}
body[data-theme="lagoon"] nav .outline {border-color: #abd6d2; background: #fffef7;}
body[data-theme="lagoon"] .intro {position: relative; isolation: isolate; overflow: hidden; padding: 28px 30px; min-height: 175px; border: 2px solid white; border-radius: 26px; box-shadow: 0 6px 0 #98d3d245, 0 13px 25px #1b717c0a; align-items: center; margin-top: 28px; background: #b9edf0;}
body[data-theme="lagoon"] .intro::before {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#f0fcfaf0 0%,#effcfad9 37%,#edfbf330 75%),url('./assets/lagoon-banner.svg') right center / cover no-repeat;}
body[data-theme="lagoon"] .intro > div:first-child {flex-shrink: 0; max-width: 55%;}
body[data-theme="lagoon"] .eyebrow {color: #047780; font-size: 10px; letter-spacing: .15em;}
body[data-theme="lagoon"] h1 {white-space: pre-line; line-height: 1.12; font-size: clamp(27px,3.7vw,38px); letter-spacing: -.045em; color: #15526a;}
body[data-theme="lagoon"] .preferences {align-self: flex-end; max-width: 420px; gap: 6px;}
body[data-theme="lagoon"] .preferences button, body[data-theme="lagoon"] .preferences select {background: #fffffff2; border-color: #b4d6cc; box-shadow: 0 3px 0 #0e6b7410;}
body[data-theme="lagoon"] .player {border: 2px solid white; box-shadow: 0 4px 0 #b6dcda75; border-radius: 22px; background: #ffffffce;}
body[data-theme="lagoon"] .player.active {border-color: var(--player); background: linear-gradient(115deg,var(--fill),#fffefa 80%);}
body[data-theme="lagoon"] .avatar {border-radius: 50%; background: #fffaf1; border-width: 2px;}
body[data-theme="lagoon"] .table {padding: 23px 26px 25px; border: 2px solid #fffcf3; border-radius: 28px; background: #f8e6be url('./assets/beach.svg') center / 100% 100% no-repeat; box-shadow: 0 6px 0 #bddfda, 0 15px 35px #326e7112;}
body[data-theme="lagoon"] .table-heading {color: #19586b; font-weight: 650;}
body[data-theme="lagoon"] .table .small {color: #386c75;}
body[data-theme="lagoon"] .board-wrap {max-width: 490px; margin: 28px auto 16px;}
body[data-theme="lagoon"] .legend {padding: 7px 12px; border-radius: 12px; display: table; background: #fffcf0dd; color: #5e654c; font-size: 11px;}
body[data-theme="lagoon"] #board .edge {stroke: #ae8856; stroke-dasharray: 2 7; stroke-width: 2; opacity: .58;}
body[data-theme="lagoon"] #board .edge.safe {stroke: var(--safe); stroke-width: 3; stroke-dasharray: 8 6; opacity: .9;}
body[data-theme="lagoon"] #board .edge.scoring {stroke: var(--scoring); stroke-width: 4; stroke-dasharray: 2 6; opacity: 1;}
body[data-theme="lagoon"] #board .occupied .edge {opacity: 0;}
body[data-theme="lagoon"] #board .occupied .coral,body[data-theme="lagoon"] #board .edge-group:not(.occupied):not([aria-disabled="true"]):hover .coral {display: inline;}
body[data-theme="lagoon"] #board .edge-group:not(.occupied):not([aria-disabled="true"]):hover .edge {opacity: 0;}
body[data-theme="lagoon"] #board .edge-group:not(.occupied):hover .coral {opacity: .55;}
body[data-theme="lagoon"] .coral path {fill: none; stroke: var(--coral-color); stroke-linecap: round; stroke-linejoin: round;}
body[data-theme="lagoon"] .coral-stem {stroke-width: 6;}
body[data-theme="lagoon"] .coral-twigs {stroke-width: 3.5;}
body[data-theme="lagoon"] .coral .coral-shine {stroke: #fff7e6; stroke-width: 1.1; opacity: .5;}
body[data-theme="lagoon"] #board .dot {fill: #fffbee; stroke: #b69b70; stroke-width: .85; filter: drop-shadow(0 1.5px 1px #ad854350);}
body[data-theme="lagoon"] .shell-detail {display: inline; stroke: #b69b70; stroke-width: .7; fill: none;}
body[data-theme="lagoon"] #board .box {stroke-dasharray: 3 4; stroke-width: .7;}
body[data-theme="lagoon"] #board .box-label {font-size: 15px; letter-spacing: .06em;}
body[data-theme="lagoon"] progress {background: #d7c6a0; height: 6px;}
body[data-theme="lagoon"] progress::-webkit-progress-bar {background: #d7c6a0;}
body[data-theme="lagoon"] #board-progress::-webkit-progress-value {background: #358d82;}
body[data-theme="lagoon"] .table .progress-row {color: #715d3c;}
body[data-theme="lagoon"] .actions button {background: #fffdf5; border: 2px solid #a8cebd; border-radius: 25px; box-shadow: 0 3px 0 #b3d5c6;}
body[data-theme="lagoon"] .actions .primary {background: #087f86; color: white; border-color: #087f86; box-shadow: 0 3px 0 #075a67;}
body[data-theme="lagoon"] .primary {color: white;}
body[data-theme="lagoon"] dialog {border: 2px solid white; background: #f5fcf7; box-shadow: 0 20px 80px #164f6840;}
body[data-theme="lagoon"] dialog::backdrop {background: #18536866;}
body[data-theme="lagoon"] .room-banner {background: #f6fff9; box-shadow: 0 3px 0 #b6dcda75; border-color: #90c8c3; border-radius: 20px;}
body[data-theme="lagoon"] .keyboard-help {color: #506f77;}
body[data-theme="lagoon"] .announcement {color: #086d72;}
@media(max-width:700px){body[data-theme="lagoon"] .app-shell {padding: 0 16px 20px;}body[data-theme="lagoon"] .topbar{padding:16px;}body[data-theme="lagoon"] .intro{padding:24px;gap:20px;align-items:flex-start;}body[data-theme="lagoon"] .intro>div:first-child{max-width:100%;}body[data-theme="lagoon"] .preferences{max-width:100%;align-self:flex-start;}body[data-theme="lagoon"] .intro::before{background-size:auto,auto 100%;}body[data-theme="lagoon"] .table{padding:18px 14px 22px;}body[data-theme="lagoon"] .board-wrap{margin-top:26px;}body[data-theme="lagoon"] .actions button{font-size:12px;}body[data-theme="lagoon"] .player{padding:14px 12px;}}
@media(max-width:380px){body[data-theme="lagoon"] .app-shell{padding:0 12px 16px;}body[data-theme="lagoon"] .intro{padding:22px 18px;}body[data-theme="lagoon"] .topbar{padding:14px 12px;}body[data-theme="lagoon"] h1{font-size:28px;}}