/* Mobile polish and iOS background reliability */
html,body{min-height:100%;background:var(--bg)}
body{position:relative;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none}
.bg-canvas{position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;overflow:hidden!important;background-image:url('./bg.png')!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important;transform:translateZ(0);will-change:transform;opacity:1!important;display:block!important;visibility:visible!important}
body.dark .bg-canvas{background-image:url('./bg-dark.png')!important}
.bg-canvas::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,239,232,.72),rgba(245,239,232,.36) 48%,rgba(245,239,232,.08));pointer-events:none}
body.dark .bg-canvas::after{background:linear-gradient(90deg,rgba(14,12,10,.78),rgba(14,12,10,.48) 50%,rgba(14,12,10,.16))}
.screen,.modal-overlay,.toast{position:relative;z-index:2}
.top-bar,.chat-top-bar{position:relative;z-index:3}
#particles{display:none!important}
#profile-compact,#btn-profile-top{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}

/* In-site multiplayer age gate */
#modal-age-multiplayer{position:fixed!important;inset:0!important;z-index:1000!important;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.48);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#modal-age-multiplayer.hidden{display:none!important}
#modal-age-multiplayer .centered-modal{max-width:420px;width:min(92vw,420px)}

/* Make multiplayer the main menu CTA */
.hero-actions{align-items:stretch}
#btn-multiplayer{position:relative;isolation:isolate;background:linear-gradient(135deg,var(--accent-warm),#8f5f34)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 12px 34px rgba(196,149,106,.38),0 4px 16px rgba(0,0,0,.18)!important;transform:translateY(-1px);font-weight:800!important;letter-spacing:.1px;overflow:hidden}
#btn-multiplayer::after{content:'';position:absolute;inset:-2px;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.32) 35%,transparent 70%);transform:translateX(-120%);animation:mpShine 3.8s ease-in-out infinite;z-index:-1}
#btn-multiplayer:hover{transform:translateY(-3px) scale(1.015)!important;box-shadow:0 16px 42px rgba(196,149,106,.48),0 6px 20px rgba(0,0,0,.22)!important}
#btn-solo{background:rgba(255,255,255,.48)!important;color:var(--text-dim)!important;border:1px solid var(--border)!important;box-shadow:0 4px 18px rgba(0,0,0,.08)!important;font-weight:650!important}
#btn-solo:hover{color:var(--text)!important;background:rgba(255,255,255,.68)!important}
body.dark #btn-multiplayer{background:linear-gradient(135deg,#c4956a,#6f4424)!important;color:#0e0c0a!important;box-shadow:0 12px 34px rgba(196,149,106,.28),0 4px 20px rgba(0,0,0,.55)!important}
body.dark #btn-solo{background:rgba(255,255,255,.06)!important;color:var(--text-dim)!important;border-color:var(--border)!important}
@keyframes mpShine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}

/* Multiplayer P2P + tracking */
#screen-multiplayer .mp-static-score{display:none!important}
.opponent-video-panel{position:relative;margin:.8rem .8rem 0;border-radius:20px;min-height:160px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);flex:0 0 190px}
.opponent-video-panel.hidden{display:none!important}
.remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#0e0c0a}
#remote-video-placeholder{position:relative;z-index:2;color:var(--text-dim);font-size:.85rem;font-weight:700;text-align:center;padding:1rem}
.opponent-video-panel.connected #remote-video-placeholder{display:none}
.face-canvas{z-index:5!important}

/* Multiplayer waiting state */
.opponent-avatar-waiting{object-fit:cover!important;background:#15110d!important;box-shadow:0 0 0 2px rgba(196,149,106,.28),0 8px 26px rgba(0,0,0,.22)!important}
.mp-local-msg.bot-msg{background:rgba(196,149,106,.14)!important;border:1px solid rgba(196,149,106,.22)!important}
#mp-input::placeholder{color:var(--text-dim);opacity:.78}

/* Remove old solo end-session control */
#btn-end-session{display:none!important}
.chat-bottom-bar:has(#btn-end-session){justify-content:center;min-height:48px}

@media(max-width:700px){
  .bg-canvas{background-position:52% top!important;background-size:cover!important}
  .bg-canvas::after{background:linear-gradient(180deg,rgba(245,239,232,.68) 0%,rgba(245,239,232,.38) 38%,rgba(245,239,232,.72) 100%)}
  body.dark .bg-canvas::after{background:linear-gradient(180deg,rgba(14,12,10,.76) 0%,rgba(14,12,10,.52) 45%,rgba(14,12,10,.84) 100%)}
  .screen{min-height:100svh}
  #screen-landing.active{min-height:100svh}
  .hero,.how-it-works,.safety-section,.footer{position:relative;z-index:2}

  /* Mobile header: compact icon-only controls so labels don't overlap */
  #screen-landing .top-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.5rem!important;padding:.65rem .7rem!important;min-height:66px!important;overflow:hidden!important}
  #screen-landing .logo{font-size:clamp(1.05rem,5vw,1.45rem)!important;white-space:nowrap!important;min-width:0!important;max-width:42vw!important;overflow:hidden!important;text-overflow:ellipsis!important;flex:0 1 auto!important}
  #screen-landing .top-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.38rem!important;min-width:0!important;max-width:58vw!important;flex:1 1 auto!important;overflow:hidden!important}
  #screen-landing .top-right .icon-btn{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border-radius:16px!important;font-size:0!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;white-space:nowrap!important;flex:0 0 44px!important}
  #screen-landing #btn-profile-top::before{content:'👤';font-size:1.12rem!important;line-height:1!important}
  #screen-landing #btn-dark-toggle::before{content:'☀️';font-size:1.08rem!important;line-height:1!important}
  body.dark #screen-landing #btn-dark-toggle::before{content:'🌙'}
  #screen-landing #btn-leaderboard::before{content:'🏆';font-size:1.05rem!important;line-height:1!important}
  #screen-landing #btn-leaderboard{font-size:0!important;color:transparent!important;text-shadow:none!important}
  #screen-landing .online-badge{height:44px!important;min-width:58px!important;max-width:72px!important;padding:.35rem .55rem!important;border-radius:16px!important;font-size:0!important;gap:.32rem!important;flex:0 0 auto!important;overflow:hidden!important;white-space:nowrap!important}
  #screen-landing .online-badge .pulse-dot{width:10px!important;height:10px!important;flex:0 0 10px!important}
  #screen-landing .online-badge #online-count{font-size:.92rem!important;color:var(--text)!important;font-weight:950!important;line-height:1!important}
  #screen-landing .online-badge::after{content:'on';font-size:.62rem!important;color:var(--text-dim)!important;font-weight:850!important;line-height:1!important}

  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:.75rem!important}
  #btn-multiplayer{order:-1!important;width:100%!important;padding:1.15rem 1.1rem!important;font-size:1.05rem!important;border-radius:18px!important}
  #btn-solo{width:100%!important;padding:.9rem 1rem!important;font-size:.92rem!important;border-radius:15px!important;opacity:.88}

  #screen-solo.active{height:100svh!important;min-height:100svh!important;overflow:hidden!important}
  #screen-solo .chat-body.solo-layout{height:calc(100svh - 104px)!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
  #screen-solo .video-section-solo{height:47%!important;min-height:210px!important;flex:0 0 47%!important;padding:.55rem!important;gap:.45rem!important}
  #screen-solo .text-section{height:53%!important;min-height:0!important;flex:1 1 0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;border-top:1px solid var(--border)!important}
  #screen-solo .messages-container{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:.7rem!important;gap:.45rem!important}
  #screen-solo .chat-input-bar{flex:0 0 auto!important;padding:.55rem .65rem!important;min-height:54px!important}
  #screen-solo .chat-bottom-bar{height:46px!important;min-height:46px!important;padding:.4rem .7rem!important;flex-shrink:0!important}

  #screen-multiplayer.active{height:100svh!important;min-height:100svh!important;overflow:hidden!important}
  #screen-multiplayer .chat-body.multiplayer-layout{height:calc(100svh - 126px)!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
  #screen-multiplayer .video-section-solo{height:42%!important;min-height:180px!important;flex:0 0 42%!important;padding:.55rem!important;gap:.45rem!important;position:relative!important}
  #screen-multiplayer .mp-side-panel{height:58%!important;min-height:0!important;flex:1 1 0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  #screen-multiplayer .opponent-video-panel{margin:.55rem .65rem .35rem!important;min-height:120px!important;flex:0 0 120px!important;border-radius:18px!important}
  #screen-multiplayer .opponent-card{margin:.35rem .65rem!important;padding:.65rem!important;border-radius:18px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:.4rem!important;flex:0 0 auto!important}
  #screen-multiplayer .opponent-top{gap:.6rem!important}
  #screen-multiplayer .opponent-avatar{width:38px!important;height:38px!important}
  #screen-multiplayer .opponent-top h3{font-size:.9rem!important;max-width:160px!important}
  #screen-multiplayer .opponent-top p{font-size:.72rem!important}
  #screen-multiplayer .opponent-score-row span{font-size:1.35rem!important}
  #screen-multiplayer #op-label{font-size:.56rem!important;margin-top:-.25rem!important}
  #screen-multiplayer #op-np{padding:.24rem .5rem!important;font-size:.64rem!important;justify-self:start!important}
  #screen-multiplayer .mp-messages{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:.5rem .7rem!important;gap:.35rem!important}
  #screen-multiplayer .chat-input-bar{flex:0 0 auto!important;min-height:50px!important;padding:.48rem .65rem!important}
  #screen-multiplayer .chat-bottom-bar{height:66px!important;min-height:66px!important;padding:.4rem .65rem calc(.4rem + env(safe-area-inset-bottom))!important;gap:.55rem!important;flex-shrink:0!important}
  #screen-multiplayer #mp-new,#screen-multiplayer #mp-leave{padding:.65rem .75rem!important;border-radius:16px!important;font-size:.78rem!important;min-height:44px!important}

  #screen-multiplayer .video-controls{position:absolute!important;left:50%!important;bottom:10px!important;transform:translateX(-50%)!important;z-index:8!important;width:auto!important;max-width:calc(100% - 28px)!important;padding:.38rem .5rem!important;border-radius:16px!important;background:rgba(18,12,7,.64)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;box-shadow:0 8px 24px rgba(0,0,0,.28)!important}
  #screen-multiplayer .video-panel{padding-bottom:58px!important}
  #screen-multiplayer #mp-cam,#screen-multiplayer #mp-full{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;border-radius:11px!important}
  #screen-multiplayer #mp-ai{height:34px!important;max-width:112px!important;flex-basis:112px!important;font-size:.64rem!important;padding:.32rem .55rem!important}

  .video-controls{gap:.35rem!important;padding:.42rem!important;border-radius:13px!important;flex-wrap:nowrap!important;justify-content:center!important;overflow:hidden!important}
  #btn-cam,#mp-cam{width:36px!important;min-width:36px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:10px!important;font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important}
  #btn-cam::before,#mp-cam::before{content:'📷';font-size:.95rem;line-height:1}
  #btn-cam:not(.active)::before,#mp-cam:not(.active)::before{content:'🚫';font-size:.9rem}
  #btn-fullscreen,#mp-full{width:36px!important;min-width:36px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:10px!important;font-size:.9rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important}
  .ai-status{height:34px!important;min-width:0!important;max-width:118px!important;padding:.35rem .5rem!important;border-radius:999px!important;font-size:.68rem!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;flex:0 1 118px!important}
  .ai-status .ai-dot{width:5px!important;height:5px!important;flex:0 0 5px!important}
  .video-panel{border-radius:18px!important;padding:.7rem!important}
  .score-overlay{padding:.45rem .8rem!important;border-radius:13px!important}
  .rating{font-size:1.85rem!important}
  .score-label{font-size:.62rem!important}
}

@media(max-width:430px){
  .bg-canvas{background-position:48% top!important}
  #screen-landing .top-bar{padding:.58rem .55rem!important}
  #screen-landing .logo{max-width:34vw!important;font-size:1.02rem!important}
  #screen-landing .top-right{max-width:66vw!important;gap:.3rem!important}
  #screen-landing .top-right .icon-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:15px!important;flex-basis:40px!important}
  #screen-landing .online-badge{height:40px!important;min-width:52px!important;max-width:60px!important;padding:.28rem .45rem!important;border-radius:15px!important}
  #screen-landing .online-badge #online-count{font-size:.82rem!important}
  #screen-landing .online-badge::after{display:none!important}
  #screen-solo .video-section-solo{height:45%!important;min-height:190px!important;flex-basis:45%!important}
  #screen-solo .text-section{height:55%!important}
  #screen-multiplayer .video-section-solo{height:36%!important;min-height:160px!important;flex-basis:36%!important}
  #screen-multiplayer .mp-side-panel{height:64%!important}
  #screen-multiplayer .opponent-video-panel{min-height:100px!important;flex-basis:100px!important}
  #screen-multiplayer .video-controls{bottom:8px!important;max-width:calc(100% - 20px)!important}
  #screen-multiplayer #mp-ai{max-width:96px!important;flex-basis:96px!important;font-size:.6rem!important}
  .ai-status{max-width:96px!important;flex-basis:96px!important;font-size:.62rem!important}
}

@media(max-width:370px){
  #screen-landing .logo{max-width:30vw!important;font-size:.95rem!important}
  #screen-landing .top-right{gap:.24rem!important}
  #screen-landing .top-right .icon-btn{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important;border-radius:14px!important;flex-basis:36px!important}
  #screen-landing .online-badge{height:38px!important;min-width:46px!important;max-width:50px!important;padding:.22rem .35rem!important;border-radius:14px!important}
  #screen-solo .video-section-solo{height:42%!important;min-height:175px!important;flex-basis:42%!important}
  #screen-solo .text-section{height:58%!important}
  #screen-multiplayer .video-section-solo{height:34%!important;min-height:145px!important;flex-basis:34%!important}
  #screen-multiplayer .mp-side-panel{height:66%!important}
  #screen-multiplayer .opponent-video-panel{min-height:85px!important;flex-basis:85px!important}
  #screen-multiplayer #mp-ai{max-width:82px!important;flex-basis:82px!important}
  .ai-status{max-width:82px!important;flex-basis:82px!important}
}