/* Driftwood — the game screen.
 * The illustration and its animations, the tabs and action panel, the
 * side column of condition and stores, and the log. */

/* ---------- art ---------- */

svg.art {
  display: block;
  width: 100%;
  height: auto;
}

#scene {
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  margin: 4px 4px 18px;
}

#scene .loc {
  cursor: pointer;
}

#scene .loc:hover .marker,
#scene .loc:focus .marker {
  fill: var(--ink);
}

#scene .loc.blocked {
  cursor: not-allowed;
}

/* the fire: three rhythms of flicker, rising sparks, drifting smoke */
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 0.7s ease-in-out infinite alternate;
}

.flame.f2 {
  animation-duration: 0.9s;
  animation-delay: -0.3s;
}

.flame.f3 {
  animation-duration: 0.55s;
  animation-delay: -0.15s;
}

@keyframes flicker {
  0% { transform: scale(1, 1) skewX(0deg); }
  50% { transform: scale(0.9, 1.1) skewX(4deg); }
  100% { transform: scale(1.06, 0.93) skewX(-4deg); }
}

.spark {
  animation: rise 1.6s linear infinite;
}

@keyframes rise {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-40px); opacity: 0; }
}

.smoke {
  stroke-dasharray: 3 4;
  animation: drift 6s linear infinite;
}

@keyframes drift {
  to { stroke-dashoffset: -70; }
}

/* the raft riding the swell */
.bob {
  animation: bob 3.5s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes bob {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(3px) rotate(1.5deg); }
}

/* ---------- tabs & panel ---------- */

#tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 14px;
}

#tabs:empty {
  display: none;
}

#tabs button {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 4px 14px;
  cursor: pointer;
  font-family: var(--font-sc);
  letter-spacing: 0.05em;
  margin-bottom: -1px;
}

#tabs button.on {
  border-color: var(--ink);
  background: var(--paper);
}

/* a tab not yet visited is marked with a star */
#tabs button.new::after {
  content: ' \2726';
  font-size: 0.7em;
}

.section h3,
.col-side h3 {
  font-size: 1em;
  letter-spacing: 0.08em;
}

.section h3 {
  margin: 0 0 8px;
  border-bottom: 1px dotted var(--rule);
}

.section {
  margin-bottom: 18px;
}

.section .note {
  font-style: italic;
  color: var(--faint);
  font-size: 0.85em;
  margin: -2px 0 8px;
}

/* ---------- side ---------- */

.col-side h3 {
  margin: 0 0 4px;
  border-bottom: 1px solid var(--ink);
}

.stat {
  margin-bottom: 12px;
}

.meter {
  height: 8px;
  border: 1px solid var(--ink);
  margin-top: 3px;
}

.meter i {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.4s;
}

/* low health is hatched rather than solid */
.meter.low i {
  background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 4px);
}

.rows {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px;
}

.rows li .sub {
  font-style: italic;
  color: var(--faint);
  font-size: 0.8em;
}

/* a resource that just changed flashes */
.rows li.bump {
  animation: bump 0.9s ease;
}

@keyframes bump {
  from { background: var(--shade); }
  to { background: transparent; }
}

/* ---------- log ---------- */

#log p {
  margin: 0 0 0.75em;
  transition: opacity 0.6s;
}

#log p.lore {
  font-style: italic;
}

/* warnings are marked with a dagger */
#log p.warn::before {
  content: '\2020\00a0';
}

/* new lines slide in one at a time; see renderLog */
#log p.arriving {
  animation: log-in 0.6s ease;
}

@keyframes log-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* a divider marking the start of each day */
#log p.day {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sc);
  font-size: 0.85em;
  letter-spacing: 0.1em;
  color: var(--faint);
}

#log p.day::before,
#log p.day::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-motion: reduce) {
  #log p.arriving {
    animation-name: none;
  }
}