/* Abyssly: deep-sea salvage theme. */
:root {
  --bg: #030e1b; --ink: #e0f4f7; --muted: #819fae; --line: #264552;
  --gold: #83e7df; --mint: #83e7df; --cyan: #89f5e5;
}
body.deep-sea { background: #030e1b; }
button:focus-visible, a:focus-visible { outline-color: #a0fff1; }
.ocean-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 47% -25%, #1b576b 0, #092c40 27%, #061827 52%, #030d19 85%); }
.ocean-light { position: absolute; left: 16%; top: -40%; width: 85%; height: 130%; transform: rotate(19deg); transform-origin: 50% 0; background: repeating-conic-gradient(from 170deg at 50% 0%, transparent 0deg 8deg, #6bcecd07 9deg 12deg, transparent 14deg 21deg); filter: blur(9px); animation: ocean-drift 22s ease-in-out infinite alternate; }
.ocean-caustics { position: absolute; top: -20%; left: -10%; width: 120%; height: 52%; border-radius: 50%; background: radial-gradient(ellipse, #6ee5dc10, transparent 63%); filter: blur(28px); }
.marine-snow { position: absolute; inset: -100% 0 0; opacity: .35; background-image: radial-gradient(circle, #c4fff8 0 .6px, transparent 1.3px), radial-gradient(circle, #6fcbc1 0 .5px, transparent 1px), radial-gradient(circle, #94ddd2 0 .6px, transparent 1.2px); background-size: 193px 211px, 127px 173px, 307px 283px; background-position: 23px 41px, 65px 117px, 211px 20px; animation: marine-rise 38s linear infinite; }
.ocean-floor { position: absolute; bottom: -2px; width: 100%; height: 35%; opacity: .85; }
.ocean-floor svg { width: 100%; height: 100%; }
.game-shell { position: relative; max-width: 550px; padding: 20px 22px 104px; }
.masthead { height: 58px; gap: 12px; border-bottom: 1px solid #82cbd619; padding-bottom: 16px; margin-bottom: 26px; }
.brand { font-size: 23px; gap: 10px; letter-spacing: -.035em; color: #e2fcfa; }
.brand > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #73ded78c; border-radius: 50%; box-shadow: 0 0 20px #64edd613, inset 0 0 12px #64edd610; }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; border: 1px solid #73ded75c; border-radius: 50%; inset: 6px; }
.brand-mark::after { inset: 12px; background: #b4fff0; border: 0; box-shadow: 0 0 8px #9cffe2; }
.brand-mark i { position: absolute; width: 1px; height: 50%; bottom: 50%; background: #bcffef; transform: rotate(42deg); transform-origin: bottom; }
.header-actions { gap: 8px; }
.coin-balance { color: #c8d8bf; font-size: 13px; }
.icon-button, .avatar-button { background: #0c2433a6; border-color: #3f6a794f; color: #a6c8d0; width: 32px; height: 32px; }
.avatar-button { font-size: 0; }
.avatar-button::before { content: '♙'; font: 21px/1 Georgia, serif; color: #a6c8d0; }
.test-controls-button { color: #8cc7cb; }
.field-line { margin-bottom: 14px; }
.field-line h1 { color: #98b9c7; font-size: 13px; }
.field-line > span { color: #6997aa; font-size: 11px; letter-spacing: .06em; }
.field-overview { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.shapes.single-shape, .shapes { margin: 0; }
.shape-card, .single-shape .shape-card { background: #082331a6; border: 1px solid #4b818c40; border-radius: 5px; min-height: 56px; padding: 10px 14px; gap: 14px; justify-content: flex-start; box-shadow: inset 0 1px #a4ffef05; }
.shape-card.found { background: #0e353c; border-color: #60c7b780; }
.shape-label, .single-shape .shape-label { color: #709ba9; font-size: 11px; }
.shape-label b, .single-shape .shape-label b { color: #c3e0e5; font-size: 13px; }
.shape-pixel.filled { box-shadow: 0 0 7px #7deed22a; }
.work-panel { margin: 0; padding: 0 2px; }
.work-panel .status-row { color: #96b9c8; font-size: 12px; gap: 6px; line-height: 28px; }
.oxygen-label { display: flex; align-items: center; gap: 7px; }
.oxygen-symbol { border: 1px solid #4f9ba37a; border-radius: 4px; color: #95e7df; font: 13px/23px ui-monospace, monospace; min-width: 27px; text-align: center; }
.status-row strong { color: #c7fff1; font-size: 25px; margin-left: 3px; font-weight: 400; text-shadow: 0 0 16px #82eedc35; }
.work-caption { font-size: 11px; color: #6893a5; }
.work-meter, .field-overview .work-meter { height: 7px; border: 1px solid #315566; border-radius: 2px; background: #03111f; margin-top: 10px; padding: 0; overflow: hidden; box-shadow: inset 0 1px 4px #0008; }
.work-fill { position: relative; height: 100%; background: linear-gradient(90deg, #327989, #6de5d6); box-shadow: 0 0 12px #64ead288; border: 0; border-radius: 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.work-fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 2px), #03111f88 calc(100% / 18 - 2px) calc(100% / 18)); }
.work-panel.oxygen-low .status-row strong { color: #f0bc8b; text-shadow: 0 0 16px #f0ae7430; }
.work-panel.oxygen-low .work-fill { background: linear-gradient(90deg, #a16f54, #f2c18b); box-shadow: 0 0 12px #edb67955; }
.work-meter.exhausted { border-color: #a97a6255; }
.board-frame { position: relative; padding: 12px; border: 1px solid #4672806b; border-radius: 9px; background: linear-gradient(135deg, #143747a6, #071923d9 30%, #091b29ee); box-shadow: 0 25px 90px #0006, inset 0 1px #b4fff312, 0 0 60px #42778c09; }
.board-frame::after { content: ''; position: absolute; inset: 5px; border: 1px solid #5fa3b00e; border-radius: 5px; pointer-events: none; }
.puzzle-grid { position: relative; --board-gap: 4px; grid-template-columns: 39px repeat(6, minmax(0, 1fr)); }
.axis-corner { color: #558d9c; font-size: 23px; }
button.clue, .clue.covered, .clue.zero { color: #97e7d7; border: 1px solid #397f7c47; background-color: #08272a; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #94ffe808 3px 4px); border-radius: 3px; box-shadow: inset 0 0 15px #4ce6ad06; font-size: 15px; }
.clue.column { height: 53px; min-height: 53px; }
.clue.covered { background-color: #092b30; color: #65bfae; }
.clue.covered::before { content: ''; position: absolute; width: 28px; height: 28px; border: 1px solid #69d9b824; border-radius: 50%; background: radial-gradient(circle, transparent 32%, #73dfba1a 34% 37%, transparent 39%); }
.clue-cover { position: relative; z-index: 1; gap: 2px; }
.clue-cover b { color: #89d4c4; font-size: 15px; line-height: 17px; font-weight: 400; }
.clue-cover small { color: #517e7d; font-size: 9px; line-height: 11px; }
.clue:not(.covered) .run-numbers { text-shadow: 0 0 9px #76ffd45c; }
.clue.zero { color: #588e84; }
.clue:hover[aria-disabled="false"] { border-color: #85e9cdb3; background-color: #0f3d3d; }
.cell { border: 1px solid #40799038; border-radius: 4px; box-shadow: inset 0 1px #a8e6f214, inset 0 -2px #0002; transition: border-color .2s, background-color .35s, box-shadow .2s; }
.cell[data-depth="1"] { background: linear-gradient(140deg, #326e80, #224d61); color: #d4f3f4; border-color: #6ea8ad80; }
.cell[data-depth="2"] { background: linear-gradient(140deg, #255168, #193f54); color: #b5dce5; border-color: #4c82966b; }
.cell[data-depth="3"] { background: linear-gradient(140deg, #173b52, #0d2d43); color: #93bfd1; }
.cell[data-depth="4"] { background: linear-gradient(140deg, #061322, #020a15); color: #8ab2c7; border-color: #263f5480; }
.cell[data-depth="0"] { background: #05131f; border-color: #24435066; box-shadow: inset 0 2px 8px #0006; }
.cell::before { opacity: .6; background: radial-gradient(ellipse at 15% 90%, #5c9fa90b, transparent 65%), linear-gradient(145deg, transparent 42%, #b7f7ff04 43% 44%, transparent 45%), radial-gradient(circle at 70% 30%, #afffed20 0 .5px, transparent 1px); background-size: auto, auto, 17px 23px; }
.cell:not([data-depth="0"])::after { content: ''; position: absolute; bottom: 5px; right: 5px; width: 7px; height: 7px; border-right: 1px solid #82c6dc23; border-bottom: 1px solid #82c6dc23; pointer-events: none; }
.cell:not([data-depth="0"]):hover[aria-disabled="false"] { border-color: #8be3e2aa; box-shadow: inset 0 0 18px #74dfe51c, 0 0 12px #2cc8dd12; }
.cell:active[aria-disabled="false"] { box-shadow: inset 0 0 25px #7dffff30; }
.cell:focus-visible::after { inset: 1px; width: auto; height: auto; border: 2px solid #a6fff0; }
.depth-label { color: inherit; opacity: .9; font-weight: 400; }
.depth-label .cost-letter { width: 100%; height: 100%; }
.cost-letter .centered-letter { font-family: ui-monospace, monospace; font-weight: 500; }
.cell.target[data-depth="0"] { background: #0a2b35; border-color: #4faaa4a1; box-shadow: inset 0 0 14px #50e7c919; }
.cell.collected { border-color: #9ff6d5a8; box-shadow: inset 0 0 0 1px #8df4d64d, 0 0 10px #47deb01f; }
.survey-mark { color: #4d7d8a; background: transparent; }
.target .survey-mark { color: #bef4dd; background: #103934; }
.collected .survey-mark { color: #9de7c8; background: #0d3531; }
.small-find { filter: drop-shadow(0 0 7px #73ecbc26); }
.board-share { color: #93dacd; background: #103237; border-color: #42797a; font-size: 11px; }
.board-share:hover { background: #17484a; border-color: #81c8b4; }
.sonar-echo { position: absolute; inset: 0; pointer-events: none; z-index: 8; border: 1px solid #9affdc; background: #8fffd426; animation: sonar-echo .72s ease-out both; }
.cell.sonar-hit { animation: sonar-hit .7s ease-out both; animation-delay: var(--ping-delay, 0ms); }
.dive-fx { position: absolute; pointer-events: none; z-index: 7; transform: translate(-50%, -50%); }
.dive-ripple { position: absolute; width: 14px; height: 14px; left: -7px; top: -7px; border: 1px solid #b5fff4; border-radius: 50%; animation: dive-ripple 1.15s ease-out forwards; }
.dive-bubble { position: absolute; width: var(--size); height: var(--size); border: 1px solid #b6f8f8bb; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #dcfffa77, transparent 60%); animation: dive-bubble 1.45s ease-out forwards; animation-delay: var(--delay); opacity: 0; }
.bottom-nav { max-width: 550px; background: #051624eF; border-top: 1px solid #2e566360; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.bottom-nav button { color: #6d98a9; border-radius: 6px; }
.bottom-nav button.active { background: #123341; color: #9fe9e0; }
.bottom-nav button span { font-size: 11px; }
.bottom-nav button .nav-symbol { font: 22px/1 ui-monospace, monospace; margin: 0 0 5px; }
.notice { background: #12323e; border-color: #7edde0; color: #b7dce0; }
.notice.error { background: #362d2e; border-color: #e1a187; }
.dialog { background: linear-gradient(145deg, #102f3e, #081b2a 70%); border-color: #3d6a77; box-shadow: 0 30px 100px #0009; }
.dialog::backdrop { background: #010b18d4; backdrop-filter: blur(7px); }
.dialog h2 { color: #e0f5f5; }
.dialog p, .guide-list { color: #98b7c4; }
.dialog p.guide-note { border-color: #2f5261; }
.primary-button { background: #8adfd5; border-color: #9eedde; color: #082b31; }
.primary-button:hover { background: #b3f3e9; }
.secondary-button { border-color: #416b7c; color: #b4d2d9; }
.text-button, .quiet-button { color: #8ed9ce; }
.text-button:hover { color: #c9fff2; }
.tutorial-steps > li { border-color: #325365; }
.tutorial-steps b, .tutorial-steps strong { color: #c2e3e5; }
.tutorial-budget, .tutorial-replay-note { color: #7ba4b6 !important; }
.tutorial-art { background-color: #0b2535; border-color: #375c70; }
.tutorial-clue > span, .tutorial-clue > b { background: #113834; color: #a2e2c8; }
.tutorial-clue i { background: #4b9090; border-color: #68b9b1; }
.tutorial-clue i.empty { background: #081d2a; border-color: #315568; }
.result-summary, .share-card, .discovery-replay-panel, .test-cosmetics-panel, .passport { background: #0e2c3b; border-color: #365a6b; }
.result-summary span, .reward-row { color: #98b6c3; }
.result-summary strong, .reward-row.total { color: #a0e7d8; }
.feature-card, .fragment-pool, .collection-piece, .catalog-card, .salvage-item { background: #0c2636; border-color: #315260; }
.feature-name, .fragment-summary b, .page-title, .fragment-heading h2 { color: #c8e6e8; }
.feature-description, .fragment-remaining, .page-description, .collection-piece small, .fragment-section > .guide-note { color: #83a6b7; }
.section-tabs button, .choice-list button { background: #0c2636; border-color: #315969; color: #8eb6c5; }
.section-tabs button.active, .choice-list button.active { background: #23545e; border-color: #61b7b8; color: #c3f9ed; }
.empty-state { color: #7eabba; border-color: #355d6c; }
.share-preview, .draw-odds-row { background: #071c2a; border-color: #284957; color: #b7d5df; }
button.fragment-pool:hover:enabled, button.feature-card:hover:enabled, button.salvage-item:hover:enabled { background: #143a49; border-color: #669fa4; }
select, .form-label { color: #b1cfd8; }
select { background: #0c2636; border-color: #3d6171; }
.test-date { color: #89d9d1; }
.unlimited-note { color: #8dbaba; }
.recovery-overlay { --recovery-gold: #9ef4df; }

@media (min-width: 1024px) {
  .game-shell { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 38px 54px; max-width: 1160px; min-height: 100svh; padding: 29px 36px 44px; }
  .masthead { grid-column: 1 / -1; margin: 0; height: 67px; padding-bottom: 22px; }
  .brand { font-size: 24px; }
  .header-actions { gap: 12px; }
  .icon-button, .avatar-button { width: 34px; height: 34px; }
  .bottom-nav { position: sticky; top: 35px; grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; gap: 10px; padding: 6px 0; border: 0; background: none; }
  .bottom-nav button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 49px; border: 1px solid transparent; }
  .bottom-nav button.active { background: linear-gradient(90deg, #133846d4, #0b263563); border-color: #417f854a; }
  .bottom-nav button:hover { background: #113342; }
  .bottom-nav button span { font-size: 13px; }
  .bottom-nav button .nav-symbol { margin: 0; font-size: 21px; }
  .workspace { grid-column: 2; grid-row: 2; }
  #view-game { display: grid; grid-template-columns: minmax(0, 490px) 225px; gap: 0 29px; justify-content: start; }
  .field-line { grid-column: 1; grid-row: 1; margin: 0 1px 14px; min-height: 18px; }
  .field-line h1 { font-size: 13px; font-weight: 400; }
  .field-line > span { font-size: 10px; }
  .field-overview { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .field-overview .shapes { margin: 0; }
  .field-overview .shape-card { min-height: 69px; padding: 13px; gap: 12px; }
  .field-overview .shape-label { font-size: 10px; }
  .field-overview .shape-label b { font-size: 12px; margin-bottom: 3px; }
  .field-overview .status-row { gap: 8px; }
  .field-overview .status-row strong { font-size: 26px; }
  .field-overview .work-caption { font-size: 10px; }
  .field-board { grid-column: 1; grid-row: 2; width: 100%; max-width: none; }
  .board-frame { padding: 15px; border-radius: 8px; }
  .puzzle-grid { --board-gap: 5px; grid-template-columns: 43px repeat(6, minmax(0, 1fr)); }
  .clue.column { height: 55px; min-height: 55px; }
  .clue-cover b { font-size: 16px; line-height: 18px; }
  .room-inventory { border-color: #335161; }
}
@media (max-width: 420px) {
  .game-shell { padding: 17px 14px 96px; }
  .masthead { gap: 7px; margin-bottom: 23px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-mark::after { inset: 10px; }
  .header-actions { gap: 5px; }
  .coin-balance { font-size: 11px; }
  .icon-button, .avatar-button { width: 28px; height: 28px; }
  .board-frame { padding: 9px; }
  .puzzle-grid { --board-gap: 3px; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); }
  .clue.column { height: 49px; min-height: 49px; }
  .clue-cover small { font-size: 9px; }
  .run-numbers { gap: 1px; }
  button.clue { font-size: 12px; padding: 1px; }
}
@media (max-width: 350px) {
  .game-shell { padding-left: 10px; padding-right: 10px; }
  .header-actions { margin-left: auto; }
  .brand { font-size: 19px; }
  .puzzle-grid { --board-gap: 3px; grid-template-columns: 30px repeat(6, minmax(0, 1fr)); }
  .clue.column { height: 46px; min-height: 46px; }
  .cell::after { display: none; }
  .cell:focus-visible::after { display: block; }
}
@keyframes ocean-drift { to { transform: rotate(24deg) translateX(-3%); opacity: .65; } }
@keyframes marine-rise { to { transform: translateY(-211px); } }
@keyframes sonar-echo { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes sonar-hit { 0% { filter: brightness(1); } 18% { filter: brightness(1.9); border-color: #a8ffe2; } 100% { filter: brightness(1); } }
@keyframes dive-ripple { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(7); opacity: 0; } }
@keyframes dive-bubble { 0% { opacity: 0; transform: translate(0, 8px); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--drift), -100px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dive-fx, .sonar-echo { display: none; }
}

/* Shared service surfaces keep the Abyssly palette. */
.passport p:empty{display:none}
.ad-preview{border-color:#365a6b;background:#0c2636;color:#83a6b7}
.community-dialog h3,.community-dialog h4{color:#b1d5dd}
.community-caption,.community-label,.super-instructions{color:#8eb3c3}
.community-empty,.super-rules>span{border-color:#365a6b;color:#8eb3c3}
.energy-stat-card,.super-entry,.super-score>div{background:#0c2636;border-color:#365a6b}
.super-score,.super-rankings{border-color:#365a6b;background:#365a6b}
.stats-donut>span{background:#0b2333}
.community-label input,.community-label select{background:#081d2c;border-color:#416b7c;color:#b4d2d9}
.super-clue{background:#092b30;border-color:#397f7c;color:#97e7d7}
.super-cell{background:linear-gradient(140deg,#173b52,#0d2d43);border-color:#315469;color:#b5dce5}
.super-cell.opened{background:#05131f;border-color:#244350}
.community-ranking td,.community-ranking th{border-color:#315469;color:#b4d2d9}
.community-ranking tr:first-child td{color:#9fe9e0}
@media(max-width:350px){.brand{font-size:20px;gap:7px}}