/* Pakadle Duel — realtime head-to-head word racing.
   Shares the sakura palette with Pakadle / Pakachess. */
:root {
  --bg:#FBF5EA; --panel:#fff; --ink:#3A2E39; --soft:#6E6470;
  --sakura:#E85D8B; --sakura-dark:#C9466F;
  --gold:#F2A93B; --turf:#4CA62E; --turf-dark:#3C8523;
  --slate:#7C748F; --light:#F3E7D5; --dark:#D9B3C1;
  --correct:#E85D8B; --present:#F2A93B; --absent:#B7AEC0;
  --shadow:rgba(58,46,57,.18);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
html { overflow-y:scroll; scrollbar-gutter:stable; }
body {
  background:var(--bg); color:var(--ink);
  font-family:"Baloo 2","Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center; min-height:100%;
  -webkit-tap-highlight-color:transparent;
}
[hidden] { display:none !important; }

/* ---- header ---- */
header {
  width:100%; max-width:760px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:14px 16px 8px; position:relative; z-index:2; flex-wrap:wrap;
}
h1 { font-size:clamp(1.3rem,4.5vw,1.9rem); font-weight:800; }
h1 .jp { color:var(--sakura); } h1 .en { color:var(--turf); }
h1 .vs { color:var(--gold); font-style:italic; }
.actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cross-link {
  font:inherit; font-weight:700; font-size:.82rem; text-decoration:none; color:var(--sakura);
  border:2px solid var(--sakura); border-radius:999px; padding:5px 11px; white-space:nowrap;
}
.cross-link:hover { background:var(--sakura); color:#fff; }
.cross-link.chess { color:var(--slate); border-color:var(--slate); }
.cross-link.chess:hover { background:var(--slate); color:#fff; }
.pill-btn {
  font:inherit; font-weight:700; font-size:.85rem; color:#fff; background:var(--turf); border:none;
  border-radius:999px; padding:7px 14px; cursor:pointer; box-shadow:0 3px 0 var(--turf-dark); white-space:nowrap;
}
.pill-btn:active { transform:translateY(3px); box-shadow:0 0 0 var(--turf-dark); }
.pill-btn.ghost { background:var(--slate); box-shadow:0 3px 0 #635B73; }
.pill-btn.danger { background:var(--sakura); box-shadow:0 3px 0 var(--sakura-dark); }
.acct-chip {
  display:flex; align-items:center; gap:6px; background:var(--panel); border:2px solid var(--gold);
  border-radius:999px; padding:4px 11px; font-weight:700; font-size:.82rem; box-shadow:0 2px 6px var(--shadow);
}
.acct-chip .acct-rating { color:var(--gold); }

main { width:100%; max-width:760px; padding:8px 14px 28px; position:relative; z-index:1; }

/* ---- lobby ---- */
.tagline { text-align:center; color:var(--soft); font-weight:600; margin:8px 0 16px; }
.guest-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center;
  background:var(--panel); border-radius:16px; padding:12px 14px; margin-bottom:16px; box-shadow:0 4px 14px var(--shadow);
}
.guest-row label { font-weight:700; color:var(--soft); }
.guest-row input {
  font:inherit; font-weight:700; padding:8px 12px; border:2px solid var(--light); border-radius:10px; width:150px; color:var(--ink);
}
.guest-row input:focus { outline:none; border-color:var(--sakura); }
.guest-hint { flex-basis:100%; text-align:center; font-size:.8rem; color:var(--soft); }
.guest-hint b { color:var(--gold); }

.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mode-card {
  font:inherit; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  background:var(--panel); border:3px solid var(--light); border-radius:18px; padding:20px 10px;
  box-shadow:0 5px 16px var(--shadow); transition:transform .12s, border-color .12s;
}
.mode-card:hover { transform:translateY(-3px); border-color:var(--sakura); }
.mode-emoji { font-size:2rem; }
.mode-name { font-weight:800; font-size:1.02rem; }
.mode-sub { font-size:.74rem; color:var(--soft); text-align:center; }

.panel-box {
  background:var(--panel); border-radius:18px; padding:20px 18px; margin-top:16px;
  box-shadow:0 6px 20px var(--shadow); display:flex; flex-direction:column; align-items:center; gap:14px;
}
.panel-box h3 { font-size:1.1rem; }
.setting { width:100%; display:flex; flex-direction:column; gap:6px; }
.set-label { font-weight:700; color:var(--soft); font-size:.85rem; }
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg button {
  font:inherit; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--ink);
  background:var(--bg); border:2px solid var(--light); border-radius:10px; padding:7px 12px; flex:1; min-width:64px;
}
.seg button.on { background:var(--sakura); color:#fff; border-color:var(--sakura); }
.row-btns { display:flex; gap:10px; width:100%; margin-top:4px; }
.room-label { font-weight:700; color:var(--soft); }
#join-code, .panel-box input {
  font:inherit; font-weight:800; font-size:1.3rem; text-align:center; letter-spacing:.2em;
  padding:10px 12px; border:2px solid var(--light); border-radius:12px; text-transform:uppercase; color:var(--ink); width:200px;
}
#join-code:focus { outline:none; border-color:var(--sakura); }
.primary-btn {
  font:inherit; font-weight:800; color:#fff; background:var(--turf); border:none; border-radius:12px;
  padding:11px 18px; cursor:pointer; box-shadow:0 4px 0 var(--turf-dark); flex:1;
}
.primary-btn:active { transform:translateY(3px); box-shadow:0 0 0 var(--turf-dark); }
.primary-btn.wide { width:100%; }
.ghost-btn {
  font:inherit; font-weight:800; color:var(--soft); background:var(--light); border:none; border-radius:12px;
  padding:11px 18px; cursor:pointer; flex:1;
}

/* waiting */
.wait-text { font-weight:800; font-size:1.1rem; }
.wait-room { color:var(--soft); }
.wait-room b { color:var(--sakura); letter-spacing:.15em; font-size:1.15rem; }
.spinner {
  width:46px; height:46px; border:5px solid var(--light); border-top-color:var(--sakura);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- duel arena ---- */
.duel-top { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:10px; }
.scoreline {
  width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  background:var(--panel); border-radius:16px; padding:10px 14px; box-shadow:0 4px 14px var(--shadow);
}
.scoreline .who { display:flex; align-items:center; gap:8px; }
.scoreline .who.you { justify-content:flex-start; }
.scoreline .who.opp { justify-content:flex-end; }
.scoreline .nm { font-weight:800; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scoreline .who.you .nm { color:var(--turf); }
.scoreline .who.opp .nm { color:var(--sakura); }
.scoreline .sc {
  font-weight:800; font-size:1.4rem; min-width:30px; text-align:center;
  background:var(--bg); border-radius:10px; padding:2px 8px;
}
.scoreline .meta { display:flex; flex-direction:column; align-items:center; }
.round-no { font-weight:800; font-size:.9rem; color:var(--slate); }
.clock { font-weight:800; font-size:1.5rem; line-height:1.1; }
.clock.low { color:var(--sakura); animation:tickpop .5s ease; }
@keyframes tickpop { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }
.winby { font-size:.72rem; color:var(--soft); }
.ranked-tag {
  font-weight:800; font-size:.7rem; letter-spacing:.15em; color:#fff; background:var(--gold);
  border-radius:999px; padding:2px 10px;
}
.banner {
  width:100%; text-align:center; background:#FCE9C7; color:#8A5A12; font-weight:700;
  border-radius:10px; padding:8px; margin-bottom:8px;
}

.arena { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.side { display:flex; flex-direction:column; align-items:center; gap:6px; }
.side-head { font-weight:800; font-size:.85rem; color:var(--soft); }
.side.you .side-head { color:var(--turf); }
.side.opp .side-head { color:var(--sakura); }
.opp-progress { color:var(--soft); font-weight:700; }

.board { display:flex; flex-direction:column; gap:5px; width:100%; max-width:360px; }
.drow { display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:5px; }
.dtile {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-weight:800; text-transform:uppercase; color:var(--ink);
  background:var(--panel); border:2px solid var(--light); border-radius:8px;
  font-size:clamp(.9rem,4.4vw,1.5rem); user-select:none;
}
.board.masked .dtile { font-size:0; } /* opponent: colors only, no letters */
.board.masked .dtile.revealed { font-size:clamp(.8rem,3.6vw,1.2rem); color:#fff; } /* shown at reveal */
.dtile.filled { border-color:var(--dark); }
.dtile.correct { background:var(--correct); border-color:var(--correct); color:#fff; }
.dtile.present { background:var(--present); border-color:var(--present); color:#fff; }
.dtile.absent  { background:var(--absent);  border-color:var(--absent);  color:#fff; }
.dtile.pop { animation:pop .15s ease; }
@keyframes pop { 0% { transform:scale(.9); } 50% { transform:scale(1.08); } 100% { transform:scale(1); } }
.dtile.flip { animation:flip var(--fdur,.5s) ease forwards; }
@keyframes flip { 0% { transform:rotateX(0); } 50% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }
.dtile.bounce { animation:bounce .5s ease; }
@keyframes bounce { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-14px); } 50% { transform:translateY(0); } 70% { transform:translateY(-6px); } }
.drow.shake { animation:shake .4s; }
@keyframes shake { 10%,90% { transform:translateX(-2px); } 20%,80% { transform:translateX(4px); } 30%,50%,70% { transform:translateX(-7px); } 40%,60% { transform:translateX(7px); } }
.drow.invalid .dtile { border-color:var(--sakura); }

/* ---- keyboard ---- */
#keyboard { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.krow { display:flex; justify-content:center; gap:5px; }
.key {
  font:inherit; font-weight:800; cursor:pointer; color:var(--ink);
  background:var(--panel); border:none; border-radius:8px; box-shadow:0 2px 0 var(--dark);
  height:48px; min-width:30px; flex:1; max-width:42px; font-size:.95rem; text-transform:uppercase;
}
.key.wide { max-width:64px; font-size:.72rem; }
.key:active { transform:translateY(2px); box-shadow:none; }
.key.correct { background:var(--correct); color:#fff; box-shadow:0 2px 0 var(--sakura-dark); }
.key.present { background:var(--present); color:#fff; box-shadow:0 2px 0 #C98412; }
.key.absent  { background:var(--absent);  color:#fff; box-shadow:0 2px 0 #8E84A0; }

/* ---- overlays ---- */
.overlay {
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(58,46,57,.5); backdrop-filter:blur(3px); padding:18px;
}
.overlay.show { animation:fade .2s ease; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.cd-num { font-size:clamp(4rem,22vw,9rem); font-weight:800; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.3); }
.cd-num.pulse { animation:cdpulse .55s ease; }
@keyframes cdpulse { 0% { transform:scale(.4); opacity:0; } 50% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); opacity:1; } }

.result-card {
  background:var(--panel); border-radius:22px; padding:24px 22px; max-width:380px; width:100%;
  text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.3); position:relative; overflow:hidden;
  border-top:7px solid var(--slate);
}
.result-card.win { border-top-color:var(--turf); }
.result-card.lose { border-top-color:var(--sakura); }
.result-card.draw { border-top-color:var(--gold); }
.result-badge { font-weight:800; font-size:1.4rem; margin-bottom:6px; }
.result-card.win .result-badge { color:var(--turf); }
.result-card.lose .result-badge { color:var(--sakura); }
.result-sub { color:var(--soft); font-weight:700; }
.result-sub.small { font-size:.82rem; margin-top:8px; }
.reveal-row { display:flex; align-items:center; gap:14px; margin:14px 0; text-align:left; }
.reveal-portrait { width:84px; height:84px; object-fit:cover; border-radius:14px; border:3px solid var(--gold); flex-shrink:0; }
.reveal-word { font-weight:800; font-size:1.5rem; letter-spacing:.06em; color:var(--sakura); }
.reveal-name { font-weight:800; color:var(--ink); }
.reveal-quote { font-size:.78rem; color:var(--soft); font-style:italic; margin-top:4px; }
.elo { margin-top:12px; font-weight:700; }
.elo b { color:var(--gold); font-size:1.15rem; }
.elo .up { color:var(--turf); } .elo .down { color:var(--sakura); }
.elo.casual { color:var(--soft); font-size:.82rem; }
.elo.penalty { margin-top:6px; color:var(--sakura); font-size:.85rem; font-weight:800; }
.result-btns { display:flex; gap:10px; margin-top:18px; }

/* ---- auth + leaderboard cards ---- */
.auth-card, .lb-card {
  background:var(--panel); border-radius:22px; padding:22px; max-width:380px; width:100%;
  position:relative; box-shadow:0 16px 50px rgba(0,0,0,.3);
}
.card-x {
  position:absolute; top:12px; right:14px; border:none; background:none; font-size:1.6rem; cursor:pointer; color:var(--soft); line-height:1;
}
.auth-tabs { display:flex; gap:6px; margin-bottom:16px; }
.auth-tab {
  font:inherit; font-weight:800; flex:1; cursor:pointer; color:var(--soft);
  background:var(--bg); border:2px solid var(--light); border-radius:12px; padding:9px;
}
.auth-tab.on { background:var(--turf); color:#fff; border-color:var(--turf); }
.auth-body { display:flex; flex-direction:column; gap:12px; }
.auth-body label { display:flex; flex-direction:column; gap:5px; font-weight:700; color:var(--soft); font-size:.85rem; }
.auth-body input {
  font:inherit; font-weight:700; padding:10px 12px; border:2px solid var(--light); border-radius:10px; color:var(--ink);
}
.auth-body input:focus { outline:none; border-color:var(--sakura); }
.auth-err { color:var(--sakura); font-weight:700; font-size:.82rem; min-height:1em; text-align:center; }

.lb-card h2 { text-align:center; margin-bottom:14px; }
.lb-list { display:flex; flex-direction:column; gap:5px; max-height:60vh; overflow-y:auto; }
.lb-row {
  display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:10px;
  background:var(--bg); border-radius:10px; padding:9px 12px; font-weight:700;
}
.lb-row.me { background:#FCE9F0; border:2px solid var(--sakura); }
.lb-rank { font-weight:800; text-align:center; }
.lb-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-rating { color:var(--gold); font-weight:800; }
.lb-wl { color:var(--soft); font-size:.78rem; }
.lb-empty { text-align:center; color:var(--soft); padding:20px; font-weight:700; }

/* ---- toast ---- */
#toast-wrap { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:6px; align-items:center; }
.toast { background:var(--ink); color:#fff; font-weight:700; padding:9px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.25); animation:toastin .2s ease; }
@keyframes toastin { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ---- confetti + petals ---- */
#confetti { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.cfetti { position:absolute; }
#petals { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.petal { position:absolute; top:-30px; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; }
.petal i { display:block; border-radius:60% 0 60% 0; animation-name:sway; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
@keyframes fall { to { transform:translateY(110vh); } }
@keyframes sway { from { transform:translateX(-8px) rotate(-12deg); } to { transform:translateX(8px) rotate(12deg); } }

/* ---- responsive ---- */
@media (max-width:560px) {
  .menu-grid { grid-template-columns:1fr; }
  .arena { gap:10px; }
  .side-head { font-size:.76rem; }
  .scoreline .nm { max-width:84px; font-size:.9rem; }
  .key { height:46px; }
}
@media (prefers-reduced-motion: reduce) {
  .dtile.flip, .dtile.bounce, .dtile.pop, .cd-num.pulse, .petal, .petal i { animation:none !important; }
}