:root{
  --blue:#1f3a6d;
  --red:#e5484d;
  --bg:#f2f4f8;
  --card:rgba(255,255,255,.68);
  --ink:#111113;
  --muted:#7b7b80;
  --line:#e7e7ea;
  --soft:#f1f1f3;
  --shadow:0 10px 30px rgba(0,0,0,.055);
  --r:20px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,button,a,.nav-btn,.btn,.icon-btn,.stepper button{
  touch-action:manipulation;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 6%, rgba(55,104,190,.12), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(229,72,77,.07), transparent 24%),
    radial-gradient(circle at 60% 88%, rgba(120,150,210,.08), transparent 28%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button{cursor:pointer}
svg{display:block}
.app{width:min(1120px,100%);margin:auto;padding:12px 12px 92px}
.topbar{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 12px;
  padding:4px 2px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
}
.brand{display:flex;align-items:center;gap:9px}
.brand img{height:42px;width:auto;display:block}
.brand h1{margin:0;font-size:17px;line-height:1.05;font-weight:720;letter-spacing:-.3px}
.brand small{display:block;margin-top:3px;font-size:11.5px;font-weight:560;color:var(--muted)}
.icon{
  width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto
}
.icon-fill{fill:currentColor;stroke:none}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.52));
  color:var(--ink);
  border:1px solid rgba(255,255,255,.78);
  border-radius:26px;
  padding:22px;
  min-height:165px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 16px 44px rgba(24,42,80,.075);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.hero:before{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-55px;top:-85px;
  background:radial-gradient(circle,rgba(50,92,168,.12),rgba(50,92,168,0) 68%);
  pointer-events:none;
}
.eyebrow{
  font-size:10px;letter-spacing:.14em;font-weight:700;color:#96969c;margin-bottom:8px
}
.hero h2{
  margin:0;font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-1.55px;
  font-weight:750;max-width:680px
}
.hero p{margin:11px 0 0;max-width:640px;font-size:13px;line-height:1.5;color:var(--muted)}
.hero-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:12px}
.s12{grid-column:span 12}.s8{grid-column:span 8}.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}
.card{
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.56));
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  border:1px solid rgba(255,255,255,.82);
  border-radius:22px;
  padding:14px;
  box-shadow:0 12px 34px rgba(28,45,82,.065);
}
.card h3{margin:0 0 5px;font-size:16px;font-weight:710;letter-spacing:-.3px}
.sub{margin:0 0 12px;font-size:12px;line-height:1.48;color:var(--muted)}
.btn{
  border:0;border-radius:13px;padding:10px 13px;min-height:42px;font-weight:660;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s
}
.btn:active{transform:scale(.98)}
.btn-navy{background:#111;color:#fff}
.btn-red{background:#111;color:#fff}
.btn-soft{
  background:rgba(255,255,255,.62);color:#222;
  border:1px solid rgba(0,0,0,.045);
  backdrop-filter:blur(12px)
}
.btn-danger{background:#fff1f2;color:#b4232a}
.btn.mini{padding:8px 10px;min-height:38px;font-size:11px;border-radius:11px}
.field{margin-bottom:10px}
.field label{display:block;font-size:10px;font-weight:700;color:#89898f;letter-spacing:.055em;margin-bottom:6px}
.input,.select{
  width:100%;
  border:1px solid rgba(0,0,0,.065);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  padding:11px 12px;min-height:44px;outline:none;color:var(--ink);font-size:13px
}
.input:focus,.select:focus{border-color:#cfcfd3;box-shadow:0 0 0 3px rgba(0,0,0,.025)}
.inline{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:9px}
.section-right{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  font-size:8.5px;font-weight:650;background:#f2f2f4;color:#5c5c61;
  padding:5px 7px;border-radius:999px
}
.pill.red{background:#f2f2f4;color:#5c5c61}
.player-list{display:grid;gap:6px;max-height:220px;overflow:auto}
.player-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.player-name{font-size:13px;font-weight:650}
.icon-btn{
  border:0;background:#f2f2f4;color:#555;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center
}
.empty{
  border:1px dashed #d9d9dd;border-radius:14px;background:#fafafa;padding:17px;
  text-align:center;color:#88888e;font-size:12px
}
.round{
  border:1px solid var(--line);border-radius:15px;padding:10px;margin-bottom:8px;background:#fff
}
.round-head{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:7px}
.round-title{font-size:12px;font-weight:700}
.round-tools{display:flex;gap:5px;flex-wrap:wrap}
.court{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  background:#f7f7f8;border-radius:11px;padding:9px;margin-top:6px
}
.team{font-size:12.5px;font-weight:630}.team.right{text-align:right}
.vs{font-size:9px;color:#aaa;font-weight:700}
.bench{margin-top:8px;font-size:11px;color:#85858b}
.score-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;margin-bottom:8px}
.score-top{display:flex;justify-content:space-between;gap:6px;padding:8px 10px;background:#f8f8f9}
.score-top b{font-size:11.5px}.score-top span{font-size:10px;color:#888;font-weight:650}
.score-body{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center}
.score-team{padding:13px 10px;font-size:12.5px;font-weight:650;line-height:1.38}
.score-team.right{text-align:right}.score-mid{display:grid;place-items:center;color:#aaa;font-size:9px;font-weight:700}
.game-row{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;padding:9px;border-top:1px solid var(--line)}
.stepper{display:grid;grid-template-columns:42px 1fr 42px;gap:7px;align-items:center}
.stepper button{height:44px;border:0;background:#f2f2f4;color:#222;border-radius:12px;font-weight:720;font-size:17px}

.score-num-input{
  width:100%;
  min-width:0;
  height:46px;
  border:0;
  outline:0;
  border-radius:11px;
  background:var(--soft);
  color:var(--ink);
  text-align:center;
  font-size:17px;
  font-weight:760;
  line-height:1;
  appearance:textfield;
  -moz-appearance:textfield;
}
.score-num-input::-webkit-outer-spin-button,
.score-num-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.score-num-input:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(31,58,109,.13);
}
.score-num-input:disabled{
  opacity:1;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
@media(max-width:560px){
  .score-num-input{
    height:48px;
    font-size:18px!important;
  }
}

.score-num{height:48px;border-radius:12px;background:#f7f7f8;display:grid;place-items:center;font-size:28px;font-weight:720}
.target{font-size:9px;font-weight:650;color:#999;text-align:center}
.target b{display:block;font-size:17px;color:#111;margin-top:3px}
.meta-row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 9px 9px}
.meta-left,.meta-right{font-size:10.5px;font-weight:650;color:#555}
.undo-btn{padding:6px 8px;font-size:8.5px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:12px;text-align:left}
th{font-size:9.5px;color:#909096;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.rank{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#111;color:#fff;font-size:10.5px;font-weight:700
}
.rank.top{background:#111}.leader{font-weight:650}
.result-shell{
  width:min(480px,100%);margin:auto;border-radius:26px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.06)
}
.share-actions{
  width:min(720px,100%);margin:12px auto 0;
  display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;
  padding:8px;
  border-radius:17px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 10px 28px rgba(25,42,78,.06)
}
.bottom-nav{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);
  width:min(620px,calc(100% - 20px));
  background:rgba(255,255,255,.64);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 14px 42px rgba(24,42,80,.11);
  border-radius:20px;padding:5px;display:grid;grid-template-columns:repeat(5,1fr);z-index:20
}
.nav-btn{
  border:0;background:transparent;color:#8a8a90;border-radius:12px;padding:7px 4px;
  font-size:8px;font-weight:650;display:flex;flex-direction:column;align-items:center;gap:2px
}
.nav-btn .icon{width:17px;height:17px}.nav-btn.active{
  background:rgba(255,255,255,.88);color:#111;
  box-shadow:0 3px 12px rgba(0,0,0,.055)
}
.view{display:none}.view.active{display:block}
.toast{
  position:fixed;top:14px;left:50%;transform:translate(-50%,-18px);background:#111;color:#fff;
  padding:9px 12px;border-radius:11px;font-size:9.5px;font-weight:650;opacity:0;pointer-events:none;
  transition:.2s;z-index:99
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;place-items:center;padding:16px;z-index:70
}
.modal.show{display:grid}
.modal-card{
  width:min(420px,100%);background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.06);border-radius:22px;padding:16px;max-height:84vh;overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.14)
}
.modal-card h3{margin:0 0 5px;font-size:14px;font-weight:700}
.modal-card p{font-size:10.5px;color:#79797f;line-height:1.45}
.modal-actions{display:flex;gap:7px;justify-content:flex-end;margin-top:13px;flex-wrap:wrap}
.edit-grid{display:grid;gap:7px;margin-top:11px}
.edit-row{display:grid;grid-template-columns:86px 1fr;gap:7px;align-items:center}
.edit-row label{font-size:8.5px;font-weight:650;color:#85858b}
.kpi-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.history-card{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px
}
.history-title{font-size:11px;font-weight:700}.history-meta{font-size:9px;color:#888;margin-top:3px}
.history-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.result-hero{
  min-height:118px;
  justify-content:center;
  background:rgba(255,255,255,.56);
}
.result-hero:before{display:none}
.result-hero h2{font-size:30px;line-height:1.02}

@media(max-width:820px){.s8,.s7,.s5,.s4{grid-column:span 12}}
@media(max-width:560px){
  .app{padding:9px 9px 88px}.hero{padding:18px 15px;min-height:150px;border-radius:21px}
  .hero h2{font-size:29px}.card{padding:12px;border-radius:17px}.inline{grid-template-columns:1fr}
  .brand img{height:34px}.score-body{grid-template-columns:1fr 34px 1fr}
}




@media(max-width:560px){
  #play .inline{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #play .inline .field{
    min-width:0;
  }
  #play .inline .select{
    padding-left:12px;
    padding-right:34px;
    font-size:15px!important;
  }
  #play .inline label{
    font-size:10px;
    white-space:nowrap;
  }
}

/* CREATE SESSION — mobile-first */
.create-session-card{
  width:min(100%,460px);
}
.create-session-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#111;
  color:#fff;
  margin-bottom:14px;
}
.create-session-icon .icon{
  width:22px;
  height:22px;
}
.create-session-field{
  margin-top:18px;
}
.create-session-hint{
  margin-top:7px;
  font-size:11px;
  line-height:1.45;
  color:#8d8e94;
}
.create-session-actions{
  margin-top:18px;
}
#createSessionConfirmBtn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* Stronger smartphone fit */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.app{
  width:min(100%,1120px);
}
.view,
.grid,
.card,
.hero,
.topbar{
  min-width:0;
}
.table-wrap{
  max-width:100%;
}
.history-card,
.score-card,
.round,
.player-row{
  min-width:0;
}
.history-title,
.history-meta,
.team,
.player-name{
  overflow-wrap:anywhere;
}
.hero-actions{
  max-width:100%;
}
.modal-card{
  max-height:min(88dvh,760px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}



@media(max-width:560px){
  .app{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }

  .topbar{
    gap:8px;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
  }
  .brand h1{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hero{
    min-height:auto;
    padding:18px 16px;
    border-radius:20px;
  }
  .hero h2{
    font-size:32px;
    line-height:1.02;
  }

  .grid{
    grid-template-columns:1fr;
  }
  .s12,.s8,.s7,.s5,.s4{
    grid-column:1/-1!important;
  }

  .card{
    padding:14px;
    border-radius:18px;
  }

  .hero-actions{
    grid-template-columns:1fr!important;
    gap:8px;
  }

  .hero-actions .btn{
    min-height:48px;
  }

  .input,.select{
    width:100%;
    min-width:0;
    font-size:16px!important;
    min-height:48px;
  }

  
.round-auto-card{
  width:100%;
  margin:2px 0 14px;
  padding:12px 13px;
  border-radius:15px;
  background:rgba(245,247,251,.82);
  border:1px solid rgba(31,58,109,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.round-auto-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.round-auto-heading{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex:0 0 auto;
}
.round-auto-label{
  font-size:9px;
  font-weight:780;
  letter-spacing:.1em;
  color:#96979d;
  white-space:nowrap;
}
.round-auto-heading b{
  font-size:15px;
  line-height:1;
  color:#17181b;
  letter-spacing:-.25px;
  white-space:nowrap;
}
.round-auto-stats{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.round-auto-stats span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.045);
  font-size:9.5px;
  font-weight:650;
  color:#67686e;
  line-height:1;
  white-space:nowrap;
}
.round-auto-copy{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.055);
  font-size:10.5px;
  font-weight:600;
  line-height:1.35;
  color:#777980;
}
.round-auto-card.adjusted{
  background:rgba(242,246,255,.9);
  border-color:rgba(40,76,135,.10);
}
.round-auto-card.adjusted .round-auto-heading b{
  color:#284c87;
}
@media(max-width:560px){
  .round-auto-card{
    margin-top:0;
    margin-bottom:13px;
    padding:11px 12px;
    border-radius:14px;
  }
  .round-auto-main{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .round-auto-heading{
    width:100%;
    justify-content:space-between;
    align-items:center;
  }
  .round-auto-heading b{
    font-size:15px;
  }
  .round-auto-stats{
    width:100%;
    justify-content:flex-start;
    gap:5px;
  }
  .round-auto-stats span{
    min-height:26px;
    padding:0 8px;
    font-size:10px;
  }
  .round-auto-copy{
    margin-top:8px;
    padding-top:8px;
    font-size:10.5px;
  }
}
@media(max-width:390px){
  .round-auto-heading b{font-size:14px}
  .round-auto-stats span{
    padding:0 7px;
    font-size:9.5px;
  }
}

.player-add-row{
    grid-template-columns:minmax(0,1fr) 78px;
  }

  .round-head,
  .section-head{
    gap:8px;
    align-items:flex-start;
  }

  .round-actions,
  .section-right{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .score-body{
    gap:5px;
  }
  .score-team{
    padding:12px 7px;
    font-size:12px;
  }

  .game-row{
    gap:6px;
  }

  .stepper{
    grid-template-columns:40px minmax(44px,1fr) 40px;
    gap:5px;
  }

  .stepper button{
    width:40px;
    min-width:40px;
    height:44px;
  }

  .score-num{
    min-width:44px;
    height:46px;
  }

  .history-actions{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .history-actions .btn{
    width:100%;
    min-width:0;
    padding-left:7px;
    padding-right:7px;
  }

  .share-actions{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .share-actions .btn{
    width:100%;
    min-width:0;
  }

  .modal{
    align-items:flex-end;
    padding:
      12px
      max(10px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  .modal-card{
    width:100%;
    max-width:none;
    border-radius:22px;
    padding:18px 16px;
    max-height:84dvh;
  }

  .create-session-card{
    width:100%;
  }
  .create-session-card h3{
    font-size:22px;
    margin-bottom:5px;
  }
  .create-session-card p{
    font-size:13px;
    line-height:1.5;
  }
  .create-session-actions{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:8px;
    position:sticky;
    bottom:-1px;
    padding-top:10px;
    background:inherit;
  }
  .create-session-actions .btn{
    width:100%;
    min-height:48px;
  }

  .bottom-nav{
    width:calc(100% - 16px);
    gap:2px;
    padding:5px;
  }
  .bottom-nav .nav-btn{
    min-width:0;
    padding:6px 2px;
    font-size:8px;
  }
  .bottom-nav .nav-btn span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .lifetime-explain{
    grid-template-columns:1fr!important;
  }

  .result-shell{
    overflow:hidden;
  }
}

@media(max-width:390px){
  .brand img{height:34px}
  .brand h1{font-size:14px}
  .brand small{font-size:9.5px}

  


.cloud-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  margin-top:11px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.82);
  color:#72737a;
  font-size:10.5px;
  font-weight:650;
}
.cloud-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a7a8ae;
  box-shadow:0 0 0 3px rgba(167,168,174,.12);
}
.cloud-status[data-state="online"] .cloud-dot{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.cloud-status[data-state="syncing"] .cloud-dot{
  background:#e6a700;
  box-shadow:0 0 0 3px rgba(230,167,0,.12);
}
.cloud-status[data-state="error"] .cloud-dot{
  background:#e5484d;
  box-shadow:0 0 0 3px rgba(229,72,77,.12);
}
@media(max-width:560px){
  .cloud-status{
    min-height:31px;
    font-size:10.5px;
  }
}

.topbar-actions{
  padding:2px 0;
}
.brand{
  padding-left:2px;
}
@media(max-width:560px){
  .topbar-actions{
    flex:0 0 auto;
  }
  .brand{
    min-width:0;
  }
}



.finish-summary{
  display:grid;
  gap:7px;
  margin-top:14px;
}
.finish-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border-radius:12px;
  background:#f5f5f7;
  border:1px solid #ececef;
}
.finish-summary-row span{
  font-size:10.5px;
  color:#85868d;
}
.finish-summary-row b{
  font-size:11.5px;
  color:#202126;
}
.finish-summary-note{
  margin-top:2px;
  padding:10px 11px;
  border-radius:12px;
  background:#fff7e8;
  border:1px solid #f2dfb4;
  color:#775d1e;
  font-size:10.5px;
  line-height:1.45;
}

.finish-session-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#111;
  color:#fff;
  margin-bottom:14px;
}
.finish-session-icon .icon{
  width:22px;
  height:22px;
}
.finish-warning{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:11px 12px;
  border-radius:13px;
  background:#f4f4f6;
  color:#55565c;
  font-size:11px;
  line-height:1.4;
}
.finished-session-banner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 auto 10px;
  width:min(720px,100%);
  padding:11px 12px;
  border-radius:14px;
  background:#f4f4f6;
  border:1px solid #e6e6e9;
}
.finished-session-banner>.icon{
  margin-top:1px;
  flex:0 0 auto;
}
.finished-session-banner b{
  display:block;
  font-size:11.5px;
  color:#202126;
}
.finished-session-banner span{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  line-height:1.4;
  color:#85868d;
}
.session-status-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:5px;
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  vertical-align:middle;
}
.session-status-pill.finished{
  background:#111113;
  color:#fff;
}
.session-status-pill.active{
  background:#e9f8ee;
  color:#18763d;
}
@media(max-width:560px){
  .finish-session-actions{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:8px;
  }
  .finish-session-actions .btn{
    width:100%;
    min-height:48px;
  }
  .finished-session-banner{
    padding:11px;
  }
}

/* Active access role */
.access-badge{display:none!important}

.access-btn.role-active{
  background:rgba(255,255,255,.88);
  color:#111113;
  border:1px solid rgba(0,0,0,.065);
  box-shadow:0 5px 16px rgba(22,32,54,.07);
  cursor:default;
}

.access-btn.role-active:disabled{
  opacity:1;
  cursor:default;
}

.role-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
  flex:0 0 auto;
}

@media(max-width:560px){
  .access-btn.role-active{
    width:auto;
    min-width:42px;
    padding:0 10px;
  }
  .access-btn.role-active span.role-label{
    display:none;
  }
  .role-dot{
    width:7px;
    height:7px;
  }
}

.topbar-actions{
    gap:5px;
  }
  .access-btn,.access-logout{
    width:38px;
    min-width:38px;
    min-height:38px;
  }

  .hero h2{font-size:29px}
  .card h3{font-size:16px}

  .history-actions{
    grid-template-columns:1fr;
  }

  .share-actions{
    grid-template-columns:1fr;
  }

  .bottom-nav .nav-btn{
    font-size:7.6px;
  }
}

/* Access mode + mobile ergonomics */

.session-gate-note{
  display:none;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.82);
  color:#53545a;
}
.session-gate-note>.icon{
  flex:0 0 auto;
  margin-top:1px;
}
.session-gate-note b{
  display:block;
  font-size:11.5px;
  color:#202126;
  margin-bottom:2px;
}
.session-gate-note span{
  display:block;
  font-size:10.5px;
  line-height:1.45;
  color:#85868d;
}
body.host-mode .session-gate-note{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
}
body.host-mode .session-gate-note b{color:#f5f5f7}
body.host-mode .session-gate-note span{color:#a4a5ac}

@media(max-width:560px){
  .session-gate-note{
    padding:12px;
  }
  .session-gate-note b{font-size:12px}
  .session-gate-note span{font-size:11px}
}





.host-mode [data-admin-only]{display:none!important}
.guest-mode [data-session-create],
.guest-mode [data-session-edit]{display:none!important}
.host-readonly [data-session-edit]{display:none!important}

.guest-mode .admin-editable,
.host-readonly .admin-editable{pointer-events:none;opacity:.64}

.guest-mode #play .select,
.guest-mode #play #playerInput,
.host-readonly #play .select,
.host-readonly #play #playerInput{
  pointer-events:none;
  opacity:.72;
}

.host-mode .access-badge{
  color:#111;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.045);
}

.host-readonly .readonly-note{display:flex}
.admin-mode .king-readonly-note{display:none!important}
.host-mode .king-readonly-note,.guest-mode .king-readonly-note{display:flex}
.host-readonly .stepper{grid-template-columns:1fr}
.host-readonly .stepper button{display:none}
.host-readonly .undo-btn{display:none!important}
.host-readonly .score-num,
.host-readonly .score-num-input{background:rgba(246,246,248,.82)}

.session-owner-pill{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:5px;padding:4px 7px;border-radius:999px;
  background:#f2f2f4;color:#77787d;font-size:9px;font-weight:650;
}

.topbar-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.access-badge{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 11px;border-radius:12px;color:#6f7076;background:rgba(255,255,255,.54);border:1px solid rgba(0,0,0,.045);font-size:11.5px;font-weight:650;white-space:nowrap}
.access-badge.admin{color:#111;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.045)}
.access-btn,.access-logout{min-width:42px}
.login-card{text-align:left}

.auth-host-signup{
  margin-top:10px;
}
.auth-help{
  margin-top:7px;
  font-size:10px;
  line-height:1.45;
  color:#8b8c92;
}
.auth-login-actions{
  margin-top:14px;
}
@media(max-width:560px){
  .auth-login-actions{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8px;
  }
  .auth-login-actions .btn{
    width:100%;
    min-height:48px;
  }
}

.login-icon-wrap{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#111;color:#fff;margin-bottom:14px;box-shadow:0 9px 24px rgba(0,0,0,.12)}
.login-lock-icon{width:22px;height:22px}
.login-error{min-height:18px;margin-top:7px;color:#b4232a;font-size:11px;font-weight:600}
.guest-mode [data-admin-only]{display:none!important}
.guest-mode .admin-editable{pointer-events:none;opacity:.64}
.guest-mode #play .select,.guest-mode #play #playerInput{pointer-events:none;opacity:.72}
.guest-mode #play .session-picker-trigger,.host-readonly #play .session-picker-trigger{pointer-events:auto;opacity:1}
.guest-mode .stepper{grid-template-columns:1fr}
.guest-mode .stepper button{display:none}
.guest-mode .undo-btn{display:none!important}
.guest-mode .score-num,
.guest-mode .score-num-input{background:rgba(246,246,248,.82)}
.readonly-note{display:none;align-items:center;gap:7px;font-size:11px;color:#777980;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8)}
.guest-mode .readonly-note{display:flex}
@supports(padding:max(0px)){
  .app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .bottom-nav{bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  body{min-width:320px}
  .app{width:100%;padding-top:8px}
  .topbar{top:6px;padding:4px 2px;border-radius:0;background:transparent;border:0;box-shadow:none}
  .brand img{height:38px}.brand h1{font-size:16px}.brand small{font-size:10.5px}
  .access-badge{min-height:38px;padding:0 9px;font-size:10.5px}.access-badge span{display:none}
  .access-btn{width:42px;padding:0}.access-btn span{display:none}.access-logout{width:42px;padding:0}.desktop-label{display:none}
  .hero{min-height:172px;padding:20px 18px}.hero h2{font-size:34px}.hero p{font-size:13px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.hero-actions .btn{width:100%;min-height:46px}
  .grid{gap:10px;margin-top:10px}.card{padding:15px;border-radius:20px}.card h3{font-size:17px}.sub{font-size:12.5px}
  .input,.select{font-size:16px;min-height:48px;border-radius:13px}
  .field label{font-size:10.5px}.btn{min-height:44px;font-size:13px;border-radius:13px}.btn.mini{min-height:40px;font-size:11.5px}
  .player-row{padding:10px 11px}.player-name{font-size:13.5px}.round{padding:12px;border-radius:16px}.round-title{font-size:12.5px}
  .court{padding:11px 10px;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}.team{font-size:12.5px;overflow-wrap:anywhere}
  .score-body{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}.score-team{font-size:12.5px}
  .game-row{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);padding:11px}.stepper{grid-template-columns:42px minmax(46px,1fr) 42px}.guest-mode .stepper{grid-template-columns:1fr}
  .table-wrap{margin:0 -4px;padding-bottom:3px;-webkit-overflow-scrolling:touch}table{min-width:590px}th,td{font-size:12px}
  .result-shell{width:100%;border-radius:22px}.share-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.share-actions .input{grid-column:1/-1;max-width:none!important}
  .history-card{flex-direction:column;align-items:stretch}.history-title{font-size:13.5px}.history-meta{font-size:11px}.history-actions{display:grid;grid-template-columns:repeat(3,1fr)}.guest-mode .history-actions{grid-template-columns:1fr}
  .bottom-nav{width:calc(100% - 18px);border-radius:20px;padding:6px}.nav-btn{min-height:50px;font-size:9.5px;border-radius:14px}.nav-btn .icon{width:20px;height:20px}
}



.king-title-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.king-title-row h2{margin:0}
.king-crown{
  width:46px;height:46px;
  border-radius:15px;
  display:grid;place-items:center;
  background:#111;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.11);
  flex:0 0 auto;
}
.king-crown .icon{width:23px;height:23px}
@media(max-width:560px){
  .king-title-row{gap:10px}
  .king-crown{width:42px;height:42px;border-radius:14px}
  .king-crown .icon{width:21px;height:21px}
}


.most-session-badge{
  width:25px;height:25px;
  display:inline-grid;place-items:center;
  margin-left:6px;
  border-radius:8px;
  background:#111;color:#fff;
  vertical-align:middle;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.most-session-badge .icon{
  fill:currentColor;
  stroke:currentColor;
}
.most-session-badge .icon{width:13px;height:13px}
.session-count-cell{display:inline-flex;align-items:center;white-space:nowrap}
.lifetime-rating{
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
@media(max-width:560px){
  .most-session-badge{width:24px;height:24px;margin-left:4px}
}

.player-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.suggest-wrap{position:relative;min-width:0}
.suggest-box{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:45;
  padding:6px;border-radius:14px;background:rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 16px 40px rgba(21,37,70,.13)
}
.suggest-box.show{display:grid;gap:3px}
.suggest-item{border:0;background:transparent;text-align:left;min-height:40px;padding:8px 10px;border-radius:10px;font-size:12px;font-weight:630;color:#202126}
.suggest-item:hover,.suggest-item:active{background:#f1f2f5}
.player-name-hint{font-size:10.5px;color:#929399;margin-top:6px;line-height:1.4}
.lifetime-hero{min-height:178px}
.lifetime-head{align-items:center}
.lifetime-explain{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 14px}
.lifetime-explain>div{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.045)}
.lifetime-explain b{display:block;font-size:11.5px;margin-bottom:3px}
.lifetime-explain span{font-size:10.5px;line-height:1.4;color:#85868c}
.lifetime-rating{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:30px;padding:0 9px;border-radius:999px;background:#111;color:#fff;font-weight:720;font-size:11px}
.lifetime-winrate{font-weight:680;color:#333}
.lifetime-substat{font-size:9.5px;color:#98999f;margin-top:2px}
.lifetime-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lifetime-edit-note{font-size:10.5px;color:#85868c;line-height:1.45;margin-top:2px}
@media(max-width:560px){
  .player-add-row{grid-template-columns:minmax(0,1fr) 76px}
  .player-name-hint{font-size:11px}
  .lifetime-explain{grid-template-columns:1fr}
  .lifetime-explain>div{padding:10px 11px}
  .lifetime-edit-grid{grid-template-columns:1fr 1fr}
  .bottom-nav .nav-btn{font-size:8.2px;padding-left:2px;padding-right:2px;letter-spacing:-.01em}
  .bottom-nav .nav-btn .icon{width:19px;height:19px}
}

/* =========================================
   MOTION SYSTEM — subtle, fluid, app-like
   ========================================= */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,.9,.25,1.15);
  --motion-fast:180ms;
  --motion-med:320ms;
  --motion-slow:520ms;
}

@media (prefers-reduced-motion:no-preference){
  body{
    opacity:1;
    transform:none;
  }
  body.app-ready{
    opacity:1;
    transform:none;
  }

  .view.active{
    animation:viewEnter 360ms var(--ease-out) both;
  }

  .topbar{
    animation:topbarEnter 520ms var(--ease-out) 40ms both;
  }

  .hero{
    animation:heroEnter 620ms var(--ease-out) 70ms both;
  }

  .grid > .card{
    animation:cardEnter 520ms var(--ease-out) both;
  }
  .grid > .card:nth-child(1){animation-delay:110ms}
  .grid > .card:nth-child(2){animation-delay:160ms}
  .grid > .card:nth-child(3){animation-delay:210ms}

  .round,
  .score-card,
  .history-card,
  .player-row{
    animation:itemEnter 280ms var(--ease-out) both;
  }

  .modal.show .modal-card{
    animation:modalEnter 280ms var(--ease-spring) both;
  }

  .toast.show{
    animation:toastPulse 220ms var(--ease-out) both;
  }

  .score-num{
    transition:
      transform var(--motion-fast) var(--ease-spring),
      background var(--motion-fast) ease;
  }

  .nav-btn,
  .btn,
  .icon-btn,
  .stepper button{
    transition:
      transform var(--motion-fast) var(--ease-out),
      background var(--motion-fast) ease,
      color var(--motion-fast) ease,
      box-shadow var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      opacity var(--motion-fast) ease;
  }

  .btn:hover,
  .icon-btn:hover,
  .stepper button:hover{
    transform:translateY(-1px);
  }
  .btn:active,
  .icon-btn:active,
  .stepper button:active,
  .nav-btn:active{
    transform:scale(.965);
  }

  .nav-btn.active{
    animation:navSelect 240ms var(--ease-spring) both;
  }

  .input,
  .select{
    transition:
      border-color var(--motion-fast) ease,
      box-shadow var(--motion-fast) ease,
      background var(--motion-fast) ease,
      transform var(--motion-fast) var(--ease-out);
  }
  .input:focus,
  .select:focus{
    transform:translateY(-1px);
  }

  .card,
  .hero,
  .topbar,
  .bottom-nav{
    transition:
      box-shadow 260ms ease,
      border-color 260ms ease,
      background 260ms ease,
      transform 260ms var(--ease-out);
  }

  @media (hover:hover){
    .grid > .card:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 46px rgba(28,45,82,.085);
    }
  }

  .result-shell svg{
    animation:resultReveal 620ms var(--ease-out) both;
  }

  @keyframes viewEnter{
    from{opacity:0;transform:translateY(8px) scale(.995)}
    to{opacity:1;transform:none}
  }
  @keyframes topbarEnter{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:none}
  }
  @keyframes heroEnter{
    from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:none}
  }
  @keyframes cardEnter{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
  }
  @keyframes itemEnter{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:none}
  }
  @keyframes modalEnter{
    from{opacity:0;transform:translateY(10px) scale(.97)}
    to{opacity:1;transform:none}
  }
  @keyframes navSelect{
    0%{transform:scale(.94)}
    100%{transform:scale(1)}
  }
  @keyframes toastPulse{
    from{opacity:0;transform:translate(-50%,-10px) scale(.96)}
    to{opacity:1;transform:translate(-50%,0) scale(1)}
  }
  @keyframes resultReveal{
    from{opacity:0;transform:scale(.988)}
    to{opacity:1;transform:none}
  }
}

/* Prevent layout flashes before motion starts */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   v31 Sunset Blue Mobile UI Refresh
   Inspired by premium mobile wellness UI,
   adapted for Le Gîte Padel.
   ========================================================= */
:root{
  --blue:#245cff;
  --blue-2:#5f8fff;
  --blue-3:#9ec5ff;
  --sunset:#e7f0ff;
  --red:#ff6b76;
  --bg:#eff3fa;
  --card:#ffffff;
  --ink:#0f1728;
  --muted:#6e7688;
  --line:#e7edf7;
  --soft:#f5f8fd;
  --shadow:0 14px 34px rgba(34,73,154,.10);
  --shadow-soft:0 10px 24px rgba(26,51,110,.07);
  --r:24px;
}
html,body{
  background:
    radial-gradient(circle at 8% 5%, rgba(110,154,255,.18), transparent 26%),
    radial-gradient(circle at 96% 10%, rgba(255,107,118,.09), transparent 22%),
    radial-gradient(circle at 60% 92%, rgba(84,124,255,.09), transparent 28%),
    linear-gradient(180deg,#f5f8ff 0%, #eef3fb 58%, #edf2f9 100%);
}
body{
  color:var(--ink);
}
.app{
  width:min(480px,100%);
  margin:auto;
  padding:14px 12px 108px;
}
.topbar{
  position:sticky;
  top:10px;
  z-index:35;
  margin:2px 0 14px;
  padding:10px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:var(--shadow-soft);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height:34px!important;
  width:auto;
}
.icon-btn{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(180deg,#ffffff 0%, #f5f9ff 100%);
  color:#17357b;
  box-shadow:0 8px 20px rgba(24,46,98,.08);
}
.icon-btn .icon{
  width:18px;height:18px;
}
.cloud-status{
  background:rgba(255,255,255,.82)!important;
  border-color:#edf2fb!important;
  color:#60708f!important;
}
.hero,
.result-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
}
.hero{
  padding:24px 20px;
  min-height:184px;
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.20), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,107,118,.13), transparent 24%),
    linear-gradient(135deg,#2c62ff 0%, #4f81ff 38%, #76a7ff 100%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 18px 38px rgba(35,73,162,.18);
}
.hero:before{
  content:"";
  position:absolute;
  inset:auto -30px -38px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 70%);
}
.hero:after{
  content:"";
  position:absolute;
  left:-34px;
  top:-34px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,118,.18),rgba(255,107,118,0) 72%);
}
.hero>*{position:relative;z-index:1}
.eyebrow{
  color:rgba(255,255,255,.78)!important;
  font-size:10px!important;
  letter-spacing:.16em!important;
  font-weight:750!important;
}
.hero h2{
  margin:8px 0 8px;
  color:#fff;
  font-size:32px;
  line-height:1.03;
  letter-spacing:-.03em;
}
.hero p{
  margin:0;
  max-width:92%;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.5;
}
.readonly-note,
.session-gate-note{
  margin-top:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.readonly-note .icon,
.session-gate-note .icon{
  color:#fff!important;
}
.grid{
  gap:14px;
  margin-top:14px;
}
.card,
.score-card,
.history-card,
.round-auto-card,
.modal-card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,252,255,.94))!important;
  border:1px solid rgba(225,234,248,.95)!important;
  box-shadow:var(--shadow-soft)!important;
}
.card{
  border-radius:26px!important;
  padding:16px!important;
}
.card h3{
  font-size:16px;
  font-weight:760;
  letter-spacing:-.02em;
}
.sub{
  color:#76809a!important;
  font-size:12.5px!important;
}
.field{
  margin-bottom:12px;
}
.field label{
  font-size:10px!important;
  font-weight:760!important;
  letter-spacing:.13em!important;
  color:#8a93a8!important;
  margin-bottom:8px!important;
}
.input,.select{
  min-height:52px!important;
  border-radius:18px!important;
  border:1px solid #e4ebf7!important;
  background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%)!important;
  padding:13px 14px!important;
  font-size:16px!important;
  color:#152034!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
}
.input:focus,.select:focus{
  border-color:#bdd3ff!important;
  box-shadow:0 0 0 4px rgba(67,113,255,.10)!important;
}
.btn{
  min-height:48px!important;
  border-radius:17px!important;
  font-size:13px!important;
  font-weight:760!important;
  letter-spacing:-.01em;
  box-shadow:0 8px 18px rgba(22,46,101,.08);
}
.btn-navy{
  background:linear-gradient(135deg,#214ff6 0%, #4173ff 100%)!important;
  color:#fff!important;
}
.btn-soft{
  background:linear-gradient(180deg,#ffffff 0%, #f7faff 100%)!important;
  color:#162847!important;
  border:1px solid #e7edf8!important;
}
.btn-danger{
  background:linear-gradient(180deg,#fff3f4 0%, #ffe9ec 100%)!important;
  color:#d53e4c!important;
}
.btn .icon{width:16px;height:16px}
.pill{
  border-radius:999px!important;
  background:#edf4ff!important;
  color:#3764d9!important;
  border:1px solid #dce8ff!important;
}
.kpi{
  border-radius:18px!important;
  background:linear-gradient(180deg,#f8fbff 0%, #f2f7ff 100%)!important;
  border:1px solid #e4eefc!important;
}
.history-card,
.score-card{
  border-radius:22px!important;
}
.history-card{
  padding:14px!important;
  background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%)!important;
}
.history-title{
  font-size:12px!important;
  font-weight:760!important;
  color:#14213c!important;
}
.history-meta{
  font-size:10px!important;
  line-height:1.45!important;
  color:#7b8398!important;
}
.score-top{
  padding:10px 12px!important;
  background:linear-gradient(180deg,#f8fbff 0%, #f1f6ff 100%)!important;
  border-bottom:1px solid #e7eefb;
}
.score-top b{font-size:12px!important;color:#173164}
.score-top span{font-size:10px!important;color:#74819a!important}
.score-body{
  grid-template-columns:1fr 42px 1fr!important;
}
.score-team{
  padding:15px 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  color:#121c33!important;
}
.stepper{
  grid-template-columns:44px 1fr 44px!important;
}
.stepper button{
  height:46px!important;
  border-radius:14px!important;
  background:#eef4ff!important;
  color:#2457ea!important;
  box-shadow:none!important;
}
.score-num-input{
  height:48px!important;
  border-radius:15px!important;
  background:#f5f8fd!important;
  color:#11223f!important;
  font-size:18px!important;
  border:1px solid #e6edf9;
}
.score-num-input:focus{
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(65,115,255,.10)!important;
}
.bottom-nav{
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  width:min(440px,calc(100% - 22px));
  padding:7px;
  border-radius:26px;
  background:linear-gradient(180deg,#07112b 0%, #0b1433 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 44px rgba(7,17,43,.36);
  grid-template-columns:repeat(5,1fr);
}
.nav-btn{
  min-height:58px;
  border-radius:18px;
  color:rgba(255,255,255,.62);
  font-size:9px!important;
  gap:4px!important;
}
.nav-btn .icon{
  width:18px!important;height:18px!important;
}
.nav-btn.active{
  background:linear-gradient(135deg,#d8ebff 0%, #7bb3ff 100%)!important;
  color:#0d1c43!important;
  box-shadow:0 8px 20px rgba(110,154,255,.30)!important;
}
.nav-btn.active .icon{
  color:#0d1c43!important;
}
.nav-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(123,179,255,.22);
}
.modal-card{
  border-radius:28px!important;
  padding:18px!important;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)!important;
}
.login-icon-wrap{
  background:linear-gradient(135deg,#193ea9 0%, #3d6dff 100%)!important;
  box-shadow:0 14px 30px rgba(38,84,210,.22);
}
.round-auto-card{
  padding:13px 14px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#f6faff 0%, #eef5ff 100%)!important;
}
.round-auto-label{
  color:#6f7c98!important;
}
.round-auto-heading b{
  color:#123372!important;
}
.round-auto-stats span{
  background:#fff!important;
  color:#60708e!important;
  border:1px solid #dce6f8!important;
}
.round-auto-copy{
  color:#5f6f8c!important;
}
.rank{
  background:#edf4ff!important;
  color:#2759d8!important;
}
.rank.top{
  background:linear-gradient(135deg,#275cff 0%, #5f8fff 100%)!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(39,92,255,.22);
}
.leader{
  color:#121f39!important;
}
.toast{
  border-radius:16px!important;
  background:#0b1433!important;
  color:#fff!important;
  box-shadow:0 16px 36px rgba(11,20,51,.28)!important;
}
.result-hero{
  min-height:130px!important;
  padding:20px!important;
  background:linear-gradient(180deg,#ffffff 0%, #f7faff 100%)!important;
  justify-content:flex-end!important;
}
.result-hero h2{
  color:#12203f!important;
  font-size:29px!important;
  letter-spacing:-.03em;
}
.table-card table th{
  color:#7a859b!important;
}
.table-card table td{
  color:#15223e!important;
}
.status-finished,
.badge-finished{
  background:#fff0f1!important;
  color:#d84d5b!important;
}
.status-active,
.badge-active{
  background:#edf8f1!important;
  color:#1f7a49!important;
}
a,button{
  -webkit-tap-highlight-color:transparent;
}
@media(max-width:560px){
  .app{
    width:100%;
    padding:12px 10px 110px;
  }
  .topbar{
    top:8px;
    padding:10px 10px;
    border-radius:18px;
  }
  .hero{
    min-height:188px;
    padding:22px 18px;
    border-radius:28px;
  }
  .hero h2{
    font-size:31px;
  }
  .hero p{
    max-width:100%;
    font-size:13px;
  }
  .card{
    border-radius:24px!important;
    padding:15px!important;
  }
  .grid{
    gap:12px;
  }
  .score-card,.history-card,.round-auto-card,.modal-card{
    border-radius:22px!important;
  }
  #play .inline{
    gap:10px!important;
  }
  .bottom-nav{
    width:calc(100% - 20px);
    bottom:12px;
    border-radius:24px;
  }
}


/* =========================================================
   v32 — Mobile App Dashboard
   ========================================================= */
#history{
  padding-top:2px;
}
.home-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:10px 2px 18px;
  padding:0 2px;
}
.home-kicker{
  font-size:10px;
  font-weight:780;
  letter-spacing:.14em;
  color:#8590a7;
  margin-bottom:6px;
}
.home-title{
  margin:0;
  font-size:34px;
  line-height:1;
  letter-spacing:-.045em;
  color:#10182b;
  font-weight:760;
}
.home-sub{
  margin:9px 0 0;
  max-width:315px;
  color:#748099;
  font-size:12.5px;
  line-height:1.45;
}
.home-profile{
  position:relative;
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.8), transparent 28%),
    linear-gradient(145deg,#244bcc 0%,#5787ff 72%,#ff7581 140%);
  color:#fff;
  font-size:16px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(33,76,188,.22);
  border:3px solid rgba(255,255,255,.92);
}
.profile-status-dot{
  position:absolute;
  right:-1px;
  bottom:2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#23c46e;
  border:2px solid #fff;
}
.home-hero{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,104,116,.18), transparent 34%),
    linear-gradient(140deg,#285cff 0%,#5f91ff 48%,#8dbaff 100%);
  box-shadow:0 22px 46px rgba(37,83,187,.24);
  color:#fff;
}
.home-hero:before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-78px;bottom:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.home-hero-tabs{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:6px;
  border-radius:22px;
  background:rgba(14,39,110,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-tab{
  min-height:42px;
  border:0;
  border-radius:17px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:740;
}
.home-tab.active{
  background:#fff;
  color:#173475;
  box-shadow:0 8px 20px rgba(22,54,137,.16);
}
.home-hero-body{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px;
  gap:10px;
  align-items:center;
  padding:24px 8px 18px;
}
.home-hero-label{
  font-size:9px;
  letter-spacing:.16em;
  font-weight:800;
  color:rgba(255,255,255,.72);
}
.home-session-name{
  margin-top:7px;
  font-size:27px;
  line-height:1.02;
  font-weight:790;
  letter-spacing:-.035em;
  color:#fff;
}
.home-session-meta{
  margin-top:7px;
  max-width:260px;
  font-size:11.5px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
}
.home-hero-orb{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  justify-self:end;
  border-radius:25px;
  background:rgba(9,20,54,.78);
  color:#fff;
  box-shadow:0 16px 28px rgba(10,32,92,.20);
}
.home-hero-orb .icon{width:29px;height:29px}
.home-progress-wrap{
  margin-top:17px;
  display:flex;
  align-items:center;
  gap:9px;
}
.home-progress-track{
  flex:1;
  max-width:185px;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.home-progress-track span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:#fff;
  transition:width .35s ease;
}
.home-progress-label{
  font-size:9.5px;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
}
.home-hero-actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:8px;
}
.home-primary-action,
.home-secondary-action{
  min-height:49px;
  border:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-weight:760;
  font-size:12.5px;
}
.home-primary-action{
  background:#0b1433;
  color:#fff;
}
.home-secondary-action{
  background:rgba(255,255,255,.2);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
}
.home-primary-action .icon,
.home-secondary-action .icon{
  width:16px;height:16px;
}
.home-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:13px;
}
.home-stat-card{
  min-height:112px;
  border:1px solid #e6edf8;
  border-radius:26px;
  background:#fff;
  padding:15px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:left;
  box-shadow:0 12px 28px rgba(24,50,105,.07);
}
.home-stat-icon{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9f2ff;
  color:#2c5ee5;
}
.home-stat-icon.accent-red{
  background:#fff0f1;
  color:#e75865;
}
.home-stat-icon .icon{
  width:18px;height:18px;
}
.home-stat-card span{
  display:block;
  font-size:10px;
  font-weight:670;
  color:#7b849a;
}
.home-stat-card strong{
  display:block;
  margin-top:2px;
  color:#11192c;
  font-size:26px;
  line-height:1;
  letter-spacing:-.035em;
}
.home-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:24px 3px 10px;
}
.home-section-kicker{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:#98a0b1;
}
.home-section-head h3{
  margin:0;
  color:#111a2f;
  font-size:17px;
  letter-spacing:-.025em;
}
.home-quick-list{
  display:grid;
  gap:9px;
}
.home-quick-card{
  width:100%;
  min-height:76px;
  border:1px solid #e8edf6;
  border-radius:24px;
  background:#fff;
  box-shadow:0 10px 26px rgba(20,42,90,.055);
  padding:10px 11px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 42px;
  gap:10px;
  align-items:center;
  text-align:left;
}
.home-quick-icon,
.home-quick-arrow{
  display:grid;
  place-items:center;
  border-radius:50%;
}
.home-quick-icon{
  width:46px;height:46px;
  background:#dfeaff;
  color:#2456db;
}
.home-quick-icon.soft-blue{
  background:#eef4ff;
  color:#315fe0;
}
.home-quick-icon.soft-red{
  background:#fff0f2;
  color:#e55361;
}
.home-quick-icon .icon{width:18px;height:18px}
.home-quick-copy{
  min-width:0;
}
.home-quick-copy b{
  display:block;
  color:#121b30;
  font-size:13px;
  font-weight:760;
}
.home-quick-copy small{
  display:block;
  margin-top:3px;
  color:#838ca0;
  font-size:10.5px;
  line-height:1.35;
}
.home-quick-arrow{
  width:38px;height:38px;
  justify-self:end;
  background:#f6f8fc;
  color:#34415d;
}
.home-quick-arrow .icon{width:16px;height:16px}
.session-list-heading{
  align-items:center;
}
.cloud-status.compact{
  margin:0!important;
  min-height:30px!important;
  padding:0 9px!important;
  background:#fff!important;
  border:1px solid #e6edf8!important;
  color:#72809a!important;
  font-size:9px!important;
}
.home-session-list{
  border-radius:26px;
}
.home-session-list .history-card{
  min-height:84px;
  border-radius:22px!important;
  margin-bottom:9px!important;
  padding:13px!important;
}
.home-session-list .history-title{
  font-size:12.5px!important;
}
.home-session-list .history-meta{
  font-size:9.5px!important;
}
.home-save-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:11px 2px 0;
}
.home-save-tools .btn{
  flex:1;
}
@media(max-width:390px){
  .home-title{font-size:31px}
  .home-session-name{font-size:24px}
  .home-hero-body{grid-template-columns:minmax(0,1fr) 68px}
  .home-hero-orb{width:64px;height:64px;border-radius:22px}
  .home-quick-card{grid-template-columns:44px minmax(0,1fr) 38px}
}


/* =========================================================
   v33 — Red Gradient + Spacious Mobile Layout
   ========================================================= */
:root{
  --blue:#d74b62;
  --blue-2:#ef7386;
  --blue-3:#ffc0ca;
  --sunset:#fff1f3;
  --red:#d94d63;
  --bg:#faf5f6;
  --card:#ffffff;
  --ink:#15141a;
  --muted:#75707c;
  --line:#f0e6e8;
  --soft:#fbf6f7;
  --shadow:0 16px 40px rgba(165,56,78,.12);
  --shadow-soft:0 10px 26px rgba(126,36,58,.08);
}
html,body{
  background:
    radial-gradient(circle at 10% 4%, rgba(255,187,198,.30), transparent 26%),
    radial-gradient(circle at 93% 10%, rgba(231,88,108,.10), transparent 22%),
    radial-gradient(circle at 60% 92%, rgba(255,212,220,.18), transparent 28%),
    linear-gradient(180deg,#fff8f9 0%, #fbf4f5 56%, #f8f1f2 100%) !important;
}
.app{
  width:min(560px,100%) !important;
  padding:16px 14px 116px !important;
}
.topbar{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(255,255,255,.88)!important;
}
.icon-btn{
  color:#8c2437!important;
}
.hero{
  min-height:200px!important;
  padding:26px 22px!important;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.20), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.14), transparent 24%),
    linear-gradient(135deg,#d74963 0%, #eb6c81 45%, #f7a0ad 100%) !important;
  box-shadow:0 18px 40px rgba(182,68,89,.18)!important;
}
.hero:after{
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 72%)!important;
}
.readonly-note,
.session-gate-note{
  background:rgba(255,255,255,.16)!important;
}
.btn-navy{
  background:linear-gradient(135deg,#c53d57 0%, #e15d74 100%)!important;
  box-shadow:0 10px 22px rgba(194,63,86,.18)!important;
}
.btn-soft{
  color:#571a28!important;
}
.home-head{
  margin:12px 2px 20px!important;
}
.home-title{
  font-size:35px!important;
}
.home-sub{
  margin-top:10px!important;
  max-width:330px!important;
  line-height:1.58!important;
}
.home-profile{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.84), transparent 28%),
    linear-gradient(145deg,#c93e58 0%,#e5697f 60%,#f7b3bf 130%) !important;
  box-shadow:0 12px 26px rgba(190,72,94,.22)!important;
}
.home-hero{
  border-radius:34px!important;
  padding:14px!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(140deg,#cf4560 0%,#e86a80 48%,#f5a0ae 100%) !important;
  box-shadow:0 22px 46px rgba(192,70,93,.24)!important;
}
.home-tab.active{
  color:#7e2234!important;
}
.home-primary-action{
  background:#321019!important;
}
.home-stat-icon{
  background:#fff0f2!important;
  color:#d24a61!important;
}
.home-stat-icon.accent-red{
  background:#ffe6ea!important;
  color:#d9435b!important;
}
.home-quick-icon{
  background:#fff0f2!important;
  color:#cd465f!important;
}
.home-quick-icon.soft-blue,
.home-quick-icon.soft-red{
  background:#fff2f4!important;
  color:#cd465f!important;
}
.home-quick-arrow{
  background:#fbf5f6!important;
  color:#793141!important;
}
.card,
.score-card,
.history-card,
.round-auto-card,
.modal-card{
  border-radius:28px!important;
  box-shadow:var(--shadow-soft)!important;
}
.card{
  padding:18px!important;
}
.card h3{
  font-size:17px!important;
  margin-bottom:7px!important;
}
.sub{
  margin-bottom:16px!important;
  line-height:1.65!important;
  font-size:13px!important;
}
.field{
  margin-bottom:14px!important;
}
.field label{
  margin-bottom:9px!important;
  letter-spacing:.15em!important;
}
.input,.select{
  min-height:56px!important;
  border-radius:19px!important;
  padding:15px 16px!important;
}
#play .grid,
#lifetime .grid,
#result .grid{
  gap:16px!important;
}
#play .card,
#lifetime .card,
#result .card{
  overflow:visible!important;
}
#play .s4,
#play .s5,
#play .s7,
#play .s8,
#lifetime .s4,
#lifetime .s5,
#lifetime .s7,
#lifetime .s8{
  grid-column:span 12!important;
}
#play .inline{
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
#play .inline .field{
  min-width:0;
}
#play .inline .field label{
  font-size:10px!important;
  white-space:normal!important;
  line-height:1.25!important;
}
.round-auto-card{
  margin-top:8px!important;
  padding:15px!important;
  background:linear-gradient(180deg,#fff7f8 0%, #fff1f3 100%) !important;
}
.round-auto-heading b{
  color:#7b2033!important;
}
.round-auto-stats{
  gap:7px!important;
}
.round-auto-stats span{
  min-height:28px!important;
  padding:0 10px!important;
  border-color:#f1d8de!important;
  color:#845468!important;
}
.round-auto-copy{
  margin-top:10px!important;
  padding-top:10px!important;
  color:#85606b!important;
  line-height:1.5!important;
}
.match-card,
.score-card,
.history-card{
  border-radius:24px!important;
}
.score-top{
  padding:12px 13px!important;
}
.score-body{
  gap:8px!important;
}
.score-team{
  padding:16px 14px!important;
  line-height:1.35!important;
}
.stepper{
  grid-template-columns:46px 1fr 46px!important;
}
.stepper button{
  background:#fff0f3!important;
  color:#bd3953!important;
}
.score-num-input{
  background:#fff7f8!important;
  border-color:#f1dfe3!important;
}
.rank{
  background:#fff0f2!important;
  color:#c53f59!important;
}
.rank.top{
  background:linear-gradient(135deg,#c9415a 0%, #ed7488 100%)!important;
  box-shadow:0 10px 20px rgba(201,65,90,.22)!important;
}
.bottom-nav{
  background:linear-gradient(180deg,#2e1018 0%, #18080d 100%)!important;
}
.nav-btn.active{
  background:linear-gradient(135deg,#ffe1e7 0%, #f7a2b2 100%)!important;
  color:#4b1220!important;
  box-shadow:0 8px 20px rgba(223,101,123,.28)!important;
}
.toast{
  background:#241017!important;
}
.result-hero{
  min-height:144px!important;
  padding:22px!important;
}
.result-hero h2{
  font-size:31px!important;
}
#lifetime .hero{
  min-height:188px!important;
}
#lifetime .hero p{
  max-width:100%!important;
  line-height:1.6!important;
}
#lifetime .card{
  padding:16px!important;
}
#lifetimeLeaderboard{
  margin-top:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
#lifetimeLeaderboard table{
  min-width:920px;
  width:max-content;
  border-collapse:separate;
  border-spacing:0;
}
#lifetimeLeaderboard th,
#lifetimeLeaderboard td{
  padding:12px 12px!important;
  white-space:nowrap;
  vertical-align:middle;
}
#lifetimeLeaderboard th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
}
#lifetimeLeaderboard .leader{
  min-width:170px;
  white-space:normal;
}
.king-title-row{
  gap:14px!important;
  align-items:center!important;
}
.king-title-row h2{
  font-size:31px!important;
}
.king-crown{
  width:58px!important;
  height:58px!important;
  background:rgba(255,255,255,.15)!important;
}
@media(max-width:860px){
  .app{
    width:min(100%,560px)!important;
  }
  #play .grid,
  #lifetime .grid,
  #result .grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  .app{
    width:100%!important;
    padding:14px 12px 116px!important;
  }
  .hero{
    min-height:186px!important;
    border-radius:30px!important;
    padding:22px 18px!important;
  }
  .hero h2{
    font-size:30px!important;
  }
  .card{
    border-radius:26px!important;
    padding:16px!important;
  }
  .home-hero{
    border-radius:30px!important;
  }
  .home-title{
    font-size:32px!important;
  }
  .home-hero-body{
    grid-template-columns:minmax(0,1fr) 70px!important;
    padding:20px 6px 16px!important;
  }
  .home-session-name{
    font-size:24px!important;
  }
  .home-progress-wrap{
    flex-wrap:wrap;
  }
  .home-progress-track{
    max-width:none!important;
    width:100%;
  }
  .home-hero-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .home-stats-grid{
    grid-template-columns:1fr 1fr!important;
  }
  #play .inline{
    grid-template-columns:1fr 1fr!important;
  }
  #play .inline .select{
    font-size:15px!important;
    padding-right:36px!important;
  }
  #lifetimeLeaderboard{
    margin-left:-2px;
    margin-right:-2px;
  }
}
@media(max-width:400px){
  .home-stats-grid{
    grid-template-columns:1fr!important;
  }
  .home-hero-actions{
    grid-template-columns:1fr!important;
  }
  #play .inline{
    grid-template-columns:1fr!important;
  }
  #play .inline .field label{
    white-space:nowrap!important;
  }
  #lifetimeLeaderboard table{
    min-width:860px;
  }
}


