/* ================================
   FlipClash — POLISHED LIGHT UI
   (drop-in replacement stylesheet)
   ================================ */

/* ---- Reset / base ---- */
* { box-sizing: border-box; margin: 0; padding: 0 }
:root{
  --bg1:#d7f2ea; --bg2:#c7e6ff; --center:#e4f8ef;
  --card:#ffffff; --line:rgba(18,35,30,.12);
  --text:#0f1a17; --muted:#4c6b60;
  --accent:#11b981; --accent-strong:#0fb077;
  --heads:#16a34a; --tails:#0ea5e9;
  --danger:#ef4444; --warn:#f59e0b; --ok:#22c55e;
  --shadow:0 18px 50px rgba(16,24,40,.08), 0 1px 0 rgba(16,24,40,.06);
}
html, body { height: 100% }
body{
  font-family:'Manrope',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 450px at 50% 48%, var(--center) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(1200px 700px at 15% 0%, rgba(17,185,129,.28), rgba(17,185,129,0) 60%),
    radial-gradient(1100px 700px at 100% 110%, rgba(14,165,233,.22), rgba(14,165,233,0) 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none }
img { display:block; max-width:100% }

.container{ max-width:1150px; margin:34px auto; padding:0 18px }
.card{
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow)
}
.muted{ color:var(--muted); font-size:13px }
.pill{
  font-size:13px; padding:6px 10px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:0 6px 14px rgba(16,24,40,.06)
}
.pill.heads{ background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.45) }
.pill.tails{ background:rgba(14,165,233,.16); border-color:rgba(14,165,233,.45) }
.pill.status.waiting{ background:rgba(234,179,8,.18); border-color:rgba(234,179,8,.45) }
.pill.status.running{ background:rgba(14,165,233,.18); border-color:rgba(14,165,233,.45) }
.pill.status.finished{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45) }

.input{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ border-color:rgba(17,185,129,.55); box-shadow:0 0 0 4px rgba(17,185,129,.12); outline:0 }

/* ---- Top bar ---- */
.site-top{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.78); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}
.top-inner{ max-width:1150px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:14px }
.brand{ font:800 22px/1 'Fredoka',system-ui; color:#062a1d }
.top-nav{ margin-left:auto; display:flex; gap:8px }
.nav-pill{
  padding:8px 12px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); font-weight:700; transition:transform .12s ease, box-shadow .12s ease
}
.nav-pill:hover{ transform:translateY(-1px) }
.nav-pill.muted{ opacity:.55; pointer-events:none }
.top-cta{ margin-left:8px }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; border-radius:16px; color:#062a1d;
  background:linear-gradient(180deg,var(--accent-strong),var(--accent));
  border:0; box-shadow:0 14px 28px rgba(17,185,129,.35);
  font-weight:800; letter-spacing:.3px; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn:disabled{ filter:grayscale(.3); opacity:.6; cursor:not-allowed }
.btn.inline{ display:inline-flex }
.start-btn{ font-size:18px; padding:14px 22px }

/* ---- Hero ---- */
.hero-full{ min-height:70vh; display:grid; place-items:center; padding:24px; text-align:center }
.hero-center{ max-width:980px; margin:0 auto }
.hero-title{
  font:800 clamp(44px,6.2vw,72px)/1.05 'Fredoka',system-ui; letter-spacing:.2px;
  text-shadow:0 10px 26px rgba(16,24,40,.08)
}
.hero-sub{ color:var(--muted); max-width:760px; font-size:18px; margin:6px auto }
.brand-badge{
  font-weight:800; letter-spacing:.5px; padding:8px 14px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow); display:inline-block; margin-bottom:10px
}

