/* Not Battleship pieces, shared by the TV and the phones: the grey case, the blue pegboard
   ocean with a hole in every square, white and red pegs, the boats as grey plastic pieces,
   splashes and bursts, the wordmark and the chart-table surface. Size a board with --cell. */

/* ---- the table: a harbour chart, by day (light) and by night (dark) ---- */
.tbl-battleship {
  --tbl-edge: #04101f; --tbl-rim: #2f5279; --tbl-glow: rgba(110,170,255,.12);
  background:
    radial-gradient(ellipse 65% 55% at 50% 46%, rgba(70,130,210,.18), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cg fill='none' stroke='%237fb0e8' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M-20 60 C 90 20 180 110 300 70 S 520 10 660 70'/%3E%3Cpath d='M-20 150 C 110 110 210 200 330 160 S 540 100 660 170' stroke-dasharray='10 7'/%3E%3Cpath d='M-20 260 C 80 230 200 300 320 262 S 520 210 660 270'/%3E%3Cpath d='M-20 360 C 120 330 230 400 340 362 S 540 320 660 372' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg fill='%2393bfee' fill-opacity='.2' font-family='Georgia,serif' font-size='13' font-style='italic'%3E%3Ctext x='60' y='110'%3E14%3C/text%3E%3Ctext x='250' y='40'%3E9%3C/text%3E%3Ctext x='420' y='130'%3E21%3C/text%3E%3Ctext x='560' y='220'%3E18%3C/text%3E%3Ctext x='130' y='215'%3E27%3C/text%3E%3Ctext x='350' y='320'%3E33%3C/text%3E%3Ctext x='540' y='395'%3E30%3C/text%3E%3Ctext x='70' y='330'%3E24%3C/text%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(150,190,240,.05) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(90deg, rgba(150,190,240,.05) 0 1px, transparent 1px 160px),
    linear-gradient(180deg, #11304f 0%, #0b223c 60%, #07182c 100%);
}
[data-theme="light"] .tbl-battleship {
  --tbl-edge: #8fb3c6; --tbl-rim: #f7f3e6; --tbl-glow: rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 65% 55% at 50% 46%, rgba(255,255,255,.55), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cg fill='none' stroke='%234d8fb8' stroke-opacity='.22' stroke-width='1.4'%3E%3Cpath d='M-20 60 C 90 20 180 110 300 70 S 520 10 660 70'/%3E%3Cpath d='M-20 150 C 110 110 210 200 330 160 S 540 100 660 170' stroke-dasharray='10 7'/%3E%3Cpath d='M-20 260 C 80 230 200 300 320 262 S 520 210 660 270'/%3E%3Cpath d='M-20 360 C 120 330 230 400 340 362 S 540 320 660 372' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg fill='%233f6f8f' fill-opacity='.3' font-family='Georgia,serif' font-size='13' font-style='italic'%3E%3Ctext x='60' y='110'%3E14%3C/text%3E%3Ctext x='250' y='40'%3E9%3C/text%3E%3Ctext x='420' y='130'%3E21%3C/text%3E%3Ctext x='560' y='220'%3E18%3C/text%3E%3Ctext x='130' y='215'%3E27%3C/text%3E%3Ctext x='350' y='320'%3E33%3C/text%3E%3Ctext x='540' y='395'%3E30%3C/text%3E%3Ctext x='70' y='330'%3E24%3C/text%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(60,110,150,.07) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(90deg, rgba(60,110,150,.07) 0 1px, transparent 1px 160px),
    linear-gradient(180deg, #e3f0f2 0%, #d3e7ec 60%, #c6dfe6 100%);
}

/* ---- the grey case and the blue ocean ---- */
.nb-case, .nb-case * { box-sizing: border-box; }
.nb-case {
  --cell: 56px;
  position: relative; flex: none; display: grid; user-select: none; -webkit-user-select: none;
  grid-template-columns: calc(var(--cell) * .56) calc(var(--cell) * 10);
  grid-template-rows: calc(var(--cell) * .5) calc(var(--cell) * 10);
  padding: calc(var(--cell) * .16) calc(var(--cell) * .3) calc(var(--cell) * .3) calc(var(--cell) * .14);
  border-radius: calc(var(--cell) * .34);
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 8%, transparent 92%, rgba(0,0,0,.08)),
    linear-gradient(170deg, #dde0e4 0%, #bcc1c8 40%, #a3a9b1 100%);
  box-shadow: inset 0 calc(var(--cell) * .04) 0 rgba(255,255,255,.75), inset 0 calc(var(--cell) * -.06) 0 rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(0,0,0,.12), 0 calc(var(--cell) * .14) calc(var(--cell) * .5) rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.25);
}
.nb-labels { display: grid; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: calc(var(--cell) * .34); color: #59606a; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.12); line-height: 1; }
.nb-labels span { display: flex; align-items: center; justify-content: center; }
.nb-labels.top { grid-column: 2; grid-row: 1; grid-template-columns: repeat(10, var(--cell)); }
.nb-labels.side { grid-column: 1; grid-row: 2; grid-template-rows: repeat(10, var(--cell)); }
.nb-ocean {
  grid-column: 2; grid-row: 2; position: relative; width: calc(var(--cell) * 10); height: calc(var(--cell) * 10);
  border-radius: calc(var(--cell) * .1); overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 40% 30%, rgba(255,255,255,.12), transparent 70%), linear-gradient(180deg, #2b75c4 0%, #1d5fa8 55%, #174f90 100%);
  box-shadow: inset 0 0 0 calc(var(--cell) * .04) #12477f, inset 0 calc(var(--cell) * .08) calc(var(--cell) * .25) rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6);
}
.nb-grid {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-template-rows: repeat(10, var(--cell));
  background-image: linear-gradient(90deg, rgba(160,205,255,.22) 1px, transparent 1px), linear-gradient(0deg, rgba(160,205,255,.22) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); background-position: -1px -1px;
}
.nb-c { position: relative; display: block; }
.nb-c::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--cell) * .34); height: calc(var(--cell) * .34); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 64%, #061a33 0 46%, #0b2b52 72%, #164a86 100%);
  box-shadow: inset 0 calc(var(--cell) * .04) calc(var(--cell) * .05) rgba(0,0,0,.75), 0 1px 0 rgba(170,215,255,.35);
  transition: box-shadow .15s, transform .15s;
}
.nb-pieces, .nb-pegs, .nb-fx { position: absolute; inset: 0; pointer-events: none; }

