/* Clippy2027, level 7: the tug of war.
   Dark space and one canvas; the HTML on top is the tug of war bar, the last
   few lines of trash talk, and the thumb-sized buttons at the bottom.
   Paperclips are silver-blue, staples are orange. */
.war {
  position: absolute; inset: 0; overflow: hidden; background: #05060c;
  --me: #9fdcff; --them: #ff8d3a; --grey: #7d8396;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.war[hidden] { display: none; }
.war-canvas { position: absolute; inset: 0; display: block; }

/* The top: the map, and the tug of war (clear of the stage's bar at the top right). */
.war-top {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: 150px;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 2;
}
.war-map { font-size: 12px; color: #aab0c4; letter-spacing: 0.02em; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-map b { color: #e6e8f0; margin-right: 4px; }
.war-tug { display: flex; align-items: center; gap: 6px; height: 20px; }
.war-side { display: flex; align-items: center; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.war-side b { min-width: 30px; }
.war-side.me { color: var(--me); }
.war-side.them { color: var(--them); }
.war-side.them b { text-align: right; }
.war-side svg { width: 15px; height: 15px; flex: none; }
.war-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--them); overflow: hidden; box-shadow: 0 0 10px rgba(255, 141, 58, 0.35); }
.war-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--me); box-shadow: 0 0 10px rgba(159, 220, 255, 0.6); transition: width 0.4s ease-out; }
.war-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #05060c; }
.war.war-close .war-bar { animation: war-tense 0.9s ease-in-out infinite; }
@keyframes war-tense { 50% { transform: scaleY(1.5); } }

/* The talk: the last two lines, newest at the bottom, two lines of text each.
   Its height is fixed, so the map never moves when someone speaks. */
