:root{
  --bg-deep:#070911;
  --bg-panel:#131728;
  --bg-panel-2:#1a1f36;
  --bg-panel-3:#20263f;
  --border-soft:rgba(255,255,255,0.07);
  --border-soft-2:rgba(255,255,255,0.12);
  --text-main:#f3f5fc;
  --text-dim:#9298b3;
  --text-dim-2:#6d7390;
  --green:#28e07d;
  --green-2:#0fc98a;
  --blue:#3a8bff;
  --blue-2:#1f63e0;
  --purple:#8b5cf6;
  --purple-2:#6d3cf0;
  --rock:#ffb238;
  --rock-2:#f57f17;
  --paper:#1fe0ae;
  --paper-2:#0aa583;
  --scissors:#ff5c7c;
  --scissors-2:#e5215a;
  --danger:#ff5c7c;
  --font-display:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --shadow-soft:0 8px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;
  padding:0;
  background:var(--bg-deep);
  color:var(--text-main);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  height:100%;
  touch-action:manipulation;
  overflow:hidden;
}
/* Desktop/wide-viewport backdrop: subtle glow behind the phone-width app,
   so it doesn't look like an unstyled empty page on large screens. */
@media (min-width:480px){
  html,body{
    background:
      radial-gradient(circle at 20% 20%, rgba(139,92,246,0.10), transparent 45%),
      radial-gradient(circle at 80% 80%, rgba(58,139,255,0.10), transparent 45%),
      #07080f;
  }
}

/* ---------- Native-app splash screen ---------- */
#splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:radial-gradient(circle at 50% 30%, #171b30, var(--bg-deep));
  transition:opacity .5s ease, visibility .5s ease;
}
#splash.splash-hide{opacity:0;visibility:hidden;pointer-events:none;}
.splash-badge{
  width:72px;height:72px;border-radius:20px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  box-shadow:0 10px 34px rgba(139,92,246,0.5);
  animation:splashPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes splashPop{from{opacity:0;transform:scale(0.6);}to{opacity:1;transform:scale(1);}}
.splash-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  letter-spacing:0.4px;
}
.splash-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(255,255,255,0.12);
  border-top-color:var(--blue);
  animation:spin 0.9s linear infinite;
  margin-top:6px;
}

/* #app is pinned directly to the visual viewport with position:fixed
   instead of being sized with vh/dvh units. This is deliberate: iOS
   Safari's viewport-height units are unreliable because they change
   based on whether its own toolbar happens to be expanded or collapsed
   at that instant, which is exactly what caused the persistent gaps
   however the height was calculated. A fixed, inset:0 element is instead
   continuously pinned to whatever the actual visible content area is,
   with no height math involved at all — the most robust option. */
#app{
  position:fixed;
  inset:0;
  max-width:430px;
  margin:0 auto;
  background:var(--bg-deep);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
/* Desktop: switch back to a centered, normal-flow card — the vh/toolbar
   problem this fix targets is iOS-Safari-specific and doesn't apply here. */
@media (min-width:480px){
  #app{
    position:relative;
    inset:auto;
    min-height:calc(100vh - 48px);
    min-height:calc(100dvh - 48px);
    margin:24px auto;
    border-radius:28px;
    box-shadow:0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  }
}

/* ---------- Ambient decorative glow blobs ---------- */
.bg-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  z-index:0;
  pointer-events:none;
  opacity:0.55;
}
.blob-1{
  width:260px;height:260px;
  top:-90px;left:-80px;
  background:radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%);
}
.blob-2{
  width:280px;height:280px;
  top:120px;right:-110px;
  background:radial-gradient(circle, rgba(58,139,255,0.45), transparent 70%);
}
.blob-3{
  width:240px;height:240px;
  bottom:-100px;left:20%;
  background:radial-gradient(circle, rgba(40,224,125,0.28), transparent 70%);
}

.hidden{display:none !important;}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px 4px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:21px;
  letter-spacing:0.2px;
}
.brand .emoji-badge{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  box-shadow:0 4px 16px rgba(139,92,246,0.4);
}
#btn-notif{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:12px;
  font-size:16px;
  cursor:pointer;
}

