:root {
  --blue: #2ba9ff;
  --red: #ef334d;
  --gold: #d0a24c;
  --ivory: #f3eee2;
  --ink: #070910;
  --font-hebrew: "Noto Sans Hebrew",Arial,sans-serif;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-right: env(safe-area-inset-right,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --safe-left: env(safe-area-inset-left,0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 83% 24%,rgba(43,169,255,.19),transparent 29%),
    radial-gradient(circle at 11% 78%,rgba(239,51,77,.14),transparent 31%),
    linear-gradient(135deg,#0c1420,#070910 55%,#10080d);
  font-family: var(--font-hebrew);
}
button,a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.profile-site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  grid-template-areas: "menu brand status";
  align-items: center;
  gap: 1.2rem;
  min-height: calc(80px + var(--safe-top));
  padding: calc(.7rem + var(--safe-top)) calc(1rem + var(--safe-right)) .7rem calc(1rem + var(--safe-left));
  border-bottom: 1px solid rgba(43,169,255,.28);
  background: rgba(5,7,12,.91);
  backdrop-filter: blur(18px);
  direction: ltr;
}
.profile-menu-toggle {
  grid-area: menu;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.profile-menu-toggle i { display: block; width: 22px; height: 2px; background: currentColor; }
.profile-menu-toggle:hover { border-color: var(--blue); background: rgba(43,169,255,.1); }
.profile-menu-toggle:focus-visible,.public-profile-share:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.profile-brand { grid-area: brand; display: grid; justify-self: end; gap: .1rem; color: inherit; text-align: right; text-decoration: none; direction: rtl; }
.profile-brand small { color: var(--blue); font: 800 .6rem/1 ui-monospace,monospace; letter-spacing: .14em; }
.profile-brand strong { font: italic 900 clamp(1.65rem,3.1vw,2.8rem)/.9 Impact,Arial,sans-serif; letter-spacing: -.025em; text-shadow: 3px 3px 0 #000; }
.profile-public-status { grid-area: status; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid rgba(67,255,155,.24); color: #b8bdc7; font: 650 .78rem/1 var(--font-hebrew); direction: rtl; }
.profile-public-status i { width: 7px; height: 7px; border-radius: 50%; background: #43ff9b; box-shadow: 0 0 10px #43ff9b; }

.public-profile-shell { min-height: calc(100dvh - 80px); padding: clamp(1rem,2.5vw,2.2rem); }
.public-player-card[hidden],.profile-not-found[hidden] { display: none; }
.public-player-card {
  --profile-accent: var(--blue);
  --profile-rgb: 43,169,255;
  display: grid;
  grid-template-columns: minmax(360px,46%) minmax(430px,54%);
  width: min(1480px,100%);
  min-height: calc(100dvh - 124px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(var(--profile-rgb),.48);
  background: #080b12;
  box-shadow: 0 28px 90px rgba(0,0,0,.52),inset 0 0 0 14px rgba(255,255,255,.015);
}
.public-player-card[data-fighter="bisakov"] { --profile-accent: var(--red); --profile-rgb: 239,51,77; }
.public-player-art {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg,rgba(var(--profile-rgb),.15),transparent 38%),
    repeating-conic-gradient(from 196deg at 50% 53%,rgba(var(--profile-rgb),.09) 0deg 11deg,transparent 11deg 24deg),
    radial-gradient(circle at 50% 52%,rgba(var(--profile-rgb),.22),transparent 43%),
    linear-gradient(180deg,#111b29 0%,#070a10 72%);
}
.public-player-art > small { position: absolute; z-index: 4; top: 34px; right: 34px; color: var(--profile-accent); font: 800 .64rem/1.35 ui-monospace,monospace; letter-spacing: .18em; }
.public-player-rank { position: absolute; z-index: 5; top: 74px; right: 34px; display: grid; gap: .18rem; min-width: 90px; padding: .7rem .85rem; border: 1px solid rgba(var(--profile-rgb),.6); background: rgba(3,6,11,.68); }
.public-player-rank i { color: #9298a4; font: 650 .68rem/1 var(--font-hebrew); font-style: normal; }
.public-player-rank b { color: var(--profile-accent); font: 900 1.7rem/1 ui-monospace,monospace; direction: ltr; }
.public-player-aura { position: absolute; left: 50%; top: 50%; width: min(36vw,510px); aspect-ratio: 1; border: 1px solid rgba(var(--profile-rgb),.45); border-radius: 50%; box-shadow: 0 0 75px rgba(var(--profile-rgb),.2),inset 0 0 55px rgba(var(--profile-rgb),.08); transform: translate(-50%,-50%); }
.public-player-aura::before,.public-player-aura::after { content: ""; position: absolute; border: 1px solid rgba(var(--profile-rgb),.2); border-radius: inherit; }
.public-player-aura::before { inset: 12%; }
.public-player-aura::after { inset: 27%; border-style: dashed; }
.public-player-art > img { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 104%; height: 91%; max-width: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 18px #000) drop-shadow(0 0 22px rgba(var(--profile-rgb),.36)); transform: translateX(-50%); animation: public-fighter-enter .7s cubic-bezier(.18,.8,.22,1) both; }
.public-player-art > strong { position: absolute; z-index: 4; right: 18px; bottom: 24px; color: #f3eddf; font: italic 900 clamp(5rem,10vw,9rem)/.78 Impact,Arial,sans-serif; letter-spacing: -.05em; text-shadow: 6px 7px 0 rgba(0,0,0,.76); }

.public-player-details { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: clamp(1rem,2.4vh,2rem); padding: clamp(3rem,6vh,5.5rem) clamp(2rem,5vw,5rem) clamp(2rem,4vh,3.5rem); background: linear-gradient(125deg,rgba(var(--profile-rgb),.065),transparent 30%),linear-gradient(180deg,#090c13,#06080e); }
.public-player-details::before { content: "ONLINE ARENA  /  PLAYER PROFILE"; position: absolute; top: clamp(1.7rem,4vh,3rem); right: clamp(2rem,5vw,5rem); color: #6d737f; font: 700 .6rem/1 ui-monospace,monospace; letter-spacing: .16em; }
.public-player-details > header { display: grid; gap: .55rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.11); }
.public-player-details > header small { color: var(--profile-accent); font: 800 .67rem/1 ui-monospace,monospace; letter-spacing: .18em; }
.public-player-details h1 { margin: 0; overflow-wrap: anywhere; color: var(--ivory); font: 900 clamp(3.2rem,6.8vw,7rem)/.9 var(--font-hebrew); letter-spacing: -.05em; }
.public-player-details > header p { margin: 0; color: #969ba5; font: 500 clamp(.9rem,1.2vw,1.05rem)/1.5 var(--font-hebrew); }
.public-player-identity { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 1rem; }
.public-player-identity > img { width: 70px; height: 70px; border: 2px solid var(--profile-accent); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px rgba(var(--profile-rgb),.13),0 10px 24px rgba(0,0,0,.4); }
.public-player-identity > span { display: grid; gap: .3rem; }
.public-player-identity small { color: #898f9b; font: 600 .75rem/1 var(--font-hebrew); }
.public-player-identity b { color: #f1f0ec; font: 750 1.15rem/1.15 var(--font-hebrew); }
.public-player-identity em { color: #777e89; font: normal 700 .58rem/1 ui-monospace,monospace; letter-spacing: .1em; direction: ltr; }
.public-player-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.12); }
.public-player-stats > span { display: grid; gap: .45rem; min-width: 0; min-height: 82px; padding: 1rem; border-left: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.public-player-stats > span:last-child { border-left: 0; }
.public-player-stats small { color: #9297a1; font: 600 .7rem/1 var(--font-hebrew); }
.public-player-stats b { color: #f6f3eb; font: 900 clamp(1.1rem,2vw,1.55rem)/1 ui-monospace,monospace; direction: ltr; text-align: right; }
.public-player-stats > span:first-child b { color: var(--gold); }
.public-player-form { display: grid; gap: .7rem; }
.public-player-form > span { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.public-player-form small { color: var(--profile-accent); font: 750 .6rem/1 ui-monospace,monospace; letter-spacing: .16em; direction: ltr; }
.public-player-form > span > b { color: #b3b6be; font: 600 .82rem/1.25 var(--font-hebrew); }
.public-player-form > i { display: block; height: 8px; overflow: hidden; background: rgba(255,255,255,.08); transform: skewX(-14deg); }
.public-player-form > i > b { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--profile-accent),#f0c151); box-shadow: 0 0 16px rgba(var(--profile-rgb),.55); transition: width .5s .12s ease; }
.public-profile-share { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: .9rem; min-height: 68px; padding: .7rem 1rem; border: 1px solid color-mix(in srgb,var(--profile-accent) 72%,#fff 8%); color: #fff; background: linear-gradient(110deg,rgba(var(--profile-rgb),.32),rgba(var(--profile-rgb),.1)); box-shadow: inset 5px 0 var(--profile-accent),0 14px 34px rgba(var(--profile-rgb),.14); text-align: right; cursor: pointer; transition: border-color .16s ease,background .16s ease,transform .16s ease; }
.public-profile-share::after { content: "←"; color: var(--profile-accent); font: 700 1.3rem/1 Arial,sans-serif; }
.public-profile-share:hover { border-color: var(--profile-accent); background: linear-gradient(110deg,rgba(var(--profile-rgb),.46),rgba(var(--profile-rgb),.16)); transform: translateY(-2px); }
.public-profile-share svg { width: 34px; height: 34px; fill: none; stroke: var(--profile-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.public-profile-share > span { display: grid; gap: .22rem; }
.public-profile-share small { color: var(--profile-accent); font: 750 .56rem/1 ui-monospace,monospace; letter-spacing: .13em; }
.public-profile-share b { font: 800 1.12rem/1.2 var(--font-hebrew); }
.public-player-details > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.09); color: #7f8590; font: 700 .64rem/1 ui-monospace,monospace; }
.public-player-details > footer span { display: flex; align-items: center; gap: .5rem; color: #9aa0aa; font-family: var(--font-hebrew); }
.public-player-details > footer i { width: 7px; height: 7px; border-radius: 50%; background: #42e891; box-shadow: 0 0 12px #42e891; }

.profile-not-found { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: calc(100dvh - 150px); text-align: center; }
.profile-not-found small { color: var(--red); font: 800 .7rem/1 ui-monospace,monospace; letter-spacing: .16em; }
.profile-not-found h1 { max-width: 760px; margin: 0; font: 900 clamp(3rem,9vw,7rem)/.9 var(--font-hebrew); }
.profile-not-found p { margin: 0; color: #a1a6b0; font-size: 1rem; }
.profile-not-found a { margin-top: .8rem; padding: .85rem 1.2rem; border: 1px solid var(--blue); color: #fff; background: rgba(43,169,255,.12); text-decoration: none; }
.profile-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(1.2rem + var(--safe-bottom)); padding: .7rem 1rem; color: #080b12; background: var(--ivory); font: 700 .82rem/1 var(--font-hebrew); opacity: 0; pointer-events: none; transform: translate(-50%,20px); transition: opacity .18s ease,transform .18s ease; }
.profile-toast.is-visible { opacity: 1; transform: translate(-50%,0); }

.profile-arena-menu { position: fixed; z-index: 70; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) min(430px,92vw); direction: ltr; }
.profile-arena-menu[hidden] { display: none; }
.profile-menu-backdrop { grid-column: 1 / -1; grid-row: 1; border: 0; background: rgba(1,3,7,.78); backdrop-filter: blur(7px); cursor: pointer; }
.profile-menu-panel { position: relative; grid-column: 2; grid-row: 1; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; min-width: 0; height: 100dvh; padding: calc(1.35rem + var(--safe-top)) calc(1.25rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) 1.25rem; overflow-x: hidden; border-right: 1px solid rgba(43,169,255,.48); color: var(--ivory); background: radial-gradient(circle at 90% 16%,rgba(43,169,255,.18),transparent 28%),radial-gradient(circle at 12% 78%,rgba(239,51,77,.13),transparent 30%),linear-gradient(150deg,#111520,#07090f 70%); box-shadow: -28px 0 80px rgba(0,0,0,.65),inset 4px 0 rgba(43,169,255,.14); direction: rtl; animation: profile-menu-enter .28s ease-out both; }
.profile-menu-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.profile-menu-panel > header small { color: var(--blue); font: 800 .62rem/1 ui-monospace,monospace; letter-spacing: .11em; }
.profile-menu-panel > header h2 { margin: .28rem 0 0; font: 900 clamp(2.2rem,6vw,3.4rem)/.9 var(--font-hebrew); letter-spacing: -.045em; }
.profile-menu-panel > header button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.2); color: #c7c9d0; background: rgba(255,255,255,.035); font: 300 1.7rem/1 Arial,sans-serif; cursor: pointer; }
.profile-menu-panel > nav { display: grid; align-content: center; gap: .55rem; min-width: 0; padding-block: 1.2rem; overflow-x: hidden; overflow-y: auto; }
.profile-menu-panel > nav a { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: .85rem; width: 100%; min-width: 0; min-height: 74px; padding: .7rem .85rem; border: 1px solid rgba(255,255,255,.13); color: #eef0f4; background: rgba(7,9,15,.68); text-align: right; text-decoration: none; }
.profile-menu-panel > nav a:hover,.profile-menu-panel > nav a:focus-visible { border-color: var(--blue); background: rgba(43,169,255,.1); box-shadow: inset 4px 0 rgba(43,169,255,.5); outline: 0; }
.profile-menu-panel > nav a > span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(43,169,255,.55); color: var(--blue); font: 700 1.45rem/1 Arial,sans-serif; }
.profile-menu-panel > nav a > b { display: grid; gap: .18rem; min-width: 0; font: 800 1.04rem/1.2 var(--font-hebrew); }
.profile-menu-panel > nav a small { color: #9298a3; font: 500 .77rem/1.3 var(--font-hebrew); }
.profile-menu-panel > nav a > i { color: #676d79; font: normal 700 .58rem/1 ui-monospace,monospace; direction: ltr; }
.profile-menu-enter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; padding: .7rem .8rem; color: #b7bbc4; border: 1px solid rgba(255,255,255,.1); text-decoration: none; font: 650 .82rem/1 var(--font-hebrew); }
.profile-menu-enter b { color: var(--blue); }
.profile-menu-panel > footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.13); color: #7f8490; font: 800 .6rem/1 ui-monospace,monospace; letter-spacing: .08em; }
.profile-menu-panel > footer span { display: flex; align-items: center; gap: .45rem; }
.profile-menu-panel > footer i { width: 7px; height: 7px; border-radius: 50%; background: #43ff9b; box-shadow: 0 0 10px #43ff9b; }
.profile-menu-panel > footer b { color: var(--gold); }

@keyframes public-fighter-enter { from { opacity: 0; transform: translateX(-50%) translateY(4%) scale(.94); filter: blur(6px) brightness(1.6); } }
@keyframes profile-menu-enter { from { transform: translateX(105%); } }

@media (max-width: 820px) {
  .profile-site-header { grid-template-columns: 48px minmax(0,1fr); grid-template-areas: "menu brand"; min-height: calc(68px + var(--safe-top)); padding: calc(.55rem + var(--safe-top)) calc(.7rem + var(--safe-right)) .55rem calc(.7rem + var(--safe-left)); }
  .profile-menu-toggle { width: 46px; height: 46px; }
  .profile-brand strong { font-size: 1.65rem; }
  .profile-public-status { display: none; }
  .public-profile-shell { padding: 0; }
  .public-player-card { grid-template-columns: 1fr; grid-template-rows: minmax(330px,45svh) auto; min-height: calc(100dvh - 68px); border-inline: 0; }
  .public-player-art { min-height: 330px; border-left: 0; border-bottom: 1px solid rgba(var(--profile-rgb),.38); }
  .public-player-art > small { top: 20px; right: 18px; max-width: 55%; }
  .public-player-rank { top: 58px; right: 18px; min-width: 72px; padding: .5rem .65rem; }
  .public-player-rank b { font-size: 1.3rem; }
  .public-player-aura { width: min(76vw,340px); }
  .public-player-art > img { width: min(114%,520px); height: 94%; }
  .public-player-art > strong { right: 12px; bottom: 14px; font-size: clamp(4rem,20vw,6.6rem); }
  .public-player-details { justify-content: start; gap: 1.25rem; padding: 3.8rem 1.2rem calc(2rem + var(--safe-bottom)); }
  .public-player-details::before { top: 1.45rem; right: 1.2rem; }
  .public-player-details h1 { font-size: clamp(2.6rem,13vw,4.2rem); }
  .public-player-identity { grid-template-columns: 64px minmax(0,1fr); gap: .8rem; }
  .public-player-identity > img { width: 60px; height: 60px; }
  .public-player-identity em { grid-column: 1 / -1; }
  .public-player-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-player-stats > span { min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.09); }
  .public-player-stats > span:nth-child(even) { border-left: 0; }
  .public-player-stats > span:nth-last-child(-n+2) { border-bottom: 0; }
  .public-player-form > span { align-items: start; flex-direction: column; gap: .4rem; }
  .profile-arena-menu { grid-template-columns: minmax(0,1fr) min(360px,94vw); }
  .profile-menu-panel { padding-inline: .9rem; }
  .profile-menu-panel > nav { align-content: start; }
  .profile-menu-panel > nav a { min-height: 70px; padding: .6rem; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .profile-site-header { position: relative; min-height: calc(58px + var(--safe-top)); padding-block: calc(.3rem + var(--safe-top)) .3rem; }
  .profile-menu-toggle { width: 44px; height: 44px; }
  .profile-brand small { display: none; }
  .public-profile-shell { padding: .55rem; }
  .public-player-card { grid-template-columns: minmax(270px,43%) minmax(390px,57%); grid-template-rows: 1fr; min-height: calc(100dvh - 70px); }
  .public-player-art { min-height: 0; border-left: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
  .public-player-art > small { top: 18px; }
  .public-player-rank { top: 52px; }
  .public-player-art > img { width: 105%; height: 92%; }
  .public-player-art > strong { font-size: clamp(3.8rem,14vh,5.5rem); }
  .public-player-details { gap: .68rem; padding: 3.2rem 1.25rem 1rem; overflow-y: auto; }
  .public-player-details::before { top: 1.2rem; right: 1.25rem; }
  .public-player-details > header { gap: .28rem; padding-bottom: .45rem; }
  .public-player-details h1 { font-size: clamp(2.2rem,9vh,3.4rem); }
  .public-player-details > header p { display: none; }
  .public-player-identity { grid-template-columns: 48px minmax(0,1fr) auto; }
  .public-player-identity > img { width: 46px; height: 46px; }
  .public-player-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .public-player-stats > span { min-height: 58px; gap: .25rem; padding: .55rem; border-bottom: 0; border-left: 1px solid rgba(255,255,255,.09); }
  .public-player-stats > span:last-child { border-left: 0; }
  .public-player-form { gap: .35rem; }
  .public-player-form > span { align-items: center; flex-direction: row; }
  .public-profile-share { min-height: 50px; padding: .45rem .65rem; }
  .public-profile-share svg { width: 28px; height: 28px; }
  .public-player-details > footer { padding-top: .5rem; }
  .profile-menu-panel { padding-top: calc(.65rem + var(--safe-top)); padding-bottom: calc(.6rem + var(--safe-bottom)); }
  .profile-menu-panel > header { padding-bottom: .5rem; }
  .profile-menu-panel > header h2 { font-size: 2rem; }
  .profile-menu-panel > nav { align-content: start; gap: .32rem; padding-block: .5rem; }
  .profile-menu-panel > nav a { grid-template-columns: 42px minmax(0,1fr) auto; min-height: 56px; padding: .35rem .5rem; }
  .profile-menu-panel > nav a > span { width: 40px; height: 40px; }
  .profile-menu-panel > nav a small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .public-player-art > img,.profile-menu-panel { animation: none; }
  .public-player-form > i > b { transition: none; }
}