.war-talk {
  position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 46px); left: 10px; right: 10px; height: 88px;
  margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; font-size: 13px; line-height: 17px;
}
.war-talk li {
  padding: 3px 9px; border-radius: 9px; background: rgba(12, 14, 24, 0.78); border-left: 3px solid var(--grey); color: #dfe2ec; animation: war-say 0.3s ease-out;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: none;
}
.war-talk li.old { opacity: 0.55; }
.war-talk li.bites { border-left-color: var(--them); }
.war-talk li.bites b { color: var(--them); }
.war-talk li.clippy { border-left-color: var(--me); }
.war-talk li.clippy b { color: var(--me); }
.war-talk li.system { border-left-color: #fff; color: #fff; font-style: italic; }
@keyframes war-say { from { transform: translateY(-4px); opacity: 0; } }

/* Between maps. */
.war-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  padding: 14px 22px; border-radius: 14px; background: rgba(8, 10, 18, 0.85); border: 1px solid rgba(159, 220, 255, 0.35);
  text-align: center; display: flex; flex-direction: column; gap: 4px; animation: war-say 0.4s ease-out;
}
.war-banner[hidden] { display: none; }
.war-banner b { font-size: 18px; color: var(--me); }
.war-banner span { font-size: 13px; color: #aab0c4; }

/* The bottom: how much to send, All, and Enough. Thumb sized. */
.war-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 8px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: flex; gap: 8px; align-items: stretch;
  background: linear-gradient(to top, rgba(5, 6, 12, 0.95) 60%, rgba(5, 6, 12, 0));
}
.war-bottom button {
  min-height: 48px; min-width: 0; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: #e6e8f0; box-shadow: none; font: 600 15px/1 system-ui, -apple-system, sans-serif; cursor: pointer;
}
.war-bottom button:focus { outline: none; }
.war-bottom button:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.war-bottom button[aria-pressed="true"] { background: rgba(159, 220, 255, 0.22); border-color: var(--me); color: #fff; }
.war-fracs { flex: 3; display: flex; gap: 6px; }
.war-fracs button { flex: 1; }
.war-all { flex: 1; }
.war-enough { flex: 1.3; color: #ffd9bf !important; border-color: rgba(255, 141, 58, 0.4) !important; }
.war-bottom button:active { background: rgba(255, 255, 255, 0.16); box-shadow: none; }

/* Enough: a sheet over the battle, which holds while it's open. */
.war-sheet { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.war-sheet[hidden] { display: none; }
.war-sheet:focus { outline: none; }
.war-sheet-box {
  width: 100%; max-width: 440px; margin: 0 10px max(10px, env(safe-area-inset-bottom)); padding: 16px;
  background: #11131d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
  display: flex; flex-direction: column; gap: 8px; animation: war-say 0.25s ease-out;
}
.war-sheet h2 { margin: 0; font-size: 20px; color: #fff; }
.war-sheet p { margin: 0 0 4px; color: #aab0c4; font-size: 14px; }
.war-sheet button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-height: 56px; padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #e6e8f0; box-shadow: none; font: inherit; cursor: pointer;
}
.war-sheet button:focus { outline: none; }
.war-sheet button:focus-visible { outline: 2px solid #8ab4ff; }
.war-sheet button:active { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.war-sheet button b { font-size: 16px; }
.war-sheet button span { font-size: 13px; color: #aab0c4; }

@media (min-width: 700px) {
  .war-top { right: 160px; max-width: 560px; }
  .war-talk { left: 50%; right: auto; width: min(560px, calc(100% - 20px)); transform: translateX(-50%); }
  .war-bottom { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); background: none; }
}

/* ---------- the endings' screens ---------- */
.drama.war-drama { background: #05060c; color: #e6e8f0; font: 15px/1.4 system-ui, -apple-system, sans-serif; }
.war-drama .tap { color: #8a90a4; position: relative; z-index: 1; }
.war-drama-text { position: relative; z-index: 1; margin: 18px 0 0; font-size: 26px; font-weight: 700; text-align: center; animation: war-say 1s ease-out both; }
.war-drama-sub { position: relative; z-index: 1; margin: 6px 0 0; color: #aab0c4; text-align: center; animation: war-say 1s 0.8s ease-out both; }

/* The Stack, hugged. */
.war-won .war-orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8f4a1c, #33160a); box-shadow: 0 0 60px rgba(255, 130, 50, 0.6); animation: war-hug 2.4s 0.4s ease-in-out forwards; }
@keyframes war-hug { to { background: radial-gradient(circle at 35% 35%, #3a6c8f, #122638); box-shadow: 0 0 70px rgba(120, 200, 255, 0.7); } }
.war-won .war-orbit { position: relative; width: 230px; height: 230px; display: grid; place-items: center; margin-bottom: 10px; }
.war-won .war-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.war-won .war-ring span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; color: var(--me, #9fdcff); opacity: 0; animation: war-pop 0.4s ease-out forwards; }
.war-won .war-ring svg { width: 18px; height: 18px; }
@keyframes war-pop { to { opacity: 1; } }
.war-won .war-drama-text { color: #9fdcff; }

/* Bitten: staples rain. */
.war-bitten { background: #140803; }
.war-bitten .war-fall { position: absolute; top: -30px; width: 24px; height: 24px; color: #ff8d3a; animation: war-fall 2.6s linear infinite; }
.war-bitten .war-fall svg { width: 24px; height: 24px; }
@keyframes war-fall { to { transform: translateY(110vh) rotate(200deg); } }
.war-bitten .war-drama-text { color: #ff8d3a; text-shadow: 0 0 20px #000; }

/* Truce and merger: the two of them. */
.war-pair { display: flex; gap: 22px; align-items: center; }
.war-pair span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; animation: war-say 1s ease-out both; }
.war-pair span svg { width: 40px; height: 40px; }
.war-pair .me { color: #9fdcff; background: rgba(120, 200, 255, 0.12); box-shadow: 0 0 30px rgba(120, 200, 255, 0.3); }
.war-pair .them { color: #ff8d3a; background: rgba(255, 130, 50, 0.12); box-shadow: 0 0 30px rgba(255, 130, 50, 0.3); animation-delay: 0.4s; }
.war-merger .war-pair.meet .me { animation: war-meet-l 1.6s ease-in forwards; }
.war-merger .war-pair.meet .them { animation: war-meet-r 1.6s ease-in forwards; }
@keyframes war-meet-l { to { transform: translateX(43px) scale(0.3); opacity: 0; } }
@keyframes war-meet-r { to { transform: translateX(-43px) scale(0.3); opacity: 0; } }
.war-merger .war-binder { width: 90px; height: 90px; margin-top: -64px; opacity: 0; animation: war-binder 1s 1.4s ease-out forwards; }
@keyframes war-binder { from { transform: scale(0.3); } to { transform: scale(1); opacity: 1; } }