#friend-loading[hidden], #friend-bar[hidden], #friend-return[hidden], #friend-resume-card[hidden], #menu-online [hidden] { display:none !important; }
#friend-loading { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--friend-surface,#0c1529); color:var(--friend-text,#edf6ff); font:16px/1.5 system-ui,sans-serif; }
#friend-bar { position:fixed; z-index:24; top:145px; left:50%; transform:translateX(-50%); width:min(650px,calc(100vw - 32px)); box-sizing:border-box; padding:12px 16px; border:1px solid #5ba0b4; border-radius:14px; background:rgba(5,19,30,.95); color:#edf7fb; box-shadow:0 6px 24px #0006; font:14px/1.45 system-ui,sans-serif; }
#friend-bar header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#friend-bar strong { font-size:12px; letter-spacing:.06em; }
#friend-title { flex:1; min-width:0; overflow-wrap:anywhere; }
#friend-bar #friend-bar-close { flex:0 0 44px; min-width:44px; min-height:44px; padding:6px; font-size:22px; line-height:1; }
#friend-state { margin:6px 0 0; }
#friend-bar[data-your-turn="true"] { border-color:#a5eaff; box-shadow:0 0 15px #5cc6eb44; }
#friend-bar button, #friend-return button, #friend-resume-card button, #friend-entry button { cursor:pointer; border:1px solid #6094ab; border-radius:8px; background:#102d40; color:#f1f8fc; padding:9px 13px; font:inherit; }
#friend-return { position:fixed; z-index:25; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); display:flex; align-items:stretch; max-width:calc(100vw - 24px); filter:drop-shadow(0 4px 10px #0008); }
#friend-return-resume { min-width:0; max-width:min(420px,calc(100vw - 72px)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:8px 0 0 8px !important; }
#friend-return-close { flex:0 0 42px; padding:7px 10px !important; border-left:0 !important; border-radius:0 8px 8px 0 !important; font-size:20px !important; line-height:1 !important; }
#friend-resume-card { margin:12px 0; padding:12px; border:1px solid #5d93a8; border-radius:10px; background:#0a2031; text-align:left; }
#friend-resume-card p { margin:0 0 8px; font-size:14px; line-height:1.4; }
#menu-online { max-height:calc(var(--game-viewport-height, 100dvh) - 120px); overflow:auto; min-width:280px; max-width:calc(100vw - 40px); }
#menu-online label { display:grid; gap:5px; margin:10px 0; }
#menu-online input, #friend-entry input { box-sizing:border-box; width:100%; min-width:0; padding:9px; border:1px solid #56718b; border-radius:7px; color:#f2f6ff; background:#0a1424; font:inherit; }
#menu-online input:disabled { opacity:.65; }
#menu-online p, #menu-online small { line-height:1.45; }
#friend-saved-list { display:grid; gap:8px; }
#friend-saved-list button { white-space:normal; text-align:left; }
#friend-entry { width:min(420px,calc(100vw - 40px)); box-sizing:border-box; padding:28px; border:1px solid #649eb7; border-radius:18px; background:#0c1529; color:#edf6ff; box-shadow:0 20px 90px #000b; font:16px/1.5 system-ui,sans-serif; }
#friend-entry::backdrop { background:#020713bf; backdrop-filter:blur(5px); }
#friend-entry h2 { margin:0 0 12px; }
#friend-entry label { display:grid; gap:8px; margin:18px 0; }
#friend-entry-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
#friend-entry-error { color:#ffb4ba; }
#friend-entry button:disabled { opacity:.5; cursor:wait; }
body.classic-mode {
  --friend-surface:#fafcfc;
  --friend-text:#17272c;
  --friend-border:#b9c5cb;
  --friend-button:#e9eff1;
  --friend-input:#fff;
  --friend-shadow:0 3px 12px #18232a14;
}
body.classic-mode.classic-dark-mode {
  --friend-surface:#111a20;
  --friend-text:#e6edef;
  --friend-border:#42545d;
  --friend-button:#23333d;
  --friend-input:#0a1014;
  --friend-shadow:0 3px 12px #0004;
}
body.classic-mode :is(#friend-bar,#friend-entry,#friend-resume-card,#menu-online) {
  color:var(--friend-text); background:var(--friend-surface); border-color:var(--friend-border);
  border-radius:10px; box-shadow:var(--friend-shadow); text-shadow:none; backdrop-filter:none;
}
body.classic-mode #friend-bar[data-your-turn="true"] { border-color:#0b858d; box-shadow:var(--friend-shadow); }
body.classic-mode :is(#friend-bar,#friend-entry,#friend-resume-card,#menu-online) button,
body.classic-mode #friend-return button {
  color:var(--friend-text); background:var(--friend-button); border-color:var(--friend-border); box-shadow:none; text-shadow:none;
}
body.classic-mode :is(#menu-online,#friend-entry) :is(input,select) {
  color:var(--friend-text); background:var(--friend-input); border-color:var(--friend-border);
}
body.classic-mode #friend-entry::backdrop { background:#17272c66; backdrop-filter:blur(3px); }
body.classic-mode #friend-entry-error { color:#af2635; }
body.classic-mode.classic-dark-mode #friend-entry-error { color:#ffb4ba; }
@media(max-width:760px), (max-height:500px) {
  #friend-bar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:6px; row-gap:1px; width:min(520px,calc(100vw - 16px)); top:150px; padding:5px 10px; font-size:12px; border-radius:9px; box-shadow:0 2px 8px #0002; }
  #friend-bar header { display:contents; }
  #friend-bar strong { grid-column:1; grid-row:1; align-self:end; font-size:10px; line-height:1.2; letter-spacing:.04em; }
  #friend-state { grid-column:1; grid-row:2; align-self:start; margin:0; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #friend-bar #friend-details { grid-column:2; grid-row:1 / 3; min-height:40px; padding:6px 10px; font-size:12px; white-space:nowrap; }
  #friend-bar #friend-bar-close { grid-column:3; grid-row:1 / 3; }
  #friend-bar #friend-reconnect { grid-column:1 / -1; min-height:36px; padding:5px 8px; }
  #friend-return { right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); font-size:12px; }
  #menu-online { max-height:calc(var(--game-viewport-height, 100dvh) - 90px); }
  #friend-entry { padding:20px; font-size:14px; }
  /* Keep iOS from zooming/panning the page when editing player names. */
  #friend-entry input, #menu-online input, #menu-online select { font-size:16px; }
}