/* Online seating has two separate steps: choose a seat, then confirm ready. */
.net-seat-button,
.net-ready-button{
  min-width: 108px;
  border-width: 2px;
  color: #fff;
  opacity: 1;
}

.net-seat-button{
  border-color: #60a5fa;
  background: #1d4ed8;
  box-shadow: 0 5px 16px rgba(29, 78, 216, 0.3);
}

.net-seat-button:hover:not(:disabled){
  background: #2563eb;
}

.net-ready-button{
  border-color: #a16207;
  background: #713f12;
  color: #fef3c7;
}

.net-ready-button.is-required{
  border-color: #fde68a;
  background: #d97706;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.24), 0 7px 20px rgba(217, 119, 6, 0.4);
  animation: readyActionPulse 1.6s ease-in-out infinite;
}

.net-ready-button.is-required:hover:not(:disabled){
  background: #f59e0b;
}

.net-ready-button.is-ready{
  border-color: #86efac;
  background: #15803d;
  color: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2), 0 7px 20px rgba(21, 128, 61, 0.34);
  animation: none;
}

.net-ready-button.is-ready:hover:not(:disabled){
  background: #166534;
}

.net-seat-button:disabled,
.net-ready-button:disabled{
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.net-ready-button.is-ready:disabled{
  opacity: 0.9;
}

.sidebar .mini-net-controls .net-seat-button,
.sidebar .mini-net-controls .net-ready-button{
  width: 100%;
  min-width: 0;
}

/* Online mobile previews use only space left below the main touch controls. */


.grid-start-overlay{
  box-sizing: border-box;
  max-width: 100%;
  /* Override the fixed padding/alignment on existing room clients as well. */
  padding: clamp(6px, calc(var(--cell) * 0.35), 12px) !important;
  justify-content: safe center !important;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: clamp(11px, calc(var(--cell) * 0.5), 14px);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}

.grid-start-overlay > div{
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  overflow-wrap: anywhere;
}

/* The last child is the existing Sit/Ready button row. Wrap to one button
   per line when the grid cannot fit both, regardless of viewport width. */
.grid-start-overlay > div:last-child{
  width: 100%;
  max-width: 280px;
  flex-wrap: wrap;
}

.grid-start-overlay .net-seat-button,
.grid-start-overlay .net-ready-button{
  box-sizing: border-box;
  flex: 1 1 108px;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 8px clamp(4px, calc(var(--cell) * 0.35), 14px);
  font-size: inherit;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.grid-start-overlay.needs-ready{
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.68);
}

.grid-start-overlay.is-ready{
  box-shadow: inset 0 0 0 3px rgba(74, 222, 128, 0.58);
}

.grid-start-status{
  max-width: min(26ch, 100%);
  font-weight: 800;
  line-height: 1.3;
}

@keyframes readyActionPulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce){
  .net-ready-button.is-required{
    animation: none;
  }
}

/* Muted, solid-color play buttons */
#startPvpBtn{
  --play-bg: #722b38;
  --play-bg-hover: #843443;
  --play-border: #a44d5c;
  --play-shadow: rgba(86, 23, 34, 0.32);
  --play-shadow-hover: rgba(108, 31, 44, 0.4);
  --play-ring-bright: #ffe4e6;
  --play-ring-color: #d7838f;
  --play-focus: rgba(254, 205, 211, 0.9);
}

#startNetBtn,
#startGuestBtn{
  --play-bg: #274c70;
  --play-bg-hover: #315b82;
  --play-border: #527da4;
  --play-shadow: rgba(24, 61, 94, 0.32);
  --play-shadow-hover: rgba(35, 78, 116, 0.4);
  --play-ring-bright: #e0f2fe;
  --play-ring-color: #7db3dc;
  --play-focus: rgba(186, 230, 253, 0.9);
}

#startCpuBtn{
  --play-bg: #4a612b;
  --play-bg-hover: #5a7435;
  --play-border: #7f9853;
  --play-shadow: rgba(55, 76, 28, 0.34);
  --play-shadow-hover: rgba(72, 96, 37, 0.42);
  --play-ring-bright: #f0fbd8;
  --play-ring-color: #a9c76e;
  --play-focus: rgba(217, 249, 157, 0.9);
}

.start-buttons .btn-primary{
  position: relative;
  isolation: isolate;
  width: min(360px, 100%);
  min-height: 52px;
  padding: 12px 24px;
  font-size: 16px;
  border: 1px solid var(--play-border);
  border-radius: 12px;
  background: var(--play-bg);
  color: #f7faf9;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(48, 4, 11, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 9px 22px var(--play-shadow),
    0 0 0 1px color-mix(in srgb, var(--play-border) 55%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.start-buttons .btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--play-ring-angle, 315deg),
    var(--play-ring-bright) 0deg,
    var(--play-ring-color) 22deg,
    transparent 54deg,
    transparent 360deg
  );
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.start-buttons .btn-primary:hover{
  background: var(--play-bg-hover);
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 12px 28px var(--play-shadow-hover),
    0 0 0 1px color-mix(in srgb, var(--play-border) 70%, transparent);
}

