@font-face { font-family: 'Pixelify'; src: url(/fonts/PixelifySans.ttf) format('truetype'); font-weight: 400 700; font-display: swap; }
/* Pixelify's 5 looks like an S and its 2 like an 8, so numbers come from Silkscreen and everything else from Pixelify */
@font-face { font-family: 'Digits'; src: url(/fonts/Silkscreen.ttf) format('truetype'); unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: 'Silk'; src: url(/fonts/Silkscreen.ttf) format('truetype'); font-display: swap; }

:root {
  --ink: #1b1424; --ink2: #2d2036; --paper: #f6eecf; --paper2: #e8d9a8; --wood: #b98348; --wood2: #8a5a33; --wood3: #5c3a21;
  --gold: #e0a82e; --gold2: #ffd95e; --green: #4b9a3f; --green2: #7bc24e; --red: #b53040; --red2: #e65a54; --blue: #2b6aa8; --blue2: #4aa3d8;
  --purple: #6a4aa8; --slate: #727a94;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0; }  /* Pixelify turns "fi" into a glyph that reads as "A" */
html, body { margin: 0; height: 100%; background: var(--ink2); overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Digits', 'Pixelify', 'Silk', monospace; color: var(--ink); font-size: 16px; line-height: 1.25; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; background: #3a6b35; }
img { image-rendering: pixelated; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
b, strong, h1, h2, h3, h4 { font-weight: 400; }   /* Pixelify's bold makes o and c look alike; hierarchy comes from size and colour instead */
.card b, .team-card .name, .panel p b { font-size: 1.06em; color: var(--ink); }

/* pixel border: four shadows make the notched corners for free */
.px { background: var(--paper); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -3px 0 0 var(--paper2), 0 6px 0 0 rgba(27,20,36,.35); }
.chip { color: var(--ink); padding: 6px 10px; margin: 3px; border: 0; font-weight: 400; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chip.icon { width: 38px; height: 38px; justify-content: center; padding: 0; }
.chip.icon img { width: 24px; height: 24px; }
button.chip { cursor: pointer; }
button.chip:active { transform: translateY(2px); }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; position: absolute; }
#teamBadge { top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); }
#phasePill { top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; max-width: calc(100vw - 190px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
@media (max-width: 600px) { #phasePill { top: calc(58px + var(--safe-t)); max-width: calc(100vw - 20px); font-size: 13px; } }
#menuBtn { top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
#hud .dotc { width: 12px; height: 12px; display: inline-block; box-shadow: 0 0 0 2px var(--ink); }
#chatBtn { bottom: calc(10px + var(--safe-b)); left: calc(10px + var(--safe-l)); }
#chatBtn i { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: var(--red2); box-shadow: 0 0 0 2px var(--ink); }
#chatLog { bottom: calc(60px + var(--safe-b)); left: calc(12px + var(--safe-l)); max-width: min(78vw, 420px); pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
#chatLog .line { background: rgba(27,20,36,.78); color: #fff; padding: 3px 7px; font-size: 14px; width: fit-content; max-width: 100%; word-break: break-word; animation: fadeout 14s forwards; }
#chatLog .line b { color: var(--gold2); font-weight: 400; }
#chatLog.pinned .line { animation: none; }
@keyframes fadeout { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#chatForm { bottom: calc(10px + var(--safe-b)); left: calc(58px + var(--safe-l)); right: calc(10px + var(--safe-r)); display: flex; gap: 6px; max-width: 520px; }
#chatForm input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 10px; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); outline: none; -webkit-user-select: text; user-select: text; }
#hint { bottom: calc(10px + var(--safe-b)); left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }

/* buttons */
.btn { font-family: 'Silk', monospace; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); background: var(--gold); border: 0; padding: 10px 14px; margin: 8px 5px; cursor: pointer;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--gold2), inset 0 -3px 0 0 #a8741c; position: relative; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 #a8741c; }
.btn.green { background: var(--green); color: #fff; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--green2), inset 0 -3px 0 0 #2f6b35; }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--red2), inset 0 -3px 0 0 #7a1f2b; }
.btn.blue { background: var(--blue); color: #fff; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--blue2), inset 0 -3px 0 0 #1d3f6b; }
.btn.plain { background: var(--paper2); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -3px 0 0 #c9b988; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }

/* modal panel */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.scrim { position: absolute; inset: 0; background: rgba(27,20,36,.55); pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: calc(18px + var(--safe-t)) 14px calc(18px + var(--safe-b)); animation: fadein .12s; }
@keyframes fadein { from { opacity: 0; } }
.panel { width: min(100%, 520px); max-height: 100%; display: flex; flex-direction: column; background: var(--paper); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 0 0 0 4px var(--wood), inset 0 0 0 6px var(--wood3), 0 10px 0 0 rgba(0,0,0,.3); animation: pop .14s steps(3); -webkit-user-select: none; user-select: none; }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.panel.wide { width: min(100%, 640px); }
.panel > header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px 18px; }
.panel > header h2 { font-family: 'Silk', monospace; font-size: 18px; margin: 0; flex: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--wood3); }
.panel > header .x { width: 34px; height: 34px; padding: 0; margin: 0; }
.panel > .body { padding: 6px 18px 18px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; user-select: text; -webkit-user-select: text; }
.panel p { margin: 6px 0; }
.panel .muted { color: #6a5a48; font-size: 14px; }
.panel h3 { font-family: 'Silk', monospace; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; margin: 14px 0 6px; color: var(--wood2); }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { row-gap: 2px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.card { background: #fffaf0; padding: 10px 12px; margin: 8px 3px; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.card.flat { box-shadow: 0 -2px 0 0 var(--paper2), 0 2px 0 0 var(--paper2), -2px 0 0 0 var(--paper2), 2px 0 0 0 var(--paper2); }
.tag { font-family: 'Silk', monospace; font-size: 11px; text-transform: uppercase; padding: 3px 6px; color: #fff; display: inline-block; letter-spacing: .5px; }
.tag.easy { background: #2fa3a0; } .tag.medium { background: #c98a1e; } .tag.hard { background: var(--purple); }
.pts { font-family: 'Silk', monospace; color: var(--wood3); }
.sw { width: 30px; height: 30px; border: 0; padding: 0; margin: 4px; cursor: pointer; box-shadow: 0 0 0 3px var(--ink); }
.sw.sel { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold2); }
input.field, textarea.field, select.field { width: 100%; font: inherit; font-size: 16px; padding: 9px 10px; border: 0; background: #fffaf0; color: var(--ink); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--paper2); outline: none; margin: 6px 0; user-select: text; -webkit-user-select: text; border-radius: 0; }
input.field:focus, textarea.field:focus, select.field:focus { background: #fff; box-shadow: 0 -3px 0 0 var(--blue), 0 3px 0 0 var(--blue), -3px 0 0 0 var(--blue), 3px 0 0 0 var(--blue); }
label.l { font-family: 'Silk', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--wood2); display: block; margin-top: 8px; }
.err { color: var(--red); font-weight: 400; min-height: 1.2em; }
.team-dot { display: inline-block; width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--ink); vertical-align: -2px; margin-right: 6px; }
.tabs { display: flex; gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; }
.tabs .btn { margin: 5px 4px; }
.tabs .btn.on { background: var(--green); color: #fff; }
.bar { height: 14px; background: var(--paper2); box-shadow: 0 0 0 2px var(--ink); margin: 6px 2px; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--green2); display: block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 3px; }
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--ink2); image-rendering: auto; box-shadow: 0 0 0 3px var(--ink); }
.photo.big { aspect-ratio: auto; max-height: 52vh; object-fit: contain; width: 100%; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper input { text-align: center; width: 110px; font-size: 22px; font-weight: 400; }
.stepper .btn { font-size: 20px; padding: 6px 14px; }
.rank { font-family: 'Silk', monospace; font-size: 18px; width: 30px; text-align: center; color: var(--wood3); }
.big { font-size: 28px; font-family: 'Silk', monospace; color: var(--wood3); }
.avatar { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.sp { height: 8px; }
.note { background: #fff3c4; padding: 8px 10px; margin: 12px 3px; box-shadow: 0 0 0 3px var(--gold); }
.note.bad { background: #ffe0dc; box-shadow: 0 0 0 3px var(--red2); }
.list > .card { display: flex; gap: 10px; align-items: center; }
#toasts { position: fixed; top: calc(60px + var(--safe-t)); left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 9px 14px; background: var(--paper); font-weight: 400; max-width: min(92vw, 460px); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); animation: toast 3.6s forwards; text-align: center; }
.toast.good { background: #d8f5c4; } .toast.bad { background: #ffd9d4; }
@keyframes toast { 0% { transform: translateY(-14px); opacity: 0; } 8%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.auth { text-align: center; }
.auth .logo { width: 112px; height: 112px; image-rendering: pixelated; margin: 2px auto 0; display: block; }
.auth h1 { font-family: 'Silk', monospace; font-size: 30px; letter-spacing: 3px; margin: 0; color: var(--wood3); text-transform: uppercase; }
.auth .tagline { color: #6a5a48; margin: 2px 0 8px; }
.auth form { text-align: left; }
.auth .swap { background: none; border: 0; text-decoration: underline; color: var(--blue); cursor: pointer; font-size: 15px; padding: 8px; }
.meter { display: flex; gap: 3px; margin: 6px 0; }
.meter i { flex: 1; height: 10px; background: var(--paper2); box-shadow: 0 0 0 2px var(--ink); }
.meter i.on { background: var(--green2); }
.team-card { padding: 10px 12px; margin: 10px 3px; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); background: #fffaf0; cursor: pointer; }
.team-card .top { display: flex; align-items: center; gap: 10px; }
.team-card .name { font-weight: 400; font-size: 18px; flex: 1; }
.team-card .total { font-family: 'Silk', monospace; font-size: 20px; }
.team-card .more { margin-top: 8px; font-size: 14px; color: #4b3a28; }
.team-card.me { background: #fff6cf; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
@media (min-width: 700px) { .scrim { padding: 40px; } body { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .panel, .scrim, .toast { animation: none; } }

body.modal #hint { display: none; }

#phasePill.demo { background: var(--gold2); }

.scrim.bottom { align-items: flex-end; background: transparent; padding-bottom: calc(24px + var(--safe-b)); }
.auth { text-align: left; }

#fishBtn { bottom: calc(52px + var(--safe-b)); left: 50%; transform: translateX(-50%); }
body.modal #fishBtn { display: none; }

#dockBtn { bottom: calc(94px + var(--safe-b)); left: 50%; transform: translateX(-50%); }
body.modal #dockBtn { display: none; }