/* Doodle Reef: /draw-a-fish/ */
.reefpage{padding-top:24px}
.reefpage .crumbs{margin-bottom:12px}
.reef__h1{font-size:40px;line-height:46px;font-weight:700}
.reef__lede{color:var(--muted);font-size:18px;line-height:28px;margin:8px 0 20px;max-width:46em}

.reef{position:relative}
.reef__bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.reef__bar button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font:600 15px/1 var(--body);border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer}
.reef__bar .btn-ghost{border-color:var(--line-strong)}
.reef__bar .i{width:18px;height:18px}

.reef__stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 160px);min-height:300px;border-radius:var(--r-card);overflow:hidden;background:#4FB3CF;box-shadow:var(--sh-md);isolation:isolate}
.reef__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reef__hud{position:absolute;left:12px;top:12px;display:flex;gap:8px;pointer-events:none;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font:600 14px/20px var(--body);box-shadow:var(--sh-sm)}
.chip b{font-weight:700}
.pearl{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#F4EAD5 45%,#D8C6A3 100%);box-shadow:inset 0 0 0 1px rgba(36,28,53,.12)}

.reef__empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;pointer-events:none}
.reef__empty[hidden]{display:none}
.reef__empty>div{pointer-events:auto;max-width:360px;text-align:center;background:rgba(255,255,255,.92);border-radius:var(--r-card);padding:22px 22px 20px;box-shadow:var(--sh-lg)}
.reef__empty-h{font:700 20px/26px var(--display);color:var(--ink)}
.reef__empty p:not(.reef__empty-h){color:var(--muted);font-size:15px;line-height:22px;margin:6px 0 16px}
.reef__empty button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);border:0;font:600 16px/1 var(--body);cursor:pointer}
.reef__empty .i{width:18px;height:18px}
.reef__status{min-height:24px;margin:10px 2px 0;font:500 15px/22px var(--body);color:var(--ink-2)}

.reef__exit,.reef__timer,.reef__done{display:none}
.reef__exit{position:absolute;right:14px;top:14px;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.88);color:var(--ink);font:600 14px/1 var(--body);cursor:pointer;transition:opacity .4s}
.reef__exit .i{width:16px;height:16px}
.reef__timer{position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.3);color:#fff;font:600 16px/20px var(--body);font-variant-numeric:tabular-nums;transition:opacity .4s}
.reef__done{position:absolute;inset:0;place-items:center;padding:20px}
.reef__done>div{background:rgba(255,255,255,.94);border-radius:var(--r-card);padding:20px 22px;text-align:center;max-width:340px;box-shadow:var(--sh-lg)}
.reef__done p{font:600 17px/24px var(--body);margin-bottom:14px}

