/* ポケット漁港ライフ ( POCKET HARBOR LIFE ) ・ 画面のスタイル */
  :root {
    --ink: #1c1b19; --muted: #8b877f; --faint: #e4e0d8; --paper: #fff; --signal: #ffd60a; --buoy: #d2463a; --sea: #2b6d7a;
    --pixel: "DotGothic16", ui-monospace, monospace;
    --text: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
    --stage-top: 58px; --stage-bottom: 44px;
    --tb: max(0px, calc(100% - 100svh)); /* iOS 26: fixed things can reach under the bottom toolbar */
  }
  :root { color-scheme: light; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); }
  body { font: 500 13px/1.5 var(--text); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  button { font: inherit; color: inherit; }
  #stage { position: fixed; left: 0; right: 0; top: var(--stage-top); bottom: calc(var(--stage-bottom) + var(--tb)); display: grid; place-items: center; overflow: hidden; }
  canvas#c { display: block; image-rendering: pixelated; touch-action: none; cursor: pointer; outline: none; clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); }
  body.playing canvas#c { clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%)); transition: clip-path 1.1s cubic-bezier(.3, .1, .2, 1); }
  body:not(.playing) #hud-top, body:not(.playing) #hud-bottom, body:not(.playing) #touch { opacity: 0; pointer-events: none; }
  body.playing #hud-top, body.playing #hud-bottom, body.playing #touch { transition: opacity .6s .5s; }

  /* the title: a float on a thin sea line, ripples spreading, the line drawing out as the harbour is built */
  #title { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--paper); padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); cursor: default; }
  #title.ready { cursor: pointer; }
  #title.out { opacity: 0; pointer-events: none; transition: opacity .55s steps(5); }
  .t-inner { display: grid; justify-items: center; text-align: center; gap: 0; transform: translateY(-4%); }
  .t-logo { margin: 0; font: clamp(28px, 7.4vw, 46px)/1.1 var(--pixel); letter-spacing: .06em; font-weight: normal; }
  .t-sub { margin: 10px 0 0; font: 12px var(--pixel); letter-spacing: .34em; color: var(--muted); padding-left: .34em; }
  .t-sea { position: relative; width: min(300px, 70vw); height: 92px; margin-top: 30px; }
  .t-float { position: absolute; left: 50%; bottom: 13px; margin-left: -15px; image-rendering: pixelated; clip-path: inset(0 0 37.5% 0); animation: tbob 1.6s steps(2) infinite; }
  @keyframes tbob { 50% { transform: translateY(3px); } }
  .t-line { position: absolute; left: 0; right: 0; bottom: 30px; height: 2px; background: var(--faint); }
  .t-line::before, .t-line::after { content: ""; position: absolute; top: 0; width: 6px; height: 2px; background: #fff; animation: tglint 4.6s steps(23) infinite; opacity: .9; }
  .t-line::after { width: 4px; animation-duration: 6.2s; animation-delay: -2.4s; }
  @keyframes tglint { from { left: 4%; } to { left: 92%; } }
  .t-line i { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--p, 0%); transform: translateX(-50%); background: var(--sea); transition: width .4s steps(8); }
  .t-ring { position: absolute; left: 50%; bottom: 23px; width: 120px; height: 16px; margin-left: -60px; border: 2px solid var(--sea); border-radius: 50%; opacity: 0; animation: tring 3.2s steps(10) infinite; }
  .t-ring:nth-child(2) { animation-delay: 1.07s; } .t-ring:nth-child(3) { animation-delay: 2.13s; }
  @keyframes tring { 0% { transform: scale(.18); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
  .t-msg { margin: 6px 0 0; min-height: 1.6em; font: 500 12px var(--text); color: var(--muted); letter-spacing: .08em; }
  #title.ready .t-msg { font: 16px var(--pixel); color: var(--ink); letter-spacing: .12em; animation: tblink 1.6s steps(2) infinite; }
  @keyframes tblink { 50% { opacity: .35; } }
  #title.sink .t-float { animation: tsink .45s steps(4) forwards; }
  @keyframes tsink { to { transform: translateY(30px); clip-path: inset(0 0 100% 0); } }
  .t-actions { display: grid; justify-items: center; gap: 6px; margin-top: 18px; cursor: auto; }
  .t-sub2 { display: flex; gap: 6px; }
  .t-mini { font: 13px/1 var(--pixel); letter-spacing: .04em; color: var(--muted); background: none; border: 0; padding: 12px 10px; min-height: 40px; cursor: pointer; touch-action: manipulation; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
  .t-mini:hover { color: var(--ink); }
  .t-mini:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .t-btn { font: 13px/1 var(--pixel); letter-spacing: .04em; color: var(--ink); background: #fff; border: 1px solid var(--ink); padding: 11px 14px; min-height: 40px; text-decoration: none; cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; white-space: nowrap; }
  .t-btn:link, .t-btn:visited { color: var(--ink); }
  .t-btn:hover { background: var(--ink); color: #fff; }
  .t-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .t-foot { position: absolute; left: 12px; right: 12px; bottom: max(14px, calc(env(safe-area-inset-bottom) + var(--tb))); margin: 0; font: 500 11px/1.7 var(--text); color: var(--muted); text-align: center; }
  .t-foot a { color: inherit; text-underline-offset: 2px; }
  .reveal-ring { position: fixed; z-index: 31; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--sea); border-radius: 50%; pointer-events: none; animation: rvl 1s steps(10) forwards; }
  @keyframes rvl { from { transform: scale(.3); opacity: .8; } to { transform: scale(14); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .t-float, .t-ring, #title.ready .t-msg { animation: none; } .t-ring { opacity: .3; } }

  /* HUD: plain text at the edges, nothing boxed around the picture */
  #hud-top { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 3; pointer-events: none; }
  #where h1 { font: 18px/1.2 var(--pixel); margin: 0; letter-spacing: .04em; display: flex; align-items: baseline; gap: 8px; }
  #where h1 small { font: 11px var(--pixel); color: var(--muted); letter-spacing: .12em; }
  #clock > * { white-space: nowrap; flex-shrink: 0; }
  #clock { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 3px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* the left block gives way (its clock line wraps) before the menu button is ever pushed off the screen */
  #where { min-width: 0; flex: 0 1 auto; }
  #menu-wrap { flex-shrink: 0; }
  #clock b { font-weight: 400; color: var(--ink); }
  #tide-bar { position: relative; width: 34px; height: 6px; border: 1px solid var(--muted); display: inline-block; }
  #tide-bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--tide, 50%); background: var(--sea); opacity: .7; }
  #jiai { display: inline-block; margin-top: 4px; font: 12px var(--pixel); color: #fff; background: var(--buoy); padding: 1px 6px 2px; letter-spacing: .04em; }
  #jiai:not([hidden]) { animation: jiai 1.2s steps(2) infinite; }
  @keyframes jiai { 50% { background: #b83a30; } }
  /* the menu: one button at the top right, the places and settings folded under it */
  #menu-wrap { position: relative; pointer-events: auto; }
  #menu-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 6px 8px 10px; color: var(--ink); cursor: pointer; font: 13px var(--pixel); letter-spacing: .06em; }
  #menu-btn { position: relative; }
  #menu-btn::before { content: ""; position: absolute; inset: -6px -4px; } /* a finger-sized target without moving the header */
  #menu-btn .bars { position: relative; display: grid; gap: 3px; width: 16px; }
  #menu-btn .bars i { display: block; height: 2px; background: var(--ink); transition: transform .18s ease, opacity .18s ease; }
  #menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  #menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  #menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  #menu-btn.ping .bars::after { content: ""; position: absolute; right: -6px; top: -4px; width: 5px; height: 5px; background: var(--buoy); }
  #menu { position: absolute; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; min-width: 168px; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(28, 27, 25, .12); padding: 4px 0; }
  #menu:not([hidden]) { animation: menu-in .18s cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
  #menu .link { text-align: left; padding: 11px 18px; color: var(--ink); font-size: 14px; }
  #menu .link:hover { background: #f4f3ef; }
  .link { background: none; border: 0; padding: 8px 9px; margin: 0; color: var(--muted); cursor: pointer; white-space: nowrap; text-decoration: none; }
  .link:hover, .link:focus-visible { color: var(--ink); }
  button:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
  button:focus:not(:focus-visible) { outline: none; }
  [tabindex="-1"]:focus { outline: none; }
  #btn-post.ping { color: var(--ink); }
  #btn-post.ping::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--buoy); margin-left: 4px; vertical-align: 2px; }
  #hud-bottom { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--tb)); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; z-index: 3; pointer-events: none; }
  #status { color: var(--muted); min-height: 1.5em; text-wrap: balance; } /* a line that runs over splits evenly: no lone word on the second row */
  #credit { color: var(--muted); font-size: 11px; white-space: nowrap; pointer-events: auto; }
  #credit a { color: inherit; text-underline-offset: 2px; }
  #credit a:hover { color: var(--ink); }

  /* big moments: a short line in the pixel face, popping over the harbour */
  #toast { position: fixed; left: 50%; top: calc(var(--stage-top) + 14%); transform: translate(-50%, 6px) scale(.9); font: 28px/1 var(--pixel); color: var(--ink); opacity: 0; pointer-events: none; z-index: 4; white-space: nowrap;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff; transition: opacity .25s, transform .25s; }
  #toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
  /* on a narrow phone a long line folds in two, evenly, instead of running off the screen */
  @media (max-width: 520px) { #toast { white-space: normal; width: max-content; max-width: calc(100vw - 24px); text-align: center; text-wrap: balance; line-height: 1.15; } }
  #toast.hit { color: var(--buoy); font-size: 40px; }
  body.touch #toast.hit { z-index: 7; }
  #toast.bad { color: var(--muted); }
  #toast.news { font-size: 18px; }

  #talk { position: fixed; left: 50%; top: calc(var(--stage-top) + 4px); transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--ink); padding: 10px 14px 12px; z-index: 5; cursor: pointer; }
  #talk b { display: block; font: 12px var(--pixel); color: var(--muted); margin-bottom: 2px; }
  #talk p { margin: 0; line-height: 1.7; }
  /* the label by a mounted fish in the aquarium: a museum caption card, set just above the fish */
  #aq-card { position: fixed; z-index: 5; width: 200px; background: #fff; border: 1px solid var(--ink); padding: 8px 12px 10px; pointer-events: none; }
  #aq-card small { display: block; font: 11px var(--pixel); color: var(--muted); letter-spacing: .08em; }
  #aq-card b { display: block; font: 16px var(--pixel); font-weight: normal; margin: 1px 0 2px; }
  #aq-card span { display: block; font: 12px var(--pixel); color: var(--muted); }
  #aq-card p { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--faint); font-size: 12px; line-height: 1.65; }
  #aq-card[hidden] { display: none !important; }

  /* the fight window: a framed close-up that pops open when a fish is on */
  #fightwin { position: fixed; top: calc(var(--stage-top) + 52px); right: max(16px, env(safe-area-inset-right)); z-index: 6; background: #fff; border: 1px solid var(--ink); padding: 7px 7px 9px; box-sizing: content-box; touch-action: none; cursor: pointer; box-shadow: 4px 4px 0 rgba(28, 27, 25, .12); }
  #fightwin.pop { animation: fwpop .22s steps(3) both; }
  #fightwin.closing { animation: fwclose .3s steps(3) both; }
  @keyframes fwpop { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes fwclose { to { transform: translateY(-10px); opacity: 0; } }
  #fw-canvas { display: block; image-rendering: pixelated; }
  #fw-canvas.mirror { transform: scaleX(-1); }
  body.touch.fighting #jiai, body.touch.fighting #sonar-box, body.touch.fighting #sea-method-btn { visibility: hidden; }
  .fw-top { display: flex; justify-content: space-between; align-items: baseline; font: 15px var(--pixel); margin: -1px 1px 5px; }
  #fw-dist { font: 12px var(--pixel); color: var(--muted); font-variant-numeric: tabular-nums; }
  #fightwin.jolt { animation: jolt .28s steps(4) 1; }
  @keyframes jolt { 0% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -2px; } 75% { translate: -2px 1px; } 100% { translate: 0 0; } }
  .cue { font: 16px var(--pixel); text-align: center; margin: 6px 0 6px; min-height: 1.3em; color: var(--muted); text-wrap: balance; }
  .cue.on { color: var(--ink); }
  .cue.run { color: #d23f33; } .cue.dive { color: #2f6fbf; } .cue.jump { color: #b8860b; }
  .cue.warn { animation: cuewarn .16s steps(2) infinite; }
  .cue.good { color: var(--sea); } .cue.bad { color: var(--muted); }
  @keyframes cuewarn { 50% { opacity: .35; } }
  .fw-bars { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; margin: 0 1px; }
  .fw-bars span { font: 500 11px/1 var(--text); color: var(--muted); white-space: nowrap; }
  .bar { position: relative; height: 10px; border: 1px solid var(--ink); background: #fff; }
  .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: #5aa86a; }
  .bar.mid i { background: #e6c21e; }
  .bar.hot i { background: #d8463a; animation: cuewarn .1s steps(2) infinite; }
  .bar::after { content: ""; position: absolute; left: 82%; top: -1px; bottom: -1px; border-left: 1px dashed var(--ink); opacity: .5; }
  .bar.small { height: 6px; }
  .bar.small::after { display: none; }
  .bar.small i { background: #8b877f; }
  .bar.wear i { background: #b0623c; }
  .bar.spool i { background: #3a7fb0; }
  .bar.spool.low i { background: #d8463a; animation: cuewarn .2s steps(2) infinite; }
  #btn-home { display: none; color: var(--ink); }
  #sonar-box { display: none; position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(var(--stage-bottom) + 34px); z-index: 3; background: #0a182c; border: 1px solid var(--ink); padding: 3px 3px 2px; pointer-events: none; }
  body.at-sea #sonar-box { display: block; }
  /* under the menu when it opens, not over it */
  #sonar-box, #sea-compass { z-index: 2; }
  /* on a computer the sonar is drawn larger */
  body:not(.touch) #sonar { width: 224px; height: 126px; image-rendering: pixelated; display: block; }
  /* the compass and the fuel: which way is home, and how far the tank will still take you */
  #sea-compass { display: none; position: fixed; left: calc(max(16px, env(safe-area-inset-left)) + 142px); bottom: calc(var(--stage-bottom) + 34px); background: #fff; border: 1px solid var(--ink); padding: 4px 4px 3px; pointer-events: none; text-align: center; }
  body.at-sea #sea-compass { display: block; }
  body.touch #sea-compass { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: auto; top: max(206px, calc(env(safe-area-inset-top) + 202px)); }
  body.touch.fighting #sea-compass { visibility: hidden; }
  body:not(.touch) #sea-compass { left: calc(max(16px, env(safe-area-inset-left)) + 238px); }
  #compass { width: 64px; height: 64px; image-rendering: pixelated; display: block; }
  body:not(.touch) #compass { width: 96px; height: 96px; }
  #sea-compass .fuel { height: 4px; background: var(--faint); margin: 3px 0 2px; }
  #sea-compass .fuel i { display: block; height: 100%; background: var(--ink); width: 100%; }
  #sea-compass.low .fuel i { background: #d8483c; }
  #compass-port { display: block; font: 10px var(--pixel); color: var(--muted); white-space: nowrap; }
  #sea-compass.low #compass-port { color: #d8483c; }
  /* at sea: the way of fishing under the clock, and the engine telegraph by the main button */
  #sea-method-btn { display: none; margin-top: 4px; background: none; border: 0; padding: 4px 0; font: 13px var(--pixel); color: var(--ink); cursor: pointer; pointer-events: auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
  #sea-method-btn small { font-size: 11px; color: var(--muted); margin-right: 6px; text-decoration: none; display: inline-block; }
  body.at-sea #sea-method-btn { display: inline-block; }
  /* a keyboard user's focus ring sits a little clear of the words, not tight on them */
  #sea-method-btn:focus-visible, #tp-tool-btn:focus-visible, #tp-bucket-btn:focus-visible { outline-offset: 3px; }
  #sea-method-btn, #tp-tool-btn, #tp-bucket-btn { position: relative; }
  #sea-method-btn::before, #tp-tool-btn::before, #tp-bucket-btn::before { content: ""; position: absolute; inset: -6px -3px; }
  #telegraph { display: none; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px)); z-index: 3; flex-direction: column; border: 1px solid var(--ink); background: #fff; }
  body.at-sea #telegraph { display: flex; }
  body.touch #telegraph { right: max(132px, calc(env(safe-area-inset-right) + 128px)); bottom: max(46px, calc(env(safe-area-inset-bottom) + 34px)); }
  #telegraph button { width: 54px; height: 25px; border: 0; border-top: 1px solid var(--faint); background: #fff; font: 12px var(--pixel); color: var(--muted); cursor: pointer; touch-action: manipulation; }
  #telegraph button:first-child { border-top: 0; }
  #telegraph button.on { background: var(--ink); color: #fff; }
  /* on a phone the speeds are big enough to hit while steering */
  body.touch #telegraph button { width: 60px; height: 34px; font-size: 13px; }
  /* on a computer's big screen the telegraph is read across the room: larger, like the rest of the sea's dials */
  body:not(.touch) #telegraph { right: max(24px, env(safe-area-inset-right)); bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px)); border-width: 2px; }
  body:not(.touch) #telegraph button { width: 92px; height: 40px; font-size: 17px; letter-spacing: .08em; }
  /* a narrow phone at sea: the stick, the speed buttons and the action button cannot all sit full size in one row, so the stick and the button give a little */
  @media (max-width: 349px) {
    body.touch.at-sea #stick { width: 108px; height: 108px; }
    body.touch.at-sea #act { right: max(14px, env(safe-area-inset-right)); width: 84px; height: 84px; }
    body.touch.at-sea #telegraph { right: max(106px, calc(env(safe-area-inset-right) + 92px)); }
    body.touch.at-sea #telegraph button { width: 52px; }
  }
  #sonar { display: block; width: 128px; height: 72px; image-rendering: pixelated; }
  #sonar-depth { display: block; font: 11px var(--pixel); color: #cfe6f2; margin-top: 2px; letter-spacing: .04em; }
  body.touch #sonar-box { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: auto; top: max(100px, calc(env(safe-area-inset-top) + 96px)); }
  #dlg-gyo { width: min(720px, calc(100vw - 24px)); }
  /* the sheet for saving an image: the picture itself, to long-press */
  #dlg-image { width: min(560px, calc(100vw - 24px)); }
  #dlg-image .head form { margin-left: auto; }
  #image-view { display: block; width: auto; max-width: 100%; max-height: 56dvh; margin: 8px auto 4px; border: 1px solid var(--faint); -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; pointer-events: auto; }
  #image-dl:link, #image-dl:visited { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  /* writing the record to a file and reading it back */
  .save-now { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0; font-size: 13px; }
  .save-now dt { color: var(--muted); white-space: nowrap; }
  .save-now dd { margin: 0; }
  .save-acts { flex-wrap: wrap; gap: 8px; justify-content: flex-start; border-top: 0; }
  .save-code { margin: 6px 0 4px; border-top: 1px solid var(--faint); padding-top: 8px; }
  .save-code summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
  .save-code textarea { display: block; width: 100%; box-sizing: border-box; font: 16px/1.4 ui-monospace, monospace; border: 1px solid var(--faint); padding: 8px; -webkit-user-select: text; user-select: text; touch-action: auto; }
  .save-confirm { border: 1px solid var(--ink); padding: 10px 12px; margin: 10px 0; }
  #save-msg:empty { display: none; }
  dialog, dialog button, #hud-top button, .t-actions, #menu { touch-action: manipulation; }
  dialog { overscroll-behavior: contain; }
  #gyo-view { width: 100%; height: auto; display: block; border: 1px solid var(--faint); }
  body.at-sea #btn-home, body.in-aqua #btn-home, body.in-pool #btn-home { display: inline-block; }
  body.in-pool #btn-aqua, body.in-pool #btn-pen, body.in-pool #btn-post, body.in-pool #rig-word, body.in-pool #jiai { display: none !important; }
  #tp-keys { display: none; }
  body.in-pool:not(.touch) #tp-keys { display: flex; justify-content: center; gap: 22px; margin-top: 8px; font: 12px var(--pixel); color: var(--muted); }
  #tp-keys kbd { font: inherit; border: 1px solid var(--faint); border-bottom-width: 2px; padding: 0 5px; margin-right: 7px; color: var(--ink); }
  #tp-keys b { font-weight: 400; } #tp-keys b.on { color: var(--ink); }
  /* at sea on a computer: the keys for the boat and the main button's word, in the same style */
  #sea-keys { display: none; }
  body.at-sea:not(.touch) #sea-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; font: 12px var(--pixel); color: var(--muted); }
  #sea-keys kbd { font: inherit; border: 1px solid var(--faint); border-bottom-width: 2px; padding: 0 5px; margin-right: 7px; color: var(--ink); }
  .tp-btns { display: none; gap: 18px; margin-top: 4px; }
  body.in-pool .tp-btns { display: flex; }
  #tp-tool-btn, #tp-bucket-btn { background: none; border: 0; padding: 4px 0; font: 13px var(--pixel); color: var(--ink); cursor: pointer; pointer-events: auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
  #tp-tool-btn small, #tp-bucket-btn small { font-size: 11px; color: var(--muted); margin-right: 6px; text-decoration: none; display: inline-block; }
  #tp-bucket-btn.full span { color: #d23f33; }
  #tp-bucket-btn.bump span { display: inline-block; animation: tpbump .4s steps(4); }
  @keyframes tpbump { 30% { transform: translateY(-4px) scale(1.2); } 100% { transform: none; } }
  /* the catch, said big for a moment over the picture */
  #tp-got { position: fixed; left: 50%; top: calc(var(--stage-top) + 56px); transform: translateX(-50%); z-index: 6; background: #fff; border: 1px solid var(--ink); padding: 6px 16px 8px; text-align: center; pointer-events: none; box-shadow: 4px 4px 0 rgba(28, 27, 25, .12); white-space: nowrap; }
  #tp-got b { display: block; font: 20px/1.3 var(--pixel); font-weight: 400; color: var(--ink); }
  #tp-got span { display: block; font: 13px var(--pixel); color: var(--muted); margin-top: 2px; }
  #tp-got.first b { color: #d23f33; }
  #tp-got.pop { animation: fwpop-c .22s steps(3) both; }
  #tp-got.out { animation: tpgotout .26s steps(3) both; }
  @keyframes tpgotout { to { transform: translateX(-50%) translateY(-8px); opacity: 0; } }
  #pail-view { width: 100%; image-rendering: pixelated; display: block; aspect-ratio: 320 / 170; touch-action: manipulation; cursor: pointer; }
  #pail-list { list-style: none; margin: 10px 0 6px; padding: 0; }
  #pail-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--faint); padding: 2px 0; }
  #pail-list li .link { padding: 6px 10px; flex-shrink: 0; }
  #pail-list .empty { color: var(--muted); border: 0; padding: 6px 0; }
  body.in-pool #c { cursor: none; }
  .tabs { display: flex; gap: 0; margin: 2px 0 10px; }
  .tabs button { background: #fff; border: 1px solid var(--ink); margin-left: -1px; padding: 6px 14px; font: 13px var(--pixel); color: var(--ink); cursor: pointer; }
  .tabs button:first-child { margin-left: 0; }
  .tabs button.using { background: var(--ink); color: #fff; cursor: default; }
  .bucket-list { list-style: none; margin: 8px 0 4px; padding: 0; }
  .bucket-list li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 4px 8px; border-bottom: 1px solid var(--faint); padding: 6px 0; }
  .bucket-list canvas { image-rendering: pixelated; width: 48px; height: 32px; }
  .bucket-list .seg { grid-column: 1 / -1; margin: 0; }
  .seg.seg-sm button { padding: 6px 0; font-size: 12px; }
  .seg button:disabled { color: var(--faint); cursor: default; }
  .bait-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .bait-list button { background: #fff; border: 1px solid var(--ink); padding: 6px 10px; font: 13px var(--text); color: var(--ink); cursor: pointer; }
  .bait-list button.using { background: var(--ink); color: #fff; cursor: default; }
  .bait-list.off button, .bait-list button:disabled { border-color: var(--faint); color: var(--faint); background: #fff; cursor: default; }
  .bait-list.off button.using { background: var(--faint); color: #fff; }
  .bait-list button small { color: inherit; opacity: .7; margin-left: 4px; }
  #dlg-help .rights { color: var(--muted); font-size: 12px; }
  a.more { display: inline-block; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 7px 14px; font: 13px var(--pixel); letter-spacing: .04em; }
  a.more:hover, a.more:focus-visible { background: var(--ink); color: #fff; }
  body.at-sea #btn-aqua, body.in-aqua #btn-aqua, body.in-aqua #btn-pen, body.in-aqua #btn-post, body.in-aqua #rig-word, body.in-aqua #jiai { display: none !important; }
  #tank-view { width: 100%; image-rendering: pixelated; display: block; aspect-ratio: 320 / 170; border: 6px solid #1c2230; box-sizing: border-box; touch-action: manipulation; cursor: pointer; }
  .tank-glass { position: relative; }
  body.at-sea #btn-pen, body.at-sea #btn-post, body.at-sea #rig-word, body.at-sea #jiai { display: none !important; }
  #fightwin.left { right: auto; left: max(16px, env(safe-area-inset-left)); }
  body.touch #fightwin { left: 50%; right: auto; transform: translateX(-50%); top: max(64px, calc(env(safe-area-inset-top) + 58px)); }
  body.touch #fightwin.pop { animation: fwpop-c .22s steps(3) both; }
  @keyframes fwpop-c { from { transform: translateX(-50%) scale(.82); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
  body.touch #fightwin.closing { animation: fwclose-c .3s steps(3) both; }
  @keyframes fwclose-c { to { transform: translateX(-50%) translateY(-10px); opacity: 0; } }

  /* touch controls */
  #touch { display: none; }
  body.touch #touch { display: block; }
  #stick { position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: calc(max(40px, calc(env(safe-area-inset-bottom) + 28px)) + var(--tb)); width: 128px; height: 128px; border-radius: 50%; border: 1.5px solid rgba(28, 27, 25, .22); touch-action: none; z-index: 3; }
  #stick::before { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: rgba(28, 27, 25, .05); }
  #knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(28, 27, 25, .16); pointer-events: none; }
  #act { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(max(46px, calc(env(safe-area-inset-bottom) + 34px)) + var(--tb)); width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; font: 17px var(--pixel); touch-action: none; z-index: 3; cursor: pointer; }
  #act:active, #act.hold { background: #f2efe8; }
  #act.now { background: var(--signal); animation: pulse .3s steps(2) infinite; }
  @keyframes pulse { 50% { transform: scale(1.06); } }
  body.touch #hud-bottom { bottom: max(8px, env(safe-area-inset-bottom)); }
  body.touch #status { position: fixed; left: 0; right: 0; bottom: calc(var(--stage-bottom) - 4px); text-align: center; padding: 0 16px; }
  @media (orientation: landscape) { body.touch #status { bottom: max(10px, env(safe-area-inset-bottom)); } }

  /* dialogs: white cards with an ink rule, like a page in a notebook */
  dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 18px 20px 14px; border: 1px solid var(--ink); color: var(--ink); background: #fff; font: 500 13px/1.65 var(--text); }
  dialog::backdrop { background: rgba(255, 255, 255, .78); }
  dialog[open] { animation: dlg-in .22s cubic-bezier(.2, .8, .2, 1); }
  dialog[open]::backdrop { animation: fade-in .22s ease-out; }
  dialog.closing { animation: dlg-out .15s ease-in forwards; }
  dialog.closing::backdrop { animation: fade-out .15s ease-in forwards; }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
  @keyframes dlg-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
  dialog h2 { font: 22px/1.3 var(--pixel); margin: 0; }
  .kicker { font: 13px var(--pixel); color: var(--buoy); margin: 0 0 4px; }
  .art { display: block; image-rendering: pixelated; margin: 4px auto 6px; max-width: 100%; }
  .size { font: 18px var(--pixel); margin: 2px 0 0; }
  .where { color: var(--muted); margin: 2px 0 8px; }
  .badge { display: inline-block; font: 12px var(--pixel); padding: 1px 6px; margin-right: 6px; border: 1px solid currentColor; }
  .badge.new { color: var(--buoy); }
  .badge.rec { color: var(--sea); }
  .note { color: #4a4743; margin: 8px 0 12px; }
  .choices { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; border-top: 1px solid var(--faint); padding-top: 10px; }
  .primary { background: var(--ink); color: #fff; border: 0; padding: 10px 14px; cursor: pointer; font: 14px var(--pixel); }
  .primary:hover, .primary:focus-visible { background: #3a3834; }
  .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .head span { color: var(--muted); font-variant-numeric: tabular-nums; }
  /* the description stays at the top while the grid scrolls under it, so a fish picked far down is read without scrolling back up */
  #dlg-dex { overflow-x: hidden; }
  #dex-detail { display: grid; grid-template-columns: 144px 1fr; gap: 12px; align-items: start; padding: 6px 0 10px; border-bottom: 1px solid var(--faint); margin-bottom: 10px; min-height: 120px; position: sticky; top: -18px; z-index: 1; background: #fff; }
  #dex-detail h3 { font: 18px var(--pixel); margin: 0; }
  #dex-meta { color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
  #dex-note { margin: 0; font-size: 12px; color: #4a4743; }
  /* paragraphs never end on a lone character or two */
  #dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 2px; min-width: 0; }
  #dex-grid .cell { background: none; border: 1px solid transparent; padding: 4px 2px 6px; cursor: pointer; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; }
  #dex-grid .cell:hover, #dex-grid .cell.sel { border-color: var(--ink); }
  #dex-grid canvas { image-rendering: pixelated; width: 96px; height: 60px; }
  /* a long name keeps to its cell: the local name in brackets goes on a second, smaller line */
  #dex-grid span { font-size: 11px; line-height: 1.35; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
  #dex-grid span small { display: block; font-size: 10px; color: var(--muted); }
  #dex-grid .unknown span { color: var(--muted); }
  #dlg-pen, #dlg-tank { width: min(680px, calc(100vw - 24px)); }
  .primary:disabled { opacity: .3; cursor: default; }
  .link:disabled { opacity: .3; cursor: default; }
  .inn-line { margin: 4px 0 12px; line-height: 1.75; }
  .market-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
  .market-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--faint); padding: 5px 4px 5px 0; }
  .market-list b { font: 14px var(--pixel); font-weight: normal; white-space: nowrap; }
  .market-list .empty { color: var(--muted); border: 0; }
  /* みさき食堂: each fish in the cooler with the dishes it can become; a new dish has a small dot */
  .diner-list li { align-items: baseline; flex-wrap: wrap; }
  .diner-ways { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; }
  .diner-ways button { font: 13px/1 var(--sans, inherit); padding: 6px 9px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; touch-action: manipulation; }
  .diner-ways button.new::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 4px; vertical-align: 4px; background: var(--buoy, #d23f33); border-radius: 50%; }
  .diner-ways button.link { border: 0; background: none; color: var(--muted); text-decoration: underline; }
  .diner-meal { text-align: center; }
  #diner-art { width: min(360px, 100%); height: auto; image-rendering: pixelated; display: block; margin: 4px auto 10px; }
  .diner-meal h3 { font: 18px var(--pixel); font-weight: normal; margin: 0 0 6px; }
  .diner-meal p { margin: 0 0 8px; line-height: 1.75; text-align: left; }
  .diner-menu { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .diner-menu li { font-size: 12px; line-height: 1.5; }
  .diner-menu .empty { grid-column: 1 / -1; color: var(--muted); }
  .diner-thumb { width: 100%; height: auto; image-rendering: pixelated; display: block; margin-bottom: 3px; }
  .market-total { text-align: right; font: 17px var(--pixel); margin: 10px 0 4px; }
  .rig-list { display: grid; gap: 6px; margin: 6px 0 4px; }
  .rig-list button { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; text-align: left; background: #fff; border: 1px solid var(--ink); padding: 9px 12px; cursor: pointer; color: var(--ink); font: inherit; }
  .rig-list button:hover:not(:disabled) { background: var(--faint); }
  .rig-list button.using { border-width: 2px; padding: 8px 11px; cursor: default; }
  .rig-list button:disabled { border-color: var(--faint); color: var(--muted); cursor: default; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 0; }
  .seg button { background: #fff; border: 1px solid var(--ink); margin-left: -1px; padding: 8px 0; font: inherit; color: var(--ink); cursor: pointer; }
  .seg button:first-child { margin-left: 0; }
  .seg button.using { background: var(--ink); color: #fff; cursor: default; }
  .seg-note { margin: 6px 0 4px; color: var(--muted); font-size: 12px; min-height: 2.6em; }
  .rig-list b { font: 16px var(--pixel); font-weight: normal; white-space: nowrap; }
  .rig-list em { font: 500 11px var(--text); font-style: normal; color: var(--muted); justify-self: end; }
  .rig-list span { grid-column: 1 / -1; font: 500 11.5px/1.6 var(--text); color: var(--muted); }
  #rig-word { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
  .inn-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .inn-times button { display: grid; gap: 3px; text-align: left; background: #fff; border: 1px solid var(--ink); padding: 10px 12px; cursor: pointer; color: var(--ink); font: inherit; }
  .inn-times button:hover { background: var(--faint); }
  .inn-times b { font: 17px var(--pixel); font-weight: normal; white-space: nowrap; }
  .inn-times span { font: 500 11px/1.4 var(--text); color: var(--muted); }
  #fade { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .6s steps(6); z-index: 40; }
  #fade.on { opacity: 1; pointer-events: auto; }
  #fade-text { position: absolute; left: 0; right: 0; top: 46%; margin: 0; text-align: center; font: 15px var(--pixel); color: var(--muted); letter-spacing: .06em; }
  body.on-isle #btn-home { display: inline-block; }
  body.on-isle #jiai, body.on-isle #btn-aqua { display: none !important; }
  .pen-wrap { position: relative; }
  #pen-view { width: 100%; image-rendering: pixelated; display: block; aspect-ratio: 320 / 170; border: 1px solid var(--ink); touch-action: manipulation; cursor: pointer; }
  .head .muted { color: var(--muted); }
  #touch-view { width: 100%; image-rendering: pixelated; display: block; aspect-ratio: 320 / 170; touch-action: manipulation; cursor: pointer; }
  #pen-tag, #tank-tag, #touch-tag, #pail-tag { position: absolute; transform: translate(-50%, -100%); background: #fff; border: 1px solid var(--ink); padding: 2px 7px; font: 12px var(--pixel); white-space: nowrap; pointer-events: none; }
  #pen-list { list-style: none; margin: 10px 0 6px; padding: 0; }
  #pen-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--faint); padding: 2px 0; }
  #pen-list li .link { padding: 6px 10px; margin-right: 2px; }
  #pen-list li .acts { display: flex; flex-shrink: 0; }
  #pen-list li > span:first-child { min-width: 0; }
  /* on a narrow phone the three buttons go under the name, so the name is not folded two letters to a line */
  @media (max-width: 359px) { #pen-list li { flex-wrap: wrap; } #pen-list li > span:first-child { flex-basis: 100%; } #pen-list li .acts { margin-left: auto; } }
  #pen-list .empty { color: var(--muted); border: 0; padding: 6px 0; }
  .pen-note { min-height: 1.4em; margin: 0 0 4px; color: var(--muted); font-size: 13px; }
  #dlg-post { width: min(620px, calc(100vw - 24px)); }
  #post-view { width: 100%; display: block; border: 1px solid var(--faint); }
  /* the chalkboard: green slate in a wooden frame, chalk lettering */
  .chalk { background: #2f4a3c; color: #eef0e6; border: 6px solid #8a6a48; padding: 12px 14px 10px; margin: -4px -6px 4px; box-shadow: inset 0 0 0 1px #233a2e; }
  .chalk h2 { font: 20px var(--pixel); color: #f4f2e8; }
  .chalk .head span { color: #c9d4c4; font: 13px var(--pixel); }
  .chalk dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 2px 10px; margin: 6px 0 10px; }
  .chalk dt { color: #b8c9b0; }
  .chalk dd { margin: 0; font-family: var(--pixel); }
  .chalk-sub { margin: 0 0 4px; color: #f2d77a; font: 13px var(--pixel); }
  #board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  #board-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; border-bottom: 1px dashed rgba(238, 240, 230, .25); padding-bottom: 5px; }
  #board-list .when { font-family: var(--pixel); }
  #board-list .where { color: #f2d77a; font-family: var(--pixel); text-align: right; }
  #board-list .fish { grid-column: 1 / -1; color: #d6ded0; font-size: 12px; }
  #board-list li.now .when, #board-list li.now .fish { color: #ff9c86; }
  #board-list li.past { opacity: .45; }
  .chalk-note { margin: 8px 0 0; color: #b8c9b0; font-size: 12px; }
  #dlg-help ol { padding-left: 1.3em; margin: 10px 0 14px; }
  #dlg-help li { margin-bottom: 8px; }
  #dlg-help li b { font-weight: 700; }
  .help-sub { font: 12px var(--pixel); color: var(--muted); letter-spacing: .1em; margin: 2px 0 0; }
  @media (max-width: 560px) {
    #where h1 { font-size: 15px; }
    #where h1 small { display: none; }
    #menu-btn .menu-word { display: none; }
    #credit .long { display: none; }
    #dex-detail { grid-template-columns: 96px 1fr; gap: 10px; min-height: 0; }
    #dex-art { width: 96px; height: 60px; }
    #dex-detail h3 { font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) { #toast, canvas#c { transition: none; } #act.now { animation: none; } dialog[open], dialog.closing, dialog[open]::backdrop, #menu:not([hidden]) { animation: none; } }