/* =========================================================
   v34 — Elegant mobile refinement
   ========================================================= */
:root{
  --blue:#7f2434;
  --blue-2:#a03446;
  --blue-3:#c66d7d;
  --red:#c94d5f;
  --bg:#f7f4f5;
  --card:#ffffff;
  --ink:#141317;
  --muted:#6f6a74;
  --line:#ebe4e7;
  --soft:#fbf9fa;
  --shadow:0 16px 42px rgba(68,20,30,.10);
  --shadow-soft:0 10px 26px rgba(68,20,30,.07);
}
html,body{
  background:
    radial-gradient(circle at 8% 5%, rgba(237,225,229,.9), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(111,26,44,.06), transparent 24%),
    linear-gradient(180deg,#fbf8f9 0%, #f6f3f4 52%, #f4f0f1 100%) !important;
}
.topbar{
  box-shadow:0 10px 26px rgba(28,25,30,.06)!important;
}
.icon-btn{
  color:#692231!important;
}
.hero,
.home-hero{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(135deg,#581825 0%, #873044 48%, #b25e70 100%) !important;
  box-shadow:0 18px 42px rgba(87,24,37,.18)!important;
}
.hero h2,.home-session-name,.home-title{
  letter-spacing:-.04em!important;
}
.home-title{
  color:#17151a!important;
}
.home-sub, .sub, .home-section-kicker, .home-kicker{
  color:#7e7782!important;
}
.home-profile{
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.84), transparent 28%),
    linear-gradient(145deg,#4f1421 0%,#873044 64%,#c37a88 135%) !important;
}
.home-primary-action{
  background:#1b1216!important;
}
.home-secondary-action{
  background:rgba(255,255,255,.16)!important;
}
.btn-navy{
  background:linear-gradient(135deg,#5e1c2a 0%, #8a3345 100%) !important;
}
.home-stat-icon,
.home-quick-icon,
.rank{
  background:#f7ecef!important;
  color:#8c2d40!important;
}
.home-quick-arrow{
  color:#692231!important;
}
.rank.top{
  background:linear-gradient(135deg,#5f1c2a 0%, #8f3346 100%) !important;
}
.nav-btn.active{
  background:linear-gradient(135deg,#f2dde3 0%, #dfb5bf 100%) !important;
  color:#46161f!important;
}
.bottom-nav{
  background:linear-gradient(180deg,#22161a 0%, #130d10 100%) !important;
}
.card,.score-card,.history-card,.round-auto-card,.modal-card{
  border-radius:28px!important;
  box-shadow:var(--shadow-soft)!important;
}
.card{padding:18px!important}
.sub{line-height:1.62!important;font-size:13px!important}
.field{margin-bottom:15px!important}
.input,.select{min-height:56px!important}
#play .grid,
#score .grid,
#lifetime .grid,
#result .grid{
  gap:18px!important;
}
#play .s4,#play .s5,#play .s7,#play .s8,
#score .s4,#score .s5,#score .s7,#score .s8,
#lifetime .s4,#lifetime .s5,#lifetime .s7,#lifetime .s8,
#result .s4,#result .s5,#result .s7,#result .s8{
  grid-column:span 12!important;
}
#play .inline{
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
#scoreboard, #leaderboard{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#leaderboard table, #scoreboard table{
  width:100%;
}
#leaderboard{
  padding-bottom:4px;
}
#leaderboard table{
  min-width:640px;
}
#score .card h3, #result .card h3, #lifetime .card h3, #play .card h3{
  margin-bottom:7px!important;
}
.round-auto-card{
  padding:16px!important;
  background:linear-gradient(180deg,#fcf6f7 0%, #f9f1f3 100%) !important;
}
.round-auto-stats{
  flex-wrap:wrap!important;
  gap:8px!important;
}
.round-auto-copy{
  line-height:1.55!important;
}
#lifetimeLeaderboard{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
#lifetimeLeaderboard table{
  min-width:980px;
}
#lifetimeLeaderboard .leader{
  min-width:180px;
}
.result-hero{
  min-height:160px!important;
  padding:24px!important;
}
.result-hero h2{
  font-size:34px!important;
  color:#FFFFFF!important;
}
.result-hero p{
  font-size:14px!important;
  line-height:1.6!important;
}
.result-story-note{
  font-size:12px;
}
@media(max-width:560px){
  .app{
    width:100%!important;
    padding:14px 12px 118px!important;
  }
  #play .inline{
    grid-template-columns:1fr!important;
  }
  .home-stats-grid{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:400px){
  .home-stats-grid,
  .home-hero-actions{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v35 — Player Accounts + Matchmaking
   ========================================================= */
.google-login-btn{
  width:100%;min-height:52px;border:1px solid #e5e1e3;border-radius:18px;background:#fff;color:#1d1a1e;
  display:flex;align-items:center;justify-content:center;gap:10px;font-weight:720;font-size:13px;
  box-shadow:0 8px 18px rgba(25,18,21,.05);margin:14px 0 10px;
}
.google-g{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #e4e4e4;color:#4285f4;font-weight:800;font-family:Arial,sans-serif}
.auth-divider{display:flex;align-items:center;gap:10px;color:#aaa2a6;font-size:10px;margin:2px 0 12px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#eee9eb;flex:1}.auth-divider span{text-transform:uppercase;letter-spacing:.12em}
.session-hub-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:20px 0 2px;padding:5px;border-radius:20px;background:#ece7e9}
.session-hub-tab{min-height:45px;border:0;border-radius:16px;background:transparent;color:#817980;font-size:11px;font-weight:760}
.session-hub-tab.active{background:#fff;color:#30151c;box-shadow:0 7px 18px rgba(44,20,28,.07)}
.session-hub-panel[hidden]{display:none!important}.find-match-help{font-size:11.5px;line-height:1.55;color:#7c747a;margin:-2px 3px 12px}
.session-card-v35{display:block!important;padding:16px!important}.session-card-main{min-width:0}.session-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.session-card-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.match-open-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:#f3ecee;color:#773043;font-size:8.5px;font-weight:760;white-space:nowrap}
.session-capacity-bar{height:5px;background:#eee9ea;border-radius:999px;overflow:hidden;margin-top:10px}.session-capacity-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6b2232,#a94b61)}
.matchmaking-host-panel{margin-top:13px;padding-top:13px;border-top:1px solid #eee8ea}.matchmaking-host-row{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.match-toggle{border:0;border-radius:999px;min-height:34px;padding:0 10px;background:#f3eff0;color:#82777c;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:7px}.match-toggle span{width:8px;height:8px;border-radius:50%;background:#a49a9e}.match-toggle.on{background:#f4eaed;color:#6c2435}.match-toggle.on span{background:#2db674}
.capacity-control{display:flex;align-items:center;gap:6px;color:#8a8186;font-size:9.5px;font-weight:700}.capacity-control select{height:34px;border:1px solid #e6dfe2;border-radius:10px;background:#fff;color:#332b2f;padding:0 8px}
.join-request-list{margin-top:12px;display:grid;gap:7px}.join-request-heading{font-size:9px;font-weight:800;letter-spacing:.09em;color:#8a7e83;text-transform:uppercase}.join-request-heading span{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#76283a;color:#fff;margin-left:4px}
.join-request-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid #eee5e8;border-radius:15px;background:#fbf9fa}.join-request-row b{display:block;font-size:11.5px}.join-request-row small{display:block;margin-top:2px;color:#8d8489;font-size:9.5px}.join-request-actions{display:flex;gap:5px}
.match-card-v35{padding:15px;border:1px solid #ebe4e6;border-radius:24px;background:#fff;box-shadow:0 10px 26px rgba(45,24,31,.055);margin-bottom:10px}.match-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.match-card-top h4{margin:0;font-size:15px;letter-spacing:-.02em;color:#20191d}.match-card-top p{margin:4px 0 0;font-size:10px;color:#8b8287}.match-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.match-card-meta span{padding:6px 8px;border-radius:999px;background:#f7f3f4;color:#70676d;font-size:9px;font-weight:680}.match-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.match-card-bottom small{color:#8f868b;font-size:9.5px}.match-request-actions{display:flex;align-items:center;gap:6px}.match-state-pill{display:inline-flex;align-items:center;min-height:31px;padding:0 10px;border-radius:999px;background:#f1edef;color:#776d72;font-size:9.5px;font-weight:730}.match-state-pill.pending{background:#fff4df;color:#946a18}.match-state-pill.joined{background:#eaf7ef;color:#28734a}.match-state-pill.full{background:#f4ecee;color:#8a3447}
.player-type-badge{display:inline-flex;vertical-align:middle;align-items:center;min-height:20px;padding:0 7px;margin-left:5px;border-radius:999px;font-size:8px;font-weight:780}.player-type-badge.guest{background:#f1eef0;color:#83797e}.player-type-badge.host{background:#f3e9ec;color:#722a3b}.suggest-item{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}.suggest-player-badge{padding:4px 6px;border-radius:999px;background:#eee7ea;color:#702c3c;font-size:8px;font-weight:760}.suggest-player-badge.guest{background:#f3f1f2;color:#8e858a}
@media(max-width:560px){.session-card-title-row{display:block}.session-card-badges{justify-content:flex-start;margin-top:7px}.matchmaking-host-row{align-items:stretch}.capacity-control{margin-left:auto}.join-request-row{align-items:flex-start;flex-direction:column}.join-request-actions{width:100%}.join-request-actions .btn{flex:1}.match-card-bottom{align-items:flex-end}.session-hub-tabs{position:sticky;top:76px;z-index:12;backdrop-filter:blur(16px)}}


/* =========================================================
   v36 — Fix Partner, Player Profile, Session Schedule
   ========================================================= */
.profile-card{width:min(440px,100%)}
.profile-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.profile-head h3{margin:2px 0 4px}.profile-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.profile-avatar-edit{position:relative;width:82px;height:82px;flex:0 0 82px;padding:0;border:0;background:transparent}
.profile-avatar{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f1e5e8,#fbf7f8);border:3px solid #fff;box-shadow:0 10px 24px rgba(60,22,31,.12);color:#722738}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}.profile-avatar .icon{width:28px;height:28px}
.profile-camera{position:absolute;right:-2px;bottom:1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#22161a;color:#fff;border:3px solid #fff}.profile-camera .icon{width:12px;height:12px}
.profile-field-hint{margin-top:6px;color:#9a9198;font-size:10px;line-height:1.4}
.player-inline-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f4ecee;color:#76293a;vertical-align:middle;margin-right:6px}.player-inline-icon .icon{width:12px;height:12px}
.player-inline-icon.guest{background:#f3f3f4;color:#89858b}
.fixed-partner-preview{margin-top:10px;padding:12px;border-radius:16px;background:#faf5f6;border:1px solid #eee3e6}
.fixed-partner-preview h4{margin:0 0 8px;font-size:11px}.fixed-partner-grid{display:grid;gap:6px}.fixed-partner-pair{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:12px;background:#fff;border:1px solid #eee7e9;font-size:11px;font-weight:650}.fixed-partner-pair .icon{width:13px;height:13px;color:#7a2b3c}
.session-schedule{display:grid;gap:6px;margin-top:9px}.session-schedule-line{display:flex;align-items:flex-start;gap:7px;color:#655f67;font-size:10.5px;line-height:1.35}.session-schedule-line .icon{width:14px;height:14px;flex:0 0 14px;color:#792c3e;margin-top:1px}
.session-map-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:#f7eff1;color:#75283a;padding:7px 9px;border-radius:10px;font-size:9.5px;font-weight:700}.session-map-btn .icon{width:13px;height:13px}
.match-card-schedule{display:grid;gap:5px;margin:10px 0}.match-card-schedule .session-schedule-line{font-size:10px}
.create-session-hint{display:flex;align-items:flex-start;gap:6px}.create-session-hint .icon{width:13px;height:13px;flex:0 0 13px;margin-top:1px}
.session-edit-schedule{margin-top:13px;padding-top:13px;border-top:1px solid #eee8ea}
@media(max-width:560px){#playerProfileModal{place-items:end center;padding:0}.profile-card{width:100%;max-height:92vh;border-radius:28px 28px 0 0!important;padding:22px 18px 30px!important}.profile-head{align-items:flex-start}.create-session-datetime{grid-template-columns:1fr 1fr!important}.session-edit-schedule .inline{grid-template-columns:1fr 1fr!important}}
@media(max-width:390px){.create-session-datetime,.session-edit-schedule .inline{grid-template-columns:1fr!important}}


/* =========================================================
   v37 — Dummy Test Accounts
   ========================================================= */
.test-login-card{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  border:1px dashed rgba(108,37,53,.24);
  background:linear-gradient(180deg,#fcf8f9 0%,#f7f1f3 100%);
}
.test-login-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.test-login-head>span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:#702334;
}
.test-login-head small{
  color:#93868c;
  font-size:9px;
}
.test-login-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.test-login-btn{
  min-height:60px;
  border:1px solid #eadde1;
  background:#fff;
  border-radius:15px;
  padding:9px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-items:center;
  text-align:left;
  color:#27171c;
}
.test-login-btn:active{transform:scale(.985)}
.test-login-btn.admin{
  background:#21171b;
  border-color:#21171b;
  color:#fff;
}
.test-login-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f5e8ec;
  color:#78283a;
}
.test-login-btn.admin .test-login-icon{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.test-login-icon .icon{width:15px;height:15px}
.test-login-btn b{
  display:block;
  font-size:11px;
}
.test-login-btn small{
  display:block;
  margin-top:2px;
  font-size:8.5px;
  color:#95858b;
  overflow:hidden;
  text-overflow:ellipsis;
}
.test-login-btn.admin small{color:#c9bdc1}
.test-login-password{
  margin-top:8px;
  font-size:8.5px;
  text-align:center;
  color:#96868c;
}
.test-role-badge{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:0 5px;
  border-radius:999px;
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  background:#f2dfe4;
  color:#752336;
  border:1px solid #e3c9d0;
}
.test-mode-indicator{
  background:#f8e9ed!important;
  color:#74283a!important;
  border-color:#e8cfd6!important;
}
@media(max-width:390px){
  .test-login-grid{grid-template-columns:1fr}
}


/* =========================================================
   v38 — Player avatars + Guest identity
   ========================================================= */
.profile-photo-hint{
  margin:-8px 0 14px;
  text-align:center;
  color:#958b91;
  font-size:9.5px;
  line-height:1.4;
}
.player-identity{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  vertical-align:middle;
}
.player-identity-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-player-avatar{
  width:23px;
  height:23px;
  flex:0 0 23px;
  display:inline-grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(145deg,#efe3e6,#fbf8f9);
  border:1px solid rgba(104,36,52,.09);
  color:#72283a;
  vertical-align:middle;
}
.mini-player-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mini-player-avatar .icon{
  width:11px;
  height:11px;
}
.mini-player-avatar.guest{
  background:#f1f1f2;
  color:#87838a;
  border-color:#e6e4e6;
}
.mini-player-avatar.sm{
  width:20px;
  height:20px;
  flex-basis:20px;
}
.mini-player-avatar.lg{
  width:27px;
  height:27px;
  flex-basis:27px;
}
.player-identity .player-type-badge{
  margin-left:1px;
}
.player-row .player-name{
  display:flex;
  align-items:center;
  min-width:0;
}
.team-player-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}
.team.right .team-player-list,
.score-team.right .team-player-list{
  justify-content:flex-end;
}
.team-player-inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.team-player-inline .mini-player-avatar{
  width:20px;
  height:20px;
  flex-basis:20px;
}
.team-plus{
  color:#a49ca1;
  font-size:10px;
  font-weight:750;
}
.score-team{
  min-width:0;
}
.leader .player-identity{
  max-width:190px;
}
#lifetimeLeaderboard .leader .player-identity{
  max-width:220px;
}
.join-request-row b .player-identity{
  max-width:220px;
}
.match-host-inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  vertical-align:middle;
}
@media(max-width:390px){
  .leader .player-identity{max-width:155px}
  #lifetimeLeaderboard .leader .player-identity{max-width:190px}
}


/* =========================================================
   v49 — Journey UX + Borderless Current Session
   ========================================================= */
#play{
  padding-top:18px;
}
.play-session-bar{
  position:relative;
  z-index:120;
  margin:12px 0 22px;
  padding:8px 2px 4px;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.play-session-layout{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
}
.play-session-copy{
  min-width:0;
  flex:1;
}
.play-session-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:#8f8186;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
}
.play-session-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7d3349;
  box-shadow:0 0 0 5px rgba(125,51,73,.07);
}
.play-session-title-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.play-session-title{
  margin:0;
  max-width:720px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#20171b;
  font-size:28px;
  line-height:1.08;
  font-weight:780;
  letter-spacing:-.045em;
}
.session-role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.session-role-badge.host{
  background:#6f293f;
  color:#fff;
  box-shadow:0 6px 18px rgba(111,41,63,.16);
}
.session-role-badge.player{
  background:#f1ecee;
  color:#7f7176;
}
.play-session-primary{
  margin-top:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#5e5559;
  font-size:11px;
  line-height:1.45;
  font-weight:580;
}
.play-session-secondary{
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9b9094;
  font-size:10px;
  line-height:1.45;
}
.play-session-picker{
  position:relative;
  z-index:130;
  flex:0 0 auto;
}
.session-picker-trigger{
  height:42px;
  min-width:154px;
  max-width:220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px 0 14px;
  border:1px solid #e7dfe2;
  border-radius:13px;
  background:#fff;
  color:#382b30;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(39,24,31,.04);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.session-picker-trigger:hover{
  background:#faf7f8;
  border-color:#dacbd0;
}
.session-picker-trigger:active{
  transform:scale(.985);
}
.session-picker-trigger:disabled{
  opacity:.45;
  cursor:default;
}
.session-picker-trigger-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.session-picker-trigger-label{
  color:#a09297;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1;
}
.session-picker-trigger-value{
  display:block;
  max-width:150px;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#382b30;
  font-size:10px;
  font-weight:720;
}
.session-picker-trigger .icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:#8b7d82;
  transition:transform .18s ease;
}
.session-picker-trigger.open .icon{
  transform:rotate(180deg);
}
.play-session-menu{
  position:absolute;
  z-index:9999;
  top:calc(100% + 8px);
  right:0;
  width:min(340px,calc(100vw - 32px));
  max-height:330px;
  overflow:auto;
  padding:7px;
  border:1px solid rgba(77,44,55,.10);
  border-radius:16px;
  background:rgba(255,255,255,.99);
  box-shadow:0 20px 48px rgba(32,19,25,.16);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.play-session-menu[hidden]{
  display:none!important;
}
.play-session-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#302429;
  text-align:left;
  cursor:pointer;
}
.play-session-option:hover,
.play-session-option:focus-visible{
  outline:none;
  background:#f7f3f4;
}
.play-session-option.current{
  background:#f3ecef;
}
.play-session-option-copy{
  min-width:0;
}
.play-session-option-title{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:760;
}
.play-session-option-meta{
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#95898e;
  font-size:8.5px;
  font-weight:550;
}
.play-session-option-state{
  flex:0 0 auto;
  color:#8b7d82;
  font-size:7.5px;
  font-weight:820;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.play-session-option-state.host{
  color:#6f293f;
}
.play-session-empty{
  padding:16px 12px;
  color:#95898e;
  font-size:9.5px;
  text-align:center;
}

/* Journey polish */
.view > .topbar,
.view > .page-head{
  margin-bottom:18px;
}
.card{
  border-radius:18px;
}
.card h3{
  letter-spacing:-.015em;
}
.section-head{
  gap:14px;
}
.section-head > div:first-child{
  min-width:0;
}
.section-head .sub,
.muted,
.helper{
  line-height:1.45;
}
.btn{
  min-height:40px;
}
.btn.primary,
.btn.btn-primary{
  box-shadow:0 7px 18px rgba(111,41,63,.13);
}
#play .setup-main-card,
#play .rotation-main-card{
  padding-top:17px;
}
#play .setup-main-card h3{
  font-size:15px;
}
#play #players{
  max-height:none;
  overflow:visible;
  gap:7px;
}
#play #players .player-row{
  min-height:50px;
  padding:10px 11px;
}
#play #players .player-identity-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  line-height:1.28;
}
#session .segment,
#play .segment{
  margin-bottom:12px;
}
.bottom-nav{
  box-shadow:0 -10px 30px rgba(24,18,21,.055);
}
.bottom-nav button,
.nav button{
  min-height:52px;
}
.empty-state{
  padding:28px 18px;
  border-radius:16px;
}
.toast{
  border-radius:14px;
}
@media(max-width:620px){
  #play{
    padding-top:24px;
  }
  .play-session-bar{
    margin:16px 0 24px;
    padding:4px 0 2px;
  }
  .play-session-layout{
    display:block;
  }
  .play-session-title{
    font-size:26px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .play-session-primary,
  .play-session-secondary{
    white-space:normal;
  }
  .play-session-picker{
    margin-top:16px;
  }
  .session-picker-trigger{
    width:100%;
    max-width:none;
  }
  .session-picker-trigger-value{
    max-width:calc(100vw - 112px);
  }
  .play-session-menu{
    left:0;
    right:auto;
    width:100%;
    min-width:0;
  }
  .card{
    border-radius:16px;
  }
  #play .setup-main-card,
  #play .rotation-main-card{
    grid-column:span 12!important;
  }
}


/* =========================================================
   v48 — Session Picker Layer + Better Player List
   ========================================================= */
#play .play-session-bar{
  z-index:120;
  overflow:visible;
}
#play .play-session-picker{
  z-index:130;
}
#play .play-session-menu{
  z-index:9999;
}
#play > .grid{
  position:relative;
  z-index:1;
}
#play .card{
  position:relative;
  z-index:auto;
}
#play #players{
  max-height:none;
  overflow:visible;
  gap:7px;
}
#play #players .player-row{
  min-height:48px;
  padding:10px 11px;
}
#play #players .player-name,
#play #players .player-identity{
  width:100%;
  min-width:0;
}
#play #players .player-identity-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  line-height:1.25;
}
#play #players .player-row .icon-btn{
  flex:0 0 38px;
}
@media(min-width:760px){
  #play .setup-main-card{
    grid-column:span 5;
  }
  #play .rotation-main-card{
    grid-column:span 7;
  }
}


