/* Surrender flag and fantasy confirmation, shared by desktop and mobile. */
body.in-game #surrenderBtn {
  box-sizing: border-box;
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  bottom: auto;
  z-index: 2001;
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  max-height: 46px;
  margin: 0;
  flex: none;
  padding: 8px;
  border: 1px solid #98703a;
  border-radius: 9px;
  background: linear-gradient(145deg, #292017, #100d0a);
  box-shadow: inset 0 0 0 2px #46331b, 0 4px 15px #0009;
  cursor: pointer;
}
#surrenderBtn svg { display: block; width: 100%; height: 100%; }
#surrenderBtn .flag-pole { fill: none; stroke: #e2c485; stroke-width: 2; stroke-linecap: round; }
#surrenderBtn .flag-cloth { fill: #cc2835; stroke: #ff6570; stroke-width: 1; }

/* Keep the flag near the canvas edge on landscape phones and the APK. */
@media (pointer: coarse) and (max-width: 1366px) and (orientation: landscape) {
  body.in-game #surrenderBtn {
    left: calc(4px / var(--mobile-game-scale, 1)) !important;
  }
}
@media (max-width: 1366px) and (orientation: landscape) {
  html.native-app-shell body.in-game #surrenderBtn {
    left: calc(4px / var(--mobile-game-scale, 1)) !important;
    translate: 0 0 !important;
  }
}

#surrenderBtn:hover { filter: brightness(1.2); }
#surrenderBtn:focus-visible { outline: 2px solid #f4d48e; outline-offset: 3px; }
.surrender-confirm-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px;
  overflow: auto;
  text-align: center;
  color: #ead7ac;
  border: 2px solid #b18b49;
  border-radius: 14px;
  background: radial-gradient(ellipse at top, #443019 0, #21180f 48%, #100d09 100%);
  box-shadow: inset 0 0 0 3px #181109, inset 0 0 0 4px #725429, 0 20px 70px #000b;
}
.surrender-confirm-dialog::backdrop { background: #080604cc; backdrop-filter: blur(5px); }
.surrender-confirm-emblem { color: #e33c47; font-size: 42px; line-height: 1; text-shadow: 0 2px 12px #a21a26aa; }
.surrender-confirm-dialog h2 { margin: 15px 0 10px; color: #f3d38e; font-family: Georgia, serif; font-size: 1.65rem; }
.surrender-confirm-dialog p { margin: 0 0 24px; line-height: 1.5; }
.surrender-confirm-actions { display: flex; gap: 12px; }
.surrender-confirm-actions button { flex: 1; min-height: 46px; padding: 10px 14px; border-radius: 7px; font-weight: 700; cursor: pointer; }
.surrender-confirm-yes { color: #fff1e5; border: 1px solid #e16a61; background: linear-gradient(#a92b35, #68151f); box-shadow: inset 0 1px #f98c6740; }
.surrender-confirm-no { color: #e5c780; border: 1px solid #96723b; background: linear-gradient(#49361b, #231a0e); box-shadow: inset 0 1px #d3b16d30; }
.surrender-confirm-actions button:hover { filter: brightness(1.18); }
.surrender-confirm-actions button:focus-visible { outline: 2px solid #f4d48e; outline-offset: 3px; }

.redraw-confirm-dialog {
  border-color: #b68a4d;
  background: radial-gradient(ellipse at top, #352039, #18111e 55%, #0c090e);
  box-shadow: inset 0 0 0 3px #100b14, inset 0 0 0 4px #725429, 0 20px 70px #000c;
}
.redraw-confirm-emblem { color: #e6bd71; font-size: 42px; text-shadow: 0 0 22px #ae68ce99; }
.redraw-confirm-dialog .surrender-confirm-yes {
  color: #ffe7ae;
  border-color: #b68a4d;
  background: linear-gradient(#593660, #29182f);
}
.deck-pile.redraw-available { cursor: pointer; touch-action: manipulation; }
.deck-pile.redraw-available .pile-art { border-color: #c39a55; box-shadow: 0 0 12px #b68a4d80; }
.deck-pile.redraw-available:hover .pile-art { filter: brightness(1.15); }
.deck-pile.redraw-available:focus-visible { outline: 2px solid #f4d48e; outline-offset: 4px; border-radius: 6px; }

.surrender-draw { display: block; width: 100%; margin-top: 12px; min-height: 46px; border: 1px solid #96723b; border-radius: 7px; color: #e5c780; background: #231a0e; font-weight: 700; cursor: pointer; }
.surrender-draw:disabled { opacity: .5; cursor: default; }