/* Creator Call: the harbour master's office, drawn with the game's own UI (lacquer plates, brass, the teak frame) */
@font-face { font-family: 'Jersey 15'; src: url('/fonts/jersey15-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body.cc {
  --g-ink: #0a1422; --g-lacq: #11223a; --g-lacq2: #0d1a2e; --g-rail: #2a4769; --g-chalk: #f3ecdf; --g-mist: #9fb3c7;
  --g-brass: #e8b85e; --g-brass-d: #b4832f; --g-brass-l: #ffe2a0; --g-flare: #ff5d50; --g-lagoon: #47d1c5; --g-kelp: #8edb93; --g-accent: #f2c46a;
  --g-display: 'Jersey 15', var(--cjk), 'Silkscreen', monospace;
  --g-tiny: 'Silkscreen', var(--cjk), monospace;
  --g-shade: rgba(0, 0, 0, 0.55);
}
.cc .top a[aria-current="page"] { color: var(--gold); }
.cc-main { max-width: 1040px; margin: 0 auto; padding: 104px 24px 72px; }

/* ---------- the quest board header */
.cc-hero { display: grid; justify-items: center; text-align: center; margin-bottom: 40px; }
.quest { margin: 0 0 18px; }
.quest span { display: inline-block; font-family: var(--g-display); font-size: 22px; letter-spacing: 0.12em; color: var(--g-brass); padding: 7px 18px 8px;
  background: rgba(10, 20, 34, 0.86); border: 3px solid var(--g-ink); box-shadow: inset 0 0 0 2px var(--g-brass-d), 0 3px 0 var(--g-shade);
  animation: goalflash 2.4s ease-out infinite; }
@keyframes goalflash { 0% { box-shadow: inset 0 0 0 2px var(--g-brass-l), 0 0 0 3px rgba(255, 226, 160, 0.45), 0 3px 0 var(--g-shade); } 45%, 100% { box-shadow: inset 0 0 0 2px var(--g-brass-d), 0 0 0 0 rgba(255, 226, 160, 0), 0 3px 0 var(--g-shade); } }
.cc-hero h1 { margin: 0; display: grid; justify-items: center; gap: 6px; font-weight: 400; }
.cc-logo img { display: block; width: min(420px, 78vw); height: auto; image-rendering: pixelated; filter: drop-shadow(0 5px 0 rgba(4, 10, 23, 0.6)); }
.cc-hero h1 span { font-family: var(--g-display); font-size: clamp(54px, 9vw, 96px); line-height: 0.95; color: var(--g-brass-l); letter-spacing: 0.02em;
  text-shadow: 0 4px 0 var(--g-brass-d), 0 8px 0 var(--g-ink), 0 0 26px rgba(255, 196, 80, 0.35); }
.lede { max-width: 760px; margin: 22px auto 26px; font-size: 20px; line-height: 1.5; color: var(--cream); text-shadow: 0 0 8px rgba(5, 11, 25, 0.95), 0 0 2px rgba(5, 11, 25, 0.95); }
.lede b { color: var(--g-brass-l); font-weight: 600; }
.measure { margin: 18px 0 0; font-size: 15px; color: var(--g-mist); text-shadow: 0 0 6px rgba(5, 11, 25, 0.95); }

/* HUD plates, as in the game's top-right corner */
.plate { position: relative; background: linear-gradient(180deg, var(--g-lacq), var(--g-lacq2)); border: 3px solid var(--g-ink);
  box-shadow: inset 0 0 0 2px var(--g-brass-d), inset 0 0 0 3px rgba(255, 226, 160, 0.18), 0 4px 0 var(--g-shade); }
.plate::before, .plate::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--g-brass); box-shadow: 0 0 0 1px var(--g-ink); top: 5px; left: 5px; }
.plate::after { left: auto; right: 5px; }
.hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 820px); }
.stat { display: grid; justify-items: start; gap: 2px; padding: 12px 16px 10px; text-align: left; }
.lbl { font-family: var(--g-tiny); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-mist); }
.stat b { font-family: var(--g-display); font-size: 40px; line-height: 0.95; font-weight: 400; color: var(--g-chalk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat.gold b { color: var(--g-brass-l); }
.stat.cyan { box-shadow: inset 0 0 0 2px var(--g-lagoon), inset 0 0 0 3px rgba(150, 245, 232, 0.18), 0 4px 0 var(--g-shade); }
.stat.cyan b { color: #bff7f0; }

/* ---------- the harbour master's panel: the game's teak-and-brass frame */
.sheet { --accent: var(--g-accent); position: relative; border-style: solid; border-width: 58px 30px 32px; border-color: #5b3416;
  border-image: url('/img/creators/frame.png') 29 15 16 / 58px 30px 32px stretch; image-rendering: pixelated;
  background: linear-gradient(180deg, #17213f, #0f1630) padding-box; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.5)); }
.sheet-head { display: flex; align-items: center; gap: 18px; padding: 14px 16px 16px; border-bottom: 3px solid var(--g-ink); box-shadow: 0 2px 0 var(--g-rail);
  background: linear-gradient(180deg, rgba(255, 226, 160, 0.07), rgba(255, 226, 160, 0)); }
.face { flex: none; width: 120px; height: 120px; image-rendering: pixelated; background: radial-gradient(circle at 50% 38%, #3d6596, #1a2d52 72%);
  border: 3px solid var(--g-ink); box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 var(--g-shade); }
.who { flex: 1; min-width: 0; display: grid; gap: 6px; }
.who h2 { margin: 0; font-family: var(--g-display); font-weight: 400; font-size: 42px; line-height: 0.95; color: var(--accent); }
.npc { font-family: var(--g-tiny); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-brass-l); }
.bubble { position: relative; margin: 6px 0 0 8px; padding: 9px 12px 10px; background: var(--g-chalk); color: #1b1a22; font-size: 17px; line-height: 1.35;
  border: 3px solid var(--g-ink); box-shadow: 0 3px 0 var(--g-shade); min-height: 46px; }
.bubble::before { content: ''; position: absolute; left: -14px; top: 11px; border: 7px solid transparent; border-right-color: var(--g-ink); }
.bubble::after { content: ''; position: absolute; left: -7px; top: 13px; border: 5px solid transparent; border-right-color: var(--g-chalk); }

.tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 3px solid var(--g-ink); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; cursor: pointer; font-family: var(--g-display); font-size: 22px; line-height: 1; padding: 9px 14px 7px; border: 3px solid var(--g-ink); border-bottom: 0;
  background: #0b1428; color: var(--g-mist); box-shadow: inset 0 2px 0 #213a5c; }
.tab:hover { color: var(--g-chalk); }
.tab.on { background: var(--accent); color: #1a1206; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.tab:focus-visible { outline: 3px solid var(--g-brass-l); outline-offset: 1px; }
.body { padding: 16px; display: grid; gap: 12px; align-content: start; }
.note { margin: 0; color: var(--g-mist); font-size: 16px; }

/* orders: the game's list rows */
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 3px solid var(--g-ink);
  background: #0a1729; box-shadow: inset 0 0 0 1px var(--g-rail); }
.order .ic { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; align-self: start; margin-top: 2px; }
.order .t { display: grid; gap: 3px; min-width: 0; }
.order .t > b { font-family: var(--g-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--g-chalk); }
.order small { color: var(--g-mist); font-size: 15.5px; line-height: 1.35; }
.order .who { color: var(--g-brass-l); }
.order .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.order.wide { grid-template-columns: 40px minmax(0, 1fr); }
.order.done { box-shadow: inset 0 0 0 1px var(--g-kelp); }
.order.done .t > b { color: var(--g-kelp); }
.order.locked { opacity: 0.55; }
.order.locked .hand, .order.locked .thread { pointer-events: none; }
.tick { display: none; width: 26px; height: 20px; background: var(--g-kelp);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM4 2h1v1H4zM0 2h1v1H0zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM4 2h1v1H4zM0 2h1v1H0zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.order.done .tick { display: block; }
.order.done .acts .gbtn { display: none; }
.missing { margin: 6px 0 0; padding-left: 18px; color: #ffb4a8; font-size: 15.5px; display: grid; gap: 2px; }
.order .msg { margin: 6px 0 0; font-size: 16px; }
.order .msg:empty { display: none; }
.order .msg.bad { color: #ff9a8c; }
.order .msg.ok { color: var(--g-kelp); }
.today { margin: 4px 0 0; font-family: var(--g-tiny); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-brass); }
.today:empty { display: none; }

/* buttons and fields, game style */
.gbtn { display: inline-block; cursor: pointer; padding: 9px 14px 8px; border: 3px solid var(--g-ink); background: var(--g-lacq); color: var(--g-chalk);
  font-family: var(--g-display); font-size: 22px; line-height: 1; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
  box-shadow: inset -3px -3px 0 #08111f, inset 3px 3px 0 #27466c, 0 4px 0 var(--g-ink); }
.gbtn:hover { filter: brightness(1.12); }
.gbtn:active { transform: translateY(3px); box-shadow: inset -3px -3px 0 #08111f, inset 3px 3px 0 #27466c, 0 1px 0 var(--g-ink); }
.gbtn.gold { background: var(--g-brass); color: #2a1a08; box-shadow: inset -3px -3px 0 var(--g-brass-d), inset 3px 3px 0 var(--g-brass-l), 0 4px 0 var(--g-ink); }
.gbtn[disabled] { opacity: 0.5; cursor: progress; filter: none; }
.gbtn:focus-visible, .glink:focus-visible { outline: 3px solid var(--g-brass-l); outline-offset: 2px; }
.glink { font: inherit; font-size: 15px; color: var(--g-mist); background: none; border: 0; padding: 2px 0; text-decoration: underline; cursor: pointer; }
.glink:hover { color: var(--g-chalk); }
.hand { margin-top: 10px; display: grid; gap: 8px; }
.hand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.hand input, .thread textarea { width: 100%; font-family: var(--text); font-size: 17px; color: var(--g-chalk); background: #06101d; border: 3px solid var(--g-ink);
  box-shadow: inset 0 0 0 1px var(--g-rail); padding: 10px 12px; border-radius: 0; }
.hand input::placeholder, .thread textarea::placeholder { color: #5f7690; }
.hand input:focus, .thread textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--g-brass); }
.thread summary { cursor: pointer; font-size: 15px; color: var(--g-mist); }
.thread textarea { margin-top: 8px; resize: vertical; min-height: 74px; }

/* ---------- the board */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.brow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 12px 6px; border: 3px solid var(--g-ink);
  background: #0a1729; box-shadow: inset 0 0 0 1px var(--g-rail); }
.brow .rk { font-family: var(--g-display); font-size: 24px; color: var(--g-mist); }
.brow .nm { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-chalk); }
.brow .nm a { color: inherit; text-decoration: none; }
.brow .nm a:hover { color: var(--g-brass-l); }
.brow .np { font-family: var(--g-tiny); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-mist); }
.brow .hl { font-family: var(--g-display); font-size: 26px; color: var(--g-chalk); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.brow.gtd { box-shadow: inset 4px 0 0 var(--g-brass), inset 0 0 0 1px var(--g-rail); }
.brow.gtd .hl, .brow.gtd .rk { color: var(--g-brass-l); }
.brow.fcfs { box-shadow: inset 4px 0 0 var(--g-lagoon), inset 0 0 0 1px var(--g-rail); }
.brow.fcfs .hl { color: #bff7f0; }
.brow.me { background: #1a2c4e; box-shadow: inset 0 0 0 2px var(--g-brass-l); }
.brow.me .nm::after { content: attr(data-you); margin-left: 8px; font-family: var(--g-tiny); font-size: 10px; color: var(--g-ink); background: var(--g-brass-l); padding: 1px 5px; }
.cutline { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-family: var(--g-tiny); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-brass); list-style: none; }
.cutline::before, .cutline::after { content: ''; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 14px); }
.cutline.fcfs { color: var(--g-lagoon); }

/* ---------- my haul */
.haul { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 26px; align-items: end; padding: 14px 16px; border: 3px solid var(--g-ink);
  background: linear-gradient(180deg, var(--g-lacq), var(--g-lacq2)); box-shadow: inset 0 0 0 2px var(--g-brass-d); }
.haul-num, .haul-rank { display: grid; gap: 2px; }
.haul b { font-family: var(--g-display); font-weight: 400; font-size: 52px; line-height: 0.9; color: var(--g-brass-l); }
.haul small { font-size: 14px; color: var(--g-mist); }
.haul-line { margin: 0; justify-self: end; text-align: right; font-size: 16px; color: var(--g-chalk); }
.haul-line b { font-family: inherit; font-size: inherit; color: var(--g-brass-l); }
.tier { display: inline-block; font-family: var(--g-tiny); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; color: var(--g-ink); background: var(--g-mist); }
.tier.gtd { background: var(--g-brass); }
.tier.fcfs { background: var(--g-lagoon); }
.catches { display: grid; gap: 10px; }
.catch { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 12px; border: 3px solid var(--g-ink);
  background: #0a1729; box-shadow: inset 0 0 0 1px var(--g-rail); }
.catch .fish { width: 120px; height: 60px; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #1d3a63, #0d1a2e 70%); border: 3px solid var(--g-ink); }
.catch .fish img { max-width: 112px; max-height: 54px; image-rendering: pixelated; }
.catch h4 { margin: 0; font-family: var(--g-display); font-weight: 400; font-size: 26px; line-height: 1; }
.catch .sub { font-size: 14.5px; color: var(--g-mist); }
.catch .score { text-align: right; }
.catch .score b { display: block; font-family: var(--g-display); font-weight: 400; font-size: 38px; line-height: 0.9; color: var(--g-chalk); }
.catch .state { font-family: var(--g-tiny); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-mist); }
.catch .state.final { color: var(--g-kelp); }
.catch .state.bad { color: #ff9a8c; }
.catch .bars { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bar2 { display: grid; gap: 3px; }
.bar2 span { font-family: var(--g-tiny); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-mist); display: flex; justify-content: space-between; gap: 6px; }
.bar2 span em { font-style: normal; color: var(--g-chalk); }
.bar2 i { display: block; height: 10px; border: 2px solid var(--g-ink); background: #06101d; box-shadow: inset 0 0 0 1px var(--g-rail); position: relative; }
.bar2 i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(var(--g-kelp) 0 50%, #5fb36a 50%); }
.bar2.judge i::after { background: linear-gradient(var(--g-brass) 0 50%, var(--g-brass-d) 50%); }
.catch .cnote { grid-column: 2 / 4; margin: 2px 0 0; padding: 7px 10px 8px; background: var(--g-chalk); color: #1b1a22; font-size: 15.5px; border: 3px solid var(--g-ink); }
.catch .cnote::before { content: attr(data-by); display: block; font-family: var(--g-tiny); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a5a3a; margin-bottom: 2px; }
.catch .meta { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; color: var(--g-mist); }
.catch .meta a { color: var(--g-brass-l); }
.catch.dim { opacity: 0.6; }
.catch.zero { box-shadow: inset 0 0 0 1px var(--g-flare); }
.rar-c { color: var(--g-chalk); } .rar-u { color: var(--g-kelp); } .rar-r { color: var(--g-lagoon); } .rar-l { color: var(--g-brass-l); }

/* ---------- rules */
.rules h3 { margin: 14px 0 0; font-family: var(--g-display); font-weight: 400; font-size: 28px; color: var(--accent); }
.rules h3:first-child { margin-top: 0; }
.rules ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16.5px; line-height: 1.45; }
.score { width: 100%; border-collapse: collapse; font-size: 16px; }
.score th { font-family: var(--g-tiny); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-mist); text-align: left; padding: 6px 8px; border-bottom: 3px solid var(--g-ink); }
.score td { padding: 8px; border-bottom: 1px solid #1d3352; vertical-align: top; line-height: 1.4; }
.score td:first-child { font-family: var(--g-display); font-size: 21px; white-space: nowrap; color: var(--g-chalk); }
.score td:last-child, .score th:last-child { text-align: right; font-family: var(--g-display); font-size: 22px; color: var(--g-brass-l); }
.score tr.ai td:first-child { color: var(--g-brass-l); }
.score tfoot td { border-bottom: 0; border-top: 3px solid var(--g-ink); font-family: var(--text); font-size: 16px; color: var(--g-chalk); }
.score tfoot td:last-child { font-family: var(--g-display); font-size: 26px; }

/* ---------- the catch: a line goes down, the harbour master pulls up your post as a fish */
.catch-dlg { width: min(92vw, 560px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--g-chalk); }
.catch-dlg.casting { width: 100vw; height: 100vh; }
.catch-dlg::backdrop { background: rgba(5, 12, 22, 0.78); }
.cast { position: fixed; left: 50%; top: 0; height: 50vh; width: 40px; transform: translateX(-50%); pointer-events: none; }
.cast .line { position: absolute; left: 19px; top: 0; width: 2px; height: 0; background: rgba(243, 236, 223, 0.8); }
.cast .hook { position: absolute; left: 8px; top: -20px; width: 24px; height: 30px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23cfd6e0' d='M3 0h1v6H3zM1 5h1v3H1zM2 8h3v1H2zM5 6h1v2H5zM6 5h1v2H6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cast .splash { position: absolute; left: -40px; width: 120px; height: 24px; opacity: 0; bottom: -12px;
  background: radial-gradient(ellipse at 50% 60%, rgba(191, 247, 240, 0.9) 0 18%, rgba(191, 247, 240, 0) 60%); }
.catch-dlg.casting .line { animation: drop 650ms steps(10, end) forwards; }
.catch-dlg.casting .hook { animation: hookdrop 650ms steps(10, end) forwards, tug 600ms 900ms steps(4, end) infinite; }
.catch-dlg.casting .splash { animation: splash 500ms 600ms steps(5, end) both; }
@keyframes drop { to { height: 100%; } }
@keyframes hookdrop { 0% { opacity: 1; top: -20px; } 100% { opacity: 1; top: calc(100% - 20px); } }
@keyframes tug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes splash { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.castmsg { position: fixed; left: 50%; top: calc(50vh + 34px); transform: translateX(-50%); width: max-content; max-width: 90vw; margin: 0; padding: 8px 16px 9px; text-align: center;
  font-family: var(--g-display); font-size: 24px; line-height: 1.15; color: var(--g-brass-l); background: rgba(10, 20, 34, 0.9); border: 3px solid var(--g-ink); box-shadow: inset 0 0 0 2px var(--g-brass-d); display: none; }
.catch-dlg.casting .castmsg { display: block; }
.catch-card { position: relative; display: none; justify-items: center; gap: 6px; padding: 20px 26px 18px; text-align: center;
  background: linear-gradient(180deg, var(--g-lacq), var(--g-lacq2)); border: 3px solid var(--g-ink); box-shadow: inset 0 0 0 2px var(--g-brass-d), 0 4px 0 var(--g-shade); }
.catch-dlg.landed .catch-card { display: grid; animation: catchin 450ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes catchin { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.catch-card .rays { position: absolute; inset: -110px; z-index: -1; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, 0.22) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.catch-card[data-tier="r"] { box-shadow: inset 0 0 0 2px var(--g-lagoon), 0 0 0 3px var(--g-ink), 0 0 40px rgba(71, 209, 197, 0.45); }
.catch-card[data-tier="r"] .rays { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(150, 245, 232, 0.2) 0 10deg, transparent 10deg 20deg); }
.catch-card[data-tier="l"] { box-shadow: inset 0 0 0 2px var(--g-brass), 0 0 0 3px var(--g-ink), 0 0 40px rgba(232, 184, 94, 0.55); }
.catch-card[data-tier="l"] .rays { opacity: 1; }
.catch-card[data-tier="u"] { box-shadow: inset 0 0 0 2px var(--g-kelp), 0 4px 0 var(--g-shade); }
.ylanded { margin: 0; font-family: var(--g-tiny); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-mist); }
#catchFish { width: auto; height: 108px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); }
.catch-card h3 { margin: 4px 0 0; font-family: var(--g-display); font-weight: 400; font-size: 44px; line-height: 1; }
.catch-card .rar { margin: 0; font-family: var(--g-tiny); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.catch-card .pts { margin: 4px 0 0; font-family: var(--g-display); font-size: 26px; color: var(--g-mist); }
.catch-card .pts b { font-weight: 400; font-size: 64px; line-height: 0.9; color: var(--g-chalk); font-variant-numeric: tabular-nums; }
.catch-card .parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 4px; }
.cnote { margin: 6px 0 0; padding: 8px 12px 9px; background: var(--g-chalk); color: #1b1a22; font-size: 16.5px; border: 3px solid var(--g-ink); text-align: left; width: 100%; }
.cnote::before { content: attr(data-by); display: block; font-family: var(--g-tiny); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a5a3a; margin-bottom: 2px; }
.cmsg { margin: 4px 0 0; font-size: 15px; color: var(--g-mist); }
.cmsg.bad { color: #ff9a8c; }
.cbtns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }

/* ---------- narrow screens */
@media (max-width: 760px) {
  .cc-main { padding: 112px 12px 56px; }
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 34px; }
  .sheet { border-width: 29px 15px 16px; border-image-width: 29px 15px 16px; }
  .sheet-head { align-items: flex-start; gap: 12px; padding: 12px 10px 14px; }
  .face { width: 72px; height: 72px; }
  .who h2 { font-size: 32px; }
  .npc { font-size: 10px; }
  .bubble { font-size: 15.5px; margin-left: 0; }
  .bubble::before, .bubble::after { display: none; }
  .tab { font-size: 19px; padding: 8px 10px 6px; }
  .body { padding: 12px 10px; }
  .order { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .order .ic { width: 32px; height: 32px; }
  .order .acts { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .order.wide .acts { display: none; }
  .hand-row { grid-template-columns: minmax(0, 1fr); }
  .brow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .brow .np { display: none; }
  .haul { grid-template-columns: auto auto; }
  .haul-line { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .catch { grid-template-columns: minmax(0, 1fr) auto; }
  .catch .fish { grid-column: 1 / -1; width: 100%; }
  .catch .bars, .catch .cnote, .catch .meta { grid-column: 1 / -1; }
  .catch .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catch-card { padding: 16px 14px; }
  .catch-card h3 { font-size: 36px; }
  .catch-card .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score td:first-child { white-space: normal; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .quest span, .catch-card .rays, .catch-dlg.casting .hook { animation: none; }
}
html:lang(zh-Hans) .cc .who h2, html:lang(ko) .cc .who h2, html:lang(zh-Hans) .cc-hero h1 span, html:lang(ko) .cc-hero h1 span { letter-spacing: 0; }
html:lang(zh-Hans) .cc-hero h1 span, html:lang(ko) .cc-hero h1 span { font-size: clamp(42px, 7vw, 72px); font-weight: 700; }

@media (max-width: 760px) {
  .cc .top nav { background: rgba(5, 11, 25, 0.72); padding: 6px 12px; box-shadow: 0 0 0 2px rgba(226, 180, 90, 0.25); }
}

/* ---------- sealed while the call runs: no grades or points until the results are final */
.hud.three { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 640px); }
.brow.sealed { grid-template-columns: 58px minmax(0, 1fr) auto; }
.catch .fish { position: relative; }
.catch .fish .q, .cfish .q { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--g-display); font-weight: 400; color: var(--g-brass-l);
  text-shadow: 0 2px 0 var(--g-ink); pointer-events: none; }
.catch .fish .q { font-size: 32px; }
.catch.sealed { align-items: center; }
.catch.sealed h4 { color: var(--g-chalk); }
.catch.sealed .state { font-size: 11px; color: var(--g-brass-l); }
.catch.sealed .state.bad { color: #ff9a8c; }
.catch .why { grid-column: 2 / 4; margin: 0; font-size: 14.5px; color: #ff9a8c; }
.catch.sealed .meta { justify-content: space-between; }
.cfish { position: relative; display: grid; place-items: center; }
.cfish .q { display: none; font-size: 58px; }
.catch-card.sealed .cfish .q { display: grid; }
.catch-card.sealed .pts, .catch-card.sealed .parts, .catch-card.sealed .cnote { display: none; }
.catch-card h3.bad { color: #ff9a8c; }
.score.crit td:last-child { text-align: left; font-family: inherit; font-size: 16px; color: var(--g-chalk); }
.score.crit td:first-child { width: 32%; white-space: normal; }
@media (max-width: 760px) {
  .hud.three { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hud.three .stat:last-child { grid-column: 1 / -1; }
  .brow.sealed { grid-template-columns: 44px minmax(0, 1fr); }
  .catch .why { grid-column: 1 / -1; }
  .score.crit td { display: block; width: auto; border-bottom: 0; padding: 4px 4px 0; }
  .score.crit tr { display: block; border-bottom: 1px solid #1d3352; padding-bottom: 8px; }
}
.haul.sealed .haul-line { justify-self: start; text-align: left; color: var(--g-mist); }
.full-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px; padding: 10px 12px;
  border: 3px solid var(--g-ink); background: rgba(13, 29, 52, 0.85); box-shadow: inset 0 0 0 2px var(--g-brass-d); }
.full-box p { margin: 0; flex: 1 1 260px; font-size: 16px; line-height: 1.45; color: var(--g-chalk); }
.full-box[hidden] { display: none; }