/* Four in a Row — page styles.
   Colour identity: indigo/violet page accent over the classic deep
   blue frame; discs are red (Player 1) vs warm yellow (Player 2) and
   carry a printed 1 / 2 mark so colour is never the only clue.
   All animation is transform/opacity only and flattens fully under
   Lite mode and prefers-reduced-motion. */

.four-variant-status{
  text-align:center;margin:10px auto 0;max-width:640px;padding:8px 14px;
  border-radius:999px;border:1px solid rgba(129,140,248,.5);
  background:rgba(99,102,241,.14);color:var(--text);font-weight:700;font-size:.9rem;
}
#difficulty-group[hidden],#difficulty-help[hidden]{display:none!important}
.difficulty-help{
  text-align:center;margin:10px auto 0;max-width:640px;color:var(--muted);
  font-size:.9rem;line-height:1.5;
}
.hidden{display:none!important}

.four-stage{
  position:relative;max-width:520px;margin:0 auto;padding:16px 14px 14px;
  border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 60%);
  box-shadow:var(--shadow);
}

/* ---- preview strip (the disc you are about to drop) ---- */
.four-preview{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  height:44px;margin-bottom:6px;padding:0 8px;
}
.four-preview-slot{display:grid;place-items:center}
.four-preview-disc{
  width:78%;aspect-ratio:1/1;border-radius:50%;opacity:0;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease;pointer-events:none;
  display:grid;place-items:center;
}
/* score-card disc chips: whose colour/number is whose, at a glance */
.four-chip{
  display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;
  font-weight:900;font-size:.8em;line-height:1;vertical-align:-.32em;margin-right:.4em;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.4);
}
.four-chip.p1{background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 62%,#991b1b);color:#fff}
.four-chip.p2{background:radial-gradient(circle at 35% 30%,#fef08a,#facc15 62%,#a16207);color:#713f12}
.four-preview-disc.show{opacity:1;transform:translateY(0)}
.four-preview-disc.p1{background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 62%,#991b1b)}
.four-preview-disc.p2{background:radial-gradient(circle at 35% 30%,#fef08a,#facc15 62%,#a16207)}

/* ---- the board ---- */
.four-board{
  position:relative;display:grid;grid-template-columns:repeat(7,1fr);
  gap:6px;padding:10px;border-radius:16px;
  background:linear-gradient(165deg,#1d4ed8,#1e3a8a 55%,#172554);
  box-shadow:inset 0 2px 10px rgba(255,255,255,.18),inset 0 -8px 18px rgba(0,0,0,.35),var(--shadow);
  touch-action:manipulation;
}
.four-cell{
  position:relative;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#0b1530 58%,#12275e 78%,#1e40af);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.65),inset 0 -2px 3px rgba(255,255,255,.12);
}
.four-disc{
  position:absolute;inset:6%;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:inset 0 -4px 7px rgba(0,0,0,.28),inset 0 3px 5px rgba(255,255,255,.4),0 2px 5px rgba(0,0,0,.4);
}
.four-disc.p1{background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 62%,#991b1b)}
.four-disc.p2{background:radial-gradient(circle at 35% 30%,#fef08a,#facc15 62%,#a16207)}
.four-disc-mark{
  font-weight:900;font-size:clamp(.8rem,4.4vw,1.25rem);line-height:1;
  width:58%;height:58%;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.p1 .four-disc-mark{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.p2 .four-disc-mark{color:#713f12;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.four-ghost{opacity:.45;box-shadow:none;pointer-events:none}
.four-disc.last-disc{box-shadow:inset 0 -4px 7px rgba(0,0,0,.28),inset 0 3px 5px rgba(255,255,255,.4),0 0 0 3px rgba(255,255,255,.85),0 2px 5px rgba(0,0,0,.4)}
.four-disc.win-disc{animation:fourWinPulse .8s ease-in-out infinite alternate;z-index:2}
@keyframes fourWinPulse{
  from{box-shadow:inset 0 -4px 7px rgba(0,0,0,.28),0 0 0 2px rgba(255,255,255,.75),0 0 8px rgba(165,180,252,.7)}
  to{box-shadow:inset 0 -4px 7px rgba(0,0,0,.28),0 0 0 3px #fff,0 0 20px rgba(165,180,252,1)}
}
/* drop animation: --fall is the distance in cells, set by four.js */
.four-disc.dropping{animation-name:fourDrop;animation-timing-function:cubic-bezier(.55,.06,.75,.5);animation-fill-mode:both;z-index:3}
@keyframes fourDrop{
  0%{transform:translateY(calc(var(--fall,1) * -100%))}
  62%{transform:translateY(0)}
  78%{transform:translateY(-7%)}
  90%{transform:translateY(0)}
  96%{transform:translateY(-2.5%)}
  100%{transform:translateY(0)}
}

/* ---- win strike line ---- */
.four-winline{
  position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  pointer-events:none;opacity:0;z-index:4;overflow:visible;
}
.four-winline.show{opacity:1}
.four-winline-line{
  stroke:#fff;stroke-width:.14;stroke-linecap:round;
  filter:drop-shadow(0 0 .09px rgba(255,255,255,.9)) drop-shadow(0 0 4px rgba(129,140,248,.95));
  stroke-dasharray:12;stroke-dashoffset:12;
}
.four-winline.show .four-winline-line{animation:fourLineDraw .45s ease forwards}
@keyframes fourLineDraw{to{stroke-dashoffset:0}}

/* ---- column tap zones ---- */
.four-cols{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);
  z-index:5;
}
.four-col-zone{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;margin:0;
  border-radius:10px;touch-action:manipulation;
}
.four-col-zone.aimed{background:rgba(129,140,248,.20);box-shadow:inset 0 0 0 2px rgba(199,210,254,.65)}
@media (hover:hover) and (pointer:fine){
  .four-col-zone:hover{background:rgba(129,140,248,.16)}
  .four-col-zone:focus-visible{background:rgba(129,140,248,.16);outline:none;box-shadow:inset 0 0 0 2px rgba(199,210,254,.8)}
}

/* ---- touch drop button + pass handoff ---- */
.four-drop-btn{
  display:block;width:100%;margin-top:12px;padding:13px 16px;
  border:0;border-radius:14px;cursor:pointer;
  font:inherit;font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(160deg,#818cf8,#6366f1 55%,#4338ca);
  box-shadow:0 8px 20px rgba(99,102,241,.45),0 0 0 2px rgba(199,210,254,.55);
}
.four-drop-btn.hidden{display:none!important}
.four-pass{
  position:absolute;inset:0;z-index:8;display:grid;place-content:center;gap:8px;
  text-align:center;padding:20px;border-radius:20px;
  background:rgba(8,6,20,.78);backdrop-filter:blur(3px);
}
.four-pass.hidden{display:none!important}
.four-pass h2{margin:0;color:#eef2ff}
.four-pass p{margin:0;color:#c7d2fe}

/* ---- Lite / reduced motion flatten ---- */
html[data-experience="lite"] .four-disc.dropping,
html[data-experience="lite"] .four-disc.win-disc,
html[data-experience="lite"] .four-drop-btn{animation:none!important}
html[data-experience="lite"] .four-winline.show .four-winline-line{animation:none!important;stroke-dashoffset:0}
html[data-experience="lite"] .four-preview-disc{transition:none}
@media (prefers-reduced-motion:reduce){
  .four-disc.dropping,.four-disc.win-disc,.four-drop-btn{animation:none!important}
  .four-winline.show .four-winline-line{animation:none!important;stroke-dashoffset:0}
  .four-preview-disc{transition:none}
}

@media (max-width:480px){
  .four-stage{padding:12px 10px 10px}
  .four-board{gap:4px;padding:8px}
  .four-preview{height:36px;padding:0 6px;gap:4px}
  .four-winline{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
}