/* =====================================================================
   Fable 5.2 edition, round 2: roster stage, Discord Kittens card,
   Google Calendar request, and extra showpiece effects.
   ===================================================================== */

/* ---------- Discord Kittens team card ---------- */
.competitive-showcase .team-kittens { --team-accent:#f3a6e4; --team-tint:#6a2c7a; }
.team-kittens .team-banner { background:radial-gradient(120% 140% at 12% 20%,#8a3d9c 0%,#4b1d5a 45%,#131d28 100%); }
.team-kittens .team-logo { position:absolute; left:20px; top:50%; height:128px; width:auto; translate:0 -50%; filter:drop-shadow(0 6px 14px #0008); z-index:2; }
.team-kittens .team-logo-ghost { position:absolute; right:-34px; top:-30px; height:250px; width:auto; opacity:.12; rotate:-10deg; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .team-kittens .team-logo, .team-kittens .team-logo-ghost { transition:translate .4s cubic-bezier(.16,1,.3,1), rotate .5s cubic-bezier(.16,1,.3,1), scale .4s cubic-bezier(.16,1,.3,1); }
  .team-kittens:hover .team-logo { scale:1.07; translate:4px -50%; }
  .team-kittens:hover .team-logo-ghost { rotate:-4deg; scale:1.06; }
}
@media (min-width:1200px) { .competitive-showcase .experience-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:769px) and (max-width:1199px) { .competitive-showcase .experience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Roster (agent select layout) ---------- */
.tone-plum { --tone:#5a1f50; } .tone-teal { --tone:#067f81; } .tone-olive { --tone:#44471f; } .tone-charcoal { --tone:#34323a; } .tone-wine { --tone:#5c1622; } .tone-navy { --tone:#1d2157; }
.roster { width:100%; margin-top:34px; display:grid; gap:22px; }
.roster-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-content:start; }
.roster-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; aspect-ratio:1 / 1.08; padding:16px 8px 12px; border:1px solid #3b4b59; background:linear-gradient(150deg,#090c10 10%,var(--tone,#123d3b) 130%); color:#fff; cursor:pointer; overflow:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); transition:border-color .18s, filter .18s, translate .25s cubic-bezier(.16,1,.3,1); }
.roster-tile img, .roster-initial { width:58%; aspect-ratio:1; height:auto; border-radius:50%; object-fit:cover; background:#111; box-shadow:0 8px 22px #0006; }
.roster-initial { display:grid; place-items:center; font:600 44px/1 var(--font-display); color:#f1eee8; background:#22313f; }
.roster-ign { font:700 15px/1.1 var(--font-body); letter-spacing:-.01em; text-align:center; }
.roster-country { font:12px var(--font-body); color:#d9d3dc; }
.roster-number { position:absolute; top:8px; left:10px; font:12px var(--font-mono); color:#ffffffb0; letter-spacing:.08em; }
.roster-tile:hover { border-color:#8fa3b4; translate:0 -3px; }
.roster-tile:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.roster-tile[aria-pressed="true"] { border-color:var(--red); filter:none; box-shadow:inset 0 -4px 0 var(--red); }
.roster.is-live .roster-tile:not([aria-pressed="true"]) { filter:saturate(.75) brightness(.82); }
.roster.is-live .roster-tile:not([aria-pressed="true"]):hover { filter:none; }
/* Stage */
.roster-stage { position:relative; min-height:470px; overflow:hidden; border:1px solid #3b4b59; background:linear-gradient(155deg,#07090c 0%,var(--tone,#123d3b) 150%); isolation:isolate; clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); }
.roster-stage::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(135deg,transparent 0 26px,#ffffff08 27px,transparent 28px); }
.stage-photo { position:absolute; left:50%; top:0; height:100%; width:auto; max-width:100%; translate:-50% 0; object-fit:cover; -webkit-mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%), linear-gradient(0deg,transparent 0,#000 24%); -webkit-mask-composite:source-in; mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%), linear-gradient(0deg,transparent 0,#000 24%); mask-composite:intersect; }
.stage-round { position:absolute; left:50%; top:50%; width:min(260px,42%); aspect-ratio:1; translate:-50% -58%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #0b141b, 0 0 0 5px var(--red), 0 18px 50px #0009; }
.roster-stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,#07090ce6 0%,#07090c66 28%,transparent 52%); }
.stage-round.roster-initial { font-size:110px; }
.stage-big { position:absolute; right:-10px; bottom:-46px; z-index:-1; font:700 300px/1 var(--font-display); color:transparent; -webkit-text-stroke:1px #ffffff26; letter-spacing:-.02em; pointer-events:none; }
.stage-info { position:absolute; left:28px; bottom:30px; right:28px; z-index:2; }
.stage-info small { display:block; font:12px var(--font-mono); letter-spacing:.2em; color:var(--teal); margin-bottom:12px; }
.stage-info h3 { margin:0; font:700 clamp(42px,5.2vw,78px)/.9 var(--font-display); letter-spacing:.01em; color:#fff; text-shadow:0 4px 30px #000a; overflow-wrap:anywhere; }
.stage-info p { margin:12px 0 0; font:14px var(--font-body); color:#e1dbe3; }
.stage-nav { position:absolute; left:28px; top:24px; z-index:3; display:flex; gap:8px; align-items:center; }
.stage-nav button { width:44px; height:44px; background:#0b141bcc; border:1px solid #526171; color:#fff; font:18px var(--font-body); cursor:pointer; border-radius:3px; }
.stage-nav button:hover { border-color:var(--red); color:var(--red); }
.stage-nav span { font:12px var(--font-mono); letter-spacing:.14em; color:#ced6de; margin-left:8px; }
.stage-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--red); transform-origin:left; transform:scaleX(0); z-index:3; }
@media (min-width:1000px) { .roster.is-live { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; } .roster.is-live .roster-grid { grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); } .roster-stage { min-height:clamp(520px,34vw,700px); } }
@media (max-width:999px) {
  .roster.is-live .roster-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin-inline:-5vw; padding-inline:5vw; }
  .roster.is-live .roster-grid li { flex:0 0 132px; scroll-snap-align:start; }
  .roster-stage { min-height:420px; }
  .stage-info { right:20px; left:20px; bottom:24px; }
  .stage-nav { left:20px; top:18px; }
  .stage-big { font-size:210px; }
}

/* ---------- Google Calendar request ---------- */
.ux-cal { margin-top:16px; padding-top:16px; border-top:1px dashed #526171; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.ux-cal label { display:flex; flex-direction:column; gap:6px; font:12px var(--font-mono); letter-spacing:.1em; color:#acb8c5; text-transform:uppercase; }
.ux-cal input { min-height:44px; padding:8px 12px; background:#0d141c; color:#f1eee8; border:1px solid #526171; border-radius:3px; font:15px var(--font-body); color-scheme:dark; width:100%; box-sizing:border-box; }
.ux-cal input:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.ux-cal .btn-card { min-height:44px; white-space:nowrap; }
.ux-cal p { grid-column:1 / -1; margin:0; font:12px/1.5 var(--font-mono); color:#acb8c5; }
.ux-slots { display:inline-flex; margin-top:12px; }
@media (max-width:520px) { .ux-cal { grid-template-columns:1fr; } }

/* ---------- Showpiece effects (motion layer only) ---------- */
html.fx main > section { overflow-x:clip; }
.fx-num { position:absolute; right:var(--page-gutter); top:34px; z-index:0; contain:layout paint; font:700 clamp(150px,21vw,330px)/.8 var(--font-display); color:transparent; -webkit-text-stroke:1px #ffffff14; pointer-events:none; user-select:none; translate:0 calc(var(--p,0)*-90px); }
@media (max-width:768px) { .fx-num { font-size:44vw; top:10px; right:2%; -webkit-text-stroke-color:#ffffff0e; } }
.fx-spot { position:fixed; left:0; top:0; z-index:0; width:560px; height:560px; margin:-280px 0 0 -280px; pointer-events:none; opacity:0; transition:opacity .5s; border-radius:50%; background:radial-gradient(circle,#ff46551f,transparent 65%); }
.fx-spot.on { opacity:1; }
.fx-hud i { position:absolute; width:26px; height:26px; border:2px solid #ffffff55; z-index:3; pointer-events:none; opacity:0; }
.fx-hero-go .fx-hud i { animation:fxHud .7s 1.5s cubic-bezier(.16,1,.3,1) both; }
.fx-hud i:nth-child(1) { left:22px; top:22px; border-right:0; border-bottom:0; }
.fx-hud i:nth-child(2) { right:22px; top:22px; border-left:0; border-bottom:0; }
.fx-hud i:nth-child(3) { left:22px; bottom:22px; border-right:0; border-top:0; }
.fx-hud i:nth-child(4) { right:22px; bottom:22px; border-left:0; border-top:0; }
@keyframes fxHud { from { opacity:0; scale:2.4; } to { opacity:1; scale:1; } }
.fx-scan { position:absolute; left:0; right:0; top:0; height:120px; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent,#ff465522 70%,#ffd9dd66 98%,transparent); opacity:0; }
.fx-hero-go .fx-scan { animation:fxScan 1.5s 1.1s cubic-bezier(.5,0,.5,1) both; }
@keyframes fxScan { 0% { opacity:1; translate:0 -120px; } 100% { opacity:0; translate:0 760px; } }
.fx-confetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }

/* ---------- Team logos: Arvithar Aeloria and Dominari ---------- */
.has-logo .team-logo { position:absolute; left:22px; top:12px; height:104px; width:auto; z-index:2; filter:drop-shadow(0 6px 14px #0009); }
.has-logo .team-logo-ghost { position:absolute; right:-30px; top:-34px; height:240px; width:auto; opacity:.1; rotate:-8deg; }
.team-dominari.has-logo .team-logo { height:112px; top:8px; }
.team-dominari.has-logo .team-banner { background:radial-gradient(120% 140% at 12% 20%,#5a4320 0%,#3a1c22 50%,#131d28 100%); }
.team-aeloria.has-logo .team-banner { background:radial-gradient(120% 140% at 12% 20%,#6a3a66 0%,#3a2350 50%,#131d28 100%); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .has-logo .team-logo, .has-logo .team-logo-ghost { transition:translate .4s cubic-bezier(.16,1,.3,1), rotate .5s cubic-bezier(.16,1,.3,1), scale .4s cubic-bezier(.16,1,.3,1); }
  .has-logo:hover .team-logo { scale:1.07; translate:4px 0; }
  .has-logo:hover .team-logo-ghost { rotate:-3deg; scale:1.06; }
}

/* =====================================================================
   Shape system: Valorant style angled cuts instead of plain rectangles.
   Panels: top right and bottom left corners cut. Controls: one small cut.
   People stay round.
   ===================================================================== */
:root { --cut:22px; --cut-s:10px; }
.coaching-lab .service-card, .competitive-showcase .experience-card, .testimonial-card, .about-card, .champ-card,
.book-container, .ux-builder, .settings-grid, .coaching-lab .session-guide, .scope-grid > article, .contact-details,
.gallery-showcase .gallery-main, .equipment-mobile-list li, #player-viewer, #championship-viewer {
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.competitive-showcase .team-banner { border-radius:0; }
/* A short accent line that follows each cut corner, so the cut reads as a design choice. */
.competitive-showcase .experience-card, .testimonial-card, .about-card, .champ-card, .book-container, .scope-grid > article {
  background-image:linear-gradient(to top right, transparent calc(50% - 1px), var(--cut-line,#ff465599) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to top right, transparent calc(50% - 1px), var(--cut-line,#ff465599) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--panel-bg, linear-gradient(145deg,#1c2936,#111a24));
  background-size:var(--cut) var(--cut), var(--cut) var(--cut), 100% 100%;
  background-position:top right, bottom left, 0 0;
  background-repeat:no-repeat;
}
.competitive-showcase .experience-card { --cut-line:var(--team-accent); }
.testimonial-card { --cut-line:#9de2d5aa; }
.champ-card { --cut-line:#e9ca8dcc; --panel-bg:linear-gradient(145deg,#1b1f24,#12161b); }
.scope-grid > article { --panel-bg:linear-gradient(145deg,#141f2a,#101923); }
.book-container { --panel-bg:linear-gradient(145deg,#141f2a,#0f1821); }
/* Controls: one small cut at the bottom right. */
.btn-card, .coaching-lab .session-link, .feedback-evidence .more-feedback summary, .music-controller, #back-to-top,
.gallery-showcase .gallery-nav-btn, .picture-close, .tactical-controls button, .stage-nav button, .social-btn, .btn-discord,
.book-badge, .championship-showcase .champ-tag, .orbit-pause, .equipment-list-toggle, .ux-close, .ux-menu-btn,
.tactical-roster > span, .ux-fields select, .ux-fields input, .ux-cal input, .ux-preview {
  border-radius:0;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%);
}
/* Your photo: same cut as the panels. */
.avatar-container { border-radius:0; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.avatar-container img { filter:none; }
@media (max-width:600px) { :root { --cut:16px; } }

/* ---------- Stellaris Borealis and Lysera ---------- */
.competitive-showcase .team-stellar { --team-accent:#ff8fc6; --team-tint:#7a2a55; }
.competitive-showcase .team-lysera { --team-accent:#ff2e7e; --team-tint:#6a1238; }
.team-stellar.has-logo .team-banner { background:radial-gradient(120% 140% at 12% 20%,#8a3566 0%,#4a1d3c 50%,#131d28 100%); }
.team-lysera.has-logo .team-banner { background:radial-gradient(120% 140% at 12% 20%,#7a1440 0%,#3a0f24 50%,#131d28 100%); }
.team-stellar.has-logo .team-logo { height:116px; top:4px; left:16px; }
.team-lysera.has-logo .team-logo { height:100px; top:14px; }
@media (min-width:1500px) { .competitive-showcase .experience-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; } }
@media (min-width:1000px) and (max-width:1499px) { .competitive-showcase .experience-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .competitive-showcase .experience-card { grid-column:span 2; }
  .competitive-showcase .experience-card:nth-child(4) { grid-column:2 / span 2; } }

/* ---------- Motion switch (one preview link; visitor picks motion on or off) ---------- */
.motion-toggle { position:fixed; right:1.5rem; bottom:4.6rem; z-index:9000; display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem .5rem .75rem;
  background:rgba(15,25,35,.92); border:1px solid #536171; color:#c9d3dc; font:700 .68rem/1 var(--font-mono,'JetBrains Mono',monospace); letter-spacing:.12em; cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-s)),calc(100% - var(--cut-s)) 100%,0 100%); }
.motion-toggle::before { content:""; width:8px; height:8px; border-radius:50%; background:#6b7785; }
.motion-toggle.on::before { background:#9de2d5; box-shadow:0 0 8px #9de2d5; }
.motion-toggle.lite::before { background:#e9ca8d; }
.motion-toggle:hover, .motion-toggle:focus-visible { border-color:var(--val-red,#ff4655); color:#fff; }
@media (max-width:600px) { .motion-toggle { right:12px; bottom:calc(64px + env(safe-area-inset-bottom,0px)); padding:.45rem .6rem; } }
.team-kittens .team-logo { top:10px; height:100px; translate:none; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .team-kittens:hover .team-logo { translate:4px 0; } }
@media (max-width:600px) { .motion-toggle { bottom:calc(132px + env(safe-area-inset-bottom,0px)); } }