/* ---- Room list (legacy on battles page) ---- */
.room-list{ display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto }
.room{
  display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text);
  padding:12px; border-radius:14px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow);
  transition:.15s transform ease, border-color .15s ease
}
.room:hover{ transform:translateY(-2px); border-color:rgba(14,165,233,.35) }
.room-code{ font-weight:800 }
.room-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* ---- Modal ---- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,20,18,.35); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; z-index:50; opacity:0; transition:opacity .18s ease
}
.modal-backdrop.show{ display:flex; opacity:1 }
.modal-card{
  width:min(640px,92vw); background:rgba(255,255,255,.94); border:1px solid var(--line);
  border-radius:18px; padding:22px; box-shadow:var(--shadow); position:relative;
  transform:translateY(6px); transition:transform .18s ease
}
.modal-backdrop.show .modal-card{ transform:translateY(0) }
.modal-title{ font-size:22px; margin-bottom:12px; text-align:center }
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:10px;
  background:#fff; border:1px solid var(--line); cursor:pointer; font-size:20px; line-height:1; box-shadow:var(--shadow)
}
.option-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px }
@media (max-width:560px){ .option-grid{ grid-template-columns:1fr } }
.option-card{
  display:flex; align-items:center; justify-content:center; gap:12px; padding:16px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
  font-weight:800; letter-spacing:.2px; transition:transform .12s ease, box-shadow .12s ease, background .12s ease, outline-color .12s ease
}
.option-card .option-ico{ width:40px; height:40px; display:grid; place-items:center }
.option-card .option-ico img{ width:100%; height:100% }
.option-card.heads:hover{ transform:translateY(-2px); background:rgba(34,197,94,.12); outline:2px solid rgba(34,197,94,.55) }
.option-card.tails:hover{ transform:translateY(-2px); background:rgba(14,165,233,.12); outline:2px solid rgba(14,165,233,.55) }

/* ---- Typography bits ---- */
.page-title{ font:800 clamp(24px,3.2vw,32px)/1.1 'Fredoka',system-ui; margin-bottom:10px }
.section-title{ font:700 18px/1.1 'Fredoka',system-ui; margin-bottom:8px }
.section-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px }
.section-head .sub{ font-size:13px }
.section-head.mini{ align-items:center }
.section-head.mini h3{ font-size:18px }
.divider{ height:1px; background:var(--line); margin:12px 0 }

/* ---- Players / ready ---- */
.room-head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:8px }
.player{ display:flex; flex-direction:column; align-items:center; gap:8px }
.avatar{
  width:60px; height:60px; border-radius:16px; background:linear-gradient(180deg,#fff,#f7fbf9);
  border:1px solid var(--line); box-shadow:var(--shadow)
}
.vs-pill{ padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:800; box-shadow:var(--shadow) }

.u-wrap{ display:flex; gap:14px; margin-bottom:8px; flex-wrap:wrap }
.u-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px;
  border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); min-width:140px;
  transition: box-shadow .18s ease, transform .12s ease
}
.u-card.is-self{ outline:2px solid rgba(14,165,233,.35) }
.u-avatar{
  position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#062a1d;
  background:linear-gradient(180deg,#f7fbf9,#eaf8f2); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden
}
.u-letter{ font:800 24px/1 'Fredoka',system-ui }
.u-name{ font-weight:800; max-width:160px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.u-tick{ position:absolute; right:-6px; bottom:-6px; width:28px; height:28px; opacity:0; transform:scale(.4); transition:.18s ease }
.u-card.is-ready .u-tick{ opacity:1; transform:scale(1) }
.u-card.is-ready .u-avatar{ animation:readyPulse 1.6s ease-in-out 2 }
@keyframes readyPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,0) } 50%{ box-shadow:0 0 0 10px rgba(22,163,74,.18) } }