/* =========================================================
   v50 — Score Extra Round + Fix Partner Mode
   ========================================================= */
#fixPartnerModeField{
  padding:11px 12px;
  border:1px solid #eee6e8;
  border-radius:14px;
  background:#fbf9fa;
}
#fixPartnerModeField[hidden]{
  display:none!important;
}
.score-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}
.score-time-status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 9px;
  border-radius:999px;
  background:#f5f1f2;
  color:#85777c;
  font-size:8px;
  font-weight:760;
  letter-spacing:.025em;
  white-space:nowrap;
}
.score-time-status.good{
  background:#eef6f0;
  color:#507159;
}
.score-time-status.low{
  background:#faf2e8;
  color:#8b673c;
}
.score-time-status.ended{
  background:#f3edef;
  color:#86636d;
}
#scoreAddRoundButton{
  white-space:nowrap;
}
#scoreAddRoundButton .icon{
  width:13px;
  height:13px;
}
@media(max-width:620px){
  #score .section-head{
    align-items:flex-start;
  }
  #score .score-head-actions{
    width:100%;
    justify-content:flex-start;
    margin-top:4px;
  }
}


/* =========================================================
   v51 — Player Visibility + Session Capacity
   ========================================================= */
.session-hub-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.session-hub-tab .icon{width:14px;height:14px}
.find-match-title{display:flex;align-items:center;gap:8px}
.find-match-title .icon{width:17px;height:17px}
.session-capacity-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:31px;padding:0 12px;border-radius:999px;
  background:#f1ecee;color:#693247;font-size:11.5px;line-height:1;
  font-weight:850;letter-spacing:.045em;white-space:nowrap
}
.session-capacity-count.full{
  background:#6f293f;color:#fff;box-shadow:0 5px 14px rgba(111,41,63,.13)
}
.match-card-status-stack{display:flex;align-items:flex-end;flex-direction:column;gap:6px}
.joined-players-expand{margin-top:11px;border-top:1px solid #eee8ea}
.joined-players-expand summary{
  min-height:42px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;list-style:none;cursor:pointer;color:#6f6469;font-size:9.5px;
  font-weight:720;-webkit-tap-highlight-color:transparent
}
.joined-players-expand summary::-webkit-details-marker{display:none}
.joined-players-expand summary::after{content:"＋";margin-left:6px;color:#9c8f94;font-size:15px;font-weight:500}
.joined-players-expand[open] summary::after{content:"−"}
.joined-summary-left{display:flex;align-items:center;gap:7px}
.joined-summary-left .icon{width:14px;height:14px}
.joined-count{
  margin-left:auto;min-width:24px;height:24px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:999px;background:#f3eff0;
  color:#776b70;font-size:9px;font-weight:800
}
.joined-players-body{padding:2px 0 10px}
.joined-player-row{display:flex;align-items:center;gap:9px;min-height:38px;padding:5px 2px}
.joined-player-row + .joined-player-row{border-top:1px solid #f3eff0}
.joined-player-number{
  flex:0 0 22px;width:22px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;background:#f5f2f3;color:#8d8085;
  font-size:8px;font-weight:800
}
.joined-player-name{min-width:0;flex:1}
.joined-player-empty{padding:9px 2px 6px;color:#9a8f93;font-size:9px}
.lifetime-rating.pending{background:#f3eff0;color:#9a8f93}
.lifetime-substat.registered{color:#8c7c82}
@media(max-width:620px){
  .session-card-badges{gap:5px}
  .session-capacity-count{min-height:29px;padding:0 10px;font-size:10.5px}
}

\n/* =========================================================\n   v52 — Readability + Share + Notifications\n   ========================================================= */\nbody{font-size:16px}\n.home-kicker,.home-section-kicker,.play-session-eyebrow{font-size:10px}\n.home-sub,.home-session-meta,.play-session-primary{font-size:12px}\n.play-session-secondary,.history-meta,.find-match-help{font-size:11.5px}\n.card .sub,.helper,.muted{font-size:11.5px}\n.field label{font-size:10px}\n.input,.select{font-size:13px}\n.btn{font-size:12px}\n.btn.mini,.mini{font-size:10.5px}\n.session-hub-tab{font-size:12px}\n.session-status-pill,.session-owner-pill,.match-open-badge,.match-state-pill{font-size:9.5px}\n.match-card-meta{font-size:11.5px}\n.match-card-top h4,.history-title{font-size:16px}\n.match-card-top p{font-size:11px}\n.joined-players-expand summary{font-size:11px}\n.joined-player-row{font-size:12px}\n.lifetime-substat{font-size:9px}\ntable{font-size:11px}\n\n.match-open-badge{background:#EAF6EE!important;color:#357049!important;border:1px solid #D5EBDD!important}\n.match-open-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#48A868;display:inline-block;margin-right:5px}\n\n.player-avatar,.player-avatar.sm,.player-avatar.small{width:42px!important;height:42px!important;flex:0 0 42px!important}\n.player-avatar img{width:100%!important;height:100%!important;object-fit:cover}\n.player-avatar .icon{width:20px!important;height:20px!important}\n.joined-player-row .player-avatar,.joined-player-row .player-avatar.sm{width:44px!important;height:44px!important;flex-basis:44px!important}\n.match-host-inline .player-avatar,.match-host-inline .player-avatar.sm{width:34px!important;height:34px!important;flex-basis:34px!important}\n\n.session-share-btn{display:inline-flex;align-items:center;gap:6px}\n.match-card-bottom-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n\n.notification-permission-btn{position:relative;min-width:42px!important;padding-inline:11px!important}\n.notification-dot{position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#C1B8BB;border:2px solid #fff}\n.notification-dot[data-state="granted"]{background:#46A566}\n.notification-dot[data-state="denied"]{background:#B2545D}\n.notification-permission-btn[data-permission="granted"]{color:#6F293F}\n\n@media(max-width:620px){\n  .home-sub,.home-session-meta,.play-session-primary{font-size:12.5px}\n  .play-session-secondary,.history-meta,.find-match-help{font-size:12px}\n  .match-card-meta{font-size:12px}\n  .match-card-top h4,.history-title{font-size:17px}\n  .session-capacity-count{font-size:11.5px}\n  .player-avatar,.player-avatar.sm,.player-avatar.small{width:46px!important;height:46px!important;flex:0 0 46px!important}\n  .joined-player-row .player-avatar,.joined-player-row .player-avatar.sm{width:48px!important;height:48px!important;flex-basis:48px!important}\n}\n

/* =========================================================
   v53 — Reset Tools + Cleaner Header
   ========================================================= */
.brand h1{margin:0}
.brand > div{display:flex;align-items:center}
.topbar-actions{
  display:flex;align-items:center;justify-content:flex-end;
  gap:7px;flex-wrap:nowrap
}
.topbar-actions .btn{flex:0 0 auto}
.notification-permission-btn{
  width:40px;min-width:40px;padding:0;justify-content:center
}
.session-tool-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin:-7px 0 18px;padding:11px 2px 0;
  border-top:1px solid #eee8ea
}
.session-tool-copy{
  min-width:0;display:flex;flex-direction:column;gap:3px;
  color:#91858a;font-size:10px
}
.session-tool-label{
  color:#706368;font-size:8px;font-weight:850;letter-spacing:.12em
}
.session-tool-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto
}
.session-tool-btn{
  min-width:164px;min-height:40px;justify-content:center;white-space:nowrap
}
.reset-session-modal-card{max-width:470px}
.reset-impact-box{
  display:flex;align-items:flex-start;gap:9px;margin-top:15px;padding:12px;
  border-radius:13px;background:#f6f2f3;color:#74686d;
  font-size:11px;line-height:1.45
}
.reset-impact-box .icon{width:16px;height:16px;margin-top:1px;color:#6f293f}
.reset-modal-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:9px
}
.reset-modal-actions .btn{width:100%;justify-content:center}

@media(max-width:680px){
  .topbar-actions{gap:5px}
  .topbar-actions .access-btn span:not(.role-dot):not(.test-role-badge),
  .topbar-actions .desktop-label{display:none}
  .topbar-actions .access-btn{
    min-width:40px;width:40px;padding:0;justify-content:center
  }
  .session-tool-row{display:block;margin-top:-3px}
  .session-tool-copy{margin-bottom:9px}
  .session-tool-actions{width:100%}
  .session-tool-btn{
    min-width:0;width:100%;padding-left:8px;padding-right:8px;font-size:10px
  }
}


/* =========================================================
   v54 — Bigger Type + Logo-only Header
   ========================================================= */
.brand{
  gap:0!important;
}
.brand img{
  height:48px!important;
  width:auto!important;
}
.brand h1,
.brand small{
  display:none!important;
}

/* Global readability uplift */
body{
  font-size:17px!important;
}
.home-kicker,
.home-section-kicker,
.play-session-eyebrow,
.session-tool-label,
.field label{
  font-size:11px!important;
}
.home-sub,
.home-session-meta,
.play-session-primary,
.play-session-secondary,
.history-meta,
.find-match-help,
.card .sub,
.helper,
.muted,
.match-card-meta,
.match-card-top p{
  font-size:13px!important;
  line-height:1.5!important;
}
.input,
.select{
  font-size:14px!important;
}
.btn{
  font-size:13px!important;
}
.btn.mini,
.mini{
  font-size:12px!important;
}
.session-hub-tab,
.bottom-nav .nav-btn{
  font-size:11px!important;
}
.history-title,
.match-card-top h4{
  font-size:18px!important;
}
.session-status-pill,
.session-owner-pill,
.match-open-badge,
.match-state-pill,
.player-type-badge{
  font-size:10.5px!important;
}
.joined-players-expand summary,
.joined-player-row{
  font-size:13px!important;
}
.session-capacity-count{
  font-size:12.5px!important;
}
table{
  font-size:13px!important;
}
th{
  font-size:11px!important;
}
td{
  font-size:13px!important;
}

/* Leaderboard + King Club identity becomes visually dominant */
#leaderboard .leader .player-identity,
#lifetimeLeaderboard .leader .player-identity{
  gap:10px!important;
  align-items:center!important;
}
#leaderboard .leader .mini-player-avatar,
#leaderboard .leader .mini-player-avatar.sm,
#lifetimeLeaderboard .leader .mini-player-avatar,
#lifetimeLeaderboard .leader .mini-player-avatar.sm{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  border-width:2px!important;
}
#leaderboard .leader .mini-player-avatar .icon,
#lifetimeLeaderboard .leader .mini-player-avatar .icon{
  width:24px!important;
  height:24px!important;
}
#leaderboard .leader .player-identity-name,
#lifetimeLeaderboard .leader .player-identity-name{
  font-size:14px!important;
  font-weight:760!important;
  line-height:1.25!important;
}
#leaderboard .leader{
  min-width:210px!important;
}
#lifetimeLeaderboard .leader{
  min-width:240px!important;
}
#leaderboard td,
#lifetimeLeaderboard td{
  padding-top:14px!important;
  padding-bottom:14px!important;
}
.rank{
  width:34px!important;
  height:34px!important;
  font-size:12px!important;
}

