/* German Dominion - Friends page. Tokens from /_shared.css; topbar from
   /assets/topbar.css. English copy only, no emojis (site copy policy). */

.friends-main { max-width: 860px; margin: 0 auto; padding: clamp(34px, 6vw, 84px) clamp(16px, 5vw, 48px) 110px; }

.friends-intro { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.friends-intro h1 { margin: 0; font: 400 clamp(38px, 6vw, 72px)/0.98 var(--display); text-transform: uppercase; color: var(--bone); }
.friends-intro p { margin: 8px 0 0; max-width: 560px; color: var(--bone-62); font-size: 14px; line-height: 1.5; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .22em; }

/* map-visibility master toggle */
.vis-toggle { display: flex; align-items: center; gap: 14px; max-width: 330px; padding: 13px 16px; border: 1px solid var(--glass-border); border-radius: 13px; background: var(--glass); cursor: pointer; }
.vis-copy { display: grid; gap: 4px; }
.vis-label { color: var(--bone); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.vis-hint { color: var(--bone-62); font-size: 11.5px; line-height: 1.45; }
.switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--glass-border); transition: background .2s var(--ease), border-color .2s var(--ease); }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone-62); transition: transform .2s var(--ease), background .2s var(--ease); }
.switch input:checked + .knob { background: rgba(57,201,119,.18); border-color: var(--accent); }
.switch input:checked + .knob::after { transform: translateX(18px); background: var(--accent); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* scenes */
.scene { display: none; }
body[data-scene="loading"] #scene-loading { display: block; }
body[data-scene="noauth"] #scene-noauth { display: block; }
body[data-scene="main"] #scene-main { display: grid; gap: 18px; }
.scene-card { display: grid; place-items: center; gap: 18px; min-height: 320px; padding: 48px 24px; text-align: center; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); }
.scene-card h2 { margin: 0; font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.scene-card p { margin: 0; max-width: 460px; color: var(--bone-62); font-size: 14px; line-height: 1.55; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bone-18); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* panels */
.panel { border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%); overflow: hidden; }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.panel > header h2 { margin: 0; font: 400 20px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.panel > header .sub { color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.panel .body { padding: 18px 22px 22px; }

/* buttons */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); color: var(--bone); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; text-decoration: none; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.btn:hover { border-color: var(--accent); color: var(--accent-hot); }
.btn.primary { border-color: var(--accent); background: rgba(57,201,119,.12); color: var(--accent-hot); }
.btn.primary:hover { background: rgba(57,201,119,.2); }
.btn.danger { border-color: rgba(230,59,46,.5); color: #ff7b70; }
.btn.danger:hover { background: rgba(230,59,46,.1); }
.btn.mini { padding: 5px 9px; font-size: 9px; border-radius: 7px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* add panel */
.add-method { display: grid; gap: 7px; }
.add-method label { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.add-method input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); color: var(--bone); font: 500 13px/1.2 var(--mono); }
.add-method input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.add-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 700px) { .add-columns { grid-template-columns: 1fr; } }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1 1 auto; min-width: 0; }
.hint { margin: 7px 0 0; color: var(--bone-34); font-size: 11.5px; line-height: 1.5; }
.mycode-row code { padding: 2px 7px; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--bg-1); color: var(--accent-hot); font: 700 11px/1.6 var(--mono); letter-spacing: .08em; }

/* search dropdown */
.search-wrap { position: relative; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg-0, #0b0d10); box-shadow: 0 18px 50px -18px rgba(0,0,0,.7); }
.search-results[hidden] { display: none; }
.search-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 9px; }
.search-item:hover { background: var(--glass); }
.search-item .who { display: grid; gap: 3px; min-width: 0; }
.search-item .nm { color: var(--bone); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .ctx { color: var(--bone-34); font: 600 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.search-item .ctx.online { color: var(--accent-hot); }
.search-empty { padding: 12px; color: var(--bone-62); font-size: 12.5px; text-align: center; }

/* rows shared by requests + friends lists */
.rows { display: grid; gap: 8px; }
.rowline { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg-1); }
.rowline .avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass) center/cover no-repeat; }
.rowline .meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.rowline .nm { color: var(--bone); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowline .stat { display: flex; align-items: center; gap: 7px; color: var(--bone-34); font: 600 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.rowline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bone-34); }
.rowline.online .dot { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.rowline.online .stat { color: var(--accent-hot); }
.rowline .ops { display: flex; gap: 7px; flex: 0 0 auto; }
.tag.onmap { display: inline-block; justify-self: start; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent-hot); background: rgba(57,201,119,.1); font: 700 8.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

.req-group h3 { margin: 0 0 9px; color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.req-group + .req-group { margin-top: 16px; }
.empty { margin: 0; color: var(--bone-34); font-size: 12.5px; line-height: 1.55; }

/* toast + modal (live-page pattern) */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 80; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-0, #0b0d10); color: var(--bone); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); max-width: min(90vw, 480px); text-align: center; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-color: rgba(230,59,46,.55); color: #ff9b93; }
#toast.ok { border-color: var(--accent); }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(5,6,8,.72); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(440px, 100%); padding: 22px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--bg-0, #0b0d10); display: grid; gap: 14px; }
.modal-card h3 { margin: 0; font: 400 22px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.modal-card p { margin: 0; color: var(--bone-62); font-size: 13.5px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }