updates

frontend/src/App.jsx

@@ -156,14 +156,11 @@ function AppContent() {
           <div className="flex items-center gap-4 mt-4 md:mt-0 relative">
             {isLoggedIn ? (
               <div className="flex items-center gap-3 relative">
-                <div className="flex flex-col text-right">
+                {/* Desktop: username left of button. Mobile: hidden here, shown below button */}
+                <div className="hidden md:flex flex-col text-right">
                   <div className="flex items-center gap-1.5 justify-end">
                     {userProfile.isAdmin && (
-                      <Shield
-                        size={14}
-                        className="text-yellow-500"
-                        title="Admin Mode"
-                      />
+                      <Shield size={14} className="text-yellow-500" title="Admin Mode" />
                     )}
                     <span className="text-sm font-bold text-slate-200">
                       {userProfile.username}
@@ -171,15 +168,26 @@ function AppContent() {
                   </div>
                 </div>
 
-                <button
-                  onClick={() => setShowSettings(!showSettings)}
-                  className="p-2 bg-slate-900 border border-slate-700 rounded-full hover:bg-slate-800 hover:border-luigi-500 hover:text-luigi-400 transition-colors shadow-sm"
-                >
-                  <Settings size={18} />
-                </button>
+                <div className="flex flex-col items-center gap-1">
+                  <button
+                    onClick={() => setShowSettings(!showSettings)}
+                    className="p-2 bg-slate-900 border border-slate-700 rounded-full hover:bg-slate-800 hover:border-luigi-500 hover:text-luigi-400 transition-colors shadow-sm"
+                  >
+                    <Settings size={18} />
+                  </button>
+                  {/* Mobile only: username under the button */}
+                  <div className="flex md:hidden items-center gap-1">
+                    {userProfile.isAdmin && (
+                      <Shield size={10} className="text-yellow-500" />
+                    )}
+                    <span className="text-[10px] font-bold text-slate-400 whitespace-nowrap">
+                      {userProfile.username}
+                    </span>
+                  </div>
+                </div>
 
                 {showSettings && (
-                  <div className="absolute top-full right-0 mt-2 w-64 sm:w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl p-3 sm:p-4 z-dropdown animate-in fade-in slide-in-from-top-2 flex flex-col gap-3 sm:gap-4">
+                  <div className="absolute top-full left-0 md:left-auto md:right-0 mt-2 w-64 sm:w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl p-3 sm:p-4 z-dropdown animate-in fade-in slide-in-from-top-2 flex flex-col gap-3 sm:gap-4">
 
                     {/* Default ID Setting */}
                     <div>

frontend/src/components/PlayerCardVisual.jsx

@@ -216,7 +216,7 @@ export const PlayerCardVisual = ({
                   minHeight: 0,
                   touchAction: "manipulation",
                 }}
-                className={`flex items-center justify-center rounded-full text-[8px] font-bold leading-none transition-colors shadow-md transform-gpu cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full text-[7px] font-bold leading-none transition-colors shadow-md transform-gpu cursor-pointer select-none
                   ${isCap
                     ? activeChipType === "tc"
                       ? "bg-purple-500 text-white border border-purple-300"
@@ -238,7 +238,7 @@ export const PlayerCardVisual = ({
                   minHeight: 0,
                   touchAction: "manipulation",
                 }}
-                className={`flex items-center justify-center rounded-full text-[8px] font-bold leading-none transition-colors shadow-md cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full text-[7px] font-bold leading-none transition-colors shadow-md cursor-pointer select-none
                   ${isVice ? "bg-slate-300 text-slate-900 border border-white" : "bg-slate-900/90 text-slate-400 border border-slate-700 hover:text-white"}`}
               >
                 V