/* Page 81 · FRIENDS. Page chrome + hub screens = 72_base.css (p70- / g-), room bits = 72_pf.css (q72-), the fight HUD bits =
   74_tr.css (t74-). This file adds the FRIENDS parts (f81-). Screens are 998 x 460 game units (iPhone 16 landscape); the
   wide shape is 998 x 748 (iPad 4:3). */
.dF { --dc: #59F08A; } .dI { --dc: #FFD23F; } .dP { --dc: #4AA3FF; } .dR { --dc: #FF8A1F; } .dK { --dc: #FF8AB3; } .dU { --dc: #B79CFF; }
.p81 .p70-hero h1 { font-size: clamp(42px, 6vw, 78px); }
.f81-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.f81-rules span { font: 400 13.5px/1.2 var(--f-display); letter-spacing: 0.04em; padding: 8px 11px 7px; border-radius: 10px; border: 2.5px solid var(--ink); box-shadow: 2px 4px 0 var(--ink); background: var(--panel-2); color: #fff; }
.f81-rules span.y { background: var(--yellow); color: var(--ink); }
.f81-lbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.f81-lbar button { font: 400 13.5px/1 var(--f-display); letter-spacing: 0.04em; padding: 8px 10px 7px; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--panel-2); color: var(--cream-2); box-shadow: 1px 3px 0 var(--ink); cursor: pointer; }
.f81-lbar button.on { background: var(--yellow); color: var(--ink); }
.f81-lcap { margin: 10px 2px 0; font-size: 14.5px; color: var(--cream-2); min-height: 1.5em; }
.p70-fit.f81-tall { aspect-ratio: 998 / 748; }
.f81-box { margin-top: 22px; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 6px 0 var(--ink); padding: 14px 18px 12px; background: linear-gradient(180deg, #2E2850, #1E1A33 70%); }
.f81-box h4 { margin: 0 0 8px; font: 400 19px/1 var(--f-display); letter-spacing: 0.04em; color: var(--dc, var(--yellow)); }
.f81-box ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.f81-box li { color: var(--cream-2); font-size: 14.5px; line-height: 1.45; }
.f81-box li b { color: #fff; }
.f81-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
@media (max-width: 860px) { .f81-two, .p81 .p70-flow { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- in the game screens */
.g-scr .f81-sw { left: 186px; top: 10px; height: 46px; display: flex; border: 3px solid var(--ink); border-radius: 13px; overflow: hidden; box-shadow: 2px 4px 0 var(--ink); z-index: 2; }
.g-scr .f81-sw span { padding: 0 16px; display: flex; align-items: center; gap: 8px; font-size: 19px; background: linear-gradient(180deg, #353052, #23203A); color: rgba(255, 255, 255, 0.72); border-left: 3px solid var(--ink); position: relative; }
.g-scr .f81-sw span:first-child { border-left: 0; }
.g-scr .f81-sw span.on { background: linear-gradient(180deg, #FFEB8A, #FFD23F 45%, #F4AE00); color: var(--ink); }
.g-scr .f81-sw em { font-style: normal; font-size: 14px; background: #F23D4F; color: #fff; border: 2.5px solid var(--ink); border-radius: 99px; min-width: 24px; height: 24px; display: grid; place-items: center; line-height: 1; }

.g-scr .f81-head { position: absolute; border-radius: 50%; border: 3.5px solid var(--ink); overflow: hidden; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.g-scr .f81-head::after { content: ""; position: absolute; left: 22%; top: 16%; width: 26%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, 0.38); }
.g-scr .f81-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); z-index: 2; }
.g-scr .f81-dot.on { background: #59F08A; } .g-scr .f81-dot.mt { background: #FF9A2E; } .g-scr .f81-dot.off { background: #8E99B0; }

.g-scr .f81-tabs { display: flex; gap: 8px; }
.g-scr .f81-tabs span { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 11px; background: #1A1630; color: rgba(255, 255, 255, 0.7); font-size: 18px; box-shadow: 1px 3px 0 var(--ink); }
.g-scr .f81-tabs span.on { background: var(--yellow); color: var(--ink); }
.g-scr .f81-tabs b { font-weight: 400; font-size: 15px; background: rgba(0, 0, 0, 0.28); border-radius: 7px; padding: 2px 6px 1px; }
.g-scr .f81-tabs span.on b { background: rgba(29, 27, 36, 0.16); }
.g-scr .f81-tabs em { font-style: normal; font-size: 13px; background: #F23D4F; color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 6px 1px; }

.g-scr .f81-row { position: absolute; left: 14px; right: 14px; height: 52px; border-radius: 13px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3D3860, #2C2848); box-shadow: 0 3px 0 var(--ink); }
.g-scr .f81-row.me { background: linear-gradient(180deg, #5B4A12, #3E3210); }
.g-scr .f81-row .nm { position: absolute; left: 62px; top: 5px; font-size: 20px; color: #fff; white-space: nowrap; }
.g-scr .f81-row .nm small { font-size: 14px; color: var(--yellow); margin-left: 6px; }
.g-scr .f81-row .sub { position: absolute; left: 62px; top: 28px; font: 800 13.5px/1.1 var(--f-body); letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.66); white-space: nowrap; }
.g-scr .f81-row .sub i { font-style: normal; color: #59F08A; } .g-scr .f81-row .sub i.mt { color: #FFB060; }
.g-scr .f81-rb { position: absolute; top: 6px; height: 34px; border: 3px solid var(--ink); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 17px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.g-scr .f81-rb.y { background: linear-gradient(180deg, #FFEB8A, #FFD23F 45%, #F4AE00); color: var(--ink); }
.g-scr .f81-rb.g { background: linear-gradient(180deg, #7FE8A0, #2DC768 50%, #13A04A); color: #fff; }
.g-scr .f81-rb.dk { background: linear-gradient(180deg, #353052, #23203A); color: #fff; }
.g-scr .f81-rb.sent { background: #1D3B2C; color: #7CFFA3; }
.g-scr .f81-rb svg { width: 18px; height: 18px; }
.g-scr .f81-more { width: 38px; padding: 0; font-size: 22px; letter-spacing: 0; }

.g-scr .f81-code { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: linear-gradient(180deg, #FFF6E0, #F3E4BF); color: var(--ink); }
.g-scr .f81-code .t { position: absolute; left: 14px; top: 14px; font-size: 17px; letter-spacing: 0.06em; color: #7A5A1E; }
.g-scr .f81-code .c { position: absolute; left: 12px; top: 44px; display: flex; gap: 4px; align-items: center; }
.g-scr .f81-code .c span { width: 25px; height: 36px; border-radius: 7px; border: 2.5px solid var(--ink); background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 2px 0 var(--ink); }
.g-scr .f81-code .c i { width: 10px; height: 4px; background: var(--ink); border-radius: 2px; margin: 0 2px; }
.g-scr .f81-code .s { position: absolute; left: 16px; bottom: 9px; font: 800 13.5px/1.1 var(--f-body); letter-spacing: 0.04em; color: #6A5A3A; }
.g-scr .f81-search { height: 58px; border-radius: 16px; border: 4px solid var(--ink); background: #FFFFFF; color: #8E8AA0; box-shadow: 0 5px 0 var(--ink); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 18px; white-space: nowrap; overflow: hidden; }
.g-scr .f81-search svg { width: 26px; height: 26px; flex: none; }
.g-scr .f81-search b { font-weight: 400; color: var(--ink); }
.g-scr .f81-search .caret { width: 3px; height: 28px; background: #2F7BFF; margin-left: -6px; animation: f81-blink 1s steps(1) infinite; }
@keyframes f81-blink { 50% { opacity: 0; } }

.g-scr .f81-rank { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; background: radial-gradient(90% 80% at 80% 10%, #FF8A1F, transparent 70%), linear-gradient(180deg, #E8394A, #A8213A); }
.g-scr .f81-rank .t { position: absolute; left: 16px; top: 12px; font-size: 23px; line-height: 1; }
.g-scr .f81-rank .s { position: absolute; left: 16px; top: 44px; font: 800 13.5px/1.2 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.g-scr .f81-rank .me { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: baseline; gap: 8px; }
.g-scr .f81-rank .me b { font-weight: 400; font-size: 48px; line-height: 0.9; color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); }
.g-scr .f81-rank .me span { font-size: 17px; }

.g-scr .f81-dim { position: absolute; inset: 0; background: rgba(12, 8, 26, 0.66); z-index: 6; }
.g-scr .f81-sheet { position: absolute; z-index: 7; border-radius: 20px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); background: linear-gradient(180deg, #403A66, #2A2546); }
.g-scr .f81-sheet h3 { position: absolute; left: 22px; top: 14px; margin: 0; font-weight: 400; font-size: 28px; line-height: 1; color: #fff; }
.g-scr .f81-sheet p { position: absolute; left: 22px; right: 22px; margin: 0; font: 700 15.5px/1.35 var(--f-body); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); }
.g-scr .f81-opt { position: absolute; left: 18px; right: 18px; height: 50px; border-radius: 13px; border: 3px solid var(--ink); background: linear-gradient(180deg, #353052, #23203A); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: 20px; box-shadow: 0 3px 0 var(--ink); }
.g-scr .f81-opt svg { width: 24px; height: 24px; flex: none; }
.g-scr .f81-opt.red { color: #FF8B97; } .g-scr .f81-opt.on { background: var(--yellow); color: var(--ink); }
.g-scr .f81-opt small { margin-left: auto; font: 800 13px/1 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); }

/* the friend's profile (the own page's parts, H's P1+) */
.g-scr .f81-hero { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; background: radial-gradient(80% 90% at 20% 20%, #5AA8FF, transparent 70%), linear-gradient(180deg, #2F7BFF, #1C4FC2); }
.g-scr .f81-ring { position: absolute; border-radius: 50%; border: 4px solid var(--ink); background: conic-gradient(#FFD23F 0 68%, rgba(0, 0, 0, 0.3) 68% 100%); }
.g-scr .f81-ring i { position: absolute; inset: 7px; border-radius: 50%; border: 3.5px solid var(--ink); background: radial-gradient(circle at 50% 40%, #FF9F5A, #E8641F); overflow: hidden; }
.g-scr .f81-lv { position: absolute; font-size: 19px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 9px; padding: 3px 7px 1px; line-height: 1; z-index: 2; }
.g-scr .f81-plate { position: absolute; height: 32px; border-radius: 9px; border: 3px solid var(--ink); background: linear-gradient(180deg, #FFEB8A, #F4AE00); color: var(--ink); font-size: 18px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 3px 0 var(--ink); }
.g-scr .f81-form { position: absolute; display: flex; gap: 4px; }
.g-scr .f81-form span { width: 24px; height: 24px; border-radius: 6px; border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.g-scr .f81-form .w { background: #59F08A; color: var(--ink); } .g-scr .f81-form .l { background: #E8394A; }
.g-scr .f81-xp { position: absolute; height: 18px; border-radius: 99px; border: 3px solid var(--ink); background: #10205A; overflow: hidden; }
.g-scr .f81-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FFE98C, #FFD23F); }
.g-scr .f81-rstrip { border-radius: 14px; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: linear-gradient(180deg, #FFEB8A, #FFD23F 50%, #F4AE00); color: var(--ink); }
.g-scr .f81-paper { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: linear-gradient(180deg, #FFF8E8, #F2E3C4); color: var(--ink); }
.g-scr .f81-stat { position: absolute; width: 186px; height: 98px; border-radius: 14px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); }
.g-scr .f81-stat small { position: absolute; left: 12px; top: 10px; font-size: 15px; letter-spacing: 0.06em; color: #7A6A4A; }
.g-scr .f81-stat b { position: absolute; left: 12px; bottom: 10px; font-weight: 400; font-size: 36px; line-height: 1; color: var(--ink); }
.g-scr .f81-mini { display: flex; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; }
.g-scr .f81-mini span { padding: 6px 12px 4px; font-size: 16px; background: #E9DCBC; color: #6A5A3A; border-left: 3px solid var(--ink); }
.g-scr .f81-mini span:first-child { border-left: 0; }
.g-scr .f81-mini span.on { background: var(--ink); color: var(--yellow); }

/* invites */
.g-scr .f81-toast { position: absolute; z-index: 8; border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(180deg, #403A66, #2A2546); box-shadow: 0 7px 0 var(--ink), 0 0 34px 6px rgba(89, 240, 138, 0.32); }
.g-scr .f81-toast .k { position: absolute; left: 86px; top: 10px; font-size: 14px; letter-spacing: 0.12em; color: #7CFFA3; }
.g-scr .f81-toast .w { position: absolute; left: 86px; top: 28px; font-size: 22px; line-height: 1.05; color: #fff; white-space: nowrap; }
.g-scr .f81-toast .d { position: absolute; left: 86px; top: 60px; font: 800 13.5px/1.1 var(--f-body); letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.g-scr .f81-tbar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.g-scr .f81-tbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #59F08A; }
.g-scr .f81-chip { position: absolute; z-index: 9; height: 34px; border-radius: 99px; border: 3px solid var(--ink); background: rgba(35, 32, 58, 0.88); display: flex; align-items: center; gap: 7px; padding: 0 12px 0 4px; font-size: 16px; color: #fff; box-shadow: 0 3px 0 rgba(29, 27, 36, 0.8); white-space: nowrap; }
.g-scr .f81-chip .f81-head { position: relative; flex: none; border-width: 2.5px; }
.g-scr .f81-chip em { font-style: normal; font-size: 13px; color: #7CFFA3; letter-spacing: 0.08em; }
.g-scr .f81-chip.min { padding: 0; width: 34px; justify-content: center; }
.g-scr .f81-chip.min .n { position: absolute; right: -7px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #59F08A; color: var(--ink); border: 2.5px solid var(--ink); font-size: 13px; display: grid; place-items: center; line-height: 1; }
.g-scr .f81-zone { position: absolute; z-index: 9; border: 2.5px dashed #FF5FB0; border-radius: 8px; pointer-events: none; }
.g-scr .f81-zone .lb { position: absolute; left: 6px; bottom: -26px; font: 800 14px/1 var(--f-body); letter-spacing: 0.06em; color: #fff; background: #C2307A; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 2px; white-space: nowrap; }
.g-scr .f81-zone .lb.g { bottom: 6px; background: #1D7A44; }
.g-scr .f81-hpn { position: absolute; z-index: 5; font-size: 15px; white-space: nowrap; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }

/* the ranking */
.g-scr .f81-pod { position: absolute; bottom: 0; border: 4px solid var(--ink); border-bottom: 0; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.g-scr .f81-pod b { font-weight: 400; font-size: 34px; line-height: 1; color: var(--ink); }
.g-scr .f81-pod small { font: 800 13.5px/1.1 var(--f-body); color: rgba(29, 27, 36, 0.78); letter-spacing: 0.04em; }
.g-scr .f81-pn { position: absolute; font-size: 17px; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.g-scr .f81-pn small { display: block; font: 800 12.5px/1.2 var(--f-body); letter-spacing: 0.05em; color: var(--yellow); }
.g-scr .f81-rn { position: absolute; left: 12px; top: 10px; width: 30px; font-size: 22px; text-align: center; color: var(--yellow); }
.g-scr .f81-val { position: absolute; right: 14px; top: 6px; text-align: right; font-size: 26px; line-height: 1; }
.g-scr .f81-val small { display: block; font: 800 12.5px/1.2 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); }