/* ---------- Screens ---------- */
.screen{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:8px 22px 22px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Hero (home) ---------- */
.hero{
  text-align:center;
  margin:14px 0 22px;
}
.hero-badge{
  font-size:34px;
  letter-spacing:6px;
  filter:drop-shadow(0 6px 18px rgba(139,92,246,0.35));
  animation:heroFloat 3.5s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hero-tagline{
  color:var(--text-dim);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.3px;
  margin-top:8px;
}

/* ---------- Profile row (home) ---------- */
.profile-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 22px;
  background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--shadow-soft);
}
.avatar{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 0 0 3px rgba(58,139,255,0.15), 0 6px 20px rgba(58,139,255,0.35);
  flex-shrink:0;
  overflow:hidden;
}
.profile-fields{flex:1;min-width:0;}
.profile-sub{
  color:var(--text-dim);
  font-size:11px;
  font-weight:600;
  margin-bottom:5px;
}
.name-edit-row{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1.5px solid var(--border-soft-2);
  padding-bottom:6px;
  transition:border-color .2s ease;
}
.name-edit-row:focus-within{
  border-bottom-color:var(--blue);
  box-shadow:0 1px 0 0 rgba(58,139,255,0.4);
}
.name-inline-input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:var(--text-main);
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  padding:0;
}
.name-inline-input::placeholder{color:var(--text-dim-2);font-weight:700;}
.name-edit-pencil{
  font-size:13px;
  opacity:0.5;
  flex-shrink:0;
}

/* ---------- Inputs ---------- */
.input-plain{
  width:100%;
  background:var(--bg-panel);
  border:1.5px solid var(--border-soft-2);
  color:var(--text-main);
  padding:14px 16px;
  border-radius:14px;
  font-size:15px;
  font-family:var(--font-display);
  outline:none;
  margin-bottom:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  text-align:center;
  font-weight:700;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input-plain:focus{border-color:var(--blue);box-shadow:0 0 20px rgba(58,139,255,0.2);}

/* ---------- Buttons ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  padding:16px 18px;
  border:none;
  border-radius:16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.3px;
  cursor:pointer;
  color:#07130d;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), filter .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .5s ease;
}
.btn:hover::after{transform:translateX(100%);}
.btn:active{transform:scale(0.96);}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

.btn-green{
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 8px 28px rgba(40,224,125,0.35), 0 0 0 1px rgba(40,224,125,0.2) inset;
  margin-bottom:14px;
}
.btn-blue{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#eaf3ff;
  box-shadow:0 8px 28px rgba(58,139,255,0.32), 0 0 0 1px rgba(58,139,255,0.2) inset;
}
.btn-outline{
  background:var(--bg-panel);
  border:1.5px solid var(--border-soft-2);
  color:var(--text-dim);
  box-shadow:none;
}
.btn-danger{
  background:linear-gradient(135deg,var(--scissors),var(--scissors-2));
  color:#fff;
}
.btn-sm{padding:11px 14px;font-size:13px;border-radius:12px;}

.link-btn{
  background:none;border:none;color:var(--blue);
  font-size:13px;text-align:center;cursor:pointer;
  padding:10px;font-weight:600;font-family:var(--font-body);
}

/* ---------- Action cards (home) ---------- */
.action-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:8px;
}

/* Game selection screen: noticeably more breathing room than the home
   screen's action cards, since there are only two and they should read
   as distinct, separate choices rather than a tight list. */
.game-select-cards{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:28px;
}
.game-select-divider{
  text-align:center;
  color:var(--text-dim-2);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  position:relative;
}
.game-select-divider::before,
.game-select-divider::after{
  content:'';
  position:absolute;
  top:50%;
  width:38%;
  height:1px;
  background:var(--border-soft-2);
}
.game-select-divider::before{left:0;}
.game-select-divider::after{right:0;}

.action-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:16px 16px;
  cursor:pointer;
  text-align:left;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, box-shadow .15s ease;
}
.action-card:active{transform:scale(0.97);}
.action-card-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.action-card-green{box-shadow:var(--shadow-soft);}
.action-card-green .action-card-icon{
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 6px 18px rgba(40,224,125,0.4);
}
.action-card-green:hover{border-color:rgba(40,224,125,0.5);}
.action-card-blue .action-card-icon{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  box-shadow:0 6px 18px rgba(58,139,255,0.4);
}
.action-card-blue:hover{border-color:rgba(58,139,255,0.5);}
.action-card-purple .action-card-icon{
  background:linear-gradient(135deg,var(--purple),var(--purple-2));
  box-shadow:0 6px 18px rgba(139,92,246,0.4);
}
.action-card-purple:hover{border-color:rgba(139,92,246,0.5);}
.action-card-body{flex:1;min-width:0;}
.action-card-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--text-main);
}
.action-card-sub{
  font-size:12px;
  color:var(--text-dim);
  margin-top:2px;
}
.action-card-arrow{
  font-size:22px;
  color:var(--text-dim-2);
  flex-shrink:0;
}