/* ---- pegs, seen from above ---- */
.nb-peg { position: absolute; left: calc((var(--c) + .5) * var(--cell)); top: calc((var(--r) + .5) * var(--cell)); width: calc(var(--cell) * .44); height: calc(var(--cell) * .44); transform: translate(-50%, -50%); border-radius: 50%; z-index: 2; }
.nb-peg.w { background: radial-gradient(circle at 36% 30%, #ffffff 0 16%, #f2f2ee 34%, #d6d8dc 70%, #a9aeb6 100%); box-shadow: 0 calc(var(--cell) * .05) calc(var(--cell) * .06) rgba(0,0,0,.5), inset 0 0 0 calc(var(--cell) * .03) rgba(0,0,0,.1), inset 0 calc(var(--cell) * -.03) calc(var(--cell) * .04) rgba(0,0,0,.15); }
.nb-peg.r { background: radial-gradient(circle at 36% 30%, #ffc2bc 0 10%, #f5534b 30%, #d3221c 64%, #8e100c 100%); box-shadow: 0 calc(var(--cell) * .05) calc(var(--cell) * .06) rgba(0,0,0,.55), inset 0 0 0 calc(var(--cell) * .03) rgba(80,0,0,.25), 0 0 calc(var(--cell) * .2) rgba(255,70,50,.35); }
.nb-peg.fresh { animation: nb-drop .55s cubic-bezier(.25,1.5,.5,1) var(--d, 0ms) both; }
@keyframes nb-drop { 0% { transform: translate(-50%, -160%) scale(2.1); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.nb-peg.solo { position: relative; left: auto; top: auto; display: inline-block; vertical-align: middle; transform: none; --cell: 40px; }

/* the gold crosshair where someone is aiming */
.nb-aim { position: absolute; left: calc((var(--c) + .5) * var(--cell)); top: calc((var(--r) + .5) * var(--cell)); width: calc(var(--cell) * 1.02); height: calc(var(--cell) * 1.02); transform: translate(-50%, -50%); z-index: 3; animation: nb-aim 1.2s ease-in-out infinite; }
.nb-aim svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nb-aim circle, .nb-aim path { fill: none; stroke: #ffd60a; stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,214,10,.7)); }
@keyframes nb-aim { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(.86); } }

/* ---- the boats: grey plastic, seen from above ---- */
.nb-piece { position: absolute; left: calc(var(--c) * var(--cell)); top: calc(var(--r) * var(--cell)); width: calc(var(--len) * var(--cell)); height: var(--cell); padding: calc(var(--cell) * .05) calc(var(--cell) * .02); z-index: 1; filter: drop-shadow(0 calc(var(--cell) * .06) calc(var(--cell) * .05) rgba(0,0,20,.45)); }
.nb-piece.v { transform-origin: 0 0; transform: translateX(var(--cell)) rotate(90deg); }
.nb-piece .nb-hull { width: 100%; height: 100%; display: block; }
.nb-hull { overflow: visible; }
.nbh-hull { fill: url(#nb-grey); stroke: #5b616b; stroke-width: 3; }
.nbh-deck { fill: url(#nb-grey-2); stroke: rgba(70,76,86,.35); stroke-width: 2; }
.nbh-top { fill: #d9dce1; stroke: #737a84; stroke-width: 2.4; }
.nbh-funnel { fill: #8a9099; stroke: #5b616b; stroke-width: 2; }
.nbh-pool { fill: #959ca5; }
.nbh-boat { fill: #e6e8eb; stroke: #8d939b; stroke-width: 1.5; }
.nbh-box { fill: #b6bbc2; stroke: #7a818b; stroke-width: 1.6; }
.nbh-box.b { fill: #a1a7af; }
.nbh-win { fill: #6f7680; }
.nbh-tyre { fill: #3d4148; }
.nbh-bitt { fill: #6a7079; }
.nbh-stripe { fill: none; stroke: #8b919a; stroke-width: 4; stroke-linecap: round; }
.nbh-hole { fill: url(#nb-hole); }
.nbh-rim { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2.2; stroke-dasharray: 26 60; stroke-dashoffset: 30; }
.nb-piece.sunk { filter: drop-shadow(0 calc(var(--cell) * .04) calc(var(--cell) * .04) rgba(0,0,20,.4)) saturate(.6) brightness(.78); }
.nb-piece.sunk .nbh-hull { stroke: #7a2a24; }

/* ---- a splash (miss) or a burst (hit) over a square ---- */
.nb-boom { position: absolute; left: calc((var(--c) + .5) * var(--cell)); top: calc((var(--r) + .5) * var(--cell)); width: calc(var(--cell) * 2.4); height: calc(var(--cell) * 2.4); transform: translate(-50%, -50%); z-index: 4; }
.nb-boom i, .nb-boom u { position: absolute; left: 50%; top: 50%; border-radius: 50%; animation-fill-mode: both; }
.nb-boom.miss i { width: 40%; height: 40%; margin: -20% 0 0 -20%; border: calc(var(--cell) * .07) solid rgba(255,255,255,.95); animation: nb-ring .9s ease-out both; }
.nb-boom.miss i:nth-child(2) { animation-duration: 1.2s; border-width: calc(var(--cell) * .045); }
.nb-boom.miss u { width: 30%; height: 30%; margin: -15% 0 0 -15%; background: radial-gradient(circle, #fff 0 30%, rgba(200,235,255,.85) 50%, transparent 72%); animation: nb-flash .5s ease-out both; }
.nb-boom.hit u { width: 100%; height: 100%; margin: -50% 0 0 -50%; background: radial-gradient(circle, #fffbe0 0 12%, #ffd23f 26%, #ff7a1a 44%, rgba(220,40,20,.6) 60%, transparent 72%); animation: nb-flash .7s ease-out both; }
.nb-boom.hit i { width: 14%; height: 14%; margin: -7% 0 0 -7%; background: radial-gradient(circle, #fff3b0, #ff8a1f 60%, transparent 70%); animation: nb-spark .7s ease-out both; }
.nb-boom.hit i:nth-child(1) { --a: 0deg; } .nb-boom.hit i:nth-child(2) { --a: 60deg; } .nb-boom.hit i:nth-child(3) { --a: 120deg; }
.nb-boom.hit i:nth-child(4) { --a: 180deg; } .nb-boom.hit i:nth-child(5) { --a: 240deg; } .nb-boom.hit i:nth-child(6) { --a: 300deg; }
@keyframes nb-ring { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes nb-flash { 0% { transform: scale(.2); opacity: 1; } 60% { opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes nb-spark { 0% { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(calc(var(--cell) * 1.1)) scale(.3); opacity: 0; } }

/* ---- the sea a boat sinks into (big moments on the TV and the phones) ---- */
.nb-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 2; border-radius: 0 0 40px 40px;
  background: radial-gradient(circle at 20px -6px, transparent 0 21px, #2b75c4 22px) 0 0 / 40px 30px repeat-x, linear-gradient(180deg, transparent 0 29px, #2b75c4 29px, #1d5fa8 60%, #174f90 100%);
  animation: nb-swell 1.8s linear infinite; }
.nb-waves::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 8px; background: radial-gradient(ellipse 9px 3px at 20px 4px, rgba(255,255,255,.9), transparent 75%) 0 0 / 40px 8px repeat-x; animation: nb-swell 1.8s linear infinite; }
@keyframes nb-swell { from { background-position: 0 0, 0 0; } to { background-position: 40px 0, 0 0; } }

/* ---- the wordmark: NOT over a stencilled name, navy with a red waterline ---- */
.nb-mark { display: inline-flex; flex-direction: column; align-items: center; line-height: .86; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Impact, sans-serif; text-transform: uppercase; color: #fff; }
.nb-mark small { font-size: .3em; font-weight: 900; letter-spacing: .5em; margin-left: .5em; color: #ffd60a; }
.nb-mark b {
  font-size: 1em; font-weight: 900; letter-spacing: .02em; font-stretch: condensed;
  background: linear-gradient(180deg, #ffffff 0 46%, transparent 46% 53%, #dfe6ef 53% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 #c8231d) drop-shadow(0 .06em .08em rgba(0,0,0,.45));
}
[data-theme="light"] .nb-mark small { color: #c8231d; }
[data-theme="light"] .nb-mark b { background: linear-gradient(180deg, #123a66 0 46%, transparent 46% 53%, #1d4f86 53% 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 .05em 0 #e3342f) drop-shadow(0 .05em .06em rgba(0,40,80,.25)); }