*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#14111f;font-family:system-ui,-apple-system,sans-serif;color:#f4f1ff}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.phone{--st:env(safe-area-inset-top,0px);--sb:max(14px,env(safe-area-inset-bottom,0px));width:100%;max-width:440px;height:100vh;height:100dvh;margin:0 auto;background:#14111f;overflow:hidden;position:relative;display:grid;padding:0 12px}
.phone.game{grid-template-rows:var(--st) 44px 56px 52px minmax(200px,1fr) 40px 232px var(--sb)}
.phone.page{grid-template-rows:var(--st) 44px minmax(0,1fr) var(--sb)}
.phone>*{min-height:0;min-width:0;overflow:hidden}
.safe{}
/* top bar */
.top{display:grid;grid-template-columns:92px 1fr 92px;align-items:center;gap:8px}
.nav{height:34px;border-radius:10px;background:#2a2540;font-weight:800;font-size:14px}
.mid{text-align:center;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.right{text-align:right;font-size:13px;font-weight:700;opacity:.85;white-space:nowrap}
/* pinned word */
.word{border-radius:12px;background:#231d3a;border:2px solid #5b4bff;margin:3px 0;display:grid;align-content:center;justify-items:center;gap:1px;padding:0 8px;text-align:center}
.word .w1{font-weight:800;font-size:15px;white-space:nowrap}.word .w1 b{color:#ffcf3f;font-size:19px;letter-spacing:.04em}
.word .w2{font-size:12.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.word.imp{border-color:#ff3c7a}.word.imp b{color:#ff3c7a}
/* timer strip: what is counting, why, what happens at zero */
.timer{display:grid;grid-template-rows:20px 16px 6px;align-content:center;gap:2px}
.t1{display:flex;justify-content:space-between;font-weight:800;font-size:15px;white-space:nowrap}.t1 b{color:#ffcf3f;font-variant-numeric:tabular-nums}
.t2{font-size:12.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{background:#3a3160;border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;width:var(--w,60%);background:#ffcf3f;border-radius:3px}.bar.hot i{background:#ff3c7a}
/* seats: up to 6, 2 cols x 3 rows, each seat has 2 fixed tile slots */
.seats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;padding:6px 0;position:relative}
.seat{background:#1c1730;border:2px solid transparent;border-radius:14px;padding:6px 8px;display:grid;grid-template-rows:20px 1fr 1fr;gap:4px;min-width:0;overflow:hidden}
.seat.turn{border-color:#ffcf3f}.seat.me{background:#201a38}.seat.sel{border-color:#ff3c7a}.seat.imp{border-color:#ff3c7a;background:#3a1730}
.nm{display:flex;justify-content:space-between;gap:6px;font-weight:800;font-size:14px;white-space:nowrap;min-width:0}.nm>span:first-child{overflow:hidden;text-overflow:ellipsis}
.badge{font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 7px;background:#3a3160;visibility:hidden;white-space:nowrap}.badge.on{visibility:visible}
.badge.y{background:#ffcf3f;color:#14111f}.badge.p{background:#ff3c7a}.badge.g{background:#3cff9a;color:#14111f}
.ts{border-radius:9px;background:#3a3160;font-weight:800;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 8px;white-space:nowrap;overflow:hidden;min-height:0}
.ts span{overflow:hidden;text-overflow:ellipsis}.ts.empty{background:transparent;border:1px dashed #3a3160;color:#8b84a8;font-weight:600;font-size:13px}.ts.fresh{background:#ffcf3f;color:#14111f}
.ts em{font-style:normal;font-size:11px;font-weight:800;padding:1px 6px;border-radius:999px;flex:none}.ts em.ok{background:#1e3b2e;color:#3cff9a}.ts em.no{background:#3a1730;color:#ff8fa8}
/* overlay sheet inside the seats zone only (briefing, leave confirm, end) */
.sheet{position:absolute;inset:6px 0;border-radius:16px;background:#231d3a;border:2px solid #5b4bff;display:none;flex-direction:column;justify-content:center;gap:12px;padding:18px;text-align:center;font-size:17px;line-height:1.35}
.sheet.on{display:flex}.sheet.imp{border-color:#ff3c7a}.sheet .big{font-size:23px;font-weight:900}.sheet b{color:#ffcf3f}.sheet.imp b{color:#ff3c7a}
/* status */
.status{display:flex;align-items:center;justify-content:center;border-radius:12px;background:#1c1730;font-weight:800;font-size:14.5px;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.status.go{background:#ff3c7a}.status.good{background:#1e3b2e;color:#3cff9a}
/* action zone (232): label 20 + 4x4 grid / vote / steal / reveal, fixed rows */
.act{display:grid;grid-template-rows:20px minmax(0,1fr);gap:6px;padding:4px 0 10px}
.al{font-size:13px;font-weight:700;opacity:.85;display:flex;justify-content:space-between;white-space:nowrap;gap:8px}.al span{overflow:hidden;text-overflow:ellipsis}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;min-height:0}
.tile{border-radius:12px;background:#f4f1ff;color:#14111f;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px 4px;line-height:1.1;overflow:hidden}
.tile.gone{background:transparent;border:1px dashed #3a3160;color:#6d6690;font-size:11px;font-weight:600}.board.wait .tile:not(.gone){opacity:.45}
.tile.none{visibility:hidden}
.grid2{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px;min-height:0}
.vb{border-radius:14px;background:#2a2540;font-weight:800;font-size:16px;padding:0 8px}.vb.sel{background:#ff3c7a}.vb.word4{background:#f4f1ff;color:#14111f;font-size:19px}
.box{border-radius:16px;font-size:14.5px;background:#1c1730;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:8px 12px;font-weight:700;line-height:1.3;min-height:0}
.box b{color:#ffcf3f}.box.go{background:#5b4bff;font-size:17px;font-weight:900}.box.good{background:#1e3b2e;border:2px solid #3cff9a}
.btn{border-radius:16px;background:#ff3c7a;font-weight:900;font-size:18px}.btn.alt{background:#2a2540}
/* plain pages */
.pg{display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:8px 0}
.logo{font-size:64px;font-weight:900;letter-spacing:.12em;color:#ffcf3f;text-shadow:4px 4px 0 #ff3c7a}
.pg .btn{min-height:56px;width:100%}.pg .muted{opacity:.7;font-size:13.5px}.pg input{font:inherit;font-size:20px;text-align:center;padding:12px;border-radius:12px;border:0;text-transform:uppercase}
.steps{display:grid;gap:8px;text-align:left;list-style:none;padding:0}.steps li{background:#231d3a;border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.3}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.slots div{background:#231d3a;border-radius:12px;padding:12px;font-weight:800;font-size:15px}.slots .e{background:transparent;border:1px dashed #3a3160;opacity:.6;font-weight:600}
/* leave confirm: covers the whole phone, layout under it does not move */
.modal{position:absolute;inset:0;background:rgba(10,8,18,.8);display:none;align-items:flex-end;padding:0 12px 46px}.modal.on{display:flex}
.modal .card{background:#231d3a;border-radius:20px;padding:18px;display:grid;gap:10px;text-align:center;width:100%;font-size:16px;line-height:1.35}.modal .card .btn{min-height:54px}

/* v6 build additions */
button:disabled{cursor:default}
a{color:#ffcf3f}
.top>span{display:block}
.tile{border:0}.tile:disabled{cursor:default}
.board.wait .tile:not(.gone){opacity:.45}
.seat.me .nm>span:first-child{color:#ffcf3f}
.ts.flip em{animation:fadein .4s ease-out both}
.badge.late{animation:fadein .4s ease-out both}@keyframes fadein{from{opacity:0}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seg button{min-height:44px;border-radius:12px;background:#2a2540;font-weight:800;font-size:15px}.seg button.on{background:#ffcf3f;color:#14111f}
.links{font-size:13px;opacity:.8;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.flash{position:absolute;left:12px;right:12px;bottom:calc(var(--sb) + 240px);background:#3a1730;color:#ffd0dc;border-radius:12px;padding:8px;text-align:center;font-weight:800;font-size:14px}
.box .sm{font-size:14px;font-weight:700;opacity:.85}
.endlist{display:grid;gap:6px;overflow:hidden}.endlist div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:700px){.phone.game{grid-template-rows:var(--st) 44px 48px 44px minmax(200px,1fr) 40px 200px var(--sb)}.seat{grid-template-rows:20px 1fr;grid-template-columns:1fr 1fr}.seat .nm{grid-column:1/3}.logo{font-size:48px}.steps li{padding:7px 10px;font-size:14px}}

/* v6.1 */
.word .w2{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px}
.word.imp .w1{font-size:14px}
.status{white-space:normal;line-height:1.15;font-size:13.5px;text-align:center;padding:2px 8px}
.act{padding-bottom:12px}
.board.six{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.board.six .tile{font-size:16px}
.tile.new{animation:slidein .35s ease-out}@keyframes slidein{from{transform:translateY(12px);opacity:0}}
.box{line-height:1.25}.box>div{max-width:100%;overflow-wrap:anywhere}
.endsheet{justify-content:flex-start;gap:7px;text-align:left;font-size:14px;line-height:1.25;padding:12px 14px}
.endsheet .aw{display:flex;gap:6px;background:#2e2752;border-radius:10px;padding:6px 8px}.endsheet .al2{color:#ffcf3f;display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.endsheet .endlist{grid-template-columns:1fr 1fr;gap:3px 10px}
.endsheet .tell{padding:8px;border-radius:12px;background:#2e2752;text-align:center}.endsheet .tell .sm{font-size:12px;opacity:.75}
.modal{padding-bottom:calc(var(--sb) + 24px)}
/* v6.2: reveal tiles and names wrap or shrink instead of being cut off */
.ts{min-height:0;padding:0 6px;gap:4px}
.ts span{white-space:normal;line-height:1.05;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;overflow-wrap:anywhere}
.ts em{font-size:10px;padding:1px 5px}
.nm{font-size:13px;gap:4px}.badge{font-size:10.5px;padding:1px 5px;flex:none}
.endlist .sm{font-size:11px;opacity:.75}