:root {
  --bg: #2b2b28;
  --panel: #3b3b37;
  --line: #57574f;
  --text: #e8e4d8;
  --accent: #ff9f1c;
  --hit: #4c8c3f;
  --near: #b8860b;
  --miss: #4a4a44;
  --cols: 1.6fr 1fr 2.2fr 0.5fr 0.7fr 0.7fr 1.1fr;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1rem;
  max-width: 60rem;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
}

header { text-align: center; }

#lang {
  float: right;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

h1 {
  margin: .4rem 0 0;
  letter-spacing: .3rem;
  color: var(--accent);
  font-size: clamp(1.8rem, 7vw, 3rem);
}

#sub { margin: .2rem 0 1rem; opacity: .7; }

form { display: flex; gap: .5rem; margin-bottom: 1rem; }

input, button {
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

input { flex: 1; min-width: 0; }
input:focus { outline: 2px solid var(--accent); }

button {
  background: var(--accent);
  color: #1e1e1c;
  font-weight: 700;
  cursor: pointer;
}

button:hover { filter: brightness(1.1); }

#board-wrap { overflow-x: auto; }

.row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 4px;
  min-width: 42rem;
  margin-bottom: 4px;
}

.row span {
  padding: .5rem .4rem;
  border-radius: 3px;
  background: var(--miss);
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.head span {
  background: none;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.row .name { background: var(--panel); font-weight: 600; }
.hit { background: var(--hit) !important; }
.near { background: var(--near) !important; }
.miss { background: var(--miss) !important; }

.row .ing em { font-style: normal; color: #fff; text-decoration: underline; }

@keyframes pop { from { transform: scale(.9); opacity: 0 } }
.row span { animation: pop .18s ease-out backwards; }

#msg { min-height: 1.5rem; text-align: center; font-weight: 700; color: var(--accent); }

#end { display: flex; gap: .5rem; justify-content: center; }

details { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: .8rem; }
summary { cursor: pointer; color: var(--accent); }
details b { padding: 0 .3rem; border-radius: 3px; }

footer { margin-top: 2rem; text-align: center; opacity: .5; font-size: .8rem; }
footer a { color: inherit; }