@media(max-width:620px){
  .brand img{
    height:44px!important;
  }
  body{
    font-size:17px!important;
  }
  .home-sub,
  .home-session-meta,
  .play-session-primary,
  .play-session-secondary,
  .history-meta,
  .find-match-help,
  .card .sub,
  .helper,
  .muted,
  .match-card-meta{
    font-size:13.5px!important;
  }
  .history-title,
  .match-card-top h4{
    font-size:19px!important;
  }
  .btn{
    font-size:13px!important;
  }
  .btn.mini,
  .mini{
    font-size:12px!important;
  }
  #leaderboard .leader .mini-player-avatar,
  #leaderboard .leader .mini-player-avatar.sm,
  #lifetimeLeaderboard .leader .mini-player-avatar,
  #lifetimeLeaderboard .leader .mini-player-avatar.sm{
    width:58px!important;
    height:58px!important;
    flex:0 0 58px!important;
  }
  #leaderboard .leader .player-identity-name,
  #lifetimeLeaderboard .leader .player-identity-name{
    font-size:15px!important;
  }
  #leaderboard .leader{
    min-width:225px!important;
  }
  #lifetimeLeaderboard .leader{
    min-width:255px!important;
  }
}


/* =========================================================
   v56 — Sponsored Session
   ========================================================= */
