@font-face { font-family: KFuture; src: url(/fonts/kenney-future.ttf) format("truetype"); font-display: block; }
@font-face { font-family: SG; src: url(/fonts/sg-500.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: SG; src: url(/fonts/sg-700.woff2) format("woff2"); font-weight: 700; }

/* the game's own pair: lagoon teal field, hot pink action, ink edges */
:root { --ink: #0d2236; --field: #0aa39a; --field2: #06615c; --field3: #087f78; --act: #ff2e88; --act2: #c4005e; --sun: #ffe14d; --me: #ff2e88; --medark: #9e0b50; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: SG, system-ui, sans-serif; color: var(--ink); background: var(--field); -webkit-tap-highlight-color: transparent; overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

/* square-shouldered buttons with an ink edge and a drop that squishes on press */
.btn { font-family: SG, sans-serif; font-weight: 700; font-size: 18px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
  padding: 12px 22px; box-shadow: 0 5px 0 var(--ink); cursor: pointer; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { font-size: 24px; padding: 16px 26px; width: 100%; }
.btn.go { background: var(--act); color: #fff; }
.btn:focus { outline: 4px solid var(--sun); outline-offset: 2px; }
.linkish { background: none; border: 0; color: #fff; text-decoration: underline; font-weight: 700; font-size: 15px; padding: 6px 0; cursor: pointer; }

.wordmark { display: block; height: auto; }

/* a seat's chip: the tank colour with its hull pattern, so colour never carries it alone */
.chip { display: inline-block; width: 1.4em; height: 1.4em; border-radius: 0.3em; background: var(--c, var(--me)); border: 0.14em solid var(--ink); flex: none; position: relative; overflow: hidden; }
.chip::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.chip[data-pattern="stripes"]::after { background: repeating-linear-gradient(45deg, rgba(13,34,54,.55) 0 0.12em, transparent 0.12em 0.32em); }
.chip[data-pattern="dots"]::after { background: radial-gradient(circle, rgba(13,34,54,.6) 0.1em, transparent 0.12em) 0 0 / 0.42em 0.42em; }
.chip[data-pattern="chevron"]::after { background: linear-gradient(135deg, transparent 40%, rgba(13,34,54,.6) 40% 60%, transparent 60%); }
.chip[data-pattern="ring"]::after { background: radial-gradient(circle, transparent 0.2em, rgba(13,34,54,.6) 0.22em 0.34em, transparent 0.36em); }
.chip[data-pattern="cross"]::after { background: linear-gradient(rgba(13,34,54,.6), rgba(13,34,54,.6)) center / 0.2em 100% no-repeat, linear-gradient(rgba(13,34,54,.6), rgba(13,34,54,.6)) center / 100% 0.2em no-repeat; }
.chip[data-pattern="zigzag"]::after { background: linear-gradient(135deg, rgba(13,34,54,.55) 25%, transparent 25%) -0.2em 0 / 0.4em 0.4em, linear-gradient(225deg, rgba(13,34,54,.55) 25%, transparent 25%) -0.2em 0 / 0.4em 0.4em; }
.chip[data-pattern="star"]::after { background: radial-gradient(circle, rgba(13,34,54,.65) 0.2em, transparent 0.22em); }

.wins { display: inline-flex; }
.wins i { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; border: 0.12em solid var(--ink); background: rgba(255,255,255,.35); margin-left: 0.2em; }
.wins i.on { background: var(--sun); }

/* the Options panel (?tweaks): a folded pill bottom-left */
.tweaks { position: fixed; left: 12px; bottom: 12px; z-index: 30; font-size: 13px; }
.tweaks .pill { background: var(--ink); color: #fff; border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.tweaks .panel { margin-bottom: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; position: absolute; bottom: 100%; left: 0; min-width: 320px; }
.tweaks .r { display: flex; align-items: center; flex-wrap: wrap; margin: 3px 0; }
.tweaks .r span { min-width: 130px; font-weight: 700; }
.tweaks .r button { margin: 0 4px 0 0; border: 2px solid var(--ink); background: #fff; border-radius: 8px; padding: 3px 8px; cursor: pointer; }
.tweaks .r button.on { background: var(--act); color: #fff; }
.netmark { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20; background: var(--ink); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 99px; opacity: 0.85; }