.friend-entry{margin-left:auto;min-height:44px;padding:8px 12px;color:#dfff70;background:#223044;border:1px solid #566580;font-size:13px;white-space:nowrap}
#home .hero-heading .club-mark{order:0}#home .hero-heading h1{order:2}#home .hero-heading .friend-entry{order:1}
.friend-dialog{color:#fff8e8;background:#151e30;border:1px solid #4a5975;border-radius:18px;width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow-y:auto;overscroll-behavior:contain}
.friend-dialog::backdrop{background:#080e20db;backdrop-filter:blur(9px)}
.friend-dialog header{height:auto;min-height:44px;border:0;margin-bottom:16px;gap:12px}.friend-dialog header small{font-size:9px;letter-spacing:.1em;color:#a7bcda}.friend-dialog h2{margin:5px 0 0;font-size:25px;letter-spacing:-.03em}.friend-dialog h3{font-size:22px;margin:14px 0}
.friend-dialog button{min-height:44px;font-size:14px}.friend-dialog header button{width:44px;flex:none;font-size:22px;padding:4px;background:none}
.friend-dialog label{display:block;font-size:12px;color:#c5d5ea;line-height:1.5}
.friend-dialog input{display:block;width:100%;min-height:46px;padding:10px 12px;margin:6px 0 12px;border:1px solid #546580;border-radius:9px;background:#202c41;color:#fff8e8;font:16px -apple-system,BlinkMacSystemFont,sans-serif}
.friend-dialog .primary{width:100%;color:#152315;background:#dfff70;border-color:#dfff70;font-weight:700}
#friendJoinForm{margin-top:22px;padding-top:16px;border-top:1px solid #3a4a63;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}#friendJoinForm button{margin-bottom:12px;padding:10px 16px}
.friend-invite>span{color:#a2b5d0;font-size:10px;letter-spacing:.13em}.friend-invite>strong{display:block;font-size:32px;font-variant-numeric:tabular-nums;letter-spacing:.12em;margin:6px 0 12px}.friend-invite>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.friend-invite input{font-size:12px;color:#a9bed9;background:none;margin-top:8px}
.friend-members{border-top:1px solid #3e5069;border-bottom:1px solid #3e5069;margin:14px 0}.friend-members>div{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:54px;padding:9px 0}.friend-members>div+div{border-top:1px solid #33435b}.friend-members b{font-size:14px;overflow-wrap:anywhere}.friend-members span{font-size:12px;color:#bdcda5;text-align:right;max-width:52%}
#friendRules{font-size:12px;line-height:1.5;color:#b4c6dd;margin:12px 0 16px}#friendMessage{font-size:13px;color:#deedb8;line-height:1.5;margin:12px 0 0}#friendMessage:empty{display:none}#friendScores p{display:flex;padding:10px 12px;border-radius:8px;background:#24344b;font-size:18px;margin:8px 0}
body[data-friend-room=true] .app .mobile-timing[data-kind=friend] .timing-track{display:none}body[data-friend-room=true] .app .mobile-timing span{max-width:48%}body[data-friend-room=true] .app .hud #score{font-variant-numeric:tabular-nums;font-size:clamp(18px,4.5vw,29px)}
@media(orientation:landscape) and (max-height:460px) and (max-width:1000px){
 #home .hero-heading h1{order:1;margin-left:auto}#home .hero-heading .friend-entry{order:2;margin-left:4px;font-size:12px}
 .friend-dialog{width:min(600px,calc(100% - 24px));padding:14px 18px;max-height:calc(100dvh - 16px)}.friend-dialog header{margin-bottom:10px}.friend-dialog h2{font-size:22px}
 #friendEntry{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:end}#friendEntry>label{grid-column:1;grid-row:1}#friendCreate{grid-column:1;grid-row:2;align-self:start}#friendJoinForm{grid-column:2;grid-row:1/3;margin:0;padding:0;border:0;display:block}#friendJoinForm button{width:100%}#friendSwitch{grid-column:1/-1;margin:0!important}
 #friendLobby{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:start}.friend-invite{grid-column:1;grid-row:1/5}.friend-invite>strong{font-size:28px}.friend-invite>div{grid-template-columns:1fr}.friend-members{grid-column:2;margin:0}.friend-members>div{min-height:48px}#friendRules{grid-column:2;margin:0;font-size:11px}#friendPick,#friendReady,#friendAgain,#friendLeave,#friendOutcome,#friendScores{grid-column:2}#friendLeave{margin:0!important}#friendOutcome{font-size:19px;margin:0}#friendScores p{font-size:15px;margin:0 0 5px;padding:7px 10px}
 body[data-friend-room=true] .app .hud{width:calc(100% - 146px)}body[data-friend-room=true] .app .hud .clock{display:none}
 body[data-friend-room=true] .app .hud #score{font-size:clamp(14px,2.2vw,22px)}
}
@media(max-width:370px){.friend-dialog{padding:14px}.friend-dialog h2{font-size:22px}.friend-invite>strong{font-size:27px}.friend-invite>div{grid-template-columns:1fr}.friend-members b{font-size:13px}}

.friend-settings-note{font-size:12px;line-height:1.5;color:#c5d8af;margin:0 0 12px}body[data-friend-room=true] .app .hud #mode{display:block!important;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.friend-dialog[data-state=result] .friend-invite,.friend-dialog[data-state=result] .friend-members,.friend-dialog[data-state=result] #friendRules{display:none}
.friend-dialog[data-state=result] #friendLobby{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.friend-dialog[data-state=result] #friendOutcome,.friend-dialog[data-state=result] #friendScores,.friend-dialog[data-state=result] #friendAgain{grid-column:1/-1;margin:0}
.friend-dialog[data-state=result] #friendScores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.friend-dialog[data-state=result] #friendScores p{margin:0;overflow-wrap:anywhere;font-size:16px}
.friend-dialog[data-state=result] #friendPick{grid-column:1;font-size:12px}
.friend-dialog[data-state=result] #friendLeave{grid-column:2;font-size:12px;margin:0!important}
@media(orientation:landscape) and (max-height:340px){.friend-dialog[data-state=result]{padding:10px 14px}.friend-dialog[data-state=result] header{margin-bottom:6px}.friend-dialog[data-state=result] #friendLobby{gap:6px}.friend-dialog[data-state=result] #friendOutcome{font-size:20px}.friend-dialog[data-state=result] #friendScores p{padding:6px 8px}}

.friend-dialog[data-state=result] #friendOutcome{grid-row:1}.friend-dialog[data-state=result] #friendScores{grid-row:2}.friend-dialog[data-state=result] #friendAgain{grid-row:3}.friend-dialog[data-state=result] #friendPick,.friend-dialog[data-state=result] #friendLeave{grid-row:4}