.sponsored-create-box{
  margin-top:4px;
  padding:13px;
  border:1px solid rgba(183,140,56,.20);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,248,226,.72),rgba(255,255,255,.72));
}
.sponsored-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
}
.sponsored-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.sponsored-toggle-title{
  color:#5F491E;
  font-size:13px;
  font-weight:800;
}
.sponsored-toggle-sub{
  color:#9B875F;
  font-size:11px;
  line-height:1.4;
}
.sponsored-switch{
  position:relative;
  flex:0 0 auto;
}
.sponsored-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.sponsored-switch-track{
  width:46px;
  height:28px;
  display:block;
  padding:3px;
  border-radius:999px;
  background:#DED4BF;
  transition:background .18s ease;
}
.sponsored-switch-track span{
  width:22px;
  height:22px;
  display:block;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 7px rgba(68,49,18,.15);
  transition:transform .18s ease;
}
.sponsored-switch input:checked + .sponsored-switch-track{
  background:linear-gradient(135deg,#C8A456,#E1C77C);
}
.sponsored-switch input:checked + .sponsored-switch-track span{
  transform:translateX(18px);
}
.sponsored-name-field{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid rgba(183,140,56,.17);
}
.sponsor-preview-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
  color:#9A8966;
  font-size:10px;
}

.sponsor-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 9px;
  border:1px solid rgba(170,126,38,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,246,214,.95),rgba(244,224,163,.78));
  color:#7A5A1E;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(156,113,34,.08);
}
.sponsor-badge.compact{
  min-height:25px;
  padding:0 8px;
  font-size:8.5px;
}
.sponsor-badge.preview{
  box-shadow:none;
}
.play-sponsor-badge{
  min-height:25px;
}

.sponsored-session-card{
  position:relative;
  border-color:rgba(185,142,58,.20)!important;
  background:
    linear-gradient(135deg,
      rgba(255,249,230,.93) 0%,
      rgba(255,255,255,.86) 48%,
      rgba(246,228,176,.62) 100%
    )!important;
  box-shadow:
    0 14px 34px rgba(134,96,25,.08),
    inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.sponsored-session-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 92% 8%,rgba(213,171,78,.16),transparent 30%),
    linear-gradient(100deg,rgba(255,255,255,.18),transparent 42%);
}
.sponsored-session-card > *{
  position:relative;
  z-index:1;
}
.sponsored-session-card .session-capacity-bar{
  background:rgba(166,128,51,.12)!important;
}
.sponsored-session-card .session-capacity-bar span{
  background:linear-gradient(90deg,#B78C36,#E2C575)!important;
}
.sponsored-session-card .history-title,
.sponsored-session-card .match-card-top h4{
  color:#493616!important;
}
.sponsored-session-card .joined-players-expand{
  border-top-color:rgba(181,139,53,.17)!important;
}
.play-session-option-sponsor{
  display:block;
  margin-top:3px;
  color:#9B762D;
  font-size:7.5px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.07em;
}

@media(max-width:620px){
  .sponsored-create-box{
    padding:12px;
  }
  .sponsor-badge{
    font-size:9.5px;
  }
  .sponsored-toggle-title{
    font-size:13.5px;
  }
  .sponsored-toggle-sub{
    font-size:11.5px;
  }
}


/* =========================================================
   v57 — Sponsored in Edit Session
   ========================================================= */
.sponsored-edit-box{
  margin-top:13px;
}
#sessionActionScheduleWrap .sponsored-edit-box{
  margin-bottom:2px;
}


/* =========================================================
   v58 — Share Preview + Adaptive Result
   ========================================================= */














.result-shell{
  background:linear-gradient(145deg,#F8F5F6,#FFFFFF 52%,#F1EAEC)!important;
  border:1px solid rgba(111,41,63,.08)!important;
  box-shadow:0 18px 48px rgba(45,27,35,.08)!important
}
#result .card.s12{background:rgba(255,255,255,.72)}
#result .share-actions{margin-top:16px}



/* =========================================================
   v60 — Direct Native Share Sheet
   ========================================================= */
.session-share-btn{
  touch-action:manipulation;
}


/* =========================================================
   v62 — Guest History Claim / Merge
   ========================================================= */
.guest-history-profile-link{
  width:100%;
  margin:4px 0 14px;
  padding:12px;
  border:1px solid rgba(111,41,63,.09);
  border-radius:16px;
  background:linear-gradient(135deg,#FAF7F8,#FFFFFF);
  display:flex;
  align-items:center;
  gap:11px;
  color:#2A2024;
  text-align:left;
  cursor:pointer;
}
.guest-history-profile-link:hover{
  border-color:rgba(111,41,63,.18);
  background:#fff;
}
.guest-history-profile-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#F0E8EB;
  color:#6F293F;
}
.guest-history-profile-icon .icon{width:18px;height:18px}
.guest-history-profile-link > span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.guest-history-profile-link b{
  font-size:12.5px;
  font-weight:800;
}
.guest-history-profile-link small{
  color:#8B7F84;
  font-size:10.5px;
  line-height:1.35;
}
.guest-history-chevron{
  width:16px!important;
  height:16px!important;
  color:#9F9398;
}

.guest-history-claim-card{
  width:min(680px,calc(100vw - 28px));
  max-width:680px;
  max-height:min(88vh,820px);
  overflow:auto;
  padding:22px;
}
.guest-claim-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  position:relative;
}
.guest-claim-icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:
    radial-gradient(circle at 35% 30%,#FFF4C9,#F2D27D 65%,#DDB34E);
  color:#614618;
  box-shadow:0 9px 24px rgba(156,113,34,.14);
}
.guest-claim-icon .icon{width:24px;height:24px}
.guest-claim-head-copy{
  min-width:0;
  flex:1;
}
.guest-claim-head-copy h3{
  margin:4px 0 5px;
  font-size:20px!important;
  line-height:1.14;
}
.guest-claim-head-copy p{
  margin:0;
  max-width:500px;
  font-size:11.5px!important;
}
.guest-claim-close{
  flex:0 0 36px;
  width:36px;
  height:36px;
}

.guest-claim-search-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:18px;
}
.guest-claim-search-box{
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border:1px solid #E7E0E3;
  border-radius:14px;
  background:#FAF8F9;
}
.guest-claim-search-box:focus-within{
  border-color:rgba(111,41,63,.28);
  box-shadow:0 0 0 3px rgba(111,41,63,.055);
}
.guest-claim-search-box .icon{
  width:17px;
  height:17px;
  color:#8D8186;
}
.guest-claim-search-box input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#21181C;
  font:inherit;
  font-size:13px;
}
.guest-claim-search-btn{
  min-width:90px;
}
.guest-claim-status{
  min-height:18px;
  margin:9px 1px 5px;
  color:#8F8388;
  font-size:10.5px;
  line-height:1.4;
}