/* ---- Coin stage / result ---- */
.coin-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(380px 160px at 50% 110%, rgba(17,185,129,.25), rgba(17,185,129,0) 60%), #ffffffaa;
  border-radius:22px; padding:24px; border:1px solid var(--line); box-shadow:var(--shadow)
}
.result-banner{
  position:absolute; bottom:16px; padding:10px 14px; border-radius:12px;
  background:linear-gradient(180deg,rgba(34,197,94,.35),rgba(34,197,94,.18));
  border:1px solid rgba(34,197,94,.45); font-weight:800; letter-spacing:.3px; box-shadow:0 12px 26px rgba(34,197,94,.25)
}
#coinCanvas{ width:min(90vw, 440px); height:auto }
@media (max-width:520px){ .coin-stage{ padding:16px } }

/* ---- Overlay (waiting) ---- */
.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,18,.35); backdrop-filter: blur(6px); border-radius:22px; border:1px solid var(--line); z-index:5
}
.overlay-inner{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:16px 18px; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)
}
.overlay-ico{ width:72px; height:72px; animation:pulse 1.6s ease-in-out infinite }
.overlay-title{ font:800 20px/1.1 'Fredoka',system-ui }
.overlay-sub{ color:var(--muted); font-weight:600 }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }

/* ---- Join: choice icons size fix ---- */
.join-room .choice-ico{ width:48px; height:48px }
.join-room .choice-ico img{ width:100%; height:100%; object-fit:contain }
.join-room .card img{ max-width:96px; height:auto }

/* ---- Battles (cards grid) ---- */
.rooms-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
@media (max-width:980px){ .rooms-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .rooms-grid{ grid-template-columns:1fr } }

.room-card{
  display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s ease
}
.room-card:hover{ transform:translateY(-2px); border-color:rgba(14,165,233,.35) }
.room-top{ display:flex; align-items:center; justify-content:space-between }
.rc-code{ font-weight:800 }
.rc-status{ font-size:12px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); background:#fff }
.rc-status.waiting{ background:rgba(234,179,8,.18); border-color:rgba(234,179,8,.45) }
.rc-status.running{ background:rgba(14,165,233,.16); border-color:rgba(14,165,233,.45) }
.rc-status.finished{ background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.45) }
.rc-line{ display:flex; align-items:center; gap:8px }
.rc-tag{ font-size:12px; color:var(--muted); min-width:44px }
.rc-value{ font-weight:700; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rc-chip{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:#fff }
.rc-chip.heads{ background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.45) }
.rc-chip.tails{ background:rgba(14,165,233,.16); border-color:rgba(14,165,233,.45) }
.rc-empty{ font-size:13px }

/* ---- Join Room layout ---- */
.layout-two{ display:grid; grid-template-columns:2fr 1.2fr; gap:14px }
@media (max-width:900px){ .layout-two{ grid-template-columns:1fr } }
.room-meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px }
.join-form .choice-row.small .choice-ico{ width:44px; height:44px }
.join-form .form-grid{ display:grid; grid-template-columns:1fr auto; gap:10px }
@media (max-width:520px){ .join-form .form-grid{ grid-template-columns:1fr } }

/* ---- Copybox (click to copy) ---- */
.copybox{
  position:relative; display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow); cursor:pointer
}
.copybox input{ flex:1; border:0; outline:none; background:transparent; color:var(--text) }
.copybox .copy-btn{ padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700 }
.copied-tip{
  position:absolute; right:12px; bottom:-26px; font-size:12px; background:#fff;
  border:1px solid var(--line); padding:3px 8px; border-radius:8px; opacity:0; transform:translateY(4px);
  transition:.18s ease; pointer-events:none
}
.copied-tip.show{ opacity:1; transform:translateY(0) }
@media (max-width:520px){
  .copybox{ flex-wrap:wrap; gap:8px }
  .copybox .copy-btn{ width:100% }
}

/* ---- Accessibility / focus ---- */
:focus-visible{ outline:2px solid rgba(14,165,233,.65); outline-offset:2px }
.btn:focus-visible{ outline:3px solid rgba(17,185,129,.45) }

/* ---- Utilities ---- */
.grid { display:grid; gap:12px }
.hidden { display:none !important }
.center { display:grid; place-items:center }
.text-right{ text-align:right }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}