.start-buttons .btn-primary:hover::before{
  opacity: 1;
  animation: playButtonOutline 850ms ease-out 1 forwards;
}

.start-buttons .btn-primary:focus-visible{
  outline: 3px solid var(--play-focus);
  outline-offset: 3px;
}

@keyframes playButtonOutline{
  from{ --play-ring-angle: 315deg; }
  to{ --play-ring-angle: 675deg; }
}

@property --play-ring-angle{
  syntax: "<angle>";
  initial-value: 315deg;
  inherits: false;
}

@media (prefers-reduced-motion: reduce){
  .start-buttons .btn-primary:hover::before{
    animation: none;
  }
}

.hint{
  color: rgba(236, 253, 245, 0.86);
}

.hint-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 6px 16px;
  margin-top: 6px;

  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.9); /* gold border */
  background: radial-gradient(circle at top left,
    rgba(251, 191, 36, 0.25),
    rgba(15, 23, 42, 0.95)
  );

  color: #facc15;                /* bright gold */
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow:
    0 0 10px rgba(251, 191, 36, 0.4),
    0 0 25px rgba(56, 189, 248, 0.25);

  position: relative;
  overflow: hidden;
}

.hint-link::before {
  content: "★";
  font-size: 0.75rem;
  opacity: 0.9;
}

.hint-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent,
    rgba(248, 250, 252, 0.18),
    transparent
  );
  transform: translateX(-120%);
  transition: transform 0.45s ease-out;
}

.hint-link:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 14px rgba(251, 191, 36, 0.7),
    0 0 35px rgba(56, 189, 248, 0.35);
}

.hint-link:hover::after {
  transform: translateX(120%);
}

.hint-link:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    0 0 6px rgba(251, 191, 36, 0.5),
    0 0 16px rgba(56, 189, 248, 0.2);
}


/* Local navigation stays in the header, including on small screens. */
.game-home-button{
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-height: 34px;
  max-width: 46vw;
  padding: 6px 14px;
  border: 1px solid #538b76;
  border-radius: 9px;
  background: #123e30;
  color: #ecfdf5;
  font: 700 0.78rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.game-home-button[hidden]{ display: none; }
.game-home-button:hover{ background: #1e5541; border-color: #9bd9bb; }

/* Match results: a light scrim preserves the finished boards behind the dialog. */
.end-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(110, 231, 183, 0.08), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(34, 211, 238, 0.06), transparent 34%),
    linear-gradient(145deg, rgba(3, 15, 11, 0.28), rgba(2, 20, 14, 0.34));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10000;
  overscroll-behavior: contain;
}

.end-screen::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 16%, rgba(110,231,183,.76) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 68%, rgba(253,224,71,.72) 0 1.5px, transparent 2px),
    radial-gradient(circle at 24% 82%, rgba(34,211,238,.66) 0 1px, transparent 1.5px);
  background-size: 170px 170px, 230px 230px, 290px 290px, 320px 320px;
  opacity: .36;
  animation: endAmbient 8s ease-in-out infinite alternate;
}

.end-card{
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(420px, 100%);
  margin: auto;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(20, 75, 55, 0.97), rgba(8, 35, 27, 0.98));
  border: 1px solid rgba(110, 231, 183, 0.68);
  border-radius: 22px;
  padding: clamp(24px, 5vw, 32px);
  text-align: center;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.58),
    0 0 44px rgba(16,185,129,0.2),
    0 0 18px rgba(34,211,238,0.1),
    inset 0 1px 0 rgba(255,255,255,0.13);
  animation: endPop 320ms cubic-bezier(.2,.9,.25,1.18) forwards;
}

.end-card::before{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #34d399, #22d3ee 42%, #facc15 74%, #fb923c);
  box-shadow: 0 0 22px rgba(34,211,238,.4);
}

.end-card::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  top: -145px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(16,185,129,.25);
  filter: blur(42px);
}