.guest-claim-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:3px;
}
.guest-history-candidate{
  position:relative;
  width:100%;
  min-height:112px;
  padding:13px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 58px;
  gap:11px;
  align-items:start;
  border:1px solid #EAE4E6;
  border-radius:18px;
  background:linear-gradient(140deg,rgba(255,255,255,.98),rgba(249,246,247,.93));
  color:#21181C;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}
.guest-history-candidate:hover{
  transform:translateY(-1px);
  border-color:#D9C9CF;
}
.guest-history-candidate.selected{
  border-color:#C99E42;
  background:
    linear-gradient(135deg,rgba(255,249,228,.98),rgba(255,255,255,.96) 58%,rgba(247,232,188,.70));
  box-shadow:0 8px 24px rgba(163,119,34,.10);
}
.guest-candidate-check{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1.5px solid #D7CDD1;
  border-radius:50%;
  background:#fff;
  color:#fff;
}
.guest-history-candidate.selected .guest-candidate-check{
  border-color:#B98D35;
  background:#B98D35;
}
.guest-candidate-check .icon{width:14px;height:14px}

.guest-candidate-main{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.guest-candidate-name-row{
  display:flex;
  align-items:center;
  gap:9px;
}
.guest-candidate-avatar{
  width:39px;
  height:39px;
  flex:0 0 39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#F0EBED;
  color:#756A6E;
}
.guest-candidate-avatar .icon{width:19px;height:19px}
.guest-candidate-name-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.guest-candidate-name-copy > b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:820;
}
.guest-candidate-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.guest-match-badge{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:0 7px;
  border-radius:999px;
  font-size:7.8px;
  font-weight:850;
  letter-spacing:.055em;
}
.guest-match-badge.exact{
  background:#E9F5ED;
  color:#387049;
}
.guest-match-badge.strong{
  background:#F7EFCF;
  color:#86691F;
}
.guest-match-badge.possible{
  background:#F0ECEE;
  color:#766B70;
}
.guest-candidate-session{
  margin-top:10px;
  color:#43383D;
  font-size:11.5px;
  font-weight:750;
}
.guest-candidate-meta{
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#91868A;
  font-size:9.8px;
  line-height:1.35;
}
.guest-candidate-stat{
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(111,41,63,.045);
}
.guest-history-candidate.selected .guest-candidate-stat{
  background:rgba(181,138,53,.10);
}
.guest-candidate-stat b{
  font-size:18px;
  line-height:1;
}
.guest-candidate-stat span{
  margin-top:4px;
  color:#8D8186;
  font-size:8.5px;
}

.guest-claim-selected-summary{
  margin-top:13px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:15px;
  background:#F5F1F2;
}
.guest-claim-selected-summary > div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.guest-claim-selected-summary span{
  color:#988C91;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}
.guest-claim-selected-summary b{
  font-size:12.5px;
}
.guest-claim-total-games{
  color:#6F293F;
  font-size:12px;
  font-weight:800;
}

.guest-claim-footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid #EEE8EA;
}
.guest-claim-secondary-actions{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:7px;
}
.guest-claim-none-btn{
  padding:0;
  border:0;
  background:none;
  color:#93878C;
  font-size:9.5px;
  cursor:pointer;
}
.guest-claim-none-btn:hover{color:#6F293F}
.btn.btn-gold{
  background:linear-gradient(135deg,#E9C468,#D4A844);
  border-color:#D2A341;
  color:#44300D;
  box-shadow:0 8px 20px rgba(183,136,39,.16);
}
.btn.btn-gold:disabled{
  opacity:.45;
  box-shadow:none;
}
.guest-claim-merge-btn{
  min-width:170px;
  justify-content:center;
}

.guest-claim-loading,
.guest-claim-empty{
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:20px;
  border:1px dashed #E4DDE0;
  border-radius:18px;
  color:#91858A;
  text-align:center;
  font-size:10.5px;
}
.guest-claim-loading{
  flex-direction:row;
}
.guest-claim-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #E1D8DB;
  border-top-color:#6F293F;
  animation:guestClaimSpin .8s linear infinite;
}
@keyframes guestClaimSpin{to{transform:rotate(360deg)}}
.guest-claim-empty b{
  color:#554A4F;
  font-size:12px;
}
.guest-claim-empty span{
  max-width:330px;
}
.guest-claim-empty-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#F3EFF0;
  color:#85797E;
}
.guest-claim-empty-icon .icon{width:19px;height:19px}

.guest-claim-success{
  padding:30px 14px 16px;
  text-align:center;
}
.guest-claim-success-icon{
  width:68px;
  height:68px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#E9F6ED;
  color:#359155;
  box-shadow:0 8px 25px rgba(53,145,85,.11);
}
.guest-claim-success-icon .icon{width:32px;height:32px}
.guest-claim-success h3{
  margin:0 0 6px!important;
  font-size:20px!important;
}
.guest-claim-success p{
  max-width:400px;
  margin:0 auto 18px;
}
.guest-claim-success .btn{
  min-width:170px;
  justify-content:center;
}

@media(max-width:600px){
  #guestHistoryClaimModal{
    place-items:end center;
    padding:0;
  }
  .guest-history-claim-card{
    width:100%;
    max-height:92vh;
    border-radius:28px 28px 0 0!important;
    padding:19px 15px calc(22px + env(safe-area-inset-bottom))!important;
  }
  .guest-claim-head-copy h3{
    font-size:19px!important;
  }
  .guest-claim-search-row{
    grid-template-columns:1fr;
  }
  .guest-claim-search-btn{
    width:100%;
  }
  .guest-history-candidate{
    grid-template-columns:25px minmax(0,1fr) 52px;
    padding:12px 10px;
  }
  .guest-candidate-stat{
    height:54px;
  }
  .guest-claim-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .guest-claim-secondary-actions{
    order:2;
    align-items:center;
  }
  .guest-claim-merge-btn{
    width:100%;
  }
}


/* v62.1 — King Club description moved to bottom */
.king-description-bottom{
  margin-top:18px!important;
  padding-top:16px;
  border-top:1px solid #EEE8EA;
}


/* =========================================================
   v62.3 — Score / Result / King Club compactness
   ========================================================= */
.score-bottom-round-action{
  margin-top:16px;
  padding:14px 0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-top:1px solid #EEE8EA;
}
.score-bottom-round-action .btn{
  min-width:132px;
  justify-content:center;
}
.score-bottom-round-action > span{
  color:#94898E;
  font-size:10.5px;
}
.score-round-block + .score-round-block{
  margin-top:16px;
}

/* King Club: keep the v62 table, but make identity/columns fit much better. */
#lifetimeLeaderboard{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#lifetimeLeaderboard table{
  min-width:0!important;
  width:100%!important;
  table-layout:auto;
}
#lifetimeLeaderboard th,
#lifetimeLeaderboard td{
  padding:8px 6px!important;
  font-size:10.5px!important;
}
#lifetimeLeaderboard th{
  font-size:9px!important;
}
#lifetimeLeaderboard .leader{
  min-width:126px!important;
  max-width:150px!important;
}
#lifetimeLeaderboard .leader .player-identity{
  max-width:140px!important;
  gap:6px!important;
}
#lifetimeLeaderboard .leader .mini-player-avatar,
#lifetimeLeaderboard .leader .mini-player-avatar.sm{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border-width:1.5px!important;
}
#lifetimeLeaderboard .leader .mini-player-avatar .icon{
  width:15px!important;
  height:15px!important;
}
#lifetimeLeaderboard .leader .player-identity-name{
  max-width:96px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:1.15!important;
}
#lifetimeLeaderboard .rank{
  width:28px!important;
  height:28px!important;
  font-size:10px!important;
}
#lifetimeLeaderboard .lifetime-rating{
  padding:5px 7px!important;
  border-radius:8px!important;
  font-size:10px!important;
}
#lifetimeLeaderboard .most-session-badge{
  width:20px!important;
  height:20px!important;
  margin-left:3px!important;
  border-radius:6px!important;
}
#lifetimeLeaderboard .most-session-badge .icon{
  width:10px!important;
  height:10px!important;
}
#lifetimeLeaderboard .btn.mini{
  min-width:30px!important;
  padding:5px 7px!important;
  font-size:9px!important;
}
#lifetimeLeaderboard .lifetime-substat{
  font-size:8px!important;
  margin-top:2px!important;
}

/* Give the player column priority before secondary numeric columns. */
#lifetimeLeaderboard th:nth-child(2),
#lifetimeLeaderboard td:nth-child(2){
  width:150px;
}
#lifetimeLeaderboard th:nth-child(5),
#lifetimeLeaderboard td:nth-child(5){
  width:78px;
}

@media(max-width:620px){
  .score-bottom-round-action{
    flex-direction:column;
    gap:7px;
  }
  .score-bottom-round-action .btn{
    width:100%;
  }

  #lifetimeLeaderboard th,
  #lifetimeLeaderboard td{
    padding:7px 4px!important;
    font-size:9.5px!important;
  }
  #lifetimeLeaderboard th{
    font-size:8px!important;
  }
  #lifetimeLeaderboard .leader{
    min-width:108px!important;
    max-width:120px!important;
  }
  #lifetimeLeaderboard .leader .player-identity{
    max-width:116px!important;
  }
  #lifetimeLeaderboard .leader .mini-player-avatar,
  #lifetimeLeaderboard .leader .mini-player-avatar.sm{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
  }
  #lifetimeLeaderboard .leader .player-identity-name{
    max-width:76px!important;
    font-size:10px!important;
  }
  #lifetimeLeaderboard .rank{
    width:25px!important;
    height:25px!important;
    font-size:9px!important;
  }
}


/* =========================================================
   v62.4 — King Club Full Name + Expandable PF/PA/Diff
   ========================================================= */
#lifetimeLeaderboard .king-main-table{
  width:100%!important;
  min-width:0!important;
  table-layout:auto!important;
}

#lifetimeLeaderboard .king-main-table th,
#lifetimeLeaderboard .king-main-table td{
  padding:8px 6px!important;
  vertical-align:middle;
}

#lifetimeLeaderboard .leader{
  min-width:170px!important;
  max-width:none!important;
  white-space:normal!important;
}

#lifetimeLeaderboard .leader .player-identity{
  max-width:none!important;
  width:100%;
  gap:7px!important;
  align-items:center!important;
}

#lifetimeLeaderboard .leader .player-identity-name{
  max-width:none!important;
  width:auto!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere;
  font-size:11.5px!important;
  line-height:1.25!important;
}

#lifetimeLeaderboard .leader .mini-player-avatar,
#lifetimeLeaderboard .leader .mini-player-avatar.sm{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}

.king-row-crown{
  display:inline-flex;
  vertical-align:middle;
  margin-right:4px;
}
.king-row-crown .icon{
  width:12px;
  height:12px;
}

.king-last-session{
  white-space:nowrap!important;
}

.king-detail-cell{
  min-width:66px;
}

.king-stat-details{
  position:relative;
  display:inline-block;
}

.king-stat-details summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:0 8px;
  border-radius:9px;
  background:#F4F0F2;
  color:#6C6065;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

.king-stat-details summary::-webkit-details-marker{
  display:none;
}

.king-stat-details summary .icon{
  width:11px;
  height:11px;
  transition:transform .16s ease;
}

.king-stat-details[open] summary .icon{
  transform:rotate(90deg);
}

.king-stat-detail-panel{
  position:absolute;
  z-index:30;
  right:0;
  top:calc(100% + 6px);
  min-width:165px;
  padding:9px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  border:1px solid #E9E2E5;
  border-radius:13px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 30px rgba(47,27,35,.12);
}

.king-stat-detail-panel > div{
  min-width:42px;
  padding:7px 6px;
  border-radius:9px;
  background:#F7F4F5;
  text-align:center;
}

.king-stat-detail-panel span{
  display:block;
  margin-bottom:3px;
  color:#9B8F94;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.06em;
}

.king-stat-detail-panel b{
  color:#352A2F;
  font-size:11px;
  font-weight:850;
}

.king-rating-footnote{
  margin-top:10px;
  color:#8B8D93;
  font-size:9.5px;
  line-height:1.45;
}

@media(max-width:620px){
  #lifetimeLeaderboard{
    overflow-x:auto!important;
    overflow-y:visible!important;
  }

  #lifetimeLeaderboard .king-main-table{
    min-width:690px!important;
  }

  #lifetimeLeaderboard .leader{
    min-width:180px!important;
  }

  #lifetimeLeaderboard .leader .player-identity-name{
    font-size:11px!important;
  }

  .king-stat-detail-panel{
    right:auto;
    left:0;
  }
}


/* =========================================================
   v62.5 — King Club Premium Row
   ========================================================= */

/* First place gets a subtle premium gold wash, not a loud trophy card. */
#lifetimeLeaderboard .king-first-row > td{
  background:
    linear-gradient(
      90deg,
      rgba(247,232,186,.62) 0%,
      rgba(255,249,229,.82) 38%,
      rgba(255,255,255,.92) 100%
    )!important;
  border-top-color:rgba(199,157,68,.18)!important;
  border-bottom-color:rgba(199,157,68,.18)!important;
}
#lifetimeLeaderboard .king-first-row > td:first-child{
  border-left:1px solid rgba(199,157,68,.16);
}
#lifetimeLeaderboard .king-first-row > td:last-child{
  border-right:1px solid rgba(199,157,68,.16);
}

/* Compact Guest badge = G only in King Club. */
#lifetimeLeaderboard .player-type-badge.guest{
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  justify-content:center!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:0!important;
  border-radius:999px!important;
}

/* Last Session now lives in Stats, so main table gets more breathing room. */
#lifetimeLeaderboard .king-main-table{
  min-width:0!important;
  width:100%!important;
}
#lifetimeLeaderboard .leader{
  min-width:190px!important;
}
#lifetimeLeaderboard .leader .player-identity-name{
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* No flame/most-session icon in King Club. */
#lifetimeLeaderboard .most-session-badge{
  display:none!important;
}

/* 4-item expandable detail panel, with Last Session wider. */
.king-stat-detail-panel.king-stat-detail-panel-wide{
  min-width:260px;
  grid-template-columns:52px 52px 58px minmax(92px,1fr);
  align-items:stretch;
}
.king-stat-detail-panel .king-detail-last-session{
  min-width:92px;
}
.king-stat-detail-panel .king-detail-last-session b{
  white-space:nowrap;
  font-size:10px;
}

/* Soft gold crown treatment for #1 row. */
.king-first-row .king-row-crown{
  background:linear-gradient(135deg,#F4DE9C,#CDA74C);
  color:#5C4313;
  width:23px;
  height:23px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  box-shadow:0 5px 14px rgba(170,126,35,.13);
}
.king-first-row .king-row-crown .icon{
  width:12px;
  height:12px;
}

/* Keep row boundaries refined even when using the gold wash. */
#lifetimeLeaderboard tbody tr:not(.king-first-row) > td{
  background:#fff;
}

@media(max-width:620px){
  #lifetimeLeaderboard .king-main-table{
    min-width:620px!important;
  }

  #lifetimeLeaderboard .leader{
    min-width:175px!important;
  }

  .king-stat-detail-panel.king-stat-detail-panel-wide{
    min-width:245px;
    grid-template-columns:48px 48px 52px minmax(90px,1fr);
  }
}


/* =========================================================
   v62.6 — Tap Score + King Compact Labels
   ========================================================= */

/* Score: no +/- steppers. */
.score-simple-row{
  grid-template-columns:minmax(82px,1fr) 70px minmax(82px,1fr)!important;
  gap:10px!important;
}

.score-tap-value{
  width:100%;
  min-width:0;
  min-height:62px;
  border:1px solid #E8E1E4;
  border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F3F5 100%);
  color:#251D21;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(55,30,40,.045);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.score-tap-value b{
  font-size:27px;
  line-height:1;
  font-weight:820;
}
.score-tap-value span{
  color:#9A8E93;
  font-size:8px;
  font-weight:800;
  letter-spacing:.055em;
}
.score-tap-value:not(:disabled):active{
  transform:scale(.97);
  background:#F2EAED;
}
.score-tap-value:disabled{
  opacity:1;
  cursor:default;
}
.score-tap-value.done{
  background:#F5F2F3;
}

.score-direct-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
}
.score-direct-wrap .score-point-input{
  width:100%!important;
  height:58px!important;
  border:1px solid #E5DDE0!important;
  border-radius:16px!important;
  background:#FFFFFF!important;
  font-size:24px!important;
  font-weight:820!important;
}
.score-direct-wrap > span{
  color:#9A8E93;
  font-size:8px;
  font-weight:800;
  letter-spacing:.055em;
}

/* Old stepper controls are no longer rendered. */
.score-card .stepper{
  display:none!important;
}

/* Undo v62.5 first-place row gold background. */
#lifetimeLeaderboard .king-first-row > td,
#lifetimeLeaderboard tbody tr.king-first-row > td{
  background:#FFFFFF!important;
  border-color:inherit!important;
}
#lifetimeLeaderboard tbody tr > td{
  background:#FFFFFF!important;
}

/* Crown stays gold, but now sits after avatar and before player name. */
#lifetimeLeaderboard .king-row-crown{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  display:inline-grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:6px!important;
  background:linear-gradient(135deg,#F5DE97 0%,#C89B34 100%)!important;
  color:#5D4210!important;
  box-shadow:0 4px 10px rgba(163,118,27,.14)!important;
}
#lifetimeLeaderboard .king-row-crown .icon{
  width:11px!important;
  height:11px!important;
  stroke:currentColor!important;
}

/* Full name still gets priority. */
#lifetimeLeaderboard .leader .player-identity{
  gap:6px!important;
}
#lifetimeLeaderboard .leader .player-identity-name{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
}

@media(max-width:560px){
  .score-simple-row{
    grid-template-columns:minmax(76px,1fr) 60px minmax(76px,1fr)!important;
    gap:7px!important;
  }
  .score-tap-value{
    min-height:58px;
    border-radius:14px;
  }
  .score-tap-value b{
    font-size:25px;
  }
  .score-direct-wrap .score-point-input{
    height:56px!important;
    font-size:22px!important;
  }
}


/* =========================================================
   v62.7 — Fast Score + Winner State + Info Details
   ========================================================= */
