/* Shared form and auxiliary-screen typography; dynamic display states stay owned by JS. */
html.yosh-pacome-responsive body.y-app :is(.butt4,.buttW,.profile-inline-action,.profile-auth-link,.buttmenu,.buttmenuy,.butt) { min-height:44px; max-width:100%; padding:10px 14px; border-radius:24px; font:700 13px/1.5 var(--y-body); letter-spacing:.4px; box-sizing:border-box; }
html.yosh-pacome-responsive body.y-app :is(.butt4,.profile-inline-action) { color:var(--y-ink); background:var(--y-yellow); border:1px solid var(--y-yellow); }
html.yosh-pacome-responsive body.y-app :is(.buttW,.butt) { color:var(--y-fg); border:1px solid var(--y-line); background:var(--y-card); }
html.yosh-pacome-responsive body.y-app :is(.buttmenu,.buttmenuy) { border-radius:0; background:none; color:var(--y-fg); font:400 21px/1.2 var(--y-display); }
html.yosh-pacome-responsive body.y-app :is(.form,.form-mini,.form-lineup) { width:100%; max-width:100%; margin:6px 0 14px!important; min-width:0; background:var(--y-bg2); color:var(--y-fg); font:400 16px/1.4 var(--y-body)!important; border:1px solid var(--y-line); border-radius:6px; padding:12px; box-sizing:border-box; }
html.yosh-pacome-responsive body.y-app textarea { min-height:120px; resize:vertical; }
html.yosh-pacome-responsive body.y-app .inforegister { max-width:100%; margin:12px 0; padding:12px; color:var(--y-fg); font:400 14px/1.5 var(--y-body); overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #register-container { padding:20px 16px; font:400 14px/1.6 var(--y-body); }
html.yosh-pacome-responsive body.y-app #main-4 #register,html.yosh-pacome-responsive body.y-app #main-4 #login { width:100%; margin:0; padding:0; }
html.yosh-pacome-responsive body.y-app :is(#newfriend,#pannel4tonight,#friendpage,#invitepage) { top:64px!important; bottom:auto!important; left:0!important; width:100%!important; height:calc(100dvh - 64px - var(--y-bottom-nav,76px))!important; min-height:0!important; max-height:none; overflow-y:auto; overflow-x:clip; padding:20px 16px 80px; background:var(--y-bg)!important; color:var(--y-fg)!important; font:400 15px/1.5 var(--y-body)!important; z-index:12400!important; box-sizing:border-box; }
html.yosh-pacome-responsive body.y-app .closeBtn { position:absolute; top:10px; right:12px; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--y-line); border-radius:50%; font:20px var(--y-body); background:var(--y-card); color:var(--y-fg); cursor:pointer; }
html.yosh-pacome-responsive body.y-app #newfriend .QRcode { width:240px; height:240px; max-width:100%; margin:48px auto 24px; padding:10px; background:white; }
html.yosh-pacome-responsive body.y-app #newfriend .QRcode img,html.yosh-pacome-responsive body.y-app #newfriend .QRcode canvas { max-width:100%; max-height:100%; }
html.yosh-pacome-responsive body.y-app #qr-picture { width:100%; max-width:360px; height:auto; min-height:240px; margin:16px auto; }
html.yosh-pacome-responsive body.y-app #container4circles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:12px; width:100%; max-width:600px; margin:12px auto; }
html.yosh-pacome-responsive body.y-app #container4circles .circle-wrapper { width:auto; min-width:0; }
html.yosh-pacome-responsive body.y-app #container4circles .circle { width:60px; max-width:100%; height:60px; min-height:44px; border-width:2px; font:400 24px var(--y-display); }
html.yosh-pacome-responsive body.y-app #container4circles .title { font:700 11px/1.4 var(--y-body); }
html.yosh-pacome-responsive body.y-app #remaining-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); align-content:start; align-items:start; gap:12px 10px; width:100%; height:auto; overflow:visible; }
html.yosh-pacome-responsive body.y-app #remaining-container .contentami { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; width:100%; min-width:0; max-width:none; min-height:0; height:auto; margin:0; padding:0; border:0; background:none; color:var(--y-fg); cursor:pointer; }
html.yosh-pacome-responsive body.y-app #remaining-container .nameami { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; width:100%; height:auto; font:700 12px/1.4 var(--y-body); text-align:center; white-space:normal; overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #remaining-container img { width:60px; height:60px; border-width:2px; object-fit:cover; }
html.yosh-pacome-responsive body.y-app #friendpage .friend-profile-back { position:static; min-height:44px; font:700 13px var(--y-body); border:1px solid var(--y-line); border-radius:24px; color:var(--y-fg); background:var(--y-card); margin:0 0 20px; }
html.yosh-pacome-responsive body.y-app #friendpage .friend-profile-shell { width:100%; max-width:560px; margin:auto; padding:0; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-cnt { min-height:140px; padding:0; margin:0; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-tof { width:76px; height:76px; top:0; left:0; border:3px solid var(--y-fg); }
html.yosh-pacome-responsive body.y-app #friendpage .fr-mini-title-name { top:16px; left:94px; width:calc(100% - 94px); font:400 26px/1.1 var(--y-display); }
html.yosh-pacome-responsive body.y-app #friendpage .friend-profile-public-identity { top:60px; left:94px; font:400 13px var(--y-body); }
html.yosh-pacome-responsive body.y-app #friendpage .profile-section { margin:16px 0; padding:16px; border:1px solid var(--y-line); background:var(--y-card); border-radius:6px; }
html.yosh-pacome-responsive body.y-app #friendpage .profile-section-title { font:400 20px var(--y-display); }
html.yosh-pacome-responsive body.y-app #friendpage .friend-reward-tile { min-height:100px; padding:10px; border:1px solid var(--y-line); font:700 12px var(--y-body); background:var(--y-bg2); }
html.yosh-pacome-responsive body.y-app #friendpage .friend-reward-tile img { width:50px; height:50px; }
html.yosh-pacome-responsive body.y-app #friendpage .profil-locate { position:static; width:auto; min-height:44px; font:700 12px var(--y-body); }
html.yosh-pacome-responsive body.y-app #friendpage .profil-locate img { width:24px; height:24px; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-cnt { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px 14px; align-items:center; min-height:0; height:auto; padding:16px; background:var(--y-bg2); border:1px solid var(--y-line); border-radius:6px; }
html.yosh-pacome-responsive body.y-app #friendpage :is(#FRmini-container,#FRprofil-bg,#mini-rewardFR) { display:none; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-tof { position:static; inset:auto; margin:0; grid-column:1; grid-row:1/3; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-name { position:static; inset:auto; width:auto; margin:0; grid-column:2; grid-row:1; font:400 24px/1.15 var(--y-display); text-align:left; overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-identity { position:static; inset:auto; width:auto; grid-column:2; grid-row:2; overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofile-qr-context { grid-column:1/-1; grid-row:3; margin:4px 0; text-align:left; overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofile-qr-context[hidden] { display:none; }
html.yosh-pacome-responsive body.y-app #friendpage #FRprofil-cnt .profil-locate { grid-column:1/-1; grid-row:4; margin:0; min-height:24px; justify-self:end; }
html.yosh-pacome-responsive body.y-app #invitepage :is(.miniami,.listTof) { width:56px; height:56px; border-width:2px; }
html.yosh-pacome-responsive body.y-app #invitepage :is(.listFr,.nmList) { font:700 14px var(--y-body); }
html.yosh-pacome-responsive body.y-app #barre-2 .bottom-nav-item > span:not(.y-desktop-icon) { font:700 10px var(--y-body); }
@media(min-width:1024px) {
 html.yosh-pacome-responsive body.y-app :is(#newfriend,#pannel4tonight,#friendpage,#invitepage) { left:72px!important; width:400px!important; height:calc(100dvh - 64px)!important; }
}

/* 4Tonight fills the viewport, including when the desktop sidebar is resized. */
html.yosh-pacome-responsive body.y-app #pannel4tonight[role=dialog] { position:fixed; inset:0!important; width:100%!important; height:100dvh!important; max-height:100dvh; margin:0; padding:70px 16px 24px; z-index:13000!important; overscroll-behavior:contain; text-align:center; }
html.yosh-pacome-responsive body.y-app #pannel4tonight h2 { margin:0 0 12px; font:400 24px/1.2 var(--y-display); }
html.yosh-pacome-responsive body.y-app #pannel4tonight .closeBtn { position:fixed; top:12px; right:16px; background:var(--y-yellow); color:#000; }
html.yosh-pacome-responsive body.y-app #pannel4tonight .fourtonight-validation { margin:12px 0 18px; }
html.yosh-pacome-responsive body.y-app #container4circles .title { overflow-wrap:anywhere; }
html.yosh-pacome-responsive body.y-app #container4circles .circle { flex:none; padding:0; margin:0 auto 6px; }