/* フレンド */
.friend-chip svg{width:21px;height:21px}
.friend-sheet{width:min(520px,100%);max-height:calc(100% - 8px);display:flex;flex-direction:column;gap:10px}
.fr-head{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.fr-head h3{margin:0}
.fr-switch{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.fr-switch input{position:absolute;opacity:0;pointer-events:none}
.fr-track{position:relative;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(232,203,140,.45);transition:background .2s}
.fr-track i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#cfc4ee;transition:transform .2s,background .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.fr-switch input:checked + .fr-track{background:linear-gradient(90deg,#3fae8a,#68d6a8)}
.fr-switch input:checked + .fr-track i{transform:translateX(18px);background:#fff}
.fr-switch input:focus-visible + .fr-track{outline:2px solid #ffd98a;outline-offset:2px}
.fr-switch b{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.1em;min-width:2.4em;text-align:left;color:#f6eedc}
.fr-tabs i.hot{background:linear-gradient(135deg,#ff5a7a,#d01f4f);color:#fff}
.fr-body{width:100%;flex:1;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;text-align:left}
.friend-sheet.off .fr-list{opacity:.6}
.fr-offnote{font-size:12px;line-height:1.7;color:#ffd0a0;background:rgba(255,160,80,.1);border:1px solid rgba(255,160,80,.35);border-radius:10px;padding:8px 10px;text-align:center}
.fr-search{display:flex;gap:8px;width:100%}
.fr-search input{flex:1;min-width:0;padding:10px 14px;border-radius:99px;border:1.5px solid rgba(232,203,140,.6);background:rgba(10,6,30,.6);color:#fff;font-size:16px;letter-spacing:.04em}
.fr-search input::placeholder{font-size:13px;color:#a99cc9}
.fr-search .btn{min-width:0;flex:none;padding:9px 18px}
.fr-me{font-size:11.5px;color:#a99cc9;letter-spacing:.04em;padding:0 4px}
.fr-me b{color:#f6eedc}
.fr-h{font-size:12px;font-weight:800;letter-spacing:.2em;color:#ffd98a;margin-top:4px;padding:0 4px}
.fr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.fr-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(10,6,30,.5);border:1px solid rgba(232,203,140,.28)}
.fr-item.online{border-color:rgba(120,230,170,.6);box-shadow:inset 0 0 0 1px rgba(120,230,170,.15)}
.fr-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fr-who b{font-size:15px;color:#fff;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-st{font-size:11px;color:#b8acd8;display:flex;align-items:center;gap:5px}
.fr-on{width:8px;height:8px;border-radius:50%;background:#5be3a0;box-shadow:0 0 8px #5be3a0;flex:none}
.fr-item.online .fr-st{color:#9cf0c4}
.fr-rec{font-size:11px;color:#cfc4ee}
.fr-rec em{font-style:normal;font-family:'Cinzel',serif;color:#ffd98a;font-size:12.5px;margin:0 1px}
.fr-acts{display:flex;flex-direction:column;gap:6px;flex:none}
.fr-acts .btn{min-width:0;padding:6px 12px;font-size:12px;letter-spacing:.06em;border-radius:99px}
.fr-acts .btn.ghost{background:transparent;color:#cfc4ee;border-color:rgba(207,196,238,.45);box-shadow:none}
.fr-acts .btn[disabled]{opacity:.4;pointer-events:none}
.fr-empty{list-style:none;padding:22px 8px;text-align:center;font-size:12.5px;line-height:1.8;color:#a99cc9}
.ol-friend{color:#ffd98a;font-size:1.1em}
/* 招待が届いた */
.fr-inv{width:min(360px,100%);gap:12px}
.fr-inv-h{font-family:'Cinzel','Shippori Mincho',serif;font-size:13px;letter-spacing:.4em;color:#ffd98a}
.fr-inv-name{font-size:15px;line-height:1.8}
.fr-inv-name b{font-size:20px;color:#fff;letter-spacing:.06em}
.fr-inv-left{font-family:'Cinzel',serif;font-size:13px;color:#cfc4ee;letter-spacing:.1em}
#frInvite .modal-body{animation:frPop .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes frPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){
  .fr-item{padding:9px 10px}
  .fr-acts .btn{padding:6px 10px;font-size:11.5px}
}
.fr-tabs i:empty{display:none}
.fr-inv .pulls{flex-wrap:nowrap;width:100%;gap:10px}
.fr-inv .pulls .btn{flex:1 1 0;min-width:0}
/* スマホ縦：上のボタン（ジェム・メール・フレンド・アカウント・音）が1行に収まるように詰める */
@media (max-width:420px){
  #home .hud{padding-left:12px;padding-right:12px;gap:6px}
  #home .hud-l,#home .hud-r{gap:6px}
  #home .mail-chip{padding:6px 8px}
  #home .mail-chip svg{width:19px;height:19px}
  #home .hud-r .chip{padding:6px 10px;font-size:12px}
  #home .gems{padding-left:10px;padding-right:10px}
}
/* 対戦中のフレンド */
.fr-busy{width:8px;height:8px;border-radius:50%;background:#ffb347;box-shadow:0 0 8px #ffb347;flex:none;animation:frBusy 1.2s ease-in-out infinite}
@keyframes frBusy{50%{opacity:.35}}
.fr-item.busy{border-color:rgba(255,179,71,.55)}
.fr-item.busy .fr-st{color:#ffd29a}
/* フレンドへのメール */
.fr-who[data-act="write"]{cursor:pointer}
.fr-who[data-act="write"]:hover b{color:#ffd98a}
.fr-mail-ic{font-style:normal;font-size:12px;margin-left:6px;color:#ffd98a;opacity:.85}
.fr-write{display:flex;flex-direction:column;gap:8px;width:100%}
.fr-write input,.fr-write textarea{width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid rgba(232,203,140,.6);background:rgba(10,6,30,.6);color:#fff;font-size:16px;font-family:inherit}
.fr-write textarea{min-height:140px;resize:vertical;line-height:1.7}
.fr-write-btns{display:flex;gap:10px;justify-content:center}
.fr-write-btns .btn{min-width:0;flex:1 1 0}
#frMailCount{text-align:right}
/* ブロック */
.fr-blk{width:8px;height:8px;border-radius:50%;background:#ff6a8a;flex:none}
.fr-item.blocked{border-color:rgba(255,106,138,.45);opacity:.8}
.fr-item.blocked .fr-st{color:#ffb0c0}
.fr-acts .btn.warn{color:#ffb0c0;border-color:rgba(255,106,138,.5)}
/* オンラインのフレンド：名前の横に緑の丸 */
.fr-name-on{display:inline-block;width:10px;height:10px;margin-left:7px;border-radius:50%;background:#5be3a0;box-shadow:0 0 8px #5be3a0;vertical-align:1px}
/* フレンドの一覧：右に4つのボタン（メール・対戦招待・削除・ブロック）を横に並べ、1人分を2行に詰める */
.fr-list .fr-item{padding:6px 10px;gap:8px}
.fr-list .fr-who{gap:1px}
.fr-list .fr-who b{font-size:14px}
.fr-line{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.fr-line .fr-st{flex:none}
.fr-line .fr-rec em{margin:0 2px 0 0}
.fr-list .fr-acts{flex-direction:row;gap:4px}
.fr-list .fr-acts .btn{padding:5px 9px;font-size:11px;letter-spacing:.02em;white-space:nowrap}
.fr-list .fr-acts .btn[data-act="write"]{background:rgba(255,217,138,.14);color:#ffd98a;border-color:rgba(255,217,138,.55);box-shadow:none}
@media (max-width:480px){
  .fr-list .fr-item{padding:6px 6px;gap:4px}
  .fr-list .fr-who b{font-size:13px;letter-spacing:.02em}
  .fr-list .fr-acts{gap:2px}
  .fr-list .fr-acts .btn{padding:4px 5px;font-size:10px;letter-spacing:0}
  .fr-line{gap:4px}
  .fr-line .fr-st,.fr-line .fr-rec{font-size:9.5px}
}
.fr-line .fr-rec{order:-1;flex:none}                                   /* 2行目：戦績を先に、状態はあとで（長いときは …） */
.fr-line .fr-st{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.fr-line .fr-st i{display:inline-block;vertical-align:middle;margin-right:4px}