.score-tap-value.winner{
  border-color:#B8DFC4!important;
  background:linear-gradient(180deg,#F0FAF3 0%,#DDF3E4 100%)!important;
  color:#216B3B!important;
  box-shadow:0 6px 16px rgba(39,125,69,.08)!important;
}
.score-tap-value.winner span{
  color:#4A8D60!important;
}

.score-direct-wrap.winner .score-point-input{
  border-color:#B8DFC4!important;
  background:linear-gradient(180deg,#F2FBF4 0%,#E1F4E6 100%)!important;
  color:#216B3B!important;
  box-shadow:0 0 0 2px rgba(56,145,83,.07)!important;
}
.score-direct-wrap.winner > span{
  color:#4A8D60!important;
}

/* Reduce interaction animation work for faster repeated taps. */
.score-tap-value{
  transition:
    background 80ms ease,
    border-color 80ms ease,
    color 80ms ease,
    transform 50ms ease!important;
}
.score-tap-value:not(:disabled):active{
  transform:scale(.988)!important;
}

/* King Club: info icon replaces Stats text. */
.king-stat-details .king-info-summary{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#F3EFF1!important;
  color:#75686D!important;
}
.king-info-icon{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border:1.5px solid currentColor;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
.king-stat-details[open] .king-info-summary{
  background:#EAE2E5!important;
  color:#5F5056!important;
}


/* =========================================================
   v62.8 — Auto-collapse Game Setup
   ========================================================= */
.setup-main-card{
  padding:0!important;
  overflow:hidden;
}

.game-setup-details{
  width:100%;
}

.game-setup-summary{
  list-style:none;
  min-height:72px;
  padding:15px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.game-setup-summary::-webkit-details-marker{
  display:none;
}

.game-setup-summary-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.game-setup-summary-title{
  color:var(--ink);
  font-size:16px;
  font-weight:780;
  letter-spacing:-.02em;
}

.game-setup-summary-meta{
  min-width:0;
  color:#8B8085;
  font-size:10.5px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.game-setup-summary-chevron{
  width:31px;
  height:31px;
  flex:0 0 31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#F4F0F2;
  color:#74676C;
}

.game-setup-summary-chevron .icon{
  width:14px;
  height:14px;
  transition:transform 140ms ease;
}

.game-setup-details[open] .game-setup-summary-chevron .icon{
  transform:rotate(180deg);
}

.game-setup-details[open] .game-setup-summary{
  border-bottom:1px solid #EEE8EA;
}

.game-setup-body{
  padding:14px 16px 16px;
}

.game-setup-intro{
  margin:0 0 15px!important;
}

@media(max-width:560px){
  .game-setup-summary{
    min-height:66px;
    padding:13px 14px;
  }

  .game-setup-body{
    padding:13px 14px 15px;
  }

  .game-setup-summary-title{
    font-size:15px;
  }

  .game-setup-summary-meta{
    font-size:10px;
  }
}


/* =========================================================
   v62.9 — King Club Mobile Fit
   Desktop remains unchanged. Smartphone becomes full-width,
   tighter, and easier to scan with subtle column tints.
   ========================================================= */

@media(max-width:620px){

  /* Remove horizontal scrolling on King Club only. */
  #lifetimeLeaderboard{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-bottom:0!important;
  }

  #lifetimeLeaderboard .king-main-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:separate!important;
    border-spacing:1px 3px!important;
  }

  /* Tight cell spacing */
  #lifetimeLeaderboard .king-main-table th,
  #lifetimeLeaderboard .king-main-table td{
    min-width:0!important;
    padding:6px 2px!important;
    font-size:8.7px!important;
    line-height:1.08!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  #lifetimeLeaderboard .king-main-table th{
    font-size:7.3px!important;
    letter-spacing:.02em!important;
    font-weight:850!important;
    border-bottom:0!important;
    border-radius:5px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  /* Mobile column widths:
     # | Player | RAT | SES | G | WTL | Win% | Info
  */
  #lifetimeLeaderboard .king-main-table th:nth-child(1),
  #lifetimeLeaderboard .king-main-table td:nth-child(1){
    width:7%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(2),
  #lifetimeLeaderboard .king-main-table td:nth-child(2){
    width:34%!important;
    text-align:left!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(3),
  #lifetimeLeaderboard .king-main-table td:nth-child(3){
    width:10%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(4),
  #lifetimeLeaderboard .king-main-table td:nth-child(4){
    width:8%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(5),
  #lifetimeLeaderboard .king-main-table td:nth-child(5){
    width:7%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(6),
  #lifetimeLeaderboard .king-main-table td:nth-child(6){
    width:14%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(7),
  #lifetimeLeaderboard .king-main-table td:nth-child(7){
    width:12%!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(8),
  #lifetimeLeaderboard .king-main-table td:nth-child(8){
    width:8%!important;
  }

  /* If Admin Edit column exists, keep it ultra compact. */
  #lifetimeLeaderboard .king-main-table th:nth-child(9),
  #lifetimeLeaderboard .king-main-table td:nth-child(9){
    width:8%!important;
  }

  /* Subtle per-column tint — enough distinction without looking colorful. */
  #lifetimeLeaderboard .king-main-table th:nth-child(1),
  #lifetimeLeaderboard .king-main-table td:nth-child(1){
    background:#F3F1F2!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(2),
  #lifetimeLeaderboard .king-main-table td:nth-child(2){
    background:#FCFAFB!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(3),
  #lifetimeLeaderboard .king-main-table td:nth-child(3){
    background:#F8F1E3!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(4),
  #lifetimeLeaderboard .king-main-table td:nth-child(4){
    background:#F1F3F7!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(5),
  #lifetimeLeaderboard .king-main-table td:nth-child(5){
    background:#F5F0F6!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(6),
  #lifetimeLeaderboard .king-main-table td:nth-child(6){
    background:#FAF0F2!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(7),
  #lifetimeLeaderboard .king-main-table td:nth-child(7){
    background:#EEF7F0!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(8),
  #lifetimeLeaderboard .king-main-table td:nth-child(8){
    background:#F0F3F5!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(9),
  #lifetimeLeaderboard .king-main-table td:nth-child(9){
    background:#F4F1F3!important;
  }

  /* Player identity: full name remains visible, but compact. */
  #lifetimeLeaderboard .leader{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    white-space:normal!important;
    padding-left:3px!important;
    padding-right:2px!important;
  }

  #lifetimeLeaderboard .leader .player-identity{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:3px!important;
    display:flex!important;
    align-items:center!important;
  }

  #lifetimeLeaderboard .leader .mini-player-avatar,
  #lifetimeLeaderboard .leader .mini-player-avatar.sm{
    width:22px!important;
    height:22px!important;
    flex:0 0 22px!important;
    border-width:1px!important;
  }

  #lifetimeLeaderboard .leader .mini-player-avatar .icon{
    width:11px!important;
    height:11px!important;
  }

  #lifetimeLeaderboard .king-row-crown{
    width:15px!important;
    height:15px!important;
    flex:0 0 15px!important;
    border-radius:5px!important;
  }

  #lifetimeLeaderboard .king-row-crown .icon{
    width:8px!important;
    height:8px!important;
  }

  #lifetimeLeaderboard .leader .player-identity-name{
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    font-size:9.2px!important;
    line-height:1.08!important;
    font-weight:700!important;
  }

  #lifetimeLeaderboard .player-type-badge.guest{
    min-width:14px!important;
    width:14px!important;
    height:14px!important;
    padding:0!important;
    flex:0 0 14px!important;
    font-size:6.7px!important;
  }

  #lifetimeLeaderboard .rank{
    width:20px!important;
    height:20px!important;
    margin:auto!important;
    font-size:7.5px!important;
  }

  #lifetimeLeaderboard .lifetime-rating{
    min-width:0!important;
    min-height:22px!important;
    padding:3px 3px!important;
    border-radius:6px!important;
    font-size:8.3px!important;
  }

  #lifetimeLeaderboard .session-count-cell{
    justify-content:center!important;
    font-size:8.7px!important;
  }

  #lifetimeLeaderboard .lifetime-winrate{
    font-size:8.5px!important;
    font-weight:760!important;
  }

  #lifetimeLeaderboard .king-detail-cell{
    min-width:0!important;
  }

  #lifetimeLeaderboard .king-stat-details .king-info-summary{
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    min-height:22px!important;
    margin:auto!important;
  }

  #lifetimeLeaderboard .king-info-icon{
    width:12px!important;
    height:12px!important;
    font-size:8px!important;
    border-width:1.2px!important;
  }

  /* Expanded stats may float over the compact table without changing column width. */
  #lifetimeLeaderboard .king-stat-details{
    position:static!important;
  }

  #lifetimeLeaderboard .king-stat-detail-panel.king-stat-detail-panel-wide{
    position:fixed!important;
    z-index:80!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:min(300px,calc(100vw - 34px))!important;
    min-width:0!important;
    grid-template-columns:repeat(3,1fr)!important;
    padding:12px!important;
    gap:7px!important;
    border-radius:16px!important;
    box-shadow:0 18px 50px rgba(43,25,32,.20)!important;
  }

  #lifetimeLeaderboard .king-stat-detail-panel .king-detail-last-session{
    grid-column:1/-1!important;
    min-width:0!important;
  }

  /* Admin edit button must not create a wide column. */
  #lifetimeLeaderboard .btn.mini{
    min-width:0!important;
    width:22px!important;
    height:22px!important;
    padding:0!important;
    border-radius:7px!important;
    font-size:0!important;
  }

  #lifetimeLeaderboard .btn.mini .icon{
    width:10px!important;
    height:10px!important;
    margin:0!important;
  }

  /* Compact descriptive legend below the table as well. */
  #lifetime .king-description-bottom{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }

  #lifetime .king-description-bottom > div{
    padding:8px!important;
    border-radius:10px!important;
  }

  #lifetime .king-description-bottom b{
    font-size:9px!important;
  }

  #lifetime .king-description-bottom span{
    font-size:8.5px!important;
    line-height:1.3!important;
  }
}


/* =========================================================
   v62.10 — King Mobile Density + Neutral Tint + Detail Close
   ========================================================= */
@media(max-width:620px){

  /* Bring All-Time Ranking title and table much closer together. */
  #lifetime .grid{
    margin-top:7px!important;
  }

  #lifetime .card{
    padding:10px!important;
  }

  #lifetime .lifetime-head{
    margin-bottom:3px!important;
    min-height:0!important;
  }

  #lifetime .lifetime-head h3{
    margin-bottom:0!important;
    line-height:1.05!important;
  }

  #lifetime .king-readonly-note{
    margin:3px 0 4px!important;
    padding:5px 7px!important;
    min-height:0!important;
    border-radius:9px!important;
    font-size:8px!important;
    line-height:1.2!important;
  }

  #lifetime .king-readonly-note .icon{
    width:11px!important;
    height:11px!important;
  }

  #lifetimeLeaderboard{
    margin-top:0!important;
  }

  /* Override previous colorful column tints with neutral monochrome shades. */
  #lifetimeLeaderboard .king-main-table th:nth-child(1),
  #lifetimeLeaderboard .king-main-table td:nth-child(1){
    background:#F2F2F2!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(2),
  #lifetimeLeaderboard .king-main-table td:nth-child(2){
    background:#FCFCFC!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(3),
  #lifetimeLeaderboard .king-main-table td:nth-child(3){
    background:#F6F6F6!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(4),
  #lifetimeLeaderboard .king-main-table td:nth-child(4){
    background:#F1F1F1!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(5),
  #lifetimeLeaderboard .king-main-table td:nth-child(5){
    background:#F8F8F8!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(6),
  #lifetimeLeaderboard .king-main-table td:nth-child(6){
    background:#F3F3F3!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(7),
  #lifetimeLeaderboard .king-main-table td:nth-child(7){
    background:#FAFAFA!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(8),
  #lifetimeLeaderboard .king-main-table td:nth-child(8){
    background:#F0F0F0!important;
  }

  #lifetimeLeaderboard .king-main-table th:nth-child(9),
  #lifetimeLeaderboard .king-main-table td:nth-child(9){
    background:#F7F7F7!important;
  }

  /* Make the table even denser vertically/horizontally. */
  #lifetimeLeaderboard .king-main-table{
    border-spacing:1px 2px!important;
  }

  #lifetimeLeaderboard .king-main-table th,
  #lifetimeLeaderboard .king-main-table td{
    padding:5px 1px!important;
  }

  /* Expanded details now has a real dismissible backdrop. */
  #lifetimeLeaderboard .king-stat-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:78!important;
    width:100vw!important;
    height:100vh!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    background:rgba(28,22,25,.18)!important;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  #lifetimeLeaderboard .king-stat-detail-panel.king-stat-detail-panel-wide{
    z-index:80!important;
    width:min(310px,calc(100vw - 28px))!important;
    padding:11px!important;
    grid-template-columns:repeat(3,1fr)!important;
  }

  .king-detail-panel-head{
    grid-column:1/-1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-width:0!important;
    padding:2px 2px 9px!important;
    margin-bottom:1px!important;
    border-bottom:1px solid #ECE8EA!important;
    background:transparent!important;
    text-align:left!important;
  }

  .king-detail-player-name{
    min-width:0!important;
    color:#2B2427!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:800!important;
    overflow-wrap:anywhere!important;
  }

  .king-detail-close{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:50%!important;
    padding:0!important;
    background:#F0EDEF!important;
    color:#685C61!important;
    font-size:19px!important;
    line-height:1!important;
    cursor:pointer!important;
  }

  #lifetimeLeaderboard .king-stat-detail-panel .king-detail-last-session{
    grid-column:1/-1!important;
  }
}

/* Desktop details also get a visible player name and close button. */
@media(min-width:621px){
  .king-stat-backdrop{
    position:fixed;
    inset:0;
    z-index:28;
    border:0;
    padding:0;
    background:transparent;
  }

  .king-stat-detail-panel{
    z-index:30!important;
  }

  .king-detail-panel-head{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 1px 7px;
    border-bottom:1px solid #EEE8EA;
  }

  .king-detail-player-name{
    font-size:10.5px;
    font-weight:800;
    color:#342B2F;
  }

  .king-detail-close{
    width:22px;
    height:22px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    padding:0;
    background:#F2EFF0;
    color:#6D6166;
    line-height:1;
  }
}


/* =========================================================
   v62.11 — Unified King Club Layout
   Desktop follows the same compact layout as smartphone.
   ========================================================= */

/* Same spacing on all screen sizes */
#lifetime .grid{
  margin-top:7px!important;
}

#lifetime .card{
  padding:10px!important;
}

#lifetime .lifetime-head{
  margin-bottom:3px!important;
  min-height:0!important;
}

#lifetime .lifetime-head h3{
  margin-bottom:0!important;
  line-height:1.05!important;
}

#lifetime .king-readonly-note{
  margin:3px 0 4px!important;
  padding:5px 7px!important;
  min-height:0!important;
  border-radius:9px!important;
  font-size:8px!important;
  line-height:1.2!important;
}

#lifetime .king-readonly-note .icon{
  width:11px!important;
  height:11px!important;
}

#lifetimeLeaderboard{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  margin:0!important;
  padding:0!important;
}

/* Unified fit-width table */
#lifetimeLeaderboard .king-main-table{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:1px 2px!important;
}

#lifetimeLeaderboard .king-main-table th,
#lifetimeLeaderboard .king-main-table td{
  min-width:0!important;
  padding:5px 1px!important;
  font-size:8.7px!important;
  line-height:1.08!important;
  text-align:center!important;
  overflow:hidden!important;
}

#lifetimeLeaderboard .king-main-table th{
  font-size:7.3px!important;
  letter-spacing:.02em!important;
  font-weight:850!important;
  border-bottom:0!important;
  border-radius:5px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}

/* Unified column proportions:
   # | Player | RAT | SES | G | WTL | Win% | Info
*/
#lifetimeLeaderboard .king-main-table th:nth-child(1),
#lifetimeLeaderboard .king-main-table td:nth-child(1){
  width:7%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(2),
#lifetimeLeaderboard .king-main-table td:nth-child(2){
  width:34%!important;
  text-align:left!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(3),
#lifetimeLeaderboard .king-main-table td:nth-child(3){
  width:10%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(4),
#lifetimeLeaderboard .king-main-table td:nth-child(4){
  width:8%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(5),
#lifetimeLeaderboard .king-main-table td:nth-child(5){
  width:7%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(6),
#lifetimeLeaderboard .king-main-table td:nth-child(6){
  width:14%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(7),
#lifetimeLeaderboard .king-main-table td:nth-child(7){
  width:12%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(8),
#lifetimeLeaderboard .king-main-table td:nth-child(8){
  width:8%!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(9),
#lifetimeLeaderboard .king-main-table td:nth-child(9){
  width:8%!important;
}

/* Neutral monochrome tints on every screen */
#lifetimeLeaderboard .king-main-table th:nth-child(1),
#lifetimeLeaderboard .king-main-table td:nth-child(1){
  background:#F2F2F2!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(2),
#lifetimeLeaderboard .king-main-table td:nth-child(2){
  background:#FCFCFC!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(3),
#lifetimeLeaderboard .king-main-table td:nth-child(3){
  background:#F6F6F6!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(4),
#lifetimeLeaderboard .king-main-table td:nth-child(4){
  background:#F1F1F1!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(5),
#lifetimeLeaderboard .king-main-table td:nth-child(5){
  background:#F8F8F8!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(6),
#lifetimeLeaderboard .king-main-table td:nth-child(6){
  background:#F3F3F3!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(7),
#lifetimeLeaderboard .king-main-table td:nth-child(7){
  background:#FAFAFA!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(8),
#lifetimeLeaderboard .king-main-table td:nth-child(8){
  background:#F0F0F0!important;
}

#lifetimeLeaderboard .king-main-table th:nth-child(9),
#lifetimeLeaderboard .king-main-table td:nth-child(9){
  background:#F7F7F7!important;
}

/* Unified player identity density */
#lifetimeLeaderboard .leader{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  white-space:normal!important;
  padding-left:3px!important;
  padding-right:2px!important;
}

#lifetimeLeaderboard .leader .player-identity{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:3px!important;
  display:flex!important;
  align-items:center!important;
}

#lifetimeLeaderboard .leader .mini-player-avatar,
#lifetimeLeaderboard .leader .mini-player-avatar.sm{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  border-width:1px!important;
}

#lifetimeLeaderboard .leader .mini-player-avatar .icon{
  width:11px!important;
  height:11px!important;
}

#lifetimeLeaderboard .king-row-crown{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  border-radius:5px!important;
}

#lifetimeLeaderboard .king-row-crown .icon{
  width:8px!important;
  height:8px!important;
}

#lifetimeLeaderboard .leader .player-identity-name{
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font-size:9.2px!important;
  line-height:1.08!important;
  font-weight:700!important;
}

#lifetimeLeaderboard .player-type-badge.guest{
  min-width:14px!important;
  width:14px!important;
  height:14px!important;
  padding:0!important;
  flex:0 0 14px!important;
  font-size:6.7px!important;
}

#lifetimeLeaderboard .rank{
  width:20px!important;
  height:20px!important;
  margin:auto!important;
  font-size:7.5px!important;
}

#lifetimeLeaderboard .lifetime-rating{
  min-width:0!important;
  min-height:22px!important;
  padding:3px 3px!important;
  border-radius:6px!important;
  font-size:8.3px!important;
}

#lifetimeLeaderboard .session-count-cell{
  justify-content:center!important;
  font-size:8.7px!important;
}

#lifetimeLeaderboard .lifetime-winrate{
  font-size:8.5px!important;
  font-weight:760!important;
}

#lifetimeLeaderboard .king-detail-cell{
  min-width:0!important;
}

#lifetimeLeaderboard .king-stat-details .king-info-summary{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  min-height:22px!important;
  margin:auto!important;
}

#lifetimeLeaderboard .king-info-icon{
  width:12px!important;
  height:12px!important;
  font-size:8px!important;
  border-width:1.2px!important;
}

/* Unified centered detail panel on desktop + mobile */
#lifetimeLeaderboard .king-stat-details{
  position:static!important;
}

#lifetimeLeaderboard .king-stat-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:78!important;
  width:100vw!important;
  height:100vh!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:rgba(28,22,25,.18)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}

#lifetimeLeaderboard .king-stat-detail-panel.king-stat-detail-panel-wide{
  position:fixed!important;
  z-index:80!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(310px,calc(100vw - 28px))!important;
  min-width:0!important;
  padding:11px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
  border-radius:16px!important;
  box-shadow:0 18px 50px rgba(43,25,32,.20)!important;
}

#lifetimeLeaderboard .king-detail-panel-head{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
  padding:2px 2px 9px!important;
  margin-bottom:1px!important;
  border-bottom:1px solid #ECE8EA!important;
  background:transparent!important;
  text-align:left!important;
}

#lifetimeLeaderboard .king-detail-player-name{
  min-width:0!important;
  color:#2B2427!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;
  overflow-wrap:anywhere!important;
}

#lifetimeLeaderboard .king-detail-close{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:50%!important;
  padding:0!important;
  background:#F0EDEF!important;
  color:#685C61!important;
  font-size:19px!important;
  line-height:1!important;
  cursor:pointer!important;
}

#lifetimeLeaderboard .king-stat-detail-panel .king-detail-last-session{
  grid-column:1/-1!important;
  min-width:0!important;
}

/* Compact admin edit button too */
#lifetimeLeaderboard .btn.mini{
  min-width:0!important;
  width:22px!important;
  height:22px!important;
  padding:0!important;
  border-radius:7px!important;
  font-size:0!important;
}

#lifetimeLeaderboard .btn.mini .icon{
  width:10px!important;
  height:10px!important;
  margin:0!important;
}

/* Unified explanation grid */
#lifetime .king-description-bottom{
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}

#lifetime .king-description-bottom > div{
  padding:8px!important;
  border-radius:10px!important;
}

#lifetime .king-description-bottom b{
  font-size:9px!important;
}

#lifetime .king-description-bottom span{
  font-size:8.5px!important;
  line-height:1.3!important;
}


/* =========================================================
   v62.12 — Seamless King + Ended Session Tab + Medals
   ========================================================= */

/* Session tab order now has 3 equal items. */
.session-hub-tabs{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* King Club: one continuous surface, no boxed cell tint. */
#lifetimeLeaderboard .king-main-table{
  border-collapse:collapse!important;
  border-spacing:0!important;
  overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      rgba(248,248,248,.98) 0%,
      rgba(255,255,255,.98) 18%,
      rgba(249,249,249,.94) 100%
    )!important;
}

#lifetimeLeaderboard .king-main-table thead{
  background:
    linear-gradient(
      90deg,
      #F3F3F3 0%,
      #F8F8F8 45%,
      #F3F3F3 100%
    )!important;
}

#lifetimeLeaderboard .king-main-table tbody tr{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,248,248,.82) 52%,
      rgba(255,255,255,.98) 100%
    )!important;
}

#lifetimeLeaderboard .king-main-table tbody tr:nth-child(even){
  background:
    linear-gradient(
      90deg,
      rgba(249,249,249,.98) 0%,
      rgba(244,244,244,.74) 52%,
      rgba(250,250,250,.98) 100%
    )!important;
}

#lifetimeLeaderboard .king-main-table th,
#lifetimeLeaderboard .king-main-table td{
  background:transparent!important;
  border-bottom:1px solid rgba(0,0,0,.035)!important;
  border-radius:0!important;
}

#lifetimeLeaderboard .king-main-table tbody tr:last-child td{
  border-bottom:0!important;
}

/* Very subtle vertical rhythm without cell boxes. */
#lifetimeLeaderboard .king-main-table th + th,
#lifetimeLeaderboard .king-main-table td + td{
  border-left:1px solid rgba(0,0,0,.018)!important;
}