/* ---------- Searching / share screens ---------- */
.center-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:20px;
}
.center-screen h2{font-family:var(--font-display);font-size:21px;}
.spinner{
  width:66px;height:66px;border-radius:50%;
  border:4px solid rgba(58,139,255,0.12);
  border-top-color:var(--blue);
  border-right-color:var(--purple);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.room-code-box{
  font-family:var(--font-display);
  font-size:36px;font-weight:800;letter-spacing:9px;
  background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
  border:1.5px dashed rgba(58,139,255,0.55);
  padding:18px 24px;border-radius:18px;
  box-shadow:0 8px 30px rgba(58,139,255,0.2);
}

/* ---------- Gameplay header ---------- */
.game-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:8px 0 22px;
  background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px 14px;
  box-shadow:var(--shadow-soft);
}
.player-chip{
  display:flex;align-items:center;gap:10px;
  flex:1;
  min-width:0;
}
.player-chip.right{flex-direction:row-reverse;text-align:right;}
.chip-avatar{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
}
.chip-avatar.me{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 0 2px rgba(58,139,255,0.15), 0 4px 14px rgba(58,139,255,0.4);}
.chip-avatar.opp{background:linear-gradient(135deg,#ff7a7a,#c81d5c);box-shadow:0 0 0 2px rgba(255,92,124,0.15), 0 4px 14px rgba(255,92,124,0.4);}
.chip-name{font-family:var(--font-display);font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip-sub{font-size:11px;color:var(--text-dim);margin-top:1px;}

.round-badge{
  text-align:center;
  min-width:76px;
  flex-shrink:0;
}
.round-badge .r{font-family:var(--font-display);font-size:10.5px;color:var(--text-dim);font-weight:700;letter-spacing:0.6px;}

.timer-ring-wrap{
  position:relative;
  width:52px;height:52px;
  margin:4px auto 0;
}
.timer-ring{
  width:52px;height:52px;
  transform:rotate(-90deg);
}
.timer-ring-bg{
  fill:none;
  stroke:var(--bg-panel-3);
  stroke-width:5;
}
.timer-ring-fg{
  fill:none;
  stroke:var(--blue);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:169.6; /* 2 * PI * r(27) */
  stroke-dashoffset:0;
  transition:stroke-dashoffset .25s linear, stroke .25s ease;
}
.timer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:17px;font-weight:800;color:var(--text-main);
  font-variant-numeric:tabular-nums;
}
.timer.warn{color:var(--scissors);animation:pulse .6s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.55;transform:scale(1.08);}}

.make-move-title{
  text-align:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:0.4px;
  margin:4px 0 22px;
  color:var(--text-main);
}

.choices-row{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}
.choice-btn{
  flex:1;
  aspect-ratio:1/1.05;
  border-radius:20px;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:0.5px;
  color:#1c1206;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), filter .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.choice-btn .ic{font-size:34px;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15));}
.choice-btn:active:not(:disabled){transform:scale(0.92);}
.choice-btn:hover:not(:disabled){transform:translateY(-3px);}
.choice-btn.rock{background:linear-gradient(160deg,var(--rock),var(--rock-2));box-shadow:0 10px 26px rgba(255,178,56,0.35);}
.choice-btn.paper{background:linear-gradient(160deg,var(--paper),var(--paper-2));box-shadow:0 10px 26px rgba(31,224,174,0.35);color:#032a21;}
.choice-btn.scissors{background:linear-gradient(160deg,var(--scissors),var(--scissors-2));box-shadow:0 10px 26px rgba(255,92,124,0.35);color:#360212;}
.choice-btn.selected{outline:3px solid #fff;outline-offset:-3px;transform:scale(0.95) translateY(0);}
.choice-btn:disabled{opacity:0.32;cursor:not-allowed;filter:grayscale(0.5);transform:none;}

.status-bar{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:15px;
  padding:13px 16px;
  font-size:13px;
  color:var(--text-dim);
  text-align:center;
  margin-bottom:10px;
}
.status-bar b{color:var(--text-main);}

/* ---------- Reactions ---------- */
.reaction-bar{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:10px;
}
.reaction-btn{
  background:var(--bg-panel);
  border:1px solid var(--border-soft-2);
  border-radius:14px;
  padding:8px 14px;
  font-size:19px;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease;
  line-height:1;
}
.reaction-btn:hover{border-color:rgba(255,255,255,0.25);}
.reaction-btn:active{transform:scale(0.85);}

#reaction-fly-zone{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:45;
  overflow:hidden;
}
.reaction-fly{
  position:absolute;
  bottom:110px;
  left:50%;
  font-size:38px;
  animation:reactionFlyUp 1.6s ease-out forwards;
}
@keyframes reactionFlyUp{
  0%{opacity:0;transform:translate(-50%,0) scale(0.4) rotate(-8deg);}
  12%{opacity:1;transform:translate(-50%,-14px) scale(1.2) rotate(4deg);}
  30%{transform:translate(-50%,-40px) scale(1) rotate(-4deg);}
  100%{opacity:0;transform:translate(-50%,-220px) scale(0.9) rotate(6deg);}
}

/* ---------- Chat ---------- */
.chat-fab{
  position:absolute;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(135deg,#212a48,#141a2f);
  border:1px solid rgba(58,139,255,0.4);
  color:var(--text-main);
  padding:11px 18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(58,139,255,0.28);
  z-index:30;
  transition:transform .15s ease;
}
.chat-fab:hover{transform:translateY(-2px);}
.chat-badge{
  background:linear-gradient(135deg,var(--scissors),var(--scissors-2));
  color:#fff;
  font-size:10px;
  min-width:17px;height:17px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  font-family:var(--font-body);
}

.chat-panel{
  position:absolute;
  left:0;right:0;bottom:0;
  height:62%;
  background:var(--bg-panel);
  border-top-left-radius:26px;
  border-top-right-radius:26px;
  border:1px solid var(--border-soft-2);
  display:flex;
  flex-direction:column;
  z-index:40;
  box-shadow:0 -14px 50px rgba(0,0,0,0.55);
}
.chat-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border-soft);
  font-family:var(--font-display);
  font-weight:800;
}
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.msg-row{display:flex;}
.msg-row.me{justify-content:flex-end;}
.msg-bubble{
  max-width:75%;
  padding:10px 14px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.4;
}
.msg-bubble.them{background:var(--bg-panel-3);border-bottom-left-radius:5px;}
.msg-bubble.me{background:linear-gradient(135deg,var(--blue),var(--blue-2));border-bottom-right-radius:5px;color:#eaf3ff;}
.msg-sender{font-size:10.5px;color:var(--text-dim);margin-bottom:3px;font-weight:600;}

.chat-input-row{
  display:flex;gap:9px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-soft);
}
.chat-input-row input{
  flex:1;
  background:var(--bg-panel-3);
  border:1px solid var(--border-soft-2);
  border-radius:22px;
  padding:11px 18px;
  color:var(--text-main);
  outline:none;
  font-size:13.5px;
  font-family:var(--font-body);
}
.chat-input-row input:focus{border-color:var(--blue);}
.chat-send{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  border:none;color:#fff;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;
  box-shadow:0 4px 14px rgba(58,139,255,0.4);
  flex-shrink:0;
}

/* ---------- Overlays ---------- */
.overlay{
  position:absolute;
  inset:0;
  background:rgba(4,5,10,0.85);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:26px;
}
.overlay-card{
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-soft-2);
  border-radius:26px;
  padding:30px 26px;
  width:100%;
  max-width:340px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}}
.overlay-card h2{margin:8px 0 4px;font-family:var(--font-display);font-size:23px;}
.overlay-card p{color:var(--text-dim);font-size:13.5px;}

.duel-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin:22px 0;
}
.duel-choice{
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.duel-choice .ic{
  width:68px;height:68px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  background:var(--bg-panel-3);
  border:1px solid var(--border-soft-2);
}
/* "Clash" reveal: both choices slide in from opposite sides and collide,
   the VS flashes on impact, then the result tag pops in a beat later. */
.duel-choice:first-child{animation:clashInLeft .45s cubic-bezier(.34,1.56,.64,1);}
.duel-choice:last-child{animation:clashInRight .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes clashInLeft{
  from{opacity:0;transform:translateX(-50px) scale(0.6);}
  60%{transform:translateX(5px) scale(1.08);}
  100%{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes clashInRight{
  from{opacity:0;transform:translateX(50px) scale(0.6);}
  60%{transform:translateX(-5px) scale(1.08);}
  100%{opacity:1;transform:translateX(0) scale(1);}
}
.duel-vs{
  font-family:var(--font-display);font-weight:800;color:var(--text-dim-2);font-size:13px;
  animation:vsFlash .4s ease .35s backwards;
}
@keyframes vsFlash{
  0%{opacity:0;transform:scale(0.5);}
  60%{opacity:1;transform:scale(1.5);color:var(--scissors);}
  100%{opacity:1;transform:scale(1);color:var(--text-dim-2);}
}

.result-tag{
  display:inline-block;
  padding:6px 16px;
  border-radius:22px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:0.4px;
  margin-top:4px;
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1) .45s backwards;
}
.result-tag.win{background:rgba(40,224,125,0.15);color:var(--green);}
.result-tag.lose{background:rgba(255,92,124,0.15);color:var(--scissors);}
.result-tag.tie{background:rgba(58,139,255,0.15);color:var(--blue);}

.score-line{
  font-family:var(--font-display);
  font-size:16px;font-weight:700;margin:10px 0 2px;
}

.toast{
  position:absolute;
  top:16px;left:50%;
  transform:translateX(-50%);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft-2);
  padding:11px 20px;
  border-radius:14px;
  font-size:13px;
  z-index:80;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  max-width:85%;
  text-align:center;
}

.copy-row{display:flex;gap:10px;width:100%;}
.copy-row .btn{flex:1;}

.small-note{font-size:11.5px;color:var(--text-dim-2);margin-top:8px;}

/* =========================================================================
   DURAK — card game visuals
   ========================================================================= */

/* ---------- Playing cards ---------- */
.dk-card{
  width:56px;
  height:80px;
  border-radius:8px;
  background:linear-gradient(160deg,#fdfdfd,#eef0f5);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 3px 10px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:5px 6px;
  flex-shrink:0;
  position:relative;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
  user-select:none;
}
.dk-card-corner{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  line-height:1.05;
  text-align:left;
}
.dk-card-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  pointer-events:none;
}
.dk-card.dk-black{color:#161a24;}
.dk-card.dk-red{color:#d1274a;}
.dk-card.dk-black .dk-card-center{color:#161a24;}
.dk-card.dk-red .dk-card-center{color:#d1274a;}

.dk-card-back{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px),
    linear-gradient(160deg,var(--purple),var(--blue-2));
  border:1px solid rgba(255,255,255,0.15);
  cursor:default;
}

.dk-card-selected{
  transform:translateY(-14px) scale(1.06);
  box-shadow:0 10px 22px rgba(58,139,255,0.5), 0 0 0 2px var(--blue);
}
.dk-card:not(.dk-card-back):hover{transform:translateY(-6px);}

/* Small trump-indicator card, same visual style at reduced size */
.dk-trump-mini .dk-card, .dk-trump-mini{
  width:40px;height:58px;
}
.dk-trump-mini .dk-card-corner{font-size:10px;}
.dk-trump-mini .dk-card-center{font-size:18px;}

/* ---------- Header (opponent info + trump/deck) ---------- */
.durak-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 14px;
  background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow-soft);
}
.durak-trump-badge{
  display:flex;
  align-items:center;
  gap:8px;
}
.dk-deck-count{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:var(--text-dim);
  white-space:nowrap;
}

/* ---------- Table ---------- */
.durak-table{
  flex:1;
  min-height:150px;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  gap:14px;
  padding:10px;
  margin-bottom:12px;
}
.dk-pair{
  position:relative;
  width:56px;
  height:80px;
}
.dk-pair .dk-card{position:absolute;top:0;left:0;}
.dk-pair .dk-defense-card{
  top:14px;
  left:14px;
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
}
.dk-table-empty{
  color:var(--text-dim-2);
  font-size:13px;
  font-weight:600;
}

/* ---------- Hand ---------- */
.durak-hand-wrap{
  overflow-x:auto;
  overflow-y:visible;
  padding:16px 4px 6px;
  margin-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.durak-hand{
  display:flex;
  gap:8px;
  justify-content:center;
  min-width:min-content;
  padding:0 4px;
}

/* ---------- Action bar ---------- */
.durak-actions{
  display:flex;
  gap:10px;
  margin-bottom:8px;
}
.durak-actions .btn{flex:1;margin-bottom:0;}

/* =========================================================================
   JOKER SCOREBOOK
   ========================================================================= */
.joker-name-input{
  text-transform:none;
  letter-spacing:normal;
  text-align:left;
  font-weight:600;
  margin-bottom:10px;
}

.joker-toggle-group{
  display:flex;
  gap:8px;
  margin-bottom:6px;
}
.joker-toggle-btn{
  flex:1;
  background:var(--bg-panel);
  border:1.5px solid var(--border-soft-2);
  border-radius:12px;
  padding:10px 6px;
  color:var(--text-dim);
  font-family:var(--font-display);
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease;
}
.joker-toggle-btn:active{transform:scale(0.95);}
.joker-toggle-btn.active{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  border-color:transparent;
  color:#eaf3ff;
  box-shadow:0 4px 14px rgba(58,139,255,0.35);
}

/* ---------- Totals header ---------- */
.joker-totals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:8px 0 12px;
}
.joker-total-chip{
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:10px 12px;
  text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.joker-total-chip .jname{
  font-size:11px;color:var(--text-dim);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.joker-total-chip .jscore{
  font-family:var(--font-display);font-weight:800;font-size:20px;margin-top:2px;
}
.joker-total-chip.leading{
  border-color:rgba(40,224,125,0.5);
  box-shadow:0 0 16px rgba(40,224,125,0.15);
}

/* ---------- Hand entry card ---------- */
.joker-entry-card{
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:var(--shadow-soft);
}
.joker-hand-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:var(--text-dim);
}
.joker-hand-input{
  width:64px;
  background:var(--bg-panel-3);
  border:1px solid var(--border-soft-2);
  border-radius:8px;
  padding:7px 8px;
  color:var(--text-main);
  font-family:var(--font-display);
  font-weight:800;
  text-align:center;
  font-size:14px;
}
.joker-entry-grid{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.joker-entry-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.joker-entry-row .pname{
  flex:1;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-main);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.joker-entry-row .jlabel{
  font-size:10px;
  color:var(--text-dim-2);
  width:34px;
  text-align:center;
  flex-shrink:0;
}
.joker-entry-row input{
  width:48px;
  background:var(--bg-panel-3);
  border:1px solid var(--border-soft-2);
  border-radius:8px;
  padding:6px 4px;
  color:var(--text-main);
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
}
.joker-entry-row input:focus{border-color:var(--blue);}

/* ---------- History table ---------- */
.joker-history{
  max-height:240px;
  overflow-y:auto;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:var(--bg-panel);
  -webkit-overflow-scrolling:touch;
}
.joker-history table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
.joker-history th, .joker-history td{
  padding:7px 6px;
  text-align:center;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.joker-history th{
  color:var(--text-dim);
  font-family:var(--font-display);
  font-weight:700;
  font-size:10px;
  position:sticky;
  top:0;
  background:var(--bg-panel-2);
  z-index:1;
}
.joker-history .jscore-pos{color:var(--green);font-weight:700;}
.joker-history .jscore-neg{color:var(--scissors);font-weight:700;}
.joker-history-empty{
  padding:20px;
  text-align:center;
  color:var(--text-dim-2);
  font-size:12.5px;
}

/* ---------- Step-by-step bid/take entry ---------- */
.joker-step-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  color:var(--text-main);
  margin-bottom:10px;
  text-align:center;
}
.joker-step-title b{color:var(--blue);}
.joker-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-bottom:8px;
}
.joker-pill-btn{
  min-width:44px;
  padding:10px 14px;
  background:var(--bg-panel-3);
  border:1.5px solid var(--border-soft-2);
  border-radius:12px;
  color:var(--text-main);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease;
}
.joker-pill-btn:hover:not(:disabled){border-color:var(--blue);}
.joker-pill-btn:active:not(:disabled){transform:scale(0.92);}
.joker-pill-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
  text-decoration:line-through;
}
.joker-forbidden-note{
  text-align:center;
  color:var(--scissors);
  font-size:11.5px;
  margin-top:2px;
}
.joker-auto-note{
  text-align:center;
  color:var(--green);
  font-size:11.5px;
  margin-top:2px;
}

.joker-review-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  font-size:12px;
}
.joker-review-table th, .joker-review-table td{
  padding:7px 6px;
  text-align:center;
  border-bottom:1px solid var(--border-soft);
}
.joker-review-table th{
  color:var(--text-dim);
  font-family:var(--font-display);
  font-weight:700;
  font-size:10.5px;
}