.end-card h2{
  margin: 0;
  color: #f8fafc;
  background: linear-gradient(100deg, #ffffff 8%, #a7f3d0 43%, #67e8f9 70%, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-shadow: 0 0 28px rgba(52,211,153,.24);
}
.end-result{
  margin: 16px 0 0;
  color: #d1fae5;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 750;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.end-buttons {
  display: grid;
  gap: 11px;
  margin-top: 26px;
}
.end-action{
  min-height: 50px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(165,180,252,.62);
  border-radius: 12px;
  font: 800 0.95rem/1.35 system-ui, sans-serif;
  background: rgba(49,46,129,.38);
  color: #eef2ff;
  cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.end-action-primary{
  border-color: rgba(167,243,208,.92);
  background: linear-gradient(105deg, #25b889, #25b8a9 42%, #21b6d0 72%, #5291dc);
  color: #08241b;
  font-size: 1rem;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow:
    0 10px 28px rgba(34,211,238,.2),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.end-action-primary:not(:disabled)::after{
  content: "\21BB";
  display: inline-block;
  margin-left: .55em;
  font-size: 1.12em;
  line-height: 0;
  transition: transform 200ms ease;
}
.end-action-primary:not(:disabled):hover{
  border-color: #d1fae5;
  background: linear-gradient(105deg, #34d399, #2dd4bf 42%, #22d3ee 72%, #60a5fa);
  box-shadow:
    0 13px 34px rgba(34,211,238,.3),
    0 0 22px rgba(52,211,153,.2),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(-2px);
}
.end-action-primary:not(:disabled):hover::after{ transform: rotate(-35deg); }
.end-action-secondary{
  background: linear-gradient(135deg, rgba(49,46,129,.4), rgba(14,116,144,.28));
}
.end-action-secondary:not(:disabled):hover{
  background: linear-gradient(135deg, rgba(67,56,202,.58), rgba(8,145,178,.42));
  border-color: #67e8f9;
  box-shadow: 0 8px 22px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.end-action:disabled{
  cursor: wait;
  background: rgba(51,65,85,.72);
  border-color: rgba(148,163,184,.5);
  color: #cbd5e1;
  box-shadow: none;
}
.end-action:focus-visible,
.game-home-button:focus-visible{
  outline: 3px solid #a5f3fc;
  outline-offset: 4px;
}
@media (max-width: 900px){
  .game-home-button{
    top: 1px;
    min-height: 32px;
    padding: 5px 8px;
    font-size: clamp(0.65rem, 2.5vw, 0.78rem);
  }
  body:not(.net-mode) .arena3 .board-game-title{
    max-width: calc(27vw - 16px);
  }
}
@media (prefers-reduced-motion: reduce){
  .end-card{ animation: none; }
  .end-screen::before{ animation: none; }
  .end-action, .game-home-button{ transition: none; }
  .end-action-primary:not(:disabled)::after{ transition: none; }
}


/* Pop animation */
@keyframes endPop {
  from { transform: translateY(10px) scale(0.96); opacity: 0; }
  to   { transform: scale(1.00); opacity: 1; }
}

@keyframes endAmbient {
  from { transform: translate3d(-4px, -3px, 0); opacity: .46; }
  to   { transform: translate3d(5px, 4px, 0); opacity: .68; }
}

/* High-contrast dropdown for difficulty */
.select-strong{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #0f1720;               /* solid dark */
  color: #ffffff;                     /* bright label */
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 8px 36px 8px 12px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,0.05);
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
  /* custom arrow */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.select-strong:hover{
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 3px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,0.07);
}
.select-strong:focus{
  outline: none;
  border-color: #60a5fa;             /* bright focus ring */
  box-shadow:
    0 0 0 3px rgba(96,165,250,.35),
    0 2px 10px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(255,255,255,0.07);
}

/* Ensure the dropdown list items are readable, esp. on Windows/Chromium */
.select-strong option{
  background: #0b1118;               /* solid dark for the popup menu */
  color: #ffffff;                     /* bright text */
  font-weight: 700;
}

/* Make the tiny label beside it readable too */
label[for="cpuDifficulty"].hint{
  opacity: 1;
  color: #ffffff;
  font-weight: 700;
}
/* Keyboard preferences use a native modal for focus containment and Escape. */
.key-settings {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  margin: auto;
  padding: 20px;
  color: #edf8f2;
  background: #123a2d;
  border: 1px solid #87c5ab;
  border-radius: 12px;
  box-shadow: 0 12px 40px #0008;
}
.key-settings::backdrop { background: #001b14bb; }
.key-settings h2 { margin: 0 0 8px; font-size: 1.3rem; }
.key-settings p { line-height: 1.4; font-size: .85rem; }
.key-settings select, .key-settings button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #87c5ab;
  border-radius: 7px;
  background: #1d5140;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  touch-action: manipulation;
}
.key-settings select { display: block; width: 100%; margin: 5px 0 12px; }
.key-settings button:focus-visible, .key-settings select:focus-visible { outline: 2px solid #ffe66e; outline-offset: 2px; }
.key-setting-row { display: grid; grid-template-columns: 1fr minmax(90px, 45%); gap: 10px; align-items: center; margin: 6px 0; font-size: .9rem; }
.key-setting-row button[aria-pressed="true"] { background: #625412; border-color: #ffe66e; }
#keySettingsStatus { min-height: 2.8em; color: #deeb9b; }
.key-settings-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.key-settings-actions #saveKeysBtn { background: #287653; }