/* Setup */
#setup{position:fixed;inset:0;background:#f0ede8;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.sbox{background:#fff;border-radius:20px;padding:2.25rem;width:100%;max-width:360px;box-shadow:0 4px 40px rgba(0,0,0,.08)}
.s-title{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:2rem}
.s-sect{margin-bottom:1.5rem}
.s-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#bbb;margin-bottom:.55rem}
.cnt-row{display:flex;gap:.5rem}
.cnt{flex:1;height:48px;border-radius:9px;border:1.5px solid #e8e5e0;font-size:1.1rem;font-weight:700;color:#aaa;transition:all .13s}
.cnt.on{background:#111;border-color:#111;color:#fff}
.name-list{display:flex;flex-direction:column;gap:.45rem}
.nrow{display:flex;align-items:center;gap:.65rem}
.ndot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ninp{flex:1;padding:.55rem .85rem;border:1.5px solid #e8e5e0;border-radius:9px;font-size:.88rem;font-weight:500;color:#111;background:#fafaf8;transition:border-color .13s}
.ninp:focus{outline:none;border-color:#aaa;background:#fff}
.btn-start{width:100%;padding:.8rem;background:#111;color:#fff;font-size:.92rem;font-weight:700;border-radius:50px;letter-spacing:.02em;transition:opacity .13s;margin-top:.25rem}
.btn-start:hover{opacity:.78}

/* App Shell */
#app{display:none;flex-direction:column;height:100vh;max-width:500px;margin:0 auto;position:relative}

/* Header */
.hdr{flex-shrink:0;background:#fff;border-bottom:1px solid #e8e5e0;padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.hdr-logo{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.hdr-right{display:flex;align-items:center;gap:1.2rem}
.hdr-info{display:flex;flex-direction:column;align-items:flex-end;gap:.06rem}
.hdr-btn{font-size:1.3rem;color:#bbb;transition:color .13s}
.hdr-btn:hover{color:#111}
.hdr-player{font-size:.88rem;font-weight:700;transition:color .3s}
.hdr-round{font-size:.68rem;color:#bbb;font-weight:500}

/* Score Strip */
.score-strip{display:flex;padding:1rem 1.25rem;gap:1rem;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.score-strip::-webkit-scrollbar{display:none}
.p-score{flex:1;background:#fff;padding:.6rem .8rem;border-radius:12px;display:flex;align-items:center;justify-content:space-between;border:2px solid transparent;transition:border-color .2s, opacity .2s;opacity:.5}
.p-score.active{opacity:1}
.p-dot{width:8px;height:8px;border-radius:50%;margin-right:.5rem}
.p-name{font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.p-val{font-size:.9rem;font-weight:800;margin-left:.5rem}

/* Notifications */
#notif{position:fixed;top:0;left:0;right:0;z-index:500;background:#111;color:#fff;padding:.85rem 1.5rem;font-size:.88rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.55rem;transform:translateY(-100%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
#notif.on{transform:translateY(0)}

/* Game Over */
#over{
  position:fixed;inset:0;background:#f0ede8;z-index:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s ease
}
#over.on{opacity:1;visibility:visible;pointer-events:all}
.over-title{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.over-card{width:100%;max-width:360px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.07)}
.over-row{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.2rem;border-bottom:1px solid #f0ede8}
.over-row.win{background:#fffbeb}
.over-med{font-size:1.2rem;min-width:1.5rem}
.over-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.over-name{flex:1;font-weight:600;font-size:.95rem}
.over-score{font-weight:800;font-size:1rem}

.btn-again{background:#111;color:#fff;border-radius:50px;padding:.75rem 2.25rem;font-size:.9rem;font-weight:700;transition:transform .13s}
.btn-again:active{transform:scale(.97)}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}