/* focus mode: real fullscreen where the browser allows it, a fixed cover otherwise (iPhone) */
.reef.is-focus .reef__stage{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
.reef__stage:fullscreen{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0}
.reef.is-focus .reef__hud,.reef.is-focus .reef__empty{display:none}
.reef.is-focus .reef__exit{display:inline-flex}
.reef.is-focus .reef__timer:not([hidden]){display:block}
.reef.is-focus .reef__done:not([hidden]){display:grid}
.reef.is-focus.is-idle .reef__exit,.reef.is-focus.is-idle .reef__timer{opacity:0}
.reef.is-focus.is-idle .reef__stage canvas{cursor:none}
.reef.is-focus .reef__stage canvas{touch-action:none}
html.reef-lock,html.reef-lock body{overflow:hidden}

/* sheets */
.reef-sheet{position:fixed;inset:0;z-index:1100;background:rgba(36,28,53,.48);display:flex;align-items:center;justify-content:center;padding:20px}
.reef-sheet[hidden]{display:none}
.sheet__card{background:#fff;border-radius:var(--r-dialog);width:min(560px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;padding:22px 24px 24px;box-shadow:var(--sh-lg);overscroll-behavior:contain}
.sheet__card--pad{width:min(760px,100%)}
.sheet__card--sm{width:min(420px,100%)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.sheet__head h2{font-size:24px;line-height:30px;font-weight:700}
.sheet__card h3{font:700 16px/22px var(--display);margin:16px 0 8px}
.sheet__x{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}
.sheet__x .i{width:18px;height:18px}
.sheet__sub,.sheet__note{color:var(--muted);font-size:15px;line-height:22px}
.sheet__note{margin:16px 0 12px}
.sheet__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.sheet__gap{flex:1}
.sheet__foot .btn-primary{min-height:48px}
.reef-sheet .btn-sm,.reef-sheet .btn-ghost,.reef-sheet .btn-primary{display:inline-flex;align-items:center;gap:6px}
.reef-sheet .btn-sm .i{width:16px;height:16px}

/* drawing pad */
.pad__hint{color:var(--muted);font-size:15px;line-height:22px;margin-bottom:10px}
.pad__board{position:relative;border-radius:16px;overflow:hidden;background:#E6F4F8;border:1px solid var(--line);aspect-ratio:4/3;max-height:52vh;max-height:52dvh;margin:0 auto}
.pad__board canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pad__nose{position:absolute;right:12px;top:10px;font:600 12px/1 var(--body);color:rgba(36,28,53,.35);letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.pad__board[data-kind="plant"] .pad__nose{display:none}
.pad__tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:12px}
.pad__modes,.pad__sizes{display:flex;gap:6px}
.pad__modes button,.pad__sizes button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 14px/1 var(--body);cursor:pointer}
.pad__modes .i{width:18px;height:18px}
.pad__modes [aria-pressed="true"],.pad__sizes [aria-pressed="true"]{background:var(--violet-50);border-color:var(--violet);color:var(--violet-700)}
.pad__sizes button{padding:0}
.pad__sizes i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}
.pad__palette{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--violet)}

/* shop and tank list */
.shop{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.shop__item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.shop__art{width:120px;height:90px}
.shop__name{font:600 15px/20px var(--body)}
.shop__item button{min-height:40px;width:100%;justify-content:center}
.shop__item button:disabled{opacity:.45;cursor:not-allowed}
.tank__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tank__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:14px}
.tank__row img,.tank__art{width:64px;height:48px;object-fit:contain;background:#E6F4F8;border-radius:10px;flex:none}
.tank__row span{flex:1;font:600 15px/20px var(--body);min-width:0}
.tank__row small{display:block;font:400 13px/18px var(--body);color:var(--muted)}
.tank__none{color:var(--muted);font-size:15px}
.focus__opts{display:grid;gap:8px;margin-top:16px}
.focus__opts button{min-height:48px;justify-content:center}

.reefinfo__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.reefinfo .prose h2{font-size:28px;line-height:34px}

@media (max-width:900px){.reefinfo__grid{grid-template-columns:1fr;gap:8px}}
@media (max-width:700px){
  .reef__h1{font-size:28px;line-height:34px}
  .reef__lede{font-size:16px;line-height:24px;margin-bottom:14px}
  .reef__bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .reef__bar button{flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:6px 4px;font-size:13px;text-align:center}
  .reef__bar .btn-primary{grid-column:auto}
  .reef__stage{aspect-ratio:4/5;max-height:70vh;max-height:70dvh;border-radius:16px}
  .reef__hud{left:8px;top:8px;gap:6px}
  .chip{font-size:13px;padding:4px 10px}
  .reef-sheet{padding:0;align-items:flex-end}
  .sheet__card{border-radius:20px 20px 0 0;max-height:94vh;max-height:94dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .sheet__card--pad .pad__hint{font-size:14px;margin-bottom:8px}
  .pad__board{max-height:42dvh}
  .pad__tools{gap:8px}
  .pad__modes button span{display:none}
  .sw{width:34px;height:34px}
  .sheet__foot .sheet__gap{display:none}
  .sheet__foot .btn-primary{flex:1 1 100%;order:5;justify-content:center}
  .reefinfo .prose h2{font-size:24px;line-height:30px}
}
@media (orientation:landscape) and (max-height:500px){
  .reef__stage{aspect-ratio:16/9;max-height:80vh}
  .pad__board{max-height:46vh}
}
@media (prefers-reduced-motion:reduce){.reef__exit,.reef__timer{transition:none}}