/* Silver & bronze are medals: circular metallic fills. */
#lifetimeLeaderboard .rank.silver{
  border-radius:50%!important;
  background:
    radial-gradient(
      circle at 32% 28%,
      #FFFFFF 0%,
      #ECEFF2 34%,
      #BFC5CB 70%,
      #9DA4AB 100%
    )!important;
  color:#525960!important;
  border:1px solid rgba(102,111,120,.22)!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    0 2px 6px rgba(77,83,89,.10)!important;
}

#lifetimeLeaderboard .rank.bronze{
  border-radius:50%!important;
  background:
    radial-gradient(
      circle at 32% 28%,
      #F7D2B4 0%,
      #C98C61 44%,
      #A96743 76%,
      #875035 100%
    )!important;
  color:#FFFFFF!important;
  border:1px solid rgba(124,73,45,.20)!important;
  box-shadow:
    inset 0 1px 1px rgba(255,240,228,.55),
    0 2px 6px rgba(101,62,41,.12)!important;
}

/* Keep #1 visual identity as existing black rank + gold crown. */
#lifetimeLeaderboard .rank.top{
  border-radius:50%!important;
}

/* Ended tab / cards use existing finished styling, but wording is Ended. */
#sessionEndedPanel .session-status-pill.finished{
  background:#F0EEEE!important;
  color:#70686B!important;
}

#sessionEndedPanel .history-card{
  opacity:.94;
}

/* Smartphone keeps the same seamless treatment. */
@media(max-width:620px){
  #lifetimeLeaderboard .king-main-table th,
  #lifetimeLeaderboard .king-main-table td{
    background:transparent!important;
  }

  .session-hub-tabs{
    gap:4px!important;
  }

  .session-hub-tab{
    min-width:0!important;
    padding-left:5px!important;
    padding-right:5px!important;
    white-space:nowrap;
  }
}


/* =========================================================
   v62.13 — Fair Diff Rating
   ========================================================= */
#lifetimeLeaderboard .king-stat-detail-panel.king-stat-detail-panel-wide{
  grid-template-columns:repeat(3,1fr)!important;
}

#lifetimeLeaderboard .king-detail-rating-base,
#lifetimeLeaderboard .king-detail-rating-margin{
  min-width:0!important;
}

#lifetimeLeaderboard .king-detail-rating-base{
  grid-column:1/2!important;
}

#lifetimeLeaderboard .king-detail-rating-margin{
  grid-column:2/4!important;
}

#lifetimeLeaderboard .king-detail-rating-margin b{
  font-variant-numeric:tabular-nums;
}


/* =========================================================
   v62.14 — Confidence Performance Rating
   ========================================================= */
#lifetimeLeaderboard .king-detail-rating-base,
#lifetimeLeaderboard .king-detail-rating-margin{
  background:rgba(247,247,247,.74)!important;
}

#lifetimeLeaderboard .king-detail-rating-margin b{
  font-variant-numeric:tabular-nums;
}



/* =========================================================
   v87 — Unified Match & Score
   ========================================================= */
.match-score-card{min-width:0}
.match-score-head{align-items:flex-start;gap:10px}
.match-score-head .sub{margin:3px 0 7px;max-width:520px}
.match-score-head .score-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.match-score-legacy-source{display:none!important}
.match-score-bench{margin-top:7px}
.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.score-round-block{border:1px solid rgba(60,39,47,.07);border-radius:14px;padding:9px;margin:8px 0;background:rgba(255,255,255,.62)}
.score-round-block .round-head{margin-bottom:7px}
.score-round-block .round-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.score-round-block .round-tools .btn.mini{min-height:25px;padding:5px 7px}
.score-bottom-round-action{margin-top:10px}
@media(max-width:620px){
  .match-score-card{padding:10px!important}
  .match-score-head{display:block}
  .match-score-head .score-head-actions{justify-content:flex-start;margin-top:7px}
  .score-round-block{padding:7px;margin:7px 0;border-radius:12px}
  .score-round-block .round-head{gap:6px}
  .score-round-block .round-tools{gap:4px}
  .score-round-block .round-tools .btn.mini{font-size:7.5px;padding:4px 6px}
  .match-score-bench{font-size:8px}
}

/* =========================================================
   v92 — Compact Play Workflow
   ========================================================= */
#play{
  padding-top:4px!important;
}

#play > .hero{
  display:none!important;
}

.play-session-bar{
  margin:4px 0 10px!important;
  padding:14px!important;
  border:1px solid rgba(111,41,63,.09)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(250,246,247,.80))!important;
  box-shadow:0 12px 28px rgba(52,30,39,.06)!important;
}

.play-session-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:12px!important;
}

.play-session-title{
  max-width:100%!important;
  font-size:21px!important;
  line-height:1.12!important;
}

.play-session-primary{
  margin-top:7px!important;
}

.play-session-picker{
  width:100%!important;
}

.session-picker-trigger{
  width:100%!important;
  max-width:none!important;
  min-height:54px!important;
  height:auto!important;
  padding:10px 14px!important;
  border-color:rgba(255,255,255,.14)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#5f1c2a 0%,#8f3346 100%)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(95,28,42,.20)!important;
}

.session-picker-trigger:hover{
  background:linear-gradient(135deg,#541824 0%,#812c3e 100%)!important;
}

.session-picker-trigger-label{
  color:rgba(255,255,255,.67)!important;
  font-size:9px!important;
  letter-spacing:.12em!important;
}

.session-picker-trigger-value{
  max-width:calc(100vw - 110px)!important;
  margin-top:5px!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:780!important;
}

.session-picker-trigger .icon{
  width:18px!important;
  height:18px!important;
  color:#fff!important;
}

.play-session-menu{
  left:0!important;
  right:auto!important;
  width:100%!important;
  max-height:50vh!important;
}

.play-workflow-tabs{
  position:sticky;
  top:72px;
  z-index:34;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin:0 0 14px;
  padding:5px;
  border:1px solid rgba(111,41,63,.08);
  border-radius:17px;
  background:rgba(250,247,248,.90);
  box-shadow:0 8px 22px rgba(49,30,38,.06);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.play-workflow-tab{
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 7px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#8c7f84;
  font:inherit;
  font-size:12px;
  font-weight:760;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.play-workflow-tab .icon{
  width:16px;
  height:16px;
}

.play-workflow-tab small{
  min-width:24px;
  padding:3px 5px;
  border-radius:999px;
  background:rgba(111,41,63,.08);
  color:#7b4555;
  font-size:8px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.play-workflow-tab.active{
  background:#fff;
  color:#6f293f;
  box-shadow:0 6px 16px rgba(65,39,49,.09);
}

.play-workflow-panel[hidden]{
  display:none!important;
}

.play-workflow-panel{
  min-width:0;
  animation:viewEnter .20s ease both;
}

.play-workflow-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
}

.play-compact-notice{
  margin:0 0 10px!important;
}

.session-tool-row{
  margin:0 0 12px!important;
  padding:0!important;
  border-top:0!important;
}

.play-result-card{
  padding:12px!important;
  background:rgba(255,255,255,.72)!important;
}

.play-result-card .share-actions{
  margin-top:16px;
}

.bottom-nav{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media(max-width:560px){
  .play-session-bar{
    padding:12px!important;
    border-radius:18px!important;
  }

  .play-session-title{
    font-size:19px!important;
  }

  .play-session-primary,
  .play-session-secondary{
    white-space:normal!important;
  }

  .play-workflow-tabs{
    top:60px;
    margin-bottom:11px;
  }

  .play-workflow-tab{
    min-height:42px;
    gap:5px;
    padding:7px 4px;
    font-size:11px!important;
  }

  .play-workflow-tab .icon{
    width:15px;
    height:15px;
  }

  .session-tool-copy{
    display:none!important;
  }
}

/* =========================================================
   v95 — Original type scale + no accidental zoom
   ========================================================= */
html{
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  touch-action:pan-x pan-y;
}
button,
a,
summary,
[role="button"],
.btn,
.nav-btn,
.play-workflow-tab,
.session-picker-trigger{
  touch-action:manipulation;
}

/* =========================================================
   v95 — Create Session fit for iPhone PWA
   Keep the form scrollable and actions continuously visible.
   ========================================================= */
@media(max-width:560px){
  #createSessionModal{
    overflow:hidden;
    align-items:flex-end;
    padding:
      max(8px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  #createSessionModal .create-session-card{
    width:100%;
    max-width:none;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    overflow:hidden;
    padding:0!important;
  }

  #createSessionModal .create-session-scroll{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:18px 16px 8px;
  }

  #createSessionModal .create-session-actions{
    position:relative;
    bottom:auto;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:8px;
    margin:0!important;
    padding:12px 16px 14px;
    border-top:1px solid rgba(111,41,63,.10);
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -10px 24px rgba(58,24,33,.05);
  }
}

/* =========================================================
   v96 — Compact player names + setup player slots
   ========================================================= */
.game-setup-options-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.score-body{
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important;
  gap:4px!important;
}
.score-team,
.team{
  min-width:0;
  font-size:11.5px!important;
}
.score-team{
  padding:12px 8px!important;
  line-height:1.25!important;
}
.score-team .team-player-list,
.team .team-player-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
  min-width:0;
}
.score-team .team-plus,
.team .team-plus{
  display:none;
}
.score-team .team-player-inline,
.team .team-player-inline{
  width:100%;
  max-width:100%;
  min-width:0;
  flex-wrap:nowrap;
}
.score-team.right .team-player-inline,
.team.right .team-player-inline{
  justify-content:flex-end;
}
.score-team .team-player-inline > span:last-child,
.team .team-player-inline > span:last-child{
  display:block;
  min-width:0;
  max-width:calc(100% - 25px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:390px){
  .game-setup-options-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .game-setup-options-grid .field:last-child{
    grid-column:1/-1;
  }
  .score-team,
  .team{
    font-size:11px!important;
  }
}

/* =========================================================
   v97 — Personalized King Club Player Card
   ========================================================= */

#lifetimeLeaderboard .king-stat-detail-panel.king-player-card-panel{
  position:fixed!important;
  z-index:80!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(500px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - 28px)!important;
  display:block!important;
  padding:0!important;
  overflow:auto!important;
  border:1px solid rgba(255,255,255,.94)!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 26px 80px rgba(43,25,32,.24)!important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

#lifetimeLeaderboard .king-stat-detail-panel.king-player-card-panel::-webkit-scrollbar{
  display:none;
}

.king-player-card{
  --card-wine:#71283b;
  --card-wine-dark:#351019;
  --card-muted:#8d8388;
  --card-line:#ece6e8;
  position:relative;
  overflow:hidden;
  padding:22px;
  color:#21191d;
  background:
    radial-gradient(circle at 100% 0,rgba(117,40,58,.09),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(250,247,248,.97));
}

.king-player-card::after{
  content:"";
  position:absolute;
  right:-116px;
  top:-122px;
  width:280px;
  height:280px;
  border:40px solid rgba(113,40,59,.026);
  border-radius:43% 57% 64% 36% / 42% 38% 62% 58%;
  transform:rotate(17deg);
  pointer-events:none;
}

.king-player-card-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-width:0;
}

.king-player-avatar-wrap{
  --avatar-hue:342;
  position:relative;
  width:78px;
  height:78px;
  flex:0 0 78px;
  display:grid;
  place-items:center;
}

.king-player-avatar-orbit{
  position:absolute;
  inset:3px -2px -3px 2px;
  border-radius:58% 42% 36% 64% / 44% 61% 39% 56%;
  transform:rotate(10deg);
  background:linear-gradient(145deg,hsl(var(--avatar-hue) 34% 90%),hsl(calc(var(--avatar-hue) + 28) 32% 76%));
  opacity:.72;
}

.king-player-avatar{
  position:relative;
  z-index:1;
  width:68px;
  height:68px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:39% 61% 55% 45% / 48% 39% 61% 52%;
  transform:rotate(-3deg);
  background:linear-gradient(145deg,hsl(var(--avatar-hue) 40% 91%),hsl(calc(var(--avatar-hue) + 24) 42% 77%));
  box-shadow:0 10px 22px rgba(62,27,38,.16);
}

.king-player-avatar img{
  position:absolute;
  inset:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  object-fit:cover;
  transform:rotate(3deg) scale(1.05);
}

.king-player-avatar-fallback{
  color:hsl(var(--avatar-hue) 38% 24%);
  font-size:18px;
  line-height:1;
  font-weight:880;
  letter-spacing:-.04em;
}

.king-player-avatar.has-photo .king-player-avatar-fallback{
  opacity:0;
}

.king-player-card-identity{
  min-width:0;
}

.king-player-card-kicker,
.king-player-card-meta,
.king-player-nickname>span,
.king-player-dynamic .king-dynamic-copy>span,
.king-relation-label{
  display:block;
  color:#968d91;
  font-size:8px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.16em;
}

.king-player-card-identity h3{
  margin:7px 0 0;
  overflow:hidden;
  color:#21191d;
  font-size:24px;
  line-height:1.02;
  font-weight:790;
  letter-spacing:-.045em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.king-player-card-meta{
  margin-top:7px;
  overflow:hidden;
  font-size:9px;
  font-weight:680;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap;
}

.king-player-card-rating{
  min-width:56px;
  text-align:right;
}

.king-player-card-rating b{
  display:block;
  color:#21191d;
  font-size:30px;
  line-height:.9;
  font-weight:820;
  letter-spacing:-.06em;
}

.king-player-card-rating span{
  display:block;
  margin-top:7px;
  color:#978e92;
  font-size:8px;
  font-weight:850;
  letter-spacing:.17em;
}

.king-player-card-close{
  position:absolute!important;
  z-index:3;
  top:-13px;
  right:-13px;
  width:28px!important;
  height:28px!important;
  background:rgba(239,235,237,.92)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.king-player-nickname{
  position:relative;
  z-index:1;
  margin-top:18px;
  padding:13px 15px;
  border:1px solid rgba(117,40,58,.12);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(250,240,243,.92),rgba(247,236,239,.66));
}

.king-player-nickname b{
  display:block;
  margin-top:5px;
  color:var(--card-wine);
  font-size:15px;
  line-height:1.15;
  font-weight:830;
  letter-spacing:-.025em;
}

.king-player-nickname small{
  display:block;
  margin-top:4px;
  color:#8c7f84;
  font-size:9px;
  line-height:1.35;
}

.king-player-stat-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}

.king-player-stat-grid>div{
  min-width:0;
  padding:13px 12px;
  border-radius:17px;
  background:rgba(246,243,244,.92);
}

.king-player-stat-grid b{
  display:block;
  overflow:hidden;
  color:#372d31;
  font-size:18px;
  line-height:1;
  font-weight:820;
  letter-spacing:-.03em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.king-player-stat-grid span{
  display:block;
  margin-top:6px;
  color:#968d91;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.13em;
}

.king-player-dynamic{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:13px;
  padding:14px 15px;
  border:1px solid rgba(55,115,79,.16);
  border-radius:19px;
  background:linear-gradient(135deg,#f1f8f4,#edf6f1);
}

.king-player-dynamic.hot{
  border-color:rgba(173,66,41,.16);
  background:linear-gradient(135deg,#fff4ed,#fbece9);
}

.king-player-dynamic.down{
  border-color:rgba(117,93,100,.14);
  background:linear-gradient(135deg,#f5f2f3,#f1edef);
}

.king-player-dynamic.new,
.king-player-dynamic.warm{
  border-color:rgba(112,40,58,.13);
  background:linear-gradient(135deg,#faf1f4,#f5ebee);
}

.king-player-dynamic .king-dynamic-copy{
  min-width:0;
}

.king-player-dynamic .king-dynamic-copy b{
  display:block;
  margin-top:5px;
  color:#245f42;
  font-size:14px;
  line-height:1;
  font-weight:880;
  letter-spacing:.02em;
}

.king-player-dynamic.hot .king-dynamic-copy b{color:#9d402d}
.king-player-dynamic.down .king-dynamic-copy b{color:#695c61}
.king-player-dynamic.new .king-dynamic-copy b,
.king-player-dynamic.warm .king-dynamic-copy b{color:var(--card-wine)}

.king-player-dynamic .king-dynamic-copy small{
  display:block;
  margin-top:5px;
  color:#81777b;
  font-size:9px;
  line-height:1.35;
}

.king-form-strip{
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:flex-end;
}

.king-form-dot{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#2f855a;
  font-size:7.5px;
  font-weight:880;
  box-shadow:0 4px 10px rgba(39,104,72,.13);
}

.king-form-dot.t{background:#81777b}
.king-form-dot.l{background:#c35f62}

.king-form-empty{
  color:#968d91;
  font-size:8px;
  font-weight:720;
  white-space:nowrap;
}

.king-player-relations{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:13px;
  padding-top:14px;
  border-top:1px solid var(--card-line);
}

.king-player-relation{
  min-width:0;
  padding:0 3px;
}

.king-player-relation+.king-player-relation{
  padding-left:13px;
  border-left:1px solid var(--card-line);
}

.king-relation-person,
.king-relation-empty{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  margin-top:9px;
  min-width:0;
}

.king-relation-avatar,
.king-relation-empty>span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:40% 60% 54% 46% / 54% 42% 58% 46%;
  color:#5f2636;
  background:#eee4e7;
  box-shadow:0 5px 12px rgba(52,31,38,.09);
  font-size:9px;
  font-weight:840;
}

.king-player-relation.rival .king-relation-avatar{
  color:#714b24;
  background:#f2e8dc;
}

.king-relation-person div,
.king-relation-empty div{
  min-width:0;
}

.king-relation-person b,
.king-relation-empty b{
  display:block;
  overflow:hidden;
  color:#342a2f;
  font-size:11px;
  line-height:1.15;
  font-weight:790;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.king-relation-person small,
.king-relation-empty small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#978d92;
  font-size:8px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.king-player-data-notes{
  position:relative;
  z-index:1;
  margin-top:14px;
  padding-top:11px;
  border-top:1px solid var(--card-line);
}

.king-player-data-notes summary{
  color:#8b8186;
  font-size:8.5px;
  font-weight:780;
  cursor:pointer;
}

.king-player-data-notes>div{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}

.king-player-data-notes>div>span{
  min-width:0;
  padding:8px;
  border-radius:12px;
  background:#f6f3f4;
}

.king-player-data-notes small,
.king-player-data-notes b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.king-player-data-notes small{
  color:#978e92;
  font-size:7px;
}

.king-player-data-notes b{
  margin-top:4px;
  color:#3d3337;
  font-size:9px;
}

@media(max-width:560px){
  #lifetimeLeaderboard .king-stat-detail-panel.king-player-card-panel{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
    max-height:min(92dvh,760px)!important;
    border-width:1px 0 0!important;
    border-radius:28px 28px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }

  .king-player-card{
    padding:20px 16px 18px;
  }

  .king-player-card-head{
    gap:10px;
  }

  .king-player-avatar-wrap{
    width:68px;
    height:68px;
    flex-basis:68px;
  }

  .king-player-avatar{
    width:59px;
    height:59px;
  }

  .king-player-card-identity h3{
    font-size:20px;
  }

  .king-player-card-rating{
    min-width:47px;
  }

  .king-player-card-rating b{
    font-size:27px;
  }

  .king-player-card-close{
    top:-11px;
    right:-8px;
  }

  .king-player-nickname{
    margin-top:15px;
    padding:12px 13px;
  }

  .king-player-stat-grid>div{
    padding:12px 10px;
  }

  .king-player-stat-grid b{
    font-size:16px;
  }

  .king-player-dynamic{
    grid-template-columns:1fr;
    gap:10px;
  }

  .king-form-strip{
    justify-content:flex-start;
  }

  .king-player-relations{
    gap:7px;
  }

  .king-player-relation+.king-player-relation{
    padding-left:9px;
  }

  .king-relation-avatar,
  .king-relation-empty>span{
    width:32px;
    height:32px;
  }
}

@media(max-width:350px){
  .king-player-card-identity h3{font-size:18px}
  .king-player-card-meta{font-size:8px}
  .king-player-card-rating b{font-size:24px}
  .king-player-relations{grid-template-columns:1fr}
  .king-player-relation+.king-player-relation{padding:11px 3px 0;border-left:0;border-top:1px solid var(--card-line)}
}