.bottom-navigation button{flex-basis:16.666%!important;width:16.666%!important}
#friendDialog{box-sizing:border-box;width:min(920px,96vw);max-height:94dvh;padding:0;border:1px solid #e2dccf;border-radius:24px;background:#fffdf8;color:#342b24;box-shadow:0 24px 90px #20332933;font-family:inherit;overflow:auto}
#friendDialog::backdrop{background:#25332d99;backdrop-filter:blur(5px)}
#friendDialog *{box-sizing:border-box}
#friendDialog [hidden]{display:none!important}
#friendDialog button,#friendDialog input,#friendDialog textarea,#friendDialog select{font:inherit}
#friendDialog button{cursor:pointer;border:1px solid #dbdfd5;background:#fff;border-radius:12px;padding:10px 14px;color:#344f41;min-height:44px;font-weight:650}
#friendDialog button:hover{background:#edf4ec}
#friendDialog button:disabled{cursor:default;opacity:.55}
#friendDialog :focus-visible{outline:3px solid #d69419;outline-offset:3px}
#friendDialog input,#friendDialog textarea,#friendDialog select{border:1px solid #cdcfc4;border-radius:12px;background:white;padding:11px;max-width:100%;color:#342b24}
#friendDialog h2,#friendDialog h3,#friendDialog h4,#friendDialog p{margin:0}
#friendDialog p{line-height:1.5}
#friendDialog .fc-header{display:flex;align-items:center;justify-content:space-between;padding:23px 28px;background:#eaf1e6;position:sticky;top:0;z-index:3;border-bottom:1px solid #dce5d7}
#friendDialog .fc-header small{font-size:10px;letter-spacing:.13em;color:#586d53}
#friendDialog h2{font-size:25px;margin-top:5px}
#friendDialog .fc-close{border:0;background:transparent;font-size:21px}
#friendDialog .fc-status{padding:8px 28px;min-height:35px;color:#64543a;font-size:13px;background:#fbf2da}
#friendDialog .fc-home,#friendDialog #friendRoom{padding:24px 28px}
#friendDialog .fc-welcome{position:relative;padding:8px 100px 26px 0;max-width:680px}
#friendDialog .fc-welcome h3{font-size:22px;margin-bottom:8px}
#friendDialog .fc-welcome p{color:#756b5f;font-size:15px}
#friendDialog .fc-hero{position:absolute;right:0;top:0;font-size:65px}
#friendDialog .fc-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 25px}
#friendDialog .fc-group{background:#f0f5ea;text-align:left;padding:19px}
#friendDialog .fc-setup{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
#friendDialog .fc-setup section{display:flex;flex-direction:column;gap:12px;border:1px solid #e5e3d8;padding:18px;border-radius:18px}
#friendDialog .fc-setup h3{font-size:17px}
#friendDialog .fc-primary{background:#3f6b50;color:white;border-color:#3f6b50}
#friendDialog .fc-primary:hover{background:#30563e}
#friendDialog .fc-note{color:#786e62;font-size:12px;line-height:1.6}
#friendDialog .fc-roomhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
#friendDialog .fc-roomhead h3{font-size:20px}
#friendDialog .fc-details{margin:15px 0;border:1px solid #e2e5da;border-radius:13px;padding:12px;background:#f6f7ef}
#friendDialog summary{cursor:pointer;font-weight:650}
#friendDialog .fc-member{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid #e2e5da}
#friendDialog .fc-member span{flex:1;min-width:130px}
#friendDialog .fc-member button{font-size:11px;padding:6px}
#friendDialog .fc-admin{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#friendDialog #friendInvitation{display:grid;gap:8px;margin:10px 0}
#friendDialog .fc-danger{color:#993c32}
#friendDialog .fc-messages{min-height:140px;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px;background:#f6f3eb;border-radius:17px;overscroll-behavior:contain}
#friendDialog .fc-message{align-self:flex-start;max-width:88%;background:#fff;padding:12px 15px;border-radius:4px 16px 16px;box-shadow:0 1px 3px #0000000c;overflow-wrap:anywhere}
#friendDialog .fc-message.fc-own{align-self:flex-end;background:#e5efdf;border-radius:16px 4px 16px 16px}
#friendDialog .fc-messagehead{display:flex;gap:18px;justify-content:space-between;font-size:11px;color:#68715f;margin-bottom:7px}
#friendDialog .fc-message p{white-space:pre-wrap;font-size:14px}
#friendDialog .fc-report{border:0;background:transparent;padding:3px 0;min-height:26px;font-size:10px;color:#877c70;font-weight:400}
#friendDialog .fc-empty{color:#8b8070;margin:auto;font-size:14px;text-align:center}
#friendDialog .fc-composer{display:flex;gap:8px;margin:12px 0 5px;align-items:stretch}
#friendDialog .fc-composer textarea,#friendDialog .fc-composer select{flex:1;min-width:0;resize:vertical}
#friendDialog .fc-play{margin-top:26px;border-top:1px solid #e8e1d3;padding-top:22px}
#friendDialog .fc-playhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:15px}
#friendDialog .fc-playhead small{font-size:11px;color:#857763}
#friendDialog .fc-gamecards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
#friendDialog .fc-gamecards button{background:#fbefd5;border-color:#efddb5;font-size:13px;padding:15px 7px}
#friendDialog #friendGame:not(:empty){padding:20px;margin-top:15px;border:1px solid #d3e2df;border-radius:17px;background:#f2f9f7;display:flex;flex-direction:column;gap:13px}
#friendDialog h4{font-size:19px}
#friendDialog .fc-players{display:flex;gap:7px;flex-wrap:wrap}
#friendDialog .fc-player{border-radius:20px;padding:6px 10px;background:#dfece3;font-size:12px}
#friendDialog .fc-questionhead{display:flex;justify-content:space-between;font-size:12px;color:#6d7d70}
#friendDialog .fc-question{font-weight:650;font-size:18px}
#friendDialog .fc-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#friendDialog .fc-duckpond{display:flex;align-items:center;justify-content:space-around;gap:9px;min-height:170px;padding:20px 8px;background:repeating-radial-gradient(ellipse at 50% 110%,#d1ecec 0 20px,#e3f4f0 24px 40px);border-radius:50% 40% 38% 45%}
#friendDialog .fc-duck{animation:fc-swim 3s ease-in-out infinite alternate;max-width:32%;font-size:14px;background:#fff6d5;border-color:#e6c878}
#friendDialog .fc-duck:nth-child(2){animation-delay:-1s}#friendDialog .fc-duck:nth-child(3){animation-delay:-2s}
#friendDialog .fc-balloonfield{display:flex;justify-content:space-around;align-items:center;border-radius:18px;background:linear-gradient(#def2fb 72%,#c9e6bb 72%);height:120px;font-size:46px;overflow:hidden}
#friendDialog .fc-dodge{background:#d5edfb}
#friendDialog .fc-gameevent{font-size:13px;color:#37657b}
#friendDialog .fc-solution{background:#e0edd8;padding:14px;border-radius:12px}
#friendDialog .fc-solution p{font-size:13px;margin-top:5px}
#friendDialog .fc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes fc-swim{from{transform:translateY(-9px) rotate(-3deg)}to{transform:translateY(9px) rotate(3deg)}}
/* 5.244: visible, server-confirmed dodge state, independent of network polling. */
#friendDialog .fc-balloonarena{position:relative}
#friendDialog .fc-balloonfield{height:auto;min-height:175px;display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:12px;padding:20px 16px;background:linear-gradient(#def2fb 78%,#c9e6bb 78%);font-size:inherit;overflow:hidden}
#friendDialog .fc-dodge-player{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center}
#friendDialog .fc-avatar-name{font-size:12px;overflow-wrap:anywhere}
#friendDialog .fc-avatar-wrap{position:relative;transition:transform .18s ease-out;min-height:60px;padding:3px 10px;border-radius:50%;border:2px solid transparent}
#friendDialog .fc-balloonavatar{font-size:43px;display:block;line-height:1.2}
#friendDialog .fc-protected .fc-avatar-wrap{transform:translateX(17px) rotate(9deg);animation:fc-dodge-step .22s ease-out both;background:#ffffffbd;border-color:#2a87b4;box-shadow:0 0 0 5px #6ac3e62e}
@keyframes fc-dodge-step{from{transform:translateX(0) rotate(0)}to{transform:translateX(17px) rotate(9deg)}}
#friendDialog .fc-shield{position:absolute;bottom:-3px;left:-13px;font-size:26px;line-height:1}
#friendDialog .fc-dodge-state{font-size:12px;min-height:18px;font-weight:650;color:#365362}
#friendDialog .fc-shield-track{width:74px;height:5px;border-radius:4px;overflow:hidden;background:#91afaa4d}
#friendDialog .fc-shield-fill{display:block;width:100%;height:100%;transform-origin:left;background:#277da7;transform:scaleX(0)}
#friendDialog #friendDodgeStatus{font-size:13px;min-height:40px;color:#315970}
#friendDialog #friendDodge:disabled{opacity:1;color:#466778;background:#e1edf3;border-color:#c8dae4}
@media(prefers-reduced-motion:reduce){#friendDialog .fc-avatar-wrap{transition:none}#friendDialog .fc-protected .fc-avatar-wrap{transform:none;animation:none}}
/* 5.245: source/target positions are measured from the displayed avatars. */
#friendDialog .fc-flight-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
#friendDialog .fc-projectile{position:absolute;width:25px;height:31px;border-radius:48% 48% 45% 45%;background:radial-gradient(ellipse at 30% 25%,#d6fbff 0 10%,#42c4f2 28%,#187abd 80%);box-shadow:1px 3px 4px #145d7933;transform:translate(-50%,-50%)}
#friendDialog .fc-projectile:after{content:'';position:absolute;bottom:-4px;left:9px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid #187abd}
#friendDialog .fc-impact{position:absolute;inset:0;pointer-events:none;z-index:6;display:flex;align-items:center;justify-content:center;animation:fc-splash-in .2s ease-out}
#friendDialog .fc-splash{font-size:58px;line-height:1;text-shadow:0 2px 5px #fff}
#friendDialog .fc-impact b{position:absolute;top:-12px;white-space:nowrap;font-size:13px;color:#075e88;background:#fff;border:2px solid #67c5e4;border-radius:12px;padding:3px 7px;transform:rotate(-8deg);box-shadow:0 2px 5px #185d7022}
#friendDialog .fc-miss{transform:translate(27px,28px)}
#friendDialog .fc-miss .fc-splash{font-size:27px}
#friendDialog .fc-miss b{font-size:10px;top:33px}
#friendDialog .fc-finale{font-weight:650;color:#136886;background:#dbf2fa;padding:12px;border-radius:12px}
@keyframes fc-splash-in{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){#friendDialog .fc-duck,#friendDialog .fc-impact{animation:none}}
@media(max-width:600px){#friendDialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}#friendDialog .fc-header{padding:17px}#friendDialog .fc-status{padding:8px 17px}#friendDialog .fc-home,#friendDialog #friendRoom{padding:17px}#friendDialog .fc-setup{grid-template-columns:1fr}#friendDialog .fc-welcome{padding-right:68px}#friendDialog .fc-hero{font-size:48px}#friendDialog .fc-composer{flex-wrap:wrap}#friendDialog .fc-composer textarea,#friendDialog .fc-composer select{flex-basis:calc(100% - 90px)}#friendDialog .fc-gamecards{grid-template-columns:1fr}#friendDialog .fc-playhead{align-items:flex-start;flex-direction:column}#friendDialog .fc-message{max-width:95%}#friendDialog .fc-answers{grid-template-columns:1fr}#friendDialog .fc-duck{padding:10px 5px;font-size:12px}#friendDialog .fc-groups{grid-template-columns:1fr}}
#friendDialog #friendSolo{padding:20px;display:flex;flex-direction:column;gap:10px}
#friendDialog #friendSolo[hidden]{display:none}
#friendDialog .fc-solo-score{position:sticky;top:108px;z-index:7;display:flex;justify-content:space-between;background:#e1f1f5;border-radius:12px;padding:10px}
#friendDialog #soloClock{font-size:24px;color:#176384}
#friendDialog .fc-solo-arena{height:140px;position:relative;border-radius:18px;background:linear-gradient(#def2fb 78%,#c9e6bb 78%);overflow:hidden}
#friendDialog .fc-solo-avatar{position:absolute;left:8%;top:55%;font-size:45px}
#friendDialog .fc-solo-target{position:absolute;right:8%;top:40%;font-size:52px;transform:translateY(-50%)}
#friendDialog #soloFeedback{min-height:40px;font-weight:650;color:#176384}
#friendDialog #friendSoloStart,#friendDialog .fc-solo-room{margin:12px 0}
#friendDialog #friendSolo .fc-answers{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){#friendDialog .fc-solo-score{top:94px}}

#friendDialog .fc-solo-audio{display:flex;flex-wrap:wrap;gap:8px}
#friendDialog .fc-solo-splash{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;pointer-events:none;animation:fc-splash-in .15s ease-out}
@media(prefers-reduced-motion:reduce){#friendDialog .fc-solo-splash{animation:none}}

/* Games have their own navigation entry; chat and games never share a visible room. */
#friendDialog[data-view="friends"] .fc-play{display:none}
#friendDialog[data-view="games"] #friendRoom > :not(.fc-roomhead):not(.fc-play){display:none}
#friendDialog[data-view="games"] #friendMute{display:none}
#friendDialog [hidden]{display:none!important}
#gamesHome .fc-gamecards{grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0}
#gamesHome .fc-gamecards button{min-height:110px;font-size:1.1rem;white-space:normal}
.bottom-navigation button{flex:1 1 0!important;width:auto!important;white-space:normal;overflow-wrap:anywhere}
@media(max-width:430px){.bottom-navigation{padding-left:3px;padding-right:3px}.bottom-navigation button{font-size:.58rem;min-height:52px}}
#friendDialog #gamesHome .fc-gamecards button{margin:0;background:#e0f1f6;color:#18536b;border:1px solid #abd2df;min-height:120px}
#friendDialog #gamesHome #soloDucksStart{background:#e9f1d9;color:#385724;border-color:#c3d5a5}
#friendDialog #gamesHome .fc-gamecards button:focus-visible{outline:3px solid #916c33;outline-offset:3px}

#friendDialog .fc-wordpond{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px 12px;height:auto;min-height:180px;border-radius:24px}
#friendDialog .fc-wordpond .fc-duck{position:relative;max-width:100%;min-height:52px;white-space:normal;overflow-wrap:anywhere;font-size:14px;animation:none}
#gamesSubject{max-width:320px;margin-top:8px}
